@charset "UTF-8";
/*                                  INIT                                   */
/*                                 Variables                               */
/*                                                                         */
* {
  scroll-behavior: smooth;
}

::-moz-selection {
  background-color: none;
}

::selection {
  background-color: none;
}

html, body {
  height: 100%;
}

body {
  overflow-x: hidden !important;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #0f1011;
  font-family: 'Nunito', sans-serif;
}

#accueil .container h1, #accueil .container .neon, #section_2 #about h2, #Présentation .Title h2, #Infographies .title_text h2, #Formulaire h2 {
  font-family: 'Satisfy', cursive;
  font-weight: light;
}

.loader {
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: #0A0A0A;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.loader .common {
  position: relative;
  padding-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-column-gap: 50px;
          column-gap: 50px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
}

.loader .common .menu {
  position: relative;
  overflow: hidden;
  width: 220px;
  height: 220px;
  margin-bottom: 100px;
  color: white;
  background: linear-gradient(255deg, #8530d0 0%, #0b063b 50%);
  -webkit-box-shadow: 0px 0px 40px #ff4800;
          box-shadow: 0px 0px 40px #ff4800;
  background-size: 200%;
  background-position: 0% 100%;
  border-radius: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background: linear-gradient(39deg, #9D3A1D 0%, #af4221 50%, #B7551A 100%);
  -webkit-animation: blob 6s linear alternate infinite, 2s 0s grow_up ease-in-out alternate infinite;
          animation: blob 6s linear alternate infinite, 2s 0s grow_up ease-in-out alternate infinite;
}

@-webkit-keyframes grow_up {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
}

@keyframes grow_up {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
}

@-webkit-keyframes blob {
  0% {
    border-radius: 40% 50% 40% / 50% 40% 50%;
  }
  20% {
    border-radius: 50% 40% 50% / 40% 50% 40%;
  }
  40% {
    border-radius: 40% 50% 40% / 50% 40% 50%;
  }
  60% {
    border-radius: 50% 40% 50% / 40% 50% 40%;
  }
  80% {
    border-radius: 40% 50% 40% / 50% 40% 50%;
  }
  100% {
    border-radius: 50% 40% 50% / 40% 50% 40%;
  }
}

@keyframes blob {
  0% {
    border-radius: 40% 50% 40% / 50% 40% 50%;
  }
  20% {
    border-radius: 50% 40% 50% / 40% 50% 40%;
  }
  40% {
    border-radius: 40% 50% 40% / 50% 40% 50%;
  }
  60% {
    border-radius: 50% 40% 50% / 40% 50% 40%;
  }
  80% {
    border-radius: 40% 50% 40% / 50% 40% 50%;
  }
  100% {
    border-radius: 50% 40% 50% / 40% 50% 40%;
  }
}

/*                                 SCROLLBAR                                   */
body::-webkit-scrollbar {
  width: 12px;
  /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: none;
  /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: white;
  /* color of the scroll thumb */
  border-radius: 20px;
  /* roundness of the scroll thumb */
  border: 3px solid hidden;
  /* creates padding around scroll thumb */
}

#accueil, #section_2, #section_3, #Présentation, #Infographies, #Sites, #Tarifs, #Formulaire {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/*                          BackTop                             */
:root {
  font-size: 20px;
  --red: #da2c4d;
  --yellow: #f8ab37;
  --green: #2ecc71;
  --white: #ffffff;
  --grey-light: #f2f7f9;
  --grey: #ecedf3;
  --black: #080808;
  --black-blue: #1f2029;
  --black-blue-light: #353746;
  --black-blue-light-2: #404255;
  --black-blue-light-3: #4b4d64;
  --black-light: #424455;
}

/* #Progress
================================================== */
.progress-wrap {
  position: fixed;
  right: 25px;
  bottom: 25px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  -webkit-box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
          box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.progress-wrap::after {
  display: block;
  position: absolute;
  font-family: 'Material Icons';
  content: '\e5ce';
  text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128;
  color: #f3e0a0;
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::after {
  opacity: 0;
}

.progress-wrap::before {
  position: absolute;
  font-family: 'Material Icons';
  content: '\e5ce';
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  opacity: 0;
  text-shadow: 0 0 1vw #FED128, 0 0 3vw #FED128, 0 0 10vw #FED128, 0 0 10vw #FED128, 0 0 .4vw #FA1C16;
  color: #ffb4b1;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::before {
  opacity: 1;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: var(--grey);
  stroke-width: 4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

body.light .progress-wrap {
  -webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
}

body.light .progress-wrap::after {
  color: var(--black-blue);
}

body.light .progress-wrap svg.progress-circle path {
  stroke: var(--black-blue);
}

/*                    ACCUEIL                      */
#accueil {
  background-color: #0f1011;
  z-index: 52;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

#accueil .square {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 5;
}

#accueil .square svg {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 52;
}

#accueil .square svg rect {
  stroke-dasharray: 400%;
  stroke-dashoffset: 0%;
  -webkit-animation: rect 2s cubic-bezier(0.52, 0.01, 0.45, 0.99);
          animation: rect 2s cubic-bezier(0.52, 0.01, 0.45, 0.99);
}

@-webkit-keyframes rect {
  0% {
    stroke-dasharray: 400%;
    stroke-dashoffset: 400%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}

@keyframes rect {
  0% {
    stroke-dasharray: 400%;
    stroke-dashoffset: 400%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}

#accueil .container {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 100;
}

#accueil .container h1 {
  font-family: 'Nunito';
  color: white;
  text-align: center;
  font-size: 1.3em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.05em;
  margin: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: relative;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

#accueil .container .neon {
  font-size: 9vw;
  margin: 50px;
  -webkit-animation: neon 1.5s ease-in-out infinite alternate;
          animation: neon 1.5s ease-in-out infinite alternate;
  z-index: 50;
}

@-webkit-keyframes neon {
  0%, 30%, 60%, 90% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #f3e0a0;
  }
  40%, 50%, 100% {
    text-shadow: 0 0 .8vw #eb1c15, 0 0 2.85vw #eb1c15, 0 0 9vw #eb1c15, 0 0 9vw #eb1c15, 0 0 .3vw #eb1c15, .5vw .5vw .1vw #745e11;
    color: #f0dfa7;
  }
}

@keyframes neon {
  0%, 30%, 60%, 90% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #f3e0a0;
  }
  40%, 50%, 100% {
    text-shadow: 0 0 .8vw #eb1c15, 0 0 2.85vw #eb1c15, 0 0 9vw #eb1c15, 0 0 9vw #eb1c15, 0 0 .3vw #eb1c15, .5vw .5vw .1vw #745e11;
    color: #f0dfa7;
  }
}

#accueil .arrow {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  color: white;
  font-size: 40px;
  -webkit-animation: arrow 1s infinite ease-in-out alternate;
          animation: arrow 1s infinite ease-in-out alternate;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  z-index: 50;
}

#accueil .arrow:hover {
  font-size: 45px;
}

@-webkit-keyframes arrow {
  0% {
    top: 90%;
  }
  100% {
    top: 92%;
  }
}

@keyframes arrow {
  0% {
    top: 90%;
  }
  100% {
    top: 92%;
  }
}

