@font-face {
  font-family: "Hiuma";
  src: url("Berlin.woff2") format("woff2"), url("Berlin.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fira-sans-extra-condensed-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-extra-condensed-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Pathway Gothic One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pathway-gothic-one-latin-400.woff2") format("woff2");
}
body {
  margin: 0;
  font-family: "Pathway Gothic One", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background: url("../images/ui_big.svg") fixed center 30% no-repeat;
  background-size: 60%;
  font-size: 20px;
  overflow-x: hidden;
  width: 100%;
}

a {
  text-decoration: none;
  color: #444;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid white;
  box-shadow: 0 0 1em #aaa;
  box-sizing: border-box;
  position: fixed;
  z-index: 15000;
  height: 75px;
  width: 100%;
  box-sizing: border-box;
  background: radial-gradient(circle, rgb(14, 35, 89) 0%, rgb(1, 5, 14) 100%);
}
header #naf-search-container {
  position: relative;
  width: 300px;
  margin: 0 20px;
  z-index: 1000;
}
header #naf-search-container #naf-search-form {
  position: relative;
  width: 100%;
}
header #naf-search-container #naf-search-form .search-input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 8px 15px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
header #naf-search-container #naf-search-form .search-input-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgb(102, 179, 46);
  box-shadow: 0 0 10px rgba(102, 179, 46, 0.3);
}
header #naf-search-container #naf-search-form .search-input-wrapper #naf-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 16px;
  font-family: "Hiuma";
}
header #naf-search-container #naf-search-form .search-input-wrapper #naf-search-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7);
}
header #naf-search-container #naf-search-form .search-input-wrapper #naf-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
header #naf-search-container #naf-search-form .search-input-wrapper #naf-search-input:focus {
  background: transparent;
}
header #naf-search-container #naf-search-form .search-input-wrapper #naf-search-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
header #naf-search-container #naf-search-form .search-input-wrapper #naf-search-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: rgb(102, 179, 46);
}
header #naf-search-container #naf-search-form .search-input-wrapper #naf-search-button svg {
  width: 18px;
  height: 18px;
}
header #naf-search-container #naf-search-form .suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 5px;
}
header #naf-search-container #naf-search-form .suggestions-dropdown .suggestion-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease;
}
header #naf-search-container #naf-search-form .suggestions-dropdown .suggestion-item:last-child {
  border-bottom: none;
}
header #naf-search-container #naf-search-form .suggestions-dropdown .suggestion-item:hover, header #naf-search-container #naf-search-form .suggestions-dropdown .suggestion-item.highlighted {
  background-color: rgba(102, 179, 46, 0.1);
}
header #naf-search-container #naf-search-form .suggestions-dropdown .suggestion-item .suggestion-code {
  font-weight: bold;
  color: rgb(0, 89, 117);
  font-size: 16px;
}
header #naf-search-container #naf-search-form .suggestions-dropdown .suggestion-item .suggestion-description {
  color: #444;
  font-size: 14px;
  margin-top: 2px;
  line-height: 1.3;
}
header #naf-search-container #naf-search-form .suggestions-dropdown .suggestion-item .suggestion-count {
  color: #999;
  font-size: 12px;
  margin-top: 2px;
}
header #naf-search-container #naf-search-form .suggestions-dropdown .no-results {
  padding: 15px;
  text-align: center;
  color: #444;
  font-style: italic;
}
header > a {
  width: 130px;
  position: relative;
  height: 60px;
  margin: 0 20px;
}
header > a > img {
  position: absolute;
  bottom: 5px;
  transition: all 0.25s ease-in-out;
  height: 50px;
}
header > a:hover > img#u {
  left: 77%;
  transform: rotate(90deg);
}
header > a:hover > img#a {
  left: 30%;
  transform: rotate(90deg);
}
header nav {
  width: 70%;
  display: flex;
  justify-content: space-around;
  margin-left: auto;
}
header nav#menuMain {
  font-size: 20px;
}
header nav#menuMain a {
  cursor: pointer;
  position: relative;
  padding: 0.25% 30px;
  font-size: 1rem;
  font-weight: 100;
  transition: all 1s ease;
  display: flex;
  align-items: center;
  color: white;
}
header nav#menuMain a > img {
  width: 25px;
  margin: 0 10px;
  opacity: 0;
  transition: all 0.5s ease;
  filter: blur(10px);
}
header nav#menuMain a:hover {
  color: rgb(102, 179, 46);
}
header nav#menuMain a:hover > img {
  opacity: 1;
  filter: blur(0);
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #005fa3;
  animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  z-index: 1001;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #0077cc; /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #008ff5;
  animation: spin 2.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

/*Animation menu */
.triangle-b {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 20px solid rgb(0, 89, 117);
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.hamburger {
  padding: 15px;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  background-color: transparent;
  display: none;
}
.hamburger__container {
  width: 36px;
  height: 24px;
  position: relative;
}
.hamburger:hover .hamburger__inner {
  transform: translate(-51px, 50%);
  opacity: 0;
}
.hamburger:hover .hamburger__inner::before, .hamburger:hover .hamburger__inner::after {
  transform: translate(102px, 0);
  opacity: 0;
}
.hamburger.is-active .hamburger__inner {
  display: none;
}
.hamburger__inner {
  width: 100%;
  height: 2px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.4s;
  top: 50%;
  transform: translate(5px, -50%);
  opacity: 1;
}
.hamburger__inner::before, .hamburger__inner::after {
  width: 100%;
  height: 2px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.4s;
  content: "";
  opacity: 1;
  transform: translate(-5px, 0);
}
.hamburger__inner::before {
  top: -13px;
}
.hamburger__inner::after {
  top: 13px;
}
.hamburger:hover .hamburger__hidden {
  opacity: 1;
  transform: translate(0, -50%);
}
.hamburger:hover .hamburger__hidden::before, .hamburger:hover .hamburger__hidden::after {
  opacity: 1;
  transform: translate(0, 0);
}
.hamburger.is-active .hamburger__hidden {
  opacity: 1;
  transform: rotate(45deg);
}
.hamburger.is-active .hamburger__hidden::before {
  transform: translate(0, 13px) rotate(90deg);
  transform-origin: center;
}
.hamburger.is-active .hamburger__hidden::after {
  transform-origin: center;
  transform: translate(0, -13px) rotate(0);
}
.hamburger__hidden {
  opacity: 0;
  width: 100%;
  height: 2px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.4s;
  background-color: rgb(0, 89, 117);
  top: 50%;
  transform: translate(51px, -50%);
}
.hamburger__hidden::before, .hamburger__hidden::after {
  width: 100%;
  height: 2px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.4s;
  background-color: rgb(0, 89, 117);
  content: "";
  transform: translate(102px, 0);
}
.hamburger__hidden::before {
  top: -13px;
}
.hamburger__hidden::after {
  top: 13px;
}

.cross {
  padding: 15px;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  background-color: transparent;
  position: fixed;
  left: calc(100% - 80px);
  top: 20px;
  width: 42px;
  display: none;
}
.cross .line {
  background: white;
  box-sizing: border-box;
  height: 2px;
  width: 100%;
}
.cross .line:first-of-type {
  transition: all 0.3s;
  transform: rotate(45deg);
  margin-top: 2px;
}
.cross .line:last-of-type {
  transition: all 0.7s;
  transform: rotate(-45deg);
  margin-top: -2px;
}
.cross:hover .line:first-of-type {
  transition: all 0.7s;
  transform: rotate(-45deg);
  margin-top: 2px;
  background: rgb(0, 89, 117);
}
.cross:hover .line:last-of-type {
  transition: all 0.3s;
  transform: rotate(45deg);
  margin-top: -2px;
  background: rgb(0, 89, 117);
}

#baseline {
  margin-top: -2px;
  padding-left: 20px;
  color: #1b1b1b;
  font-size: 22px;
  position: fixed;
  z-index: 10000;
  top: 77px;
  background: white;
  width: 100%;
}
#baseline strong {
  font-weight: 100;
  color: rgb(0, 89, 117);
}

