* {
    box-sizing: border-box;
  }
  
  html {
    overflow-y: scroll;
    scroll-behavior: smooth;
    perspective: 10px;
  }

  h1 {
    font-family: 'Lato', sans-serif;
    font-weight: black;
    font-size: 3vw;
    color: #FFFFFF;
  }

  h2 {
    font-family: 'Lato', sans-serif;
    font-weight: black;
    font-size: 30px;
    color: #FFFFFF;
    margin:0px;
    text-align: center;
    
  }

  h3 {
    font-family: 'Lato', sans-serif;
    font-weight: medium;
    font-size: 1.6vw;
    color: rgb(51, 197, 205);
  }
  h4 {
    font-family: 'Lato', sans-serif;
    font-weight: medium;
    font-size: 25px;
    color: #FFFFFF;
  }

  p {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 27px;
    
    color: #FFFFFF;
  }

  .link {
    padding:5px;
    font-family: 'Poppins';
    font-style: normal;
    width:20vw;
    border:solid 3px white;
    transition-duration: 0.3s;
  }

  .link:hover {
    border: solid 3px rgb(51, 197, 205);
    background-color: rgb(51, 197, 205);
    color:white;
  }


  .link2 {
    padding:5px;
    font-family: 'Poppins';
    font-style: normal;
    color:black;
    width:20vw;
    border:solid 3px black;
    transition-duration: 0.3s;
  }


  .link2:hover {
    border: solid 3px rgb(51, 197, 205);
    background-color: rgb(51, 197, 205);
    color:white;

  }

  @media (max-width:768px) {
    h1 {
      font-size: 30px;
    }
    h2 {
      font-size: 24px;
    }
    h3 {
      font-size: 16px;
    }
    h4{
      font-size:25px;
    }
    p {
      font-size:15px;
    }
  }
  
  body {

    background-color: white;
    margin: 0px;
    padding: 0px;
  }

  a {
      text-decoration: none;
      color:white;
  }




  /* ---------------------- NAVBAR ------------------------- */

  
  .nav {
    
    width: 100%;
    position: relative;
    
  }
  .nav-link {
    font-size:18px;
  }
  .nav > .nav-header {
    display: inline;
  }
  
  .nav > .nav-header > .nav-title {
    display: inline-block;
    margin-left: 50px;
    margin-top: 30px;
    margin-right: 5%;
    
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 36px;
    /* identical to box height */
    
    
    color: #FFFFFF;
  }
  
  .nav > .nav-btn {
    display: none;
  }
  
  .nav > .nav-links {
    display: inline;
  }
  
  .nav > .nav-links > a {
    display: inline-block;
    margin-top: 30px;
    margin-right: 40px;     
    text-decoration: none;
    color: #efefef;
    position:relative;

  }
  .nav > .nav-links > a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 10px;
    left: 0;

    background-color: rgb(51, 197, 205);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .nav > .nav-links > a:hover {
    color: #efefef;
  }

  .nav > .nav-links > a:hover::before {
    transform: scaleX(1);
  }
  
  .nav > #nav-check {
    display: none;
  }
  
  @media (max-width:768px) {

    .nav > .nav-links > a:hover::before {
      transform: scaleX(0);
    }
    
    .nav > .nav-header > .nav-title {
      margin-left: 5%;
    }


    .nav > .nav-btn {
      display: inline-block;
      position: absolute;
      right: 20px;
      top: 20px;
    }
    .nav > .nav-btn > label {
      display: inline-block;
      width: 50px;
      height: 50px;
      padding: 13px;
    }
    .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
      background-color: rgba(0, 0, 0, 0.3);
    }
    .nav > .nav-btn > label > span {
      display: block;
      width: 25px;
      height: 10px;
      border-top: 2px solid #eee;
    }

    .nav > .nav-links {
      z-index: 1;
      position: absolute;
      display: block;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      height: 0px;
      transition: all 0.3s ease-in;
      overflow-y: hidden;
      top: 90px;
      left: 0px;
    }
    .nav > .nav-links > a {
      margin-left:10%;
      display: block;
      width: 100%;
    }

    .nav > .nav-links > a > p{
      font-size:20px;
    }
    .nav > #nav-check:not(:checked) ~ .nav-links {
      height: 0px;
    }
    .nav > #nav-check:checked ~ .nav-links {
      height: calc(100vh - 50px);
      overflow-y: auto;
    }
  }



  /* -------------------- COVER --------------------- */
  .full-screen-video-container {
    background-color: rgba(0, 0, 0, 50%);
    position:relative;
    height:100vh;
    width: 100%;
    overflow:hidden;
  }

  .full-screen-video-container video {
    z-index: -1;
    position:absolute;
    width:auto;
    height:auto;
    min-width:100%;
    min-height:100%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }


  .social {
      display: flex;
      flex-direction: column;
      position: absolute;
      top:50%;
      right:20px;
      transform:translate(0,-50%);
  }

  .social > a {
      margin:10px;
  }


  /* ------- ARROW --------- */

  .arrow-container {
    position:absolute;
    left:50%;
    bottom:5%;
  }

  .arrow {
    width: 45px;
    height: 45px;
    transition: ease-in;
    animation: down 1.5s infinite;
    -webkit-animation: bounce 1.5s infinite;
  }
  .arrow::before {
    content: "";
    position: absolute;
    top: 11px;
    left: -50%;
    width: 25px;
    height: 25px;
    border-left: 2px solid #fafafa;
    border-bottom: 2px solid #fafafa;
    transform: rotate(-45deg);
  }
  
  @keyframes bounce {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translateY(15px);
    }
    40% {
      transform: translate(0);
    }
  }
  
  @-webkit-keyframes bounce {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translateY(15px);
    }
    40% {
      transform: translate(0);
    }
  }
  
  .fade-in {
    opacity: 1;
    transition: 1s all ease-in;
  }
  
  .fade-out {
    opacity: 0;
    transition: 1s all ease-out;
  }
  
  @media (max-width:768px) {
    .arrow-container {
      bottom: 10%;
    }
  }


  /* -------------------------------- A PROPOS ------------------------------- */

  .a-propos {



      padding:100px 0  100px 0;
      width:100%;
      background: #1D1D1D;
      display:flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
  }

  .a-propos > div {
    width: 40%;
    
  }

  .a-propos-left {
    text-align: center;
  }

  .a-propos-left > img {
    width:200px;
    height:auto;
    text-align: center;
  }
    

  .a-propos-left > h1,h3 {
        margin : 0px;
  }

  .a-propos-right > p {
      margin: 30px 0; 
  }

  .a-propos-right > .download-cv {
      text-align: right;
      right:0;
      bottom: 10px;
  }




  @media (max-width:768px) {
    .a-propos {
      flex-direction: column;
    }

    .a-propos > div {
      width: 100%;
      height: auto;
    }

    .a-propos-right {
      padding: 5%;
    } 
    .a-propos-right > .download-cv {
      text-align: center;
    }
  }





  /* -------------------------- PORTFOLIO ------------------------- */


  .portfolio {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(./assets/images/bg-portfolio.jpg);
    background-size: cover;
    padding: 80px 0 50px 0;
  }


  .portfolio-img {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 50px;
    margin:50px;
  }

  .snip0019 > img {
    border:rgba(255, 255, 255, 0.2) solid 1px;
    max-width: 400px;
    height: 100%;
  }

  .voir-plus-portfolio {
    display:block;
    text-align: center;
    padding:0px;
  }



  @media (max-width:768px) {
    .portfolio-img {
      gap:0px;
      margin:0px;
    }

    .snip0019 > img {
      width:100%;

    }
    .voir-plus-portfolio {
      padding:5vh;
    }
  }



  /* -------- HIDDEN TEXT----------- */


  .link-portfolio {
    display:table;
    position: absolute;
    right:0;
    bottom:0;
  }

