@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap&subset=cyrillic');

/**

@font-face {
	font-family: 'Akzidenz-Grotesk Pro';
	src: url('../fonts/AkzidenzGroteskPro-Regular.eot');
	src: local('Akzidenz-Grotesk Pro Regular'), local('AkzidenzGroteskPro-Regular'),
		url('../fonts/AkzidenzGroteskPro-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/AkzidenzGroteskPro-Regular.woff') format('woff'),
		url('../fonts/AkzidenzGroteskPro-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Akzidenz-Grotesk Pro';
	src: url('../fonts/AkzidenzGroteskPro-Light.eot');
	src: local('Akzidenz-Grotesk Pro Light'), local('AkzidenzGroteskPro-Light'),
		url('../fonts/AkzidenzGroteskPro-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/AkzidenzGroteskPro-Light.woff') format('woff'),
		url('../fonts/AkzidenzGroteskPro-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

*/


* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none}
html, body {height: 100%; width: 100%}
/**body {font-family: 'Akzidenz-Grotesk Pro' Montserrat; line-height: 1.5; color:#444; font-weight: 300; padding-top: 0px !important; font-size: 16px; overflow-x: hidden}*/
body {font-family: 'Montserrat', sans-serif; line-height: 1.5; color:#444; font-weight: 400;  font-size: 16px; overflow-x: hidden}
body.lock {overflow: hidden}
.page {transition: transform 300ms; padding-top: 80px}
/** .page.open {transform: translateX(-350px)} */

.page.blur {filter: blur(5px)}
body .admin-bar {position: fixed !important; top: unset !important; bottom: 0px}
body .admin-bar .admin-bar__elem--settings {display: none !important}
body .admin-bar .admin-bar__elem--btns {margin-left: auto}
body .admin-bar .admin-bar__item {border: none !important; margin-left: 10px}
body .admin-bar .admin-bar-link__title {color: #fff !important}
body .admin-bar-link__icon {fill: #fff !important}

a {outline: none; text-decoration: none; color: inherit; cursor: pointer}
b, strong {font-weight: 500}
p + p {margin-top: 15px}

.currency-b {background: url(../images/rub-b.svg) 50% 50% no-repeat; background-size: contain; width: 1em; height: 1em; display: inline-block; vertical-align: middle}
.currency-w {background: url(../images/rub-w.svg) 50% 50% no-repeat; background-size: contain; width: 1em; height: 1em; display: inline-block; vertical-align: middle}

.link {border-bottom: 1px dashed #444; transition: 300ms}
.link:hover {border-bottom: 1px solid #444}

label {font-size: 14px}
label abbr {text-decoration: none}

.cover {background-size: cover; background-position: 50% 50%; background-repeat: no-repeat}

.ds {user-select:none; -webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none}
h1, h2, h3 {font-weight: 300}

img, svg {height: auto; max-height: 100%; max-width:100%}
table {border-collapse: collapse; width: 100% !important}




input, select, textarea, button {-webkit-appearance: none; -moz-appearance: none; transition: color 300ms, background-color 300ms; font-family: inherit; font-weight: 300}
input[type=text], input[type=tel], input[type=email], input[type=password] {display: block; width: 100%; font-size: 15px; border:1px solid rgba(0,0,0,0.1); padding: 0px 10px; line-height: 38px; height: 40px; background: #fff}
textarea {display: block; width: 100%; border:1px solid rgba(0,0,0,0.1); padding: 10px; resize: none; height: 100px; font-size: 15px}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus, input[type=password]:focus {border-color: #444; box-shadow: 0px 0px 0px 1px #444}
input[type=submit], .cta {border:2px solid #444; color: #444; line-height: 36px; height: 40px; text-align: center; width: 200px; margin: 0px auto; text-transform: uppercase; font-size: 13px; background: #fff; display: block; margin-top: 30px}
input[type=submit]:hover, .cta:hover {background: #444; color: #fff}
.input-holder {margin-top: 30px; position: relative}
.input-holder label {position: absolute; font-size: 15px; top:9px; left: 10px; color: #777; z-index: 0}
.input-holder input {position: relative; z-index: 1}
input[type=checkbox] {-webkit-appearance: none; display: inline-block; vertical-align: middle; width: 11px !important; height: 11px; margin-right: 10px !important; position: relative; border-radius: 1px; margin-left: 3px}
input[type=checkbox]:before {border:1px solid #444; content: ''; display: block; width: 15px; height: 15px; position: absolute; top:-3px; left: -3px; border-radius: 1px} 
input[type=checkbox]:checked {background: #444}
select {border: 1px solid rgba(0,0,0,0.1); background-color: #f5f5f5; line-height: 38px; height: 40px; background-image: url(../images/select.svg); background-position: right 10px center; background-repeat: no-repeat; background-size: 12px; color: #555; font-family: inherit; font-size: 14px; padding: 0px 10px; width: 100%; border-radius: 0px}
input[type=radio] {-webkit-appearance: none; display: inline-block; vertical-align: middle; width: 15px; height: 15px; border-radius: 50%; border:2px solid #fff; box-shadow: 0px 0px 0px 1px #444; margin-right: 10px; margin-left: 2px}
input[type=radio]:checked {background: #444}

.validate:valid {background: url(../images/ok.svg) 98% 12px no-repeat; background-size: 15px; padding-right: 25px !important}


.button, input[type=submit] {display: inline-block; font-size: 12px; font-weight: 500; text-transform: uppercase; padding: 0px 10px; border:1px solid #444; background: transparent; color: #444; transition: 300ms; width: 200px; cursor: pointer; margin-top: 15px ; border-radius: 1px; height: 40px; line-height: 38px; text-align: center}
.button:hover, button:hover, input[type=submit]:hover, .button.active {background: #444; color: #fff}

.buttons {width: 100%}
.buttons .button, .buttons .link {margin-top: 30px !important}
.buttons .button + .button, .buttons .button + .link, .buttons .link + .link {margin-left: 10px}

.delivery-details-list {margin-bottom: 20px}
.delivery-details-list .sdek-choose-samovivoz {display: block; font-size: 10px; font-weight: 500; text-transform: uppercase; padding: 0px 10px; border:1px solid #444; background: transparent; color: #444; transition: 300ms; cursor: pointer; margin-top: 10px; border-radius: 1px; height: 24px; line-height: 22px; text-align: center}
.delivery-details-list .sdek-pvz-info {margin: 0px; border: none}
.curoer-error, input[name=curoer-error] {display: none}
.delivery-summ {font-weight: 500}
.CDEK-widget__popup-mask {z-index: 9000 !important}

.half-25 {width: calc(25% - 40px)}
.half-30 {width: calc(30% - 10px)}
.half-40 {width: calc(40% - 10px)}

.half-50 {width: calc(50% - 10px)}
.half-60 {width: calc(60% - 10px)}
.half-75 {width: calc(75% - 10px)}


.max {margin: 0px auto; max-width: 1250px; padding: 0px 10px; box-sizing: border-box}
.flex-wrap {display: flex; display: -webkit-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between}
.flex-nowrap {display: flex; display: -webkit-flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: space-between; -webkit-justify-content: space-between}
.flex-center {display: flex; display: -webkit-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items:center}
.flex-start {align-items: flex-start; -webkit-align-items: flex-start}
.flex-inline {display: flex; display: -webkit-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; -webkit-justify-content: flex-start; align-items: flex-start; -webkit-align-items: flex-start}


header .max {height: 100%}
header .cart {border: 1px solid transparent; line-height: 40px; padding: 0px 10px}
header .cart:hover {border-color: #444; transition: 300ms}
.small-cart-icon {width: 24px; height: 24px; display: inline-block; vertical-align: middle; background: url(../images/cart.svg) 50% 0% no-repeat; background-size: contain; margin-right: 5px}
.countsht {font-size: 13px; font-weight: 500}




/* HEADER */
header {position: fixed; top:0px; height: 80px; z-index: 1000; transition: 300ms; background: #fff; left: 0px; width: 100%}
header li {display: inline-block; margin: 0px 5px; vertical-align: top; transition: 300ms}
header li a {display: block; font-size: 13px; text-transform: uppercase; transition: 300ms; font-weight: 500; border: 1px solid transparent; padding: 0px 10px; color:#444; line-height: 40px; border-radius: 1px}
header li:hover a {border-color:#444; color: #444}
header li.active a {border-color:#444; color: #444}

header .sub_menu {display: none}
.logo {width: 130px; display: block; height: 60px; background: url(../images/west4.svg) 0% 50% no-repeat; background-size: contain}

.mobile-menu {position: absolute}

.mobile-menu-icon {display: none; height: 20px;
    position: relative;
    padding-right: 25px;
    line-height: 20px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}
.mobile-menu-icon span {background: #444; height: 2px; width: 10px; position: absolute; display: block; transition: 300ms}
.mobile-menu-icon span:nth-of-type(1) {right: 0px; top:5px}
.mobile-menu-icon span:nth-of-type(2) {right: 7px; top:5px}
.mobile-menu-icon span:nth-of-type(3) {right: 0px; bottom:5px}
.mobile-menu-icon span:nth-of-type(4) {right: 7px; bottom:5px}
.mobile-menu-icon.active span:nth-of-type(1) {transform: rotateZ(-45deg)}
.mobile-menu-icon.active span:nth-of-type(2) {transform: rotateZ(45deg)}
.mobile-menu-icon.active span:nth-of-type(3) {transform: rotateZ(45deg)}
.mobile-menu-icon.active span:nth-of-type(4) {transform: rotateZ(-45deg)}


.cart-block {position: relative; color: #fff; font-size: 14px}
.cart-block i {font-size: 24px; vertical-align: middle}
.cart-block b {vertical-align: middle}
/* HEADER */


.modal-auth {max-width: 600px; margin: 100px auto 50px auto}
.modal-auth .alert {max-width: 600px; left: 50%; transform: translateX(-50%); top: 50px; position: absolute}
.modal-auth .logo {width: 200px; display: block; height: 80px; background: url(../images/west4.svg) 50% 50%/contain no-repeat; margin: 0px auto 40px auto}
.modal-auth .registration-form, .modal-auth .forgot-form {display: none}
.modal-auth .link {font-size: 14px; margin-left: 20px}
.modal-auth .form-list li {margin-top: 10px}

.first {margin-bottom: 40px}
.first .img {width: calc(50% - 10px)}
.first .text {width: calc(50% - 10px)}
.first .text a:not(.button) {text-decoration: underline}
.first .text .button {margin-right: 10px; transition: 300ms; border: 1px solid #444; line-height: 36px; display: inline-block; height: 38px; padding: 0px 10px; margin-top: 15px}
.first .text .button:hover {background: #444; color: #fff}


.inf-block {border: 1px solid #444; padding: 5px 0px; text-align: center; margin-bottom: 30px}
.form-block { width: 80%}

/* .left-block {width: 240px; position: relative; height: calc(100vh - 200px)} */
.center-block {width: 100%}
.left-block + .center-block {width: calc(100% - 280px)}
.center-block p img {width: 100%; height: auto; vertical-align: middle}
.learning .center-block p img {width: 292px; height: auto; vertical-align: middle}
.learning .center-block p.with-img {text-align: center}




.catalog {margin-bottom: 50px}
.content {min-height: calc(100vh - 310px)}
.content h1 {margin-bottom: 25px; font-size: 32px; line-height: 1; padding-bottom: 25px; border-bottom: 1px solid rgba(0,0,0,0.1); position: relative}

.content h2 {margin-top: 20px; margin-bottom: 5px; font-size: 28px}
.content h3 {margin-top: 5px; margin-bottom: 10px; font-size: 20px}

.left-block .inner {width: 240px; transition: 300ms; border-right: 1px solid #444; position: sticky; top: 125px;}
.left-block .inner::-webkit-scrollbar { /* 1 - скроллбар */
    width: 4px;
    height: 4px;
    background-color: #FFFFFF;
  }
  .left-block .inner::-webkit-scrollbar-thumb { /* 5 - ползунок */
    border-radius: 2px;
    background-color: #000;
  }
.mg-menu > li {display: block; max-width: 230px; position: relative}
.mg-menu > li + li {margin-top: 10px}
.mg-menu > li > a {padding: 5px 10px; font-size: 15px; font-weight: 500; border:1px solid transparent; display: inline-block; transition: 300ms; color: #444; border-radius: 1px}
.mg-menu > li > a:hover {border-color: #444}
.mg-menu > li.active > a {border-color: #444}
.mg-menu > li.active > .sub_menu, .mg-menu > li.open > .sub_menu {display: block !important}
.mg-menu > li > .sub_menu li {display: block; margin: 5px 0px 5px 15px; font-size: 13px}
.mg-menu > li > .sub_menu li.active {text-decoration: underline; font-weight: 500}
.mg-menu .slider_btn {position: absolute; width: 25px; height: 25px; left: -30px; top:15px; color: #fff; border-radius: 50%; background: url(../images/a-down.svg) #fff 50% 50% no-repeat; border: 1px solid #444; background-size: 12px; transition: 300ms; cursor: pointer}
.mg-menu li.open .slider_btn, .mg-menu li.active .slider_btn {transform: rotateZ(180deg)}

.mg-menu > li > .submenu li {display: block; margin: 0px 0px 5px 25px; font-size: 13px}
.mg-menu > li > .submenu li.active {text-decoration: underline; font-weight: 500}

.mg-pager {text-align: center; margin:20px 0px}
.mg-pager ul {display: inline-block}
.mg-pager .allPages {display: none /* display: inline-block; margin-right: 20px */}
.mg-pager li, .mg-pager .pagination {display: inline-block}
.mg-pager a {display: block; line-height: 25px; font-size: 14px; width: 50px; border-radius: 1px; text-align: center; border:1px solid transparent}
.mg-pager a:hover {text-decoration: underline}
.mg-pager a.active {background: #444; color: #fff; border-color: #444; text-decoration: none}
.mg-pager .navButton {display: none}


.dark .left-block .inner {border-right-color: #fff}
.dark .mg-menu li a {color: #fff; text-shadow: 0px 0px 1px #555}
.dark .mg-menu > li > a:hover {border-color: #fff}
.dark .mg-menu .inner.normal {border-right-color: #444}
.dark .left-block .inner.normal li a {text-shadow: none; color: #444}
.dark .left-block .inner.normal li a:hover {border-color: #444}

/*
.mg-menu.fix li a {color: #444 !important; text-shadow: none !important}
.cats-menu.fix > li.current-menu-item > a, .cats-menu.fix > li.current-menu-parent > a {border-color: #444 !important; color: #444}
.cats-menu li ul li a {font-size: 13px; margin-left: 10px}
.learning .cats-menu li.menu-item-has-children:after {content: '+'; display: block; position: absolute; width: 20px; height: 20px; border-radius: 50%; right: 13px; top: 15px; border:1px solid #444; text-align: center; line-height: 18px}
*/

.mg-error, .order-notice {background: red; color: #fff; line-height: 40px; text-align: center; margin: 0px auto 20px auto; display: block}
.mg-success {background: green; color: #fff; line-height: 40px; text-align: center; margin: 0px auto 20px auto; display: block}
.mg-error a, .mg-success a {text-decoration: underline}

.alert {position: fixed; z-index: 1000; top: 80px; width: 100%; padding: 0px; background: red; color: #fff; font-size: 14px; text-align: center; left: 0px}
.alert .max {position: relative; line-height: 30px; height: 30px}
.alert.success {background: #14a914}
.alert a {text-decoration: underline}
.alert .close {position: absolute; cursor: pointer; top: 10px; right: 10px; background: url(../images/close-w.svg) 50% 50% no-repeat; background-size: contain; width: 12px; height: 12px}


.attention {background: #f5f734; height: 40px; line-height: 40px; text-align: center; font-size: 14px}

.notify {border-bottom: 1px solid #444; border-top: 1px solid #444; padding: 10px 0px}




/* SPOLER */
.spoiler-title {background: #f5f5f5; height: 50px; display: flex; align-items: center; padding: 0 25px; border-radius: 2px; transition: color 250ms, background-color 250ms; position: relative}
.spoiler-title h2 {margin: 0}
.spoiler-title:hover {background: #444; color: #fff; cursor: pointer}
.spoiler-title:after {background: #f5f5f5 url("data:image/svg+xml,<svg viewBox='0 0 6 10' xmlns='http://www.w3.org/2000/svg'><path fill='%23444' d='M5.727,5.845 L1.531,9.733 C1.183,10.055 0.619,10.055 0.270,9.733 C-0.077,9.411 -0.077,8.889 0.270,8.567 L4.132,4.988 L0.252,1.391 C-0.096,1.069 -0.096,0.546 0.252,0.224 C0.600,-0.098 1.164,-0.098 1.512,0.224 L5.708,4.113 C5.951,4.338 6.014,4.659 5.917,4.943 C6.053,5.243 5.990,5.601 5.727,5.845 Z'/></svg>") 50% 50% no-repeat; position: absolute; right: 15px; content: ''; background-size: 6px; transform: rotateZ(90deg); border: 1px solid #444; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; top: 15px; border-radius: 50%}
.spoiler-content {display: none; padding: 10px 0 20px 0}
.spoiler-content table {border: none}
.spoiler-content td {border: none; padding: 10px 25px}
.spoiler-content tr:nth-of-type(odd) td {background: #f5f5f5}
.spoiler-content strong {font-weight: 700}
.spoiler + .spoiler {margin-top: 10px}
/* SPOLER */





/*----------------------------БЛОГ------------------------------------------------*/

/*-----------СПИСОК СТАТЕЙ-----------*/
.mg-blog-news {
    padding: 20px 0 25px 0;
  
   position: relative;
    
    transition: box-shadow .3s ease-out,transform .25s ease-out;
}

.mg-blog-news:hover {
    
    transform: translateY(-5px);
}


.mg-blog-news .mg-news-info {
width: 65%;

}


.mg-blog-news .mg-main-news-item {
width: 30%;

}

.mg-blog-news .mg-main-news-item img {
border-radius: 10px;

}

.mg-blog-news .mg-news-title{
    text-decoration: none;
    font-size: 20pt;
    font-weight: 500;
    margin: 0 0 20px 0;

}

.mg-blog-news .mg-news-main-desc{
 text-decoration: none;
    font-size: 14pt;
    font-weight: 100;
  padding: 0 0 10px 0;
  line-height: 1.5;
}
/*-----------СПИСОК СТАТЕЙ-----------*/

/*-----------СТАТЬЯ-----------*/

.main-news-img{
 padding: 0 0 40px 0;
 
  text-align: center;
}

.main-news-img img {
  float: center;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 -webkit-transition: all 0.2s ease-out;
 }
.main-news-img img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 }

.main-news-img img{
  border-radius: 10px;
}


/*-----------СТАТЬЯ-----------*/


@media screen and (max-width:767px) {
  
  table{
  width: 100% !important;
  }
  
  
   .mg-news-details .mg-news-info .mg-news-full-desc img {
        
     width: 100% !important; 
     margin: 10px 0 10px 0 !important;
     float: left !important;
        
        
    }

.mg-blog-news .mg-news-info {
width: 100%;
   padding: 5px 0 25px 0;

}


.mg-blog-news .mg-main-news-item {
width: 100%;

}
  
  .main-news-img{
 padding: 0 0 25px 0;
    height: auto;
  
  
}
}

/*-----------------------------БЛОГ-----------------------------------------------*/

























/*
.catalog .product-wrapper {width: calc((100% - 100px)/3); position: relative; margin-top: 20px; margin-right: 50px}
.catalog .product-wrapper:nth-of-type(3n) {margin-right: 0px}
.catalog .product-wrapper .img-wrapper {width: 100%; display: block;  text-align: center}
.catalog .product-wrapper .img {height: 100%; background-repeat: no-repeat; width: 100%; background-size: 100%; transition: 300ms; background-position: 50% 50%}
.catalog .product-wrapper .img:hover {background-size: 110%}
.catalog .product-wrapper .name {font-size: 16px; display: block; font-weight: 300; padding-right: 30px; margin-bottom: 10px}
.catalog .product-wrapper .info {font-size: 16px; position: relative}
.catalog .product-wrapper .old-price {text-decoration: line-through; color: red; font-size: 14px}
.catalog .product-wrapper .addToCart {background: url(../images/cart.svg) 50% 50% no-repeat; height: 25px; width: 25px; z-index: 1; position: absolute; right: 0px; top: 0px; font-size: 0px}
.catalog .product-wrapper.added .addedToCart {opacity: 1}
.catalog .variants label {cursor: pointer; display: inline-block}
.catalog .variants label + label {margin-left: 10px}
.catalog .variants input {display: none}
.catalog .variants span {border: 1px solid rgba(0,0,0,0.1); padding: 5px; display: block}
.catalog .variants input:checked + span {border-color: #444}
*/

.personal-discount {margin-top: 10px; border: 1px solid #ebebeb; padding: 10px; font-size: 14px}
.personal-discount .item b {display: block; font-size: 16px}
.personal-discount .item + .item {margin-top: 20px}
.catalog.group .product-wrapper {width: calc((100% - 150px)/4)}
.catalog.group .product-wrapper:nth-of-type(3n) {margin-right: 50px}
.catalog.group .product-wrapper:nth-of-type(4n) {margin-right: 0px}



.catalog .product-wrapper {width: 100%; border-bottom: 1px solid #ddd; padding: 20px 0px; position: relative}
.catalog .product-wrapper .img-wrapper {width: 100%}
.catalog .product-wrapper .img-wrapper img {width: 100% ; background-color: #f2f2f2}
.catalog .product-wrapper .name {margin-bottom: 20px;}
.catalog .product-wrapper .name p {color: #555; font-size: 13px; margin: 0px}
.catalog .product-wrapper .name a {text-decoration: none; font-weight: 400; font-size: 14pt;}
.catalog .product-wrapper .name .color {display: inline-block; vertical-align: middle; height: 30px; width: 30px; border-radius: 50%; margin-right: 15px}
/* ----  .catalog .product-wrapper .name {width: 50%} */
.catalog .product-wrapper .addToCart {background: #fff; color: #444; font-size: 13px; line-height: 40px; transition: 300ms; width: 140px; text-align: center; z-index: 1; border-radius: 1px; border: 1px solid #444; line-height: 38px; display: block; margin-top: 10px}
.catalog .product-wrapper .addToCart:hover {background: #444; color: #fff}
.product-wrapper .variants {margin: 0px 0px 20px 0px;display: block;}
.product-wrapper .price-block .price-block {border: 1px solid #444; padding: 0px 20px; font-size: 16px; height: 38px; margin-right: 10px; line-height: 34px; display: inline-block;}
.catalog .product-wrapper .variants input {display: none!important;}
.catalog .product-wrapper .variants label {border: 1px solid rgba(0,0,0,0.1); padding: 0px 20px; font-size: 16px; height: 38px; margin-right: 10px; line-height: 34px; display: inline-block; cursor: pointer}
.catalog .product-wrapper .variants label.active {border-color: #444; color: #444}


.block {width: calc(50% - 20px); display: block;  margin-top: 20px; cursor: pointer}
.block .img {background-position: 50% 50%; background-size: cover; height: 200px; position: relative}
.block .details {opacity: 0; position: absolute; top:0px; left: 0px; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.5); color: #fff; padding: 30px 20px; transition: 300ms}
.block .name {font-size: 18px; display: block}
.block:hover .details {opacity: 1}



.product-card .more {width: 255px; margin-top: 20px}
.product-card h1 {font-size: 36px; border: 0px; padding: 0px}
.product-card h2 {font-size: 18px; margin: 0px 0px 15px 0px; padding: 0px}
.product-card h3 {font-size: 22px; padding: 0px}
.product-card .product-price {margin-bottom: 15px; font-size: 22px; margin-top: 20px; padding-top: 20px ; /* border-top: 1px solid #444 */}
.product-card .product-price .price {display: block !important}
.product-card .description {margin-top: 20px; padding: 20px 0px}
.product-card .description a, .chart-text a {text-decoration: underline}

.product-card .prop-item {display: block; margin-bottom: 10px}
.product-card .prop-name {font-weight: 500}
.product-card .prop-name:after {content: ':'; margin-right: 5px}
.product-card .property-delimiter {display: none}
.product-card .mg-product-slides + div {width: calc(100% - 440px)}
.product-card .old-price {text-decoration: line-through; color: red; font-size: 14px}
.product-card table td {border-bottom: 1px solid rgba(0,0,0,0.1); line-height: 39px}

.product-card .block-variants {margin: 10px 0px 20px 0px}
.product-card .variants label input {display: none!important}
.product-card .variants label {border: 1px solid rgba(0,0,0,0.1); padding: 0px 20px; font-size: 16px; height: 38px; margin-right: 10px; line-height: 34px; display: inline-block; cursor: pointer}
.product-card .variants label.active {border-color: #444; color: #444}
.product-card .property-form {width: 100%;border-top: 1px solid #444; border-bottom: 1px solid #444; padding: 20px 0;margin: 20px 0;}

.product-card .added {display: none; margin-left: 5px}
.product-card .added a {font-weight: 500; text-decoration: underline}
.product-card .added.show {display: block}
.product-card .button {background-color: #444; color: #fff;}




.form-list textarea {
    display: block;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px;
    resize: none;
    font-size: 15px;
    width: 225%;
    height: 100%;
    position: relative;
    z-index: 1
}



.product-stickers span {}
.product-stickers span.new {display: none}
.product-stickers span.recommend {display: none}

/*.sticker-sale {background: #ff0000; transform: rotateZ(-45deg); color: #fff; display: block; width: 140px; height: 24px; line-height: 22px; text-align: center; position: absolute; z-index: 100; left: -24px; top:75px; font-size: 14px; transform-origin: 0% 0%; border-radius: 10px 10px 0px 0px}
.sticker-sale:after {width: 0; height: 0; top:100%; right: 0px; border-top: 10px solid #aa0000; border-left: 10px solid transparent; content: ''; position: absolute}
.sticker-sale:before {width: 0; height: 0; top:100%; left: 0px; border-top: 10px solid #aa0000; border-right: 10px solid transparent; content: ''; position: absolute}
*/

.product-stickers span.champion {background: #444; padding: 0 5px; height: 30px; position: absolute; top: 30px; left: 10px; color: #fff; text-align: center; line-height: 30px; text-transform: lowercase; font-size: 12px}

.sticker-sale {
    background: #fff;
    opacity: 0.9;
    border-color: red;
    border-style: solid;
    border-width: 1px;
    color: red;
    text-align: center;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 45px;
    border-radius: 5px 5px 5px 5px;
    position: absolute;
    z-index: 100;
    font-size: 12px;
    transform-origin: 0% 0%;
    margin: 25px;
    border-radius: 50%;
  font-weight: 500;
}












.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px 0 -10px;
}
.w-33 {
    width: 33.333%;
    padding: 0 10px;
}
.w-100 {
    width: 100%;
    padding: 0 10px;
}
.t-properties {margin-bottom: 10px}
.t-properties .w-33 span {
    font-size: 12px;
}
.qgrade {
    position: absolute;
    top: 15px;
    right: 30px;
    background: #fff;
    padding: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

 .akcia {
    background-color: #fd7829;
    text-align: center;
    color: white;
    position: relative;
    top: -5%;
    font-weight: 900;
}

.akcia1 {
   
    text-align: center;
    color: #ffffff00;
    position: relative;
    top: -5%;
    font-weight: 900;
}





/* ---------------------  наводяшка -------------* */
.akcia li {
  display: inline-block;
  margin: 0 20px;
  position: relative;
}
.akcia li:hover::after {
  content: attr(data-info);
  position: absolute;
  width: 100%; 
  padding: 15px 10px;
  bottom: 117%;
 left: 0%;
   /* margin-left: -100px; */
  border-radius: 7px;
  background-color: #fd7829;
  text-align: center;
  color: white;
  cursor: default;
}


/* ---------------------  наводяшка -------------* */



.stars-line {
    width: 100%;
    height: 4px;
    background-color: #cecece;
    position: relative;
}
.stars-line--in {
    height: 4px;
    background-color: #444;
    position: absolute;
    top: 0;
    left: 0;
}
.stars-line--in[data-percent="1##"] {
    width: calc(16.6666% * 1);
}
.stars-line--in[data-percent="2##"] {
    width: calc(16.6666% * 2);
}
.stars-line--in[data-percent="3##"] {
    width: calc(16.6666% * 3);
}
.stars-line--in[data-percent="4##"] {
    width: calc(16.6666% * 4);
}
.stars-line--in[data-percent="5##"] {
    width: calc(16.6666% * 5);
}
.stars-line--in[data-percent="6##"] {
    width: calc(16.6666% * 6);
}
.flex-container.t-properties2 .w-100 > div {
    display: flex;
    flex-wrap: wrap;
}
.flex-container.t-properties2 .w-100 div span {
   /* width: 50%; */
    font-size: 12px;
    color: #444;
}
.flex-container.t-properties2 .w-100 div span:first-child {
    width: 100px;
}
.t-properties2 {
    min-height: 110px;
      padding: 10px 0 0 0;
}


.flex-container.t-properties4 {margin-bottom: 10px}
.flex-container.t-properties4 .w-100 > div {
    display: flex;
    flex-wrap: wrap;
}
.flex-container.t-properties4 .w-100 div span {
    width: calc(100% - 100px);
    font-size: 12px; 
    color: #444;
}

/*
.flex-container.t-properties4 .w-100 div .count {font-size: 0}
.flex-container.t-properties4 .w-100 div .label-black.count {font-size: 12px}
*/


.flex-container.t-properties4 .w-100 div span:first-child {
    width: 100px;
  font-weight: 500;
}

.flex-container.t-properties4 .w-100 .sign {display: none !important}


.search-results.products-wrapper.list {
    display: flex;
    flex-wrap: wrap;
}
.tabs {
    max-width: 1000px;
}

.auth-block {
	font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid transparent;}
    
    .auth-block:hover {
    border: 1px solid #444;
}

.header-right {
    display: flex;
    flex-wrap: wrap;
}

.auth-block a.show-modal-enter-in {
    background: url('../images/login-w.png') 0% 50% no-repeat;
    background-size: 15px;
    padding-left: 30px;
    line-height: 40px;
}
.auth-block:hover a.show-modal-enter-in {
    color: #444;
}



.yarkost {
    padding: 0 0 10px 0;
}



.c-buy.hidder-element {
    display: flex;
    justify-content: space-between;
}


a.button.addToCart.product-buy {
    width: 100%;
      background-color: #444;
    color: #fff;
}

.c-buy__buttons {
    width: 50%;
}





































.cart_form {margin: 10px 0}
.cart_form input[type=text] {line-height: 34px; border:1px solid #444; width: 60px; text-align: center; display: inline-block; vertical-align: middle; background: #fff; margin-bottom: 0px}
.cart_form a {display: inline-block; margin: 0px 5px; width: 20px; background: #444; color: #fff; line-height: 20px; text-align: center; border-radius: 1px; vertical-align: middle}

.form-list {text-align: left}
.form-list li {display: block}
.form-list label {font-size: 14px; display: block}
.form-list label {margin-top: 15px}
.payment-option .form-list {width: 100%}
.placeholder {font-size: 12px}
.company-order li {font-size: 12px; margin-top: 5px}

.company-personal li {font-size: 12px; margin-top: 5px}

/* BREADCRUMB */
.bread-crumbs {color:#777; margin-top: 100px; font-size: 14px}
.bread-crumbs a {transition: 300ms}
.bread-crumbs a:hover {color: #000; text-decoration: underline}
/* BREADCRUMB */


.yur-field .del {font-size: 14px; font-weight: 400; background: #aaa; border-radius: 50%; width: 18px; height: 18px; display: block; color: #fff; line-height: 18px; transition: 300ms; text-align: center; cursor: pointer; transform: rotateZ(45deg)}
.yur-field .del:hover {background: #444}


.home .m-p-slider-wrapper {width: 100%; height: calc(100vh - 20px); position: absolute; top:0px; left: 0px; color: #444; text-align: right; font-size: 26px; z-index: 0}
.home .m-p-slider-wrapper .bx-wrapper, .home .m-p-slider-wrapper .bx-viewport {height: 100%}
.home .m-p-slider-wrapper .bx-wrapper .bx-next, .home .m-p-slider-wrapper .bx-wrapper .bx-prev {background: none}

img.back-img {width: 100% !important; display: block; margin-top: 8px}
.home .j-slider-images h1 {font-size: 48px; border: 0px; color: #fff; text-shadow: 0px 0px 1px #000; text-align: center; width: 100%}
/* .back-img .cover {display: block; position: absolute; bottom: 0px; left:0px; height: 300px; background: linear-gradient(rgba(20,20,20,0) 25%, rgba(20,20,20,1) 100%); width: 100%} */

.j-slider-images {height: calc(100vh - 20px); position: absolute; top:0px; left: 0px}
.owl-wrapper-outer, .owl-wrapper, .owl-item {height: 100%}
.owl-item a {height: 100%; display: block; background-size: cover; background-position: 50% 50%}
.owl-item .cover {display: flex; height: 100%; background: linear-gradient(rgba(20,20,20,0) 80%, rgba(20,20,20,1) 100%); width: 100%; align-items: flex-end; align-content: center}

.news-item {display: block; transition: 300ms; margin-bottom: 25px}
.news-item h2 {width: calc(100% - 150px); margin: 0px}
.news-item .date {width: 150px; text-align: right}
.news-item .text {color: #777}
.news-item .text a {text-decoration: underline; color: #444}
.image-scl {overflow:hidden;  }
.image-scl img {-moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; }
.image-scl img:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }




/*.footer {margin-top: 50px}
.footer a {color: #777; transition: 300ms}
.footer a:hover {color: #222}
.footer .contacts a {vertical-align: middle}
.footer .contacts a:last-of-type {margin-left: 10px}

.footer .belka {font-size: 14px; color: #444; opacity: 0.5}
.footer .belka:after {content: ''; display: inline-block; vertical-align: middle; width: 30px; margin-left: 5px; height: 25px; background: url(../images/belka.svg) 50% 30% no-repeat}
.footer .belka:hover {opacity: 1; color: #000}
.footer .social {display: inline-block; vertical-align: middle; margin-right: 5px; height: 24px; background-position: 0% 50%; background-repeat: no-repeat; background-size: contain}
.footer .social.in {background-image: url(../images/in.svg); padding-left: 28px; width: 140px}
.footer .social.fb {background-image: url(../images/fb.svg); width: 24px}
*/




.footer {margin-top: 75px; border-top-style: solid; border-color: #d2d2d2;border-width: 1px;}
.footer .foot {margin-top: 25px;}
.footer a {color: #777; transition: 300ms}
.footer a:hover {color: #222}
.footer .contacts a {vertical-align: middle}
/*.footer .contacts a:last-of-type {margin-left: 10px} */

.footer .belka {font-size: 14px; color: #444; opacity: 0.5}
.footer .belka:after {content: ''; display: inline-block; vertical-align: middle; width: 30px; margin-left: 5px; height: 25px; background: url(../images/belka.svg) 50% 30% no-repeat}
.footer .belka:hover {opacity: 1; color: #000}
.footer .social {display: inline-block; vertical-align: middle; margin-right: 5px; height: 24px; background-position: 0% 50%; background-repeat: no-repeat; background-size: contain}
.footer .social.in {background-image: url(../images/in.svg); padding-left: 28px; width: 140px}
.footer .social.fb {background-image: url(../images/fb.svg); width: 24px}




.grecaptcha-badge {display: none}
.google {font-size: 12px; margin-top: 20px}
.cookie {font-size: 12px; padding-bottom: 20px}


.promo-form {display: inline-block; font-size: 16px; line-height: 40px}
.promo-form input, .promo-form button {display: inline-block; margin: 0px 0px 0px 10px; width: 200px; vertical-align: top}

.legal a {margin-right: 0px}

/* MODAL */
.layer {position: fixed; top:0; left:0; width: 100%; height: 100%; background: rgba(255,255,255,0.97); z-index: 1000; display: none}
.modal {position: fixed; overflow-y: auto; top:40px; left:0px; right: 0px; padding: 0px 20px; bottom: 40px; margin: auto; z-index: 1100; display: none}
.modal .inner {max-width: 600px; margin: 0px auto}
.modal .close {width: 50px; height: 50px; display: block; position: fixed; right: 40px; top:40px; background: url(../images/close.svg) 50% 50% no-repeat; background-size: contain; transition: 300ms; cursor: pointer}
.modal .close:hover {transform: rotateZ(90deg)}
.modal .modal-link {margin: 0px 15px; display: inline-block}
.modal .modal-link:hover {text-decoration: underline}
.modal h1 {font-size: 32px; text-align: center; margin-bottom: 20px}
.modal h3 {font-size: 18px; border-bottom: 1px solid #ddd; padding-bottom: 15px; margin: 15px 0px; text-align: center}
.modal form {text-align: center}
.modal label {display: block !important; text-align: left; font-size: 12px !important}
.modal input {display: block; margin-bottom: 20px}
.ajax-loader {display: none !important}
.show-barista-form {padding: 5px 0px; border:1px solid #444; display: block; transition: 300ms; color: #444; border-radius: 1px; margin: 20px auto 0px auto; width: 150px; text-align: center; cursor: pointer}
.show-barista-form:hover {background: #444; color: #fff}
.modal .overflow-y {height: 250px}
.mCSB_container {padding: 1px}

.modal-enter {height: 300px; max-width: 400px}

.mg-fake-cart {width: 350px; right: -350px; position: fixed; top: 0px; height: 100%; background: #fff; z-index: 1000; transition: 300ms; border-left: 1px solid rgba(0,0,0,0.1); padding: 40px}
.mg-fake-cart.show {right: 0px}
.mg-fake-cart .small-cart-img {width: 80px}
.mg-fake-cart .small-cart-img .img {background: #fff; border:1px solid rgba(0,0,0,0.1); border-radius: 1px; display: block; height: 60px; width: 100%; text-align: center; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%}
.mg-fake-cart td {padding: 5px 0px}
.mg-fake-cart .small-cart-table {width: 100%}
.mg-fake-cart .small-cart-list {padding-left: 10px; font-size: 12px}
.mg-fake-cart .small-cart-list li {display: block}
.mg-fake-cart .small-cart-list .qty {font-size: 14px}
.mg-fake-cart .small-cart-list .qty span {margin-left: 10px}
.mg-fake-cart .total-sum {text-align: right; margin: 20px 0px}
.mg-fake-cart .total-payment {font-weight: 500; font-size: 20px}
.mg-fake-cart .deleteItemFromCart {color: #444; display: block; height: 15px; width: 15px; border-radius: 50%; line-height: 15px; text-align: center}
.mg-fake-cart .buttons {text-align: center}
.mg-fake-cart .buttons .button {margin-bottom: 10px}
.mg-fake-cart .overflow-y {max-height: 400px}
.mg-fake-cart h2 {margin-bottom: 20px; text-align: center}
/* MODAL */


/* PERSONAL */
div.tabs > div {display: none}
div.tabs > div.active {display: block}
ul.tabs > li {display: inline-block; margin-right: 5px; margin-bottom: 20px}
ul.tabs > li span {display: block; cursor: pointer; padding: 0px 10px; line-height: 30px; height: 32px; border: 1px solid #444; font-size: 14px}
ul.tabs > li.active span {background: #444; color: #fff}
ul.tabs > li:last-of-type {margin-left: 20px}
/* PERSONAL */

/* ИСТОРИЯ ЗАКАЗОВ */
#orders-history .order-item {margin-bottom: 20px}
#orders-history .order-name {cursor: pointer; border-bottom: 1px dashed rgba(0,0,0,0.5); transition: 400ms}
#orders-history .order-name.light {color: #ddd}
#orders-history .order-name.light:hover {color: #555}
#orders-history .order-name i {width: 18px; height: 18px; background: url(../images/comment.svg) 50% 50% no-repeat; background-size: contain; display: inline-block; margin-left: 10px}
#orders-history .order-details {max-height: 0px; transition: 400ms ease-out; overflow: hidden}
#orders-history .order-details.show {max-height: 1000px; transition: 400ms ease-in}
#orders-history .order-details th, #orders-history .order-details td {padding: 5px; text-align: center}
#orders-history .order-details th:first-of-type, #orders-history .order-details td:first-of-type {text-align: left}
#orders-history .order-details th {font-size: 14px; font-weight: 400}
#orders-history .order-details table a:hover {color: #ee387f}
#orders-history .order-details table .prop-name {font-size: 12px}
#orders-history .manager-information {background: #ee387f; color: #fff; padding: 5px; margin-top: 10px}
#orders-history .total-list {padding-left: 5px; font-size: 12px; padding-top: 5px}
/* ИСТОРИЯ ЗАКАЗОВ */


/* .ui-datepicker-calendar a.ui-state-default {background: #888; text-shadow: none !important} */

.cart-table {width: 100%; font-size: 14px; margin-bottom: 20px}
.cart-table th {font-weight: 400; text-align: center; font-size: 12px; padding: 5px}
.cart-table td {padding: 5px; text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.1)}
.cart-table td:first-of-type {text-align: left}
.cart-table tr:last-of-type td {border-bottom: 1px solid #eee}
.cart-table .img {width: 80px; height: 50px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; margin-right: 10px}
.cart-table .name {width: calc(100% - 70px)}
.cart-table .name .prop-position {font-size: 12px}
.cart-table button {-webkit-appearance: none; -moz-appearance: none; color: #2e8609; background: none; border: none; text-decoration: underline; font-size: 12px; font-family: inherit; font-weight: 400}
.cart-table .delete-btn {font-size: 12px; font-weight: 400; background: #ddd; border-radius: 50%; width: 18px; height: 18px; display: inline-block; color: #fff; line-height: 18px; transition: 300ms}
.cart-table .delete-btn:hover {background: #444}
/* .payment-details-list {display: none} */
.payment-details-list span {display: none}
.cart-table .cart_form, .cart-table button {display: inline-block; vertical-align: middle}
.cart-table .last td {background: #fafafa !important; font-weight: 500}
.product-cart .checkout-form {text-align: right}
.total-price-block {text-align: right; margin-top: 90px}
.total-price-block .checkout-btn {margin: 10px 0px} 

.product-cart .name-cell, .product-cart .img-cell {text-align: left}
.product-cart .img-cell {height: 80px}

/* ORDER */
.stage {font-size: 18px; margin: 30px 0px}
.stage span {width: 30px; height: 30px; border-radius: 50%; line-height: 30px; color: #fff; background: #444; display: inline-block; vertical-align: middle; text-align: center; margin-right: 5px}
.payment-option li {display: block}
/* ORDER */



.mg-product-slides{/*position: relative; width: 400px;*/ position: relative}
.mg-product-slides .bx-wrapper{text-align:center;max-width: none !important}
.mg-product-slides .slides-slider {margin:15px 0 0 0;position:relative;}
.mg-product-slides .slides-slider .bx-viewport {height:75px!important; padding: 1px}
.mg-product-slides .product-details-image a {background-size: cover; background-position: 50% 50%; background-repeat: no-repeat}

.mg-product-slides .slides-slider .slides-item{width:96px !important;height:70px;margin: 0px 2px;float:left;display:block;border:1px solid #fff;background-size: cover; background-position: 50% 50%; background-repeat: no-repeat}
.mg-product-slides .slides-slider .slides-item img{max-width:100%;max-height:100%;}
.mg-product-slides .main-product-slide{list-style:none;margin:0;padding:0;}
.mg-product-slides .main-product-slide li{position:relative;height:350px;}
.mg-product-slides .slides-slider .active-item,
.mg-product-slides .slides-slider .slides-item.active{box-shadow: 0px 0px 0px 1px #555}
.mg-product-slides .slides-slider .bx-prev,.slides-slider .bx-next{display:block;width:20px;height:20px;text-indent:-999999px;position:absolute;background:url(../images/second-controls.png);top:29px;}
.mg-product-slides .slides-slider .bx-next{right:5px;background-position:-20px 0;}
.mg-product-slides .slides-slider .bx-next:hover{right:5px;background-position:-20px -20px;}
.mg-product-slides .slides-slider .bx-prev{left:5px;}
.mg-product-slides .slides-slider .bx-prev:hover{background-position:0 -20px;}
.mg-product-slides .product-details-image .magnify,
.mg-product-slides .product-details-image a.fancy-modal:first-child{display:block; height: 100%;width: 100%;}
.mg-product-slides img{background-color: #f2f2f2;}


.category-slider .product-wrapper {margin: 0px 20px !important}
.category-slider .product-wrapper .img-wrapper {height: 120px}
.category-slider .product-wrapper .info {font-size: 14px}
.category-slider .product-wrapper .info .name {font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.category-slider .product-wrapper .info > div {width: calc(100% - 130px)}

.delivery-date {margin-top: 20px}
.ui-datepicker {box-shadow: none; width: 100%}
.ui-datepicker-header {background: #444; box-shadow: none}
.ui-datepicker tbody td {border: none; background: #fff; padding: 2px}
.ui-datepicker-calendar a.ui-state-default {border: 1px solid #444; border-radius: 50%}
.ui-datepicker-calendar .ui-state-default {color: #444; background: #fff; box-shadow: none}
.ui-datepicker-calendar a.ui-state-active {background: #444; color: #fff}
.ui-datepicker tbody tr {border: none}


@media screen and (max-width:1023px) {
.top-menu-list {position: absolute; top:70px; box-shadow: 0px 5px 5px rgba(0,0,0,0.2); background: rgba(255, 255, 255, 0.9); max-height: 0px; overflow: hidden; left: 0px; width: 100%; transition: ease-out 300ms; text-align: center}
.top-menu-list.show {max-height: 500px; transition: ease-in 300ms}
.mobile-menu-icon {display: block}
body {font-size: 15px}
header {height: 60px}
.logo {height: 50px; width: 100px}
/* .product-wrapper .img {height: 140px} */
.product-wrapper .name {font-size: 16px}
/*.product-wrapper .info .name, .product-wrapper .info > div {font-size: 14px}*/
.product-wrapper .info {height: auto; line-height: 1.5}
}



.pick-point {
	display: block;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0px 10px;
    border: 1px solid #444;
    background: transparent;
    color: #444;
    transition: 300ms;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 1px;
    height: 24px;
    line-height: 22px;
    text-align: center;
}




.company-status {display: block; width: 180px; background: #444; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}


/* цвета статусов в лк пользователей */

.order-status-ds0 {display: block; width: 180px; background: #ff0808; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds1 {display: block; width: 180px; background: #787878; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds2 {display: block; width: 180px; background: #95ff00; text-align: center; line-height: 20px; color: #444444; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds3 {display: block; width: 180px; background: #fbff00; text-align: center; line-height: 20px; color: #444444; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds4 {display: block; width: 180px; background: #000000; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds5 {display: block; width: 180px; background: #24ad1f; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds6 {display: block; width: 180px; background: #fff16e; text-align: center; line-height: 20px; color: #444444; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds7 {display: block; width: 180px; background: #808af5; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds8 {display: block; width: 180px; background: #4c56eb; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds9 {display: block; width: 180px; background: #e2b3eb; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds10 {display: block; width: 180px; background: #e2b3eb; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds11 {display: block; width: 180px; background: #f57575; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds12 {display: block; width: 180px; background: #13107a; text-align: center; line-height: 20px; color: #fff; margin-bottom: 3px; font-size: 13px; height: 20px}
.order-status-ds13 {display: block; width: 180px; background: #fffec2; text-align: center; line-height: 20px; color: #444444; margin-bottom: 3px; font-size: 13px; height: 20px}

.order-difference {text-align: center; white-space: nowrap; padding: 0 10px; line-height: 20px; color: #fff; margin-bottom: 3px; margin-left: auto; margin-right: 3px; font-size: 13px; height: 20px}
/* цвета статусов в лк пользователей */
.order-difference.pereplata {background: #24ad1f}
.order-difference.nedoplata {background: #f57575}
.text.pereplata {background: #24ad1f; color: #fff; height: 40px; text-align: center; line-height: 40px}
.text.nedoplata {background: #f57575; color: #fff; height: 40px; text-align: center; line-height: 40px}


.company-status.company-wait {background: #e8d718}
.company-status.5 {background: #14a914}
.company-status.company-denied {background: #fa0b08}


/* смена картинки на текст */

.view-tenth {overflow: hidden;  position: relative;  text-align: left;   cursor: default;}
.view-tenth .mask {  position: absolute;  overflow: hidden;  top: 15px;  left:0;  right:0; bottom:0; transition: all 0.1s linear; opacity: 0; }
.view-tenth .view {transform: scaleY(1);transition: all .1s ease-in-out; }
.view-tenth .button-block  {  position: absolute; bottom: 15px;  left: 0}
.view-tenth .text-view {position: absolute;  top: 0; left: 50% ; transform: translateX(-50%)}



.view-tenth h1 {text-align: center;}

.view-tenth:hover .view {  transform: scale(1.1);  opacity: 0;}
.view-tenth:hover .mask {  opacity: 1;}
.view-tenth:hover h1 {text-align: center;}
.view-tenth:hover p  {text-align: left;}


@media screen and (max-width:767px) {
.logo {width: 90px}
.auth-block {margin-left: 0px}
.auth-block a.show-modal-enter-in {font-size: 0px; background-position: 50% 50%}
header .cart {padding: 0px}
   body {font-size: 14px/*;  padding-top: 100px !important */}
.form-list {width: 100%}
.product-card .mg-product-slides + div {width: 100%}
.first .img {width: 100%; margin-bottom: 10px; height: 250px}
.first .text {width: 100%}
.first .text .button {width: calc(50% - 10px); font-size: 9px; padding: 0px; margin: 15px 5px 0px 5px}
.first .text a {padding: 0px 5px}
.block {width: 100%}
.block .img {height: auto}
.block .details {opacity: 1; position: static; padding: 10px}
.block .name {font-size: 15px}
.dark .mg-menu li a {color: #000; text-shadow: none}
.footer .social {font-size: 0px}
 

.product-card .img + div {width: 100%}
.mg-menu > li > a {font-size: 14px}   
  .mg-menu > li > .submenu li { margin: 0; padding-top: 10px;}
.j-slider-images {height: calc(75vh - 20px)}
.modal {padding: 0px 10px}
iframe, img {max-width: 100%}
img {height: auto !important}
  
.half-25 {width: 100%}
.half-30 {width: 100%}
.half-40 {width: 100%}  
.half-50 {width: 100%}
.half-60 {width: 100%}
.half-75 {width: 100%}
  
 .enter-form {
    text-align: center;
    max-width: 90%;
    /* justify-content: space-between; */
    /* display: flex; */
    /* flex-wrap: nowrap; */
    /* flex-direction: column; */
    align-content: center;
    margin: 10px;
}
  
  .buttons {
    /* width: 90%; */
    display: flex;
    flex-direction: column;
}
  
 
.news-item {width: 100% ; margin-top: 25px}
.news-item h2 {width:100%; margin: 0px; font-weight: 600}
.news-item .date { text-align: left}
.news-item .text {color: #777 ; margin-top: 12px}
.news-item .text a {text-decoration: underline; color: #444}
 
  
  .form-list textarea {
    display: block;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px;
    resize: none;
    font-size: 15px;
    width: 100%;
    height: 100%;
}
  
  
  
  
  /* левая менюшка в телефоне */
  
   .left-block {
        transform: translatex(-100%);
        position: fixed;
        z-index: 99;
        background: rgba(255, 255, 255, 0.95);
        height: 100%;
        width: 75%;
        margin-bottom: 20px;
        text-align: left;
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
        left: 0px;
        top: 60px;
        transition: ease-out 300ms;
    }
    .left-block.act {
        transform: translateX(0%);
        box-shadow: 0px 0px 0px 25vw rgb(0 0 0 / 50%);

        
    }
    .left-block ul {
        display: flex;
        align-items: left;
        flex-direction: column;
    }
    .left-block .inner {
        position: absolute;
        width: 100%;
        height: calc(100vh - 80px);
        border: 0px;
        overflow-y: auto;  
        top: 0px;
    }
    .left-block li {
        display: inline-block;
        margin: 5px;
        padding-left: 5%;
    }
    .left-block li a {
        padding: 5px;
        font-weight: 500;
    }
    .menu-btn11 {
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yNSwzNy41Yy0wLjMsMC0wLjgtMC4yLTEuMi0wLjVMMi4xLDE1LjNjLTAuNy0wLjctMC43LTEuNywwLTIuMmMwLjctMC43LDEuNy0wLjcsMi4yLDBMMjUsMzMuN0w0NS43LDEzDQoJYzAuNy0wLjcsMS43LTAuNywyLjIsMGMwLjcsMC43LDAuNywxLjcsMCwyLjJMMjYuMiwzNi44QzI1LjgsMzcuNCwyNS4zLDM3LjUsMjUsMzcuNXoiLz4NCjwvc3ZnPg==");
        position: absolute;
        position: absolute;
         left: 7px;
        top: 25px;
        transform: rotate(-90deg);
        z-index: 6;
    }
    
     .menu-btn1 {
        width: 40px;
        height: 70px;
         border-radius:0 50% 50% 0;
        background-color: rgba(0,0,0, 0.8);
        position: absolute;
        left: 100%;
        top: 70%;
        z-index: 5;
    }
  
  
  
    /* левая менюшка в телефоне */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 .alert {width: 100%}
.promo-form input, .promo-form button {margin: 5px 0px 0px 0px; width: 100%}

.buy-block > div {width: 100%}
.cart_form {text-align: center}
.product-card .button {margin: 10px auto; display: block}
.modal .close {right: 0px}
.product-card .h-block {padding-top: calc(100vh - 300px); height: calc(100vh - 70px); margin-top: 0px}
.catalog .product-wrapper, .catalog.group .product-wrapper, .catalog.group .product-wrapper:nth-of-type(3n) {width: 100%; margin-right: 0px}

  
  
  
.top-menu-list li {display: block; text-align: center}
.top-menu-list li a {border: 0px; line-height:50px; font-size: 12px}
.left-block + .center-block {width: 100%}
/* -------   .left-block {height: auto; margin-bottom: 20px}       */
.product-card .left-block {width: 100%; text-align: center; height: auto; margin-bottom: 0px}
/* -------  .left-block ul {display: inline-block}      */
/* -------  .left-block .inner {position: static; width: 100%; border: 0px}  */
/* -------  .left-block li {display: inline-block; margin: 5px}  */
/* .learning .left-block li {display: block} */
/* ------- .left-block li a {padding: 5px}  */
.content h1 {margin-bottom: 10px; font-size: 26px !important; padding-bottom: 10px}
.content h2 {font-size: 18px}
.footer {margin-top: 20px}
.bread-crumbs {margin-top: 50px; margin-bottom: 10px}
.home h1 {border: 0px}
.footer a {display: block; font-size: 14px; margin-left: 0px !important; margin-top: 5px}
 
/*
.catalog .product-wrapper {display: flex; align-items: center; justify-content: space-between}
.catalog .product-wrapper .img-wrapper {width: 70px; height: auto}
.catalog .product-wrapper .info {width: calc(100% - 80px)}
.catalog .product-wrapper.added .addedToCart {display: none}
.catalog .variants label + label {margin-left: 5px}
.catalog .product-wrapper .name {margin-bottom: 20px}
*/

.mg-fake-cart {width: 100%; right: -100%}
.mg-fake-cart .small-cart-img {width: 70px}

.catalog .property-form {width: 100%} 
.catalog .product-wrapper .variants label {display: inline-block}
.catalog .block-variants {text-align: center}
.catalog .product-wrapper .addToCart {margin: 10px auto 0px auto}

  .form-block { width: 100%}
  header {margin-bottom: 30px}
  .mobile-hide {display: none}
  .view-tenth .mask {font-size: 2.5vw}
  .cart-form {overflow-x: auto}
.cart-form table {width: 400px}
.cart-form .amount_change {width: 60px}
.cart-form .amount_change input {margin: 5px 0px; order: 2}
.cart-form .amount_change .up {order: 1; margin: 0px auto}
.cart-form .amount_change .down {order: 3; margin: 0px auto}
.total-price-block {margin-top: 0px}
}

/* смена картинки на текст */






.view-t {
            overflow: hidden;
            position: relative;
            text-align: left;
            cursor: default;
        }
        
        .view-t .button {
            margin-right: 10px;
            transition: 300ms;
            border: 1px solid #ffffff;
            line-height: 36px;
            display: inline-block;
            height: 38px;
            padding: 0px 10px;
            margin-top: 15px;
            color: #fff;
        }
        
        .view-t .button:hover {
            background: #fff;
            color: #FF0000
        }
        
        .view-t .pricee {
            position: absolute;
            top: 50%;
            left: 55%;
            right: 5%;
            color: #fff;
        }
        
        .view-t .mask {
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
        }
        
        .view-t .view {
            transform: scaleY(1);
        }
        
        .view-t .first-text {
            position: absolute;
            top: 5%;
            left: 70%;
            color: white;
            font-size: 2.5vw;
            z-index: 10;
          	
         
        }
        
        .view-t .second-text {
            text-align: left;
            position: absolute;
            top: 25%;
            left: 5%;
            right: 5%;
            color: white;
            font-size: 1.5vw;
         
        }
        
        .view-t:hover .view {
            transform: scale(1.1);
            opacity: 0;
        }
        
        .view-t:hover .mask {
            opacity: 1;
        }
        
        .view-t:hover .first-text {
            position: absolute;
            top: 5%;
            left: 5%;
            color: white;
            font-size: 2.5vw;
            z-index: 10;
        }
        
        @media screen and (min-width: 1200px) {
            .view-t .pricee {
                position: absolute;
                left: 75%;
              	
            }
            .view-t .first-text {
                top: 10%;
                left: 60%;
            }
            .view-t:hover .first-text {
                font-size: 2.2vw;
                left: 5%;
            }
            .view-t .second-text {
                font-size: 0.8vw;
                top: 25%;
            }
            @media screen and (max-width:800px) {
                .view-t .mask {
                    font-size: 3vw
                }
              
          
          .view-t .pricee {
        		-webkit-transform: scale(0.5);
            	-moz-transform: scale(0.5);
            top: 20%;
            left: 80%;
       		 }
          }