.color-orange {
  color : #ac0000;
}

.premiere_section{
    margin-top: 150px;
    margin-bottom: 50px;
    padding: 30px 30px 60px 80px;
}

.premiere_section .special-title{
    font-size: 3.2em;
    font-weight: bold;
    color: #2c3e50;
    z-index: 3;
}

.premiere_section .betae-img{
    height: 300px;
    transition: 10ms linear;
    animation-name: zoom_in;
    animation-duration: 2000ms;
    animation-timing-function: linear;
    animation-iteration-count : 5;
}

@keyframes zoom_in {
  0%  {
      transform: scale(1);
      opacity: .0;
  }

  100%  {
      transform: scale(1.1);;
      opacity: 1;
  }

}

.project-illustration-div{
  margin-top: 100px;
  padding-top: 80px;
}

.project-illustration{
    padding: 20px;
    margin-bottom: 5em;
}

.the-illustration{
    height: 70vh;
    transition: 500ms ease;
    cursor: pointer;
}

.the-illustration-content{
  display: flex;
  align-items: flex-end;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  color: white;
  font-size: 1.5em;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  opacity: 0;
  transition: 500ms ease;
}
.the-illustration:hover .the-illustration-content{
      opacity: 1;
}

.displace-1{
  position: relative;
  top: 30px;
}

.displace-2{
  position: relative;
  top: -100px;
}

.displace-3{
  position: relative;
  top: -50px;
}

.displace-4{
  position: relative;
  top: 30px;
}

/*================================================================== DEUXIEME SECTION ===========================================*/

.deuxieme_section{
    padding: 10vh 30px 40vh 30px;
    margin-bottom: 30px;
}

 .section_head{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #003953;
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 60px;
}

 .section_head h2::after{
  display: block;
  content: "";
  width: 25%;
  height: 5px;
  background-color: #e67e22;
  position: relative;
  top: 10px;
  left: 37.5%;
}

.section-content{
      color: #00395;
      line-height: 1.8em;
}

.glassmorphism{
  padding: 3em;
  border-radius: 5px;
  background: rgba( 255, 255, 255, 0.95 );
  backdrop-filter: blur( 12.5px );
  -webkit-backdrop-filter: blur( 12.5px );
  border-radius: 10px;
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.1 );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.plaquette-div{
  margin-top: 2em;
  margin-bottom: 2em;
  text-align: center;
}

a.plaquette_link{
  vertical-align: middle;
   border: none;
   background: none;
   color: white;
   font-weight: bold;
   padding: 10px;
   padding-right: 30px;
   padding-left: 30px;
   background-color: #2c3e50;
   z-index: 10;
   transition: 500ms ease;
   text-decoration: none;
}

a.plaquette_link:hover{
   border: 1px solid #2c3e50;
   background-color: white;
   color: #2c3e50;
   -webkit-box-shadow: 0 1.75rem 2rem -0.4rem rgba(50,0,100,0.15);
   -moz-box-shadow: 0 1.75rem 2rem -0.4rem rgba(50,0,100,0.15);
   box-shadow: 0 1.75rem 2rem -0.4rem rgba(50,0,100,0.15);

}


/*================================================================== TROISIEME SECTION ===========================================*/
.troisieme_section{
    padding: 30px 10vw 30px 10vw;
}

.section_head_left{
 color: #003953;
 font-size: 2.5em;
 font-weight: bold;
 margin-bottom: 60px;
}


.section_head_left h2::after{
 display: block;
 content: "";
 width: 25%;
 height: 5px;
 background-color: #e67e22;
 position: relative;
 top: 10px;
 left: 0%;
}

.valeur-line{
  margin-bottom: 40px;
}


.why-img {
  width: 100%;


}

.why-img img {
  height: 80px;
  background-color: #dce7f2;
  border: 2px solid #2C3E50;
  padding: 10px;
  border-radius: 50%;
  -webkit-box-shadow: 0 1.75rem 3rem 0rem rgba(50,0,100,0.1);
  -moz-box-shadow: 0 1.75rem 3rem 0rem rgba(50,0,100,0.1);
  box-shadow: 0 1.75rem 3rem 0rem rgba(50,0,100,0.1);
}

.explain .reason-head{
  margin-top: 20px;
  font-size: 1.2em;
  color: #2C3E50;
  letter-spacing: 1.5px;
  font-weight: bold;
}


.explain .explain-text {
  margin-top : 20px;
  font-size: 0.9em;
  line-height: 25px;
}


/*===================================================== QUATRIEME SECTION =========================================*/

.quatriem_section{
    padding: 30px 10vw 30px 10vw;
}

.partner-row{
  padding: 10px;
  padding-left: 20px;
  margin-bottom: 20px;

}

.partenaires{
  height: 50px;
}

/*============================================== MOBILE =========================================*/
@media only screen and (max-width: 416px) {

    .premiere_section .special-title{
        font-size: 1.5em;
    }

    .premiere_section{
        margin-top: 150px;
        margin-bottom: 50px;
        padding: 20px;
    }


    .premiere_section .betae-img{
        height: 100px;
        margin-top: 1em;
    }



    /*=========================================== DEUXIEME SECTION =============================================================*/

    a.plaquette_link{
       font-size: .8em;
       padding-right: 20px;
       padding-left: 20px;
       background-color: #2c3e50;
       position: relative;
       left: -16px;
    }

    /*===========================================================================================================================*/

    .project-illustration-div{
      margin-top: 0px;
      padding-top: 40px;
    }

    .displace-1{
      position: relative;
      top: 0px;
    }

    .displace-2{
      position: relative;
      top: -0px;
    }

    .displace-3{
      position: relative;
      top: 0px;
    }

    .displace-4{
      position: relative;
      top: 0px;
    }

    .deuxieme_section{
        padding: 30px;
        margin-bottom: 30px;
    }

    .troisieme_section{
        padding: 30px;
    }

    .partner-row{
      padding: 10px;
      margin-bottom: 3em;
    }


}