:root {
	--bc-red: #E94F1B;
	--bs-nav-link-font-size: 16px;
	--bc-yellow:#FECB04;
	--bc-lightgrey: #F5F5F5;
	--bc-grey:#333331;
  --bc-green: #00E09D;
	--bs-accordion-btn-myicon :url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
select.form-control  {-webkit-appearance: auto; 
    -moz-appearance: auto;
     appearance: auto;
    }
img {pointer-events: none;}
body {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	color: #333331;
	font-size: 16px;
	line-height: 1.2;
	width: 100%;
	background-color: #FFFFFF;
}
.fGeologica { font-family: "Geologica"}
.fw300 {font-weight: 300}
b {font-weight: 700}
h1, h2, h3, h4, h5, h6 {
	color: #333331;
  font-weight: 700;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1,.h1 {
	font-size: 50px;
	font-family: "Geologica", sans-serif;
	font-weight: 800;
  position: relative;
}
h1 span, .h1 span {position: relative; z-index: 2}
.breadcrumb-block h1::after, .breadcrumb-block .h1::after {
    content: "";
    display: inline-block;
    width: 211px;
    background: url(/image/assets/breadcrumb-arrows.svg) 25% center no-repeat;
    height: 94px;
    position: absolute;
    margin-left: -10%;
    z-index: 0;
}
h2, .h2 {
	font-size: 30px;
  font-family: "Geologica", sans-serif;
  font-weight: 800;
}
h3 {
	font-size: 20px;
}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: #dd3333;
	text-decoration: none;
}
a:hover {
	color: #dd3333;	
	text-decoration: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 9px;
	display: block;
}
label.radio, label.radio-inline, .radio > label {font-weight: 300}
.required label.control-label:after {
    content: "*";
}
.form-control:focus { border-color: rgba(254,203,4,0.54) }
input[type="radio"] {accent-color: red; margin-right: 5px;}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 14px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 14px;
}
.input-group .input-group-addon {
	font-size: 14px;
	height: 30px;
}
.hide {
    display: none!important;
}
.breadcrumb-block { padding-top: 35px}
.mt-3 {margin-top: 20px!important}
.mt-4 {margin-top: 30px!important}
.mt-5 {margin-top: 50px!important}
.mb-3 {margin-bottom: 20px!important}
.mb-4 {margin-bottom: 30px!important}
.mb-5 {margin-bottom: 50px!important}
@media (min-width: 576px) {
.mt-sm-0 {
    margin-top: 0!important;
}
.mt-sm-5 {
    margin-top: 50!important;
}
}

