/*---------------------------------------------------------------------
File Name: home.css
---------------------------------------------------------------------*/


/* ----------------------------- */
/* ------- ACCUEIL SITE -------- */
/* ----------------------------- */


#ouverture_site {
     margin-bottom: -64px;
     height: 100vh;
     position: relative;
     top: -64px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
}

#sectiontion {
     overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     mix-blend-mode: color-dodge;
     
}

#ouverture_siteDiv1 {
     position: absolute;
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     overflow: hidden;
}

#ouverture_siteDiv2 {
     position: static;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: center;
     mix-blend-mode: normal;
}

#ouverture_siteDiv3 {
     position: absolute;
     display: block;
     align-self: center;
     left: 48%;
     right: 48%;
     bottom: 0;
     margin-bottom: 50px;
}

#ouverture_siteDiv4 {
     position: absolute;
     width: 100vw;
     height: 100vh;
}


@media screen and (max-width: 500px){
     #logo_home {
          margin-bottom: 20px;
          width: 300px;
     }
}
@media screen and (min-width: 500px){
     #logo_home {
          margin-bottom: 20px;
          width: 450px;
     }
}

#body_container {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
}

#body_container2 {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     margin-bottom: 100px;
}

.title {
     text-align: center;
     margin-top: 60px;
     margin-bottom: 10px;
}

.row_element {
     float: left;
     position: relative;
     overflow: hidden;
}

.row1 {
     flex: 1 1 40%;
     /* border-right: 1px solid; */
     padding-right: 40px;
}

.col1_rows {
     position: relative;
     display: block;
     min-height: 50px;
     width: 100%;
}

.col1_rows1 {
     position: relative;
     display: block;
     min-height: 50px;
     width: 100%;
     cursor: pointer;
     z-index: 10;
}

.col1_subrows {
     margin-left: 10px;
     margin-bottom: 20px;
}

.col1_rows h3:before {
    content: counter(programmation) ". ";
}

.col1_rows h3 {
     counter-increment: programmation;
}

.grid_btn {
     border: solid blue 1px;
     border-radius: 10px;
     padding: 5px;
     text-decoration: none;
     color: rgb(205, 204, 204);
}

.grid_btn:hover {
     color: white;
     background-color: blue;
     mix-blend-mode: color-dodge;
}

#col-2-row-1 {
     margin-top: 50px;
}

.prog_t {
     margin-top: 20px;
     margin-bottom: 20px;
     background-color: black;
     color: white;
}

.prog_p {
     display: none;
     /* margin: 0 60px; */
}

.title_event {
     color: black;
     background-color: white;
}

.title_event:hover {
     color: white;
     background-color: black;
}

.suite_class {
     overflow: hidden;
     height: auto;
     max-height: 32px;
     position: relative;
     top: 0;
     background-color: white;
}

.suite_text {
     color: black;
     text-align: center;
}


/* ------------------------------------------ */
/* ------- SLIDERS CAROUSEL PROJECTS -------- */
/* ------------------------------------------ */

.text-block-1 {
     font-size: 18px;
     font-weight: 400;
     line-height: 24px;
}

.slider-carousel {
     mix-blend-mode: color-dodge;
}

#slider-1 {
     height: 100vh;
}

#slide-1 {
     background-image: url("../media/pictures/totems_1.jpg");
     background-position: 50% 50%;
     background-size: cover;
}

#slide-2 {
     background-image: url("../media/pictures/totems_3.jpg");
     background-position: 50% 50%;
     background-size: cover;
}

#slide-3 {
     background-image: url("../media/pictures/DSC06750_Anas_Allal.jpg");
     background-position: 50% 50%;
     background-size: cover;
}

#slider_nav-1 {
     display: none;
}

#section-2 {
     margin-top: 50px;
     margin-bottom: 100px;
}

#section-3 {
     margin-bottom: 50px;
}

#section3Div1 {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
}

#section-4 {
     margin-top: 50px;
     margin-bottom: 50px;
     overflow: hidden;
}

.image-text {
     display: none;
}

@media screen and (min-width: 1000px) {
     #section4Div1 {
          height: 40vw;
          border-bottom: 1px;
          border-top: 0px;
          border-left: 0px;
          border-right: 0px;
          border-color: white;
          border-style: solid;
          margin-bottom: 50px;
     }

     #columns-1 {
          height: 100%;
          display: grid;
          grid-template-columns: minmax(30%, 50%);
          grid-gap: 40px;
     }

     #col-1 {
          height: 100%;
          width: 100%;
          float: left;
          grid-column: 1;
          grid-row: 1;
          position: relative;
          overflow: hidden;
     }
     
     #col-2 {
          height: 100%;
          width: 100%;
          float: right;
          grid-column: 2;
          grid-row: 1;
          position: relative;
          overflow: hidden;
     }

     #slider-2 {
          height: 75%;
     }
}

@media screen and (max-width: 1000px) {
     #section4Div1 {
          height: 800px;
          border-bottom: 1px;
          border-top: 0px;
          border-left: 0px;
          border-right: 0px;
          border-color: white;
          border-style: solid;
          margin-bottom: 50px;
     }

     #columns-1 {
          height: 100%;
          display: grid;
          grid-template-columns: 100%;
          grid-template-rows: 30% 70%;
          grid-gap: 40px;
     }

     #col-1 {
          height: 100%;
          width: 100%;
          float: left;
          grid-column: 1;
          grid-row: 1;
          position: relative;
          overflow: hidden;
     }
     
     #col-2 {
          height: 100%;
          width: 100%;
          float: right;
          grid-column: 1;
          grid-row: 2;
          position: relative;
          overflow: hidden;
     }

     #slider-2 {
          height: 100%;
     }
}

#slider-2:hover > #slider-2-arrows{
     opacity: 1;
     transition: all .2s;

}

#slider-2-arrows {
     opacity: 0;
}

#slide-4 {
     background-image: url('../media/pictures/supervisions_2.jpg');
     background-position: 50% 50%;
     background-size: cover;
}

#slide-5 {
     background-image: url('../media/pictures/supervisions_1.jpg');
     background-position: 50% 50%;
     background-size: cover;
}

#slider-3 {
     height: 75%;
}

#slider-3:hover > #slider-3-arrows{
     opacity: 1;
     transition: all .2s;

}

#slider-3-arrows {
     opacity: 0;
}

#slide-6 {
     background-image: url('../media/pictures/totems_1.jpg');
     background-position: 50% 50%;
     background-size: cover;
}

#slide-7 {
     background-image: url('../media/pictures/totems_2.jpg');
     background-position: 50% 50%;
     background-size: cover;
}

#slider-4 {
     height: 75%;
}

#slider-4:hover > #slider-4-arrows{
     opacity: 1;
     transition: all .2s;

}

#slider-4-arrows {
     opacity: 0;
}

#slide-8 {
     background-image: url('../media/pictures/danslintimitedunjardin1.jpg');
     background-position: 50% 50%;
     background-size: cover;
}

#slide-9 {
     background-image: url('../media/pictures/danslintimitedunjardin2.jpg');
     background-position: 50% 50%;
     background-size: cover;
}