@keyframes right {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes left {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes enter {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes enterY {
  from {
    transform: translateY(12px);
  }
  to {
    transform: translateY(0);
  }
}
div#mireHome {
  width: 400px;
  height: 400px;
  position: relative;
  opacity: 0;
  animation: enter 0.7s linear 0.7s forwards;
}
div#mireHome.mire {
  filter: drop-shadow(3px 3px 3px #ccc);
}
div#mireHome.mire > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}
div#mireHome.mire > img:first-of-type {
  width: 51%;
  animation: right 60s linear infinite;
}
div#mireHome.mire > img:nth-of-type(2) {
  width: 53.6%;
  animation: left 120s linear infinite;
}
div#mireHome.mire > img:nth-of-type(3) {
  width: 62%;
  animation: left 90s linear infinite;
}
div#mireHome.mire > img:nth-of-type(4) {
  width: 65.6%;
  animation: right 20s linear infinite;
}
div#mireHome.mire > img:nth-of-type(5) {
  width: 69.2%;
  animation: left 10s linear infinite;
}
div#mireHome.mire > img:nth-of-type(6) {
  width: 74%;
  animation: left 110s linear infinite;
}
div#mireHome.mire > img:nth-of-type(7) {
  width: 79.2%;
  animation: right 90s linear infinite;
}
div#mireHome.mire > img:nth-of-type(8) {
  width: 84%;
  animation: left 150s linear infinite;
}
div#mireHome.mire > img:nth-of-type(9) {
  width: 100%;
  left: 0;
  top: 0;
  transform: none;
}
div#mireHome.mire > h1 {
  position: absolute;
  width: 100%;
  text-align: center;
  margin: 0;
  z-index: 10;
  font-size: 3rem;
  margin-top: 37%;
}

