﻿:root{
    --themecolor: #C10000;
    --themehover: #D70000;
    --font: 'Inter', sans-serif;
    --fontcolor: #252525;
    --border: #ddd 1px solid;
    --price: #B21F22;
}
html{
    width: 100%;
    height: 100%;
}
body{
    font-family: var(--font);
    color: var(--fontcolor);
    font-weight: 400;
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  	-ms-text-size-adjust:100%;
  	-webkit-text-size-adjust:100%;
  	-webkit-font-smoothing:antialiased;
  	-moz-osx-font-smoothing:grayscale;
  	text-rendering:optimizeLegibility;
    box-sizing: border-box;
    background: #151515;
}
main{
    background: #fff;
}


a{
    color: var(--themecolor);
    text-decoration: none;
}
a:hover{
    color: var(--themehover);
    text-decoration: none;
}
h1{
    font-size: 2em;
    font-weight: 600;
}
h2{
    font-size: 1.75em;
    font-weight: 600;
}
h3{
    font-size: 1.5em;
    font-weight: 600;
}
h4{
    font-size: 1.25em;
    font-weight: 600;
}
h5{
    font-weight: 700;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea{
    font-family: var(--fonts);
    font-size: 1em;
    color: var(--fontcolor);
    line-height: 1em;
    padding: 0.7em 0.8em;
    border: #bbb 1px solid;
    border-radius: 4px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
    background: #fff;
    -webkit-transition: border-color .2s ease-in-out;
    -moz-transition: border-color .2s ease-in-out;
    -o-transition: border-color .2s ease-in-out;
    transition: border-color .2s ease-in-out;
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

textarea{
    line-height: 1.5em;
}
input:focus,
select:focus,
textarea:focus{
    outline: none;
    border: #999 1px solid;
}
input::placeholder,
textarea::placeholder{ 
  color: #aaa;
  opacity: 1; 
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{ 
  color: #aaa;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder{ 
  color: #aaa;
}
select{
    width: 100%;
    font-family: var(--fonts);
    font-size: 1em;
    color: var(--fontcolor);
    line-height: 1.2;
    padding: 0.7em 0em;
    border: #bbb 1px solid;
    border-radius: 4px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14 9" style="enable-background:new 0 0 14 9;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:%23666666;%7D%0A%3C/style%3E%3Cpolygon class="st0" points="7,8 1,1 13,1 "/%3E%3C/svg%3E');
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
    cursor: pointer;
    -webkit-transition: border-color .2s ease-in-out;
    -moz-transition: border-color .2s ease-in-out;
    -o-transition: border-color .2s ease-in-out;
    transition: border-color .2s ease-in-out;
}
button.btn,
button{
    outline: none;
    padding: 0.7em 1.3em;
    min-width: 110px;
    font-size: 0.9em;
    border: none;
    background: var(--themecolor);
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 600;
}
button.btn:hover,
button:hover{
    background: var(--themehover);
    outline: none;
}
button.btn:focus,
button:active,
button:focus{
    background: var(--themehover);
    outline: none;
}
button.btn:active

hr{
    background: #ddd;
    height: 1px;
    border: none;
    margin: 0.5em 0;
}
.form-group{
    margin: inherit;
}
.form-group label{
    font-weight: 600;
    margin-bottom: 0.2em;
    display: block;
    margin-top: 1em;
}
.form-group input,
.form-group textarea{
    width: 100%;
    box-sizing: border-box;
}

header{
    background: rgba(255,255,255,0.90);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: rgba(221,221,221,1) 1px solid;
    position: fixed;
    top: 0;
    z-index: 500;
}
#header-block{
    background: #fff;
}
#container,
#container-header{
    width: 85%;
    max-width: 1600px;
    margin: auto;
    position: relative;
}
#load{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 499;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.40);
}
.header-height{
    height: 54px;
}
.header{
    display: flex;
    align-content: center;
    justify-content: center;
    position: relative;
}
.header>a>svg{
    fill: #ff0000;
    width: 85px;
    margin-top: 5px;
}
.header-menu{
    width: auto;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-user-cart{
    width: auto;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
}
.header-user-cart svg,
.header-menu svg{
    width: 24px;
    fill: #252525;
}
.header-cart,
.header-search,
.header-search-desk,
.burger-menu{
    height: 40px;
    width: 40px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}
.header-user:hover,
.header-cart:hover,
.header-search:hover,
.header-search-desk:hover,
.burger-menu:hover,
.close-menu:hover,
.header-login:hover,
.menu-tapped{
    background: rgba(210,210,210,0.40);
}
.header-user{
    height: 40px;
    min-width: 40px;
    padding: 0 0.8em 0 0.6em;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}
.header-user span{
    margin-left: 0.3em;
    color: var(--fontcolor);
    font-size: 0.9em;
    font-weight: 600;
}
.user-navigator{
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    width: 160px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
    padding: 0.5em;
    font-size: 0.9em;
    border-radius: 5px;
}
.user-navigator ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.user-navigator a{
    display: block;
    border-bottom: var(--border);
    font-weight: 600;
    padding: 0.6em 0.8em;
    color: var(--fontcolor);
}
.user-navigator a:nth-last-child(1){
    border-bottom: none;
}
.user-navigator a:hover{
    color: #555;
}
.header-login{
    font-size: 0.9em;
    font-weight: 600;
    padding: 0.4em 0.8em;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}
.burger-menu{
    display: none;
}
.menu-hover{
    background: #efefef;
    transition: background .2s ;
}
.header-count span{
    min-width: 16px;
    display: inline-block;
    position: absolute;
    background: var(--themecolor);
    color: #fff;
    font-size: 0.7em;
    line-height: 1;
    padding: 0.3em 0.5em 0.3em 0.5em;
    font-weight: 700;
    border-radius: 20px;
    left: 26px;
    top: 2px;
    text-align: center;
    white-space: nowrap;
}
.header-count{
    min-width: 48px;
    position: relative;
}
.search-container{
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    min-height: 350px;
    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;
    z-index: 500;
	-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-container input{
    width: 100%;
    padding: 0.8em 1em;
}
.search-container input:focus::-webkit-input-placeholder,
.index-search input:focus::-webkit-input-placeholder{ color:transparent; }
.search-container input:focus:-moz-placeholder,
.index-search input:focus:-moz-placeholder{ color:transparent; } 
.search-container input:focus::-moz-placeholder,
.index-search input:focus::-moz-placeholder{ color:transparent; } 
.search-container input:focus:-ms-input-placeholder,
.index-search input:focus:-ms-input-placeholder{ color:transparent; } 

.search-container h4{
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 0.8em;
    margin-top: 1em;
}
.search-bar{
    position: relative;
    width: 500px;
    margin: auto;
}
.search-results{
    position: absolute;
    width: 500px;
    margin-top: 0.1em;
    padding: 0.5em 1em;
    display: none;
    background: #fff;
    border: #ddd 1px solid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    
}
.search-results-index{
    position: absolute;
    width: 600px;
    margin-top: 0.1em;
    padding: 0.5em 1em;
    display: none;
    background: #fff;
    border: #ddd 1px solid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 1000;
}
.search-suggestion{
    width: 500px;
    margin: auto;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 0.95em;
}
.search-suggestion p{
    color: #888;
    margin-bottom: 0.3em;
}
.search-suggestion a{
    color: #555;
    text-decoration: none;
    font-weight: 600;
    margin-right: 1.5em;
    line-height: 2.1em;
}
.search-suggestion a:hover{
    color:var(--fontcolor);
    text-decoration: none;
}
#suggestion-field a{
    color: var(--fontcolor);
}
#suggestion-field a:hover{
    color: var(--themecolor);
}
#suggestion-field ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#suggestion-field li{
    padding-left: 0;
    border-bottom: #ccc 1px solid;
    padding: 6px 0px 6px 0px;
    line-height: 1.2;
}
#suggest-more{
    text-align: center;
    padding: 0.8em 0 0.3em 0;
}
#no_result{
    text-align: center;
    padding: 0.8em 0 0.8em 0;
}
.suggest-model{
    display: block;
    font-weight: 600;
}
.suggest-desc{
    font-size: 0.9em;
}

