/***********************/
/*** ICONES ANIMÉES ***/
/*********************/

/*** Menu, Grid, Add/Rm, Scroll - SVG et CSS ***/

.tcon {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 40px; transition: 0.3s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 30px; background: transparent; outline: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;}
.tcon > * {display: block;}
.tcon:hover, .tcon:focus {outline: none;}
.tcon::-moz-focus-inner {border: 0;}

/* MENU */

.tcon-menu__lines {display: inline-block; height: 5px; width: 30px; border-radius: 3px; transition: 0.3s; background: black; position: relative;}
.tcon-menu__lines::before,
.tcon-menu__lines::after {display: inline-block; height: 5px; width: 30px; border-radius: 3px; transition: 0.3s; background: black; content: ''; position: absolute; left: 0; -webkit-transform-origin: 2.85714px center; transform-origin: 2.85714px center; width: 100%;}
.tcon-menu__lines::before {top: 10px;}
.tcon-menu__lines::after {top: -10px;}

.tcon-transform .tcon-menu__lines {-webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8);}

.tcon-menu--xbutterfly {width: auto;}
.tcon-menu--xbutterfly .tcon-menu__lines::before,
.tcon-menu--xbutterfly .tcon-menu__lines::after {-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; transition: top .3s .6s ease, -webkit-transform .3s ease; transition: top .3s .6s ease, transform .3s ease;}

.tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines {background: transparent; }
.tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::before,
.tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::after {top: 0; transition: top .3s ease, -webkit-transform .3s .5s ease; transition: top .3s ease, transform .3s .5s ease; width: 30px;}
.tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::before {-webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg);}
.tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::after {-webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg);}

.tcon-visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.tcon-visuallyhidden:active,
.tcon-visuallyhidden:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}

/* GRID */

.tcon-grid {padding: 1rem;}
.tcon-grid .tcon-grid__item {width: 0.5rem; height: 0.5rem; background: black; color: black; transition: 0.3s;}

.tcon-grid.tcon-transform .tcon-grid__item { -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8); transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);}
.tcon-grid--rearrange .tcon-grid__item {box-shadow: -0.625rem -0.625rem, 0 -0.625rem, 0.625rem -0.625rem, -0.625rem 0, 0.625rem 0, -0.625rem 0.625rem, 0 0.625rem, 0.625rem 0.625rem;}
.tcon-grid--rearrange.tcon-transform .tcon-grid__item {box-shadow: 0 -0.5rem, 0 -1rem, 0.5rem 0, -1rem 0, 1rem 0, -0.5rem 0, 0 1rem, 0 0.5rem;}

/* ADD - REMOVE */

.tcon-remove {height: 40px; position: relative; -webkit-transform: scale(0.75); transform: scale(0.75); width: 40px;}
.tcon-remove::before,
.tcon-remove::after {content: ""; display: block; height: 25%; width: 85%; position: absolute; top: 37%; left: 8%; transition: 0.3s; background: black;}
.tcon-remove::before {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.tcon-remove::after {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.tcon-remove--check.tcon-transform::before {-webkit-transform: rotate(-135deg) translate(5%, -10%); transform: rotate(-135deg) translate(5%, -10%);top: 50%; width: 55%;}
.tcon-remove--check.tcon-transform::after {-webkit-transform: rotate(-45deg) translate(20%, 10%); transform: rotate(-45deg) translate(20%, 10%); top: 50%; width: 85%;}

/* SCROLL */

.tcon-svgchevron {height: 40px; width: 40px;}
.tcon-svgchevron path {-webkit-animation: chevron-pulse 3s infinite cubic-bezier(0.4, 0, 0.2, 1); animation: chevron-pulse 3s infinite cubic-bezier(0.4, 0, 0.2, 1); fill: transparent; stroke: #00a99d; stroke-width: 1px;}
.tcon-svgchevron path.a1 {-webkit-animation-delay: 0s; animation-delay: 0s;}
.tcon-svgchevron path.a2 {-webkit-animation-delay: -0.5s; animation-delay: -0.5s;}
.tcon-svgchevron path.a3 {-webkit-animation-delay: -1s; animation-delay: -1s;}

@-webkit-keyframes chevron-pulse {
  0% {opacity: 0;}
  40% {opacity: 1;}
  80% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes chevron-pulse {
  0% {opacity: 0;}
  40% {opacity: 1;}
  80% {opacity: 0;}
  100% {opacity: 0;}
}