main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1366px;
  width: 100%;
  margin: 120px auto 30px auto;
  position: relative;
}
main strong {
  font-weight: 100;
  color: rgb(0, 89, 117);
}
main#accueil figure#home1 {
  width: 60%;
  position: relative;
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
main#accueil figure#home1 img {
  width: 100%;
  height: auto;
  box-shadow: 0 0 1em #aaa;
  border-radius: 3em 0 3em 0;
  aspect-ratio: auto 800/446;
}
main#accueil figure#home1 figcaption {
  position: absolute;
  bottom: 4%;
  left: 2%;
  color: white;
  width: 30%;
  font-size: 110%;
}
main#accueil figure#home1 figcaption span {
  color: rgb(102, 179, 46);
}
main#accueil h1 {
  position: absolute;
  width: 80%;
  margin: 150px 0 0 10%;
  text-align: center;
  color: rgb(0, 89, 117);
  font-family: "Bebas Neue", cursive;
  font-size: 40px;
}
main#vision {
  margin-bottom: 120px;
}
main#vision h1 {
  position: relative;
  font-weight: 100;
  color: rgb(0, 89, 117);
  font-size: 2.4rem;
  line-height: 1.1;
  width: 100%;
  text-align: center;
  margin: 0 0 1rem 0;
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
main#vision > img {
  width: 40%;
  height: auto;
  position: relative;
  box-shadow: 0 0 1em #aaa;
  border-radius: 3em 0 3em 0;
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
main#vision article {
  width: 40%;
}
main#vision article p {
  text-align: left;
}
main#vision article p:first-of-type {
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
main#vision article p:nth-of-type(2) {
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
main#vision article p:nth-of-type(3) {
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
main#vision section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  margin-top: 120px;
}
main#vision section > img {
  position: absolute;
  width: 70%;
  -o-object-fit: contain;
     object-fit: contain;
  top: -50%;
  opacity: 0;
  animation: enter 0.5s linear 2.75s forwards;
}
main#vision section div.mire {
  width: 300px;
  height: 300px;
  position: relative;
  filter: drop-shadow(3px 3px 3px #ccc);
}
main#vision section div.mire:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
  top: 50px;
}
main#vision section div.mire:first-of-type h2 {
  font-weight: 100;
  color: rgb(0, 89, 117);
  width: 150px;
  text-align: center;
  margin: 120px auto 0 auto;
  font-size: 25px;
}
main#vision section div.mire:first-of-type > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}
main#vision section div.mire:first-of-type > img:first-of-type {
  width: 51%;
  animation: right 60s linear infinite;
}
main#vision section div.mire:first-of-type > img:nth-of-type(2) {
  width: 53.6%;
  animation: left 120s linear infinite;
}
main#vision section div.mire:first-of-type > img:nth-of-type(3) {
  width: 62%;
  animation: left 90s linear infinite;
}
main#vision section div.mire:first-of-type > img:nth-of-type(4) {
  width: 65.6%;
  animation: right 20s linear infinite;
}
main#vision section div.mire:first-of-type > img:nth-of-type(5) {
  width: 69.2%;
  animation: left 10s linear infinite;
}
main#vision section div.mire:first-of-type > img:nth-of-type(6) {
  width: 74%;
  animation: left 110s linear infinite;
}
main#vision section div.mire:first-of-type > img:nth-of-type(7) {
  width: 79.2%;
  animation: right 90s linear infinite;
}
main#vision section div.mire:first-of-type > img:nth-of-type(8) {
  width: 84%;
  animation: left 150s linear infinite;
}
main#vision section div.mire:first-of-type > img:nth-of-type(9) {
  width: 100%;
  left: 0;
  top: 0;
}
main#vision section div.mire:nth-of-type(2) {
  opacity: 0;
  animation: enter 0.5s linear 2.5s forwards;
  top: 100px;
}
main#vision section div.mire:nth-of-type(2) h2 {
  font-weight: 100;
  color: rgb(0, 89, 117);
  width: 150px;
  text-align: center;
  margin: 120px auto 0 auto;
  font-size: 25px;
}
main#vision section div.mire:nth-of-type(2) > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}
main#vision section div.mire:nth-of-type(2) > img:first-of-type {
  width: 51%;
  animation: left 70s linear infinite;
}
main#vision section div.mire:nth-of-type(2) > img:nth-of-type(2) {
  width: 53.6%;
  animation: left 120s linear infinite;
}
main#vision section div.mire:nth-of-type(2) > img:nth-of-type(3) {
  width: 62%;
  animation: right 130s linear infinite;
}
main#vision section div.mire:nth-of-type(2) > img:nth-of-type(4) {
  width: 65.6%;
  animation: right 20s linear infinite;
}
main#vision section div.mire:nth-of-type(2) > img:nth-of-type(5) {
  width: 69.2%;
  animation: left 80s linear infinite;
}
main#vision section div.mire:nth-of-type(2) > img:nth-of-type(6) {
  width: 74%;
  animation: right 110s linear infinite;
}
main#vision section div.mire:nth-of-type(2) > img:nth-of-type(7) {
  width: 79.2%;
  animation: left 90s linear infinite;
}
main#vision section div.mire:nth-of-type(2) > img:nth-of-type(8) {
  width: 84%;
  animation: left 150s linear infinite;
}
main#vision section div.mire:nth-of-type(3) {
  opacity: 0;
  animation: enter 0.5s linear 2.75s forwards;
  top: 20px;
}
main#vision section div.mire:nth-of-type(3) h2 {
  font-weight: 100;
  color: rgb(0, 89, 117);
  width: 150px;
  text-align: center;
  margin: 120px auto 0 auto;
  font-size: 25px;
}
main#vision section div.mire:nth-of-type(3) > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}
main#vision section div.mire:nth-of-type(3) > img:first-of-type {
  width: 51%;
  animation: right 55s linear infinite;
}
main#vision section div.mire:nth-of-type(3) > img:nth-of-type(2) {
  width: 53.6%;
  animation: right 90s linear infinite;
}
main#vision section div.mire:nth-of-type(3) > img:nth-of-type(3) {
  width: 62%;
  animation: left 150s linear infinite;
}
main#vision section div.mire:nth-of-type(3) > img:nth-of-type(4) {
  width: 65.6%;
  animation: left 40s linear infinite;
}
main#vision section div.mire:nth-of-type(3) > img:nth-of-type(5) {
  width: 69.2%;
  animation: right 70s linear infinite;
}
main#vision section div.mire:nth-of-type(3) > img:nth-of-type(6) {
  width: 74%;
  animation: left 130s linear infinite;
}
main#vision section div.mire:nth-of-type(3) > img:nth-of-type(7) {
  width: 79.2%;
  animation: right 75s linear infinite;
}
main#vision section div.mire:nth-of-type(3) > img:nth-of-type(8) {
  width: 84%;
  animation: right 120s linear infinite;
}
main#team {
  align-items: stretch;
}
main#team h1 {
  position: relative;
  font-weight: 100;
  color: rgb(0, 89, 117);
  opacity: 0;
  animation: enter 0.5s linear 0.5s forwards;
  margin: 0;
}
main#team > img {
  width: 40%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  box-shadow: 0 0 1em #aaa;
  border-radius: 3em 0 3em 0;
  opacity: 0;
  animation: enter 0.5s linear 1s forwards;
}
main#team > article {
  width: 40%;
}
main#team > article h2 {
  opacity: 0;
  animation: enter 0.5s linear 1.1s forwards;
  margin: 6px 0;
  font-weight: 100;
  font-size: 22px;
  color: rgb(0, 89, 117);
}
main#team > article p {
  text-align: left;
}
main#team > article p:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 1.2s forwards;
}
main#team > article p:nth-of-type(2) {
  opacity: 0;
  animation: enter 0.5s linear 1.3s forwards;
}
main#team > article p:nth-of-type(3) {
  opacity: 0;
  animation: enter 0.5s linear 1.4s forwards;
}
main#team > article p:nth-of-type(4) {
  opacity: 0;
  animation: enter 0.5s linear 1.5s forwards;
}
main#team > article p:nth-of-type(5) {
  opacity: 0;
  animation: enter 0.5s linear 1.6s forwards;
}
main#team > article p:nth-of-type(6) {
  opacity: 0;
  animation: enter 0.5s linear 1.7s forwards;
}
main#team > article p:nth-of-type(7) {
  opacity: 0;
  animation: enter 0.5s linear 1.8s forwards;
}
main#team section {
  width: 100%;
  max-width: 1366px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 50px 0;
  box-shadow: 0 0 1em #ddd;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  animation: enter 0.7s linear 2s forwards;
}
main#team section#orga {
  display: flex;
  flex-direction: column;
}
main#team section h2 {
  color: rgb(0, 89, 117);
  width: 100%;
  font-weight: 100;
  text-align: center;
}
main#team section figure:first-of-type {
  margin: 50px 0 20px -10%;
  width: 17%;
  position: relative;
}
main#team section figure:first-of-type img {
  width: 100%;
}
main#team section figure:first-of-type figcaption {
  position: absolute;
  top: 0;
}
main#team section figure:first-of-type figcaption p {
  font-size: 1rem;
}
main#team section figure:first-of-type figcaption p:first-of-type {
  margin: -15% 0 0 -35%;
}
main#team section figure:first-of-type figcaption p:nth-of-type(2) {
  margin: 5% 0 0 70%;
}
main#team section figure:first-of-type figcaption p:nth-of-type(3) {
  margin: -60% 0 0 120%;
}
main#team section figure:nth-of-type(2) {
  width: 30%;
  position: relative;
  background: url("../images/logo_black.png") no-repeat center 30%;
  background-size: 60%;
}
main#team section figure:nth-of-type(2) img {
  width: 100%;
  filter: drop-shadow(0 0 3px rgb(14, 174, 229));
}
main#team section figure:nth-of-type(2) figcaption {
  position: absolute;
  top: 0;
  width: 100%;
}
main#team section figure:nth-of-type(2) figcaption p {
  display: flex;
  align-items: center;
  font-size: 25px;
}
main#team section figure:nth-of-type(2) figcaption p img {
  width: 20px;
  margin-right: 5px;
}
main#team section figure:nth-of-type(2) figcaption p:first-of-type {
  margin-top: -10%;
  margin-left: 40%;
}
main#team section figure:nth-of-type(2) figcaption p:nth-of-type(2) {
  position: absolute;
  margin-top: 35%;
  margin-left: 90%;
}
main#team section figure:nth-of-type(2) figcaption p:nth-of-type(3) {
  position: absolute;
  margin-top: 35%;
  margin-left: -10%;
}
main#team section figure:nth-of-type(3) {
  position: absolute;
  bottom: 5%;
  width: 20%;
  left: 9%;
}
main#team section figure:nth-of-type(3) > img {
  transform: rotate(-45deg);
  width: 100%;
}
main#team section figure:nth-of-type(3) figcaption {
  position: absolute;
  top: 0;
}
main#team section figure:nth-of-type(3) figcaption p {
  position: relative;
  text-align: center;
  max-width: 150px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  font-size: 1.5%;
}
main#team section figure:nth-of-type(3) figcaption p:nth-of-type(1) {
  margin-top: -45%;
  margin-left: -10%;
}
main#team section figure:nth-of-type(3) figcaption p:nth-of-type(2) {
  left: -50%;
  max-width: 200px;
  margin-top: 40%;
}
main#team section figure:nth-of-type(3) figcaption p:nth-of-type(3) {
  left: -60%;
  margin-top: 0%;
  max-width: 95px;
}
main#team section figure:nth-of-type(3) figcaption p img {
  width: 16px;
}
main#team section figure:nth-of-type(3) figcaption p span {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid rgb(0, 89, 117);
  color: rgb(0, 89, 117);
}
main#team section figure:nth-of-type(4) {
  position: absolute;
  bottom: 5%;
  width: 20%;
  right: 9%;
}
main#team section figure:nth-of-type(4) > img {
  transform: rotate(45deg) scaleX(-1);
  image-orientation: flip;
  width: 100%;
}
main#team section figure:nth-of-type(4) figcaption {
  position: absolute;
  top: 0;
  width: 100%;
}
main#team section figure:nth-of-type(4) figcaption p {
  position: relative;
  text-align: center;
  max-width: 150px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  font-size: 1.5%;
}
main#team section figure:nth-of-type(4) figcaption p:nth-of-type(1) {
  margin-top: -30%;
  left: 45%;
}
main#team section figure:nth-of-type(4) figcaption p:nth-of-type(2) {
  left: 55%;
  margin-top: 30%;
}
main#team section figure:nth-of-type(4) figcaption p:nth-of-type(3) {
  left: 100%;
  margin-top: -5%;
}
main#team section figure:nth-of-type(4) figcaption p img {
  width: 16px;
}
main#team section figure:nth-of-type(4) figcaption p span {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid rgb(0, 89, 117);
  color: rgb(0, 89, 117);
}
main#solutions h1 {
  position: relative;
  font-weight: 100;
  color: rgb(0, 89, 117);
  opacity: 0;
  animation: enter 0.5s linear forwards;
  margin: 0;
}
main#solutions > img {
  width: 40%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  box-shadow: 0 0 1em #aaa;
  border-radius: 3em 0 3em 0;
  opacity: 0;
  animation: enter 0.5s linear 0.5s forwards;
}
main#solutions > article, main#solutions > .content {
  width: 40%;
}
main#solutions > article h2, main#solutions > .content h2 {
  opacity: 0;
  animation: enter 0.5s linear 1.1s forwards;
  margin: 6px 0;
  font-weight: 100;
  font-size: 22px;
  color: rgb(0, 89, 117);
}
main#solutions > article p, main#solutions > .content p {
  text-align: left;
}
main#solutions > article p:first-of-type, main#solutions > .content p:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 1s forwards;
}
main#solutions > article p:nth-of-type(2), main#solutions > .content p:nth-of-type(2) {
  opacity: 0;
  animation: enter 0.5s linear 1.1s forwards;
}
main#solutions > article p:nth-of-type(3), main#solutions > .content p:nth-of-type(3) {
  opacity: 0;
  animation: enter 0.5s linear 1.2s forwards;
}
main#solutions > article p:nth-of-type(4), main#solutions > .content p:nth-of-type(4) {
  opacity: 0;
  animation: enter 0.5s linear 1.3s forwards;
}
main#solutions > article p:nth-of-type(5), main#solutions > .content p:nth-of-type(5) {
  opacity: 0;
  animation: enter 0.5s linear 1.4s forwards;
}
main#solutions > article p:nth-of-type(6), main#solutions > .content p:nth-of-type(6) {
  opacity: 0;
  animation: enter 0.5s linear 1.5s forwards;
}
main#solutions > article p:nth-of-type(7), main#solutions > .content p:nth-of-type(7) {
  opacity: 0;
  animation: enter 0.5s linear 1.7s forwards;
}
main#solutions > article#gate, main#solutions > .content#gate {
  opacity: 0;
  animation: enter 0.5s linear 2.5s forwards;
}
main#solutions > article#gate h2, main#solutions > .content#gate h2 {
  display: flex;
  align-items: center;
  font-size: 30px;
}
main#solutions > article#gate h2 > img, main#solutions > .content#gate h2 > img {
  width: 30px;
  margin-right: 10px;
}
main#solutions > article#gate h3, main#solutions > .content#gate h3 {
  font-weight: 100;
  margin: 0;
  font-size: 18px;
}
main#solutions section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-width: 1024px;
  margin: 70px 0;
}
main#solutions section:first-of-type {
  box-shadow: 0 0 1em #cccccc;
  padding: 1%;
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
}
main#solutions section div.mire {
  width: 300px;
  height: 300px;
  position: relative;
  filter: drop-shadow(3px 3px 3px #ccc);
}
main#solutions section div.mire:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 2s forwards;
}
main#solutions section div.mire:first-of-type h2 {
  font-weight: 100;
  color: rgb(0, 89, 117);
  width: 150px;
  text-align: center;
  font-size: 40px;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -75px;
}
main#solutions section div.mire:first-of-type > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}
main#solutions section div.mire:first-of-type > img:first-of-type {
  width: 51%;
  animation: right 60s linear infinite;
}
main#solutions section div.mire:first-of-type > img:nth-of-type(2) {
  width: 53.6%;
  animation: left 120s linear infinite;
}
main#solutions section div.mire:first-of-type > img:nth-of-type(3) {
  width: 62%;
  animation: left 90s linear infinite;
}
main#solutions section div.mire:first-of-type > img:nth-of-type(4) {
  width: 65.6%;
  animation: right 20s linear infinite;
}
main#solutions section div.mire:first-of-type > img:nth-of-type(5) {
  width: 69.2%;
  animation: left 10s linear infinite;
}
main#solutions section div.mire:first-of-type > img:nth-of-type(6) {
  width: 74%;
  animation: left 110s linear infinite;
}
main#solutions section div.mire:first-of-type > img:nth-of-type(7) {
  width: 79.2%;
  animation: right 90s linear infinite;
}
main#solutions section div.mire:first-of-type > img:nth-of-type(8) {
  width: 84%;
  animation: left 150s linear infinite;
}
main#solutions section div#arkema {
  position: relative;
  width: 50%;
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
}
main#solutions section div#arkema img {
  transition: all 0.5s;
  width: 100%;
  border: 1px solid white;
  box-shadow: 0 0 1em #aaa;
}
main#solutions section div#arkema img:last-of-type {
  display: block;
  position: absolute;
  top: 0;
}
main#solutions section div#arkema img:last-of-type:hover {
  cursor: pointer;
  opacity: 0;
}
main#recrutement h1 {
  position: relative;
  font-weight: 100;
  color: rgb(0, 89, 117);
  opacity: 0;
  animation: enter 0.5s linear 0.5s forwards;
  margin: 0;
}
main#recrutement > img {
  width: 40%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  box-shadow: 0 0 1em #aaa;
  border-radius: 3em 0 3em 0;
  opacity: 0;
  animation: enter 0.5s linear forwards;
}
main#recrutement > article, main#recrutement > .content {
  width: 40%;
}
main#recrutement > article h2, main#recrutement > .content h2 {
  opacity: 0;
  animation: enter 0.5s linear 1.1s forwards;
  margin: 6px 0;
  font-weight: 100;
  font-size: 22px;
  color: rgb(0, 89, 117);
}
main#recrutement > article p, main#recrutement > .content p {
  text-align: left;
}
main#recrutement > article p:first-of-type, main#recrutement > .content p:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 0.6s forwards;
}
main#recrutement > article p:nth-of-type(2), main#recrutement > .content p:nth-of-type(2) {
  opacity: 0;
  animation: enter 0.5s linear 0.7s forwards;
}
main#recrutement > article p:nth-of-type(3), main#recrutement > .content p:nth-of-type(3) {
  opacity: 0;
  animation: enter 0.5s linear 0.8s forwards;
}
main#recrutement > article p:nth-of-type(4), main#recrutement > .content p:nth-of-type(4) {
  opacity: 0;
  animation: enter 0.5s linear 0.9s forwards;
}
main#recrutement > article p:nth-of-type(5), main#recrutement > .content p:nth-of-type(5) {
  opacity: 0;
  animation: enter 0.5s linear 1s forwards;
}
main#recrutement > article p:nth-of-type(6), main#recrutement > .content p:nth-of-type(6) {
  opacity: 0;
  animation: enter 0.5s linear 1.1s forwards;
}
main#recrutement > article p:nth-of-type(7), main#recrutement > .content p:nth-of-type(7) {
  opacity: 0;
  animation: enter 0.5s linear 1.2s forwards;
}
main#recrutement section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-width: 1024px;
  margin: 70px 0;
}
main#recrutement section:first-of-type {
  box-shadow: 0 0 1em #cccccc;
  padding: 1%;
}
main#recrutement section div.mire {
  width: 300px;
  height: 300px;
  position: relative;
  filter: drop-shadow(3px 3px 3px #ccc);
}
main#recrutement section div.mire:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 2s forwards;
}
main#recrutement section div.mire:first-of-type h2 {
  font-weight: 100;
  color: rgb(0, 89, 117);
  width: 150px;
  text-align: center;
  font-size: 40px;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -75px;
}
main#recrutement section div.mire:first-of-type > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}
main#recrutement section div.mire:first-of-type > img:first-of-type {
  width: 51%;
  animation: right 60s linear infinite;
}
main#recrutement section div.mire:first-of-type > img:nth-of-type(2) {
  width: 53.6%;
  animation: left 120s linear infinite;
}
main#recrutement section div.mire:first-of-type > img:nth-of-type(3) {
  width: 62%;
  animation: left 90s linear infinite;
}
main#recrutement section div.mire:first-of-type > img:nth-of-type(4) {
  width: 65.6%;
  animation: right 20s linear infinite;
}
main#recrutement section div.mire:first-of-type > img:nth-of-type(5) {
  width: 69.2%;
  animation: left 10s linear infinite;
}
main#recrutement section div.mire:first-of-type > img:nth-of-type(6) {
  width: 74%;
  animation: left 110s linear infinite;
}
main#recrutement section div.mire:first-of-type > img:nth-of-type(7) {
  width: 79.2%;
  animation: right 90s linear infinite;
}
main#recrutement section div.mire:first-of-type > img:nth-of-type(8) {
  width: 84%;
  animation: left 150s linear infinite;
}
main#recrutement section div#arkema {
  position: relative;
  width: 50%;
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
}
main#recrutement section div#arkema img {
  transition: all 0.5s;
  width: 100%;
  border: 1px solid white;
  box-shadow: 0 0 1em #aaa;
}
main#recrutement section div#arkema img:last-of-type {
  display: block;
  position: absolute;
  top: 0;
}
main#recrutement section div#arkema img:last-of-type:hover {
  cursor: pointer;
  opacity: 0;
}
main section#controle {
  max-width: 1366px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 50px 0;
  box-shadow: 0 0 1em #ddd;
  padding: 30px 0;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
