.wrapper10 {
    width: 100%;
    /*height: 200px;*/
    /*background: white;*/
    margin: auto;
    position: relative;
    overflow: hidden;
    /*border-radius: 10px 10px 10px 10px;*/
    box-shadow: 0;
    transform: scale(0.95);
    transition: box-shadow 0.5s, transform 0.5s;
    background:#e2f5fb;
}

.wrapper10:hover top {
    transform: scale(1);
    box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

.wrapper10 .container1 {
    width: 100%;
    height: 100%;
    background:transparent;
}

.wrapper10 .container1 .top {
    /*height: 80%;*/
    width: 100%;
    /*background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;*/
    /* -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%; */
    background-size:cover;
    background-repeat: no-repeat;
    position: relative;
    background-color: #ffffff;
    /*    border-radius: 10px 10px 10px 10px;*/
    /*box-shadow: 2px 2px 10px #ccc;*/
        aspect-ratio: 1 / 1;
    /*        padding: 10px;*/
    /*margin: 10px auto 0;*/
}
.wrapper10 .container1 .top a {
    height: 100%;
    display: block;
}
.eye{position: absolute; top: 5px; left: 5px; color: #222; display: none; cursor: pointer;}
.eye:hover{color:#555;}
.wrapper10 .container1 .top:hover .eye{display: block;  transition: 0.3s ease-in-out;}
.wrapper10 .container1 .top img {
  /*height:250px;*/
  width: 100%;
  /*width: 250px;*/
  /* background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; */
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  object-fit: contain;
  height: 100%;
}

/*.wrapper10 .container1 .bottom {*/
/*    width: 200%;*/
/*    height: 20%;*/
/*    transition: transform 0.5s;*/
/*    cursor:default;*/
/*}*/

/*.wrapper10 .container1 .bottom.clicked {*/
/*    transform: translateX(-50%);*/
/*}*/

/*.wrapper10 .container1 .bottom h1 {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

/*.wrapper10 .container1 .bottom p {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

/*.wrapper10 .container1 .bottom .left {*/
/*    height: 100%;*/
/*    width: 50%;*/
/*    background: #f4f4f4;*/
/*    position: relative;*/
/*    float: left;*/
/*}*/

/*.wrapper10 .container1 .bottom .left .details {*/
/*    padding: 10px 0 0 15px;*/
/*    float: left;*/
/*    width: calc(70% - 40px);*/
/*}*/

/*.wrapper10 .container1 .bottom .left .buy {*/
/*    float: right;*/
/*    width: calc(30% - 2px);*/
/*    height: 100%;*/
/*    background: #f1f1f1;*/
/*    transition: background 0.5s;*/
/*    border-left: solid thin rgba(0, 0, 0, 0.1);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.wrapper10 .container1 .bottom .left .buy i {*/
/*    font-size: 30px;*/
    /* padding: 30px; */
/*    color: #254053;*/
/*    transition: transform 0.5s;*/
/*}*/

/*.wrapper10 .container1 .bottom .left .buy:hover {*/
/*    background: #2a9df4;*/
/*    color: white !important;*/
/*}*/

/*.wrapper10 .container1 .bottom .left .buy:hover i {*/
/*    transform: translateY(5px);*/
/*    color: #00394B;*/
/*    color: white !important;*/
/*}*/

/*.wrapper10 .container1 .bottom .right {*/
/*    width: 50%;*/
/*    background: #2a9df4;*/
/*    color: white;*/
/*    float: right;*/
/*    height: 231%;*/
/*    overflow: hidden;*/
/*}*/

/*.wrapper10 .container1 .bottom .right .details {*/
    /* padding: 20px; */
/*    float: right;*/
    /* width: calc(70% - 40px); */
    /* display: flex;justify-content: space-between;align-items: center; */
/*}*/

/*.wrapper10 .container1 .bottom .right .done {*/
    /* width: calc(30% - 2px); */
/*    float: left;*/
/*    transition: transform 0.5s;*/
/*    border-right: solid thin rgba(255, 255, 255, 0.3);*/
/*    height: 50%;*/
/*}*/

/*.wrapper10 .container1 .bottom .right .done i {*/
/*    font-size: 30px;*/
    /* padding: 30px; */
/*    color: white;*/
/*}*/

/*.wrapper10 .container1 .bottom .right .remove {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*    width: calc(30% - 1px);*/
/*    clear: both;*/
/*    border-right: solid thin rgba(255, 255, 255, 0.3);*/
/*    height: 50%;*/
/*    background: red;*/
/*    transition: transform 0.5s, background 0.5s;*/
/*}*/

/*.wrapper10 .container1 .bottom .right .remove:hover {*/
/*    background: #9B2847;*/
/*}*/

/*.wrapper10 .container1 .bottom .right .remove:hover i {*/
/*    transform: translateY(5px);*/
/*}*/

/*.wrapper10 .container1 .bottom .right .remove i {*/
/*    transition: transform 0.5s;*/
/*    font-size: 30px;*/
    /* padding: 30px; */
/*    color: white;*/
/*}*/

/*.wrapper10 .container1 .bottom .right:hover .remove,*/
/*.wrapper10 .container1 .bottom .right:hover .done {*/
/*    transform: translateY(-100%);*/
/*}*/

/*.wrapper10 .inside {*/
/*    z-index: 9;*/
/*    background: #92879B;*/
/*    width: 140px;*/
/*    height: 140px;*/
/*    position: absolute;*/
/*    top: -70px;*/
/*    right: -70px;*/
/*    border-radius: 0px 0px 200px 200px;*/
/*    transition: all 0.5s, border-radius 2s, top 1s;*/
/*    overflow: hidden;*/
/*}*/

/*.wrapper10 .inside .icon {*/
/*    position: absolute;*/
/*    right: 85px;*/
/*    top: 85px;*/
/*    color: white;*/
/*    opacity: 1;*/
/*}*/

/*.wrapper10 .inside:hover {*/
/*    width: 100%;*/
/*    right: 0;*/
/*    top: 0;*/
/*    border-radius: 0;*/
/*    height: 80%;*/
/*}*/

/*.wrapper10 .inside:hover .icon {*/
/*    opacity: 0;*/
/*    right: 15px;*/
/*    top: 15px;*/
/*}*/

/*.wrapper10 .inside:hover .contents {*/
/*    opacity: 1;*/
/*    transform: scale(1);*/
/*    transform: translateY(0);*/
/*}*/

/*.wrapper10 .inside .contents {*/
/*    padding: 5%;*/
/*    opacity: 0;*/
/*    transform: scale(0.5);*/
/*    transform: translateY(-200%);*/
/*    transition: opacity 0.2s, transform 0.8s;*/
/*}*/

/*.wrapper10 .inside .contents table {*/
/*    text-align: left;*/
/*    width: 100%;*/
}

/*.wrapper10 .inside .contents h1,*/
/*.wrapper10 .inside .contents p,*/
/*.wrapper10 .inside .contents table {*/
/*    color: white;*/
/*}*/

/*.wrapper10 .inside .contents p {*/
/*    font-size: 13px;*/
/*}*/
/*================================================================================ */
.added{font-size: 12px; margin: 10px 20px; padding: 8px !important;}
.fs-20{font-size: 16px;}
.fs-14{font-size: 14px;}
.border-grey{border: 1px solid grey;}
.categories-box{
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border-image-slice: 1;}
.grams-box{ 
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border-image-slice: 1;
}


@media screen and (max-width: 1320px) and (min-width: 1220px) {
    .categories-box h3{font-size: 19px !important;}
    .categories-box{font-size: 15px !important;}

}

@media screen and (max-width: 1220px) and (min-width: 1100px) {
    .categories-box h3{font-size: 18px !important;}
    .categories-box{font-size: 13px !important;}

}
@media screen and (max-width: 1100px) and (min-width: 990px) {
    .categories-box h3{font-size: 14px !important;}
    .categories-box{font-size: 11px !important;}

}

@media(min-width:1400px){
    .wrapper10 {
        width: 100%;
        height: 100% !important;
        /*background: white;*/
        margin: auto;
        position: relative;
        overflow: hidden;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 0;
        transform: scale(0.95);
        transition: box-shadow 0.5s, transform 0.5s;
    }
    /*.details{*/
    /*    display: flex;*/
    /*    position: relative;*/
    /*    top: 20%;*/
    /*}*/
    /*.done i{*/
    /*    position: relative;*/
    /*    top: 40%;*/
    /*}*/
    /*.padding-e{padding-right: 0rem;}*/
    
}

@media(min-width:1200px){
    /*.wrapper10 {*/
    /*    width: 100%;*/
    /*    height: 300px !important;*/
    /*    background: white;*/
    /*    margin: auto;*/
    /*    position: relative;*/
    /*    overflow: hidden;*/
    /*    border-radius: 10px 10px 10px 10px;*/
    /*    box-shadow: 0;*/
    /*    transform: scale(0.95);*/
    /*    transition: box-shadow 0.5s, transform 0.5s;*/
    /*}*/
    .details{
        display: flex;
        position: relative;
        top: 20%;
    }
    .done i{
        position: relative;
        top: 40%;
    }
    .padding-e{padding-right: 0rem;}
    
}
 
/*@media(min-width: 720px){*/
    .wrapper10 {
        width: 100%;
        height: 100% !important;
        /*background: white;*/
        margin: auto;
        position: relative;
        overflow: hidden;
        /*border-radius: 10px 10px 10px 10px;*/
        /*box-shadow: 2px 2px 10px #ccc;*/
        transform: scale(0.95);
        transition: box-shadow 0.5s, transform 0.5s;
        /*padding: 5px;*/
        
        
            width: 100%;
    height: 100% !important;
    background: white;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 2px 2px 10px #ccc;
    transform: scale(1);
    transition: box-shadow 0.5s, transform 0.5s;
    
    
    
    }
    .details{
        display: flex;
        position: relative;
        top: 20%;
    }
    .done i{
        position: relative;
        top: 40%;
    }
    .wrapper10 .bottom {
        /*padding: 0 30px;*/
        padding: 15px;
            padding: 10px;
    background: #d9f4ff;
    /*margin: 5px 10px;*/
    /*border-radius: 10px 10px 10px 10px;*/
    /*box-shadow: 2px 2px 1px #ccc;*/
    background: #d9f4ff;
    }
    .padding-e{padding-right: 0rem;}
    
/*}*/

@media(min-width: 1200px){
    .wrapper10 {
        width: 100%;
        height: 100% !important;
        background: white;
        margin: auto;
        position: relative;
        overflow: hidden;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 0;
        transform: scale(0.95);
        transition: box-shadow 0.5s, transform 0.5s;
    }
    .details{
        display: flex;
        position: relative;
        top: 1%;
    }
    .done i{
        position: relative;
        top: 8%;
    }
    .padding-e{padding-right: 0rem;}
    
}


@media(max-width: 1000px){
    .categories-box{display: none;}
    .grams-box{display: none;}
    .swiper{height:30vh !important;}
    
}

@media(min-width: 720px){
    body{overflow-x:hidden !important;}
}