@font-face {
   font-family: 'Polomanfont';
   src: local('Montserrat Hairline'), local('Montserrat-Hairline'), url('/fonts/montserrat/Montserrat-ExtraLight.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
}

@font-face {
   font-family: 'Polomanfont';
   src: local('Montserrat Light'), local('Montserrat-Light'), url('/fonts/montserrat/Montserrat-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
}

@font-face {
   font-family: 'Polomanfont';
   src: local('Montserrat Regular'), local('Montserrat-Regular'), url('/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Polomanfont';
   src: local('Montserrat Medium'), local('Montserrat-Medium'), url('/fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'Polomanfont';
   src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url('/fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
}

@font-face {
   font-family: 'Polomanfont';
   src: local('Montserrat Bold'), local('Montserrat-Bold'), url('/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
}

/* Цвета */

:root {
   --vwh: calc(1vw + 1vh);
   --background: #1a1a1a;
   --red: #ff0000;
   --select: #fff2a8;
   --black: #000;
   --white: #fff;
   --yell: #ffd760;
   --blue: #006bff;
   --mblue: #2d7fef;
   --green: #00bb3c;
   --input: #adcfe9;
   --foot: #17212b;
   --foot-txt: #d9d9d9;
   --foot-btm: #151e28;
   --foot-btm-txt: #728699;
   --maxwidth: 1300px;
   --hcrai: 80px;
   --ff: 'Polomanfont', sans-serif;
   --htop: #d9eeff;
   --inp: #f0f8ff;
   --titcolor: #f2a845;
   --search: #2b3b7f;
   --faq: #ffe9bc;
   --journal: #0a3d62;
   --insta: #6f82d8;
   --otzyv: #186065;
   --case: #663bb7;
   --contact: #e6ebff;
   --foncolor: rgb(0 0 0 / 20%);
}

/* Конец */

::selection {
   background: var(--select);
   color: var(--black);
}

a {
   color: var(--white);
   text-decoration: none;
}

a:hover {
   color: var(--titcolor);
}

span,
div,
h1,
h2,
h3,
h4,
p,
p b,
p a,
p strong {
   word-wrap: break-word;
   word-break: break-word;
}

svg,
svg g,
img {
   margin: 0px;
   padding: 0px;
   line-height: 0px;
   max-width: 100%;
}

/* Плавность */

a,
img,
.plavn {
   transition: all 0.5s;
}

ul[id*="uStarRating"] a {
   transition: all 0s;
}

.no-scroll {
   overflow: hidden;
}

/* Стиль */

* {
   outline: none
}

textarea,
input {
   outline: none;
   resize: none;
   box-sizing: border-box
}

img,
a img {
   border: none;
   outline: none
}

select:focus {
   outline: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--ff);
}


html,
body {
   margin: 0;
   padding: 0;
   height: 100%
}

body {
   font-size: 14px;
   line-height: 24px;
   background-color: var(--background);
   color: var(--white);
   font-weight: 400;
   font-family: var(--ff);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-image: url(/img/body2.jpg);
   background-size: cover;
   background-repeat: repeat-y;
}

h1,
h2,
h3,
h4 {
   line-height: initial;
   margin-top: 0px;
}

body {
   top: 0px !important;
   overflow-x: hidden;
}

.noscroll {
   overflow: hidden !important;
}

/* Доп стили */

.minitext {
   text-transform: lowercase;
}

table {
   border-collapse: collapse;
   /* Убирает промежутки между границами ячеек */
   border-spacing: 0;
   /* Устанавливает расстояние между границами ячеек */
   width: 100%;
   /* Устанавливает ширину таблицы */
}

@media only screen and (max-width: 1023px) {
   table {
      display: block;
      overflow: scroll;
      width: auto !important;
   }
}

table td,
table th {
   padding: 0;
   /* Убирает внутренние отступы */
   margin: 0;
   /* Убирает внешние отступы */
   border: none;
   /* Убирает границы, если необходимо */
}

/* Шапка */

.catfon-5:before,
.catfon-6:before,
.catfon-7:before,
.catfon-8:before,
.catfon-9:before,
.catfon-10:before,
.catfon-11:before,
.catfon-12:before,
.catfon-home:before {
   content: '';
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   background-repeat: no-repeat;
   z-index: -1;
   top: 0px;
   left: 0px;
}

.catfon-home:before {
   background-image: url(/img/webp/duk.webp);
   background-position: bottom 0px right;
}

.catfon-5:before {
   background-image: url(/img/webp/nset.webp);
   background-position: bottom 0px right;
}

.catfon-6:before {
   background-image: url(/img/webp/newrol.webp);
   background-position: bottom 10px right;
}

.catfon-7:before {
   background-image: url(/img/webp/sushi.webp);
   background-position: bottom 10px right;
}

.catfon-8:before {
   background-image: url(/img/webp/fpoke.webp);
   background-position: bottom 10px right;
}

.catfon-9:before {
   background-image: url(/img/webp/sous.webp);
   background-position: bottom 5px right;
}

.catfon-10:before {
   background-image: url(/img/webp/napi.webp);
   background-position: bottom 10px right;
}

.catfon-11:before {
   background-image: url(/img/webp/parni.webp);
   background-position: bottom 10px right;
}

.catfon-12:before {
   background-image: url(/img/webp/hot.webp);
   background-position: bottom 10px right;
}

@media only screen and (max-width: 1239px) {

   .catfon-5:before,
   .catfon-6:before,
   .catfon-7:before,
   .catfon-8:before,
   .catfon-9:before,
   .catfon-10:before,
   .catfon-11:before,
   .catfon-12:before,
   .catfon-home:before {
      opacity: 0.5;
   }

}

@media only screen and (max-width: 699px) {

   .catfon-5:before,
   .catfon-6:before,
   .catfon-7:before,
   .catfon-8:before,
   .catfon-9:before,
   .catfon-10:before,
   .catfon-11:before,
   .catfon-12:before,
   .catfon-home:before {
      opacity: 0.2;
   }
}

#header {
   max-width: 1060px;
   margin: 0px auto;
   padding: 140px 40px 50px 40px;
   background-repeat: no-repeat;
   position: relative;
}

#header .menu {
   display: flex;
   flex-wrap: nowrap;
   gap: 30px;
   align-items: center;
   font-size: 13px;
   transition: all 0.5s;
   justify-content: flex-start;
   height: 60px;
}

#header.remenu {
   display: table;
   width: auto;
}

#header.remenu .menu {
   justify-content: center;
   max-width: 360px;
   height: inherit;
   flex-wrap: wrap;
}

#header.remenu .menu .alogo {
   margin-right: -16px;
}

