/* Hero */

 #imageHero {
    width: 104%;
    cursor: pointer;
  }

  #imageHero:hover{
    border-radius: 4px;
    box-shadow: 1px 1px 5px #cccccc;
    transition: 1.8s;
  }

  #description {
    font-size: 12px;
    font-weight: 700;
    text-align: end;
    
  }

/* Mansonry */

    #audio1{
        margin-right: 18%;
    }

    .modal {
        height: auto; 
    }
    
        /* Mobile */
    @media (max-width: 320px) {
          #description{
             position: absolute;
             top: 19%;
             right: 4%;
             padding-left: 44%;
             font-size: 6px;
         }
     }
    @media (min-width: 321px) and (max-width: 375px) {
          #description{
             position: absolute;
             top: 21%;
             right: 8%;
             padding-left: 44%;
             font-size: 9px;
         }
     }

    @media (min-width: 376px) and (max-width: 476px) {
         #description{
            position: absolute;
            top: 19%;
            right: 8%;
            padding-left: 44%;
            font-size: 10px;
        }
    }

    @media (min-width: 476px) and (max-width: 576px) {
         #description{
            position: absolute;
            top: 26%;
            right: 8%;
            padding-left: 44%;
            font-size: 11px;
        }
    }

        /* Tablette */

     @media (min-width: 577px) and (max-width: 768px) {
          #description{
             position: absolute;
             top: 30%;
             right: 16%;
             padding-left: 56%;
         }
    }
    @media (min-width: 769px) and  (max-width: 992px) {
        #main1 {
            display: block;
        }
        #description{
            position: absolute;
            top: 36%;
            
            padding-left: 56%;
        }
    }
        /* Laptop */
    @media (min-width: 993px) and  (max-width: 1200px){
        #main1 {
            display: block;
        }
        #description{
            position: absolute;
            top: 48%; 
            right: 12%;
            padding-left: 62%;
        }   
        
    }

    @media (min-width: 1201px) and  (max-width: 1400px) {
        #main1 {
            display: block;
        }
        #description{
            position: absolute;
            top: 65%;
            right: 5%;
            
        }   
        
    }

    @media (min-width: 1401px) {
        #main1 {
            display: block;
        }
        #description{
            position: absolute;
            top: 62%;
            right: 8%;
            padding-left: 66%;
        }   
        
    }

    .mybutton {
        width: 100%;
    }

    #main1 {
        display: block ; 
    }


/* Modal */

#grandImg {
    width: 54%;
    position: relative;
    left: 6.5rem;  
    transition-duration: 2s; 
    
}

#grandImg:hover {
    width: 90%;
    position: relative;
    left: 1.5rem; 
    transition-duration: 2s; 
}

/* Footer */

#add {
    color:#000;
  }