main section#controle hgroup {
  width: 100%;
  font-family: "Pathway Gothic One", sans-serif;
  font-size: 40px;
  margin-bottom: 60px;
}
main section#controle hgroup > * {
  font-weight: 100;
  margin: 0;
  text-align: center;
}
main section#controle hgroup h3 {
  color: rgba(0, 0, 0, 0.3);
}
main section#controle hgroup h2 {
  color: rgb(0, 89, 117);
}
main section#controle hgroup h4 {
  color: rgba(0, 0, 0, 0.5);
}
main section#controle figure {
  min-height: 220px;
  width: 25%;
  max-width: 25%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Pathway Gothic One", sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
main section#controle figure figcaption {
  align-self: flex-end;
  width: 100%;
  text-align: center;
  color: #444;
  font-size: 30px;
}
main section#controle figure img {
  width: 50%;
}
main section#controle figure:first-of-type img {
  max-width: 35%;
}
main section#controle figure:last-of-type img {
  max-width: 35%;
}
main section#infogerance {
  display: block;
  min-height: 500px;
  position: relative;
}
main section#infogerance > article {
  position: absolute;
}
main section#infogerance > article p {
  font-size: 16px;
  color: rgb(0, 89, 117);
}
main section#infogerance > article > * {
  margin: 0;
}
main section#infogerance > article h3 {
  font-weight: 100;
}
main section#infogerance > article .step-name {
  font-weight: 100;
}
main section#infogerance > article:nth-of-type(1) {
  left: 16%;
  top: 20%;
  text-align: right;
  padding-right: 10px;
  border-right: 1px solid rgb(0, 89, 117);
}
main section#infogerance > article:nth-of-type(2) {
  left: 10%;
  top: 53%;
  width: 21%;
  text-align: right;
  padding-right: 10px;
  border-right: 1px solid rgb(0, 89, 117);
}
main section#infogerance > article:nth-of-type(3) {
  left: 65%;
  top: 20%;
  width: 40%;
  text-align: left;
  padding-left: 10px;
  border-left: 1px solid rgb(0, 89, 117);
}
main section#infogerance > article:nth-of-type(4) {
  left: 68%;
  top: 53%;
  width: 40%;
  text-align: left;
  padding-left: 10px;
  border-left: 1px solid rgb(0, 89, 117);
}
main section#infogerance > article:nth-of-type(5) {
  left: 39%;
  top: 82%;
  width: 22%;
  text-align: center;
  padding-left: 10px;
  border-top: 1px solid rgb(0, 89, 117);
}
main section#infogerance h2 {
  width: 100%;
  color: rgb(0, 89, 117);
  text-align: center;
  font-weight: 100;
}
main section#infogerance figure {
  --size:13rem;
  width: var(--size);
  height: var(--size);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: calc(50% - var(--size) / 2);
  margin-top: calc(var(--size) / 2);
  background: #eeeeee;
  border-radius: 50%;
}
main section#infogerance figure img {
  animation: right 120s linear infinite;
  filter: drop-shadow(0 0 3px #888);
  display: inline-block;
  position: absolute;
  width: calc(var(--size) + 3rem);
  transform-box: fill-box;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
}
main section#infogerance figure figcaption {
  background: white;
  width: calc(var(--size) / 2 + 1rem);
  height: calc(var(--size) / 2 + 1rem);
  border-radius: var(--size);
  display: flex;
  justify-content: center;
  align-items: center;
}
main section#infogerance figure figcaption h3 {
  font-size: 1.4rem;
  text-align: center;
}
main#who {
  max-width: 1366px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: 120px auto 50px auto;
}
main#who > .who-content {
  width: 40%;
  opacity: 0;
  animation: enter 0.5s linear 0.5s forwards;
}
main#who > .who-content h1 {
  color: rgb(0, 89, 117);
  font-family: "Bebas Neue", cursive;
  font-weight: 100;
}
main#who > div {
  width: 500px;
  height: 500px;
}
main#who > div hgroup {
  position: absolute;
  z-index: auto;
  width: 100%;
}
main#who > div hgroup > * {
  font-weight: 100 !important;
  text-align: center;
  margin: 0;
  color: #444;
}
main#who > div hgroup .badge {
  width: 150px;
  margin: 0 auto 30px auto;
  filter: drop-shadow(0 0 1em #888);
  margin-top: 95px;
}
main#who > div hgroup .badge span {
  width: 100%;
  display: inline-block;
  background: radial-gradient(circle, rgb(14, 35, 89) 0%, rgb(1, 5, 14) 100%);
  font-size: 25px;
  border: 2px solid rgb(0, 89, 117);
  border-radius: 8px;
  color: white;
  padding: 3px 0;
}
main#who > div hgroup .badge .triangle-b {
  margin-top: 0;
}
main#who > div hgroup h2 {
  font-size: 25px;
}
main#who > div hgroup h3 {
  font-size: 32px;
}
main#who > div hgroup .tagline {
  color: rgb(0, 89, 117);
  font-size: 25px;
}
main#mentions * {
  font-weight: 100 !important;
  padding: 0 2%;
  text-align: justify;
}
main#mentions h1 {
  color: rgb(0, 89, 117);
}
main#mentions h2 {
  color: rgb(0, 89, 117);
}

