/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1000px) {
#sideLeft {
    
    display: none;
}

    #content .pages .bordered {
        border-spacing: 0;
        padding: 0;
        width: 95%;
        margin: 20px 10px;    }


    .sidebar-toggle{
        display: block;
    }
    #wrapper{
        width: 100%;
        border-left: 0;
    }
    #content {
        float: left;
        width: 100%;
        height: 100%;
    }
    #content .main {
        float: left;
        width: 100%;
        margin: 0;
        height: auto;
    }
    #content .main a.item{
        float: none;
        max-width: 100%;
        height: 100%;
        margin: 0;
        display: inline-block;
        width: auto;
    }

    #content .main .item-block{
        display: block;
        float: left;
        width: 25%;
        height: auto;
        margin: 0;
        text-align: center;
    }

    #menu-main-menu{
        display: none;
    }
    #content .menu ul {
        float: none;
        height: auto;
        list-style: none;
        width: 100%;
        margin:0;
    }
    #content .menu .phone {
        display: none;
    }
    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;

    }
    .nav-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #446CB3;
        color: #FFF;
        padding: 0;
        margin: 0;
        cursor: auto;
        font-size: 18px;
        list-style-type: none;
        z-index: 999999;
        box-shadow: 0 5px 5px -5px #333;
        display: block;
    }
    .nav-mobile:after {
        content: "";
        display: table;
        clear: both;
    }
    .nav-mobile svg {
        height: 45px;
        width: 65px;
        padding: 9px;
    }
    .nav-mobile svg path {
        fill: #fff;
    }
    .nav-mobile svg.icon-close {
        display: none;
        padding: 15px;
    }
    .nav-mobile li {
        width: 100%;
        height: 45px;
        line-height: 46px;
        text-align: center;
        float: left;
    }
    .nav-mobile li a {
        display: block;
        color: #fff;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }
    .nav-mobile .menu-button {
        position: absolute;
        top: 0px;
        left: 5px;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
        display: block;
        font-size: 20px;
    }
    .mobile-menu .tel .fa-chevron-down{
        font-size: 10px;
    }
    .mobile-menu .dropdown-content{
        top: 35px;
        right: -50px;
    }
    .nav-mobile .menu-button:after {
        opacity: 0;
        top: px;
        content: "";
        width: 100vw;
        display: block;
        position: fixed;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        content: "";
        z-index: 9;
        pointer-events: none;
        transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
        transition-delay: 0.1s;
    }
    .nav-mobile #menu-toggle {
        display: none;
    }
    .nav-mobile #menu-toggle.active ~ .menu-button .icon-close, .nav-mobile #menu-toggle:checked ~ .menu-button .icon-close {
        display: block;
    }
    .nav-mobile #menu-toggle.active ~ .menu-button .icon-open, .nav-mobile #menu-toggle:checked ~ .menu-button .icon-open {
        display: none;
    }
    .nav-mobile #menu-toggle.active ~ .menu-button:after, .nav-mobile #menu-toggle:checked ~ .menu-button:after {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
    }
    .nav-mobile #menu-toggle.active ~ .menu-sidebar, .nav-mobile #menu-toggle:checked ~ .menu-sidebar {
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
    }
    .nav-mobile .menu-container {
        width: 65px;
        float: left;
        cursor: pointer;
        position: absolute;
    }
    .nav-mobile .menu-container .menu-sidebar {
        box-shadow: 5px 0 5px -5px #333;
        display: block;
        width: 65vw!important;
        bottom: 0;
        color: #333;
        position: absolute;
        z-index: 9999999;
        transform: translateX(-405px);
        transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
        top: 52px;
        list-style-type: none;
        padding: 0;
        max-width: 400px;
        background: url(images/bg-sidebar.png) 0 0 no-repeat;
        background-size: cover;
        min-height: 600px;
    }
    .nav-mobile .menu-container .menu-sidebar .arrow {
        position: absolute;
        line-height: 50px;
        font-size: 32px;
        color: #fff;
        top: 0;
        z-index: 0;
    }
    span.icon-close {
        display: none;
    }
    .nav-mobile .menu-container .menu-sidebar .arrow.left {
        left: 25px;
    }
    .nav-mobile .menu-container .menu-sidebar .arrow.right {
        right: 25px;
    }
    .nav-mobile .menu-container .menu-sidebar li {
        height: 55px;
        line-height: 55px;
        font-size: 16px;
        text-align: left;
        position: relative;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 20px;
    }

    .nav-mobile .menu-container .menu-sidebar li .menu-sub {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        overflow: hidden;
        background: white;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
        border-left: 1px solid #ccc;
        list-style-type: none;
        padding: 0;
        margin: 0;
        z-index: 2;
        max-width: 400px;
        min-height: 600px;
        background: url(images/bg-sidebar.png) 0 0 no-repeat;
        background-size: cover;
    }
    .nav-mobile .menu-container .menu-sidebar li .menu-sub li {
        overflow: hidden;
    }
    .nav-mobile .menu-container .menu-sidebar li .menu-sub .menu-sub-title {
        padding-left: 50px;
    }
    .nav-mobile .menu-container .menu-sidebar li .submenu-label {
        cursor: pointer;
        width: 100%;
        height: 100%;
        display: block;
        color: #fff;
    }
    .nav-mobile .menu-container .menu-sidebar li .submenu-toggle {
        display: none;
    }
    .nav-mobile .menu-container .menu-sidebar li .submenu-toggle.active ~ .menu-sub, .nav-mobile .menu-container .menu-sidebar li .submenu-toggle:checked ~ .menu-sub {
        width: 65vw;
        visibility: visible;
        z-index: 1;
        transition: width 0.35s cubic-bezier(0, 0, 0.3, 1);
    }
    #footer{
        width: 100%;
    }
    #footer .right{
        width: 100%;
        float: left;
        height: auto;
        padding: 20px 0px;
    }
    #footer .left{
        display: none;
    }
    #content .brend {
        float: left;
        width: 68%;
        margin:23px 0 0 11px;
    }
    #content .cat ul li{
        width: 25%;
    }
    #content .stock {
        width: 30%;
    }
    #content .about {

        width: 68%;
        margin: 20px 0 20px 10px;
    }
    #content .main .item-block{
        color: #fff;
    }
    .logo-mobile{
        display: block;
        text-align: center;
    }
    .logo-mobile img{
        width: 69px;

    }
    .mobile-menu .tel {
        position: absolute;
        right: 70px;
        top: 17px;
    }
    .item-home-brend{
        display: none;
    }
    .mobile-menu .tel i{
        font-size: 25px;
    }
    .mobile-menu .tel i{
        font-size: 25px;
        color: #fff;
    }
    .contact-mobile {
        position: absolute;
        right: 20px;
        top: 14px;
    }
    .contact-mobile i{
        font-size: 25px;
        color: #ffffff;
    }
    .mobile-menu {
        display: block;
    }
    #content .pages {
        width: 100%;
        margin: 24px 0 0px 0px;
    }

    #footer .right .phone{
        display: block;
        float: left;
        width: 33%;
        padding: 0;
        background: none;
        margin: 0;
        font-size: 20px;
        padding-top: 5px;
        text-align: center;
    }
    #footer .right .phone i {
        font-size: 25px;
        padding-right: 10px;
        display: inline-block;
    }
    .footer-contact {
        float: left;
        width: 33%;
        display: block;
    }
    .footer-contact .adress {
        font-size: 14px;
    }
    .footer-contact .adress i {
        font-size: 25px;
        padding-right: 10px;
    }
    .yashare-auto-init {
        float: left;
        margin: 0;
        width: 33%;
        text-align: center;
        padding-top: 6px;
    }
    .ds-none{
        display: none;
    }
    #content .menu{
        position: fixed;
        z-index:1000;
    }
    #footer{
        margin: 0 ;
        height: auto;
    }
    #content .main a.item{
        color: #fff;
    }
    .cat_title {
        font-size: 22px;
        text-align: center;
        color: #fff;
        margin: 20px 0;
    }
    .home-brend{
        width: 100%!important;
        margin: 0!important;
    }
    #content .cat {
        position: relative;
        float: left;
        width: 100%;
        margin: 30px 0 30px;
    }
    #content .about p {

        text-align: justify;
    }
    #footer .right .phone a{
        color: #3e4240;
        text-decoration: none;

    }
    .footer-contact .adress a {
        color: #3e4240;
        text-decoration: none;
    }

    .row {
        margin-right: 15px;
        margin-left: 15px;
        margin-top: 55px
    }
    .home-brend{
    }

    .col {
        position: relative;
        min-height: 1px;
        padding: 0px 10px;
        width: 31%;
        float: left;
        margin: 20px 0px 0px 0px;
    }
    #content .category {
        width: 100%;
        min-height: 330px;
        height: 100%;
        padding-bottom: 20px;
        margin: 0;
    }
    #content .category .type {
        float: none;
        width: 100%;
        display: block;
        padding: 20px 0px;
    }
    #content .category .packing {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        display: block;
        margin:10px 0;
    }
    #content .cat ul{
        text-align: center;
        float: none;
    }
    #content .category .price {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-weight: bold;
        display: block;}
    #content .category .read-more {
        position: relative;
        right: 0;
        bottom: 0;
        text-align: center;
    }
    #content .category h2 {
        float: none;
        min-height: 30px;}

    #wrapper{
        background-size: contain;
    }
    #home-brend .accordion {
        padding: 0 10px;
        margin: 0 auto;
        list-style: none outside;
        float: left;
        display: block;
    }
    .accordion-item {
        display: block;
    }
    #home-brend .accordion > * + * { border-top: 1px solid white; }

    #home-brend .accordion-item-hd {
        display: block;
        padding: 15px 5px 15px 20px;
        position: relative;
        cursor: pointer;
        font-size: 22px;
        font-weight: bold;
        color: #3e4240;
        background: #ebe3dd;
        opacity: 0.8;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
    }

    #home-brend .accordion-item-input:checked ~ .accordion-item-bd {
        max-height: 1000px;
        padding-top: 0;
        margin-bottom: 15px;
        -webkit-transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
        transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
    }

    #home-brend .accordion-item-input:checked ~ .accordion-item-hd > .accordion-item-hd-cta {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    #home-brend .accordion-item-hd-cta {
        display: block;
        width: 30px;
        position: absolute;
        top: calc(50% - 6px );
        /*minus half font-size*/
        right: 0;
        pointer-events: none;
        -webkit-transition: -webkit-transform .3s ease;
        transition: transform .3s ease;
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg);
        text-align: center;
        font-size: 12px;
        line-height: 1;
    }

    #home-brend .accordion-item-bd {
        max-height: 0;
        margin-bottom: 0;
        overflow: hidden;
        -webkit-transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
        transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
    }

    #home-brend .accordion-item-input {
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        left: -9999px;
    }
    .error{
        margin: 50px 0;
    }
    #content .pages ol {
        margin: 0 0 0 9px;
        width: 99%;
        padding: 15px 15px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}