.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;
}
.e404{
    width: 95%;
    margin: auto;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}
.e404 div{
    text-align: center;
}
.e404 h1{
    font-weight: 400;
    font-size: 3em;
}
.index-banner{
    position: relative;
    width: 100%;
    height: 70vh;
    background:-webkit-linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 15%), url("../webp/banner2hrrm9g.webp") center top no-repeat;
    background:-o-linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 15%), url("../webp/banner2hrrm9g.webp") center top no-repeat;
    background:linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 15%), url("../webp/banner2hrrm9g.webp") center top no-repeat;
    background-size: cover;
}
.index_banner{
    width: 100%;
    height: 70vh;
    
    background:-webkit-linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 15%), url("../webp/banner2hrrm9g.webp") center top no-repeat;
    background:-o-linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 15%), url("../webp/banner2hrrm9g.webp") center top no-repeat;
    background:linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 15%), url("../webp/banner2hrrm9g.webp") center top no-repeat;
    background-size: cover;
    box-sizing: content-box;
    margin-bottom: 1em;
}
.index_banner div.gallery{
    width: 100%;
    height: 100%;
    position: relative;
}
.index_banner .btn{
    text-align: center;
    margin: auto;
    width: 100%;
    position: absolute;
    bottom: 1.3em;
}
.banner{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.promotion_banner{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ccc;
    padding-top: 40px;
    box-sizing: border-box;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.promotion_banner>div{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2.2em;
    box-sizing: border-box;
}
.promotion_banner>div button{
    padding-top: 5px;
    padding-bottom: 5px;
}
.index-banner h1{
    font-weight: 300;
    font-size: 2.8em;
    letter-spacing: 0em;
}
.index-banner-logo{
    width: 140px;
    position: absolute;
    left: 1em;
    bottom: 4em;
}
.index-banner-logo img{
    width: 100%;
}
.index-menu{
    padding: 5em 0;
}
.index_banner .banner_img{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
img.banner-img{
   width: 40vw;
   height: auto;
}
.select-brand{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.select-brand>div{
    width: 23%;
    margin: 1%;
    border-radius: 8px;
	background: #fff;
}
.select-brand>div>a{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items:center;
    border-radius: 8px;
    color: var(--fontcolor);
    transition: background-color 0.2s;
    text-align: center;
}
.select-brand>div:hover{
    opacity: 0.7;
}
.select-brand h4{
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    line-height: 1.3;
}
.index-search{
    width: 600px;
    position: relative;
    margin: 2em auto 2.5em auto;
}
.index-search input{
    width: 600px;
    font-size: 1.3em;
    padding: 0.8em 1em;
}
.index-search-suggestion{
    position: absolute;
    width: 600px;
    padding: 1em;
    box-sizing: border-box;
    background: #fff;
    border: #ccc 1px solid;
    margin-top:0.1em;
    z-index: 100;
}
.inactive{
    display: none;
}
.index-search-suggestion .search-suggestion{
    margin: inherit;
    width: 100%
}

    #burger-menu, #close{
      display:inherit;
      width: 20px;
      height:33px;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    #burger-menu span, #close span{
      display: inherit;
      position: absolute;
      width: 100%;
      background: #333;
      height: 2px;
      border-radius: 2px;
      margin: 9px 0 0 0; 
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out, background 0s;
      -moz-transition: .25s ease-in-out, background 0s;
      -o-transition: .25s ease-in-out, background 0s;
      transition: .25s ease-in-out, background 0s;
    }

    #burger-menu span:nth-child(1), #close:nth-child(1) {
      top: 0px;
    }
    #burger-menu span:nth-child(2), #burger-menu span:nth-child(3),
    #close span:nth-child(2), #close span:nth-child(3){
      top: 6px;
    }
    #burger-menu span:nth-child(4), #close span:nth-child(4){
      top: 12px;
    }
    #burger-menu.open span:nth-child(1), #close.open span:nth-child(1){

        opacity: 0;
    }
    #burger-menu.open span:nth-child(2), #close.open span:nth-child(2){
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    #burger-menu.open span:nth-child(3), #close.open span:nth-child(3){
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    #burger-menu.open span:nth-child(4), #close.open span:nth-child(4){

        opacity: 0;
    }
