@font-face {
  font-family: lucida console;
  font-style: normal;
  font-weight: 400;
  src: local('Lucida Console'), url(https://fonts.cdnfonts.com/s/56356/lucon.woff) format('woff');
}
/* GENERALITIES */
* {
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Lucida Console', sans-serif;
}
.clickable,
button[type="submit"] {
  cursor: pointer;
}
body {
  background-image: url(../img/background.jpg?1);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
}
h1,
h2 {
  font-size: 52px;
  margin-bottom: 25px;
  padding-top: 15px;
  color: #1aca64;
  text-transform: uppercase;
}
h2 {
  font-size: 26px;
}
p {
  font-size: 16px;
  margin: 10px 0;
}
p span {
  font-size: 14px;
  margin-top: 5px;
  display: inline-block;
}
p span.max {
  font-size: 18px;
  margin-bottom: 5px;
}
p.max {
  font-size: 18px;
  margin-bottom: 5px;
}
a {
  color: #1aca64;
  font-style: italic;
}
/* FOOTER */
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  font-size: 12px;
  pointer-events: none;
  text-align: right;
  z-index: 99999;
}
footer a {
  font-style: italic;
  color: #49e88c;
}
footer a:hover {
  color: #1aca64;
}
footer span {
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2px 5px;
  display: inline-block;
  color: #fff;
}
footer .likea {
  font-weight: normal;
  text-decoration: underline;
  opacity: 0.8;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
}
/* LIGHTBOX */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 5;
  /*h1, h2, h3 {
			color: @dark;
		}*/
}
.lightbox.active {
  display: block;
}
.lightbox .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.lightbox .box {
  margin: 0 auto;
  max-height: 100vh;
  width: -webkit-fit-content;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 95%;
}
.lightbox .content {
  padding-top: 45px;
  padding-bottom: 35px;
  overflow: hidden;
  text-align: center;
  width: 100%;
  margin: 25px auto;
  margin-top: 50px;
  padding: 25px;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0 0 25px 10px rgba(26, 202, 100, 0.75);
          box-shadow: 0 0 25px 10px rgba(26, 202, 100, 0.75);
}
.lightbox p {
  color: #fff;
}
.lightbox .close {
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 999;
  display: block;
  width: 30px;
  height: 30px;
  color: #1aca64;
  text-align: center;
  line-height: 18px;
  font-size: 30px;
  cursor: pointer;
  -webkit-transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
}
/* FORM */
form {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}
.return_msg {
  display: block;
  padding: 10px;
  background-color: #1aca64;
  color: #000000;
  font-size: 18px;
  margin: 25px auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
label,
input,
button {
  display: block;
  width: 100%;
}
label {
  text-align: left;
  padding-top: 15px;
  padding-bottom: 5px;
  font-size: 20px;
  text-transform: uppercase;
  color: #1aca64;
}
input,
button {
  height: 40px;
  padding: 5px;
  -webkit-box-shadow: inset 0 -3px 0 -1px #1aca64;
          box-shadow: inset 0 -3px 0 -1px #1aca64;
  border: none;
  background-color: transparent;
  color: #fff;
  -webkit-transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
}
input:focus,
button:hover,
button:focus {
  outline: none;
  -webkit-box-shadow: inset 0 -40px 0 #1aca64, 0 0 25px 10px rgba(26, 202, 100, 0.75) !important;
          box-shadow: inset 0 -40px 0 #1aca64, 0 0 25px 10px rgba(26, 202, 100, 0.75) !important;
  color: #000000;
}
input:hover {
  -webkit-box-shadow: inset 0 -5px 0 -1px #1aca64;
          box-shadow: inset 0 -5px 0 -1px #1aca64;
}
button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 25px auto;
  font-size: 18px;
  padding: 0 15px;
  text-transform: uppercase;
}
button:hover,
button:focus {
  -webkit-transform: scale(1.25) translate(0, 7px);
          transform: scale(1.25) translate(0, 7px);
}
button.max {
  -webkit-transform: scale(2.25);
          transform: scale(2.25);
}
.form {
  max-width: 350px;
  margin: 0 auto;
}
/* BLOC CENTRE */
.middleBox {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}
/* GAMMA */
.gamma,
.gamma .colors {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.gamma .colors {
  position: absolute;
}
/* WAITING */
.waiting img {
  -webkit-animation: rotate 10000ms infinite linear;
          animation: rotate 10000ms infinite linear;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  display: inline-block;
  max-height: 85%;
  width: 65%;
}
.waiting {
  position: fixed;
  top: 0;
  left: 0;
  padding: 25px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: none;
}
.waiting span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* INTRO FAUSSE PREZ */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');
}
.intro {
  width: 100%;
  height: 100%;
  background-color: #000000;
  top: 0;
  left: 0;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
  overflow: hidden;
}
.intro button {
  -webkit-box-shadow: none!important;
          box-shadow: none!important;
  padding: 0;
  height: auto;
  background-color: #b38039;
  font-family: 'Open Sans';
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: #ffffff;
  background-color: #b30839;
  border: solid 2px #ffffff;
  padding: 14px 14px 14px 23px;
  display: inline-block;
  text-transform: uppercase;
}
.intro button:hover,
.intro button:focus {
  -webkit-transform: none;
          transform: none;
}
.intro button:hover .arrow,
.intro button:focus .arrow {
  margin-left: 15px;
}
.intro button:hover .arrow.left,
.intro button:focus .arrow.left {
  margin-left: 10px;
  margin-right: 5px;
}
.intro nav {
  position: fixed;
  top: 80%;
  left: 0;
  z-index: 15;
  width: 100%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
}
.intro nav [data-action="prev"] {
  float: left;
}
.intro nav [data-action="next"] {
  float: right;
}
.intro nav [data-action="prev"],
.intro nav [data-action="next"] {
  margin: 0;
  pointer-events: auto;
  opacity: 0.35;
}
.intro nav [data-action="prev"]:hover,
.intro nav [data-action="next"]:hover {
  opacity: 1;
}
.intro h1,
.intro .decompte {
  font-family: 'Open Sans';
  color: red;
  margin: 0;
}
.intro .decompte {
  font-size: 200px;
}
.arrow {
  display: inline-block;
  padding: 5px 10px;
  margin-left: 10px;
  background-image: url(../img/sig_arrow.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  -webkit-transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
}
.arrow.left {
  -webkit-transform: scale(-1);
          transform: scale(-1);
  margin-left: 0;
  margin-right: 10px;
}
.logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  z-index: 10;
}
.first {
  background-image: url(https://sigplc-france.fr/wp-content/uploads/2022/05/Biosource-scaled-1-2048x1364.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: transparent;
}
.first button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
          transform: translate(-50%, -50%) !important;
  text-align: center !important;
  margin: 0;
}
.prez,
.first {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: inline-block;
  vertical-align: top;
}
.prez img,
.first img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}
.prez.end.active {
  -webkit-animation: glitch 1500ms 350ms linear forwards,
					glitchB 1500ms 4000ms linear forwards infinite,
					glitchC 750ms 5000ms linear forwards infinite,
					glitchD 500ms 6000ms linear forwards infinite,
					glitchE 300ms 8500ms linear forwards infinite,
					glitchF 1500ms 7000ms linear forwards infinite,
					glitchG 150ms 9000ms linear forwards infinite,
					glitchH 100ms 12000ms linear forwards;
          animation: glitch 1500ms 350ms linear forwards,
					glitchB 1500ms 4000ms linear forwards infinite,
					glitchC 750ms 5000ms linear forwards infinite,
					glitchD 500ms 6000ms linear forwards infinite,
					glitchE 300ms 8500ms linear forwards infinite,
					glitchF 1500ms 7000ms linear forwards infinite,
					glitchG 150ms 9000ms linear forwards infinite,
					glitchH 100ms 12000ms linear forwards;
}
@-webkit-keyframes glitch {
  0%,
  2%,
  7%,
  5.5% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  1% {
    -webkit-transform: translate(0, -15px);
            transform: translate(0, -15px);
  }
  5% {
    opacity: 0.15;
  }
  6% {
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  }
}
@keyframes glitch {
  0%,
  2%,
  7%,
  5.5% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  1% {
    -webkit-transform: translate(0, -15px);
            transform: translate(0, -15px);
  }
  5% {
    opacity: 0.15;
  }
  6% {
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  }
}
@-webkit-keyframes glitchD {
  0%,
  2%,
  7%,
  5.5% {
    -webkit-transform: none;
            transform: none;
  }
  1% {
    -webkit-transform: translate(0, -15px);
            transform: translate(0, -15px);
  }
  6% {
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  }
}
@keyframes glitchD {
  0%,
  2%,
  7%,
  5.5% {
    -webkit-transform: none;
            transform: none;
  }
  1% {
    -webkit-transform: translate(0, -15px);
            transform: translate(0, -15px);
  }
  6% {
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  }
}
@-webkit-keyframes glitchB {
  0%,
  10% {
    -webkit-transform: none;
            transform: none;
    -webkit-filter: none;
            filter: none;
  }
  3% {
    -webkit-transform: skew(-200deg);
            transform: skew(-200deg);
    -webkit-filter: blur(15px);
            filter: blur(15px);
  }
}
@keyframes glitchB {
  0%,
  10% {
    -webkit-transform: none;
            transform: none;
    -webkit-filter: none;
            filter: none;
  }
  3% {
    -webkit-transform: skew(-200deg);
            transform: skew(-200deg);
    -webkit-filter: blur(15px);
            filter: blur(15px);
  }
}
@-webkit-keyframes glitchC {
  5% {
    -webkit-filter: hue-rotate(90deg) saturate(100%);
            filter: hue-rotate(90deg) saturate(100%);
  }
  6% {
    -webkit-filter: hue-rotate(180deg) saturate(100%);
            filter: hue-rotate(180deg) saturate(100%);
  }
  7% {
    -webkit-filter: hue-rotate(270deg) saturate(100%);
            filter: hue-rotate(270deg) saturate(100%);
  }
  9% {
    opacity: 0.15;
  }
}
@keyframes glitchC {
  5% {
    -webkit-filter: hue-rotate(90deg) saturate(100%);
            filter: hue-rotate(90deg) saturate(100%);
  }
  6% {
    -webkit-filter: hue-rotate(180deg) saturate(100%);
            filter: hue-rotate(180deg) saturate(100%);
  }
  7% {
    -webkit-filter: hue-rotate(270deg) saturate(100%);
            filter: hue-rotate(270deg) saturate(100%);
  }
  9% {
    opacity: 0.15;
  }
}
@-webkit-keyframes glitchE {
  0%,
  15% {
    -webkit-filter: hue-rotate(0);
            filter: hue-rotate(0);
    -webkit-transform: scale(0.9) skew(0);
            transform: scale(0.9) skew(0);
  }
  5% {
    -webkit-transform: skew(-200deg) scale(1.5);
            transform: skew(-200deg) scale(1.5);
    -webkit-filter: blur(50px) hue-rotate(360deg) saturate(100%);
            filter: blur(50px) hue-rotate(360deg) saturate(100%);
  }
  20% {
    -webkit-transform: skew(200deg) scale(1.75);
            transform: skew(200deg) scale(1.75);
    -webkit-filter: blur(100px) hue-rotate(180deg) saturate(100%);
            filter: blur(100px) hue-rotate(180deg) saturate(100%);
  }
}
@keyframes glitchE {
  0%,
  15% {
    -webkit-filter: hue-rotate(0);
            filter: hue-rotate(0);
    -webkit-transform: scale(0.9) skew(0);
            transform: scale(0.9) skew(0);
  }
  5% {
    -webkit-transform: skew(-200deg) scale(1.5);
            transform: skew(-200deg) scale(1.5);
    -webkit-filter: blur(50px) hue-rotate(360deg) saturate(100%);
            filter: blur(50px) hue-rotate(360deg) saturate(100%);
  }
  20% {
    -webkit-transform: skew(200deg) scale(1.75);
            transform: skew(200deg) scale(1.75);
    -webkit-filter: blur(100px) hue-rotate(180deg) saturate(100%);
            filter: blur(100px) hue-rotate(180deg) saturate(100%);
  }
}
@-webkit-keyframes glitchF {
  0% {
    -webkit-filter: blur(100px);
            filter: blur(100px);
  }
  50% {
    -webkit-filter: blur(15px);
            filter: blur(15px);
  }
}
@keyframes glitchF {
  0% {
    -webkit-filter: blur(100px);
            filter: blur(100px);
  }
  50% {
    -webkit-filter: blur(15px);
            filter: blur(15px);
  }
}
@-webkit-keyframes glitchG {
  0%,
  10% {
    opacity: 1;
  }
  5% {
    opacity: 0.15;
  }
}
@keyframes glitchG {
  0%,
  10% {
    opacity: 1;
  }
  5% {
    opacity: 0.15;
  }
}
@-webkit-keyframes glitchH {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  90% {
    opacity: 1;
    -webkit-filter: blur(1px);
            filter: blur(1px);
  }
  100% {
    -webkit-transform: scale(10);
            transform: scale(10);
    opacity: 0;
    -webkit-filter: blur(100px);
            filter: blur(100px);
  }
}
@keyframes glitchH {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  90% {
    opacity: 1;
    -webkit-filter: blur(1px);
            filter: blur(1px);
  }
  100% {
    -webkit-transform: scale(10);
            transform: scale(10);
    opacity: 0;
    -webkit-filter: blur(100px);
            filter: blur(100px);
  }
}
/* VIDEO */
.videos {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 15;
  pointer-events: none;
  background-color: #000000;
  display: none;
}
.videos video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 100%;
  display: none;
}
/* EN CAS DE RELOAD */
.reprendre {
  z-index: 25;
  background-color: #000000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: fixed;
}
.reprendre:after {
  content: attr(title);
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  font-size: 18px;
}
/* MENU */
.menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
}
.menu .opener {
  height: 50px;
  width: 50px;
  display: block;
  cursor: pointer;
}
.menu .opener::before,
.menu .opener::after {
  content: "";
  display: block;
  width: 75%;
  height: 2px;
  border-radius: 25px;
  background-color: rgba(26, 202, 100, 0.25);
  -webkit-transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.menu .opener::before {
  top: 68%;
}
.menu .opener::after {
  top: 34%;
}
.menu ul {
  list-style: none;
  text-align: right;
  position: absolute;
  top: 50px;
  right: 10px;
  width: 300px;
  pointer-events: none;
  -webkit-transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  opacity: 0;
}
.menu a {
  display: inline-block;
  padding: 10px;
  margin-top: 2px;
  background-color: #000000;
  color: #1aca64;
  text-decoration: none;
  font-style: normal;
  border: 1px solid #1aca64;
  -webkit-transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
  transition: all 500ms cubic-bezier(0.065, 0.58, 0, 0.995);
}
.menu a:hover {
  background-color: #1aca64;
  color: #000000;
  margin-right: 10px;
}
.menu:hover ul {
  pointer-events: auto;
  opacity: 1;
}
.menu:hover .opener::before,
.menu:hover .opener::after {
  background-color: #1aca64;
}
/* INTERRUPTIONS */
#interruptions {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: none;
}
#interruptions h1 {
  color: #fff;
  text-transform: none;
}
#interruptions .middleBox {
  width: 95%;
}
#interruptions .decompte,
#interruptions .green {
  font-size: 100px;
  color: #1aca64;
}