body{
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.embed-vim {
  padding:56.25% 0 0 0;
  position: relative;
}
 
.embed-vim iframe,
.embed-vim object,
.embed-vim embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.partenaires li{
  width: 20vw;
}

.partenaires img{
  padding: 5vw;
}

#homepage h2{
    background-color: white;
    position: absolute;
    top: 40%;
    z-index: 60;
    left: 5%;
    width: 40%;
    border: 2px solid var(--color-blue);
    box-shadow: 10px 10px var(--color-blue);
    text-transform: uppercase !important;
    font-family: var(--font-family-antb);
    text-align: center;
    color: var(--color-blue);
    padding: 4%;
    font-size: 1.6em;
    line-height: 1.2;
    cursor: default;
    transition-duration: .7s;
}



#intro-texte{
    position: absolute;
  width: 40vw;
  bottom: 5%;
  left: 50.5%;
  transition-duration: .5s;
}

#intro-texte h1{
  font-size: 1.6em;
}

#accueil{
  padding-top: 20px;
  padding-bottom: 20px;
}

figure .cover-image{
  width: 100%;
  height: 26.95vw;
  font-family: var(--font-family-fdb);
  text-transform: uppercase;
  font-size: 2em;
  padding-top: 25%;
  color: white;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}

.main{
  padding-top: 0;
}

#vid-container{
  position: absolute;
  max-width: 60vw;
  max-height: 60vh;
  top: 1%;
  right: 1%;
  z-index: 50;
  transition-duration: .7s;
  /*cursor: nwse-resize;*/
  cursor: pointer;
}

#vid-container:hover{ 
  transition-duration: .7s;
}


#vid-container video{
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#cdc-slider{
  padding-left: 0%;
  padding-right: 0%;
}

#cdc-slider figcaption{
  text-transform: uppercase;
  font-size: 1em;
}

.slick-slide{
  margin: 10px; 
}

figcaption{
  font-size: 1.4em;
}

figcaption span{
  float: right;
}

.home-slider a{
  color: white;
  padding-left: 0;
  transition-duration: .5s;
}

.home-slider a:hover{
  padding-left: 5px;
  transition-duration: .3s;
}


.precedent,
.prochain{
  border: 0px;
  width: 5vw;
  cursor: pointer;
  position: absolute;
  background-color: transparent;
  z-index: 60;
}

.prestas button{
  color: var(--color-red);
}

.prochain{
  right: 20px;
  top: 40%;
}


.precedent{
  left: 20px;
  top: 40%;
}


#slide-nav{
  text-align: left;
}

#slide-nav a{
  padding-left: 0px;  
  transition-duration: .5s;
}

#slide-nav a:hover{
  padding-left: 5px;
  transition-duration: .5s;
}


@media only screen and (max-width: 812px) {

.main{
  padding-top: 0px;
}

#vid-container{
  position: absolute;
  width: 98vw;
  max-width: 98vw;
  max-height: 70vh;
  top: 75px;
}

#homepage h2{
    width: 87%;
    font-size: 1em;
    background-color: white;
    position: absolute;
    bottom: 10%;
    top: initial;
    z-index: 60;
    left: 5%;
    border: 2px solid var(--color-blue);
    box-shadow: 10px 10px var(--color-blue);
    text-transform: uppercase !important;
    font-family: var(--font-family-antb);
    text-align: center;
}

#intro-texte h1{
  font-size: 1.3em;
}

#intro-texte{
  width: 85vw;
  bottom: 3%;
  left: 5%;
  transition-duration: .5s;
}

figure .cover-image{
  width: 100%;
  height:  60vw;
  font-size: 1.6em;
  padding-top: 28%;
}


.precedent, .prochain {
    width: 10vw;
}

#slide-nav{
  padding-left: 5%;
  padding-right: 5%;
  text-align: center;
}


.partenaires li{
  width: 50%;
}
.partenaires img{
  padding: 50px;
}

}