@import url('https://fonts.googleapis.com/css2?family=Arsenal&display=swap');.block{
   display: flex;
   flex-direction: column;;
   align-items: center;
   width: 164px;
   margin-top: 20px;
   margin-bottom: 20px;
   padding: 15px 10px 15px 10px;
   position: relative;
   z-index: 555;
}
.block:hover{
   box-shadow: 0px 0px 1px #000000;
   border-radius: 8px;
   background: #fff;
}#slider{
   margin: 5px;
   margin-bottom: 5px;
   border:none;
   border-radius: 10px;
   display: flex;
   align-items: flex-start;
}
/* стрелки < / > */
.arrow{
   position: absolute;
   width: 35px;
   height: 35px;
   top: 50px;
   z-index: 1000;
   border-radius: 50%;
   background: #959698;
   transform: rotate(-180deg);
   text-align: center;
   line-height: 35px;
   color: #FFFFFF;
   font-weight: 500;
   cursor: pointer;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   -webkit-user-select: none;
   user-select: none;
   transition-duration: 0.3s;
   opacity: 0.7;
}
.arrow:hover{
   background: #111111;
}
.arrow-left{
   left: 5px;
}
.arrow-right{
   right: 5px;
}
/* стрелки < / > */
/* топ меню */

/* основной баннер, каталог */
.chief{
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 2fr [chief-banner] auto;
   grid-column-gap: 10px;
   grid-template-areas: 
      'catalogue chief-slider'
    	'catalogue chief-banner';
}
/* chief-slider */
.chief-slider{
   max-width: 874px;
   margin-bottom: 30px;
}
.chief-slider-mobile{
   width: auto;
}
/* высота области с картинкой главного баннера (без точек); по ней же - высота списка вертикального меню рядом.
   Картинка вписывается без растяжения, лишнее обрезается (banners-slider.vue) */
.chief,
.nangrid-chief{
   --chief-banner-height: 450px;
}
.chief-slider,
.chief-slider-mobile{
   --banner-height: var(--chief-banner-height);
}
@media (max-width: 1169px) { .chief, .nangrid-chief { --chief-banner-height: 400px; } }
@media (max-width: 991px)  { .chief, .nangrid-chief { --chief-banner-height: 350px; } }
@media (max-width: 767px)  { .chief, .nangrid-chief { --chief-banner-height: 300px; } }
@media (max-width: 540px)  { .chief, .nangrid-chief { --chief-banner-height: 250px; } }
@media (max-width: 400px)  { .chief, .nangrid-chief { --chief-banner-height: 220px; } }
/* chief-slider */

/* share */
.share{
   padding-top: 25px;
}
.share-title{
   font-weight: 700;
   font-size: 24px;
   line-height: 30px;
   text-transform: uppercase;
   color: #000000;
}
.share-title-btn{
   font-weight: 700;
   font-size: 24px;
   line-height: 30px;
   text-transform: uppercase;
   text-decoration: none;
   color: #000000;
   border: 1px solid #000000;
   border-radius: 7px;
   padding: 5px 10px;
}
.share-title-btn:hover{
   color: #000000;
   background: #4CAF50;
   border: 1px solid #4CAF50;
   outline: none;
   color: #FFFFFF;
   transition-duration: 0.3s;
}.share-img{ 
   width: 100%;
   display: flex;
   justify-content: center;
}
.share-img img{
   width: 125px;
   height: 125px;
   border-radius: 4px;
}/* slider hits, discount */
.wrapper{
   max-width: 1170px;
   overflow: hidden;
   margin: 0 auto;
   position: relative;
   border-top: 1px solid #959698;
   border-bottom: 1px solid #959698;
   margin-top: 15px;
}
.v-carousel{
   display: flex;
   transition: all ease 0.5s;
}
.btn-left, .btn-right{
   position: absolute;
   top: 42%;
   width: 35px;
   height: 35px;
   background: #959698;
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
   outline: none;
   border-radius: 50%;
   transition-duration: 0.3s;
   opacity: 0.7;
}
.btn-left:hover, .btn-right:hover{
   background: #111111;
   cursor: pointer;
}
.btn-left{
   left: 10px !important;
}
.btn-right{
   right: 10px !important;
}
.btn-img{
   display: block;
   width: 15px;
   height: 15px;
   filter:  brightness(0) invert(1);
}
/* slider hits, discount */
/* share */
/* хиты продаж */

/* о компании */
.about-mt{
   display: flex;
   justify-content: space-between;
   padding-top: 50px;
   padding-bottom: 40px;
}/* о компании */