section#candidat {
  width: 100%;
  background: radial-gradient(circle, rgb(14, 35, 89) 0%, rgb(1, 5, 14) 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 50px;
  padding: 0 3%;
  box-sizing: border-box;
  opacity: 0;
  animation: enter 0.7s linear 1s forwards;
}
section#candidat form#contact {
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
section#candidat h2 {
  text-align: center;
  font-family: "Pathway Gothic One", sans-serif;
  color: white;
  width: 100%;
  font-weight: 100;
  color: white;
  margin: 2.5% 0 0 0;
}
section#candidat > img {
  width: auto;
  height: 3.5%;
  max-height: 80px;
  margin: 2.5%;
}
section#references {
  width: 100%;
  background: radial-gradient(circle, rgb(14, 35, 89) 0%, rgb(1, 5, 14) 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 50px;
  padding: 0 3%;
  box-sizing: border-box;
  opacity: 0;
  animation: enter 0.7s linear 2.1s forwards;
}
section#references h2 {
  text-align: center;
  font-family: "Pathway Gothic One", sans-serif;
  color: white;
  width: 100%;
  font-weight: 100;
  margin: 2.5% 0 0 0;
}
section#references img {
  width: 150px;
  margin: 30px;
  max-height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
}
section#missions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1366px;
  width: 100%;
  margin: 0 auto 30px auto;
  position: relative;
}
section#missions h2 {
  position: relative;
  font-weight: 100;
  color: rgb(0, 89, 117);
  opacity: 0;
  animation: enter 0.5s linear 2s forwards;
}
section#missions > img {
  width: 40%;
  height: auto;
  position: relative;
  box-shadow: 0 0 1em #aaa;
  border-radius: 3em 0 3em 0;
  opacity: 0;
  animation: enter 0.5s linear 3s forwards;
}
section#missions > article {
  width: 40%;
}
section#missions > article p {
  text-align: left;
}
section#missions > article p strong {
  font-weight: 100;
  color: rgb(0, 89, 117);
}
section#missions > article p:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
}
section#missions > article p:nth-of-type(2) {
  opacity: 0;
  animation: enter 0.5s linear 2.5s forwards;
}
section#missions > article p:nth-of-type(3) {
  opacity: 0;
  animation: enter 0.5s linear 2.75s forwards;
}
section#missions > section {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 100px;
  margin-bottom: 100px;
}
section#missions > section article {
  position: relative;
  width: 290px;
  padding-top: 20px;
}
section#missions > section article p {
  text-align: center;
  padding: 0 40px;
}
section#missions > section article p:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
}
section#missions > section article p:nth-of-type(2) {
  opacity: 0;
  animation: enter 0.5s linear 2.5s forwards;
}
section#missions > section article p:nth-of-type(3) {
  opacity: 0;
  animation: enter 0.5s linear 2.75s forwards;
}
section#missions > section article p:nth-of-type(4) {
  opacity: 0;
  animation: enter 0.5s linear 3s forwards;
}
section#missions > section article h3 {
  text-align: center;
  font-weight: 100;
}
section#missions > section article img {
  position: absolute;
  top: 0;
}
section#missions > section article:first-of-type h3 {
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
}
section#missions > section article:first-of-type img {
  transform: rotate(-45deg);
  opacity: 0;
  animation: enter 0.5s linear 2s forwards;
}
section#missions > section article:nth-of-type(2) h3 {
  color: rgb(0, 89, 117);
  opacity: 0;
  animation: enter 0.5s linear 2.5s forwards;
}
section#missions > section article:nth-of-type(2) img {
  transform: rotate(90deg);
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
}
section#missions > section article:nth-of-type(3) h3 {
  opacity: 0;
  animation: enter 0.5s linear 2.75s forwards;
}
section#missions > section article:nth-of-type(3) img {
  transform: rotate(135deg);
  opacity: 0;
  animation: enter 0.5s linear 2.5s forwards;
}
section#missions > section article:nth-of-type(4) h3 {
  color: rgb(0, 89, 117);
  opacity: 0;
  animation: enter 0.5s linear 3s forwards;
}
section#missions > section article:nth-of-type(4) img {
  transform: rotate(270deg);
  opacity: 0;
  animation: enter 0.5s linear 2.75s forwards;
}
section#identity {
  width: 100%;
  background: radial-gradient(circle, #0e2359 0%, #01050e 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-end;
  margin-bottom: 50px;
  padding: 0 3%;
  box-sizing: border-box;
  opacity: 0;
  animation: enter 0.5s linear 1s forwards;
}
section#identity > h2 {
  color: white;
  font-weight: 100;
  text-align: center;
  width: 100%;
  margin-bottom: -10px;
}
section#identity figure {
  margin: 0;
  width: 33.3333333333%;
  color: white;
  text-align: center;
}
section#identity figure:nth-of-type(1) img {
  width: 20%;
  filter: drop-shadow(0 0 5px black);
}
section#identity figure:nth-of-type(2) img {
  width: 30%;
  filter: drop-shadow(0 0 5px black);
}
section#identity figure:nth-of-type(3) img {
  width: 100%;
  filter: drop-shadow(0 0 5px black);
}
section#identity figure figcaption {
  min-height: 160px;
  border-top: 1px solid rgb(0, 89, 117);
  margin-top: -5px;
  padding-top: 5px;
  position: relative;
  z-index: auto;
}
section#identity figure figcaption > * {
  margin: 0;
  font-size: 0.9em;
  font-weight: 100;
}
section#identity figure figcaption h3 {
  margin-bottom: 1em;
}
section#identity figure figcaption img {
  width: 40px;
}
section#what {
  width: 90%;
  margin: 0 auto 40px auto;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 0 1em #ddd;
  font-size: 0.8em;
  background: url("../images/what.jpg") no-repeat;
  background-size: cover;
  opacity: 0;
  animation: enter 0.5s linear 1.5s forwards;
}
section#what h2 {
  width: 100%;
  color: rgb(0, 89, 117);
  text-align: center;
  font-weight: 100;
}
section#what > article {
  width: 20%;
}
section#what > article:first-of-type dl {
  text-align: right;
  border-right: 1px solid rgb(0, 89, 117);
  padding-right: 5px;
}
section#what > article:last-of-type dl {
  border-left: 1px solid rgb(0, 89, 117);
  padding-left: 5px;
}
section#what > article dl {
  margin: 1em 0;
}
section#what > article dl dt {
  color: rgb(0, 89, 117);
  font-size: 1.2em;
}
section#what > article dl dd {
  margin: 0;
}
section#what > img {
  width: 30%;
  max-width: 400px;
  filter: drop-shadow(0 0 1em #aaa);
}
section#techno {
  max-width: 1366px;
  box-shadow: 0 0 1em #ddd;
  padding-bottom: 30px;
  width: 90%;
  margin: 0 auto 50px auto;
  position: relative;
  background: radial-gradient(circle, rgb(11, 26, 65) 0%, rgb(1, 5, 14) 100%);
  color: white;
}
section#techno > article {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}
section#techno > article h2 {
  position: relative;
  font-weight: 100;
  color: white;
  opacity: 0;
  animation: enter 0.5s linear 2s forwards;
  width: 100%;
  margin-top: 2em;
}
section#techno > article img {
  width: 20%;
  max-width: 180px;
  position: relative;
  opacity: 0;
  animation: enter 0.5s linear 3s forwards;
}
section#techno > article p strong {
  font-weight: 100;
  color: rgb(0, 89, 117);
}
section#techno > article p:first-of-type {
  opacity: 0;
  animation: enter 0.5s linear 2.25s forwards;
}
section#techno > article p:nth-of-type(2) {
  opacity: 0;
  animation: enter 0.5s linear 2.5s forwards;
}
section#techno > article p:nth-of-type(3) {
  font-size: 2em;
  opacity: 0;
  animation: enter 0.5s linear 2.75s forwards;
}