#accueil .orange_circle {
  position: absolute;
  top: 100%;
  left: 0%;
  width: 30vw;
  height: 70vh;
  border-radius: 20vw 20vw 0 0;
  background: -webkit-linear-gradient(#fe9640, #d24a3c);
  opacity: 0.5;
  -webkit-animation: 2s orange_circle forwards ease-in-out;
          animation: 2s orange_circle forwards ease-in-out;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes orange_circle {
  0% {
    top: 100%;
  }
  100% {
    top: 50%;
  }
}

@keyframes orange_circle {
  0% {
    top: 100%;
  }
  100% {
    top: 50%;
  }
}

#accueil .little_red_circle {
  position: absolute;
  top: 25%;
  background: -webkit-linear-gradient(45deg, #fa5566, #fe924a);
  border-radius: 100%;
  width: 3vw;
  height: 3vw;
  -webkit-animation: moving 25s infinite linear;
          animation: moving 25s infinite linear;
  z-index: 1;
}

@-webkit-keyframes moving {
  0% {
    left: -5%;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    left: 101%;
    -webkit-transform: rotateZ(-360deg);
            transform: rotateZ(-360deg);
  }
}

@keyframes moving {
  0% {
    left: -5%;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    left: 101%;
    -webkit-transform: rotateZ(-360deg);
            transform: rotateZ(-360deg);
  }
}

#accueil .little_yellow_circle {
  position: absolute;
  top: 75%;
  background: -webkit-linear-gradient(45deg, #fa8c61, #fedf6a);
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  -webkit-animation: moving2 40s infinite linear;
          animation: moving2 40s infinite linear;
}

@-webkit-keyframes moving2 {
  0% {
    left: 102%;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    left: -2%;
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes moving2 {
  0% {
    left: 102%;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    left: -2%;
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

#accueil .little_yellow_triangle {
  position: absolute;
  left: 50%;
  background: -webkit-linear-gradient(45deg, #faba7b, #f1fe76);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 2.5vw;
  height: 2.5vw;
  -webkit-animation: movingTriangle 35s infinite linear;
          animation: movingTriangle 35s infinite linear;
  z-index: 0;
}

@-webkit-keyframes movingTriangle {
  0% {
    top: -8%;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    top: 100%;
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes movingTriangle {
  0% {
    top: -8%;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    top: 100%;
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

/*                    section_2                      */
#section_2 {
  background-color: #0f1011;
  -webkit-box-shadow: 0px 50px 100px 100px #0f1011;
          box-shadow: 0px 50px 100px 100px #0f1011;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 100px 0;
  width: 100%;
  overflow: hidden;
  z-index: 51;
}

#section_2 #about {
  color: white;
  width: 35%;
  margin-right: 200px;
  text-align: justify;
}

#section_2 #about h2 {
  font-size: 3em;
  margin-top: 0;
}

#section_2 #about p {
  font-size: 1em;
  margin-bottom: 50px;
}

#section_2 #about a {
  position: absolute;
  background: none;
  padding: 5px;
  border: white solid 2px;
  border-radius: 10px;
  font-size: 1.5em;
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

#section_2 #about a:hover {
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
  -webkit-animation: neon_prix 5s infinite;
          animation: neon_prix 5s infinite;
}

@-webkit-keyframes neon_prix {
  0%, 18%, 22%, 98% {
    -webkit-box-shadow: 0 0 0.9vw #1653fa, 0 0 0.75vw #1653fa, 0 0 0.5vw #1653fa, 0 0 0.5vw #1653fa, 0 0 .3vw #FA1C16,
 inset 0 0 0.4vw #1653fa, inset 0 0 0.75vw #1653fa, inset 0 0 0.5vw #1653fa, inset 0 0 0.5vw #1653fa, inset 0 0 .1vw #FA1C16;
            box-shadow: 0 0 0.9vw #1653fa, 0 0 0.75vw #1653fa, 0 0 0.5vw #1653fa, 0 0 0.5vw #1653fa, 0 0 .3vw #FA1C16,
 inset 0 0 0.4vw #1653fa, inset 0 0 0.75vw #1653fa, inset 0 0 0.5vw #1653fa, inset 0 0 0.5vw #1653fa, inset 0 0 .1vw #FA1C16;
    text-shadow: 0 0 1vw #db1a13, 0 0 1vw #db1a13, 0 0 1vw #db1a13, 0 0 1vw #db1a13, 0 0 .2vw #db1a13;
  }
  20%, 21%, 100% {
    -webkit-box-shadow: 0 0 0.5vw #0f37a5, 0 0 1vw #0f37a5, 0 0 0.5vw #0f37a5, 0 0 0.5vw #0f37a5, 0 0 .3vw #8d130f,
 inset 0 0 0.5vw #0f37a5, inset 0 0 0.5vw #0f37a5, inset 0 0 0.5vw #0f37a5, inset 0 0 0.25vw #0f37a5, inset 0 0 .2vw #660e0b;
            box-shadow: 0 0 0.5vw #0f37a5, 0 0 1vw #0f37a5, 0 0 0.5vw #0f37a5, 0 0 0.5vw #0f37a5, 0 0 .3vw #8d130f,
 inset 0 0 0.5vw #0f37a5, inset 0 0 0.5vw #0f37a5, inset 0 0 0.5vw #0f37a5, inset 0 0 0.25vw #0f37a5, inset 0 0 .2vw #660e0b;
    text-shadow: 0 0 0.5vw #660e0b, 0 0 0.5vw #660e0b, 0 0 0.5vw #660e0b, 0 0 0.5vw #660e0b, 0 0 .1vw #660e0b;
  }
}

@keyframes neon_prix {
  0%, 18%, 22%, 98% {
    -webkit-box-shadow: 0 0 0.9vw #1653fa, 0 0 0.75vw #1653fa, 0 0 0.5vw #1653fa, 0 0 0.5vw #1653fa, 0 0 .3vw #FA1C16,
 inset 0 0 0.4vw #1653fa, inset 0 0 0.75vw #1653fa, inset 0 0 0.5vw #1653fa, inset 0 0 0.5vw #1653fa, inset 0 0 .1vw #FA1C16;
            box-shadow: 0 0 0.9vw #1653fa, 0 0 0.75vw #1653fa, 0 0 0.5vw #1653fa, 0 0 0.5vw #1653fa, 0 0 .3vw #FA1C16,
 inset 0 0 0.4vw #1653fa, inset 0 0 0.75vw #1653fa, inset 0 0 0.5vw #1653fa, inset 0 0 0.5vw #1653fa, inset 0 0 .1vw #FA1C16;
    text-shadow: 0 0 1vw #db1a13, 0 0 1vw #db1a13, 0 0 1vw #db1a13, 0 0 1vw #db1a13, 0 0 .2vw #db1a13;
  }
  20%, 21%, 100% {
    -webkit-box-shadow: 0 0 0.5vw #0f37a5, 0 0 1vw #0f37a5, 0 0 0.5vw #0f37a5, 0 0 0.5vw #0f37a5, 0 0 .3vw #8d130f,
 inset 0 0 0.5vw #0f37a5, inset 0 0 0.5vw #0f37a5, inset 0 0 0.5vw #0f37a5, inset 0 0 0.25vw #0f37a5, inset 0 0 .2vw #660e0b;
            box-shadow: 0 0 0.5vw #0f37a5, 0 0 1vw #0f37a5, 0 0 0.5vw #0f37a5, 0 0 0.5vw #0f37a5, 0 0 .3vw #8d130f,
 inset 0 0 0.5vw #0f37a5, inset 0 0 0.5vw #0f37a5, inset 0 0 0.5vw #0f37a5, inset 0 0 0.25vw #0f37a5, inset 0 0 .2vw #660e0b;
    text-shadow: 0 0 0.5vw #660e0b, 0 0 0.5vw #660e0b, 0 0 0.5vw #660e0b, 0 0 0.5vw #660e0b, 0 0 .1vw #660e0b;
  }
}

#section_2 .neon_open {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  right: -100%;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#section_2 .neon_open .tilt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#section_2 .neon_open .rect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 7em;
  padding: 1em;
  border-radius: 10px;
  border: #ededff 4px solid;
  -webkit-animation: neon_rect infinite 5s alternate;
          animation: neon_rect infinite 5s alternate;
}

#section_2 .neon_open .rect p {
  text-align: center;
  font-family: 'Nunito', sans-serif;
  color: #fff2df;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 5.5em;
  -webkit-animation: neon_text 5s infinite;
          animation: neon_text 5s infinite;
}

@-webkit-keyframes neon_rect {
  0%, 38%, 42%, 98% {
    -webkit-box-shadow: 0 0 1vw #1653fa, 0 0 2.5vw #1653fa, 0 0 4vw #1653fa, 0 0 4vw #1653fa, 0 0 .4vw #FA1C16,
 inset 0 0 0.5vw #1653fa, inset 0 0 1vw #1653fa, inset 0 0 2vw #1653fa, inset 0 0 2vw #1653fa, inset 0 0 .2vw #FA1C16;
            box-shadow: 0 0 1vw #1653fa, 0 0 2.5vw #1653fa, 0 0 4vw #1653fa, 0 0 4vw #1653fa, 0 0 .4vw #FA1C16,
 inset 0 0 0.5vw #1653fa, inset 0 0 1vw #1653fa, inset 0 0 2vw #1653fa, inset 0 0 2vw #1653fa, inset 0 0 .2vw #FA1C16;
  }
  40%, 41%, 100% {
    -webkit-box-shadow: 0 0 1vw #0f37a5, 0 0 2.5vw #0f37a5, 0 0 2vw #0f37a5, 0 0 2vw #0f37a5, 0 0 .4vw #8d130f,
 inset 0 0 0.5vw #0f37a5, inset 0 0 1vw #0f37a5, inset 0 0 2vw #0f37a5, inset 0 0 2vw #0f37a5, inset 0 0 .2vw #660e0b;
            box-shadow: 0 0 1vw #0f37a5, 0 0 2.5vw #0f37a5, 0 0 2vw #0f37a5, 0 0 2vw #0f37a5, 0 0 .4vw #8d130f,
 inset 0 0 0.5vw #0f37a5, inset 0 0 1vw #0f37a5, inset 0 0 2vw #0f37a5, inset 0 0 2vw #0f37a5, inset 0 0 .2vw #660e0b;
  }
}

@keyframes neon_rect {
  0%, 38%, 42%, 98% {
    -webkit-box-shadow: 0 0 1vw #1653fa, 0 0 2.5vw #1653fa, 0 0 4vw #1653fa, 0 0 4vw #1653fa, 0 0 .4vw #FA1C16,
 inset 0 0 0.5vw #1653fa, inset 0 0 1vw #1653fa, inset 0 0 2vw #1653fa, inset 0 0 2vw #1653fa, inset 0 0 .2vw #FA1C16;
            box-shadow: 0 0 1vw #1653fa, 0 0 2.5vw #1653fa, 0 0 4vw #1653fa, 0 0 4vw #1653fa, 0 0 .4vw #FA1C16,
 inset 0 0 0.5vw #1653fa, inset 0 0 1vw #1653fa, inset 0 0 2vw #1653fa, inset 0 0 2vw #1653fa, inset 0 0 .2vw #FA1C16;
  }
  40%, 41%, 100% {
    -webkit-box-shadow: 0 0 1vw #0f37a5, 0 0 2.5vw #0f37a5, 0 0 2vw #0f37a5, 0 0 2vw #0f37a5, 0 0 .4vw #8d130f,
 inset 0 0 0.5vw #0f37a5, inset 0 0 1vw #0f37a5, inset 0 0 2vw #0f37a5, inset 0 0 2vw #0f37a5, inset 0 0 .2vw #660e0b;
            box-shadow: 0 0 1vw #0f37a5, 0 0 2.5vw #0f37a5, 0 0 2vw #0f37a5, 0 0 2vw #0f37a5, 0 0 .4vw #8d130f,
 inset 0 0 0.5vw #0f37a5, inset 0 0 1vw #0f37a5, inset 0 0 2vw #0f37a5, inset 0 0 2vw #0f37a5, inset 0 0 .2vw #660e0b;
  }
}

@-webkit-keyframes neon_text {
  0%, 38%, 42%, 98% {
    text-shadow: 0 0 1vw #ff1d16, 0 0 3vw #ff1d16, 0 0 8vw #ff1d16, 0 0 8vw #ff1d16, 0 0 .4vw #d41616;
  }
  40%, 41%, 100% {
    text-shadow: 0 0 1vw #660e0b, 0 0 2.5vw #660e0b, 0 0 4vw #660e0b, 0 0 4vw #660e0b, 0 0 .4vw #660e0b;
  }
}

@keyframes neon_text {
  0%, 38%, 42%, 98% {
    text-shadow: 0 0 1vw #ff1d16, 0 0 3vw #ff1d16, 0 0 8vw #ff1d16, 0 0 8vw #ff1d16, 0 0 .4vw #d41616;
  }
  40%, 41%, 100% {
    text-shadow: 0 0 1vw #660e0b, 0 0 2.5vw #660e0b, 0 0 4vw #660e0b, 0 0 4vw #660e0b, 0 0 .4vw #660e0b;
  }
}

#section_2 .neon_open .arrow {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 0;
}

#section_2 .neon_open .arrow img {
  position: absolute;
  -webkit-animation: neon_arrow 5s infinite alternate;
          animation: neon_arrow 5s infinite alternate;
}

@-webkit-keyframes neon_arrow {
  0%, 38%, 42%, 98% {
    -webkit-filter: drop-shadow(0px 0px 5px #32ffc1);
            filter: drop-shadow(0px 0px 5px #32ffc1);
  }
  40%, 41%, 100% {
    -webkit-filter: drop-shadow(0px 0px 5px #167457);
            filter: drop-shadow(0px 0px 5px #167457);
  }
}

@keyframes neon_arrow {
  0%, 38%, 42%, 98% {
    -webkit-filter: drop-shadow(0px 0px 5px #32ffc1);
            filter: drop-shadow(0px 0px 5px #32ffc1);
  }
  40%, 41%, 100% {
    -webkit-filter: drop-shadow(0px 0px 5px #167457);
            filter: drop-shadow(0px 0px 5px #167457);
  }
}

#section_2 .neon_open .arrow .lights {
  position: absolute;
  bottom: 50%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

#section_2 .neon_open .arrow .lights .light {
  width: 5px;
  height: 5px;
  border-radius: 100%;
  margin: 0 15px;
  -webkit-filter: drop-shadow(0px 0px 3px yellow);
          filter: drop-shadow(0px 0px 3px yellow);
  background: #ffff4d;
}

#section_2 .neon_open .arrow .lights .light:nth-child(4) {
  -webkit-animation: light 1.5s infinite;
          animation: light 1.5s infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

#section_2 .neon_open .arrow .lights .light:nth-child(3) {
  -webkit-animation: light 1.5s infinite;
          animation: light 1.5s infinite;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

#section_2 .neon_open .arrow .lights .light:nth-child(2) {
  -webkit-animation: light 1.5s infinite;
          animation: light 1.5s infinite;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

#section_2 .neon_open .arrow .lights .light:nth-child(1) {
  -webkit-animation: light 1.5s infinite;
          animation: light 1.5s infinite;
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}

@-webkit-keyframes light {
  0%, 90%, 100% {
    -webkit-filter: drop-shadow(0px 0px 3px yellow);
            filter: drop-shadow(0px 0px 3px yellow);
    background: #ffff4d;
  }
  92%, 98% {
    -webkit-filter: drop-shadow(0px 0px 2px #2b2b00);
            filter: drop-shadow(0px 0px 2px #2b2b00);
    background: #2b2b00;
  }
}

@keyframes light {
  0%, 90%, 100% {
    -webkit-filter: drop-shadow(0px 0px 3px yellow);
            filter: drop-shadow(0px 0px 3px yellow);
    background: #ffff4d;
  }
  92%, 98% {
    -webkit-filter: drop-shadow(0px 0px 2px #2b2b00);
            filter: drop-shadow(0px 0px 2px #2b2b00);
    background: #2b2b00;
  }
}

#section_2 .tilt:hover ~ .brick {
  -webkit-filter: brightness(0.2) !important;
          filter: brightness(0.2) !important;
}

#section_2 .brick {
  position: absolute;
  left: 50%;
  width: 300%;
  height: 285%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: brightness(0.4);
          filter: brightness(0.4);
  z-index: -1;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

/*                    section_3                      */
#section_3 {
  padding-top: 0px;
  margin-bottom: -15px;
  width: 100vw;
  overflow: hidden;
  background: #0F1011;
  z-index: 50;
}

#section_3 .fuji {
  position: relative;
  top: 50%;
  width: 100%;
}

#section_3 .moon {
  position: absolute;
  top: 25%;
  left: 10vw;
  width: 500px;
  height: 500px;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 .8vw #d4d5dd, 0 0 2.85vw #d4d5dd, 0 0 9vw #d4d5dd, 0 0 9vw #d4d5dd, 0 0 .3vw #d4d5dd;
          box-shadow: 0 0 .8vw #d4d5dd, 0 0 2.85vw #d4d5dd, 0 0 9vw #d4d5dd, 0 0 9vw #d4d5dd, 0 0 .3vw #d4d5dd;
  background: linear-gradient(145deg, #ffffff, #cacbd3);
}

#section_3 .clouds {
  width: 100%;
  overflow-x: hidden;
}

#section_3 .cloud {
  position: absolute;
  z-index: 1;
}

#section_3 .cloud:nth-of-type(1) {
  width: 400px;
  top: 25%;
  right: 100%;
  -webkit-animation: infinite linear 20s Left;
          animation: infinite linear 20s Left;
}

#section_3 .cloud:nth-of-type(2) {
  width: 350px;
  top: 75%;
  right: 100%;
  -webkit-animation: infinite linear 35s Middle;
          animation: infinite linear 35s Middle;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes Left {
  0% {
    right: 100%;
  }
  100% {
    right: -40%;
  }
}

@keyframes Left {
  0% {
    right: 100%;
  }
  100% {
    right: -40%;
  }
}

@-webkit-keyframes Middle {
  0% {
    right: 100%;
  }
  100% {
    right: -40%;
  }
}

@keyframes Middle {
  0% {
    right: 100%;
  }
  100% {
    right: -40%;
  }
}

.bg_accueil {
  width: 100%;
  height: 75vh;
  background: url("../images/backgrounds/clouds.svg") repeat;
  background-position: 0 top;
  background-size: auto 100%;
  opacity: 0.5;
  -webkit-animation: infinite linear 20s Bg_animate;
          animation: infinite linear 20s Bg_animate;
}

@-webkit-keyframes Bg_animate {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 900px 0;
  }
}

@keyframes Bg_animate {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 900px 0;
  }
}

/*                 PRESENTATION                    */
#Présentation {
  margin-top: 0px;
  padding-bottom: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#232323), to(#0A0A0A));
  background: linear-gradient(to bottom, #232323 0%, #0A0A0A 100%);
  -webkit-box-shadow: 0px 75px 25px 25px #0B0B0B;
          box-shadow: 0px 75px 25px 25px #0B0B0B;
  z-index: 50;
}

#Présentation .Title {
  width: 50%;
  height: 3.5em;
  position: relative;
  padding-top: 5em;
  margin-bottom: 100px;
  margin-left: 150px;
}

#Présentation .Title h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  font-size: 3.5em;
  margin: 0;
  color: white;
}