#header .menu .alogo {
   line-height: 0px;
   height: 31px;
   position: relative;
   z-index: 1;
   width: 288px;
}

#header .menu .alogo img {
   height: 60px;
   position: absolute;
   bottom: -4px;
   max-width: inherit;
}

#header .menu ul {
   display: flex;
   flex-wrap: nowrap;
   gap: 30px;
   align-items: center;
   font-size: 13px;
   transition: all 0.5s;
   justify-content: flex-start;
   list-style: none;
   margin: 0px;
   padding: 0px;
}

#header .menu ul li a {
   color: var(--white);
   font-size: 14px;
   font-weight: 500;
}

#header .menu ul li a {
   color: var(--white);
}

#header .menu ul li.nav-item-active a,
#header .menu ul li a:hover {
   color: var(--titcolor);
}

.titcolor {
   color: var(--titcolor);
}

#header .title {
   color: var(--white);
   margin-top: 40px;
}

#header .title .titmini {
   font-size: 44px;
}

#header .title .titmain {
   font-size: 68px;
}

#header .text {
   color: var(--white);
   font-size: 18px;
   line-height: 32px;
   font-weight: 400;
}

.vibormenu {
   display: block;
   margin: 0px auto;
   max-width: 1200px;
   height: 120px;
   background-color: #372b23;
   border-radius: 16px;
   background-image: url(/img/webp/fonderevo.webp);
   background-size: cover;
   background-position: center;
   position: relative;
}

@media only screen and (max-width: 1279px) {
   .vibormenu {
      margin: 0px 40px;
   }
}

@media only screen and (max-width: 1023px) {
   .vibormenu {
      margin: 0px 20px;
   }
}

.vmslidcat table tbody,
.vibormenu .vmslid {
   width: 100%;
   margin: -20px auto;
   padding: 0px;
   position: absolute;
   z-index: 1;
   display: block;
   align-items: center;
   font-size: 13px;
   transition: all 0.5s;
   justify-content: space-between;
   list-style: none;
   width: 100%;
   margin: -40px auto;
}

.kost {
   display: block;
   position: relative;
   margin: 0px auto;
   width: calc(100% - 160px);
}

.kost .slick-prev {
   left: -50px;
}

.kost .slick-next {
   right: -50px;
}

.vmslidcat table tbody tr,
.vmslidcat table tbody tr td {
   display: block;
}