form#contact {
  max-width: 1366px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0 auto 50px auto;
  width: 100%;
  opacity: 1;
  animation: enterY 0.45s ease-out 0s both;
}
form#contact input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
  width: 30%;
  align-self: center;
}
form#contact input[type=file]:hover + .input-file-trigger {
  background: darkorange;
  border: 1px solid darkorange;
}
form#contact .file-return {
  margin: 0;
  color: rgb(0, 89, 117);
  width: 50%;
  display: inline-block;
  align-self: center;
  font-style: italic;
  font-size: 0.9em;
}
form#contact .file-return:not(:empty):before {
  content: "Votre fichier : ";
  font-style: normal;
  font-weight: normal;
}
form#contact label {
  width: 20%;
  text-align: right;
  box-sizing: border-box;
  color: white;
  background: rgb(0, 89, 117);
  font-size: 20px;
  margin: 5px 5px 5px 10%;
  padding: 5px 10px;
  border: 1px solid rgb(0, 89, 117);
}
form#contact label:last-of-type {
  align-self: flex-start;
}
form#contact label:first-of-type {
  display: none;
}
form#contact label.input-file-trigger {
  width: 30% !important;
  cursor: pointer;
  text-align: center;
  background: orange;
  border: 1px solid orange;
  transition: all 0.5s;
}
form#contact label.input-file-trigger:hover {
  background: darkorange;
  border: 1px solid white;
}
form#contact label.input-file-trigger:focus {
  background: darkorange;
  border: 1px solid white;
}
form#contact input {
  margin: 5px 0;
}
form#contact input:not([type=file]) {
  width: 40%;
  margin-right: 20%;
  box-sizing: border-box;
  padding: 5px 10px;
  border: 1px solid rgb(0, 89, 117);
  font-size: 20px;
  transition: all 0.5s;
}
form#contact input:not([type=file]):focus {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  font-family: "Pathway Gothic One", sans-serif;
}
form#contact input:not([type=file]):first-of-type {
  display: none;
}
form#contact textarea {
  width: 40%;
  min-height: 300px;
  margin: 5px 20% 5px 0;
  box-sizing: border-box;
  padding: 5px 10px;
  border: 1px solid rgb(0, 89, 117);
  font-size: 20px;
}
form#contact textarea:focus {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  border: 1px solid white;
}
form#contact button {
  background: rgb(0, 89, 117);
  margin-left: 10%;
  padding: 5px 10px;
  color: white;
  font-size: 20px;
  border: none;
  width: 40%;
  margin-left: calc(10% + 5px);
  font-family: "Pathway Gothic One", sans-serif;
  font-weight: 100;
  transition: all 0.5s;
  border: 1px solid #444;
}
form#contact button:hover {
  border: 1px solid white;
  cursor: pointer;
  background: #444;
  transition: all 0.5s;
  border-radius: 2em;
  border-left: 5px solid white;
  border-right: 5px solid white;
}
form#contact h2 {
  width: 100%;
  font-weight: 100;
  text-align: center;
  color: rgb(0, 89, 117);
}
form#contact div {
  display: none;
}