figure.snip0019 {

  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 400px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  text-align: center;
}
figure.snip0019 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0019 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0019 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
}
figure.snip0019 figcaption > div {
  float: left;
  height: 100%;
  overflow: hidden;
  width: 50%;
  position: relative;
}
figure.snip0019 figcaption::before {
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  width: 2px;
  content: '';
  opacity: 0;
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0019 h4,
figure.snip0019 p {
  margin: 0;
  padding: 20px;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  -webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
  transition: opacity 0.45s,-webkit-transform 0.45s,-moz-transform 0.45s,-o-transform 0.45s,transform 0.45s;
}
figure.snip0019 h4 {
  text-align: right;
  display: inline-block;
  word-spacing: -0.1em;
  font-weight: 300;
  text-transform: uppercase;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transform: translate3d(50%, 0%, 0);
  transform: translate3d(50%, 0%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0019 h4 span {
  font-weight: 800;
}
figure.snip0019 p {
  display: block;
  bottom: 0;
  text-align: left;
  font-weight: 300;
  top: 0%;
  color: #000;
  background: #ffffff;
  -webkit-transform: translate3d(-50%, 0%, 0);
  transform: translate3d(-50%, 0%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0019 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0019:hover img {
  opacity: 0.7;
}
figure.snip0019:hover figcaption h4,
figure.snip0019:hover figcaption p {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0019:hover figcaption h4 {
  opacity: 1;
}
figure.snip0019:hover figcaption p {
  opacity: 1;
}
figure.snip0019:hover figcaption::before {
  background: #ffffff;
  top: 0px;
  bottom: 0px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}









/* ------------------------ ENTREPRISE ---------------------- */

.entreprises {
  background: #1D1D1D;
  padding:10vh 0;
}

.entreprises-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-top:5%;
}

.entreprises-img > img {
  width: 20vw;
  height: auto;
}

@media (max-width:768px) {
  .entreprises-img {
    display: flex;
    flex-direction: column;
    margin-top:10%;
  }
  .entreprises-img > img {
    width: 50vw;
    height: auto;
  }  
}



/* ------------------------ INSTAGRAM ----------------------- */

.instagram {
  padding:10vh 0;
}

.instagram > h2, .instagram > a > p {
  color:black;
  text-align: center;
}

.instagram-img {
  display:flex;
  justify-content: center;
  flex-direction: column;
}

.instagram-img-row {
  display: flex;
  justify-content: center;
}

.instagram-img-row > img {
  margin: 0.5vw;
  width:20vw;
}

.voir-plus-instagram {
  padding:5vh;
  display: block;
  text-align: center;
}







@media (max-width:768px) {
  .instagram {
    padding:5vh 0;
  }
.voir-plus-instagram {
  padding:2vh;
  display: block;
  text-align: center;
}
.instagram-img-row > img {
  width:30vw;
}
}



/* ------- hover button --------- */
.button-insta::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

.button-insta:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.button-insta::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background-color:rgb(88, 238, 255);
  z-index: -1;
  transition: transform .3s ease;
}

.button-insta {
  margin-right: auto;
  margin-left: auto;
  padding:5px;
  display: table;
  position: relative;
}


/* commentaire */






/* --------------------------- FOOTER -------------------- */


footer {
  background-color: #1D1D1D;

}

.blocks {
  padding:50px;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}

.blocks > div {
  text-align:center;
}

.blocks > div > img {
  margin:30px;
}

.fin-footer {
  text-align:center;
}

.fin-footer > p {
  margin:0;
}


.fin-footer > div > a > img {
  margin:10px;
}

@media (max-width:768px) {
  .blocks {

    flex-direction: column;

  }
}











/* ----------------------------- !!!!!!!!!! PORTFOLIO PAGE !!!!!!!!! ------------------------------------ */


.portfolio-body {
  background-color:black;
}
.h1-portfolio, .h1-contact {
  color:white;
  margin-top:10%;
  text-align: center;
}
.portfolio-body  p {
  line-height: 30px;
}


.portfolio-container {
  padding:0 7vw;
  margin: 5% auto;
  width:90vw;
  border: solid white 3px;
  
}


.portfolio-project-container {
  margin: 10% 0%;
  width:100%;
  position:relative;
}

.portfolio-project-container-right {
  display: flex;
  flex-direction:column;
  align-items: center;
  width:50vw;
  background-color:#1D1D1D;
  padding: 5% 10%;
}

.portfolio-video-container-right {
  width:30vw;
  position:absolute;
  right:0%;
  top:50%;
  transform: translate(0,-50%);
  border:solid 1px white;
}


.iframe-container-right { 
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  }
  
  .iframe-container-right .iframe-right {
    position: absolute;
    top: 0; 
    left: 0;
    border: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }




  .portfolio-project-container-left {
    margin-left: auto;
    display: flex;
    flex-direction:column;
    align-items: center;
    width:50vw;
    background-color:#1D1D1D;
    padding: 5% 10%;
    
  }

  .portfolio-video-container-left {
    width:30vw;
    position:absolute;
    left:0%;
    top:50%;
    transform: translate(0,-50%);
    border:solid 1px white;
  
  }


  .iframe-container-left { 
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }
    
    .iframe-container-left .iframe-left {
      position: absolute;
      top: 0; 
      left: 0;
      border: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .iframe-container-left > p, .iframe-container-right > p {
      display: table;
      margin:auto;
    }
    
  


    @media (max-width:768px) {
      .portfolio-project-container-left,  .portfolio-project-container-right{
        width:100%;
        margin:30% auto;
      }

      .portfolio-video-container-left, .portfolio-video-container-right {
        width:70%;
        left:50%;
        bottom:0%;
        transform: translate(-50%,50%);
      }
      .portfolio-container {
        padding:5vw;
        
      }
      .portfolio-video-container-left, .portfolio-video-container-right {
        width:100%;
        position:static;
        left:0%;
        top:50%;
        transform: translate(0,0);
      
      
      }


    }
    
    



    
/* ----------------------------- !!!!!!!!!! CONTACT PAGE !!!!!!!!! ------------------------------------ */

.body-contact {
  background-color: black;
}


.contact-form-container {
  margin:5%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.contact-form {
  width:40vw;
  background-color: #1D1D1D;
  padding:40px;
}

input {
  width:90%;
  height: 50px;
  background-color:#ffff;
  box-sizing: border-box;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 27px;
  
}

textarea
{
  width:90%;
  height: 200px;
  background-color:#FFFFFF;
  box-sizing: border-box;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 27px;
  
}

button[type=submit] {
  margin:10px;
  width:100px;
  padding:10px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  border:none;
}


@media (max-width:768px) {
  .contact-form {
    width:80vw;
  }
  .contact-form-container {
    margin:20% 5%;
  }
  button[type=submit] {
    font-size:15px;
  }

}