.vmslidcat table tbody tr a img,
.vibormenu .vmslid a img {
   height: 120px;
   display: block;
   z-index: 2;
   margin: 0px auto;
}

.vmslidcat table tbody tr a:hover img,
.vibormenu .vmslid a:hover img {
   transform: scale(1.2);
}

.vmslidcat table tbody tr a span,
.vibormenu .vmslid a span {
   display: block;
   text-align: center;
   border-radius: 8px;
   line-height: 34px;
   color: #fff;
   background-color: rgb(0 0 0 / 80%);
   font-weight: 500;
   transition: all 0.5s;
   width: 120px;
   margin: 6px auto 0px auto;
}

.vmslidcat table tbody tr td {
   padding: 20px 0px;
}

.vibormenu .vmslid .punkt {
   padding: 20px 10px;
   display: block;
}

.vibormenu .vmslid a:hover span {
   color: var(--titcolor);
}

@media only screen and (max-width: 1239px) {

   #header.remenu .menu .alogo {
      margin-right: 0px;
   }

   #header .menu .alogo {
      width: 230px;
   }

   #header .menu .alogo img {
      height: 50px;
      bottom: -0px;
   }

   #header .title .titmini {
      font-size: 34px;
   }

   #header .title .titmain {
      font-size: 58px;
   }

   #header .text {
      font-size: 16px;
      line-height: 28px;
   }

   #header .text p {
      margin: 0px;
   }

   #header {
      max-width: 860px;
      padding: 140px 40px 50px 40px;
   }

   .catfon-home {
      background-position: right bottom -3vw;
   }

}

@media only screen and (max-width: 1023px) {
   #header .title .titmain {
      font-size: 48px;
   }

   #header .text {
      font-size: 14px;
      line-height: 26px;
   }

   .catfon-home {
      background-position: right bottom -5vw;
   }

}

@media only screen and (max-width: 699px) {

   #header .menu {
      flex-wrap: wrap;
      height: inherit;
   }

   #header .menu .alogo {
      width: 230px;
   }

   #header .menu {
      justify-content: center;
   }

   #header .menu ul {
      gap: 20px;
      flex-wrap: wrap;
   }

   #header {
      padding: 140px 20px 50px 20px;
   }

   #header .title {
      margin-top: 20px;
      text-align: center;
   }

   .title h1 br,
   #header .text br {
      display: none;
   }

   #header .text {
      text-align: center;
   }

   #header .title .titmain {
      font-size: 44px;
   }

}

/* Основные поля */

label {
   line-height: 20px;
   display: inline;
   justify-content: flex-start;
   align-items: center;
   gap: 10px;
}


.edtTypeMenu {
   display: none;
}

input[type="checkbox"] {
   display: inline-block;
   width: 20px;
   height: 20px;
   padding: 0px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   vertical-align: middle;
   margin: 0px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: 0;
   position: relative;
   box-sizing: border-box !important;
   transition: all .5s ease;
   position: relative;
   top: 0px;
   left: 0px;
   float: left;
   overflow: hidden;
}

input[type="checkbox"]:hover {
   border: none;
}

input[type="checkbox"]::before {
   content: "";
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 2;
   background-image: url(/img/tire.webp);
   background-repeat: no-repeat;
   background-size: 50%;
   background-position: center;
   transition: all 0.5s;
}

input[type="checkbox"]::after {
   content: "";
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   left: 0%;
   top: 0px;
   background-color: var(--titcolor);
   z-index: 1;
   transition: all 0.5s;
}

input[type="checkbox"i]:disabled::after {
   background-color: var(--background);
}

input[type="checkbox"i]:hover:disabled::before,
input[type="checkbox"i]:disabled::before {
   background-image: none;
}

input[type="checkbox"]:hover::before {
   background-image: url(/img/okb.webp);
}

input[type="checkbox"i]:checked:disabled::before,
input[type="checkbox"]:checked::before {
   content: "";
   display: block;
   height: 100%;
   width: 100%;
   background-color: var(--green);
   position: absolute;
   left: 0px;
   top: 0px;
   background-image: url(/img/ok.webp);
   background-repeat: no-repeat;
   background-size: 50%;
   background-position: center;
}

input[type="checkbox"]:checked::after {
   background-color: var(--green);
}

textarea,
input {
   outline: none;
   resize: none;
   box-sizing: border-box;
   color: var(--black);
   font-family: var(--ff);
   transition: all 0.5s;
   font-size: 13px;
}