#Présentation .Title h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  margin: 0;
  color: #DF4C38;
  opacity: 0.6;
  font-size: 10em;
  white-space: nowrap;
}

#Présentation .cards {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  min-height: 500px;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: initial;
      -ms-flex-align: initial;
          align-items: initial;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  /*        CARD1       */
  /*        CARD2       */
  /*        CARD3       */
}

#Présentation .cards .part {
  position: relative;
  -webkit-transition: .5s;
  transition: .5s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  margin: 5%;
}

#Présentation .cards .part .h2_back {
  position: absolute;
  top: 50%;
  font-family: "Nunito";
  font-weight: lighter;
  font-size: 2em;
  color: white;
  -webkit-transition: 0.8s;
  transition: 0.8s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

#Présentation .cards .part:hover {
  /* Card1 */
  /* CARD2 */
  /* CARD3 */
  /* DIVERS */
}

#Présentation .cards .part:hover .card {
  -webkit-transition: 0.25s !important;
  transition: 0.25s !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

#Présentation .cards .part:hover .card1 {
  background-position: 0 100%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

#Présentation .cards .part:hover .card1 .spiral_cloud:nth-of-type(1) {
  left: -100%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#Présentation .cards .part:hover .card1 .spiral_cloud:nth-of-type(2) {
  right: -100%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#Présentation .cards .part:hover .card1 .spiral_cloud:nth-of-type(3) {
  left: 28%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}

#Présentation .cards .part:hover .card1 .spiral_cloud:nth-of-type(4) {
  right: 25%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}

#Présentation .cards .part:hover .card1 .temple {
  bottom: 0;
}

#Présentation .cards .part:hover .card2 {
  background-position: 0 100%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

#Présentation .cards .part:hover .card2 .circle {
  -webkit-transform: translateY(60%);
          transform: translateY(60%);
}

#Présentation .cards .part:hover .card2 .red {
  bottom: 50%;
}

#Présentation .cards .part:hover .card2 .red2 {
  top: -50%;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#Présentation .cards .part:hover .card2 .red3 {
  top: -50%;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

#Présentation .cards .part:hover .card2 .red4 {
  top: -50%;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

#Présentation .cards .part:hover .card3 {
  background-position: 0 100%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

#Présentation .cards .part:hover .card3 .flower1, #Présentation .cards .part:hover .card3 .flower2 {
  top: -50%;
}

#Présentation .cards .part:hover .card3 .cfuji {
  bottom: 0;
}

#Présentation .cards .part:hover .card3 .bflower1 {
  bottom: 55%;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

#Présentation .cards .part:hover .card3 .bflower2 {
  bottom: 75%;
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}

#Présentation .cards .part:hover .card3 .bflower3 {
  bottom: 65%;
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}

#Présentation .cards .part:hover .card3 .bflower4 {
  bottom: 70%;
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}

#Présentation .cards .part:hover h2 {
  top: -50%;
}

#Présentation .cards .part:hover .h2_back {
  position: absolute;
  top: -25%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

#Présentation .cards .part .card {
  position: relative;
  width: 250px;
  height: 350px;
  border: 10px solid #B68D6F;
  -webkit-box-shadow: 0px 0px 30px #B68D6F, 0px 0px 15px #B68D6F;
          box-shadow: 0px 0px 30px #B68D6F, 0px 0px 15px #B68D6F;
  overflow: hidden;
}

#Présentation .cards .part:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

#Présentation .cards .card1 h2, #Présentation .cards .card2 h2, #Présentation .cards .card3 h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  font-family: "Merienda", cursive;
  font-weight: lighter;
  font-size: 1.25em;
  white-space: nowrap;
  color: #0f1011;
  margin: 0;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  z-index: 0;
}

#Présentation .cards .card1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#0f1011), color-stop(50%, #0f1011), color-stop(50%, white), to(white));
  background: linear-gradient(to top, #0f1011 0%, #0f1011 50%, white 50%, white 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition: 0.75s;
  transition: 0.75s;
}

#Présentation .cards .card1 h2 {
  z-index: 1;
}

#Présentation .cards .card1 .spiral_cloud {
  position: absolute;
  width: 100px;
  -webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
          filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

#Présentation .cards .card1 .spiral_cloud:nth-of-type(1) {
  left: 10%;
  top: 10%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}

#Présentation .cards .card1 .spiral_cloud:nth-of-type(2) {
  right: 30%;
  bottom: 20%;
  -webkit-transform: translateX(50%) translateY(50%);
          transform: translateX(50%) translateY(50%);
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}

#Présentation .cards .card1 .spiral_cloud:nth-of-type(3) {
  left: -100%;
  top: 12%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  width: 75px;
}

#Présentation .cards .card1 .spiral_cloud:nth-of-type(4) {
  right: -100%;
  top: 23%;
  -webkit-transform: translateX(50%) translateY(50%);
          transform: translateX(50%) translateY(50%);
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  width: 75px;
}

#Présentation .cards .card1 .temple {
  position: absolute;
  bottom: -100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 80%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

#Présentation .cards .card2 {
  background: -webkit-gradient(linear, left bottom, left top, from(#0f1011), color-stop(50%, #0f1011), color-stop(50%, white), to(white));
  background: linear-gradient(to top, #0f1011 0%, #0f1011 50%, white 50%, white 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition: 0.75s;
  transition: 0.75s;
}

#Présentation .cards .card2 h2 {
  z-index: 1;
}

#Présentation .cards .card2 .red {
  position: absolute;
  bottom: -10%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(50%);
          transform: translateX(-50%) translateY(50%);
  width: 200px;
  height: 200px;
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
  background: linear-gradient(145deg, #541A12, #DF4C38);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

#Présentation .cards .card2 .red2 {
  position: absolute;
  top: 0%;
  left: 20%;
  -webkit-transform: translateX(-50%) translateY(50%);
          transform: translateX(-50%) translateY(50%);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  background: #AD3B2A;
  -webkit-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
  z-index: 1;
}

#Présentation .cards .card2 .red3 {
  position: absolute;
  top: 40%;
  right: 5%;
  -webkit-transform: translateX(-50%) translateY(50%);
          transform: translateX(-50%) translateY(50%);
  width: 15px;
  height: 15px;
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  background: #AD3B2A;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  z-index: 0;
}

#Présentation .cards .card2 .red4 {
  position: absolute;
  top: 60%;
  left: 10%;
  -webkit-transform: translateX(-50%) translateY(50%);
          transform: translateX(-50%) translateY(50%);
  width: 25px;
  height: 25px;
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  background: #AD3B2A;
  -webkit-transition: 1.5s ease-in-out;
  transition: 1.5s ease-in-out;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  z-index: 0;
}

#Présentation .cards .card2 .circle {
  position: absolute;
  bottom: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  width: 500px;
  height: 500px;
  border-radius: 100%;
  background: #0B5758;
  background-size: 150%;
  -webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
}

#Présentation .cards .card2 .circle1 {
  left: 20%;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

#Présentation .cards .card2 .circle2 {
  right: 20%;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

#Présentation .cards .card3 {
  background: -webkit-gradient(linear, left bottom, left top, from(#0f1011), color-stop(50%, #0f1011), color-stop(50%, white), to(white));
  background: linear-gradient(to top, #0f1011 0%, #0f1011 50%, white 50%, white 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition: 0.75s;
  transition: 0.75s;
}

#Présentation .cards .card3 h2 {
  z-index: 1;
}

#Présentation .cards .card3 .cfuji {
  position: absolute;
  bottom: -100%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  width: 150%;
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  z-index: 1;
}

#Présentation .cards .card3 .flower1 {
  position: absolute;
  width: 100px;
  top: 2%;
  left: 2%;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  z-index: 1;
}

#Présentation .cards .card3 .flower2 {
  position: absolute;
  width: 75px;
  top: 75%;
  left: 50%;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  z-index: 2;
}

#Présentation .cards .card3 .bflower1 {
  position: absolute;
  left: 5%;
  bottom: -100%;
  width: 50px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}

#Présentation .cards .card3 .bflower2 {
  position: absolute;
  left: 20%;
  bottom: -100%;
  width: 50px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

#Présentation .cards .card3 .bflower3 {
  position: absolute;
  left: 45%;
  bottom: -100%;
  width: 50px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

#Présentation .cards .card3 .bflower4 {
  position: absolute;
  right: 5%;
  bottom: -100%;
  width: 50px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

#Infographies {
  min-height: 100vh;
  width: 100vw;
  padding: 0 0 150px 0;
  background: #0a0a0a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 2;
}

#Infographies .light_off {
  position: absolute;
  min-height: 120vh;
  width: 100vw;
  background: #0a0a0a;
  -webkit-box-shadow: 0px 0px 50px 150px #0a0a0a;
          box-shadow: 0px 0px 50px 150px #0a0a0a;
  z-index: 99;
  -webkit-transition: 0.25s 0s;
  transition: 0.25s 0s;
}

#Infographies .off_hide {
  opacity: 0;
  -webkit-transition: 0.25s 0.15s;
  transition: 0.25s 0.15s;
}

#Infographies .moonlight {
  position: fixed;
  top: 0;
  left: 75px;
  -webkit-transform: translateX(-50%) translateY(-55%);
          transform: translateX(-50%) translateY(-55%);
  width: 450px;
  height: 450px;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 .8vw #d4d5dd, 0 0 2.85vw #d4d5dd, 0 0 9vw #d4d5dd, 0 0 9vw #d4d5dd, 0 0 .3vw #d4d5dd;
          box-shadow: 0 0 .8vw #d4d5dd, 0 0 2.85vw #d4d5dd, 0 0 9vw #d4d5dd, 0 0 9vw #d4d5dd, 0 0 .3vw #d4d5dd;
  background: linear-gradient(145deg, #ffffff, #cacbd3);
  z-index: 51;
}

#Infographies .mask {
  position: relative;
  min-height: 120vh;
  width: 100vw;
  background: #0a0a0a;
  -webkit-box-shadow: 0px 0px 100px 100px #0a0a0a;
          box-shadow: 0px 0px 100px 100px #0a0a0a;
  z-index: 50;
  padding-bottom: 10vh;
  overflow: hidden;
}

#Infographies .trigger {
  position: absolute;
  top: 65vh;
  width: 100vw;
  height: 10px;
}

#Infographies .top {
  background: #0a0a0a;
  -webkit-box-shadow: 0px 0px 50px 100px #0a0a0a;
          box-shadow: 0px 0px 50px 100px #0a0a0a;
  width: 100%;
  height: 50px;
  z-index: 2;
}

#Infographies .bottom {
  display: block;
  width: 100%;
  height: 30%;
  background: -webkit-gradient(linear, left bottom, left top, from(#0A0A0A), to(#0a0a0a00));
  background: linear-gradient(to top, #0A0A0A 0%, #0a0a0a00 100%);
  position: absolute;
  bottom: 0;
  z-index: 101;
}

#Infographies .title_text {
  position: relative;
  top: 0vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding-bottom: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  z-index: 101;
}

#Infographies .title_text h2 {
  position: relative;
  top: 0vh;
  color: #0A0A0A;
  /*background: linear-gradient(to right, rgb(255, 244, 209) 0%, rgba(255, 244, 209, 0.25)) no-repeat;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;*/
  font-size: 5em;
  background-size: 100% 100%;
  margin: 0;
}