.product-container{
    display: flex;
}
.item-container{
    width: calc(100% - 260px);
    padding-left: 0em;
    min-height: 70vh;
    border-left: var(--border);
}
aside{
    background: rgba(255,255,255,0.93);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    width: 260px;
    height: 100%;
    z-index: 498;
	-webkit-transform:translateX(0);
	transform:translateX(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)
}

.aside-content{
    padding: 0 0.8em;
}
.aside-active{
	-webkit-transform:translateX(0%);
	transform:translateX(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)
}
.nav-title{
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 600;
    margin: 1.5em 0 0.5em 0.3em;
}
footer{
    background: #151515;
    padding: 4em 0 4em 0;
    color: #eaeaea;
}
.footer-container{
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8em;
}
.footer-container a{
    color: #eaeaea;
}
.footer-container a:hover,
.footer-container li:hover{
    color: #999;
}
.footer-container h4{
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 1em;
}
.footer-container li{
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    line-height: 2.5;
    cursor: pointer;
}
.footer-1{
    width: 30%;
}
.footer-1 svg{
    width: 80px;
    fill: #eaeaea;
    margin: -5px 0 -10px 0;
}
.footer-2{
    width: 70%;
    display: flex;
    justify-content: space-between;
}
.footer-2 ul{
    list-style: none;
    margin-left: 1em;
    padding-left: 0;
}
.footer-3{
    width: 300px;
    margin-top: 1em;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.footer-3 span{
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 1.5em;
}
.footer-3 a{
    margin-right: 2em;
}
.footer-3 a:last-child{
    margin-right: 0em;
}
.footer-4{
    width: calc(100% - 300px);
    text-align: right;
    margin-top: 1em;
    letter-spacing: 0.08em;
}

.menu-tree{
	margin-bottom:30px;
	width: calc(100% - 0.5em);
    font-size: 0.9em;
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: top;
}
.menu-tree img{
    width: 10px;
    fill: #333;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .16s ease-in-out;
    -moz-transition: .16s ease-in-out;
    -o-transition: .16s ease-in-out;
    transition: .16s ease-in-out;
}
.menu-tree a{
    color: #252525;
}
.menu-tree a.menu-brand {
	font-weight:700;
	cursor: pointer;
	margin-left: 0;
	padding:0.7em 0.5em 0.7em 0.3em;
	width: 100%;
	border-bottom:#ddd 1px solid;
	text-decoration:none;
    font-size: 1.05em; 
    display: flex;
    justify-content: space-between;
    text-transform: capitalize; 
    align-items: center;
    letter-spacing: 0.02em; 
}
.menu-tree a.menu-brand:hover{
    background: none;
    color: #555;
}
a.menu-brand img.opened{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
a.subcategory-1 img.opened{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.menu-tree ul {
	display: none;
	list-style:none;
	margin: 0;
	padding: 0;
}
.menu-tree a.subcategory-1{
    font-weight: 500;
    padding-left: 0.8em;
    padding-right: 0.8em;
    width: 100%;
    background: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.4;
    letter-spacing: 0;
}
.menu-tree a.subcategory-1:hover{
    
    color: var(--themecolor);
}
.menu-tree>li>ul>li>ul>li>a{
    padding-left: 1.5em;
    width: 100%;
}
.menu-tree>li>ul>li>ul>li>a:hover {
    color: var(--themecolor);
}
.menu-tree a {
	font-weight:400;
	cursor: pointer;
	display: block;
	margin-left: 0;
	padding:0.7em 0 0.7em 0.5em;
	width: calc(100% - 0.5em);
	border-bottom:#e2e2e2 1px solid;
	text-decoration:none;
    letter-spacing: 0.01em;
}

li a.expanded {
	background:none;
}

li a.expanded-active {
	color:var(--themecolor);
}
li a.collapsed {
    color: var(--fontcolor);
	display:block;
	text-decoration:none;
}
li a.active{
    color:var(--themecolor);
}
li a.active-black{
    color:var(--fontcolor);
}

.loop-subtitle--{
    text-align: center;
    padding: 2.6em 0 1.8em 0;
    border-bottom: var(--border);
}
.loop-subtitle{
    box-sizing: content-box;
    height: 6.5em;
    padding-top: 0.5em;
    border-bottom: var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.loop-subtitle span{
    font-size: 0.55em;
    display: block;
    line-height: 2;
    color: #777;
    font-weight: normal;
}
.loop{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
}
.loop>div{
    width: 25%;
    min-height: 100px;
    border-right: var(--border);
    border-bottom: var(--border);
    position: relative;
}
.loop a{
    color: var(--fontcolor);
    text-decoration: none;
}
.loop a:hover{
    color: var(--themecolor);
}
.home-loop{
    border-left: var(--border);
    border-top: var(--border);
}
.home-loop>div{
    width: 20%;
    min-height: 100px;
    border-right: var(--border);
    border-bottom: var(--border);
    position: relative;
}
.best-selling{
    padding-bottom: 5em;
}
.promotion{
    background: #eee;
    padding: 4em 0 4em 0;
    margin-bottom: 5em;
}
.best-selling h1,
.promotion h1{
    margin-bottom: 1em;
}
.promotion ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-wrap:wrap;
    justify-content:space-around;
}
.promotion li{
    width: 30%;
    float: left;
    margin-bottom: 2em;
}
.promotion li img{
    width: 100%;
}
.pricelist{
	margin: 0; 
	margin-bottom: 3.5em;
	text-align: center;
}
.pricelist p{
}
.plist{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.plist a{
	width: calc(50% - 0.5em);
	margin-bottom: 1em;
}
.plist div{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 48px;
	border-radius: 0.5em;
}
.plist a:hover{
	opacity: 0.75;
	cursor: pointer
}
.plist a div img{
	height: 70%;
}
.login-container p.note{
	line-height: 1.5;
}
.technical{
    background: #eee;
    padding: 4em 0 4em 0;
}
.no-item{
    text-align: center;
    margin-top: 100px;
    font-weight: 600;
    margin-bottom: 150px;
}
.item-img{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-img img{
    height: 80%;
    width: 80%;
    object-fit: contain;
}
.item-details{
    padding: 0 0.5em 1em 0.5em;
}
.item-details h3{
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: normal;
    font-weight: 700
}
.item-details h3 span{
    display: block;
    font-weight: 400;
    color: var(--fontcolor);
}
.item-model{
   height: 60px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3; 
   -webkit-box-orient: vertical;

}
.rm{
    position: relative;
    color: var(--price);
    font-weight: 600;
    font-size: 0.9em;
}
.badge-container{
    min-height: 1.8em;
}
.badge-container span.hot{
    font-size: 0.55em;
    font-weight: 600;
    line-height: 1;
    border-radius: 20px;
    margin-right: 0.5em;
    padding: 0.2em 0.6em;
    border: #FF6A00 1px solid;
    color:#FF6A00;
}
.badge-container span.new{
    font-size: 0.55em;
    font-weight: 600;
    line-height: 1;
    border-radius: 20px;
    margin-right: 0.5em;
    padding: 0.2em 0.6em;
    border: #F20004 1px solid;
    color:#F20004;
}
.badge-container span.available{
    font-size: 0.55em;
    font-weight: 600;
    line-height: 1;
    border-radius: 20px;
    padding: 0.2em 0.6em;
    border: #00B50F 1px solid;
    color:#00B50F;
}
.feature3{
    position: absolute;
    top: 1em;
    right: 0em;
    background: #D80000;
    min-width: 100px;
    text-align: center;
    padding: 0.2em 0.6em 0.2em 0.9em;
    font-size: 0.85em;
    font-weight: 600;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: #fff;
}
.plogo{
    position: absolute;
    top: 1em;
    left: 0.8em;
    height: 22px;
    border:0;
    z-index: 100;
}
.plogo-viewp{
    position: absolute;
    top: 1.5em;
    left: 1.5em;
    height: 28px;
    border:0;
    z-index: 100;
}
.view-product{
    display: flex;
    flex-wrap: wrap;
}
.view-product-img{
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.view-product-details{
    width: 55%;
    padding: 2.5em 1em 2em 1.5em;
}
.view-product-details h4{
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.5
}
.view-product-details ul{
    margin: 1em 0 0 0;
    padding-left: 1.3em;
    font-size: 0.9em;
    font-weight: 600;
}
.view-product-details div.price{
    font-weight: 600;
    color: var(--price);
    margin: 1em 0 2em 0;
    font-size: 1.4em;
    position: relative;
}
.view-qty{
    display: flex;
    align-items: center;
}
.view-qty label{
    margin: 0;
    margin-right: 1.5em;
    font-weight: 600;
}
.num-picker{
    display: flex;
    height: 2.2em;
    width: 300px;
}
#num-picker2{
    height: 2.2em;
    display: flex;
}
input[type="tel"].input-qty,
.input-qty:focus{
    font-size: 0.95em;
    width: 60px;
    height: 100%;
    line-height: 100%;
    padding: 0;
    border: #bbb 1px solid;
    border-right: none;
    outline: none;
    border-radius: 0;
    text-align: center;
    margin: 0;
	box-shadow: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.plus,
.plus2{
    width: 2.2em;
    height: 2.2em;
    padding: 0;
    border: #bbb 1px solid;
    outline: none;
    border-radius: 0;
    cursor: pointer;
    background: url("../svg/plusxol39b.svg") no-repeat center center #f8f8f8;
    background-size: 100%;
}
.minus,
.minus2{
    width: 2.2em;
    height: 2.2em;
    padding: 0;
    border: #bbb 1px solid;
    border-right: none;
    outline: none;
    border-radius: 0;
    cursor: pointer;
    background: url("../svg/minusyfaxv4.svg") no-repeat center center #f8f8f8;
    background-size: 100%;
}
.view-submit{
    margin-top: 2.5em;
}
.view-submit button{
    min-width: 180px;
}
.view-submit button.disabled{
    min-width: 180px;
    cursor: default;
    background: #888;
}
.stock-status{
    margin-top: 1em;
    line-height: 1.3;
    font-size: 0.9em;
    color:#840001;
}
.view-product-spec{
    border-top: var(--border);
    padding: 2em;
    padding-bottom: 3em;
}
.view-product-spec h4,
.view-product-pdf h4,
.view-product-suggest h4{
    font-size: 1em;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
    font-weight: 700;
    text-transform: uppercase;
}
.view-product-spec ul{
    margin: 0;
    padding-left: 1.2em;
}
.view-product-pdf{
    border-top: var(--border);
    padding: 2em;
}
.view-product-pdf div{
    display: flex;
    align-items: center;
    font-weight: 600;
}
.view-product-pdf div i{
    font-size: 1.8em;
    margin-right: 0.5em;
    color: var(--themecolor);
}
.view-product-pdf div a{
    color: var(--fontcolor);
}
.view-product-pdf div a:hover{
    color: var(--themecolor);
}
.view-product-suggest{
    border-top: var(--border);
    margin-top: 3em;
    margin-bottom: 3em;
}
.view-product-suggest h4{
    padding: 2em;
    padding-bottom: 1em;
}
.border-top{
    border-top: var(--border);
}
.cart,
.my-order{
    max-width: 100%;
    min-height: 70vh;
    margin: auto;
    margin-bottom: 3em;
    margin-top: 0em;
}
.cart-line{
    border: 0;
}
.cart-desc,
.order-desc{
    display: flex;
    background: #f5f5f5;
    font-weight: 600;
    padding: 0.5em 1em;
    border-bottom: var(--border);
}
.cart-list,
.order-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1em 1em;
    border-bottom: var(--border);
}
.order-list:hover{
    background: #fcfcfc;
}
.cart-uprice{
    width: 15%;
    text-align: right;
    margin-right: 5%;
}
.cart-qty{
    width: 15%;
    text-align: center;
    display: flex;
    justify-content: center;
}
.cart-tprice{
    width: 15%;
    text-align: right;
}
.tprice{
    font-weight: 600;
}
.cart-img{
    display: flex;
    align-items: center;
    width: 150px;
}
.cart-img div:nth-child(2){
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1.2em
}
.cart-img i{
    font-size: 1.5em;
    cursor: pointer;
    color: #444;
}
.cart-img i:hover{
    color: var(--themecolor);
}
.cart-mobile-details{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% - 150px)
}
.cart-model{
    width: calc(50% - 0px);
    color: #555;
}
.cart-model span{
    font-weight: 600;
    color: var(--fontcolor);
}
.pre-order{
    font-size: 0.9em;
    line-height: 1.8;
    color:#840001;
}
#cart-empty,
#order-empty{
    width: 100%;
    text-align: center;
    padding-top: 23vh;
    border-top: var(--border);
}
.cart-gtotal-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5em 0em 2.5em 1em;
}
.cart-gtotal span{
    font-weight: 600;
    font-size: 1.2em;
}
.cart-gtotal button{
    margin-left: 1em;
    min-width: 130px;
}
#empty_cart{
    font-weight: 600;
    cursor: pointer;
}
#empty_cart:hover{
    color: var(--themecolor);
}
.checkout{
}
.checkout-sales p{
    font-size: 0.85em;
    color: #888;
    font-style: normal;
    line-height: 1.4;
    margin: 0.5em 0 0 0;
}
.checkout-sales,
.checkout-location,
.checkout-remark{
    padding: 3em 2em;
    border-bottom: var(--border);
}
.checkout-delivery{
    width: 100%;
    padding: 1em 1em 0 1em;
    display: none;
}
.checkout-delivery h4{
    font-size: 1em;
    margin-bottom: 0.4em;
}