button {
   outline: none;
   resize: none;
   box-sizing: border-box;
   font-family: var(--ff);
   transition: all 0.5s;
}

textarea {
   overflow: auto;
   border: 1px solid var(--titcolor);
   background-color: var(--white);
   color: var(--black);
   line-height: 24px;
   min-height: 36px;
   padding: 15px 20px;
   box-sizing: border-box;
   border-radius: 8px;
}

select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
   color: var(--black) !important;
   font-weight: 400;
}

select::-ms-input-placeholder,
textarea::-ms-input-placeholder,
input:-ms-input-placeholder {
   color: var(--black) !important;
   font-weight: 400;
}

select::placeholder,
textarea::placeholder,
input::placeholder {
   color: var(--black) !important;
   font-weight: 400;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"] {
   border: 1px solid var(--titcolor);
   background-color: var(--white);
   color: var(--black);
   line-height: 20px;
   height: 40px;
   padding: 10px 20px;
   box-sizing: border-box;
   border-radius: 8px;
}

textarea,
input {
   max-width: 100%;
}

textarea:hover,
input:hover {
   border: 1px solid var(--blue);
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
   border: none;
   color: var(--black);
   height: 40px;
   padding: 0px 20px;
   border-radius: 8px;
   cursor: pointer;
   box-sizing: border-box;
   background-color: var(--titcolor);
   transition: all 0.5s;
   font-weight: 500;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
   background-color: var(--green);
   color: var(--white);
}

textarea:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus {
   color: var(--black);
   border: 1px solid var(--green) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   /* display: none; <- Crashes Chrome on hover */
   -webkit-appearance: none;
   margin: 0;
   /* <-- Apparently some margin are still there even though it's hidden */
}

select {
   color: var(--black);
   border: none;
   background-color: var(--white);
   cursor: pointer;
   line-height: 20px;
   height: 40px;
   padding: 0px 44px 0px 20px;
   background-size: auto 16px;
   background-image: url(/img/webp/select.webp);
   background-repeat: no-repeat;
   background-position: right 20px center;
   font-family: var(--ff);
   -ms-appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border-radius: 8px;
   white-space: nowrap;
   text-overflow: ellipsis;
   transition: all 0.5s;
   position: relative;
}

select::-ms-expand {
   display: none;
}

select:hover {
   outline: none;
   background-color: var(--yell);
}

select:focus {
   outline: none;
   background-color: var(--yell);
}

/* Скрыть стрелки в Firefox */
input[type="number"] {
  -moz-appearance: textfield; /* Скрыть стрелки в Firefox */
}

/* Скрыть стрелки в Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Центральный блок */

#body-cont {
   display: block;
   max-width: 1200px;
   margin: 0px auto;
   min-height: calc(100vh - 605px);
}

@media only screen and (max-width: 1279px) {
   #body-cont {
      margin: 0px 40px;
   }
}

@media only screen and (max-width: 1023px) {
   #body-cont {
      margin: 0px 20px;
   }
}

.bct-top {
   margin: 60px 0px 30px 0px;
}

.slidbl {
   margin: 0px -10px;
   width: calc(100% + 20px);
}

.bct-top h2 {
   margin-bottom: 20px;
   font-size: 26px;
   line-height: 34px;
}

.bct-top .slick-next {
   top: -57px;
   right: 10px;
}

.bct-top .slick-prev {
   left: initial;
   top: -57px;
   right: 70px;
}

.bct-top .product-card {
   padding: 15px 5px;
}

@media only screen and (max-width: 699px) {

   .bct-top .slick-prev {
      right: 60px;
   }

}

.u-star-rating-18 {
   list-style: none;
   margin: 0px;
   padding: 0px;
   width: 90px;
   height: 18px;
   position: relative;
   background: url('/.s/t/2301/rating_18.png') top left repeat-x
}

.u-star-rating-18 li {
   padding: 0px;
   margin: 0px;
   float: left
}

.u-star-rating-18 li a {
   display: block;
   width: 18px;
   height: 18px;
   line-height: 18px;
   text-decoration: none;
   text-indent: -9000px;
   z-index: 20;
   position: absolute;
   padding: 0px;
   overflow: hidden
}

.u-star-rating-18 li a:hover {
   background: url('/.s/t/2301/rating_18.png') left center;
   z-index: 2;
   left: 0px;
   border: none
}

.u-star-rating-18 a.u-one-star {
   left: 0px
}

.u-star-rating-18 a.u-one-star:hover {
   width: 18px
}