/* slider (chief-slider) большие баннеры*/
.slick-prev{
   left: 16px!important;
   z-index: 5!important;
}
.slick-next{
   right: 16px!important;
   z-index: 5!important;
}
.slick-prev, .slick-next {
   transition-duration: 0.3s;
   opacity: 0.7;
   width: 35px!important;
   height: 35px!important;
   border-radius: 50%!important;
   background: #959698!important;
}
.slick-prev:hover, .slick-next:hover{
   background: #111111!important;
}
.slick-prev:before, .slick-next:before {
   font-weight: 500!important;
   text-align: center!important;
   opacity: 1!important;
   line-height: 10px!important;
}
.slick-next:before {
   content: url(/img/icons/right-arrow.svg)!important;
}
.slick-prev:before {
   content: url(/img/icons/left-arrow.svg)!important;
}
/* узкий баннер: высота области с картинкой (без отступа и точек) по брейкпоинтам.
   Картинки раньше получали класс banner-img верхнего баннера: min-height 150px растягивал их, а до 1169px они скрывались */
.narrow-banner{
   padding-top: 25px;
   --banner-height: 350px;
}
@media (max-width: 1169px) { .narrow-banner { --banner-height: 300px; } }
@media (max-width: 991px)  { .narrow-banner { --banner-height: 250px; } }
@media (max-width: 767px)  { .narrow-banner { --banner-height: 200px; } }
@media (max-width: 540px)  { .narrow-banner { --banner-height: 150px; } }
.banner-mt{
   padding-top: 25px;
   cursor: pointer;
   z-index: 1000;
   /* height: auto; */
   /* height: 100%; */
}
.about-mt.banner img{
   height: auto;
   width: 100%;
}/* reviews-slider start */
.reviews-slider{
   border: 1px solid #c4c4c4;
   border-radius: 8px;
   width: 100%;
   height: auto;
}
/* reviews-slider end */
/* slider reviews about service start */
.reviews-main{
   display: flex;
   position: relative;
}
.wrapper-box{
   position: relative;
   width: 100%;
}
.wrapper-rev{
   width: 100%;
   max-width: 850px;
   overflow: hidden;
   margin: 0 auto;
   position: relative;
   height: 200px;
   display: flex;
   align-items: center;
   padding: 10px 0;
   /* padding-right: 10px; */
   /* padding-left: 10px; */
}

