  body {
            text-align: center;
            margin:0;
            padding:0;
        }
        
        .container {
            background-color: #e6e6e6;
            height: auto;
            overflow: auto;
            margin:0;
            padding:0;
        }
        
        .supp {
            overflow: hidden;
            width: 2090px;
            margin:0 auto;
            text-align: center;
        }
        
     
        

.filter-button
{
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    color: #808080;
    margin-bottom: 20px;
    background-color: #fff;
    padding:10px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #00c2cc;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #00c2cc;

}



.btnsizes
{
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    color: #808080;
    margin-bottom: 20px;
    background-color: #fff;
    padding:10px;
}


.btnsizel
{
    font-size: 18px;
    border: 3px solid #00c2cc;
    border-radius: 5px;
    text-align: center;
    color: #808080;
    margin-bottom: 20px;
    background-color: #fff;
    padding:10px;
}

   
     

.btn-default:active .filter-button:active
{
    background-color: #42B32F;
    color: white;
}

.port-image
{
    width: 100%;
}

.gallery_product
{
    position: relative;
    width:400px;
    height: 520px;
    margin-bottom: 30px;
    margin-left:15px;  /*added*/
    float: left; /*added*/
    text-align: center;
    /*border: solid #000;*/
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
        
        .gallery_image
{
    position: absolute;
    top:0;
    width:400px;
    /*display: flex;
  justify-content: center;*/
    height: 400px;
}
        
        .gallery_image img {
            width: 400px;
            max-height: 400px;
            max-width: 400px;
            position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
            object-fit: contain;
        }
        
        .description {
            width: 100%;
            position: absolute;
            top:400px;
            text-align: center;
        }
        
        .description h2 {
            margin:0px;
            padding:0px;
            font-size: 20px;
            padding: 0 3px ;
        }
        
        .description p {
            margin:3px 0 0 0;
            padding: 0 3px ;
            font-size: 18px;
            line-height: 1;
        }
        
        .water {
            position: absolute;
            top:3px;
            left;3px;
        }
        
        .exschool {
            position: absolute;
            top:-4px;
            right:-4px;
        }
        
        .offer {
            width:100%;
            position: absolute;
            bottom:27px;
            background-color: #00c2cc;
            padding:2px;
        }
        
        .offer h4 {
            color:#fff;
            padding:0px;
            margin:0px;
            font-size: 18px;
        }
        
        .option {
            width:100%;
            position: absolute;
            bottom:0px;
            background-color: #000;
        }

.option:hover {
            background-color: #555;
        }
        
        .option h4 {
            color:#fff;
            padding:4px;
            margin:0px;
        }

.option h4 a {
            color:#fff;
            padding:4px;
            margin:0px;
    text-decoration: none;
        }
        

        
   
        
        @media only screen and (max-width: 2100px) {
   .supp {
            width: 1690px;
        }  
}
        
        
        @media only screen and (max-width: 1770px) {
   .supp {
            width: 1260px;
        }  
}
        
        
    
        
        
        @media only screen and (max-width: 1340px) {
   .supp {
            width: 845px;
        }  
}
        
    
        
        @media only screen and (max-width: 900px) {
   .supp {
            width: 430px;
        }  
}
        
      