.u-star-rating-18 a.u-two-stars {
   left: 18px
}

.u-star-rating-18 a.u-two-stars:hover {
   width: 36px
}

.u-star-rating-18 a.u-three-stars {
   left: 36px
}

.u-star-rating-18 a.u-three-stars:hover {
   width: 54px
}

.u-star-rating-18 a.u-four-stars {
   left: 54px
}

.u-star-rating-18 a.u-four-stars:hover {
   width: 72px
}

.u-star-rating-18 a.u-five-stars {
   left: 72px
}

.u-star-rating-18 a.u-five-stars:hover {
   width: 90px
}

.u-star-rating-18 li.u-current-rating {
   top: 0 !important;
   left: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   outline: none;
   background: url('/.s/t/2301/rating_18.png') left bottom;
   position: absolute;
   height: 18px !important;
   line-height: 18px !important;
   display: block;
   text-indent: -9000px;
   z-index: 1
}

/* Футер */

footer {
   display: block;
   margin: 60px auto 0px auto;
   max-width: 1200px;
   padding: 0px 20px;
}

footer a {
   color: var(--white);
}

.fbottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
}

.poloman {
   background-color: var(--foncolor);
   display: block;
   padding: 20px 30px;
   border-radius: 16px 16px 0px 0px;
   border: 2px solid var(--foncolor);
   border-bottom: none;
   text-align: center;
}

.poloman a {
   color: var(--white);
}

.poloman a:last-child {
   font-weight: 700;
   text-transform: uppercase;
   color: var(--titcolor);
}

@media only screen and (max-width: 699px) {
   .fbottom {
      justify-content: center;
   }
}

/* Фіксоване меню */

#fixedmenu {
   display: block;
   position: fixed;
   z-index: 999;
   background-color: var(--black);
   width: 100%;
   padding: 20px 0px;
}

#fixedmenu .fm-cont {
   max-width: 1200px;
   padding: 0px 40px;
   margin: 0px auto;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
}

@media only screen and (max-width: 699px) {
   #fixedmenu .fm-cont {
      padding: 0px 20px;
   }
}

.fminfo {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   color: var(--white);
   gap: 40px;
}

.fmi-pun {
   display: block;
   line-height: 20px;
   padding: 5px 0px;
}

.adresa,
.kyivstar,
.lifecell {
   background-image: url(/img/svg/lifecell.svg);
   background-repeat: no-repeat;
   background-size: 30px auto;
   background-position: left center;
   padding-left: 40px;
}

.kyivstar {
   background-image: url(/img/svg/kyivstar.svg);
   background-position: left 8px;

}

.adresa {
   background-image: url(/img/webp/odesa.webp);
}

.fmi-pun a {
   font-weight: 700;
   font-size: 16px;
}

.fmi-pun span {
   display: block;
   color: #b8b8b8;
}

.fm-nav {
   display: none;
}

.navigation {
   display: block;
   height: calc(100% - 80px);
   width: 100%;
   position: fixed;
   top: 80px;
   left: -100%;
   background-color: #121010;
   transition: all 0.5s;
   z-index: 999;
}

.navigation.open {
   left: 0px;
}

.nav-cont {
   display: block;
   padding: 20px;
   max-height: calc(100% - 40px);
   overflow-y: scroll;
}

.navigation .fminfo {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 20px;
   align-items: center;
   justify-content: space-around;
}

.nav-cat {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   gap: 30px 40px;
}

.nav-cat > div {
   display: block;
   width: calc(25% - 30px);
   text-align: center;
}

.nav-cat .punkt img {
   width: 120px;
}

.nav-cat .punkt span {
   display: block;
   background-color: var(--black);
   color: var(--white);
   width: 120px;
   text-align: center;
   line-height: 36px;
   border-radius: 8px;
   margin: 0px auto;
}

#toggleButton {
   border-radius: 4px;
   background-color: var(--titcolor);
   color: var(--black);
   position: relative;
   padding-left: 44px;
   font-weight: 500;
}

#toggleButton.active {
   background-color: var(--green);
   color: var(--white);
}

#toggleButton span {
   display: block;
   position: absolute;
   top: calc(50% - 1px);
   width: 14px;
   left: 20px;
   height: 2px;
   border-radius: 4px;
   transition: all 0.5s;
}

#toggleButton span::before,
#toggleButton span::after {
   position: absolute;
   display: block;
   left: 0;
   width: 80%;
   height: 2px;
   content: "";
   border-radius: 4px;
}

