body {
            text-align: center;
            margin:0;
            padding:0;
        }
        
#prodwrap {
    overflow: hidden;
    padding-left:17px;
}
     
        

.filter-button
{
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    color: #808080;
    margin-bottom: 10px;
    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: 3px solid #00c2cc;
    border-radius: 5px;
    text-align: center;
    color: #808080;
    margin-bottom: 20px;
    background-color: #fff;
    padding:10px;
}


.btnsizel
{
    font-size: 18px;
    border: 1px solid #ccc;
    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:200px;
    height: 400px;       /*set overall height of product card*/
    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:200px;
    /*display: flex;
  justify-content: center;*/
    height: 200px;
}
        
        .gallery_image img {
            width: 200px;
            max-height: 200px;
            max-width: 200px;
            position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
            object-fit: contain;
        }
        
        .description {
            width: 100%;
            position: absolute;
            top:200px;
            text-align: center;
        }
        
        .description h2 {
            margin:0px;
            padding:0px;
            font-size: 12px;
            padding: 0 3px ;
        }
        
        .description p {
            margin:5px 0 0 0;
            padding: 0 3px ;
            font-size: 14px;
            line-height: 1;
        }
        
        .water {
            position: absolute;
            top:3px;
            left;5px;
        }
        
        .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: 16px;
        }
        
        .option {
            width:100%;
            position: absolute;
            bottom:0px;
            background-color: #000;
        }
.option a {
    text-decoration: none;
}

.option:hover {
            background-color: #555;
        }


        
        .option h4 {
            color:#fff;
            padding:3px;
            margin:0px;
        }

.option h4 a {
            color:#fff;
            padding:3px;
            margin:0px;
        }
        

        
        
        
 
        
        @media only screen and (max-width: 980px) {
            
            #prodwrap {
    padding-left:17px;
                width: 800px;
                max-width: 100%;
                margin:0 auto;
}
            
}
        
        @media only screen and (max-width: 750px) {
               #prodwrap {
                   padding:0;
                width: 520px;
                   max-width: 100%;
}
}
        
        @media only screen and (max-width: 530px) {
   #prodwrap {
            width: 320px;
        } 
            
            .gallery_product
{
    position: relative;
    width:300px;
    height: 300px;       /*set overall height of product card*/
    margin-bottom: 30px;
    margin-left:0px;  /*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);
    position: relative;
    left:-30px;
}
        
        .gallery_image
{
    position: absolute;
    top:0;
    width:300px;
    /*display: flex;
  justify-content: center;*/
    height: 200px;
}
        
        .gallery_image img {
            width: 300px;
            max-height: 300px;
            max-width: 300px;
            position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
            object-fit: contain;
        }
}