@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto.woff) format("woff"),
         url(../fonts/Roboto.woff2) format("woff2"),
         url(../fonts/Roboto.ttf) format("truetype");
    font-weight: normal;
}

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Robotobold.woff) format("woff"),
    url(../fonts/Robotobold.woff2) format("woff2"),
    url(../fonts/Robotobold.ttf) format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Robotolight.woff) format("woff"),
    url(../fonts/Robotolight.woff2) format("woff2"),
    url(../fonts/Robotolight.ttf) format("truetype");
    font-weight: 300;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-size: 20px;
}

body {
    background-color: #1d1e20;
    color: #fff;
    font-family: "Roboto", sans-serif;
}
input:focus{
    outline: none;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

.flx {display: flex;justify-content: center;align-items: center;}
.sb {justify-content: space-between;}
.sa {justify-content: space-around;}
.tac{text-align: center;}

.maxw {
    max-width: 1220px;
    width: 95%;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: #ffffff;
}

h2, h1 {
    position: relative;
    text-transform: uppercase;
    font-size: 2rem;
    text-align: center;
    margin: 60px 0;
}

ul li {
    list-style: none;
}

textarea {
    resize: none;
}
.posrel{position: relative;}
.clr{position: absolute;right: 5px;top: 10px;width: 18px;height: 18px;text-align: center;line-height: 17px;border-radius: 50%;background-color: #cacaca;z-index: 3;cursor:pointer;}
[name="addss"]{padding-right: 24px !important;}
.llList{display: none;position: absolute;top: 85%;left: 0;z-index: 5;max-height: 250px;width: 100%;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);border-radius: 2px;overflow-y: auto;padding: 0;margin: 0;background-color: #fff;z-index: 1;}
.llList li{padding: 5px 8px;font-size: .8em;background-color: #fbfbfb;color:#74788d;border-bottom: 1px solid rgba(60, 80, 180,.15);margin: 0;cursor:pointer;}
.llList li.hover{color: rgb(60, 80, 180);background-color: rgba(60, 80, 180, 0.15);}
/*.llList li.hover a {color: #FFFFFF;}*/
.llList li:last-child {border-bottom: none;}

.variableList{padding: 0;cursor: pointer;background-color: #fff;margin: 0 !important;}
.posrel .variableList{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 55vh;
    box-shadow: 0 10px 15px rgba(82, 63, 105, 0.5);
    overflow-y: auto;
}
.weClosed{
    position: fixed;
    left: 0;
    right: 0;
    background-color: black;
    bottom: -60px;
    top: -60px;
    z-index: 1000;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
}

#clock{font-size: 100px;margin: 20px 0;display: block;letter-spacing: 10px;}
.spinner {
    width: 100px;
    height: 100px;
    position: relative;
    display: block;margin-bottom: 20px;
}
.clockH{margin: 40px 0;font-size: 40px;}

.spinner > span, .spinner > span:before, .spinner > span:after {
    content: "";
    display: block;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.spinner > span {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-left-color: transparent;
    -webkit-animation: effect-2 2s infinite linear;
    -moz-animation: effect-2 2s infinite linear;
    -o-animation: effect-2 2s infinite linear;
    -ms-animation: effect-2 2s infinite linear;
    animation: effect-2 2s infinite linear;
}

.spinner > span:before {
    width: 75%;
    height: 75%;
    border-right-color: transparent;
}

.spinner > span:after {
    width: 50%;
    height: 50%;
    border-bottom-color: transparent;
}

@-webkit-keyframes effect-2 {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes effect-2 {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/***********************************Main page style******************************************/
.slava{
    margin: 1em 0 .2em !important;
    font-size: 2.8em !important;
    background: -webkit-linear-gradient(#106eed, #ddc221);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
header {
    position: sticky;
    top: 0;
    height: 125px;
    padding: 0 40px;
    background-color: #000000;
    z-index: 5;
}
.logo {width: 350px;text-align: right;}
/*.langs{position: relative;}
.langs>span{cursor: pointer;padding: 0 15px;margin: 0 10px;}
.langs>div{position: absolute;top: 100%;background-color: #000;padding-top: 10px;left: 10px;height: 0px;overflow: hidden;
    -webkit-transition: height.3s ease;
    -o-transition: height.3s ease;
    transition: height.3s ease;}
.langs.show>div{height: 100px;}
.langs>div>a{display: block;cursor: pointer;padding: 0 15px;
    -webkit-transition: padding .3s ease;
    -o-transition: padding .3s ease;
    transition: padding .3s ease;}
.langs.show>div>a{padding: 10px 15px;}*/

.langsMobMenu{color: #808080;margin-top: 2em;}
.langsMobMenu>a,.langsMobMenu>span{padding: 0 10px;color: #808080;}
.langsMobMenu>span{color: #fce19c;display: inline !important;}
.langsMobMenu>a{color: #fff;}
.langsMobMenu>a:hover{color: #fce19c;}
/*@media screen and (min-width: 1025px){
.langs:hover>div{height: 100px;}
.langs:hover>div>a{padding: 10px 15px;}
}*/


.cart {width: 20%;}

nav {
    width: 70%;
    padding: 0 10%;
}

nav a {
    transition: color .2s;
    font-weight: 700;
}

nav a:hover {
    color: #fce19c;
}

.menuActive {
    display: none;
}

.logo a {
    display: block;
    padding: 5px;
    border-radius: 11px;
    box-shadow: 0 0 30px #fce19c;
}

.logo img {
    max-height: 80px;
    max-width: 100%;
    min-height: 60px;

}
.cart span, .cart img {
    display: block;
}
.cart .totalCount,.cart .totalTextEnd{display: inline-block;}

.cart {
    height: 50%;
}

.cart a img {
    height: 100%;
    max-height: 50px;
}

.cart a {
    height: 100%;
    position: relative;
    transition: color .2s;
}

.cart a:hover {
    color: #fce19c;
}

.cart a div {
    margin-left: 5px;
    align-self: stretch;
    padding: 10px 0;
}

.cart a div span:first-child {
    margin-bottom: 6px;
}

.cart a div span:last-child {
    color: #808080;
    font-size: 0.8rem;
}


/*-------Cat products------*/

.catProducts {
    flex-wrap: wrap;
    padding: 30px 1%;
}

.catProducts div {
    position: relative;
    width: 18%;
    height: 25vw;
    max-height: 360px;
    margin: 20px 2% 20px 0;
    background-color: #888;
}

.catProducts div img {
    display: block;
    height: 70%;
    margin: 0 auto;
    transition: transform 0.2s;
}

.catProducts div span {
    display: flex;
    height: 20%;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s;
}

.catProducts div:hover span {
    color: rgba(255, 255, 255, 1);
}

.catProducts div:hover img {
    transform: scale(1.15);
}

.catProducts div a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.catProducts div:nth-child(5n) {
    margin-right: 0;
}

.catProducts div:first-child {
    background: linear-gradient(180deg, #257B33 0%, #183C1E 100%)
}

.catProducts div:nth-child(2) {
    background: linear-gradient(180deg, #C2C46E 0%, #73751D 100%);
}

.catProducts div:nth-child(3) {
    background: linear-gradient(180deg, #AB264E 0%, #621111 100%);
}

.catProducts div:nth-child(4) {
    background: linear-gradient(180deg, #B08925 0%, #634C10 100%);
}

.catProducts div:nth-child(5) {
    background: linear-gradient(180deg, #985416 0%, #4E3117 100%);
}

.catProducts div:nth-child(6) {
    background: linear-gradient(180deg, #76ACD2 0%, #304D63 100%);
}

.catProducts div:nth-child(7) {
    background: linear-gradient(180deg, #8B4117 0%, #2E190D 100%);
}

.catProducts div:nth-child(8) {
    background: linear-gradient(180deg, #69A819 0%, #223C12 100%);
}

.catProducts div:nth-child(9) {
    background: linear-gradient(180deg, #7C37ED 0%, #260D50 100%);
}

.catProducts div:last-child {
    background: linear-gradient(180deg, #E1CC00 0%, #514B10 100%);
}


/*-------Advantages style------*/
.advantages, .msg {
    padding: 30px 0;
}

.lines::before, .lines::after {
    position: absolute;
    content: "";
    display: block;
    right: 0;left: 0;
    height: 70%;
    background: url("../img/decorUp.svg") center center no-repeat;
    background-size: contain;
}

.lines::before {
    top: 0;
    transform: translateY(-120%);
}

.lines::after {
    background: url("../img/decorDown.svg") center center no-repeat;
    background-size: contain;
    transform: translateY(20%);
}

.advBlock {
    margin-top: 30px;
    padding: 20px 2%;
    text-align: center;
    font-weight: 300;
    width: 25%;
    border-right: 1px solid rgba(255, 255, 255, .5);
}

.advBlock img {
    margin-bottom: 20px;
}


/*-------Form style------*/

.msg>div {
    padding: 20px;
    background: url("../img/bottle2.jpg") center top no-repeat;
    background-size: cover;
}

.msg>p {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 300;
    margin: 25px auto;
}

form {
    text-align: center;
}

input, textarea {
    margin: 20px 0 0;
    padding: 10px;
    width: 400px;
    max-width: 400px;
    border: none;
    border-radius: 5px;
    color: #242424;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    box-shadow: inset -1px 1px 5px rgba(0, 0, 0, 0.6);
}

input::placeholder, textarea::placeholder {
    color: #939393;
}

.btn {
    margin: 20px 0;
    padding: 10px 0;
    width: 200px;
    background-color: #fce19c;
    border: none;
    color: #1d1e20;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
}
.ship{text-align: center;margin: .8em 0;font-size: 3em;font-weight: bold;color:  #fff;}
.gotoua,.stay{width: 280px;}
/*-------Footer style------*/
footer.maxw {
    padding: 30px 0 20px;
}

footer>div {
    width: 30%;
    text-align: center;
    align-self: stretch;
}

footer div span, footer div:first-child a {
    display: block;
    margin: 15px 0;
    font-weight: 200;
}

footer div span:first-child {
    font-weight: 700;

}

.workTime {
    font-weight: 700;
    font-size: 1.3rem;
    color: #fce19c;
}

.social>a {
    display: block;
    text-align: center;
    margin-bottom: 15px;
}

.social p a {
    display: block;
    height: 36px;
    width: 36px;
}

.social img {
    height: 100%;
    width: 100%;
}

.social p a:not(:last-child) {
    margin-right: 15px;
}

.mainMenu {
    display: none;
}
.isvg {width: 36px;height: 36px;stroke-width: 0;stroke-linecap: round;stroke-linejoin: round;fill: #fce19c;vertical-align: bottom;cursor: pointer;
-webkit-transition: fill .5s;-moz-transition: fill .5s;-o-transition: fill .5s;transition: fill .5s;}
.instagram:hover>.isvg{fill: #ed4958;}
.telegram:hover>.isvg{fill: #27a9e8;}
.whatsapp:hover>.isvg{fill: #00e676;}
.viber:hover>.isvg{fill: #6241c0;}




/***********************************Products page style******************************************/

main.shop {
    display: flex;
    padding: 40px 0;
}

/*-------Filter style------*/

.filterb {
    width: 25%;
    background-color: #000000;
    padding: 15px 0;
    flex-shrink: 0;
}

.filterb>p {
    font-size: 1.2rem;
    padding: 0 25px 15px;
    border-bottom: 2px solid #242424;
    font-weight: 700;
}

.filterb li {
    line-height: 1.7;
}

.filterb>ul {
    padding: 15px 25px;
    color: #939393;
    position: sticky;
    top: 120px;
}

.filterb>ul>li>ul {
    padding-left: 25px;
}

.filterb>ul>li>ul>li {
    font-weight: 300;
}

.filterb ul li.active>a, .filterb ul li:hover>a,
.underCat li.active, .underCat li:hover {
    color: #fce19c;
}

.filterb li a {
    display: block;
    position: relative;
}

ul.filters-container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content:center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 20px;
}

ul.filters-container li {
  list-style:none;
  margin: 15px 15px 0;
}

ul.filters-container li button {
  position: relative;
  display: block;
  padding: 8px 15px;
  margin: 0 15px;
  text-align: center;
  background: #171515;
  font-size: 20px;
  color: #e8e8e8;
  transition: .5s;
  width: auto;
  outline:none;
}

ul.filters-container li button:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: #fce19c;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

ul.filters-container li button.active:before, ul.filters-container li button:hover:before {
  transform: scale(1.05);
  box-shadow: 0 0 8px #fce19c;
  filter: blur(3px);
}

ul.filters-container li button.active,ul.filters-container li button:hover {
  color: #fce19c;
  box-shadow: 0 0 10px #fce19c;
  /*text-shadow: 0 0 15px #fce19c;*/
}
.dn{display: none !important;}

.openCat {
    position: absolute;
    height: 15px;
    width: 15px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.openCat::before, .openCat::after {
    position: absolute;
    top: 50%;
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: #fff;
    transform: translateY(-50%);
}

.openCat::after {
    transform: rotate(90deg) scale(1);
}

.catItem {
    cursor: pointer;
}

.catItem:hover>a, .catItem.active>a {
    color: #fce19c;
}

.catItem.active .openCat::after {
    transform: rotate(90deg) scale(0);
}

.catItem ul{
    height: 0;
    overflow: hidden;
    transition: height .3s;
}

.catItem.active>ul {
    height: auto;
}



/*-------Main product block style------*/

.products {
    width: 75%;
    flex-shrink: 0;
}

.products h1 {
    padding: 0 5px;
    margin: 10px 0 0;
    text-transform: none;
    font-size: 1.3rem;
    text-align: center;
    font-weight: 600;
}

.products h1:before, .products h1:after {
    display: none;
}

.products h1 img {
    height: 50px;
    padding-right: 10px;
}

.head {
    margin: 0 0 25px 5%;
    padding: 15px 0;
    font-weight: 700;
    font-size: 1.2rem;
    border-bottom: 1px solid #ffffff;
}

.productsList, .addList {
    display: flex;
    flex-wrap: wrap;
}

.prodCard {
    position: relative;
    width: calc(85% / 3);
    margin: 0 0 45px 5%;
    display: flex;
    flex-direction: column;
}

.imgCard {
    position: relative;
    height: 25vw;
    max-height: 330px;
    width: 100%;
    margin-bottom: 10px;
}

.imgCard.label::after {
    content: "";
    position: absolute;
    height: 39%;
    width: 45%;
    background: url("../img/label.png") center center no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
    transform: translate(-8%, -12%);
}

.imgZoom.label {
    position: relative;
}

.imgZoom.label::after {
    content: "";
    position: absolute;
    height: 40%;
    width: 45%;
    background: url("../img/label2.png") top left no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
    transform: translate(-2%, -2%);
}


.imgCard>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*div.toCart {
    position: absolute;
    top: 5%;
    right: 7%;
    height: 40px;
    width: 40px;
    background-color: #fce19c;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: all .2s;
}

.prodCard:hover div.toCart {
    transform: scale(1.2);
}

div.toCart img {
    height: 70%;
    width: 70%;
}*/

.prodCard .name {
    padding: 5px 0;
}

.prodCard .price span, .productBlock span:not(.t) {
    color: #fce19c;
    display: inline-block;
}

.prodCard .price span.newPrice, .productBlock span.newPrice  {
    font-weight: 600;
}

.prodCard .price span.oldPrice, .productBlock span.oldPrice {
    color: #888888;
    position: relative;
    margin-right: 5px;

}

span.oldPrice::after{
    content: "";
    position: absolute;
    display: block;
    height: 2px;
    width: 95%;
    background-color: #888888;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
}

.head.add {
    display: none;
}

.btnFilter {
    display: none;
}


/*-------Poll style------*/

.question {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 700;
    color: #fce19c;
}

.products .info {
    text-align: center;
    margin-bottom: 20px;
}

.poll {
    margin-left: 5%;
    padding: 30px 0 0;
    flex-wrap: wrap;
}


.poll .item {
    justify-content: flex-start;
    width: 48%;
    height: 150px;
    padding: 2%;
    margin-bottom: 20px;
    background: linear-gradient(180deg, #76ACD2 0%, #304D63 100%);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition: transform 0.1s;
    cursor: pointer;
}

.poll .item:hover {
    transform: scale(1.05);
}

.poll .item img {
    height: 100%;
    border: 3px solid #fce19c;
    margin-right: 5%;
}

.poll .item>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: .9em;
}

.poll .item>div p {
    width: 100%;
    text-align: center;
    font-weight: 300;
}

.poll .item>div>div {
    font-size: 1.4em;
    color: #fce19c;
    margin-top: 10px;
}

.poll .item>div input {
    opacity: 0;
    height: 0.1px;
    width: 0.1px;
    margin-top: 0;
}

.poll .item input:checked ~ label::before {
    background-color: #fce19c;
}

/*.rate {
    width: 100%;
    margin-top: 5%;
}

.rate span {
    display: block;
    font-size: 1.2rem;
}

.rate .percentLine {
    height: 6px;
    width: 85%;
    background-color: #fce19c;
    border-radius: 3px;
    transition: transform 2s ease-in-out;
    transform-origin: left center;
    transform: scaleX(0);
}

.rate > .percent {
    margin-left: auto;
    margin-right: 2px;
}*/

.volume-cost{
    font-size: 20px;
    color:#fce19c;
    font-weight: normal;
}
/*-------Product block style------*/

.productBlock {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 7;
    width: 70vw;
    max-width: 900px;
    background-color: #242424;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    padding: 20px;
    display: none;
}

.productBlock.show {
    display: block;
}

.productBlock .imgZoom {
    width: 45%;
    height: 45vw;
    max-height: 500px;
    float: left;
    margin-right: 5%;
}

.productBlock .imgZoom img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.productBlock p.name {
    margin-top: 30px;
    font-size: 1.2rem;
}

.productBlock p {
    margin-bottom: 7px;
    font-size: 0.8rem;
}

.productBlock p span.c{
    color: #fce19c;
}

.productBlock p span.t{
    font-weight: 300;
}

.productBlock .btn {
    display: block;
    margin: 20px auto 0;
}

.productBlock .close {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.productBlock .close:hover::before, .productBlock .close:hover::after {
    background-color: #fce19c;
}

.productBlock .close::before, .productBlock .close::after {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 2px;
    background-color: #fff;
    top: 50%;
    left: 50%;
}

.productBlock .close::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.productBlock .close::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

/*-------Product Card------*/
.productCard h1{text-align: left;color: #fce19c;margin-top: 0;font-size: 1.4em;margin-bottom: 24px;}
/*.productCard .photo{background-color: #fff;}*/
.productCard .photo>img{max-width: 100%; height: auto;}
.base{align-items: start;justify-content: space-between;margin-bottom: 30px;}
.base>div{width: 47%;}
.productCard .specifications{flex-direction: column;align-items: flex-start;}
.productCard .specifications table tr>td{padding: 3px 20px 3px 0;font-weight: 300;}
.productCard .specifications table tr>td:first-child{opacity: 0.7; min-width: 140px;}
.productCard .cost{margin: 20px 0;}
.productCard .cost span:first-child{opacity: 0.7;}
.productCard .cost span:last-child{color: #fce19c;}
.productCard .cost span:last-child>b{font-size: 2.4em;}
.productCard .cost span.baseCost:first-child{position: relative;margin-right: 20px;color: #888888;display: inline-block;}
.productCard .cost span.baseCost:first-child>b{font-size: 2em;}
.productCard .baseCost:after{content: "";position: absolute;display: block;height: 2px;width: 95%;background-color: #888888;top: 50%;left: 50%;transform: translateX(-50%) rotate(-8deg);}
.productCard .nocost{margin-top: 20px;display: block;}
.productCard .nocost span:first-child{opacity: 0.9;font-size: 1.4em;padding: 10px 20px 10px 0;}
.productCard .buy>div{position: relative;display: inline-block;margin-bottom: 10px;}
.productCard .buy ul{position: absolute;left: 0;height: 0;overflow-x: scroll;
    top: 36px;
    background-color: #fff;
    color: black;
    width: 90px;
    padding: 0;
    text-align: center;
-webkit-box-shadow:inset 0 0 8px #777;
       -moz-box-shadow:inset 0 0 8px #777;
            box-shadow:inset 0 0 8px #777;
            transition: all .3s;}
.cat-no-quant{height: 34px;line-height: 34px;}
.productCard .buy .showList ul{height: 128px;padding: 10px 0;}
.productCard .buy ul>li{cursor: pointer;margin-bottom: 4px;padding: 2px 0;font-weight: bold;}
.productCard .buy ul>li:hover{background-color: #fce19c;}
.productCard a[href^="tel"]{display: block;margin-top: 10px;font-weight: 300;}
.productCard .actions{width: 100%;margin: 20px 0;border-top: 1px solid #c7ac67;/*border-bottom: 1px solid #c7ac67;*/}
.productCard .actions input{width: 90px;margin-right: 4px;text-align: center;font-weight: bold;font-size: 1.2em;padding: 7px 0 9px 0;}
.productCard .actions input+button{margin-left: 20px;width: auto;padding: 10px 20px;margin-left: 12px;}
.productCard .actions input,.productCard .actions button{margin-top: 0px;}
.productCard .info{margin-top: 30px;}

.notes{margin-bottom: 20px;flex-wrap: wrap;justify-content: space-between;}
.notes>div{display: inline-block;width: 47%;padding: 0 40px 40px 0;font-size: 0.8em;}
.notes>div>span{font-weight: bold;opacity: 0.6;display: inline-block;margin-bottom: 8px;font-size: 1.1em;}
/***********************************Cart style******************************************/

main.cartPage {
    padding-top: 20px;
}

 p.info>a, .alertDeliveryCost p>a {
    color: #fce19c;
    text-decoration: underline;
}

.cartProducts {
    width: 75%;
    align-self: flex-start;
    padding-right: 25px;
}

.cartProducts .head {
    margin: 0 0 25px;
}

.summary {
    width: 25%;
    align-self: flex-start;
    background-color: #000000;
}



.cartItem {
    justify-content: space-between;
    background-color: #000000;
    padding: 15px;
    margin-bottom: 25px;
}

.cartItem>* {
    align-self: flex-start;
}

.cartItem img {
    height: 120px;
    margin-right: 15px;
}

.cartItem .descr {
    margin-right: auto;
    width: 55%;
}

.count {
    width: 20%;
    text-align: center;
}

.inpCount__var {
    margin: 20px 10px;
    width: 60px;
    padding: 5px;
    text-align: center;
}
.prodCard .inpCount__var{
    margin: 0 10px;
}

.inpCount__add, .inpCount__minus {
    height: 20px;
    width: 20px;
    background-color: #242424;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.inpCount__minus::before, .inpCount__add::before, .inpCount__add::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 70%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
}

.inpCount__add::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.sum {
    margin-left: 20px;min-width: 80px;
}
.prodCost{margin-top: 26px;display: inline-block;}

.cartItem .del {
    margin-left: 20px;
    position: relative;
    align-self: center;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.del::before, .del::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    height: 2px;
    width: 100%;
    background-color: #fff;
    transform: translateY(-50%);
    transition: transform 0.3s;
}

.del:hover::before{
    transform: translateY(-50%) rotate(45deg);
}

.del:hover::after {
    transform: translateY(-50%) rotate(-45deg);
}

.summary>p {
    font-size: 1.2rem;
    padding: 15px 25px;
    border-bottom: 2px solid #242424;
    font-weight: 700;
}

.summary .form {
    padding: 25px;
}

.summary .form input, .summary .form textarea {
    margin: 5px 0 15px;
    width: 100%;
    padding: 5px 10px;
}

.summary .form textarea {
    height: 100px;
}

.summary .form>p.summaZakaza {
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}
.summary .form>p.deliveryCart{
    justify-content: space-between;
    margin-bottom: 8px;
}
.summary .form>p.summaZakaza span,.summary .form>p.deliveryCart span {
    color: #fce19c;
}

.summary .form button {
    display: block;
    margin: 15px auto 0;
}

.summary .totalSum {
    margin-left: auto;
    margin-right: 5px;
}

p.info {
    color: #b7b7b7;
    font-weight: 300;
    margin-top: 20px;
}

.summary label {
    position: relative;
}

.summary label:before {
    position: absolute;
    content: '+38';
    top: 0;
    left: 4px;
    color: #242424;
}

.summary input[type='tel'] {
    padding-left: 40px;
}


.alert18, .alertDeliveryCost {
    position: fixed;
    padding: 10px;
    text-align: center;
    top: 50%;
    left: 50%;
    background-color: #242424;
    transform: translate(-50%, -50%);
    z-index: 7;
    display: none;
}

.alertDeliveryCost p {
    margin-top: 15px;
    font-weight: 300;
}

.alertDeliveryCost p b{
    color: #fce19c;
}

.alert18.show, .bg.show, .alertDeliveryCost.show {
    display: block;
    box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, .5);
}

.alert18 img {
    height: 50px;
    width: 50px;
}

.bg {
    position: fixed;
    z-index: 6;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
}

.btn.cnl {
    border: 2px solid #fce19c;
    background-color: #242424;
    color:#fff;
}


/***********************************About and Pay style******************************************/



.about p, .pay p, .delivery p {
    text-align: justify;
    line-height: 1.5;
    font-weight: 300;
}
.pay p a, .delivery p a {
    color: #fce19c;

}

.pay p b, .delivery p b {
    color: #fce19c;
}

.pay p a:hover {
    text-decoration: underline;
}


.about p img {
    max-height: 35px;
    transform: translateY(25%);
}

p.h, a.h {
    margin: 10px 0;
    font-size: 1.2rem;
    text-align: center;
    text-transform: uppercase;
    color: #fce19c;
    font-weight: 700;
}

a.h {
    display: block;
    font-size: 1.5rem;
    text-decoration: underline;
}

.delivery {
    padding-left: 5%;
}

.map {
    margin: 20px auto;
    width: 90%;
    height: 80vw;
    max-height: 600px;
}


.map img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}



/***********************************Cap style******************************************/
.holiday {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: url("../img/bg_holiday.jpg") center center no-repeat;
    background-size: cover;
    z-index: 100;
}

.cap {
    padding: 35px 15px;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.cap p {
    font-size: 1.2rem;
}

.cap>:last-child {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fce19c;
}

@media screen and (max-width: 1024px){
nav {width: 70%;padding: 0 20px;}
/*.langs>span{padding: 0 10px;}
.langs>div>a{padding: 0 10px;}
.langs.show>div>a {padding: 10px;}*/
}
@media screen and (max-width: 1023px){

    html {
        font-size: 18px;
    }

    h2 {
        margin: 30px 0 60px;
    }

    header {
        height: 80px;
        padding: 0 15px;
    }
    .logo {width: 250px;}

    .wide {
        display: none;
    }

    nav {
        height: 50%;
        width: auto;
        padding: 0;
    }

    nav a {
        display: none;
    }

    .logo img {
        max-height: 60px;
        max-width: 100%;
        min-height: unset;
    }

    .cart a div {
        padding: 0;
    }

    .cart a div span:first-child {
        margin-bottom: 5px;
    }

    .menu {
        margin: 0 5px 0 10px;
        height: 100%;
    }

    .menuActive {
        display: block;
        position: relative;
        width: 30px;
        height: 2px;
        background-color: #ffffff;
        transition: all 0.3s;
        outline: none;
    }

    .menuActive::before, .menuActive::after {
        content: '';
        position: absolute;
        top: -300%;
        left: 0;
        display: block;
        width: 30px;
        height: 2px;
        background-color: #ffffff;
        transition: all 0.3s;
    }

    .menuActive::after {
        top: auto;
        bottom: -300%;
        left: 0;
    }

    .menuActive.show {
        background-color: #000000;
    }

    .menuActive.show::before {
        transform: rotate(45deg);
        top: 0;
    }

    .menuActive.show::after {
        transform: rotate(-45deg);
        top: 0;
    }

    .poll .item {
        width: 100%;
        height: 150px;
    }

    .poll .item>div{
        font-size: 1em;
    }

    /*-------Category style------*/

    .catProducts {
        padding: 5px 1%;
    }

    .catProducts div {
        width: 48%;
        height: 60vw;
        max-height: 60vw;
        margin: 20px 4% 0 0;

    }

    .catProducts div:nth-child(2n) {
        margin-right: 0;
    }

    .catProducts div:nth-child(5) {
        margin-right: 4%;
    }

    h2::before, h2::after, h1::before, h1::after {
        width: 90%;
        margin: 0 5%;
    }

    /*-------advantages block style------*/


    .advantages>.flx {
        width: 95%;
        margin: 0 auto;
        flex-wrap: wrap;
    }

    .advBlock {
        width: 50%;
    }

    .advBlock:nth-child(2n) {
        border-right: 0;
    }


    /*-------Msg block style------*/

    .msg input, .msg textarea {
        width: 90vw;
    }


    /*-------Msg block style------*/

    footer {
        flex-direction: column;
    }

    footer>div {
        width: 100%;
    }

    .mainMenu {
        position: fixed;
        display: block;
        background-color: #242424;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 90px;
        z-index: 3;
        transform: translateY(-100%);
        transition: transform .3s;
    }

    .mainMenu>a {
        display: block;
        text-align: center;
        font-weight: 700;
        margin: 20px 0;
        font-size: 1.3rem;
    }
    .mainMenu>div.flx {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        
    }
    .mainMenu>div.flx>a {
        -webkit-flex: 1 0 50%;
        -moz-flex: 1 0 50%;
        -ms-flex: 1 0 50%;
        -o-flex: 1 0 50%;
        flex: 1 0 50%;
        text-align: center;margin-bottom: 12px;
    }

    .mainMenu.show {
        transform: translateY(0);
    }

    /***********************************Products page style******************************************/
    main.shop {
        padding: 0;
    }
    .filterb {
        position: fixed;
        z-index: 3;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 90px;
        transform: translateX(-100%);
        transition: transform .3s;
    }

    .filterb * {
        cursor: auto;
    }

    .filterb.show {
        transform: translateX(0);
    }

    .products {
        width: 100%;
    }

    .products .head {
        margin-left: 0;
    }

    .prodCard {
        width: calc(92% / 3);
        margin: 0 4% 15px 0;
    }

    .prodCard:nth-child(3n) {
        margin-right: 0;
    }

    .prodCard .imgCard {
        height: 55vw;
    }

    .btnFilter {
        display: flex;
        position: fixed;
        bottom: 0;
        right: 0;
        width: 40%;
        max-width: 150px;
        height: 50px;
        background-color: #000000;
        border: 2px solid #242424;
        z-index: 4;
        transform-origin: bottom right;

    }

    .btnFilter.anim {
        animation: resize 1s 5 alternate-reverse;
    }

    .btnFilter p {
        text-align: center;
        width: 70%;
    }

    .btnFilter>div {
        background: url("../img/filter.svg") center center no-repeat;
        background-size: 80% 80%;
        width: 30%;
        height: 80%;
    }

    .btnFilter>div.show {
        background: url("../img/filterActive.svg") center center no-repeat;
        background-size: 80% 80%;
    }

    .delivery {
        padding-left: 0;
    }

    /*-------Product block style------*/

    .productBlock {
        width: 100%;
        height: 100%;
        max-height: none;
        overflow: scroll;
        padding: 10px;
    }


    .productBlock .imgZoom {
        width: 50%;
        height: 80vw;
        margin-bottom: 10px;
    }

    .productBlock .fl{
        float: left;
    }

    .productBlock .btn {
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .productBlock p.name {
        margin-top: 20px;
        font-size: 1.1rem;
    }

    .productBlock .close {
        top: 5px;
        right: 5px;
    }

    /***********************************Cart page style******************************************/
    main.cartPage {
        padding-top: 0;
    }

    .cartPage {
        flex-direction: column;
    }

    .cartProducts, .summary {
        width: 100%;
    }

    .cartProducts {
        padding-right: 0;
    }

    .summary {
        margin-top: 20px;
    }

    .summary .form {
        padding: 15px;
    }

    .del::before{
        transform: translateY(-50%) rotate(45deg);
    }

    .del::after {
        transform: translateY(-50%) rotate(-45deg);
    }

    input, textarea {
        max-width: none;
    }

    .summary input[type='tel'] {
        padding-left: 35px;
    }

    .alert18,  .alertDeliveryCost {
        width: 90%;
    }

    .alert18 .flx {
        flex-direction: column;
    }

    /***********************************Closed style******************************************/
    .cap {
        width: 95%;
    }



}


@media screen and (max-width: 768px){ 
    html {
        font-size: 16px;
    }
    #clock {font-size: 50px;}
    .clockH {margin: 30px;font-size: 22px;}
    .base>div{width: 48%;}
    .notes>div{width: 48%;}
/*header .langs{display: none;}*/
}


@media screen and (max-width: 369px) {
    .advantages h2::before, .advantages h2::after {
        height: 30%;
    }
}

@media screen and (max-width: 600px) {
    .base{flex-direction: column;}
    .base>div{width: 100%;}
    .productCard h1{margin-top: 20px;font-size: 1.3em;}
    .productCard .actions{order: -2;width: 100%;border-top: none;border-bottom: 1px solid #c7ac67; text-align: center;}
    .productCard .call{order: -1;width: 100%;text-align: center;}
    /*.productCard a[href^="tel"]{}*/
    .productCard .cost{margin-top: 0;}
    .productCard .nocost span:first-child{padding: 10px;}
    .notes>div{display: block;width: 100%;padding: 0 0 30px 0;}
    .llList li{font-size: 1em;}
    .prodCard {
        width: 48%;
        margin: 15px 0;
    }
    .prodCard:nth-child(3n) {
        margin-right: 0;
    }

    .prodCard:nth-child(2n) {
        margin-right: 0;
    }
    .productsList{justify-content: space-between;}


    .cartItem {
        position: relative;
        flex-wrap: wrap;
    }

    .cartItem>img {
        width: 25%;
        height: auto;
        margin-right: 5%;
        margin-bottom: 20px;
    }

    .cartItem>.descr {
        width: 70%;
        margin: 0 0 20px;
    }

    .cartItem>.count, .cartItem>.sum {
        width: 40%;
    }

    .cartItem>.del {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
    }

    .flip-clock-wrapper ul li a div div.inn {
        font-size: 2.5rem;
    }

    .holiday {
        background: url("../img/bg_mobile.jpg") center center no-repeat;
        background-size: cover;
    }
    ul.filters-container li button {
        padding: 7px 15px;
        margin: 0;
        font-size: 14px;
    }
    ul.filters-container li {
      margin: 7px 15px;
  }
  ul.filters-container{top:80px;}
  .poll{margin-left: 0;}
}

@media screen and (max-width: 320px) {
    .productCard .actions button{margin-left: 0;}
    #clock {font-size: 40px;}
}

@keyframes resize {
    0% {transform: scale(1)}
    100% {transform: scale(1.1)}
}

@media screen and (max-width: 512px){
.cart{width: 80px;}
.cart a{flex-direction: column;}
.cart a img{max-height:24px;}
.cart {height: 80%;}
.logo {width: 60%;}
header{padding: 0 10px;}
.ship{font-size: 2.3em;}
}