﻿.@media (max-width: 1200px){
.loop>div{
    width: 33.333%;
}
#container{
    width: 90%;
}
    
} 
@media (max-width: 890px){
h1{
    font-size: 1.8em;
    font-weight: 600;
}
h2{
    font-size: 1.55em;
    font-weight: 600;
}
h3{
    font-size: 1.4em;
    font-weight: 600;
}
h4{
    font-size: 1.15em;
    font-weight: 600;
}
#container{
    width: 95%;
}
#container-header{
    width: 97%;
}
#load{
    z-index: 400;
}
.header>a>svg{
    width: 75px;
}
.burger-menu{
    display: inherit;
    margin-right: 8px;
}
.header-height{
    height: 50px;
}
.header-user{
    padding: 0;
}
.header-user span{
    display: none;
}
.item-container{
    width: 100%;
    padding-left: 0em;
    border:0;
}
textarea{
    height: 6em;
}
aside{
    width: 80%;
    position: fixed;
    left: 0;
    top: 50px;
    border-right: none;
    min-height: inherit;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    overflow: hidden;
}
.aside-content::-webkit-scrollbar { 
    display: none; 
}
.aside-content{
    height: calc(100% - 60px);
    overflow: auto;
    -webkit-overflow-scrolling: auto;
}
.aside-active{
	-webkit-transform:translateX(-101%);
	transform:translateX(-101%);
}
.menu-tree{
    font-size: 1em;
    width: 100%;
}
.nav-title{
    font-size: 0.85em;
}
.loop{
   border-left: var(--border);
}
.loop>div{
    width: 50%;
}
.search-container{
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    min-height: 45vh;
    text-align: center;
    padding: 2.5em 0 1.5em 0;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
	-webkit-transform:translateY(-105%);
	transform:translateY(-105%);
    opacity:1;
	-webkit-transition:opacity 0.6s ease,-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,transform 0.5s cubic-bezier(0.9, 0, 0.175, 1),-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1)
}
.search-active{
	-webkit-transform:translateY(0%);
	transform:translateY(0%);
	opacity:1;
	-webkit-transition:opacity 0.6s ease,-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,transform 0.5s cubic-bezier(0.9, 0, 0.175, 1),-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1)
}
.search-bar{
    width: 90vw;
}
.search-container input{
    width: 100%;
    padding: 0.8em 1em;
}
.search-results{
    width: 90vw;
    text-align: left;
}