.bg-red input::placeholder { /* Chrome/Opera/Safari */
  color: #FFF!important;
}
.w-20 {width:20%;}
.w-30 {width:30%;}
.w-35 {width:35%;}
.form-group { margin-bottom: 15px;}
.round15 {border-radius: 15px}
.bg-black {background: #000}
.bg-red {background: var(--bc-red)}
.bg-grey {background: var(--bc-grey)}
.cl-white {color:#FFF;}
.cl-black {color:#333331;}
.cl-yellow {color: var(--bc-yellow);}
.cl-grey { color: var(--bc-grey)}
a.cl-yellow:hover { color:#FFF; }
.b700 { font-weight: 700}
.f24 {font-size: 24px;}
.f23 {font-size: 23px;}
.f14 {font-size: 14px;}
.f13 {font-size: 13px;}
.f20 {font-size: 20px;}
.f25 {font-size: 25px;}
.f70 {font-size: 70px;}
.f38 {font-size: 38px; line-height: normal;}
.f18 {font-size: 18px;}
.f86 {font-size: 86px; line-height: 1.2}
.f48 {font-size: 48px; line-height: 1.2}

.pt-100 { padding-top: 100px;}
.pb-100 { padding-bottom: 100px;}
.pt-80 { padding-top: 80px;}
.pb-80 { padding-bottom: 80px;}
.p-20 {padding: 20px}
.p-30 {padding: 30px}
.mb-100 { margin-bottom: 100px;}
.mb-80 { margin-bottom: 80px;}
.separator-short { width:100px; height:1px; border-width: 1px; border-style: solid; }
.fwhitesocial {       background: #FFF;
    border-radius: 100%;
    padding: 4px;
    color: #e94f1b;
    font-size: 12px;}
.checkred .form-check-input:checked {background: var(--bc-red); border-color: var(--bc-red);}
.checkred .form-check-input:focus {border-color: var(--bc-red);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(229,35,31,.25);}
.modal .modal-dialog.modal-bottom { position: fixed; margin: 0!important;
  bottom: 0;
  left: 0%;
  right: 0%;
  }
.rating i { color: var(--bc-yellow); font-size: 16px; }
.arrows-bottom { position: relative;}
.arrows-bottom:after { content: ""; position: absolute; bottom: 20px; left: 20px; background: url(../image/arrows.png) 0 0 no-repeat; width: 307px; height: 80px }
.info-description ol {margin-left: 20px; padding: 0; }
.form-control:focus { box-shadow: 0 0 0 0.15rem rgba(254,203,4,0.55)}
.form-bordered {border: 1px solid #D3D3D3; border-radius: 15px; padding:30px;}
.form-bordered2 {border: 1px solid #D3D3D3; border-radius: 15px; padding:30px 24px;}
strong {font-weight: 700}
.btn {display: inline-block; padding: 12px 30px;   border-radius: 50px; border:0; }
.btn-red { background: var(--bc-red)!important; color: #FFF;  border:0; }
.btn-grey { background: var(--bc-lightgrey)!important; color: #333331;  border:0; }
.btn-white { background: #FFF!important; color: #333331;  border:0; }
.btn-white:active {color:#333331!important;}
.btn-primary, .btn-yellow { background: var(--bc-yellow); color:#333331;}
.btn:hover {background: #333331!important; color:#FFF!important;}
.btn-icon { padding: 0; width:50px; height: 50px; display: flex; align-items: center; justify-content: center;}
.btn-icon:hover svg path {fill:#FFF;}
.accordion-button {background: #F3F2F2;  margin-bottom: 20px}
.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed { border-radius: 15px; }
.accordion-item { border: 0 }
.accordion-button::after { background-image: var(--bs-accordion-btn-myicon); background-color:  var(--bc-red); --bs-accordion-btn-icon-width:35px; --bs-accordion-btn-icon-height:35px; border-radius: 100%;
    background-size: 21px;
    background-position: center;}
.accordion-button:not(.collapsed)::after { background-image: var(--bs-accordion-btn-myicon); }
.accordion-button:not(.collapsed) { background: #F3F2F2; color: #333331; box-shadow: none }
.accordion-button:focus { border-color: none; box-shadow: none}
img.emoji {
    width: 16px;
}
a.cl-white:hover { color:rgba(255,255,255,.8);}
.slider .item {position: relative;}
.dropdown-custom .dropdown-toggle::after, #form-currency .dropdown-toggle::after {display: none}
.dropdown-custom .dropdown-toggle {font-size: 14px; font-weight: 700}
.dropdown-custom .dropdown-menu.show {min-width: 100%; text-align: center;}
.dropdown-custom .dropdown-menu.show a {color:#333331; padding-top: 5px; padding-bottom: 5px; display: block;}
.dropdown-custom .dropdown-menu.show li:hover { background: #CCC }
header:not(.homepage) .menu-wrapper .menu-block .dropdown.account a {color:#333331;}
#form-currency button { border: none; background: none;     padding-top: 5px; padding-bottom: 5px; }
.breadcrumb svg {    margin-top: -6px;   display: inline-block;}
.breadcrumb li:first-child a:before {display: none}
.breadcrumb a:before { content:""; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDUgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01IDVMMC42MTQwMzUgMTBMLTMuMDU5OGUtMDggOS4zTDMuNzcxOTMgNUwtNC4wNjUxNmUtMDcgMC43TDAuNjE0MDM1IC0yLjY4NDAzZS0wOEw1IDVaIiBmaWxsPSIjOUE5QTlBIi8+Cjwvc3ZnPgo=) 0 0 no-repeat; width: 5px;
    height: 13px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 7px;}
.breadcrumb a { color:rgba(154, 154, 154, 1); margin-right: 10px; font-size: 12px; vertical-align: bottom; line-height: normal;}
.breadcrumb-block h1,.breadcrumb-block .h1 {  padding-bottom: 16px;}
.pagination { justify-content: space-between; flex-wrap: wrap;}
.pagination div.middle {display: flex}

.pagination div.middle div  { display: flex; width: 30px; height: 30px; border-radius: 5px; text-align: center; align-items:center; margin: 0 3px}
.pagination div.middle div.active, .pagination div.middle div:hover {background: #333331; color:#FFF;}
.pagination div.middle div:hover a {color: #FFF}
.pagination div a{ display: block;  width: 100%; color:#333331; font-weight: 500}
.pagination div.middle div span{ display: block; width: 100%; }
/*cart*/
#tmd_cart a { color:#333331;}
#final-button { }
.clear-cart {font-size: 14px; cursor: pointer;}
/* footer */
footer { background: #333331; }
footer a, footer { color:#FFF; }
footer a { font-size: 14px;line-height: 21px;}
footer .title {font-family: 'Geologica';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 24px;
text-transform: capitalize;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 9px;
}
footer ul { list-style-type: none; margin: 0; padding: 0 }
footer ul li {line-height: 2; }
footer .social a { margin: 0 10px }
.site-info {text-align: right;}

.account-menu a {margin-bottom: 27px}
.account-menu a svg {margin-right: 15px;vertical-align: middle;margin-top: -1px;}
.minus, .plus {cursor: pointer;}
#cookieconsent a { color:#FFF; text-decoration: underline; }
/**home */
body.common-home { background-repeat: no-repeat }
.logo a, #logo a {display: block; transition: all 0.5s ease; padding:20px 0;}
#logo a:hover {transform: scale(1.1);}
.sticky .logo a {display: block; }
.menu-block {  border-radius: 5px; padding:0px; ; }
.notification-bar {background:#E94F1B; color:#FFF; font-size:14px; padding:15px 10px;}
.notification-bar .phone a {color:#FFF; font-weight: bold;}
.menu-wrapper {background: #333331;}
.account.dropdown { cursor: pointer; }
.slogan-wrapper {overflow:hidden; height: 41vh;position: relative;}
.slogan1 { font-family: "Geologica", sans-serif; font-size: 4.4rem; line-height: normal; font-weight: bold; color:#FFF; text-align: center; position: absolute; bottom: 0;    left: 0;
    width: 100%;    padding: 0 10%;}
.slogan1 p { position: relative; z-index: 2 }
.slogan1:after { content: url(/image/catalog/home/long-arrows.png); position: relative;
    z-index: 1;
    left: 27%;
    bottom: 10%;
    display: block;
    margin-top: -65px; }
section.diller { padding:100px 35px; }
.iSearchBoxWrapper {max-width: 1080px; margin: 14vh auto 30px; color:#FFF; background: var(--bc-red); border-radius: 5px; padding: 30px}
#searchLeft .btn{background: #FFF; border-top-left-radius: 0; border-bottom-left-radius: 0;  border-top-right-radius: 5px; border-bottom-right-radius: 5px}
#searchLeft input{border: 0}
.brands .slick-slide { margin:0 14px;}
.title {font-family: "Geologica", sans-serif; font-size: 3rem; font-weight: bold; line-height: normal; line-height: 3rem;position: relative; z-index: 2}
.title2 { font-size: 30px;}
.title20 { font-size: 20px; font-weight: 700}
.bg-red .has-error { background: #FFF!important; color:#333331!important; }
/*:not(.bg-red) .has-error { background: var(--bc-red)!important; color:#FFF!important; }*/
.home-img1 {margin-top: -50px}
.advantage-item {display: flex;  margin-bottom: 15px;}
.advantage-item .num {font-weight: 800; font-size: 55px; margin-right: 15px; }
.advantage-item .text {font-weight: 300; max-width: 210px; font-size: 20px; line-height: 24px;}
.advantages .container {position: relative;}
.advantages .arrow {position: absolute; top:calc(50% - 40px); right: 20px}
section.bg-red .form-builder { background: none!important; box-shadow: none!important }
section.bg-red .form-builder input, div.bg-red input { background: #fff; border:0; color: rgba(0, 0, 0, 0.7)}
section.bg-red .form-builder a.submit { background: #333331; color:#FFF; margin-top: 60px }
section.bg-black .slider .item a {color:#FFF;}
section.bg-black .slider .item a .text {display: block; margin-top: 10px}
.instagram-story a {display: block;}
.instagram-story a img {border: 2px solid #FFF; display: block; opacity: 0.8}
.instagram-story a:hover img {opacity: 1}
/* modals */ 
.modal-body.container::-webkit-scrollbar{ width: 3px; }
.modal-body.container::-webkit-scrollbar-thumb { background-color:     #FFF;  border-radius: 2px; width:3px;}
.modal-body.container::::-webkit-scrollbar-track { background-color:     #FFF;  border-radius: 2px; width:3px;}
/*nav*/
.popup-menu, .popup-menu2 {cursor: pointer;}
.popup-menu2 { display: none }
#modalMenu .modal-dialog .modal-content{ border-radius: 0; background: var(--bc-red) }
.closewhite {background: #FFF; border-radius: 100%; padding: 4px;}
#modalMenu .modal-dialog li a { font-size: 38px; font-family: "Geologica", sans-serif; line-height: 51px}

.sticky #navbar-wrap {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.98);
  -webkit-box-shadow: 0 7px 12px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 7px 12px 0 rgba(0, 0, 0, 0.16);
  z-index: 99;
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
/* header */ 
.background-video-container { position: absolute; top:0; width: 100%; height: 100%; left:0; overflow: hidden;background: #333331;}
.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    
}
.background-overlay {position: absolute; top: 0;width: 100%; height: 100%; left: 0; background: rgba(0,0,0,0.5); z-index: 1}
.common-home #one {height:26vh;}
#one {position: relative; z-index: 10}
#one+section {position: relative;z-index: 2 ; margin-top: -7px;}
header {position: relative;z-index: 100}
.search-wrapper { width: 29%;
    margin-left: auto;
    margin-right: 20px;display:none }
.menu-item-download {display: none}
header.sticky #logo a, header:not(.homepage) #logo a, .logo a { }
header.sticky .notification-bar, header:not(.homepage) .notification-bar { }
header.sticky .hideonstick, header:not(.homepage) .hideonstick {display: none}
header.sticky .notification-bar .wrapper, header:not(.homepage) .notification-bar .wrapper {margin-top: 5px!important; margin-bottom: 5px!important}
header.sticky .menu-wrapper, header:not(.homepage) .menu-wrapper { }
header.sticky .menu-wrapper .menu-block, header:not(.homepage) .menu-wrapper .menu-block {background: none; margin: 0!important; padding-left: 0!important;padding-right: 15px!important}
header.sticky .menu-wrapper .menu-block a, header:not(.homepage) .menu-wrapper .menu-block a {color: #FFF}
.menu-block a.dropdown-item {color:#333331!important;}
header.sticky #cart-total, header:not(.homepage) #cart-total {border:1px solid #FFF}
header.sticky .menu-item-download, header:not(.homepage) .menu-item-download {display: block}
header.sticky .btnDownload, header:not(.homepage) .btnDownload {display: none}
header.sticky .popup-menu, header:not(.homepage) .popup-menu, .popup-menu2 {cursor: pointer;}
header.sticky .popup-menu svg path, header:not(.homepage) .popup-menu svg path, .popup-menu2 svg path {fill:#FFF;}
header.sticky .search-wrapper, header:not(.homepage) .search-wrapper {display: block}
.right-wrapper a:hover svg{ box-shadow: 0px 0px 10px #00000082; border-radius: 100%;}


.brands .slick-slide .item a {display:block; width: 288px!important; max-width: 100%}
.brands .slick-slide .item img {width:auto;margin: 0 auto;max-width: 100%}
nav#top { margin-left: 20px; padding: 0 }
#buymap {width: 100%; height: 560px;}
.boxmap .title {color: #333331; font-size: 20px}
.boxmap .phone {margin-top: 5px}
/* news */ 
.news-thumb {position: relative; margin-bottom: 24px; border-radius: 15px; overflow: hidden;display: block;}
.news-thumb:after {content:""; background: linear-gradient(360deg, #000000 21.88%, rgba(0, 0, 0, 0) 84.58%);width:100%; height: 100%; top:0; left:0; position: absolute;}
.news-thumb .caption {position: absolute; bottom:0; left:0; padding: 30px; z-index: 10; color:#FFF;}
.news-thumb .caption h4 { color:#FFF; font-size: 20px; font-weight: 700; display: block; margin-bottom: 30px}
.news-thumb:hover .caption h4 {color: var(--bc-yellow)}
.information-news-info h1, .information-news-info .h1 { line-height: 3.8rem}
/* product list*/
.stock-status { color: var(--bc-yellow); }
.stock-status0 {color:var(--bc-red);}
.stock-status.outofstock, .stock-status0 { color: var(--bc-red); }
.stock-status.instock, .stock-status501 { color: var(--bc-green); }
.product-page .stock-status {font-weight: bold;}
.product-thumb { position: relative; background:#FFF; border-radius: 15px; height: 100%; padding:20px 30px 30px 30px; color:#FFF; overflow: hidden; border:1px solid #D3D3D3;}
.product-thumb:after { content:""; position: absolute; top:0; left:0; width:100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 53.24%, #000000 100%); z-index: 2}
.product-layout { margin-bottom: 15px;  }
.product-thumb .image {position: relative; z-index: 1}
.product-thumb p {margin-bottom: 0}
.product-thumb .price {font-weight: 700}
.product-thumb .caption { transition: all 0.5s ease; z-index: 100; transform: translatey(104px); }
.product-thumb .button-group { visibility: hidden;    transition: all 0.5s ease; }
.product-thumb .stock-status { font-size: 12px; font-weight: 700}
.product-thumb a { color:#FFF;}
.product-thumb a.name {display: block; margin: 15px 0; height: 60px; overflow: hidden;}
.product-thumb:hover:after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 7.55%, #000000 85.05%); border-radius: 15px; } 
.product-thumb:hover .caption { transform: translatey(0);}
.product-thumb:hover .caption .button-group { visibility: visible;}
.product-thumb .addtocart {padding-top: 4px; padding-bottom: 4px; height: 48px;}
.product-thumb .price-old {color: #9A9A9A; font-size: 12px; margin-left: 10px; position: relative;}
.product-thumb .price-old:after { content: "";     border-bottom: 1px solid #9A9A9A;
    transform: rotate(171deg);
    position: absolute;
   width: 114%;
    top: 7px;
    left: -4px;}    
.product-thumb .btn-red:hover {background: #FFF!important; color:#333331!important;}
.hidprodlink {    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;}    
.hidprodlink span{ visibility: hidden;  }
/* product-page */ 
.product-page h1 { font-size: 30px; font-weight: 800; margin-bottom: 15px}
.product-page .price-block { font-size: 30px; font-weight: 700; line-height: normal; padding-top: 15px }
.product-page .stock-status { margin-top: 15px; margin-bottom: 30px}
.product-page .old-price {color: #9A9A9A; font-size: 23px; margin-left: 20px; position: relative;}
.product-page .old-price:after { content: "";     border-bottom: 2px solid #9A9A9A;
    transform: rotate(171deg);
    position: absolute;
    width: 127%;
    top: 13px;
    left: -12px;}
.product-page .mainImage img, .product-page .thumbs img {background: #FFF; border: 1px solid #D3D3D3}    
.slick-vertical .item {margin-top: 7px; margin-bottom: 7px}

.qty-block input.quantity { padding-left: 0;padding-right: 0;text-align: center; border:0; background: var(--bc-lightgrey)}
.qty-block .input-group .input-group-text:first-child {border:none; background: var(--bc-lightgrey); border-top-left-radius: 25px; border-bottom-left-radius: 25px; padding-left: 15px; }
.qty-block .input-group .input-group-text:last-child   {border:none; background: var(--bc-lightgrey); border-top-right-radius: 25px; border-bottom-right-radius: 25px; padding-right: 15px;}
.qty-block .input-group .input-group-text {padding-top: 12px; padding-bottom: 12px;}
#product #button-cart {padding-top: 4px; padding-bottom: 4px; height: 48px;}
header .nav-link {color:#FFF;padding: 30px!important}
header .nav-link:hover {background:#2B2B29; color:#FFF;font-weight: 700}
.product-page .nav-pills .nav-link {color:#9A9A9A;font-size: 20px; font-weight: 300;}
.product-page .nav-pills .nav-item:first-child .nav-link {padding-left: 0}
.product-page .nav-pills .nav-link.active,.product-page .nav-pills .show>.nav-link {background: none; color:#333331; font-weight: bold}
.product-page h2.light {font-size: inherit; font-weight: 300; font-family: Inter, sans-serif}
.product-page .params {}
.product-images {    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    
    margin: 0 0 -1px;
  }
.product-images .thumbs { position: relative;
    width: 90px;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}  
.prev_slide, .next_slide {text-align: center; display: block;}
.product-images .mainImage {     position: relative;
    -ms-flex: 1;
    flex: 1;
    max-width: calc(100% - 110px);}    
#form-review { background: var(--bc-lightgrey);padding: 30px 30px 70px 30px;}
#form-review .chooseRating {cursor: pointer;}
#form-review label {font-size: 14px; color: var(--bc-grey); font-weight: 700; margin-bottom: 6px}
#form-review button {margin-top: 70px}
/* .widget-block */
.widget-block {padding: 20px 30px 30px 30px; border: 1px solid #D3D3D3; border-radius: 15px; font-size: 14px; margin-bottom: 20px}
.widget-block .heading {font-size: 20px; font-weight: 700; line-height: 30px; margin-bottom: 15px}
.widget-block.category a { color:#333331; display: flex; margin-bottom: 15px}
.widget-block.category .list-group span.st { content:""; border: 1px solid #D3D3D3; border-radius: 2px; width:17px; height: 17px; display: inline-block; vertical-align: middle; margin-right: 15px; flex-shrink:0; }
.widget-block.category a.active span.st {background: var(--bc-red); border-color: var(--bc-red)}
.widget-block.category a.active {font-weight: 700}
#ocfilter .list-group .list-group-item { padding: 20px 30px 30px 30px; border: 1px solid #D3D3D3; border-radius: 15px; font-size: 14px; margin-bottom: 15px }
/* form build */
.form-builder .field-block {
		display: block;
		min-width: 150px;
		padding: 0px 0 15px;
		vertical-align: top;
	}
	 
	.form-builder .sub-text {
		font-size: 11px;
		margin-bottom: 5px;
	}
	.form-builder input[type="checkbox"], .form-builder input[type="radio"] {
		cursor: pointer;
		margin-right: 2px;
	}
	.form-builder input[type="text"] {
		margin: 0;
	}
	.form-builder textarea {
		height: 100px;
	}
	.form-builder [readonly] {
		cursor: auto;
		
	}
	 
	.required-field {
		color: #F00;
	}
	.field-group {
		font-style: italic;
	}
	.other-response {
		margin-top: 5px !important;
	}
 
/*category wall*/
.cat-wall .item { position: relative; overflow: hidden; margin:10px auto; border-radius: 15px; font-size: 24px; line-height: normal;}
.cat-wall .item a:after {    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.53%, #000000 94.69%);
    display: block;
    z-index: 1;
    top: 0;
    left: 0;
    transition: all 0.5s ease;
}
.cat-wall .item a:hover:after { background: rgba(0, 0, 0, 0.8); }
.cat-wall .item span {position: absolute; bottom: 35px;color:#FFF; z-index: 2; display: block; padding: 5px 50px 5px 30px; transition: bottom 0.5s ease; width: 100%}
.cat-wall .item a:hover span { left: 0; bottom: 46%}
.cat-wall .item a:hover span:after {content:''; position: absolute; background: url(../image/arr_right.svg) 0 0 no-repeat; width: 16px;
    height: 44px;
    right: 32px;
    display: block;
    top: calc( 50% - 22px);
    background-size: contain; }
/*cart */
.image-cart { border-radius: 15px; background: var(--bc-lightgrey); }
.cart-header {cursor: pointer; position: relative;}
#cart-total {     position: absolute;
    display: flex;
    border-radius: 100%;
    font-size: 10px;
    font-weight: bold;
    background: #fecb04;
    color: #333331;
    width: 20px;
    height: 20px;
    right: -7px;
    align-items: center;
    justify-content: center;
    top: 0;}
#tmd_login {margin-top: 20px}

@media (max-width: 580px) {
  .slogan-wrapper { height:auto; }
  .common-home #one {height: auto}
 .pt-100 {padding-top: 30px}
 .pb-100 {padding-bottom: 30px}
 .pt-80 {padding-top: 20px}
 .pb-80 {padding-bottom: 20px}
 .mb-100 {margin-bottom: 30px}
 .fullscreen-bg__video {width: auto;height: 100%}
 .breadcrumb-block h1::after, .breadcrumb-block .h1::after { margin-left: 0; bottom: 5px; right:0; }
 h1,.h1 {font-size: 30px}
 body:not(.common-home) header {    margin-bottom: 59px;}
 .brands .slick-slide .item a {width: auto!important}
 .f70 { font-size: 30px}
 .slogan1 {position:relative; font-size: 3rem; margin-top: 5vh; padding-top: 0;padding-bottom: 10%;}
 .cat-wall .item span { font-size: 16px;padding: 5px 10px}
 .title {font-size: 2rem; line-height: 2rem}
 .arrows-bottom:after { position: relative; left: auto; background-size: contain; width: 100%}
 .iSearchBoxWrapper { margin-top: 0px; }
 .home-img1 { margin-top: 20px; }
 .advantage-item {margin-left: 23px}
 .advantage-item .num {width: 41px}
 .product-images .mainImage { max-width:100%;}
 .video .slick-arrow {display: block!important}
 
 header.sticky .search-wrapper, header:not(.homepage) .search-wrapper { display: flex; align-items:center; order:2;    
    position: absolute;
    bottom: -51px;
    left: 0;}
 header.sticky .menu-wrapper .menu-block a, header:not(.homepage) .menu-wrapper .menu-block .dropdown-menu a {color:#333331;}
 
 .search-wrapper > div {width: 100%}
 .right-wrapper a > svg {width:25px; height: 25px;}
 #cart {margin-right: 10px; margin-left: 6px;}
 #cart-total { right:-11px; top:-7px;}
 /*.notification-bar {display: none}*/
  .dropdown-custom .dropdown-toggle, .dropdown-custom > span {color:#FFF}
header.homepage:not(.sticky) .dropdown-custom .dropdown-toggle { color: #333331;}
 header.sticky .menu-wrapper .menu-block, header:not(.homepage) .menu-wrapper .menu-block {padding-right: 0!important}
 /*header.sticky #logo a,*/ header:not(.homepage) #logo a, .logo a /*, #logo a*/ { width:110px; background-size: contain; height:23px; }

 #form-currency strong { font-weight: 300!important }
/* .menu-block {padding: 20px}*/
 .dropdown-custom .dropdown-toggle {font-weight: 300}
 .search-wrapper {width: 100%;
    padding: 15px 20px 15px 0px;
    background: #333331;
    margin-right: -20px;
    margin-bottom: -19px;}
  
}
@media (min-width: 1435px) {
  .fullscreen-bg__video {width: 100%; height: auto;}
}
@media (max-width: 767px) {
  nav#top {display: none}
  .popup-menu2 {display: inline-block; padding: 10px 15px; margin-right: 10px;} 
  .home-img1 { margin-top: 20px; }
  .brands .item{ width:50%; display: inline-block;  }
  .brands .item img {max-width: 100%}
  .f86 { font-size: 26px}
  .f48 { font-size: 12px}
}
@media (min-width: 768px) and (max-width: 991px) {
  .container {max-width: 90%}
  .title {font-size: 2.3rem}
  .f86 { font-size: 28px}
  .f48 { font-size: 16px}
}

@media (max-width: 450px) {
  .main-img .f20{ font-size: 12px }
  .main-img .f20.pt-80{ padding-top: 20px }
  .main-img .f20 .col{ margin-bottom: 5px }
  .main-img .f86 {padding-top: 30%!important; padding-bottom: 20%}
  .main-img img {display: none}
  .main-img >  div { position: relative!important; display: block!important }
  .main-img .mobile_bg { width:100%; height:100%; position: absolute;     background-size: 173%;
    background-repeat: no-repeat;
    background-position: center top; }
  .main-img .txt {border-left: 1px solid #FFF;
    padding: 0 10px!important; margin-bottom: 20px}
  .main-img .txt .col {margin-bottom: 10px}
  .main-img .txt .col:last-child {margin-bottom: 0px}
}

@media (max-width: 370px) {
  #logo {width:68%;}
  #logo svg {width: 100%}
}
.box-anim {
  display: block; position: relative;
  border: 1px solid #333331;
  z-index: 0;
  transition: all 0.3s ease;
  opacity: 1;
  margin-right: -1px;
      padding: 10px;
}
.box-anim:hover {
  z-index: 10;
  border: 1px solid #fff;
}
.box-anim:before, .box-anim:after {
  content: "";
  display: block;
  position: absolute;
  background: #333331;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  opacity: 1;
}
.box-anim:before {
  width: calc(100% + 3px);
  height: 100%;
  z-index: 1;
  transition: height 1s ease, opacity 0.8s ease;
}
.box-anim:after {
  height: calc(100% + 2px);
  width: 100%;
  z-index: 1;
  transition: width 1s ease, opacity 0.8s ease;
}
.box-anim:hover:before, .box-anim:focus:before {
  transition: height 0.2s ease, opacity 0.3s ease;
  height: 85%;
  opacity: 0.7;
}
.box-anim:hover:after, .box-anim:focus:after {
  transition: width 0.2s ease, opacity 0.3s ease;
  width: 85%;
  opacity: 0.8;
}
.box_image {
  
  width: 60%;
  height: auto;
  will-change: width;
 
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.5s ease;
  z-index: 2;
}
.box_image img {position: relative;
    z-index: 111;
    background: #333331;
    }

#lang-popup .modal-dialog {max-width: 400px; }