#hero {
    display: flex;
    justify-content: center;
    /*background-color: #282d32;*/
    max-width: 100%;
}
.parallax-container{
    width: 100%;
}

.parallax-base{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.layer6
{
    object-fit: cover;
    width: 100vw;
}

.layer1,
.layer2,
.layer3,
.layer4,
.layer5
{
    width: 115vw;
    position: absolute;
}

.retouch{
    width: 95%;
}

.parallax-base {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}


.layer1{
    top:-15%;
    z-index: 5000;

}
.layer2{
    top:-10%;
    z-index: 4000;
}
.layer3{
    top:-10%;
    z-index: 3000;
}

.layer4{
    top:-70%;
    display: flex;
    justify-content: center;
    z-index: 6000;
}
.layer5{
    top:-10%;
    z-index: 1000;
}

.layer6{
    height: 80vh;
}
.layer7{
    top:75%;
    left: 3%;
    position: absolute;
    z-index: 1000000;
    padding: 3px;
}
.layer7-link{
    padding: 3px;
    text-decoration: none;
}
.layer8-link{
    text-decoration: none;
}
.element-btn-link{
    border-radius: 5px 5px 5px 5px;
    border: 2px solid #32769b;
    background-color: #32769b;
    padding: 4px;
    width: 250px;
    transition: all .5s;
}
.element-btn-link:hover{
    border: 2px solid #0d9ff8;
    background-color: #0d9ff8;
    padding: 4px;
    border-radius: 5px 5px 5px 5px;
}
.f-flex{
    width: 220px;
    margin-bottom: 0;
    transition: all .5s;
}
.f-flex:hover{
    margin-left: 20px;
    transition-duration: 1s;
}

.layer8 {
    top: 6%;
    left: 3%;
    position: absolute;
    z-index: 1000000;
    border-radius: 10px 10px 10px 10px;
    padding: 3px;
}
.layer9{
    position: absolute;
    z-index: 1000000;
    bottom: 6%;
    left: 3%;
    display: none;
}

.flex-mouve:hover{
    margin-left: 5px;
    transition-duration: 1s;
}

.home-title{
    color: white;
}
.pad-t{
    padding-top: 10px;
}

.parallax-mobile,
.parallax-base-device{
    display: none;
}
.layer-link1{
    text-decoration: none;
    background-color: #f80d0d;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 5px 5px 5px 5px;
    display: flex;
    justify-content: center;
    width: 120px;
    box-shadow: 0 1px 1px 1px #e13d3d;
}
@media screen and (max-width: 1320px) {

    .layer7{
       top: 55%;
    }
    .s-size{
        font-size: 20px;
    }
}

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

    .layer1{ /*premier plan*/
        top:5%;
        z-index: 5000;
        left: -8%;

    }
    .layer2{ /*2 plan*/
        top:8%;
        left: -5%;
        z-index: 4000;
    }
    .layer3{ /*3 plan*/
        width: 130vw;
        top:0%;
        left: -15%;
        z-index: 3000;
    }

    .layer4{ /*3 logo*/
        top: -35%;
        display: flex;
        justify-content: center;
        width: 100vw;
        z-index: 6000;
    }
    .layer5{ /*3 fond*/
        top:-10%;
        left: -20%;
        z-index: 1000;
        width: 140vw;
        height: 60vh;
    }
    .layer6{
        height: 70vh;
    }
    .layer7,
    .layer8{
        display: none;

    }
    .parallax-mobile{
        position: absolute;
        z-index: 1000000;
        top:50%
    }
    .layer9{
        display: block;
    }
}


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

    .layer1{ /*premier plan*/
        top:5%;
        z-index: 5000;
        left: -8%;

    }
    .layer2{ /*2 plan*/
        top:8%;
        left: -5%;
        z-index: 4000;
    }
    .layer3{ /*3 plan*/
        width: 130vw;
        top:0%;
        left: -15%;
        z-index: 3000;
    }

    .layer4{ /*3 logo*/
        top: -35%;
        display: flex;
        justify-content: center;
        width: 100vw;
        z-index: 6000;
    }
    .layer5{ /*3 fond*/
        top:-10%;
        left: -20%;
        z-index: 1000;
        width: 140vw;
        height: 60vh;
    }
    .layer6{
        height: 40vh;
    }
    .layer7,
    .layer8{
        display: none;

    }
    .parallax-mobile{
        position: absolute;
        z-index: 1000000;
        top:50%
    }
    .layer9{
        display: block;
    }

}

@media screen and (max-width: 500px) {
    .layer1{ /*premier plan*/
        top:20%;
        z-index: 5000;
        left: -8%;

    }
    .layer2{ /*2 plan*/
        top:18%;
        left: -7%;
        z-index: 4000;
    }
    .layer3{ /*3 plan*/
        width: 130vw;
        top:18%;
        left: -15%;
        z-index: 3000;
    }

    .layer4{ /*3 logo*/
        top:-55%;
        display: flex;
        justify-content: center;
        width: 230vw;
        z-index: 6000;
    }
    .layer5{ /*3 fond*/
        top:-10%;
        left: -20%;
        z-index: 1000;
        width: 140vw;
        height: 60vh;
    }
    .layer6{
        height: 40vh;
    }
    .layer7,
    .layer8{
        display: none;

    }
    .parallax-mobile{
        position: absolute;
        z-index: 1000000;
        top:50%
    }
    .layer9{
        display: block;
    }


}