.d-flex{ display: flex;}
.s-b { justify-content: space-between;}
.s-a {  justify-content: space-around;}
.f-end { justify-content: flex-end;}
.d-none { display: none;}
.t-center { text-align: center;}
.upper { text-transform: uppercase;}
.c-pointer{ cursor: pointer;}




.col-0 { width: 6%; }
.col-1 { width: 8%; }
.col-2 { width: 16%; }
.col-3 { width: 24%; }
.col-4 { width: 33%; }
.col-5 { width: 41%; }
.col-6 { width: 52%; }
.col-7 { width: 58%; }
.col-8 { width: 70%; }
.col-9 { width: 74%; }
.col-10 { width: 83%; }
.col-11 { width: 91%; }
.col-12 { width: 99%; }
.col-13 { width: 102%; }

.ht-1 { width: 5.7%; }
.ht-2 { width: 16%; }
.ht-3 { width: 24%; }
.ht-4 { width: 33%; }
.ht-5 { width: 41%; }
.ht-6 { width: 52%; }
.ht-7 { width: 58%; }
.ht-8 { width: 66%; }
.ht-9 { width: 74%; }
.ht-10 { width: 83%; }
.ht-11 { width: 91%; }
.ht-12 { width: 99%; }
.ht-13 { width: 110%; }

.pr1{ padding-right: 1%;}
.br{ border-radius: 5px;}




/* Small devices */
@media screen and (min-width: 450px) {
    .col-sm-1 { width: 8%; }
    .col-sm-2 { width: 16%; }
    .col-sm-3 { width: 24%; }
    .col-sm-4 { width: 33%; }
    .col-sm-5 { width: 41%; }
    .col-sm-6 { width: 49%; }
    .col-sm-7 { width: 58%; }
    .col-sm-8 { width: 66%; }
    .col-sm-9 { width: 74%; }
    .col-sm-10 { width: 83%; }
    .col-sm-11 { width: 91%; }
    .col-sm-12 { width: 99%; }
    .sm-d-none{ display: none;}
    nav{ padding: 1% 5%;}
    nav .left { margin-top: 3%;}
    .cart{ margin-top: 4%;}
    .logo { margin-top: -2%;}
    .div-ham{ 
        margin-right: -7%; 
    }
    .empty-cart, .empty-cart2{
        min-height: 50vh;
    }
}



/* Medium Devices */
@media screen and (min-width: 700px) {
    .col-md-1 { width: 8%; }
    .col-md-2 { width: 20%; }
    .col-md-3 { width: 24%; }
    .col-md-4 { width: 33%; }
    .col-md-5 { width: 41%; }
    .col-md-6 { width: 49%; }
    .col-md-7 { width: 58%; }
    .col-md-8 { width: 66%; }
    .col-md-9 { width: 74%; }
    .col-md-10 { width: 83%; }
    .col-md-11 { width: 91%; }
    .col-md-12 { width: 100%; }
        
    .md-d-block { display: block;}
    .md-d-none { display: none;}
    nav{ padding: 1% 5%;}
    nav .left { margin-top: 3%;}
    .cart{ padding-top: 7%;}
    .logo { margin-top: -2%;}
    .div-ham{ 
        margin-right: -7%; 
    }
    .btn{ top: 26%;}
    .text{ padding: 3% 5%;}
    .text h5{ font-size: 1.2rem;}
    .text h2{ padding: 3% 0;}
    .text p{ font-size: 1.3rem;}
    .cost{ font-size: 3.5rem;}
    .discount{ font-size: 1.5rem;}
    .old { font-size: 2rem;}
    .value-con{ font-size: 1.5rem;}
    .cart-qty-plus{ font-size: 2.5rem; padding-top: 1%;}
    .cart-qty-minus{ font-size: 3rem;}
    .cart-qty{ font-weight: bold;}
    .button{
         font-size: 1.5rem;
         padding: 4%;
    }
    .foot{ font-size: 1.1rem;}
    .empty-cart, .empty-cart2{
        min-height: 80vh;
        margin-top: 5%;
    }
    .empty-cart2 h4{ font-size: 1.7rem;}
    .empty-cart2 div div p{ font-size: 1.2rem; }
    .btn-check{ font-size: 1.2rem;}
}

/* Large Devices */
@media screen and (min-width: 992px) {
    .col-lg-1 { width: 10%; }
    .col-lg-2 { width: 18%; }
    .col-lg-3 { width: 24%; }
    .col-lg-4 { width: 33%; }
    .col-lg-5 { width: 41%; }
    .col-lg-6 { width: 45%; }
    .col-lg-7 { width: 58%; }
    .col-lg-8 { width: 66%; }
    .col-lg-9 { width: 74%; }
    .col-lg-10 { width: 83%; }
    .col-lg-11 { width: 91%; }
    .col-lg-12 { width: 99%; }

    .lg-d-none { display: none;}
    .lg-d-block{ display: block;}
    .lg-d-flex { display: flex;}
    .lg-jc{ justify-content: flex-start;}
    .pr1{ padding-right: 3%;}

    main{
        width: 80%;
        margin: 0 auto;
    }
    nav{
        padding: 2% 0 0;
        border-bottom: 1px solid #B6BCC8;
    }
    nav .right { padding-top: 2%;}
    .img-flex{ padding: 8% 4%;}
    .slider div img{ border-radius: 10px;}
    .slide-right{
        width: 50%;
        margin: 5% 0 5% 8%;
    }
    .text h5{ font-size: .9rem;}
    .text h2{ font-size: 2.8rem;}
    .text p{ font-size: .9rem;}
    .cost{ font-size: 1.7rem;}
    .discount{
        padding: 5% 2% 0;
        font-size: .9rem;
    }
    .old{ font-size: 1rem;}
    .main-qty{ margin-top: 5%;}
    .cart{ padding-top: 2%;}
    .cart-qty-plus{ 
        font-size: 1.7rem;
        padding-top: 0;
        padding-bottom: 3%;
    }
    .cart-qty-minus{ 
        font-size: 2rem;
        padding-bottom: 3%;
    }
    input{ 
        margin: 0 0 0 40%;
     }
    .quantity{ 
        padding: 0 ;
        width: 50%;
        margin: 0;
        align-items: center;
        justify-content: space-around;
    }
    .button{
        font-size: .95rem;
        margin: 0 5%;
        padding: 8%;
    }
    .foot{ 
        font-size: .7rem;
        padding-top: 5%;
        margin: 2%;
    }
    .empty-cart, .empty-cart2{
        width: 28%;
        min-height: 40vh;
        position: absolute;
        margin: 0;
        top: 20%;
        left: 56rem;
        border-radius: 4%;
        font-family: KumbhSans, sans-serif;
        box-shadow: 2px 15px 30px 8px rgb(199, 194, 194, 0.7);
    }
    .empty-cart2 h4{ font-size: 1rem;}
    .empty-cart2 div div p{ font-size: 1rem; }
    .btn-check{ font-size: 0.8rem;}
    .vcon{
        font-size: .9rem;
        width: 22px;
        bottom: 54%; 
        left: 45%; 
      }
}