#main {
    width: 100%;
    padding-top: 0px;
}

@media only screen and (max-width:1081px) {
               
    .titre {
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 50px;
        }

    .titre-image {
        width: 100%;
        }

    .row {
          display: flex;
          width: 100%;
          margin-bottom: 60px;
          }
    .row-1-1 {
             width: 154%;
             }
    .row-1-2 {
             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: 0px;
           }

    .mail-image {
                width: 100%;
                }
    
    .inspis {
           width:40%;
           margin-left: auto;
           margin-right: auto;
           margin-bottom: 60px;
           position: relative;
           }

    .inspis-image {
                width: 100%;
                position: absolute;
                z-index: 11;
                }
    
    .inspis-gif {
        width: 100%;
        position: absolute;
        opacity: 0;
        z-index: 12;
    }
    
    .figma-image {
                width: 100%;
                position: absolute;
                }
    
    .figma-gif {
        width: 100%;
        position: absolute;
        opacity: 0;
    }

}

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

     .titre {
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 60px;
        }

    .titre-image {
        width: 100%;
        }
    
     .row {
           display: flex;
           width: 100%;
           margin-bottom: 60px;
           }

     .row-1-1 {
               display: flex;
               width: 40%;
               margin-bottom: 0px;
               }

     .row-1-2 {
               display: flex;
               width: 60%;
               margin-bottom: 0px;
               }
    
     .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: 0px;
           }

    .mail-image {
                width: 100%;
                }
    .inspis {
           width:20%;
           margin-left: auto;
           margin-right: auto;
           margin-bottom: 60px;
           position: relative;
           }

    .inspis-image {
                width: 100%;
                position: absolute;
                z-index: 11;
                }
    .inspis-gif {
        width: 100%;
        position: absolute;
        opacity: 0;
        z-index: 12;
    }
    
    .figma-image {
                width: 100%;
                position: absolute;
                }
    .figma-gif {
        width: 100%;
        position: absolute;
        opacity: 0;
    }

}




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

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

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

.digital:hover {
    opacity: 0%;
    transition-duration: 0.4s;
}

.digital-gif {
    width: 100%;
}

.illustration-gif {
    width: 100%;
}

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

.illustration:hover {
    opacity: 0;
}

.photographie-gif {
    width: 100%;
}

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

.photographie:hover {
    opacity: 0;
}

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

.communication-gif {
    width: 100%;
}

.communication:hover {
    opacity: 0;
}

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

.typographie-gif {
    width: 100%;
}

.typographie:hover {
    opacity: 0;
}

.row-2 {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.instagram {
    width: 100%;
}

.youtube {
    width: 100%;
}

.linkedin {
    width: 100%;
}

.giphy {
    width: 100%;
}

.instagram:hover {
    opacity: 0.5;
}

.youtube:hover {
    opacity: 0.5;
}

.linkedin:hover {
    opacity: 0.5;
}

.giphy:hover {
    opacity: 0.5;
}

.inspis-gif:hover {
    opacity: 1;
}