* {
    scroll-behavior: smooth;   
}
@font-face {
    font-family: "BarrillonNew";
    src: url("assets/BarrillonNew.ttf");
}
::-webkit-scrollbar {
    width: 10px;
    z-index: 900;
    position:absolute;
  }
    ::-webkit-scrollbar-track {
    display:none;
  }
    ::-webkit-scrollbar-thumb {
    background:#920A60 ; 
    border-radius:10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    
    background: #ffd91c ; 
  } 
 
/*-------CSS------*/  
h1{
    font-family: BarrillonNew;
    text-transform: uppercase;
}
    body{
        margin: 0; padding: 0;
        overflow-x: hidden;
    }
    #section_0{
        display:block;
        margin:auto;
        z-index:10000;
    }
    #Composant_24_1{
        position: absolute;
        width:40%;
        margin-top:-100px;
        margin-left: 70%;
        z-index:1;
    }
    #section_1{
        margin-top:50px;
    }
    

    .para-ziq{
        position:absolute;
        z-index:50;
    }
    .model{
        opacity:0;
    }

    #section_2{
        height: auto;
        background-image: url('assets/menuiserie_sombre.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        
    }
    .h3_video_ziq{
        text-align:center;
        color:white;
        margin:20px;
    }
    #video_ziq{
        display:block;
        margin:auto;
        padding:20px;
    }
    #cta_video_ziq{
        padding-bottom:200px;
    }
    .zi{
        position:relative;
        z-index: 50;
    }
    h1{
        font-size: 3.2em;
    }
    .titre{
        color:black;
    }
    h3{
        color:black;
        font-size: 23.5px;
    }
    .sous-titre-blanc{
        color:white;
    }

    .ligne{
        height:5px;
        width:30%;
        background:#920A60;
        border-radius:50px;
    }
    .cta {
        margin:auto;
        margin-top:50px;
    }
  .cta a{
    text-align:center;
    display:block;
    margin:auto;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    color:white;
    padding: 10px 25px;
    border:4px solid #ffd91c;
    background-color:#ffd91c;
    width:15em; 
    border-radius: 50px;
  }
 
  .cta a:hover{
    background-color: transparent;
    color:#ffd91c;
  }
  .blanc a:hover{
    background-color: transparent;
    color:#ffffff;
  }


  #cache1{
      position:absolute;
      margin-top:-1000px;
      margin-left:-200px;
      width:150%;
      z-index:1;
    }
    #cache2{
        position:absolute;
        margin-top:-500px;
        margin-left:-200px;
        width:150%;
    }
    #boite{
        position:relative;
        margin-top:200px;
        color:#ffffff;
    }
    #ligne2{
        height:5px;
        width:15%;
        background:#ffffff;
        border-radius:50px;
 
    }
    #video-box{
        display:block;
        margin:auto;
        margin-top:50px;
        border:5px solid #ffffff;
    }
    .thumb-img{
        position:relative;
        width:220px;
        margin:auto;
        transition: transform .5s;
    }
    .thumb-img:hover{
        transform: scale(1.2);
        z-index:51;
    }
    .boite-image{
        position:relative;
        display:block;
        margin:auto;
        background-color: rgba(255,2555,255,0.2);
        overflow: hidden;
    }
    #bloc-img{
        width:50%;
        margin-top:10px;
        justify-content:center;
    }

    #createurs{
        color:#ffffff;
        margin-top:50px;
        font-size:55px;
    }
    #ligne3{
        height:5px;
        width:40%;
        background:#ffffff;
        border-radius:50px;
    }
    #txt-createurs{
        text-align:justify;
        margin-left:100px;
        margin-right:100px;
        margin-top:40px;
    }
    #ctaci {
        margin:auto;
        margin-top:50px;
    }
  #ctaci a{
    text-align:center;
    display:block;
    margin:auto;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    color:black;
    padding: 10px 25px;
    border:4px solid #ffffff;
    background-color:#ffffff;
    width:15em; 
    border-radius: 60px;
  }
  #ctaci a:hover{
    background-color: transparent;
    color:#ffffff;
  }
    #insert_createurs{
        margin-top:20px;
        padding:20px;
    }
    #logoaci{
        transition: transform .5s;
    }
    #logoaci:hover{
        transform:scale(1.1);
    }
    #Composant_24_2{
        position: absolute;
        width:40%;
        margin-top:-220px;
        margin-left: -100px;
        z-index:0;
    }
    
    #section_4{
        height: 110vh;
        padding:40px;
        background-image: url('assets/leaf.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        
    }
    #section_3{
        height: 100vh;
        background-image: url('assets/insert.jpg');
        background-size: cover;
        background-position: center;
        
        background-repeat: no-repeat;
    }
    #section_rugby{
        height: 90vh;
        
    }
    #section_rugby #ligne_rugby{
        height:5px;
        width:60%;
        background:#920A60;
        border-radius:50px;
    }
    #section_rugby h1{
        margin-top:50px;
        font-size:55px;
    }
    #txt-rugby{
        margin-top:30px;
    }
    #engagement{
        color:#ffffff;
        margin-top:50px;
        font-size:55px;
    }
    #feuille{
        width:50%;
        display:block;
        margin:auto;
        transition:transform 0.5s;
    }
    #feuille:hover{
        transform:scale(0.9);
    }
    #txt_engagement{
        color:#ffffff;
        margin-top:30px;
    }
    #img-nature{
        overflow:hidden;
        margin-top:100px;
    }
    #img_rugby{
        transition:transform 0.5s;
    }#img_rugby:hover{
        transform:scale(1.2);
    }
    #img_engagement{
        transition:transform 0.5s;
    }#img_engagement:hover{
        transform:scale(1.2);
    }

    #ligne4{
        height:5px;
        width:60%;
        background:#ffffff;
        border-radius:50px;
    }
    
    #section_5{
        height:80vh;
    }
    #txt-concept{
        margin-top:50px;
    }
    #btn-courbe{
        position:relative;
        justify-content: center;
    }
    
    
    #section_6{
        margin-top:20px;
    }
    .ligne5{
        height:5px;
        width:20%;
        background:#920A60;
        border-radius:50px;
    }
    #section_6 h1{
        font-size:50px;
        text-align:center;
    }
    #section_6 .ligne5{
        margin:auto;
        width:20%;
    }
    #section_6 h3{
        text-align:center;
    } 
    #section_6 #desc_6{
        text-align:justify;
    }

    #Composant_24_3{
        position: absolute;
        display: none;;
        width:40%;
        margin-top:-420px;
        margin-left: 80%;
        z-index:0;
    }
    #Composant_24_4{
        position: absolute;
        width:40%;
        margin-left: 80vw;
        z-index:0;
    }
    #Composant_24_5{
        position: absolute;
        width:40%;
        margin-left: -300px;
        margin-top:-700px;
        z-index:0;
    }
    .color_perso{
        width:50px;
        height:50px;
        border:1px solid #000000;
        border-radius:50px;
        margin-right:10px;
        margin-left:10px;
    }
    #color_perso_noir{
        background-color:#222222;
    }
    #color_perso_blanc{
        background-color:#dddddd;
    }
    #color_perso_bois{
        background-color:#48300b;
    }
    #box-blanc, #box-noir, #box-perso{
        display: none;
    }
    #rug-noir, #rug-blanc, #rug-bois, #rug-perso{
        display: none;
    } 
    .desc_couleur{
        text-align:center;
    }
    #bloc-couleurs{
        margin-top:80px;
        overflow:hidden;
    }
    .img-couleur{
        transition: transform 0.5s;
    }
    .img-couleur:hover{
        transform:scale(1.2);
    }


    #cache3{
        max-width: 100vw;
        margin-top:-80px;
    }
    footer{
        background-color:black;
        margin-top:100px;
        padding-bottom:100px;
        z-index:3;
    }
    #cfooter *{
        color:white;
    }
    #cfooter h3{
        font-family: BarrillonNew;
        font-size: 40px;
    }
    #cfooter a{
        text-decoration: underline;
    }
    #cfooter a:hover{
        text-decoration: none;
    }
    #cfooter .ligne_f{
        height:5px;
        width:25%;
        background:white;
        border-radius:50px;
        margin-bottom:20px;
    }
    
    #logo_footer{
        display: block;
        margin: auto;
        max-width:30%;
        padding-bottom:30px;
    }
    #text-bottom-footer{
        color:white;
        text-align:center;
        margin:10px;
    }
    
    
    
    @media(max-width: 768px) {
    
        .container.gallery-container {
            border-radius: 0;
        }
    }

    
  .btn-envoyer{
    text-align:center;
    display:block;
    margin:auto;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    color:white;
    padding: 10px 25px;
    border:4px solid #920A60;
    background-color:#920A60;
    width:15em; 
    border-radius: 50px;
  }
 
  .btn-envoyer:hover{
    background-color: transparent;
    color:#920A60;
  }
  #plus{
    color:#920A60;
    text-decoration: underline;
    display: block;
    margin:auto;
  }
  #plus:hover{
      text-decoration: none;
  }
  #plus-txt{
      display:none;
      text-align:left;
  }
  #validation{
    position:relative;
      display: none;
      margin:auto;
      background-color:#920A60;
      z-index: 10000;
      
  }
  #validation p{
    color:white;
    font-size: 15px;
    text-align:center;
    padding:20px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
    #rgpd{
        display:ruby;
    }
}
#formulaire{
    width:50%;
    display:block;
    margin:auto;
    text-align:center;
}
    /* ------ SLIDER ------*/

    /* Position the image container (needed to position the left and right arrows) */
#slider {
    position: relative;
    width:50%;
  }
  
  /* Hide the images by default */
  .mySlides {
    display: none;
    
  }
  
  /* Add a pointer when hovering over the thumbnail images */
  .cursor {
    cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* Container for image text */
  .caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Six columns side by side */
  .column {
    float: left;
    width: 16.66%;
  }
  
  /* Add a transparency effect for thumnbail images */
  .demo {
    opacity: 0.6;
  }
  
  .active,
.demo:hover {
  opacity: 1;
}