@media only screen and (max-width : 900px) {
    #content .category {
        width: 100%;
    }
    #content .category .type {
        float: none;
        width: 100%;
        display: block;
    }
    #content .category .packing {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        display: block;
        margin:10px 0;
    }
    #content .category .price {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-weight: bold;
        display: block;}
    #content .category .read-more {
        position: relative;
        right: 0;
        bottom: 0;
        text-align: center;
    }
    .col {
        width: 30%;

    }
    #content .brend {

        margin: 22px 0 0 9px;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 801px) {
    #content .brend {
        width: 100%;
        margin: 0;
        height: auto;
        margin-bottom: 40px;
    }

    #content .stock {
        width: 100%;
        margin: 0;
        height: auto;
        margin-bottom: 40px;

    }

    #content .about {
        width: 100%;
        margin: 0;
        height: auto;
        margin-bottom: 40px;
        margin-top: 30px;

    }

    #content .main {
        margin-bottom: 50px;
    }

    #home-brend-home .accordion {
        padding: 0 10px;
        margin: 0 auto;
        list-style: none outside;
        float: left;
        display: block;
    }

    #home-brend-home .accordion > * + * { border-top: 1px solid white; }
    .item-home-brend{
        display: none;
    }
    #home-brend-home .accordion-item-hd {
        display: block;
        padding: 15px 5px 15px 20px;
        position: relative;
        cursor: pointer;
        font-size: 22px;
        font-weight: bold;
        color: #3e4240;
        background: #ebe3dd;
        opacity: 0.8;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
    }

    #home-brend-home .accordion-item-input:checked ~ .accordion-item-bd {
        max-height: 1000px;
        padding-top: 0;
        margin-bottom: 15px;
        -webkit-transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
        transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
    }

    #home-brend-home .accordion-item-input:checked ~ .accordion-item-hd > .accordion-item-hd-cta {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    #home-brend-home .accordion-item-hd-cta {
        display: block;
        width: 30px;
        position: absolute;
        top: calc(50% - 6px );
        /*minus half font-size*/
        right: 0;
        pointer-events: none;
        -webkit-transition: -webkit-transform .3s ease;
        transition: transform .3s ease;
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg);
        text-align: center;
        font-size: 12px;
        line-height: 1;
    }

    #home-brend-home .accordion-item-bd {
        max-height: 0;
        margin-bottom: 0;
        overflow: hidden;
        -webkit-transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
        transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
    }

    #home-brend-home .accordion-item-input {
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        left: -9999px;
    }








    #content .brend ul li {
        margin: 5px;
        display: inline-block;
    }

    #content .stock .item {
        float: left;
        width: 33%;
        margin: 17px 0px;
        height: auto;
    }
    #content .stock .item img{
        padding-left: 10px;
    }
}
@media only screen and (max-width : 751px){
    #content .main .item-block{
        width: 50%;
        margin-top: 50px;

    }
    .col {
        position: relative;
        min-height: 1px;
        width: 46%;
        float: left;
        margin: 20px 0px 0px 0px;
    }


}
@media only screen and (max-width : 680px) {
    #content .stock .item{
        text-align: center;
    }
    #content .stock .item img{
        float: none;
        display: inline-block;
    }
    #content .stock .item  h3{
        float: none;
        width: 100%;

    }
    #content .stock .item .date{
        float: none;
        display: block;
        width: 100%;
    }
    .footer-contact{
        width: 100%;
        text-align: center;
        margin-top: 14px;
    }
    .yashare-auto-init{
        width: 100%;
    }
    #footer .right .phone{
        width: 100%;
    }
    .col {

        width: 45%;  }
    #footer .right .phone a{
        padding-bottom: 8px;
    }

}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 580px) {
    #content .pages table img {
        /* text-align: center; */
        width: 80px;
        height: 80px;
    }
    #content .pages table a img {
        /* text-align: center; */
        width: 50px;
        height: 50px;
    }
    #content .pages .bordered td, .bordered th{
        padding: 0;
    }
    .col-bg .category {
        width: 70%!important;
        height: 75px!important;
        margin: 20px 0 10px 24px!important;
        min-height: 55px!important;
    }
}


@media only screen and (max-width : 480px) {
    #content .main .item-block{
        width: 50%;
        margin-bottom: 0;
    }
    #content .main .item-block img{
        max-width: 130px;
    }
    #content .cat ul li {
        width: 100%;
        padding: 5px 0px;
    }
    .col {
        width: 70%;
        padding: 0;
        margin-left: 70px;

    }
}
@media only screen and (max-width : 480px) {
    #content .pages .bordered td, .bordered th{
        font-size: 11px;
    }
    #content .pages table p{
        font-size: 10px;
    }
    #content .pages .bordered td, .bordered th {
        font-size: 9px;
    }
    #gallery-1 .gallery-item {

        width: 100%;
    }
    .alignright {
        float: none;
        max-width: 100%;
        margin-bottom: 25px;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 380px) {
    .col {
        width: 90%;
        padding: 0;
        margin-left: 20px;

    }

.col-bg .category {
    width: 80%!important;
 
}
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {


}


/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {


}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}