footer {
  background: radial-gradient(circle, rgb(11, 26, 65) 0%, rgb(1, 5, 14) 100%);
  width: 100%;
  box-sizing: border-box;
  padding: 2%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: flex-end;
  border-top: 1px solid white;
  box-shadow: 0 0 1em #aaa;
  position: relative;
  z-index: 9000;
  font-size: 20px;
}
footer address {
  color: white;
  font-style: normal;
  text-align: center;
}
footer address p {
  margin: 6px 0;
}
footer address p a {
  color: white;
}
footer nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
footer nav a {
  color: white;
  display: inline-block;
  width: auto;
  transition: all 0.5s;
  margin: 6px 0;
}
footer nav a::after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: rgb(0, 89, 117);
  transition: 500ms;
}
footer nav a:hover {
  color: rgb(0, 89, 117);
}
footer nav a:hover::after {
  width: 100%;
}
footer iframe {
  border-radius: 5px;
}

@media screen and (max-width: 1366px) {
  main#missions section article {
    width: 20%;
    font-size: 1.3%;
  }
  main#missions section article img {
    width: 100%;
  }
}
@media screen and (orientation: portrait) and (max-width: 990px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  .hamburger {
    display: block;
    width: auto !important;
    position: fixed;
    top: 10px;
    left: calc(100% - 85px);
  }
  #naf-search-container {
    width: 200px;
    margin: 0 10px;
  }
  #naf-search-container #naf-search-input {
    font-size: 14px;
  }
  #naf-search-container .suggestions-dropdown .suggestion-item {
    padding: 10px 12px;
  }
  #naf-search-container .suggestions-dropdown .suggestion-item .suggestion-code {
    font-size: 14px;
  }
  #naf-search-container .suggestions-dropdown .suggestion-item .suggestion-description {
    font-size: 12px;
  }
  #naf-search-container .suggestions-dropdown .suggestion-item .suggestion-count {
    font-size: 11px;
  }
  header#main a#logo {
    margin-top: 1%;
    margin-left: 20px;
  }
  header#main a#logo img {
    height: 40px;
  }
  header#main nav {
    justify-content: center !important;
  }
  header#main nav#menuMain {
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    flex-direction: column;
    width: 90%;
    margin: 0 5%;
    background: white;
    border-radius: 5px;
    border: 1px solid #ddd;
    border-bottom: none;
  }
  header#main nav#menuMain a {
    font-size: 1.5rem !important;
    text-align: center;
    padding: 2vh 0;
    width: 100%;
    color: rgb(0, 89, 117);
    transition: all 0.5s;
    display: block;
    border-bottom: 1px solid #ddd;
  }
  header#main nav#menuMain a > img {
    display: none;
  }
  header#main nav#menuMain a:hover {
    color: rgb(0, 89, 117);
  }
  header#main:not(:target) #menuMain {
    transform: translate3d(0, -900px, 0);
  }
  header#main:not(:target) .hamburger {
    display: block;
    transition-delay: 1s;
  }
  header#main:not(:target) .cross {
    display: none;
  }
  header#main:target #menuMain {
    transform: translate3d(0, 150px, 0);
  }
  header#main:target .hamburger {
    display: none;
  }
  header#main:target .cross {
    display: block;
    transition-delay: 1s;
  }
  header > a {
    margin: 0 5px;
  }
  footer {
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
  }
  footer > * {
    text-align: center;
    margin-bottom: 3vh;
    font-size: 1rem;
  }
  footer > * a {
    margin: 15px 0;
  }
  footer iframe {
    width: 90%;
    min-height: 30vh;
  }
  div#mireHome {
    width: 70%;
    height: anchor-size;
    max-width: 100%;
    box-sizing: border-box;
    margin: 2rem auto 0 auto;
    order: 2;
  }
  section#identity {
    flex-direction: column;
    overflow-x: hidden;
    padding: 0;
    align-items: center;
  }
  section#identity figure {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
    padding: 10px 0;
    border-bottom: 5px solid white;
  }
  section#identity figure figcaption {
    width: 90%;
    margin-left: 5%;
  }
  section#identity figure figcaption h3 {
    font-size: 1.6rem;
  }
  section#identity figure figcaption p {
    text-align: center !important;
  }
  section#identity > h2 {
    margin-bottom: 20px;
  }
  section#what > img {
    order: -1;
  }
  section#what > h2 {
    font-size: 9%;
    order: -2;
  }
  section#what > article {
    width: 80%;
  }
  section#what > article dl {
    margin: 20px 0;
  }
  section#what > article dl dt {
    font-size: 1.6rem;
  }
  section#what > article dl dd {
    font-size: 1.3rem;
  }
  section#what > article dl:nth-of-type(odd) {
    text-align: left;
    border-left: 1px solid rgb(0, 89, 117);
    padding-left: 5px;
    border-right: none;
  }
  section#what > article dl:nth-of-type(even) {
    text-align: right;
    border-right: 1px solid rgb(0, 89, 117);
    padding-right: 5px;
    border-left: none;
  }
  section#references {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: -4rem 0 2rem 0;
    margin-left: 0;
    margin-right: 0;
    clear: both;
  }
  section#references > img {
    height: auto;
    max-height: auto;
    width: 30%;
  }
  section#missions > img {
    width: 100%;
    border-radius: 0;
  }
  section#missions > article {
    order: -1;
    width: 100%;
    box-sizing: border-box;
    padding: 2vw;
    font-size: 1.3rem;
  }
  section#missions > section {
    flex-wrap: wrap;
    margin-top: 5%;
  }
  section#missions > section article {
    position: relative;
    width: 80vw;
    height: 80vw;
    margin: 0 auto;
    padding-top: 5vw;
    font-size: 2.5%;
  }
  section#missions > section article p {
    font-size: 1.7rem;
    margin: 0 5vw;
  }
  section#missions > section article img {
    width: 100%;
  }
  section#missions > section article h3 {
    font-size: 2rem;
  }
  section#missions h2 {
    text-align: center;
  }
  section#hiugate {
    width: 100%;
  }
  section#hiugate > article {
    margin: 0 3%;
  }
  section#hiugate > section {
    flex-direction: column;
  }
  section#hiugate > section article {
    margin: auto;
    width: 80%;
    height: 80%;
    font-size: 1.3rem;
  }
  section#hiugate > section article h2 {
    font-size: 1.6rem;
    margin-top: 12%;
  }
  section#hiugate > section article p {
    text-align: center !important;
    padding: 0 3%;
  }
  form#contact label {
    width: 95%;
    margin: 0 1% 0;
    text-align: center;
    font-size: 1.5rem;
  }
  form#contact label.input-file-trigger {
    width: 95% !important;
  }
  form#contact input:not([type=file]) {
    width: 95%;
    margin: 0 0 3% 0;
    font-size: 1.5;
  }
  form#contact textarea {
    width: 95%;
    margin: 0 0 3% 0;
    font-size: 1.5rem;
  }
  form#contact button {
    width: 95%;
    margin: 0 0 3% 0;
  }
  form#contact div {
    display: none;
  }
  main#who {
    margin: 120px auto 0 auto;
  }
  main#who > .who-content {
    width: 90%;
  }
  main#who > .who-content h1 {
    text-align: center;
  }
  main#who > div {
    width: 80vw;
    height: 80vw;
    margin-bottom: 3rem;
  }
  main#who > div hgroup h5 {
    margin: 70px auto 10px auto;
  }
  main#accueil {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    flex-direction: column;
    align-items: center;
  }
  main#accueil h1 {
    position: relative !important;
    margin-top: 8.5rem !important;
    margin-bottom: 1rem;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 2rem;
    text-align: center;
  }
  main#accueil figure#home1 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    order: 1;
  }
  main#accueil figure#home1 img {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    display: block;
  }
  main#vision {
    margin-bottom: 200px;
  }
  main#vision section {
    flex-wrap: wrap;
    margin-top: 5%;
  }
  main#vision section > img {
    display: none;
  }
  main#vision section div.mire:nth-of-type(3) {
    top: 150px;
  }
  main#vision > img {
    width: 100%;
    border-radius: 0;
  }
  main#vision > article {
    order: -1;
    width: 100%;
    box-sizing: border-box;
    padding: 2%;
    font-size: 1.3rem;
  }
  main#team > img {
    width: 100%;
    border-radius: 0;
  }
  main#team > article {
    order: -1;
    width: 100%;
    box-sizing: border-box;
    padding: 2%;
    font-size: 1.3rem;
  }
  main#team section {
    flex-wrap: wrap;
    margin-top: 5%;
  }
  main#team section#orga {
    display: none;
  }
  main#solutions h1 {
    text-align: center;
  }
  main#solutions h2 {
    text-align: center;
  }
  main#solutions > img {
    width: 100%;
    border-radius: 0;
  }
  main#solutions > article, main#solutions > .content {
    width: 100%;
    box-sizing: border-box;
    padding: 2%;
    font-size: 1.3rem;
  }
  main#solutions > article:first-of-type, main#solutions > .content:first-of-type {
    order: -1;
  }
  main#solutions section {
    flex-wrap: wrap;
    margin-top: 5%;
  }
  main#solutions section div#arkema {
    width: 95%;
  }
  main#vision {
    margin-bottom: 50px;
  }
  main#vision h1 {
    text-align: center;
  }
  main#recrutement > * {
    width: 100% !important;
  }
  main#recrutement > img {
    border-radius: 0;
  }
  main#recrutement article, main#recrutement .content {
    padding: 3%;
    box-sizing: border-box;
  }
  main#recrutement article h1, main#recrutement .content h1 {
    text-align: center;
  }
  main#recrutement section {
    margin: 30px 0;
  }
  main section#controle {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: -2rem 0 2rem 0;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem;
    order: 3;
    clear: both;
  }
  main section#controle figure {
    width: 50%;
    max-width: 50%;
    margin: 5% 0;
    min-height: auto;
  }
  main section#infogerance figure {
    --size:7rem;
    margin-top: calc(var(--size) + 2rem);
  }
  main section#infogerance figure figcaption h3 {
    font-size: 1rem;
  }
  main section#infogerance > article p {
    font-size: 14px;
  }
  main section#infogerance > article:nth-of-type(1) {
    left: 4%;
    top: 16%;
  }
  main section#infogerance > article:nth-of-type(2) {
    left: 3%;
    top: 40%;
  }
  main section#infogerance > article:nth-of-type(3) {
    left: 60%;
    top: 18%;
  }
  main section#infogerance > article:nth-of-type(4) {
    left: 68%;
    top: 56%;
  }
  main section#infogerance > article:nth-of-type(5) {
    left: 25%;
    top: 70%;
    width: 35%;
  }
  main#accueil figure#home1 {
    animation-delay: 0s;
  }
  div#mireHome {
    animation-delay: 0.12s;
  }
  main section#controle {
    animation-delay: 0.24s;
  }
  section#references {
    animation-delay: 0.36s;
  }
  main#solutions > img {
    animation-delay: 0.72s;
  }
  main#solutions > .content h1 {
    animation-delay: 0s;
  }
  main#solutions > .content h2 {
    animation-delay: 0.12s;
  }
  main#solutions > .content p:first-of-type {
    animation-delay: 0.24s;
  }
  main#solutions > .content p:nth-of-type(2) {
    animation-delay: 0.36s;
  }
  main#solutions > .content p:nth-of-type(3) {
    animation-delay: 0.48s;
  }
  main#solutions > .content p:nth-of-type(4) {
    animation-delay: 0.6s;
  }
  main#vision > article {
    animation-delay: 0s;
  }
  main#vision > img {
    animation-delay: 0.12s;
  }
  section#missions > article h2 {
    animation-delay: 0s;
  }
  section#missions > article p:first-of-type {
    animation-delay: 0.12s;
  }
  section#missions > article p:nth-of-type(2) {
    animation-delay: 0.24s;
  }
  section#missions > article p:nth-of-type(3) {
    animation-delay: 0.36s;
  }
  section#missions > img {
    animation-delay: 0.48s;
  }
}/*# sourceMappingURL=2025.css.map */