#Infographies .title_text .info {
  width: 65%;
  text-align: center;
  color: #0A0A0A;
}

#Infographies .container {
  position: relative;
  top: 0%;
  left: 50%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 150px;
  height: 375px;
  -webkit-transform: translateY(-20%) translateX(-50%);
          transform: translateY(-20%) translateX(-50%);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  z-index: 100;
  -webkit-animation: l_swing 4s ease-in-out infinite alternate;
          animation: l_swing 4s ease-in-out infinite alternate;
  /*.bulb2 {
      fill:#FBF8CA;
      fill-opacity:1;   
    }
    .explosion {
      z-index: 100 !important;

      animation: explosion 0.25s ease-in-out;
  
      @keyframes explosion {
        0% {
          filter: drop-shadow( 0px 0px 10px #FBF8CA);   
          opacity: 1;
        }
        100% {
          filter: drop-shadow( 0px 0px 100vw #FBF8CA);   
          opacity: 1;
        }
      }*/
}

@-webkit-keyframes l_swing {
  0% {
    -webkit-transform: translateY(-20%) translateX(-50%) rotate(-10deg);
            transform: translateY(-20%) translateX(-50%) rotate(-10deg);
  }
  100% {
    -webkit-transform: translateY(-20%) translateX(-50%) rotate(10deg);
            transform: translateY(-20%) translateX(-50%) rotate(10deg);
  }
}

@keyframes l_swing {
  0% {
    -webkit-transform: translateY(-20%) translateX(-50%) rotate(-10deg);
            transform: translateY(-20%) translateX(-50%) rotate(-10deg);
  }
  100% {
    -webkit-transform: translateY(-20%) translateX(-50%) rotate(10deg);
            transform: translateY(-20%) translateX(-50%) rotate(10deg);
  }
}

#Infographies .container .lamp {
  position: relative;
  width: 150px;
  height: 400px;
  top: 40px;
  display: inline-block;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  overflow: visible;
  z-index: 52;
}

#Infographies .container .bulb {
  fill: #FBF8CA;
  fill-opacity: 0.1;
  z-index: 52;
  -webkit-filter: drop-shadow(0px 0px 10px #FBF8CA) drop-shadow(0px 0px 5px #FBF8CA);
          filter: drop-shadow(0px 0px 10px #FBF8CA) drop-shadow(0px 0px 5px #FBF8CA);
}

#Infographies .container .light {
  position: absolute;
  left: 75px;
  right: 0;
  bottom: 23px;
  -webkit-transform: translateX(-50%) translateY(900px);
          transform: translateX(-50%) translateY(900px);
  opacity: 0;
  width: 150px;
  height: 0px;
  border-bottom: 900px solid #fefcd55d;
  border-left: 2000px solid transparent;
  border-right: 2000px solid transparent;
  margin: 0px auto;
  z-index: 1;
  border-radius: 90px 90px 0px 0px;
}

#Infographies .container .light_on {
  -webkit-animation: light_on 0.3s 0.3s 5 cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
          animation: light_on 0.3s 0.3s 5 cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
}

#Infographies .container .bulb_on {
  -webkit-animation: bulb 0.3s 0.3s 5 cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
          animation: bulb 0.3s 0.3s 5 cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
}

#Infographies .container .switch {
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

#Infographies .container .switch:active {
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}

@-webkit-keyframes light_on {
  to {
    opacity: 1;
  }
}

@keyframes light_on {
  to {
    opacity: 1;
  }
}

@-webkit-keyframes bulb {
  to {
    fill-opacity: 1;
    fill: #FBF8CA;
  }
}

@keyframes bulb {
  to {
    fill-opacity: 1;
    fill: #FBF8CA;
  }
}

#Infographies .list {
  width: 100%;
  margin-top: 50vh;
  position: relative;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  z-index: 1;
}

#Infographies .list section:nth-of-type(odd) .line::after {
  -webkit-animation: drop 7s 0s infinite;
          animation: drop 7s 0s infinite;
}

#Infographies .list section:nth-of-type(even) .line::after {
  animation: drop 7s 0s infinite reverse;
}

#Infographies .list section {
  position: relative;
  min-height: 120vh;
  z-index: 0;
}

#Infographies .list section .lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90vh;
  margin: auto;
  width: 100%;
  z-index: 99;
  /*
      @keyframes drop {
        0% {
          left: -50%;
        }
        100% {
          left: 110%;
        }
      }*/
}

#Infographies .list section .lines .line {
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  top: 50%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.1)), color-stop(50%, #fff4d1), to(#fff4d1));
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, #fff4d1 50%, #fff4d1 100%);
  background-size: 200%;
  background-position: 0% 0%;
  overflow: hidden;
}

#Infographies .list section .lines .line:nth-child(1) {
  margin: -25vh 0;
}

#Infographies .list section .lines .line:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

#Infographies .list section .lines .line:nth-child(3) {
  margin: 25vh 0;
}

#Infographies .list section .lines .line:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

#Infographies .list section img {
  position: relative;
}

#Infographies .list section .affiche_recrutement1 {
  left: 45%;
  width: 25%;
  z-index: 105;
}

#Infographies .list section .affiche_tournoi1 {
  top: 5vh;
  left: 30%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 26%;
  z-index: 105;
}

#Infographies .list section .affiche_midi {
  left: 40%;
  width: 25%;
  z-index: 105;
}

#Infographies .list section .affiche_barabulle1 {
  top: 20vh;
  left: 55%;
  width: 25%;
  z-index: 105;
}

#Infographies .list section .affiche_barabulle2 {
  top: 10vh;
  left: 0%;
  width: 15%;
  z-index: 105;
}

#Infographies .list section .affiche_anima1 {
  top: 5vh;
  left: 55%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 26%;
  z-index: 105;
}

#Infographies .list section .affiche_volley1 {
  top: 10vh;
  left: 20%;
  width: 20%;
  z-index: 105;
}

#Infographies .list section .affiche_volley2 {
  top: 15vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 25%;
  z-index: 105;
}

#Infographies .list section .logo_marco {
  top: 10vh;
  left: 15%;
  width: 45vw;
  z-index: 100;
}

#Infographies .list section .logo_tom {
  top: 10vh;
  left: 40%;
  width: 45vw;
  z-index: 100;
}

#Infographies .list section .logo_auxarches {
  top: 15vh;
  left: 25%;
  width: 45vw;
  z-index: 100;
}

#Infographies .list section .logo_twix {
  top: 15vh;
  left: 35%;
  width: 45vw;
  z-index: 100;
}

#Infographies .list section .logo_tatapulse {
  top: 15vh;
  left: 15%;
  width: 40vw;
  z-index: 100;
}

#Infographies .list section .logo_abricom {
  top: 10vh;
}

#Infographies .list section .logo_webecko {
  top: 20vh;
}

#Infographies .list section .logo_naturapolis1 {
  top: 5vh;
  z-index: 99;
}

#Infographies .list section .logo_naturapolis2 {
  top: 55vh;
  left: 28%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 20%;
  z-index: 100;
}

#Infographies .list section .logo_sakura1 {
  top: 10vh;
  z-index: 99;
}

#Infographies .list section .logo_sakura1 .back img {
  position: absolute;
  -webkit-transform: translateY(-20%) translateX(20%);
          transform: translateY(-20%) translateX(20%);
  width: 2em;
}

#Infographies .list section .cartes_marco {
  top: 15vh;
  left: 50%;
  width: 40vw;
  z-index: 100;
}

#Infographies .list section .animation_its_mine {
  top: 10vh;
}

#Infographies .list section .reverse {
  -webkit-transform: translateX(-50%) rotateY(180deg) !important;
          transform: translateX(-50%) rotateY(180deg) !important;
}

#Infographies .list section .card_info_abricom {
  left: 60%;
  width: 40vw;
  height: 26.5vw;
}

#Infographies .list section .card_info_webecko {
  left: 55%;
  width: 30vw;
  height: 30vw;
}

#Infographies .list section .card_info_natura {
  left: 60%;
  width: 30vw;
  height: 30vw;
}

#Infographies .list section .card_info_sakura {
  left: 75%;
  width: 30vw;
  height: 30vw;
}

#Infographies .list section .card_info_its_mine {
  left: 50%;
  width: 30vw;
  height: 30vw;
}

#Infographies .list section .card_info {
  position: absolute;
  cursor: pointer;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 100;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#Infographies .list section .card_info img {
  width: 100%;
}

#Infographies .list section .card_info .front, #Infographies .list section .card_info .back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#Infographies .list section .card_info .back {
  position: absolute;
  background-color: #333333;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1.25em;
}

#Infographies .list section .card_info .back p {
  text-align: left;
  margin: 10%;
  color: white;
  font-size: 0.85em;
}

#Infographies .list .list_title {
  position: absolute;
  top: 20vh;
  left: 25px;
  height: 100px;
}

#Infographies .list h3 {
  position: fixed;
  bottom: 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 8vw;
  margin: 0;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  z-index: 1;
}

#Infographies .list h3 span {
  display: inline-block;
  margin: 0 0.1em;
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
}

#Infographies .list h3 .title2 {
  color: none;
}

@-webkit-keyframes reveal {
  0% {
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes reveal {
  0% {
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@-webkit-keyframes hideal {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
}

@keyframes hideal {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
}

#Infographies .list .show1 {
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
  -webkit-animation: reveal 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
          animation: reveal 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

#Infographies .list .hide1 {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-animation: hideal 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
          animation: hideal 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

#Infographies .list .show2 {
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
  -webkit-animation: reveal 0.75s cubic-bezier(0.77, 0, 0.175, 1) forwards;
          animation: reveal 0.75s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

#Infographies .list .hide2 {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-animation: hideal 0.75s cubic-bezier(0.77, 0, 0.175, 1) forwards;
          animation: hideal 0.75s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

#Infographies .list .masked {
  position: absolute;
  top: 0;
  width: 100vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  color: white;
  mix-blend-mode: overlay;
  -webkit-text-stroke: 0.1em #ffffff;
}

#Infographies .list .outline {
  position: absolute;
  top: 0;
  color: transparent;
  -webkit-text-stroke: 0.1em #ffffff;
}

#Infographies #particle-container {
  position: absolute;
  top: 0;
  height: 150vh;
  width: 100vw;
}

#Infographies #particle-container .particle {
  position: absolute;
  border-radius: 50%;
}

@-webkit-keyframes particle-animation-1 {
  100% {
    -webkit-transform: translate3d(72vw, 82vh, 77px);
            transform: translate3d(72vw, 82vh, 77px);
  }
}

@keyframes particle-animation-1 {
  100% {
    -webkit-transform: translate3d(72vw, 82vh, 77px);
            transform: translate3d(72vw, 82vh, 77px);
  }
}