#toggleButton span,
#toggleButton span::before,
#toggleButton span::after {
   background-color: var(--black);
}

#toggleButton span::before {
   top: -6px;
}

#toggleButton span::after {
   bottom: -6px;
}

#toggleButton span {
   transition: background 0s 0.0s;
}

#toggleButton span::before,
#toggleButton span::after {
   transition-duration: 0.3s, 0.3s;
   transition-delay: 0.3s, 0s;
}

#toggleButton span::before {
   transition-property: top, transform;
}

#toggleButton span::after {
   transition-property: bottom, transform;
}

#toggleButton.active span {
   background: none;
}

#toggleButton.active span::before {
   top: 0;
   transform: rotate(45deg);
   width: 100%;
}

#toggleButton.active span::after {
   bottom: 0;
   transform: rotate(-45deg);
   width: 100%;
}

#toggleButton.active span::before,
#toggleButton.active span::after {
   transition-delay: 0s, 0.3s;
      background-color: var(--white);
}

@media only screen and (max-width: 1179px) {
   .fminfo {
      gap: 20px;
   }

   .fmi-pun span {
      font-size: 12px;
   }

   .adresa,
   .kyivstar,
   .lifecell {
      background-size: 20px auto;
      padding-left: 30px;
   }

   .kyivstar {
      background-position: left 13px;
   }

}

@media only screen and (max-width: 1023px) {
   .fminfo {
      display: none;
   }

   .fm-nav {
      display: block;
   }

   #fixedmenu .fm-cont {
      padding: 0px 20px;
   }

   .fmright .telegram,
   .fmright .instagram {
      display: none;
   }
}

@media only screen and (max-width: 699px) {
   .navigation .fminfo > div {
      display: block;
      width: 100%;
   }

   .nav-cat > div {
      width: auto;
   }
}

.fmright {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
}

.telegram,
.instagram {
   width: 40px;
   background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
   background-size: 200% 200%;
   animation: insta 5s ease infinite;
   padding: 0px;
   border-radius: 4px;
}

.telegram {
   background: linear-gradient(45deg, #37aee2, #1e96c8, #0088cc, #00a5e8, #00c7f4);
   animation: teleg 5s ease infinite;
}

@keyframes teleg {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

@keyframes insta {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

.dopbuttom {
    height: 40px;
       width: initial;
       max-width: 50px;
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    gap: 6px 0px;
    color: var(--white);
    text-align: center;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.pusto svg {
   color: var(--white);
   fill: var(--white);
}

.pusto:hover,
.pusto:hover svg {
   background-color: transparent;
   color: var(--titcolor);
}

.order1 {
      color: var(--titcolor);
}

#shop-basket .pusto svg {
   fill: var(--titcolor);
}

.dopbuttom svg {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0px;
    margin-bottom: 0px;
}

.dopbuttom span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
}

.social {
   display: flex !important;
   flex-wrap: nowrap;
   gap: 20px;
   justify-content: flex-start;
   align-items: center;
}

.social button {
   display: flex;
   width: auto;
   gap: 10px;
   padding: 0px 15px;
   align-items: center;
   color: #fff;
   border-radius: 6px;
   height: 44px;
}

.text-columns {
   display: block;
}

.text-columns h2 {
   line-height: 32px;
   margin-bottom: 0px;
}

.text-columns p {
   text-align: justify;
}

/* Видео в блоке текст */

.bl-text p {
   text-align: justify;
}

.bl-text video#video-text {
   width: 190px !important;
   margin-right: 20px;
   float: left;
   border-radius: 4px;
   overflow: hidden;
}

@media only screen and (max-width: 699px) {

   .bl-text video#video-text {
      width: 100% !important;
      margin-right: 0px;
      float: none;
   }

}

button.tgme_widget_login_button {
display: none !important;
}

.logreg,
.logpanel {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    width: 260px;
max-width: calc(100% - 64px);
    margin: 10px auto;
    background-color: var(--foncolor);
    border: 2px solid var(--foncolor);
    padding: 30px;
    border-radius: 16px;
align-items: center;
}

.logreg {
       width: 460px;
       gap: 20px 30px;
}

.logreg > div {display:block;width:100%;}
.logpanel > div {display:block;width:100%;}

.dop {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    justify-content: center;
    align-items: center;
    width: 260px;
margin:0px auto;
}

.logreg > div > div:first-child {margin-bottom:10px;}
.logpanel > div > div:first-child {margin-bottom:10px;}

.knop input[type="submit"] {
width:100%;
}

.rem {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
margin-bottom:20px !important;
}