.search-container h4{
    margin-top: 0.6em;
}
.search-suggestion{
    width: 90vw;
}
.index-banner,
.index_banner{
    height: 55vh;
   
}
.index-banner-logo{
    width: 110px;
    right: 1em;
    left: inherit;
    bottom: 2.5em;
}
.promotion li{
    width: 100%;
    margin-bottom: 1em;
}
.header-search{
    display: inherit;
}
.header-search-desk{
    display: none;
}
.index-search-suggestion{
    width: 100%;
}
.close-menu{
    height: 40px;
    width: 40px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    right: 7px;
    top: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.view-product-img{
    width: 100%;
}
.view-product-details{
    width: 100%;
    padding: 0.5em 0.5em 2em 0.5em;
}
.view-product-details div.price{
    margin: 1em 0 1.6em 0;
}
.view-submit{
    text-align: center;
}
.view-product-spec,
.view-product-pdf{
    border-top: var(--border);
    padding: 2em 0.5em;
}
.view-product-suggest h4{
    padding-left: 0;
}
.cart{
    margin-top: 0em;
}
.cart-line{
    border-bottom: var(--border);
}
.cart-desc,
.order-desc{
    display: none;
}
.cart-list,
.order-list{
    padding: 1em 0.2em;
    align-items: flex-start;
}
.cart-model{
    width: 100%;
    line-height: 1.3;
}
.cart-uprice{
    display: none;
    width: 100%;
    text-align: left;
    margin-right: 0%;
}
.cart-qty{
    width: 100%;
    text-align: left;
    justify-content: left;
    margin: 0.8em 0;
}
.cart-tprice{
    width: 100%;
    text-align: left;
}
.cart-mobile-details{
    width: calc(100% - 115px)
}
.cart-img{
    display: flex;
    align-items: center;
    width: 115px;
}
.cart-img div:nth-child(2){
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.5em
}
#empty_cart{
    display: none;
}
.cart-gtotal-container{
    justify-content: flex-end;
    padding: 2.5em 0.5em 2.5em 1em;
}
.select-brand>div{
    width: 48%;
    margin: 1%;
}
.select-brand>div>a{
    height:60px;
}
.index-search{
    width: 98%;
}
.index-search input{
    width: 100%;
    font-size: 1.2em;
    padding: 0.8em 1em;
}
.search-results-index{
    width: 100%;
}
.checkout-sales,
.checkout-location,
.checkout-summary,
.checkout-remark{
    padding: 3em 0.5em;
}
.checkout-delivery{
    padding: 1em 0 0 0;
}
.sales-name{
    display: block;
}
.labl {
    display : block;
    width: 48%;
}
.checkout-summary>div{
    width: 100%;
}
.summary-split div:nth-child(1){
    padding-left: 0em;
}
.summary-split div:nth-child(2),
.checkout-summary h4,
.summary-btn{
    padding-right: 0em;
}
.order-left{
    width: 100%;
    display: inherit;
    font-weight: 600;
    margin-bottom: 0.5em;
}
.order-right{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items:flex-start;
}
.order-item{
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.5em;
}
.order-date{
    width: 50%;
    text-align: left;
    color: #666;
}
.order-status{
    width: 50%;
    text-align: right;
}
.order-total{
    width: 100%;
    margin-top: 0.5em;
}
.view-info{
    border-bottom: var(--border);
}
.view-list{
    align-items: flex-start;
    padding: 0.8em 0.5em;
}
.view-img{
    width: 70px;
    height: 70px;
    margin-right: 10px;
    align-items: flex-start;
}
.view-item{
    width: calc(100% - 80px);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.view-desc{
    display: none;
}
.view-model{
    width: 100%;
    margin-right: 0em;
}
.view-various{
    width: 50%;
    margin: 0.5em 0;
    color: #555;
}
.view-quantity{
    width: 50%;
    text-align: right;
    margin: 0.5 0em;
}
.view-uprice{
    width: 50%;
    text-align: left;
    color: #555;
}
.view-total{
    width: 50%;
    text-align: right;
}
.view-grand{
    width: 90%;;
    display: flex;
    padding: 1em 0.5em;
}
.view-btn{
    padding: 1.5em 0.5em;
}
.view-status .vo-badge{
    display: block;
}
.plogo{
    top: 0.7em;
    left: 0.7em;
    height: 18px;
}
.plogo-viewp{
    left: 0.6em;
    height: 28px;
}
#cart-empty,
#order-empty{
    width: 100%;
    text-align: center;
    padding-top: 23vh;
    border-top: none;
}
.user-navigator{
    top: 46px;
    right: 0px;
}
.user-navigator a{
    display: block;
    border-bottom: var(--border);
    font-weight: 600;
    padding: 0.8em 0.8em;
    color: var(--fontcolor);
}
.my-account{
    width: 100%;
    padding: 1em 0 3em 0;
    max-width: inherit;
}
.wapp{
    position: fixed;
    width: 55px;
    z-index: 500;
    bottom: 1.5em;
    right: 1.5em;
    border-radius: 70px;
    transition: 0.3s;
}
.wapp-ask{
    right: 63px;
    top: 13px;
}
.footer-container{
    font-size: 0.95em;
}
.footer-1{
    width: 100%;
    text-align: center;
    margin-bottom: 2em;
}
.footer-2{
    width: 100%;
    display: block;
    justify-content: flex-start;
}
.footer-2 ul{
    margin-left: 0em;
}
.footer-2 li{
    border-bottom: #333 1px solid;
    padding-left: 0.5em;
}
.footer-container h4{
    padding-left: 0.5em;
    padding-top: 1.5em;
    padding-bottom: 0.3em;
}
.footer-3{
    width: 100%;;
    text-align: center;
    margin-top: 1em;
}
.footer-4{
    width: 100%;
    text-align: center;
    margin-top: 1em;
    font-size: 0.9em;
}
img.banner-img{
   width: 85vw;
   height: auto;
}
.more-products{
    display: inherit;
}
.filter-container{
    display: inherit;
	padding: 0.5em 0.8em;
}
.filter-container form.form-mobile{
	display: none;
	margin-top: 0.5em;
}
.filter-desc>div.filter-click{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 34px;
	height: 24px;
	color: var(--themecolor);
	transition: transform 0.2s;
}
.filter-clicked{
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
}
.filter-desc{
	margin-right: 0;
}
.filter-slide{
	display: block;
}
.filter-slide i.divider{
	display: none;
}
	.filter-slide>label{
		margin-left: 0.3em;
	}
.filter-slide>div{
	width: 80%;
	display: block;
	text-align: center;
	margin-left: 0.6em;
}
.filter-slide>div>div:nth-child(1){
	width: 100% !important;
	margin-left: 0em;
	margin-right: 0em;
	margin-top: 1.4em;
	margin-bottom: 0.6em
}
.filter-slide>div>div:nth-child(2){
	font-weight: 600;
	font-size: 0.9em;
}

    
}