#Infographies #particle-container .particle:nth-child(1) {
  -webkit-animation: particle-animation-1 60s infinite;
          animation: particle-animation-1 60s infinite;
  opacity: 0.45;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
  -webkit-transform: translate3d(74vw, 141vh, 36px);
          transform: translate3d(74vw, 141vh, 36px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-2 {
  100% {
    -webkit-transform: translate3d(27vw, 25vh, 51px);
            transform: translate3d(27vw, 25vh, 51px);
  }
}

@keyframes particle-animation-2 {
  100% {
    -webkit-transform: translate3d(27vw, 25vh, 51px);
            transform: translate3d(27vw, 25vh, 51px);
  }
}

#Infographies #particle-container .particle:nth-child(2) {
  -webkit-animation: particle-animation-2 60s infinite;
          animation: particle-animation-2 60s infinite;
  opacity: 0.17;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  -webkit-transform: translate3d(12vw, 36vh, 64px);
          transform: translate3d(12vw, 36vh, 64px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-3 {
  100% {
    -webkit-transform: translate3d(52vw, 62vh, 24px);
            transform: translate3d(52vw, 62vh, 24px);
  }
}

@keyframes particle-animation-3 {
  100% {
    -webkit-transform: translate3d(52vw, 62vh, 24px);
            transform: translate3d(52vw, 62vh, 24px);
  }
}

#Infographies #particle-container .particle:nth-child(3) {
  -webkit-animation: particle-animation-3 60s infinite;
          animation: particle-animation-3 60s infinite;
  opacity: 0.455;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
  -webkit-transform: translate3d(45vw, 34vh, 62px);
          transform: translate3d(45vw, 34vh, 62px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-4 {
  100% {
    -webkit-transform: translate3d(10vw, 92vh, 78px);
            transform: translate3d(10vw, 92vh, 78px);
  }
}

@keyframes particle-animation-4 {
  100% {
    -webkit-transform: translate3d(10vw, 92vh, 78px);
            transform: translate3d(10vw, 92vh, 78px);
  }
}

#Infographies #particle-container .particle:nth-child(4) {
  -webkit-animation: particle-animation-4 60s infinite;
          animation: particle-animation-4 60s infinite;
  opacity: 0.16;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  -webkit-transform: translate3d(58vw, 38vh, 35px);
          transform: translate3d(58vw, 38vh, 35px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-5 {
  100% {
    -webkit-transform: translate3d(56vw, 97vh, 80px);
            transform: translate3d(56vw, 97vh, 80px);
  }
}

@keyframes particle-animation-5 {
  100% {
    -webkit-transform: translate3d(56vw, 97vh, 80px);
            transform: translate3d(56vw, 97vh, 80px);
  }
}

#Infographies #particle-container .particle:nth-child(5) {
  -webkit-animation: particle-animation-5 60s infinite;
          animation: particle-animation-5 60s infinite;
  opacity: 0.245;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  -webkit-transform: translate3d(34vw, 114vh, 71px);
          transform: translate3d(34vw, 114vh, 71px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-6 {
  100% {
    -webkit-transform: translate3d(72vw, 16vh, 88px);
            transform: translate3d(72vw, 16vh, 88px);
  }
}

@keyframes particle-animation-6 {
  100% {
    -webkit-transform: translate3d(72vw, 16vh, 88px);
            transform: translate3d(72vw, 16vh, 88px);
  }
}

#Infographies #particle-container .particle:nth-child(6) {
  -webkit-animation: particle-animation-6 60s infinite;
          animation: particle-animation-6 60s infinite;
  opacity: 0.355;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  -webkit-transform: translate3d(71vw, 138vh, 58px);
          transform: translate3d(71vw, 138vh, 58px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-7 {
  100% {
    -webkit-transform: translate3d(47vw, 69vh, 49px);
            transform: translate3d(47vw, 69vh, 49px);
  }
}

@keyframes particle-animation-7 {
  100% {
    -webkit-transform: translate3d(47vw, 69vh, 49px);
            transform: translate3d(47vw, 69vh, 49px);
  }
}

#Infographies #particle-container .particle:nth-child(7) {
  -webkit-animation: particle-animation-7 60s infinite;
          animation: particle-animation-7 60s infinite;
  opacity: 0.065;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
  -webkit-transform: translate3d(46vw, 46vh, 92px);
          transform: translate3d(46vw, 46vh, 92px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-8 {
  100% {
    -webkit-transform: translate3d(71vw, 5vh, 99px);
            transform: translate3d(71vw, 5vh, 99px);
  }
}

@keyframes particle-animation-8 {
  100% {
    -webkit-transform: translate3d(71vw, 5vh, 99px);
            transform: translate3d(71vw, 5vh, 99px);
  }
}

#Infographies #particle-container .particle:nth-child(8) {
  -webkit-animation: particle-animation-8 60s infinite;
          animation: particle-animation-8 60s infinite;
  opacity: 0.1;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
  -webkit-transform: translate3d(8vw, 144vh, 63px);
          transform: translate3d(8vw, 144vh, 63px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-9 {
  100% {
    -webkit-transform: translate3d(64vw, 116vh, 63px);
            transform: translate3d(64vw, 116vh, 63px);
  }
}

@keyframes particle-animation-9 {
  100% {
    -webkit-transform: translate3d(64vw, 116vh, 63px);
            transform: translate3d(64vw, 116vh, 63px);
  }
}

#Infographies #particle-container .particle:nth-child(9) {
  -webkit-animation: particle-animation-9 60s infinite;
          animation: particle-animation-9 60s infinite;
  opacity: 0.35;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  -webkit-transform: translate3d(64vw, 136vh, 60px);
          transform: translate3d(64vw, 136vh, 60px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-10 {
  100% {
    -webkit-transform: translate3d(27vw, 111vh, 54px);
            transform: translate3d(27vw, 111vh, 54px);
  }
}

@keyframes particle-animation-10 {
  100% {
    -webkit-transform: translate3d(27vw, 111vh, 54px);
            transform: translate3d(27vw, 111vh, 54px);
  }
}

#Infographies #particle-container .particle:nth-child(10) {
  -webkit-animation: particle-animation-10 60s infinite;
          animation: particle-animation-10 60s infinite;
  opacity: 0.235;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-transform: translate3d(2vw, 71vh, 9px);
          transform: translate3d(2vw, 71vh, 9px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-11 {
  100% {
    -webkit-transform: translate3d(9vw, 78vh, 38px);
            transform: translate3d(9vw, 78vh, 38px);
  }
}

@keyframes particle-animation-11 {
  100% {
    -webkit-transform: translate3d(9vw, 78vh, 38px);
            transform: translate3d(9vw, 78vh, 38px);
  }
}

#Infographies #particle-container .particle:nth-child(11) {
  -webkit-animation: particle-animation-11 60s infinite;
          animation: particle-animation-11 60s infinite;
  opacity: 0.21;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
  -webkit-transform: translate3d(8vw, 96vh, 73px);
          transform: translate3d(8vw, 96vh, 73px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-12 {
  100% {
    -webkit-transform: translate3d(15vw, 54vh, 7px);
            transform: translate3d(15vw, 54vh, 7px);
  }
}

@keyframes particle-animation-12 {
  100% {
    -webkit-transform: translate3d(15vw, 54vh, 7px);
            transform: translate3d(15vw, 54vh, 7px);
  }
}

#Infographies #particle-container .particle:nth-child(12) {
  -webkit-animation: particle-animation-12 60s infinite;
          animation: particle-animation-12 60s infinite;
  opacity: 0.24;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
  -webkit-transform: translate3d(2vw, 146vh, 71px);
          transform: translate3d(2vw, 146vh, 71px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-13 {
  100% {
    -webkit-transform: translate3d(67vw, 132vh, 96px);
            transform: translate3d(67vw, 132vh, 96px);
  }
}

@keyframes particle-animation-13 {
  100% {
    -webkit-transform: translate3d(67vw, 132vh, 96px);
            transform: translate3d(67vw, 132vh, 96px);
  }
}

#Infographies #particle-container .particle:nth-child(13) {
  -webkit-animation: particle-animation-13 60s infinite;
          animation: particle-animation-13 60s infinite;
  opacity: 0.235;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -2.6s;
          animation-delay: -2.6s;
  -webkit-transform: translate3d(77vw, 95vh, 81px);
          transform: translate3d(77vw, 95vh, 81px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-14 {
  100% {
    -webkit-transform: translate3d(70vw, 96vh, 54px);
            transform: translate3d(70vw, 96vh, 54px);
  }
}

@keyframes particle-animation-14 {
  100% {
    -webkit-transform: translate3d(70vw, 96vh, 54px);
            transform: translate3d(70vw, 96vh, 54px);
  }
}

#Infographies #particle-container .particle:nth-child(14) {
  -webkit-animation: particle-animation-14 60s infinite;
          animation: particle-animation-14 60s infinite;
  opacity: 0.405;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
  -webkit-transform: translate3d(31vw, 6vh, 37px);
          transform: translate3d(31vw, 6vh, 37px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-15 {
  100% {
    -webkit-transform: translate3d(40vw, 94vh, 9px);
            transform: translate3d(40vw, 94vh, 9px);
  }
}

@keyframes particle-animation-15 {
  100% {
    -webkit-transform: translate3d(40vw, 94vh, 9px);
            transform: translate3d(40vw, 94vh, 9px);
  }
}

#Infographies #particle-container .particle:nth-child(15) {
  -webkit-animation: particle-animation-15 60s infinite;
          animation: particle-animation-15 60s infinite;
  opacity: 0.05;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  -webkit-transform: translate3d(66vw, 9vh, 12px);
          transform: translate3d(66vw, 9vh, 12px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-16 {
  100% {
    -webkit-transform: translate3d(37vw, 126vh, 21px);
            transform: translate3d(37vw, 126vh, 21px);
  }
}

@keyframes particle-animation-16 {
  100% {
    -webkit-transform: translate3d(37vw, 126vh, 21px);
            transform: translate3d(37vw, 126vh, 21px);
  }
}

#Infographies #particle-container .particle:nth-child(16) {
  -webkit-animation: particle-animation-16 60s infinite;
          animation: particle-animation-16 60s infinite;
  opacity: 0.485;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -3.2s;
          animation-delay: -3.2s;
  -webkit-transform: translate3d(73vw, 35vh, 83px);
          transform: translate3d(73vw, 35vh, 83px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-17 {
  100% {
    -webkit-transform: translate3d(61vw, 89vh, 85px);
            transform: translate3d(61vw, 89vh, 85px);
  }
}

@keyframes particle-animation-17 {
  100% {
    -webkit-transform: translate3d(61vw, 89vh, 85px);
            transform: translate3d(61vw, 89vh, 85px);
  }
}

#Infographies #particle-container .particle:nth-child(17) {
  -webkit-animation: particle-animation-17 60s infinite;
          animation: particle-animation-17 60s infinite;
  opacity: 0.19;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -3.4s;
          animation-delay: -3.4s;
  -webkit-transform: translate3d(85vw, 93vh, 52px);
          transform: translate3d(85vw, 93vh, 52px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-18 {
  100% {
    -webkit-transform: translate3d(80vw, 105vh, 99px);
            transform: translate3d(80vw, 105vh, 99px);
  }
}

@keyframes particle-animation-18 {
  100% {
    -webkit-transform: translate3d(80vw, 105vh, 99px);
            transform: translate3d(80vw, 105vh, 99px);
  }
}

#Infographies #particle-container .particle:nth-child(18) {
  -webkit-animation: particle-animation-18 60s infinite;
          animation: particle-animation-18 60s infinite;
  opacity: 0.325;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
  -webkit-transform: translate3d(5vw, 3vh, 82px);
          transform: translate3d(5vw, 3vh, 82px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-19 {
  100% {
    -webkit-transform: translate3d(83vw, 11vh, 51px);
            transform: translate3d(83vw, 11vh, 51px);
  }
}

@keyframes particle-animation-19 {
  100% {
    -webkit-transform: translate3d(83vw, 11vh, 51px);
            transform: translate3d(83vw, 11vh, 51px);
  }
}

#Infographies #particle-container .particle:nth-child(19) {
  -webkit-animation: particle-animation-19 60s infinite;
          animation: particle-animation-19 60s infinite;
  opacity: 0.285;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -3.8s;
          animation-delay: -3.8s;
  -webkit-transform: translate3d(21vw, 74vh, 87px);
          transform: translate3d(21vw, 74vh, 87px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-20 {
  100% {
    -webkit-transform: translate3d(32vw, 25vh, 63px);
            transform: translate3d(32vw, 25vh, 63px);
  }
}

@keyframes particle-animation-20 {
  100% {
    -webkit-transform: translate3d(32vw, 25vh, 63px);
            transform: translate3d(32vw, 25vh, 63px);
  }
}

#Infographies #particle-container .particle:nth-child(20) {
  -webkit-animation: particle-animation-20 60s infinite;
          animation: particle-animation-20 60s infinite;
  opacity: 0.345;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  -webkit-transform: translate3d(83vw, 123vh, 17px);
          transform: translate3d(83vw, 123vh, 17px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-21 {
  100% {
    -webkit-transform: translate3d(35vw, 85vh, 15px);
            transform: translate3d(35vw, 85vh, 15px);
  }
}

@keyframes particle-animation-21 {
  100% {
    -webkit-transform: translate3d(35vw, 85vh, 15px);
            transform: translate3d(35vw, 85vh, 15px);
  }
}

#Infographies #particle-container .particle:nth-child(21) {
  -webkit-animation: particle-animation-21 60s infinite;
          animation: particle-animation-21 60s infinite;
  opacity: 0.215;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
  -webkit-transform: translate3d(35vw, 103vh, 96px);
          transform: translate3d(35vw, 103vh, 96px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-22 {
  100% {
    -webkit-transform: translate3d(41vw, 149vh, 70px);
            transform: translate3d(41vw, 149vh, 70px);
  }
}

@keyframes particle-animation-22 {
  100% {
    -webkit-transform: translate3d(41vw, 149vh, 70px);
            transform: translate3d(41vw, 149vh, 70px);
  }
}

#Infographies #particle-container .particle:nth-child(22) {
  -webkit-animation: particle-animation-22 60s infinite;
          animation: particle-animation-22 60s infinite;
  opacity: 0.375;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -4.4s;
          animation-delay: -4.4s;
  -webkit-transform: translate3d(22vw, 133vh, 74px);
          transform: translate3d(22vw, 133vh, 74px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-23 {
  100% {
    -webkit-transform: translate3d(45vw, 108vh, 36px);
            transform: translate3d(45vw, 108vh, 36px);
  }
}

@keyframes particle-animation-23 {
  100% {
    -webkit-transform: translate3d(45vw, 108vh, 36px);
            transform: translate3d(45vw, 108vh, 36px);
  }
}

#Infographies #particle-container .particle:nth-child(23) {
  -webkit-animation: particle-animation-23 60s infinite;
          animation: particle-animation-23 60s infinite;
  opacity: 0.37;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -4.6s;
          animation-delay: -4.6s;
  -webkit-transform: translate3d(34vw, 13vh, 39px);
          transform: translate3d(34vw, 13vh, 39px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-24 {
  100% {
    -webkit-transform: translate3d(15vw, 91vh, 64px);
            transform: translate3d(15vw, 91vh, 64px);
  }
}

@keyframes particle-animation-24 {
  100% {
    -webkit-transform: translate3d(15vw, 91vh, 64px);
            transform: translate3d(15vw, 91vh, 64px);
  }
}

#Infographies #particle-container .particle:nth-child(24) {
  -webkit-animation: particle-animation-24 60s infinite;
          animation: particle-animation-24 60s infinite;
  opacity: 0.225;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
  -webkit-transform: translate3d(85vw, 145vh, 9px);
          transform: translate3d(85vw, 145vh, 9px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-25 {
  100% {
    -webkit-transform: translate3d(35vw, 49vh, 71px);
            transform: translate3d(35vw, 49vh, 71px);
  }
}

@keyframes particle-animation-25 {
  100% {
    -webkit-transform: translate3d(35vw, 49vh, 71px);
            transform: translate3d(35vw, 49vh, 71px);
  }
}

#Infographies #particle-container .particle:nth-child(25) {
  -webkit-animation: particle-animation-25 60s infinite;
          animation: particle-animation-25 60s infinite;
  opacity: 0.08;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  -webkit-transform: translate3d(62vw, 49vh, 10px);
          transform: translate3d(62vw, 49vh, 10px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-26 {
  100% {
    -webkit-transform: translate3d(4vw, 108vh, 12px);
            transform: translate3d(4vw, 108vh, 12px);
  }
}

@keyframes particle-animation-26 {
  100% {
    -webkit-transform: translate3d(4vw, 108vh, 12px);
            transform: translate3d(4vw, 108vh, 12px);
  }
}

#Infographies #particle-container .particle:nth-child(26) {
  -webkit-animation: particle-animation-26 60s infinite;
          animation: particle-animation-26 60s infinite;
  opacity: 0.225;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -5.2s;
          animation-delay: -5.2s;
  -webkit-transform: translate3d(43vw, 65vh, 25px);
          transform: translate3d(43vw, 65vh, 25px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-27 {
  100% {
    -webkit-transform: translate3d(45vw, 94vh, 93px);
            transform: translate3d(45vw, 94vh, 93px);
  }
}

@keyframes particle-animation-27 {
  100% {
    -webkit-transform: translate3d(45vw, 94vh, 93px);
            transform: translate3d(45vw, 94vh, 93px);
  }
}

#Infographies #particle-container .particle:nth-child(27) {
  -webkit-animation: particle-animation-27 60s infinite;
          animation: particle-animation-27 60s infinite;
  opacity: 0.325;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
  -webkit-transform: translate3d(14vw, 79vh, 75px);
          transform: translate3d(14vw, 79vh, 75px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-28 {
  100% {
    -webkit-transform: translate3d(82vw, 109vh, 48px);
            transform: translate3d(82vw, 109vh, 48px);
  }
}

@keyframes particle-animation-28 {
  100% {
    -webkit-transform: translate3d(82vw, 109vh, 48px);
            transform: translate3d(82vw, 109vh, 48px);
  }
}

#Infographies #particle-container .particle:nth-child(28) {
  -webkit-animation: particle-animation-28 60s infinite;
          animation: particle-animation-28 60s infinite;
  opacity: 0.205;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -5.6s;
          animation-delay: -5.6s;
  -webkit-transform: translate3d(90vw, 20vh, 99px);
          transform: translate3d(90vw, 20vh, 99px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-29 {
  100% {
    -webkit-transform: translate3d(10vw, 22vh, 31px);
            transform: translate3d(10vw, 22vh, 31px);
  }
}

@keyframes particle-animation-29 {
  100% {
    -webkit-transform: translate3d(10vw, 22vh, 31px);
            transform: translate3d(10vw, 22vh, 31px);
  }
}

#Infographies #particle-container .particle:nth-child(29) {
  -webkit-animation: particle-animation-29 60s infinite;
          animation: particle-animation-29 60s infinite;
  opacity: 0.22;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -5.8s;
          animation-delay: -5.8s;
  -webkit-transform: translate3d(87vw, 128vh, 81px);
          transform: translate3d(87vw, 128vh, 81px);
  background: #fff6da;
}

@-webkit-keyframes particle-animation-30 {
  100% {
    -webkit-transform: translate3d(42vw, 150vh, 44px);
            transform: translate3d(42vw, 150vh, 44px);
  }
}

@keyframes particle-animation-30 {
  100% {
    -webkit-transform: translate3d(42vw, 150vh, 44px);
            transform: translate3d(42vw, 150vh, 44px);
  }
}

#Infographies #particle-container .particle:nth-child(30) {
  -webkit-animation: particle-animation-30 60s infinite;
          animation: particle-animation-30 60s infinite;
  opacity: 0.175;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
  -webkit-transform: translate3d(52vw, 103vh, 63px);
          transform: translate3d(52vw, 103vh, 63px);
  background: #fff6da;
}

#Sites {
  min-height: 100vh;
  width: 100vw;
  padding: 100px 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: 0px 0px 50px 50px #0A0A0A;
          box-shadow: 0px 0px 50px 50px #0A0A0A;
  background: #0a0a0a;
  z-index: 99;
}

#Sites svg {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-box-shadow: 0px 0px 500px 150px #0a0a0a;
          box-shadow: 0px 0px 500px 150px #0a0a0a;
}

#Sites .wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 0vw;
  height: 0px;
  background: radial-gradient(rgba(158, 38, 22, 0.315) 0%, #0a0a0a46 70%);
  opacity: 0;
}

#Sites .wrapper .mask {
  position: absolute;
  width: 700px;
  height: 90px;
  background: rgba(58, 23, 7, 0.5);
  -webkit-clip-path: url(#glassMask);
          clip-path: url(#glassMask);
  opacity: 1;
}

#Sites .wrapper canvas {
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(59, 15, 9, 0.582) 0%, rgba(61, 14, 8, 0.137) 100%);
}

#Sites .wrap_title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

#Sites .wrap_title .lines_tarifs {
  position: relative;
  left: 0;
  height: 100%;
  margin: auto;
  width: 100%;
  z-index: 48;
}

#Sites .wrap_title .lines_tarifs .line_tarifs {
  position: absolute;
  width: 100vw;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  height: 1px;
  left: 0;
  top: 50%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.1)), color-stop(50%, #fff4d1), to(#fff4d1));
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, #fff4d1 50%, #fff4d1 100%);
  background-size: 200%;
  background-position: 0% 0%;
  overflow: hidden;
  z-index: 51;
}

#Sites .wrap_title .lines_tarifs .line_tarifs:nth-child(1) {
  margin: -2.5em 0;
}

#Sites .wrap_title .lines_tarifs .line_tarifs:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

#Sites .wrap_title .lines_tarifs .line_tarifs:nth-child(3) {
  margin: 2.5em 0;
}

#Sites .wrap_title .lines_tarifs .line_tarifs:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

#Sites .wrap_title .title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#Sites .wrap_title h2, #Sites .wrap_title h3 {
  font-size: 7em;
  font-family: 'Satisfy', cursive;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
  color: #1f1f1f;
  z-index: 50;
}

#Sites .wrap_title h2 {
  position: relative;
}

#Sites .wrap_title h3 {
  position: absolute;
  color: transparent;
  -webkit-text-stroke: 0.2em #0A0A0A;
}

#Sites .wrap_title .h2_on_1 {
  -webkit-animation: h2_on1 0.3s cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
          animation: h2_on1 0.3s cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
}

@-webkit-keyframes h2_on1 {
  0% {
    color: #1f1f1f;
  }
  100% {
    text-shadow: 0 0 1vw #BF4C1F, 0 0 3vw #BF4C1F, 0 0 5vw #bf4c1f36, 0 0 5vw rgba(191, 76, 31, 0.329), 0 0 0.4vw #FED128;
    color: #ffffff;
  }
}

@keyframes h2_on1 {
  0% {
    color: #1f1f1f;
  }
  100% {
    text-shadow: 0 0 1vw #BF4C1F, 0 0 3vw #BF4C1F, 0 0 5vw #bf4c1f36, 0 0 5vw rgba(191, 76, 31, 0.329), 0 0 0.4vw #FED128;
    color: #ffffff;
  }
}

#Sites .wrap_title .black_square {
  position: absolute;
  left: 0;
  width: 100%;
  height: 200px;
  background: #0A0A0A;
  z-index: 50;
}

#Sites .common {
  position: relative;
  right: 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 100px;
  min-height: 400px;
}

#Sites .common .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#Sites .table {
  position: relative;
  width: 250px;
  height: 400px;
  text-align: center;
  margin: 50px 25px;
  overflow: hidden;
  background: #181818;
  border-radius: 5px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  text-decoration: none;
}

#Sites .table .top {
  position: relative;
  width: 100%;
  height: 150px;
}

#Sites .table .top h3 {
  position: absolute;
  bottom: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(50%);
          transform: translateX(-50%) translateY(50%);
  font-size: 1em;
  color: white;
  width: 100%;
  z-index: 99;
}

#Sites .table .top .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(58, 23, 7, 0.5);
  opacity: 1;
  overflow: hidden;
}

#Sites .table .top canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(rgba(59, 15, 9, 0.582) 0%, rgba(61, 14, 8, 0.137) 100%);
}

#Sites .table .top .center {
  position: absolute;
  bottom: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(50%);
          transform: translateX(-50%) translateY(50%);
  width: 120px;
  height: 120px;
  border-radius: 100%;
  overflow: hidden;
  background: #181818;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5), inset 0px 0px 10px rgba(0, 0, 0, 0.75);
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5), inset 0px 0px 10px rgba(0, 0, 0, 0.75);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#Sites .table .top .center .logo {
  width: 100%;
  height: 100%;
}

#Sites .table .bottom {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  min-height: -webkit-max-content;
  min-height: -moz-max-content;
  min-height: max-content;
}

#Sites .table .bottom p {
  margin: 25px;
  margin-top: 80px;
  text-align: justify;
  font-size: 72.5%;
  color: white;
}

#Sites .table .flp_text p {
  font-size: 72%;
}

#Sites .table:hover {
  -webkit-transform: scale(1.1) !important;
          transform: scale(1.1) !important;
}

#Sites .table:hover .center {
  -webkit-transform: translateX(-50%) translateY(50%) scale(1.1);
          transform: translateX(-50%) translateY(50%) scale(1.1);
}

