@font-face {
  font-family: "Vinci Sans";
  src: url(fonts/Vinci\ Sans\ Regular.otf);
}

@font-face {
  font-family: "Vinci Sans Bold";
  src: url(fonts/Vinci\ Sans\ Bold.otf);
}

@font-face {
  font-family: "Vinci Sans Expanded";
  src: url(fonts/VinciSansExpanded-Bold.otf);
}

/* GLOBAL */
:root {
  --Blue: #0f3070;
  --Turquoise: #07d4b4;
  --Regular: "Vinci Sans";
  --Bold: "Vinci Sans Bold";
  --Heading: "Vinci Sans Expanded";
}

body {
  overscroll-behavior: none;
}

h1,
h2,
h3 {
  font-family: var(--Heading);
}

h1 {
  font-size: clamp(2rem, 7vw, 6.5em);
  color: white;
  margin: 0;
  padding: 0.64em 0;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  letter-spacing: -0.025em;
  margin-top: 15vh;
}

strong,
a {
  color: var(--Turquoise);
  text-decoration: none;
}

h2 {
  color: white;
  font-size: 32px;
  line-height: 130%;
}

h3 {
  color: var(--Blue);
  font-size: 28px;
  text-transform: uppercase;
}

p {
  font-family: var(--Regular);
  font-size: 24px;
  line-height: 1.5em;
  white-space: pre-line;
}

span,
button {
  font-family: var(--Bold);
  letter-spacing: 0.12rem;
}

button {
  background: transparent;
  border: none;
  color: white;
  font-size: clamp(0.8rem, 0.02vh, 1.125rem);
  transition: color 250ms linear;
}

.svg {
  transition: fill 250ms linear;
}

.fp-tableCell {
  padding: 0 7vw;
}

.label {
  text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  color: white;
}

.slide {
  transition: opacity 250ms linear;
  opacity: 0;
}

/* UTILITY CLASSES */

.bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: darken;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: opacity 600ms linear;
  opacity: 0;
}

.opacity {
  opacity: 1 !important;
}

#bghead {
  background-image: url(./img/header.jpg);
  transition: none;
  opacity: 1;
}

#bg0 {
  background-image: url(./img/ancrage-industriel.jpg);
}

#bg1 {
  background-image: url(./img/slide_forest.jpg);
  background-color: rgba(15, 47, 112, 0.25);
  background-blend-mode: multiply;
}

#bg2 {
  background-image: url(./img/slide_barrage.jpg);
  background-color: rgba(15, 47, 112, 0.25);
  background-blend-mode: multiply;
}

#bg3 {
  background-image: url(./img/demarche-collaborative.jpg);
}

.bgWhite {
  transition: background-color 250ms linear;
  background-color: white;
}

.bgBlue {
  background-color: var(--Blue) !important;
}

.bgTurquoise {
  background-color: var(--Turquoise) !important;
}

.fillTurquoise {
  fill: var(--Turquoise);
}

.colorTurquoise {
  color: var(--Turquoise);
}

/* SCROLLBAR */
.fp-scroller::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
}

.fp-scroller::-webkit-scrollbar,
body {
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}

/* FIXED */
.horiwrap {
  display: flex;
  position: fixed;
  left: 7vw;
  bottom: 12vh;
  gap: 1.2rem;
  opacity: 0;
  z-index: 99;
}

.horinav {
  z-index: 99;
  pointer-events: all;
  background-color: white;
  height: 4px;
  width: 4.375rem;
  transition: background-color 1s;
}

.navarrow {
  display: none;
}

form {
  display: flex;
}

.speclabel {
  position: fixed;
  left: 7vw;
  top: 20vh;
  transition: opacity 250ms;
  opacity: 0;
}

#fr {
  border-right: 1px solid;
}

.svgwrap {
  transform-origin: left;
  transform: scale(1.5);
  transition: transform 1s;
}

.scale {
  transform: scale(1.1);
}

.topbar {
  position: fixed;
  top: 0;
  padding-top: 4.88vh;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 7vw;
  padding-left: 7vw;
}

#fp-nav ul {
  display: flex;
  flex-direction: column;
  gap: 5.5vh;
}