.checkout-delivery textarea,
.checkout-delivery input{
    width: 100%;
    outline: none;
    border-radius: 5px;
    padding: 0.5em;
}
.delivery-active{
    border: #B20002 1px solid;
}
.delivery-active:focus{
    border-color: #B20002;
}
.delivery-idle{
    border: #ccc 1px solid;;
}
.delivery-idle:focus{
    border-color: #999;
}
.checkout-summary{
    padding: 3em 2em;
    display: flex;
    justify-content: flex-end;
}
.checkout-summary h4{
    text-align: right;
    margin-bottom: 1.5em;
}
.checkout-summary>div{
    width: 350px;
}
.checkout-remark textarea{
    width: 100%;
    border-color: #ccc;
    outline: none;
    border-radius: 5px;
    padding: 0.6em;
}
.checkout-remark textarea:focus{
    border-color: #999;
}
.summary-split{
    display: flex;
    flex-wrap: wrap;
}
.summary-split span{
    display: block;
    line-height: 2;
    font-size: 1em;
}
.summary-split div:nth-child(1){
    width: 50%;
}
.summary-split div:nth-child(2){
    width: 50%;
    text-align: right;
}
.checkout-desclaimer{
    font-size: 0.8em;
    color: #777;
    line-height: 1.45;
    margin: 0.5em 0 0 0;
}
.summary-total{
    font-weight: 700;
}
.summary-btn{
    text-align: right;
    margin-top: 1em;
    margin-bottom: 2em;
    padding-top: 1.5em;
    border-top: var(--border);
}
.summary-btn button{
    min-width: 130px;
}
.checkout-sales>div,
.checkout-remark>div{
    padding: 0.8em 0 0.2em 0;
}
.checkout-sales>div>span{
    font-size: 1em;
    margin-right: 1.5em;
}
.sales-name{
    font-weight: 600;
}
.checkout-location>div{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 1.5em;
}
.labl {
    display : block;
    width: 31.33%;
    margin: 1%;
}
.labl > input{ 
    visibility: hidden; 
    position: absolute; 
}
.labl > input + div{ 
    cursor:pointer;
    text-align: center;
    border-radius: 6px;
    padding: 1em 0.5em 1.2em 0.5em;
    font-size: 0.8em;
    border: var(--border);
    color: #777;
}
.labl > input:hover + div{ 
    border-color: #aaa;
    color: var(--fontcolor);
}
.labl > input:checked + div{ 
    border: 1px solid;
    border-color: var(--themecolor);
    color: var(--fontcolor);
}
.labl > input + div h4{
    font-size: 1.2em;
    margin-bottom: 0.4em;
}
.checkout-add{
   height: 2.6em;
   line-height: 1.4em;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; 
   -webkit-box-orient: vertical;
}
.order-left{
    width: 110px;
    display: flex;
    align-items: center;
}
.order-right{
    width: calc(100% - 110px);
    display: flex;
    align-items: center;
}
.order-id{
    width: 110px;
}
.order-right-1{
    width: 85px;
}
.order-right-2{
    width: calc(100% - 85px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.order-img{
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}
.order-item{
    width: calc(54% - 1em);
    margin-right: 1em;
    line-height: 1.4;
}
.order-item span{
    font-weight: 600;
}
.order-date{
    width: 15%;
}
.order-status{
    width: 15%;
    text-align: center;
}
.order-total{
    width: 16%;
    text-align: right;
    font-weight: 600;
}
#loadmore{
    text-align: center;
    margin-top: 1.5em;
    min-height: 2.5em;
}
#loadmore button{
    min-width: 150px;
    padding: 0.5em 0 0.5em 0;
    border-radius: 0;
}
.loadmore{
    display: none;
}
.product-loadmore{
    padding-bottom: 2em;
}
.badge{
    padding: 0.6em 0.7em 0.6em 0.7em;
    font-size: 0.7em;
}
.text-white{
    color: #fff;
}
.color-grey{
    background: #ddd;
}
.color-blue{
    background:#004AC8;
}
.color-green{
    background:#019B2A;
}
.color-red{
    background:#BC0002;
}
.my-order a{
    color: var(--fontcolor);
}