#Sites .flex:nth-of-type(1) .table:nth-of-type(1) {
  right: -1000px;
}

#Sites .flex:nth-of-type(1) .table:nth-of-type(1) .logo {
  background: url("../images/cards/marco.png") center no-repeat;
  background-size: 50%;
}

#Sites .flex:nth-of-type(1) .table:nth-of-type(2) {
  right: -1000px;
}

#Sites .flex:nth-of-type(1) .table:nth-of-type(2) .logo {
  background: url("../images/cards/tatapulse.svg") center no-repeat;
  background-size: 150%;
}

#Sites .flex:nth-of-type(2) .table:nth-of-type(1) {
  right: -1000px;
}

#Sites .flex:nth-of-type(2) .table:nth-of-type(1) .logo {
  background: url("../images/cards/unibee.png") center no-repeat;
  background-size: 70%;
}

#Sites .flex:nth-of-type(2) .table:nth-of-type(2) {
  right: -1000px;
}

#Sites .flex:nth-of-type(2) .table:nth-of-type(2) .logo {
  background: url("../images/cards/fdgt.svg") center no-repeat;
  background-size: 70%;
}

#Tarifs {
  width: 100vw;
  min-height: 120vh;
  padding: 150px 0;
  overflow: hidden;
  text-align: center;
  background: #0a0a0a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 100;
  /*.text_on {
      transform: rotateY(0deg);
      //animation: flip 1s linear forwards alternate-reverse;
    }*/
}

