#main {
    width: 100%;
}

.entete {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
}

.retour {
    width: 13%;
    position: fixed;
    z-index: 998;
    bottom: 40px;
    right: 15px;
}

.retour-image {
    width: 100%;
}


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

.titre-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    margin-top: 55px;
    margin-left: 10px;
}

.accueil {
    position: absolute;
    top: 0;
    right: 0;
    width: 15%;
    margin-top: 20px;
    margin-right: 25px;
}

.accueil-gif {
    position: absolute;
    top: 0;
    right: 0;
    width: 15%;
    margin-top: 20px;
    margin-right: 25px;
}
    
    .titre-typo {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 100px;
    }    

    .box {
        margin-left: 10px;
        margin-bottom: 8px;
}
    
    .box-3 {
        margin-right: 10px;
    }
       
    .box-6 {
        margin-bottom: 50px;
        margin-right: 10px
    }

    
    .reseaux {
    margin-top: 0px;
    display: flex;
    align-items: flex-start;
    width: 100%;
    }
    
     .reseaux-1 {
         width: 10%;
         height: auto;
         margin-left: auto;
         margin-top: 30px;
     }

     .reseaux-2 {
         width: 10%;
         height: auto;
         margin-top: 30px;
     }

     .reseaux-3 {
         width: 10%;
         height: auto;
         margin-top: 30px;
     }

     .reseaux-4 {
         width: 10%;
         height: auto;
         margin-right: auto;
         margin-top: 30px;
     }
    
    
    .mail {
           width:40%;
           margin-left: auto;
           margin-right: auto;
           margin-bottom: 60px;
           }

    .mail-image {
                width: 100%;
                }
    
}





@media only screen and (min-width:1081px) {
    
    .content {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
.titre-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    margin-top: 15px;
    margin-left: 5px;
}

.accueil {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    margin-top: 15px;
    margin-right: 35px;
}
    
.accueil-gif {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    margin-top: 15px;
    margin-right: 35px;
}    
    
    .titre-typo {
        width: 25%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 60px;
        padding-top: 80px;
    }   
    
    .box {
    margin-left: 30px;
    margin-bottom:30px;
}
    
    .box-3 {
        margin-right: 30px;
    }
    
    .box-6 {
        margin-bottom: 60px;
        margin-right: 30px
    }

        .reseaux {
    margin-top: 0px;
    display: flex;
    align-items: flex-start;
    width: 100%;
    }
    
     .reseaux-1 {
         width: 5%;
         height: auto;
         margin-left: auto;
         margin-top: 30px;
     }

     .reseaux-2 {
         width: 5%;
         height: auto;
         margin-top: 30px;
     }

     .reseaux-3 {
         width: 5%;
         height: auto;
         margin-top: 30px;
     }

     .reseaux-4 {
         width: 5%;
         height: auto;
         margin-right: auto;
         margin-top: 30px;
     }
    
    
    .mail {
           width:20%;
           margin-left: auto;
           margin-right: auto;
           margin-bottom: 60px;
           }

    .mail-image {
                width: 100%;
                }
    
}






.accueil:hover {
    opacity: 0;
}

.titre-typo-image {
        width: 100%;
    }

.grid{
    width: 100%;
    margin-top: 45px;
}


.row {
     display: flex;
     width: 100%;
     }

.box {
    position: relative;
    width: 100%;
    height: auto;
}


.box-carre {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.box-carre:hover {
    opacity: 0;
    transition-duration: 0.3s;
}

.box-carre-gif {
    width: 100%;
}


.box-alter {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.box-alter:hover {
    opacity: 0;
    transition-duration: 0.3s;
}

.box-alter-gif {
    width: 100%;
}

.voeux {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.voeux:hover {
    opacity: 0;
    transition-duration: 0.3s;
}

.voeux-gif {
    width: 100%;
}

.orangebleu {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.orangebleu:hover {
    opacity: 0;
    transition-duration: 0.3s;
}

.orangebleu-gif {
    width: 100%;
}

.inventaire {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.inventaire:hover {
    opacity: 0;
    transition-duration: 0.3s;
}

.inventaire-gif {
    width: 100%;
}

.instagram {
    width: 100%;
}

.instagram:hover{
    opacity: 0.6;
}

.youtube {
    width: 100%;
}

.youtube:hover{
    opacity: 0.6;
}

.linkedin {
    width: 100%;
}

.linkedin:hover{
    opacity: 0.6;
}

.giphy {
    width: 100%;
}

.giphy:hover{
    opacity: 0.6;
}

.pied-de-page {
    background-color: black;
    margin-top: 20px;
    padding-bottom: 5px;
}