@import "style.main.css";

@media (min-width: 1440px){
    .containerB {
        max-width: 1600px;
        padding-left: 164px;
    }
    .card{
        padding: 0% 25%;
    }
    
}

@media (max-width: 1200px){
    .containerB {
    
        padding-left: 18px;
    }
    .d-block{
    
        width:  100%;

        }
        .col{
        max-width: 20%;

        }
        .price{
            bottom: -8%;
        }
        /* .price {
            font-size: 80%;
        }
        .description{
            top: 28%;
            font-size: 80%;
        }
         */  
    }
@media (max-width: 768px){
    .col{
        max-width: 33%;
        
        }

    /* .description{
        font-size:2vw;  
    } */
    .navbar-brand{
        margin: auto;
      }
      .banner {
        height: 90px;
        background-size: cover;
       
       }
       .svg-logo{
        padding-left: 0 !important;
       }
       .containerB {
        
        padding-left: 0px!important;
        padding-right: 0px !important;
        width: 101%;
    }


} 

@media (max-width: 575px) {
    .d-none{
       display: block !important; 
    }

 
}
@media (max-width: 400px) {

    .description{
        font-size:55% !important;  
        line-height: 8px !important;
}
 
}


.card {
    border: none !important;
}
.banner{
    background-image: url("../store/images/store-banner3.jpg");
    background-color: #f5f5f5;
    height: 200px;
    background-position: 50% 37%;
    background-repeat: no-repeat;
    background-size: auto;
    position: relative;
}
.containerB {
    width: 100%;
    padding-right: 18px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flow-root;
}
.col
{
    float:left;
    padding: 0px;
    /* height: 225px; */
    /* height: 100%; */
    height: fit-content!important;
    width: 255px;
    margin-top:0px;
    display: block;
    /* display: flex;   */
    /* border-style: solid;
    border-width: .5px; */
}
.inside-box{
    width: 255px;
    height: 200px;
    content: "";
    display: block;
    background-color:#fff22f;
    align-content: center;
    max-width: 100%;
  
}
.img-thumbnail{
    padding: 0%;
    /* opacity: 0.2; */
    border-radius: 0rem !important;
    border: 1px solid #ddd!important;
}
.jetset-comment{
  
    width: 20px;
    height: 19px;
    background-image: url(../store/images/jetset_desktop_1x.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    display: block;
}
.comment-overlay-icon{

    cursor: pointer;
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
    }
.description{
    display: block;
    position: absolute;
    top: 20%;
    left: 0px;
    padding: 0 10px;
    visibility:hidden;
    font-size:medium;  
    line-height: 20px;
    max-height: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
    
}
/* just for dubugging this need to be delited later*/
/* .inside-box > a > img{ 
    opacity:0.1;
} */
.price{

    display: block;
    position: absolute;
    bottom: -4%;
    left: 4%;
    background-color: white;

}
.d-block{
   
    width: 255px;
   
}
/* .amazon-link{
    width: 100%;
    height: min-content;

} */
.amazon-image{
    width: 100%;
    height: 100%!important;
    display: block;
    height:max-content;
    object-fit:scale-down;
}
div.inside-box > a > img {
    width: 100%;
    height: 100% !important;
    display: block;
    object-fit: scale-down;
    padding: 0%;
    border-radius: 0rem !important;
    border: 1px solid #ddd !important;
    background-color: #fff;
    transition: all .2s ease-in-out;
    max-width: 100%;
}

/* div{
    border-style: solid;
    border-width: 1px;

} */