#Tarifs .wrap_title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

#Tarifs .wrap_title .lines_tarifs {
  position: relative;
  left: 0;
  height: 100%;
  margin: auto;
  width: 100%;
  z-index: 48;
}

#Tarifs .wrap_title .lines_tarifs .line_tarifs {
  position: absolute;
  width: 100vw;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  height: 1px;
  left: 0;
  top: 50%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.1)), color-stop(50%, #fff4d1), to(#fff4d1));
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, #fff4d1 50%, #fff4d1 100%);
  background-size: 200%;
  background-position: 0% 0%;
  overflow: hidden;
  z-index: 51;
}

#Tarifs .wrap_title .lines_tarifs .line_tarifs:nth-child(1) {
  margin: -2.5em 0;
}

#Tarifs .wrap_title .lines_tarifs .line_tarifs:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

#Tarifs .wrap_title .lines_tarifs .line_tarifs:nth-child(3) {
  margin: 2.5em 0;
}

#Tarifs .wrap_title .lines_tarifs .line_tarifs:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

#Tarifs .wrap_title .title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#Tarifs .wrap_title h2, #Tarifs .wrap_title h3 {
  font-size: 7em;
  font-family: 'Satisfy', cursive;
  font-weight: 800;
  margin: 0;
  color: #1f1f1f;
  z-index: 50;
}

#Tarifs .wrap_title h2 {
  position: relative;
}

#Tarifs .wrap_title h3 {
  position: absolute;
  color: transparent;
  -webkit-text-stroke: 0.2em #0A0A0A;
}

#Tarifs .wrap_title .h2_on_2 {
  -webkit-animation: h2_on2 0.3s cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
          animation: h2_on2 0.3s cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
}

@-webkit-keyframes h2_on2 {
  0% {
    color: #1f1f1f;
  }
  100% {
    text-shadow: 0 0 1vw #fff4d1, 0 0 3vw #fff4d1, 0 0 5vw #fff4d169, 0 0 5vw #fff4d16b, 0 0 .4vw #FED128;
    color: #ffffff;
  }
}

@keyframes h2_on2 {
  0% {
    color: #1f1f1f;
  }
  100% {
    text-shadow: 0 0 1vw #fff4d1, 0 0 3vw #fff4d1, 0 0 5vw #fff4d169, 0 0 5vw #fff4d16b, 0 0 .4vw #FED128;
    color: #ffffff;
  }
}

#Tarifs .wrap_title .black_square {
  position: absolute;
  left: 0;
  width: 100%;
  height: 200px;
  background: #0A0A0A;
  z-index: 50;
}

#Tarifs .common {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#Tarifs .common .mirror {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 200px 100px 0px 100px;
}

#Tarifs .common .mirror1 {
  left: -100%;
}

#Tarifs .common .mirror2 {
  right: -100%;
}

#Tarifs .neon1 .front_back {
  color: #fff4d1;
}

#Tarifs .neon1 h3 {
  color: #fff4d1;
  margin: 0;
  margin-top: 5%;
  font-size: 0.7em;
}

#Tarifs .neon1 span:nth-child(1) {
  background: -webkit-gradient(linear, left top, right top, from(transparent), to(#fff4d1));
  background: linear-gradient(90deg, transparent, #fff4d1);
}

#Tarifs .neon1 span:nth-child(2) {
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff4d1));
  background: linear-gradient(180deg, transparent, #fff4d1);
}

#Tarifs .neon1 span:nth-child(3) {
  background: -webkit-gradient(linear, right top, left top, from(transparent), to(#fff4d1));
  background: linear-gradient(270deg, transparent, #fff4d1);
}

#Tarifs .neon1 span:nth-child(4) {
  background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#fff4d1));
  background: linear-gradient(360deg, transparent, #fff4d1);
}

#Tarifs .neon2 .front_back {
  color: #ffac75;
}

#Tarifs .neon2 h3 {
  color: #ffac75;
  margin: 0;
  margin-top: 5%;
  font-size: 0.7em;
}

#Tarifs .neon2 span:nth-child(1) {
  background: -webkit-gradient(linear, left top, right top, from(transparent), to(#ffac75));
  background: linear-gradient(90deg, transparent, #ffac75);
}

#Tarifs .neon2 span:nth-child(2) {
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#ffac75));
  background: linear-gradient(180deg, transparent, #ffac75);
}

#Tarifs .neon2 span:nth-child(3) {
  background: -webkit-gradient(linear, right top, left top, from(transparent), to(#ffac75));
  background: linear-gradient(270deg, transparent, #ffac75);
}

#Tarifs .neon2 span:nth-child(4) {
  background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#ffac75));
  background: linear-gradient(360deg, transparent, #ffac75);
}

#Tarifs .click {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 49;
}

#Tarifs .neon, #Tarifs .neon_mirror {
  position: relative;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  width: 250px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 5px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transform: rotateX(0deg) scale(1.1);
          transform: rotateX(0deg) scale(1.1);
  -webkit-box-shadow: 0 0 10px #000000;
          box-shadow: 0 0 10px #000000;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  z-index: 51;
}

#Tarifs .neon_mirror {
  opacity: 0;
  -webkit-transform: scale(1.1) rotateX(180deg) translateY(-105%);
          transform: scale(1.1) rotateX(180deg) translateY(-105%);
  opacity: 0;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#0A0A0A));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #0A0A0A 100%);
          mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#0A0A0A));
          mask-image: linear-gradient(to bottom, transparent 0%, #0A0A0A 100%);
}

#Tarifs .neon_mirror h3 {
  font-size: 0.75em;
  margin: 0;
}

#Tarifs .neon_mirror li {
  color: #0A0A0A !important;
}

#Tarifs .neon1_mirror {
  background: #fff4d1;
  -webkit-box-shadow: 0 0 25px #fff4d1, 0 0 50px #fff4d1 !important;
          box-shadow: 0 0 25px #fff4d1, 0 0 50px #fff4d1 !important;
}

#Tarifs .neon2_mirror {
  background: #ffac75;
  -webkit-box-shadow: 0 0 25px #ffac75, 0 0 50px #ffac75 !important;
          box-shadow: 0 0 25px #ffac75, 0 0 50px #ffac75 !important;
}

#Tarifs .front_back {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  font-family: 'Nunito', cursive;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 15px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 51;
}

#Tarifs .front, #Tarifs .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#Tarifs .front {
  width: 100%;
  position: relative;
}

#Tarifs .back {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#Tarifs .back ul {
  padding: 0 15%;
  margin: 5%;
  margin-top: 10px;
}

#Tarifs .back li {
  text-align: left;
  white-space: normal;
  width: 100%;
  font-size: 0.4em;
  color: white;
}

.front_back_flip {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.front_back_flip_mirror {
  -webkit-transform: rotateX(180deg) !important;
          transform: rotateX(180deg) !important;
}

.neon_flip {
  -webkit-transform: rotateX(180deg) scale(1.1) !important;
          transform: rotateX(180deg) scale(1.1) !important;
}

.hover_card {
  -webkit-transition-delay: 0.5s !important;
          transition-delay: 0.5s !important;
  -webkit-transform: scale(1) !important;
          transform: scale(1) !important;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.hover_card ~ .neon_mirror {
  -webkit-transition-delay: 0.5s !important;
          transition-delay: 0.5s !important;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  opacity: 0.5 !important;
  -webkit-transform: scale(1) rotateX(180deg) translateY(-100%) !important;
          transform: scale(1) rotateX(180deg) translateY(-100%) !important;
}

.hover_card ~ .neon_mirror .front_back {
  -webkit-transition-delay: 0.5s !important;
          transition-delay: 0.5s !important;
}

.hover_card ~ .neon_mirror .back li, .hover_card ~ .neon_mirror h3 {
  -webkit-transition: 0.5s 0.5s !important;
  transition: 0.5s 0.5s !important;
}

.hover_card span {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  z-index: 2;
}

.hover_card span:nth-child(1) {
  -webkit-animation: animate1 0.4s linear forwards;
          animation: animate1 0.4s linear forwards;
}

@-webkit-keyframes animate1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.hover_card span:nth-child(2) {
  -webkit-animation: animate2 0.4s linear forwards;
          animation: animate2 0.4s linear forwards;
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}

@-webkit-keyframes animate2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}

.hover_card span:nth-child(3) {
  -webkit-animation: animate3 0.4s linear forwards;
          animation: animate3 0.4s linear forwards;
  -webkit-animation-delay: 0.30s;
          animation-delay: 0.30s;
}

@-webkit-keyframes animate3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}

.hover_card span:nth-child(4) {
  -webkit-animation: animate4 0.4s linear forwards;
          animation: animate4 0.4s linear forwards;
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}

@-webkit-keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}

.hover_card span {
  position: absolute;
  display: block;
}

.hover_card span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

.hover_card span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
}

.hover_card span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
}

.hover_card span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
}

.hover_card .front_back {
  color: #0A0A0A !important;
  -webkit-transition-delay: 0.5s !important;
          transition-delay: 0.5s !important;
}

.hover_card .back li, .hover_card h3 {
  color: #0A0A0A !important;
  -webkit-transition: 0.5s 0.5s !important;
  transition: 0.5s 0.5s !important;
}

.hover_card_color1 {
  background: #fff4d1 !important;
  -webkit-box-shadow: 0 0 5px #fff4d1,
 0 0 25px #fff4d1,
 0 0 50px #fff4d1 !important;
          box-shadow: 0 0 5px #fff4d1,
 0 0 25px #fff4d1,
 0 0 50px #fff4d1 !important;
}

.hover_card_color2 {
  background: #ffac75 !important;
  -webkit-box-shadow: 0 0 5px #ffac75,
 0 0 25px #ffac75,
 0 0 50px #ffac75 !important;
          box-shadow: 0 0 5px #ffac75,
 0 0 25px #ffac75,
 0 0 50px #ffac75 !important;
}

#Formulaire {
  background: #0a0a0a;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  z-index: 99;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#Formulaire #canvas {
  display: block;
  position: absolute;
  top: 0;
  width: 140%;
}

#Formulaire .shadow_top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 600px;
  background: -webkit-gradient(linear, left top, left bottom, from(#0A0A0A), to(transparent));
  background: linear-gradient(to bottom, #0A0A0A 0%, transparent 100%);
  z-index: 101;
}

#Formulaire .shadow_bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 600px;
  background: -webkit-gradient(linear, left bottom, left top, from(#0A0A0A), to(transparent));
  background: linear-gradient(to top, #0A0A0A 0%, transparent 100%);
  z-index: 101;
}

#Formulaire h2 {
  color: white;
  font-size: 3em;
  z-index: 101;
  margin-top: 0px;
  margin-bottom: 25px;
}

#Formulaire .form {
  background: #ffffff;
  max-width: 360px;
  margin: 0 auto 200px;
  padding: 45px;
  border-radius: 5px;
  text-align: center;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  color: #0A0A0A;
  z-index: 103;
}

#Formulaire .form .confirme {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -75%);
          transform: translate(-50%, -75%);
  background: rgba(0, 0, 0, 0.75);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

#Formulaire .form .confirme p {
  color: white;
  font-size: 100%;
  margin: 0;
  padding: 5vw;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

#Formulaire .form label {
  font-size: 0.9em;
}

#Formulaire .form .identite {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#Formulaire .form input, #Formulaire .form textarea {
  font-family: "Nunito", sans-serif;
  outline: 0;
  width: 100%;
  border: 0;
  margin: 0 0 25px;
  padding: 10px 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 14px;
  border-bottom: 2px solid #B5501C;
  background: none;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

#Formulaire .form input:not(.button):focus {
  border-bottom: 4px solid #0A0A0A;
}

#Formulaire .form textarea {
  resize: none;
  display: block;
  overflow-y: hidden;
}

#Formulaire .form textarea:focus {
  outline: none;
  padding-bottom: 150px;
  overflow-y: auto;
  border-bottom: 2px solid #0A0A0A;
}