#fp-nav ul li a.active span {
  background: var(--Turquoise) !important;
}

#fp-nav ul li a span {
  transition: background-color 250ms linear;
}

/* HEADER */

/* INTRO */
.wrapper {
  display: flex;
  align-items: center;
}

.wrapper > video {
  width: 100%;
  margin-left: -15vw;
}

#section1 h2 {
  color: var(--Turquoise);
}

#section1 {
  background-color: var(--Blue);
}
#section1 p {
  color: white;
}

.introWrap {
  max-width: 41vw;
  flex-shrink: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* SPECS */

#section2 p {
  color: white;
}

.specWrap {
  height: 45vh;
  max-width: 440px;
}

/* APPROACH */
#section3 {
  background: white;
}

#section3 p {
  color: var(--Blue);
  padding-right: 20%;
}
#section3 span {
  color: var(--Turquoise);
  display: block;
  margin-bottom: 6.666666vh;
  margin-top: 15vh;
}

.wrap {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.wrap > * {
  height: 100%;
  border-top: 2px solid var(--Turquoise);
  padding: 6.666666vh 0;
  margin: 0;
}

/* CONTACT */
#section4 {
  background: var(--Blue);
}

#section4 p,
#section4 span {
  color: white;
}

#section4 strong {
  font-weight: normal;
}

.contactWrap {
  display: flex;
  border-top: 2px solid var(--Turquoise);
  padding-top: 11vh;
  margin-top: 11vh;
}

.contactWrap > * {
  width: 100%;
}

/* FOOTER */
footer {
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 0 7vw;
}

#cp#cp {
  font-family: var(--Regular);
  color: black;
  font-size: clamp(0.75rem, 1.25vw, 1.125rem);
  letter-spacing: normal;
  padding: 1.1rem 0;
}

form button:last-child {
  padding-right: 0;
}

/* RESPONSIVE */

@media screen and (max-width: 600px) {
  #section1 {
    overflow: hidden;
    position: relative;
  }

  #section1 .fp-tableCell {
    vertical-align: unset;
  }

  .wrapper {
    flex-direction: column;
    align-items: normal;
  }

  .form {
    transform: scale(1);
  }

  .svgwrap {
    transform: scale(1);
  }

  .scale {
    transform: scale(0.8);
  }

  .bg {
    transition: opacity 800ms linear;
  }

  .instant {
    transition: none;
  }

  #bg0 {
    background-position: right;
  }

  .bg {
    position: fixed;
  }

  #section2 {
    height: auto !important;
  }

  #fp-nav,
  .horinav,
  .horiwrap {
    display: none;
  }

  .contactWrap {
    flex-direction: column;
    margin-top: 4vh;
    padding-top: 4vh;
  }

  #section3 p {
    padding-right: 0;
    padding-top: 0;
    border-top: none;
  }

  .wrap {
    grid-template-columns: none;
  }

  .wrap > * {
    padding: 2vh 0;
    height: auto;
  }

  .wrap h3 {
    padding-bottom: 1vh;
    margin-top: 1.5rem;
  }

  footer img {
    width: 100%;
  }

  .specWrap {
    padding-top: 4rem;
  }
  .introWrap {
    max-width: none;
    margin-top: 11vh;
  }

  .navarrow {
    display: block;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    transition: all 1s;
    width: 25px;
    height: 25px;
    background: white;
    padding: 2px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0px 0px 2px #00000075;
  }

  .navarrow i {
    color: var(--Turquoise);
    width: 16px;
    transform: translateY(5px);
  }

  .rotate {
    transform: rotate(-90deg);
  }

  .inv {
    opacity: 0;
  }

  #introh2 {
    margin: 0;
  }
  #introp {
    margin-bottom: 0;
  }

  #section3 .label {
    margin-bottom: 1rem;
    margin-top: 8vh;
  }
  .topbar {
    padding-top: 2.5vh;
  }

  #bg2 {
    background-position-x: 30%;
  }
  #motion {
    margin: 0;
    width: 80vh;
    align-self: center;
    position: absolute;
    bottom: -5vh;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 18px;
  }

  p {
    font-size: 16px;
  }
}