.image-principale-1{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/Sabli-02.png');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 45vh;
}

.class-color-1{
    background-color: white;
    border: 0.5px solid black;
    border-radius: 20px 0px 0px 20px
}

.box-margin{
    margin-bottom: 40px;
}

.projet-description{
    display: flex;
    width: 60vw;
    align-items: baseline;
    justify-content: space-between;
}

.project-description-title{
    width: 30vw;
}

.project-description-text{
    width: 30vw;
}

.project-gallery-image{
    width: 60vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.project-big-image-1{
    margin-bottom: 30px;
    background-image: url('../img/Sabli-01.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}

.project-image-2{
    background-image: url('../img/Sabli-03.png');
    border-radius: 20px;
    width: 24vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-image-3{
    background-image: url('../img/Sabli-04.png');
    border-radius: 20px;
    width: 35vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.video-presentation-section{
    width: 70vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 30px;
    margin-top: -70px;
}

.video-miniature-1{
    background-image: url('../img/PoudreUCB.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 30vw;
    height: 30vh;
}

.video-container-position{
    padding-top: 20px;
    display: flex;
    justify-content: center;
}

.video-container-1{
    border-radius: 20px;
    width: 65vw;
    height: 100%;
}

.video-miniature-2{
    background-image: url('../img/FIFF-01.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 30vw;
    height: 30vh;

}

.video-miniature-3{
    background-image: url('../img/Frewitt.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 30vw;
    height: 30vh;

}

.video-miniature-4{
    background-image: url('../img/ESOSDTU.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 30vw;
    height: 30vh;

}

@media only screen and (max-width : 1024px) {
    .class-color-1{
        height: 30px;
        background-color: white;
        border: 0.5px solid black;
        border-radius: 25px 0px 0px 25px
    }

    .image-principale-1{
        margin: 0 auto;
        border-radius: 20px;
        background-image: url('../img/Sabli-02.png');
        background-position: center;
        background-size: cover;
        width: 80vw;
        height: 45vh;
    }

    .projet-description{
        display: inherit;
        width: 80vw;
        align-items: center;
        justify-content: center;
    }
    
    .project-description-title{
        width: 80vw;
    }
    
    .project-description-text{
        width: 80vw;
    }

    .project-gallery-image{
        width: 80vw;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .project-big-image-1{
        margin-bottom: 30px;
        background-image: url('../img/Sabli-01.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }
    
    .project-image-2{
        background-image: url('../img/Sabli-03.png');
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
        background-position: center;
        background-size: cover;
    }
    
    .project-image-3{
        margin-top: 30px;
        background-image: url('../img/Sabli-04.png');
        border-radius: 20px;
        width: 80vw;
        height: 25vh;
        background-position: center;
        background-size: cover;
    }

    .video-presentation-section {
        width: 80vw;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        margin-bottom: 30px;
        margin-top: -70px;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    
    .video-miniature-1{
        background-image: url('../img/PoudreUCB.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 35vh;
        margin-bottom: 40px;
    }

    .video-miniature-2{
        background-image: url('../img/FIFF-01.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 35vh;
        margin-bottom: 40px;
    }


    .video-miniature-3{
        background-image: url('../img/Frewitt.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 35vh;
        margin-bottom: 40px;
    }


    .video-miniature-4{
        background-image: url('../img/ESOSDTU.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 35vh;
        margin-bottom: 40px;
    }

    .video-container-position{
        padding-top: 0px;
        display: flex;
        justify-content: center;
    }
    
    .video-container-1{
        border-radius: 20px;
        width: 80vw;
        height: 100%;
    }
}


.class-color-1-1{
    background-color: white;
    border-radius: 20px 0px 0px 20px;
    border: solid 0.5px black;
}

.class-color-2-1{
    background-color: white;
    border: solid 0.5px black;
}

.class-color-3-1{
    background-color: white;
    border: solid 0.5px black;
}

.image-principale-2{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/Pastuli.jpg');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 45vh;
}

.image-principale-3{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/FitnessApp.jpg');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 45vh;
}

.image-principale-4{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/BlueH3.png');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 70vh;
}

.image-principale-5{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/Jones.jpg');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 70vh;
}

.image-principale-6{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/Illumals.jpg');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 70vh;
}

.image-principale-7{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/Zollinger3.png');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 70vh;
}

.image-principale-8{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/RemiseTitres02.png');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 70vh;
}

.image-principale-9{
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../img/SFF.png');
    background-position: center;
    background-size: cover;
    width: 60vw;
    height: 70vh;
}




.project-big-image-1-1{
    margin-bottom: 30px;
    background-image: url('../img/Dolcezza-01.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}

.project-image-2-1{
    background-image: url('../img/Dolcezza-02.png');
    border-radius: 20px;
    width: 24vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-image-3-1{
    background-image: url('../img/Dolcezza-03.png');
    border-radius: 20px;
    width: 35vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.class-color-1-2{
    background-color: #FFC46D;
    border-radius:  20px 0px 0px 20px;
    border: 0.5px solid black;
}

.class-color-2-2{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-3-2{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-4-2{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-5-2{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-6-2{
    background-color:white;
    border-radius:  0px 20px 20px 0px;
    border: 0.5px solid black;
}

.class-color-1-3{
    background-color: #FFC46D;
    border-radius:  20px 0px 0px 20px;
    border: 0.5px solid black;
}

.class-color-2-3{
    background-color: #FFC46D;
    border: 0.5px solid black;
}


.class-color-1-4{
    background-color: white;
    border-radius:  20px 0px 0px 20px;
    border: 0.5px solid black;
}

.class-color-2-4{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-3-4{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-4-4{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-5-4{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-6-4{
    background-color:#FFC46D;
    border-radius:  0px 20px 20px 0px;
    border: 0.5px solid black;
}

.class-color-1-5{
    background-color: white;
    border-radius:  20px 0px 0px 20px;
    border: 0.5px solid black;
}

.class-color-2-5{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-3-5{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-4-5{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-5-5{
    background-color: #FFC46D;
    border: 0.5px solid black;
}

.class-color-6-5{
    background-color:#FFC46D;
    border-radius:  0px 20px 20px 0px;
    border: 0.5px solid black;
}

.class-color-1-6{
    background-color: white;
    border-radius:  20px 0px 0px 20px;
    border: 0.5px solid black;
}

.class-color-2-6{
    background-color: #FFC46D;
    border: 0.5px solid black;
}

.class-color-3-6{
    background-color: #FFC46D;
    border: 0.5px solid black;
}

.class-color-4-6{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-5-6{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-6-6{
    background-color: white;
    border-radius:  0px 20px 20px 0px;
    border: 0.5px solid black;
}


.class-color-1-7{
    background-color: white;
    border-radius:  20px 0px 0px 20px;
    border: 0.5px solid black;
}

.class-color-2-7{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-3-7{
    background-color: white;
    border: 0.5px solid black;
}

.class-color-4-7{
    background-color: #FFC46D;
    border: 0.5px solid black;
}

.class-color-5-7{
    background-color: #FFC46D;
    border: 0.5px solid black;
}

.class-color-6-7{
    background-color: #FFC46D;
    border-radius:  0px 20px 20px 0px;
    border: 0.5px solid black;
}

.project-big-image-1-3{
    margin-bottom: 30px;
    background-image: url('../img/FitnessApp-01.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}

.project-image-2-3{
    background-image: url('../img/FitnessApp-02.png');
    border-radius: 20px;
    width: 24vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-image-3-3{
    background-image: url('../img/FitnessApp-03.png');
    border-radius: 20px;
    width: 35vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-big-image-1-4{
    margin-bottom: 30px;
    background-image: url('../img/BLUEH-2.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}

.project-image-2-4{
    background-image: url('../img/BlueH.png');
    border-radius: 20px;
    width: 24vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-image-3-4{
    background-image: url('../img/BlueH3.png');
    border-radius: 20px;
    width: 35vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-big-image-1-5{
    margin-bottom: 30px;
    background-image: url('../img/Jones-02.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}

.project-image-2-5{
    background-image: url('../img/Jones-03.png');
    border-radius: 20px;
    width: 24vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-image-3-5{
    background-image: url('../img/Jones-04.png');
    border-radius: 20px;
    width: 35vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}


.project-big-image-1-6{
    margin-bottom: 30px;
    background-image: url('../img/Illumals-01.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}

.project-image-2-6{
    background-image: url('../img/Illumals-02.png');
    border-radius: 20px;
    width: 24vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-image-3-6{
    background-image: url('../img/Illumals-03.png');
    border-radius: 20px;
    width: 35vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}


.project-big-image-1-7{
    margin-bottom: 30px;
    background-image: url('../img/Zollinger.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}

.project-image-2-7{
    background-image: url('../img/Zollinger-03.png');
    border-radius: 20px;
    width: 24vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-image-3-7{
    background-image: url('../img/Zollinger-04.png');
    border-radius: 20px;
    width: 35vw;
    height: 45vh;
    background-position: center;
    background-size: cover;
}

.project-big-image-1-8{
    margin-bottom: 30px;
    background-image: url('../img/RemiseTitres.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}

.project-big-image-1-9{
    margin-bottom: 30px;
    background-image: url('../img/SFF-02.png');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    width: 60vw;
    height: 70vh;
}


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

    .class-color-1-1{
        height: 30px;
        background-color: white;
        border: 0.5px solid black;
        border-radius: 25px 0px 0px 25px
    }


    .class-color-1-2{
        height: 30px;
        border: 0.5px solid black;
        border-radius: 25px 0px 0px 25px
    }

    .class-color-6-2{
        height: 30px;
        background-color:white;
        border-radius:  0px 20px 20px 0px;
        border: 0.5px solid black;
    }


    .class-color-1-4{
        height: 30px;
        border: 0.5px solid black;
        border-radius: 25px 0px 0px 25px
    }

    .class-color-6-4{
        height: 30px;
        background-color:#FFC46D;
        border-radius:  0px 20px 20px 0px;
        border: 0.5px solid black;
    }


    .class-color-1-5{
        height: 30px;
        border: 0.5px solid black;
        border-radius: 25px 0px 0px 25px
    }

    .class-color-6-5{
        height: 30px;
        background-color:#FFC46D;
        border-radius:  0px 20px 20px 0px;
        border: 0.5px solid black;
    }


  
    .class-color-2-2{
        background-color: white;
        border: 0.5px solid black;
    }

    .class-color-1-3{
        height: 30px;
        background-color: #FFC46D;
        border-radius:  20px 0px 0px 20px;
        border: 0.5px solid black;
    }


    .class-color-1-6{
        height: 30px;
        background-color: white;
        border: 0.5px solid black;
        border-radius: 25px 0px 0px 25px
    }


          
    .class-color-2-6{
        background-color: #FFC46D;
        border: 0.5px solid black;
    }

      
    .class-color-3-6{
        background-color: #FFC46D;
        border: 0.5px solid black;
    }


      
    .class-color-5-6{
        background-color: white;
        border: 0.5px solid black;
    }


    .class-color-6-6{
        height: 30px;
        background-color:white;
        border-radius:  0px 20px 20px 0px;
        border: 0.5px solid black;
    }


    .class-color-1-7{
        height: 30px;
        background-color: white;
        border: 0.5px solid black;
        border-radius: 25px 0px 0px 25px
    }

    .class-color-6-7{
        height: 30px;
        background-color: #FFC46D;
        border-radius:  0px 20px 20px 0px;
        border: 0.5px solid black;
    }

    .project-big-image-1-1{
        margin-bottom: 30px;
        background-image: url('../img/Dolcezza-01.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }
    
    .project-image-2-1{
        background-image: url('../img/Dolcezza-02.png');
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
        background-position: center;
        background-size: cover;
    }
    
    .project-image-3-1{
        margin-top: 30px;
        background-image: url('../img/Dolcezza-03.png');
        border-radius: 20px;
        width: 80vw;
        height: 25vh;
        background-position: center;
        background-size: cover;
    }

    .project-big-image-1-3{
        margin-bottom: 30px;
        background-image: url('../img/FitnessApp-01.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }
    
    .project-image-2-3{
        background-image: url('../img/FitnessApp-02.png');
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
        background-position: center;
        background-size: cover;
    }
    
    .project-image-3-3{
        margin-top: 30px;
        background-image: url('../img/FitnessApp-03.png');
        border-radius: 20px;
        width: 80vw;
        height: 25vh;
        background-position: center;
        background-size: cover;
    }

    .project-big-image-1-4{
        margin-bottom: 30px;
        background-image: url('../img/BLUEH-2.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }
    
    .project-image-2-4{
        background-image: url('../img/BlueH3.png');
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
        background-position: center;
        background-size: cover;
    }
    
    .project-image-3-4{
        margin-top: 30px;
        background-image: url('../img/BlueH.png');
        border-radius: 20px;
        width: 80vw;
        height: 25vh;
        background-position: center;
        background-size: cover;
    }

    .project-big-image-1-5{
        margin-bottom: 30px;
        background-image: url('../img/Jones-02.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }

    .project-image-2-5{
        background-image: url('../img/Jones-03.png');
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
        background-position: center;
        background-size: cover;
    }
    
    .project-image-3-5{
        margin-top: 30px;
        background-image: url('../img/Jones-04.png');
        border-radius: 20px;
        width: 80vw;
        height: 25vh;
        background-position: center;
        background-size: cover;
    }

    .project-big-image-1-6{
        margin-bottom: 30px;
        background-image: url('../img/Illumals-01.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }

    .project-image-2-6{
        background-image: url('../img/Illumals-02.png');
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
        background-position: center;
        background-size: cover;
    }
    
    .project-image-3-6{
        margin-top: 30px;
        background-image: url('../img/Illumals-03.png');
        border-radius: 20px;
        width: 80vw;
        height: 25vh;
        background-position: center;
        background-size: cover;
    }


    .project-big-image-1-7{
        margin-bottom: 30px;
        background-image: url('../img/Zollinger.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }

    .project-big-image-1-8{
        margin-bottom: 30px;
        background-image: url('../img/RemiseTitres.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }

    .project-big-image-1-9{
        margin-bottom: 30px;
        background-image: url('../img/SFF-02.png');
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        width: 80vw;
        height: 30vh;
    }

    .project-image-2-7{
        background-image: url('../img/Zollinger-03.png');
        border-radius: 20px;
        width: 80vw;
        height: 40vh;
        background-position: center;
        background-size: cover;
    }
    
    .project-image-3-7{
        margin-top: 30px;
        background-image: url('../img/Zollinger-04.png');
        border-radius: 20px;
        width: 80vw;
        height: 40vh;
        background-position: center;
        background-size: cover;
    }

    .image-principale-3{
        margin: 0 auto;
        border-radius: 20px;
        background-image: url('../img/FitnessApp.jpg');
        background-position: center;
        background-size: cover;
        width: 80vw;
        height: 45vh;
    }

    .image-principale-4{
        margin: 0 auto;
        border-radius: 20px;
        background-image: url('../img/BlueH3.png');
        background-position: center;
        background-size: cover;
        width: 80vw;
        height: 35vh;
    }

    .image-principale-5{
        margin: 0 auto;
        border-radius: 20px;
        background-image: url('../img/Jones.jpg');
        background-position: center;
        background-size: cover;
        width: 80vw;
        height: 35vh;
    }

    .image-principale-6{
        margin: 0 auto;
        border-radius: 20px;
        background-image: url('../img/Illumals.jpg');
        background-position: center;
        background-size: cover;
        width: 80vw;
        height: 35vh;
    }

    .image-principale-7{
        margin: 0 auto;
        border-radius: 20px;
        background-image: url('../img/Zollinger3.png');
        background-position: center;
        background-size: cover;
        width: 80vw;
        height: 35vh;
    }


    .image-principale-8{
        margin: 0 auto;
        border-radius: 20px;
        background-image: url('../img/RemiseTitres02.png');
        background-position: center;
        background-size: cover;
        width: 80vw;
        height: 25vh;
    }



    .image-principale-9{
        margin: 0 auto;
        border-radius: 20px;
        background-image: url('../img/SFF.png');
        background-position: center;
        background-size: cover;
        width: 80vw;
        height: 25vh;
    }




}


.different-ratio{
    width: 40vw;
    margin-left: 40px;
}


@media only screen and (max-width : 1024px) {
    .different-ratio{
        width: 60vw;
        margin-left: 40px;
    }
}