.wrapper-rev .v-carousel{
   padding: 10px 0;
}
.wrapper-rev .v-carousel-item{
   height: 100%;
}
.reviews-carousel{
   display: flex;
   transition: all ease 0.5s;
   /* width: 800px;
   height: 100%;
   padding: 10px 10px; */
}
.comment-cart{
   cursor: pointer;
   height: 150px;
   padding: 15px 15px;
   justify-content: space-between;
   position: relative;
}
.comment-cart:hover{
   background: #FFFFFF;
   -webkit-box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
   -moz-box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
   box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
   border-radius: 8px;
}
.rev-answer-service{
   position: absolute;
   bottom: 15px;
   left: 15px;
   display: flex;
   align-items: center;
}
.answer-service_text{
   font-family: Arsenal;
   font-weight: normal;
   font-size: 13px;
   line-height: 16px;
   color: #999999;
   padding-right: 5px;
}
.rev-info{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-around;
   padding: 10px 10px;
}
.rev-info .share-title-btn{
   font-size: 18px;
   width: 100%;
   text-transform: none;
   text-align: center;
   height: 45px;
}.rev-btn{
   width: 188px;
   height: 45px;
   background: #931515;
   border-radius: 8px;
   font-weight: 700;
   font-size: 18px;
   line-height: 23px;
   color: #FFFFFF;
   border: none;
   outline: none;
   cursor: pointer;
}
.mt-user{
   display: flex;
   align-items: center;
}
.user-block{
   background: #931515;
   width: 41px;
   height: 41px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.user-img{
   display: block;
   width: 24px;
   height: 29px;
}
.user-name{
   font-weight: 700;
   padding-left: 15px;
   color: #000000;
   line-height: 23px;
   font-size: 18px;
}
.user-comment{
   padding-top: 10px;    
   -webkit-line-clamp: 3;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   color: inherit;
   font-size: 14px;
   line-height: 1.08571;
   font-weight: 700;
   font-size: 14px;
   max-width: 300px;
   color: #4D4D4D;
}
.rev-l, .rev-r{
   position: absolute;
   top: 35%;
   width: 45px;
   height: 45px;
   background: transparent;
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
   outline: none;
   border-radius: 50%;
   transition-duration: 0.3s;
   opacity: 0.7;
   z-index: 1000;
}
.rev-l:hover, .rev-r:hover{
   background: #c4c4c4;
   cursor: pointer;
}
.rev-l{
   left: 0;
}
.rev-r{
   right: 0;
}
.rev-r-img,
.rev-l-img{
   display: block;
   width: 25px;
   height: 25px;
   filter: invert(0%) sepia(0%) saturate(7495%) hue-rotate(221deg) brightness(104%) contrast(95%);
}
.rev-form{
   padding: 10px 10px;
}
.rev-block{
   display: flex;
   flex-direction: column;
   margin-top: 10px;
}
.checkout_rev{
   width: 100%;
   height: 36px;
   background: #FFFFFF;
   border-radius: 6px;
   border: 1px solid #c4c4c4;
   padding: 8px 10px 9px 10px;
   outline: none;
   color: #111;
   font-size: 14px;
   font-family: 'Arsenal',sans-serif;
}
.rev-form .contact-form{
   width: 100%;
}
.rev-form .contacts-form{
   grid-column-gap: 30px;
}
.rev-form .form-title{
   padding-bottom: 0;
}
.rev-form .contact-comment{
   height: 150px;
}
.rev-comment{
   height: 100px;
   background: #FFFFFF;
   border: 1px solid #c4c4c4;
   border-radius: 6px;
   outline: none;
   padding: 15px 15px;
   font-size: 14px;
   font-family: 'Arsenal', sans-serif;
}

.contact-btn{
   margin-top: 15px;
}
.form-btn{
   font-weight: 700;
   font-size: 14px;
   line-height: 161.3%;
   color: #FFFFFF;
   cursor: pointer;
   background: #931515;
   border: none;
   outline: none;
   border-radius: 8px;
   width: 203px;
   height: 48px;
}

/* уведомление об успешной отправки формы start */
.sent-sms{
   position: fixed;
   right: calc(50% - 93px);
   top: calc(50% - 75px);
   background: #e5e5e5;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 185px;
   height: 150px;
   border-radius: 6px;
   z-index: 20;
   transition: 2s ease;
   opacity: .9;
   cursor: pointer;
}

.sent-sms_img{
   display: block;
   width: 45px;
   height: 45px;
}

.sent-sms_text{
   padding-top: 10px;
   text-align: center;
   font-size: 14px;
   line-height: 16px;
}
/* уведомление об успешной отправки формы end */

/* slider reviews about service start */

/* узкий экран (было в layouts/media.css) */
@media (min-width: 280px) and (max-width: 540px) {
    .reviews-slider {
        margin-top: 25px;
    }
    .reviews-main {
        flex-direction: column;
    }
    .rev-info {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 15px;
    }
    .rev-btn {
        width: 100%;
    }
    .reviews-slider .share-title-btn {
        margin: 0;
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .chief {
        grid-template-columns: 1fr;
        grid-template-areas: 'chief-slider' 'chief-banner';
    }
}
@media (min-width: 541px) and (max-width: 767px) {
    .reviews-slider {
        margin-top: 25px;
    }
    .reviews-main {
        flex-direction: column;
    }
    .rev-info {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 15px;
    }
    .rev-btn {
        width: 100%;
    }
    .reviews-slider .share-title-btn {
        margin: 0;
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .reviews-slider {
        margin-top: 25px;
    }
    .reviews-main {
        flex-direction: column;
        flex-wrap: column-reverse;
    }
    .rev-info {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 15px;
    }
    .rev-btn {
        width: 100%;
    }
    .reviews-slider .share-title-btn {
        margin: 0;
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wrapper-rev {
        max-width: 900px;
    }
}
@media (max-width: 990px) {
    .v-carousel-item .comment-cart {
        background: #FFFFFF;
        -webkit-box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
        -moz-box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
        box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
        border-radius: 8px;
    }
    .wrapper-box {
        order: -1;
    }
    .about-mt {
        display: none;
    }
    .share-title-btn {
        font-size: 16px;
        line-height: 20px;
        margin: 0 10px;
        font-weight: 700;
    }
    .share-title-btn:hover {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        text-transform: uppercase;
        text-decoration: none;
        color: #000000;
        border: 1px solid #000000;
        border-radius: 7px;
        padding: 5px 10px;
        margin: 0 10px;
        background: #FFFFFF;
    }
    .reviews-slider .share-title-btn {
        margin: 0;
    }
    .share {
        padding-top: 0;
    }
    .narrow-banner {
        padding-top: 15px;
        height: auto;
        padding-bottom: 35px;
    }
    .hit-goods .share-title {
        font-size: 14px;
        line-height: 22px;
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (min-width: 992px) and (max-width: 1169px) {
    .reviews-slider {
        margin-top: 25px;
    }
    .reviews-main {
        display: grid;
        grid-template-columns: 20% 80%;
    }
    .rev-info {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 10px;
    }
    .rev-btn {
        width: 100%;
        font-size: 16px;
        line-height: 20px;
    }
    .reviews-slider .share-title-btn {
        margin: 0;
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        line-height: 20px;
        padding: 5px 5px;
    }
    .wrapper-rev {
        max-width: 800px;
    }
    .v-carousel-item .comment-cart {
        background: #FFFFFF;
        -webkit-box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
        -moz-box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
        box-shadow: 0px 1px 10px 1px rgba(34, 60, 80, 0.2);
        border-radius: 8px;
    }
    .chief {
        grid-template-columns: 1fr;
        grid-template-areas: 'chief-slider' 'chief-banner';
    }
    .share-title-btn {
        margin: 0 10px;
    }
    .about-mt {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 2vw;
        padding: 20px 10px;
    }
    .hit-goods .share-title {
        font-size: 14px;
        line-height: 22px;
        padding-left: 10px;
        padding-right: 10px;
    }
}