#Formulaire .form .button {
  font-family: "Nunito", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: -webkit-gradient(linear, left top, right top, from(#b5401c), color-stop(25%, #b5401c), color-stop(25%, #0A0A0A), color-stop(50%, #0A0A0A), color-stop(50%, #449753), color-stop(75%, #449753), color-stop(75%, #0A0A0A), to(#0A0A0A));
  background: linear-gradient(to right, #b5401c 0%, #b5401c 25%, #0A0A0A 25%, #0A0A0A 50%, #449753 50%, #449753 75%, #0A0A0A 75%, #0A0A0A 100%);
  background-size: 800% 100%;
  background-position: 0%;
  width: 100%;
  border: 0;
  padding: 15px;
  margin: 15px 0;
  color: #f1f1f1;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border: none;
}

#Formulaire .form .button:hover {
  background-position: 37.5% 0%;
}

#Formulaire .form div:not(.identite) {
  text-align: left;
  margin: 0 15px;
}

#Formulaire .form .confidentiel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 0.75em;
  cursor: pointer;
}

#Formulaire .form .confidentiel #checkbox_id {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  margin: 0 10px;
  cursor: pointer;
}

#Formulaire .form .confidentiel label {
  text-align: justify;
  cursor: pointer;
}

footer {
  position: relative;
  background: #0A0A0A;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 9998;
  -webkit-box-shadow: 0 0 50px 50px #0A0A0A;
          box-shadow: 0 0 50px 50px #0A0A0A;
}

footer .border_top {
  display: block;
  height: 3px;
  width: 0%;
  background-color: white;
}

footer #RS {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 100vw;
  padding: 50px 25px;
  background: #0A0A0A;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-column-gap: 5%;
          column-gap: 5%;
}

footer #RS h2 {
  color: white;
  font-size: 0.8em;
}

footer #RS .circle {
  display: block;
  width: 75px;
  height: 75px;
  border: white solid 3px;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

footer #RS .circle .insta, footer #RS .circle .linkedin, footer #RS .circle .mail {
  width: 75%;
  -webkit-filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(235deg) brightness(102%) contrast(102%);
          filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(235deg) brightness(102%) contrast(102%);
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

footer #RS .circle:nth-of-type(1):hover {
  -webkit-animation: circle_neon 3s ease-in-out infinite alternate;
          animation: circle_neon 3s ease-in-out infinite alternate;
  z-index: 50;
}

footer #RS .circle:nth-of-type(1):hover .insta {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@-webkit-keyframes circle_neon {
  0%, 39%, 47%, 98% {
    -webkit-box-shadow: 0 0 1vw #EB007A, 0 0 2vw #EB007A, 0 0 1vw #EB007A, 0 0 1vw #EB007A, 0 0 0.75vw #0f37a5,
 inset 0 0 1.5vw #EB007A, inset 0 0 1.5vw #EB007A, inset 0 0 5vw #EB007A, inset 0 0 0.75vw #EB007A, inset 0 0 .75vw #EB007A;
            box-shadow: 0 0 1vw #EB007A, 0 0 2vw #EB007A, 0 0 1vw #EB007A, 0 0 1vw #EB007A, 0 0 0.75vw #0f37a5,
 inset 0 0 1.5vw #EB007A, inset 0 0 1.5vw #EB007A, inset 0 0 5vw #EB007A, inset 0 0 0.75vw #EB007A, inset 0 0 .75vw #EB007A;
  }
  40%, 46%, 100% {
    -webkit-box-shadow: 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.25vw #0f37a5,
 inset 0 0 0.5vw #EB007A, inset 0 0 0.5vw #EB007A, inset 0 0 0.5vw #EB007A, inset 0 0 0.25vw #EB007A, inset 0 0 .25vw #EB007A;
            box-shadow: 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.25vw #0f37a5,
 inset 0 0 0.5vw #EB007A, inset 0 0 0.5vw #EB007A, inset 0 0 0.5vw #EB007A, inset 0 0 0.25vw #EB007A, inset 0 0 .25vw #EB007A;
  }
}

@keyframes circle_neon {
  0%, 39%, 47%, 98% {
    -webkit-box-shadow: 0 0 1vw #EB007A, 0 0 2vw #EB007A, 0 0 1vw #EB007A, 0 0 1vw #EB007A, 0 0 0.75vw #0f37a5,
 inset 0 0 1.5vw #EB007A, inset 0 0 1.5vw #EB007A, inset 0 0 5vw #EB007A, inset 0 0 0.75vw #EB007A, inset 0 0 .75vw #EB007A;
            box-shadow: 0 0 1vw #EB007A, 0 0 2vw #EB007A, 0 0 1vw #EB007A, 0 0 1vw #EB007A, 0 0 0.75vw #0f37a5,
 inset 0 0 1.5vw #EB007A, inset 0 0 1.5vw #EB007A, inset 0 0 5vw #EB007A, inset 0 0 0.75vw #EB007A, inset 0 0 .75vw #EB007A;
  }
  40%, 46%, 100% {
    -webkit-box-shadow: 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.25vw #0f37a5,
 inset 0 0 0.5vw #EB007A, inset 0 0 0.5vw #EB007A, inset 0 0 0.5vw #EB007A, inset 0 0 0.25vw #EB007A, inset 0 0 .25vw #EB007A;
            box-shadow: 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.5vw #EB007A, 0 0 0.25vw #0f37a5,
 inset 0 0 0.5vw #EB007A, inset 0 0 0.5vw #EB007A, inset 0 0 0.5vw #EB007A, inset 0 0 0.25vw #EB007A, inset 0 0 .25vw #EB007A;
  }
}

footer #RS .circle:nth-of-type(2):hover {
  -webkit-animation: circle2_neon 3s ease-in-out infinite alternate;
          animation: circle2_neon 3s ease-in-out infinite alternate;
}

footer #RS .circle:nth-of-type(2):hover .linkedin {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@-webkit-keyframes circle2_neon {
  0%, 39%, 47%, 98% {
    -webkit-box-shadow: 0 0 1vw #0A66C2, 0 0 2vw #0A66C2, 0 0 1vw #0A66C2, 0 0 1vw #0A66C2, 0 0 0.75vw #EB007A,
 inset 0 0 1.5vw #0A66C2, inset 0 0 1.5vw #0A66C2, inset 0 0 5vw #0A66C2, inset 0 0 0.75vw #0A66C2, inset 0 0 .75vw #0A66C2;
            box-shadow: 0 0 1vw #0A66C2, 0 0 2vw #0A66C2, 0 0 1vw #0A66C2, 0 0 1vw #0A66C2, 0 0 0.75vw #EB007A,
 inset 0 0 1.5vw #0A66C2, inset 0 0 1.5vw #0A66C2, inset 0 0 5vw #0A66C2, inset 0 0 0.75vw #0A66C2, inset 0 0 .75vw #0A66C2;
  }
  40%, 46%, 100% {
    -webkit-box-shadow: 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.25vw #EB007A,
 inset 0 0 0.5vw #0A66C2, inset 0 0 0.5vw #0A66C2, inset 0 0 0.5vw #0A66C2, inset 0 0 0.25vw #0A66C2, inset 0 0 .25vw #0A66C2;
            box-shadow: 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.25vw #EB007A,
 inset 0 0 0.5vw #0A66C2, inset 0 0 0.5vw #0A66C2, inset 0 0 0.5vw #0A66C2, inset 0 0 0.25vw #0A66C2, inset 0 0 .25vw #0A66C2;
  }
}

@keyframes circle2_neon {
  0%, 39%, 47%, 98% {
    -webkit-box-shadow: 0 0 1vw #0A66C2, 0 0 2vw #0A66C2, 0 0 1vw #0A66C2, 0 0 1vw #0A66C2, 0 0 0.75vw #EB007A,
 inset 0 0 1.5vw #0A66C2, inset 0 0 1.5vw #0A66C2, inset 0 0 5vw #0A66C2, inset 0 0 0.75vw #0A66C2, inset 0 0 .75vw #0A66C2;
            box-shadow: 0 0 1vw #0A66C2, 0 0 2vw #0A66C2, 0 0 1vw #0A66C2, 0 0 1vw #0A66C2, 0 0 0.75vw #EB007A,
 inset 0 0 1.5vw #0A66C2, inset 0 0 1.5vw #0A66C2, inset 0 0 5vw #0A66C2, inset 0 0 0.75vw #0A66C2, inset 0 0 .75vw #0A66C2;
  }
  40%, 46%, 100% {
    -webkit-box-shadow: 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.25vw #EB007A,
 inset 0 0 0.5vw #0A66C2, inset 0 0 0.5vw #0A66C2, inset 0 0 0.5vw #0A66C2, inset 0 0 0.25vw #0A66C2, inset 0 0 .25vw #0A66C2;
            box-shadow: 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.5vw #0A66C2, 0 0 0.25vw #EB007A,
 inset 0 0 0.5vw #0A66C2, inset 0 0 0.5vw #0A66C2, inset 0 0 0.5vw #0A66C2, inset 0 0 0.25vw #0A66C2, inset 0 0 .25vw #0A66C2;
  }
}

footer #RS .circle:nth-of-type(3):hover {
  -webkit-animation: circle3_neon 3s ease-in-out infinite alternate;
          animation: circle3_neon 3s ease-in-out infinite alternate;
}

footer #RS .circle:nth-of-type(3):hover .mail {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@-webkit-keyframes circle3_neon {
  0%, 39%, 47%, 98% {
    -webkit-box-shadow: 0 0 1vw #EA3E35, 0 0 2vw #EA3E35, 0 0 1vw #EA3E35, 0 0 1vw #EA3E35, 0 0 0.75vw #EB007A,
 inset 0 0 1.5vw #EA3E35, inset 0 0 1.5vw #EA3E35, inset 0 0 5vw #EA3E35, inset 0 0 0.75vw #EA3E35, inset 0 0 .75vw #0A66C2;
            box-shadow: 0 0 1vw #EA3E35, 0 0 2vw #EA3E35, 0 0 1vw #EA3E35, 0 0 1vw #EA3E35, 0 0 0.75vw #EB007A,
 inset 0 0 1.5vw #EA3E35, inset 0 0 1.5vw #EA3E35, inset 0 0 5vw #EA3E35, inset 0 0 0.75vw #EA3E35, inset 0 0 .75vw #0A66C2;
  }
  40%, 46%, 100% {
    -webkit-box-shadow: 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.25vw #EB007A,
 inset 0 0 0.5vw #EA3E35, inset 0 0 0.5vw #EA3E35, inset 0 0 0.5vw #EA3E35, inset 0 0 0.25vw #EA3E35, inset 0 0 .25vw #0A66C2;
            box-shadow: 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.25vw #EB007A,
 inset 0 0 0.5vw #EA3E35, inset 0 0 0.5vw #EA3E35, inset 0 0 0.5vw #EA3E35, inset 0 0 0.25vw #EA3E35, inset 0 0 .25vw #0A66C2;
  }
}

@keyframes circle3_neon {
  0%, 39%, 47%, 98% {
    -webkit-box-shadow: 0 0 1vw #EA3E35, 0 0 2vw #EA3E35, 0 0 1vw #EA3E35, 0 0 1vw #EA3E35, 0 0 0.75vw #EB007A,
 inset 0 0 1.5vw #EA3E35, inset 0 0 1.5vw #EA3E35, inset 0 0 5vw #EA3E35, inset 0 0 0.75vw #EA3E35, inset 0 0 .75vw #0A66C2;
            box-shadow: 0 0 1vw #EA3E35, 0 0 2vw #EA3E35, 0 0 1vw #EA3E35, 0 0 1vw #EA3E35, 0 0 0.75vw #EB007A,
 inset 0 0 1.5vw #EA3E35, inset 0 0 1.5vw #EA3E35, inset 0 0 5vw #EA3E35, inset 0 0 0.75vw #EA3E35, inset 0 0 .75vw #0A66C2;
  }
  40%, 46%, 100% {
    -webkit-box-shadow: 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.25vw #EB007A,
 inset 0 0 0.5vw #EA3E35, inset 0 0 0.5vw #EA3E35, inset 0 0 0.5vw #EA3E35, inset 0 0 0.25vw #EA3E35, inset 0 0 .25vw #0A66C2;
            box-shadow: 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.5vw #EA3E35, 0 0 0.25vw #EB007A,
 inset 0 0 0.5vw #EA3E35, inset 0 0 0.5vw #EA3E35, inset 0 0 0.5vw #EA3E35, inset 0 0 0.25vw #EA3E35, inset 0 0 .25vw #0A66C2;
  }
}
/*# sourceMappingURL=index.css.map */