.view-order{
    font-size: 0.95em;
    position: relative;
}
.view-order h4{
    font-size: 1.1em;
}
.view-disclaimer{
    padding: 0.8em 1em;
    background:rgba(255,237,0,0.15);
    font-size: 0.85em;
    line-height: 1.4;
    margin-top: 1em;
}
.view-disclaimer-gap{
    padding-bottom: 0.8em;
}
.view-title{
    border-bottom: var(--border);
    padding: 0.5em 0.5em 1em 0.5em;
}
.view-title h3{
    margin-bottom: 0.3em;
    font-size:1.25em;
}
.view-info{
    padding: 1em 0.5em;
}
.view-info span{
    display: block;
    color: #444;
}
.view-info span strong{
    font-weight: 600;
}
.view-desc{
    display: flex;
    align-items: center;
    padding: 0.6em 1em;
    background: #f3f3f3;
    border-bottom: var(--border);
    font-weight: 600;
}
.view-desc .view-img{
    height: auto;
    justify-content:flex-start;
}
.view-list{
    display: flex;
    align-items: center;
    padding: 1em;
    border-bottom: var(--border);
}
.view-img{
    width: 80px;
    height: 80px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-item{
    width: calc(100% - 100px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.view-model{
    width: calc(50% - 1em);
    margin-right: 1em;
    line-height: 1.4;
}
.view-various{
    width: 10%;
}
.view-quantity{
    width: 10%;
    text-align: center;
}
.view-uprice{
    width: 15%;
    text-align: right
}
.view-total{
    width: 15%;
    text-align: right;
}
.view-grand-container{
    display: flex;
    justify-content: flex-end;
}
.view-grand{
    width: 350px;
    display: flex;
    padding: 1em 1em;
}
.view-grand span{
    display: block;
    line-height: 1.8;
}
.view-grand>div:nth-child(1){
    width: 50%;
}
.view-grand>div:nth-child(2){
    width: 50%;
    text-align: right;
}
.view-gtotal{
    font-weight: 600;
}
.view-status{
    padding: 1em;
    border-top: var(--border);
    border-bottom: var(--border);
    display: flex;
    align-items: center;
}
.view-status div{
    width: 50%;
}
.view-status .vo-badge{
    margin-right: 0.8em;
}
.view-remark{
    padding: 1em;
    border-top: var(--border);
}
.view-btn{
    padding: 1.5em 1em;
    display: flex;
    justify-content: flex-end;
}
.view-btn-summary{
    padding: 1.5em 1em;
    display: flex;
    justify-content: center;
}
.view-btn button{
    min-width: 110px;
    font-size: 0.95em;
}
.my-account{
    padding: 1em;
    padding-bottom: 3em;
    max-width: 550px;
    margin: auto;
}
.my-account hr{
    margin: 3em 0 2em 0;
}
.account_btn{
    text-align: center
}
.shipping_address{
    font-size: 0.85em;
    margin-left: 0.5em;
}
.wapp{
    position: fixed;
    width: 50px;
    z-index: 500;
    bottom: 2em;
    right: 2em;
    border-radius: 70px;
}
.wapp img{
    width:100%;
    border-radius: 60px;
    border: none;
    transition: transform 0.2s ease;
}
.wapp img:hover{
    transform: scale(1.1);
}
.wapp img.ico{
    box-shadow: 0 0 8px 0px rgba(0,0,0,0.3);
}
.toggleWapp{
    z-index: 600;
    cursor: pointer;
}
.w-close{
    display: none;
}
.whatsapp-ico-tech,
.whatsapp-ico-sales{
    position: absolute;
    transform: translateY(0);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}
.ico-tech{
    transform: translateY(-60px);
    opacity: 1;
    visibility: visible;
}
.ico-sales{
    transform: translateY(-125px);
    opacity: 1;
    visibility: visible;
}
.wapp-ask{
    position: absolute;
    min-width: auto;
    right: 60px;
    top: 10px;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
    background:rgba(214,240,216,0.95);
    border-radius: 0.5em;
    padding: 5px 15px;
    text-align: left;
}
.wapp-ask span{
    display: block;
    font-size: 0.83em;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.2em;
}
.dealer-price{
    font-size: 0.85em;
    font-weight:600;
    display: block;
    line-height: 1.2;
	
	padding: 0.4em;
	color: #555;
	min-width: 100px;
	background: #eee;
	margin-top: 0.2em;
	transition: 0.1s;
}
.login-click:hover{
    background: var(--themehover);
	color: #fff
}
.dealer-price-view{
	margin-top: 0.2em;
    font-size: 0.6em;
    font-weight:600;
    line-height: 1.2;
	
	display: block;
	color: #555;
	min-width: 110px;
	background: #eee;
	transition: 0.1s;
}
.rating-container{
    padding: 2em 0;
    min-height: 70vh;
}
.rating-login{
    display: flex;
    height: 70vh;
    justify-content: center;
    align-items: center;
}
.rating{
    width: 100%;
    max-width: 550px;
    margin: auto;
    background: #f5f5f5;
    box-sizing: border-box;
    padding: 1em;
    text-align: center;
}
.rating h3,
.rating-login h3{
    font-size: 1.3em;
    margin-top: 0.5em;
    margin-bottom: 0.3em;
}
.rating h4{
    font-size: 1.2em;
    margin: 2em 0 0.2em 0;
    line-height: 1;
}
.rating span.tech{
    font-size: 0.8em;
    letter-spacing: 0.02em;
    display: block;
}
.rating-form{
    width: 100%;
    margin: auto;
    max-width: 450px;
    text-align: left;
}
.rating label{
    display: block;
    font-weight: 600;
    line-height: 1;
    margin-left: 0.5em;
}
.rating textarea{
    width: 100%;
    min-height: 130px;
}
.rating-form div{
    text-align: center;
    padding: 0.8em 0;
}
.more-products{
    margin-bottom: 2.5em;
    display: none;
}
.more-products label{
    margin-left: 0.2em;
    font-weight: bold;
}
.more-products select{
    padding-left: 0.8em;
}

.social-ico {
    fill: #fff;
    height: 25px;
    width: 25px;
    transition: fill 0.2s;
}
.social-ico:hover{
    fill: #ccc;
}
.filter-container{
	width: 100%;
	border-bottom: #ddd 1px solid;
	padding: 0.8em 0.8em;
	display: flex;
	align-items: center;
}
.filter-desc{
	font-weight: 700;
	margin-right: 1.5em;
	display: flex;
	justify-content: space-between;
}
.filter-desc>div{
	display: none;
}
.filter-container form{
	width: 100%;
	display: flex;
	align-items: center;
}
.filter-slide{
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}
.filter-slide img{
	width: 80px;
}
.filter-slide i{
	font-style: normal;
}

.filter-slide>div{
	width: calc(100% - 150px);
	display: flex;
	align-items: center
}
.filter-slide>div>div:nth-child(1){
	width: 200px !important;
	margin-left: 2em;
	margin-right: 2em;
}
.filter-slide>div>div:nth-child(2){
	font-weight: 600;
	font-size: 0.9em;
}
.filter-container form button{
	padding: 0em !important;
	height: 26px;
	min-width: 80px;
}
span.available{
    font-size: 0.73em;
    font-weight: 600;
    line-height: 1;
    border-radius: 20px;
    padding: 0.2em 0.6em;
    border: #00B50F 1px solid;
    color:#00B50F;
	margin: 0;
	margin-left: 0.6em
}

.checkbox {
  width: 124px;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 1.6em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 0.5em;
}


.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.checkmark {
  position: absolute;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 0.2em;
  background-color: #f4f4f4;
  border:#cfcfcf 1px solid;
}


.checkbox:hover input ~ .checkmark {
  background-color: #ddd;
}


.checkbox input:checked ~ .checkmark {
  background-color: var(--themecolor);
  border:#A30000 1px solid;
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


.checkbox input:checked ~ .checkmark:after {
  display: block;
}


.checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}