@font-face {
    font-family: 'oldstyle_italichplhs';
    src: url('../font/oldsih__.woff2') format('woff2'),
         url('../font/oldsih__.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}




#carousel .preset_visu {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

#carousel p{
    font-family: 'oldstyle_italichplhs';
   
    color: black;
    position: relative;
    top: 36%;
    font-size :1.2em;
}

.preset_visu{

background-size: 77vh;
background-repeat: no-repeat;
background-position: center;

    
}


#carousel-1 {
background-image: url("../images/A.png");
background-color: white;
    
}

#carousel-2 {
background-image: url("../images/B.png");
background-color: white;
}

#carousel-3 {
background-image: url("../images/C.png");
background-color: white;

}


#carousel-33 {
background-image: url("../images/CC.png");
background-color: white;

}

#carousel-4 {
background-image: url("../images/D.png");
background-color: white;

}

#carousel-44 {
background-image: url("../images/DD.png");
background-color: white;

}

#carousel-5 {
background-image: url("../images/E.png");
background-color: white;

}

#carousel-6 {
background-image: url("../images/F.png");
background-color: white;



}

#carousel-7 {
background-image: url("../images/G.png");
background-color: white;



}

#carousel-8 {
background-image: url("../images/H.png");
background-color: white;

 
}



#carousel-9 {
background-image: url("../images/J.png");
background-color: white;

}
#carousel-10 {
background-image: url("../images/K.png");
background-color: white;

}
#carousel-11 {
background-image: url("../images/L.png");

}


#carousel-1111 {
background-image: url("../images/LL.png");

}



#carousel-12 {
background-image: url("../images/M.png");
background-color: white;

}

#carousel-1212 {
background-image: url("../images/MM.png");
background-color: white;

}
#carousel-13 {
background-image: url("../images/N.png");
background-color: white;
}


#carousel-1313 {
background-image: url("../images/NN.png");
background-color: white;
}

#carousel-14 {
background-image: url("../images/O.png");
background-color: white;
}
#carousel-15 {
background-image: url("../images/P.png");
background-color: white;

}

#carousel-16 {
background-image: url("../images/Q.png");
background-color: white;

}

#carousel-17 {
background-image: url("../images/R.png");
background-color: white;

}

#carousel-18 {
background-image: url("../images/S.png");
background-color: white;
}

#carousel-19 {
background-image: url("../images/T.png");
background-color: white;

}

#carousel-20 {
background-image: url("../images/U.png");

}

#carousel-23 {
background-image: url("../images/VV.png");

}

#carousel-21 {
background-image: url("../images/V.png");

    
    
    
}








#controls {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

#controls button {
  padding: 5px 10px;
}





#header {
    text-align: center;
    position: fixed;
    z-index: 60;

    background-color: transparent;

    top:0%;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 13vh;

}


#bas {
    text-align: center;
    position: fixed;
    z-index: 60;

    background-color: transparent;

    bottom:0%;
      display: flex;
  justify-content: center;
    width: 100%;
    height: 11vh;

}



#CTN{
    
    width:100%;
    height:100%;
   display:flex;
    
}

a {
        display: flex;
        justify-content: center; /* Centre l'icône horizontalement */
        align-items: center; /* Centre l'icône verticalement */
}    
   

#insta{
    

height: 40%;


}

#logo{
    

width: 95%;


}


#carousel {
  /* Ensure that the contents flow horizontally */
  overflow-y: auto;
    width: 100%;
  white-space: nowrap;
  display: flex;
   
}


#carousel::-webkit-scrollbar {
    display:none;
}

#carousel.vertical {
  flex-direction: column;
}

/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}

#carousel.snap .preset_visu {
  scroll-snap-align: center;
}

#carousel.snap.vertical {
  flex-direction: column;
  scroll-snap-type: y mandatory;
}



/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  -ms-scroll-snap-points-x: repeat(100%);
}

#carousel.snap.vertical {
  scroll-snap-points-x: initial;
  -ms-scroll-snap-points-x: initial;
  scroll-snap-points-y: repeat(100%);
  -ms-scroll-snap-points-y: repeat(100%);
}




@media screen and (max-width: 1100px) {
.preset_visu {
    background-size: 100%;
} 
 
 

    
#header {  
    height:15vh
} 
       
    
#bas {
    height: 15vh;
}    

    
#insta{

height: 32%;

}
    
    
#logo{

height: 69%;

}      
    
    
a {
        display: flex;
        justify-content: center; /* Centre l'icône horizontalement */
        align-items: center; /* Centre l'icône verticalement */
}    
    
 
#carousel p {

    top: 33%;
    font-size: 20px;
}  
    
 
    
    
}