﻿/* ==========================================================================
   Start of custom GoodPormo CSS
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

.button-cbox, .button-back, .goodpromo-branding, .cbox-messengers, .story-ecommerce-quantity-button, .story-ecommerce-checkout-cart-item-quantity-button, .story-checkout-cbox, .story-tab-item, .ecommerce-1product-quantity-button {
/* Щоб не виділявся текст при кліку https://css-tricks.com/almanac/properties/u/user-select/ */
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */     
}

textarea {
  resize: none;
}

ul, ol {
    padding-left: 25px;
    margin-bottom: 0px;
}

@media screen and (max-width:479px) {
ul, ol {
    padding-left: 20px;
} 
}

/*
div[class*='inside-form-block q-num-'] {display: none;}
div[class*='dialogue-right-img-fill q-num-'] {display: none;}
div[class*='dialogue-right-img-bg q-num-'] {display: none;}
*/





@media screen and (min-width:480px){
.dialogue.is--h100vh > .container-dialogue {min-height: calc(100vh - 70px);}
.dialogue.is--h100vh > .container-dialogue > .grid-dialogue {min-height: calc(100vh - 70px);}

    @supports (height: 100dvh) {
      .dialogue.is--h100vh > .container-dialogue, .dialogue.is--h100vh > .container-dialogue > .grid-dialogue {
        min-height: calc(100dvh - 70px);
      }
    }

.iti__selected-dial-code {font-size: 20px;}
   
}


@media screen and (max-width:479px){
.dialogue.is--h100vh > .container-dialogue {min-height: calc(100vh - 20px);}

    @supports (height: 100dvh) {
      .dialogue.is--h100vh > .container-dialogue {min-height: calc(100dvh - 20px);}
    }

.iti__selected-dial-code {font-size: 16px;}
}

@media screen and (max-width:991px){
.story-2col-grid img {order: 3;}
.story-2col-grid img.is--top-mob {order: -1;}

.dialogue-right-img-bg.is--visible, .dialogue-right-img-fill.is--visible {
    display: none;
}

.range-slider-block {
    margin-top: 40px !important;
}

}





.is--max-w600, .is--max-w1020 {
    justify-self: center;
}

.image-square-grid {aspect-ratio: 1 / 1; background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8YwwAAdEBAUAAxpEAAAAASUVORK5CYII=) repeat;}
.image-vertical-grid {aspect-ratio: 3 / 4; background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8YwwAAdEBAUAAxpEAAAAASUVORK5CYII=) repeat;}
.image-horizontal-grid {aspect-ratio: 4 / 3; background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8YwwAAdEBAUAAxpEAAAAASUVORK5CYII=) repeat;}

.dialogue-image-hidden-top-bg {
    aspect-ratio: 5 / 3;
    background:
    url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8YwwAAdEBAUAAxpEAAAAASUVORK5CYII=) repeat;
}

.story-3col-item-img.is--big {
    aspect-ratio: 1 / 1; background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8YwwAAdEBAUAAxpEAAAAASUVORK5CYII=) repeat;
}
.story-3col-item-img.is--big.is--horizont {
    aspect-ratio: 3/2;
}
.story-3col-item-img.is--big.is--vertical {
    aspect-ratio: 2/3;
}

.youtube-block iframe {border-radius: 20px; overflow: hidden;}

.story-2col-text-block {align-self: center;}

li + br {
    display: none;
}

.mark-highlight, span[style*="background-color"] {padding: 2px 5px; border-radius: 5px; -webkit-box-decoration-break: clone;}

.dialogue-right-img-bg.g-hidden.is--visible, .dialogue-right-img-fill.g-hidden.is--visible {
    display: none;
}
.first-screen.is--hide.is--showinpreview {
    display: block;
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
    margin-bottom: 10px;
}
.avatar-logo-block .logo-block.is--without-ava {flex-direction: row-reverse;}
.goodpromo-s {display:none;}




.img-preloader, .img-preloader-mob {
    position: absolute;
    height: 0;
    width: 0;
    display:none;
}

.is--one-col .dialogue-right-img-bg.is--visible, .is--one-col .dialogue-right-img-fill.is--visible {
    display: none;
}

.dialogue.is--chat-bot {
    padding: 0;
}
.dialogue.is--chat-bot .container-dialogue {
    border-radius: 0;
}

.goodpromo-button.is--right.is--hide {
    display: none;
}
.dialogue.is--chat-bot .grid-dialogue {
    overflow: inherit;
    display: block;
}
.header-chat-bot.is--display-none {
    display: none;
}

.one-px-sizing {
    overflow: visible;
    height: 1px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
    display: none;
}


@media screen and (max-width:479px){
    
/* Цей додав, щоб якщо немає ні прогрес бару ні блоку з авою – щоб був справа коректно */    
.dialogue.is--chat-bot .close-chatbot {
    top: 10px;
    right: -15px;
}

.close-chatbot.with-progress-bar {
    top:11px;
}

}

/* додатковий відступ знизу, якщо є кнопка назад або брендінг. По ідеї вже не для чат-бота, а для всіх інших варіантів. Не видаляти «is--margin-for-chatbot» – це стара назва, хто не переопублікував діалог, там залишилась стара */

.dialogue-left.is--margin-b, .dialogue-left.is--margin-for-chatbot {
margin-bottom: 70px;
}



/*  ======  Chat-bot  ======  */

.dialogue.is--chat-bot .footer-back-and-branding {
background-color: hsla(0, 0%, 100%, 0.85);
    border-top: 1px solid #f0f0f0;
        width: 100%;
    height: 35px;
    position: fixed;
    bottom: 0px;
    z-index: 1;
    text-align: center;
    
}
.dialogue.is--chat-bot .button-back {
    border-radius: 10px;
        width: 45px;
    height: 25px;
    margin-bottom: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    inset: auto auto 5px 20px;
    z-index: 2;
}
.dialogue.is--chat-bot .goodpromo-branding {
        background-color: transparent;
    box-shadow: none;
    position: static;
    display: inline-flex;
}
.dialogue.is--chat-bot .button-cbox:hover {
    box-shadow: none;
}

.dialogue.is--chat-bot .gp-header-all {
    position: sticky;
    top: 0;
    padding-top: 20px;
    padding-bottom: 7px;
    background-color: white;
    box-shadow: 0px 0px 4px 5px white;
    z-index: 99999;
}

.dialogue.is--chat-bot .close-chatbot.with-progress-bar {
    top: 10px;
    right: -15px;
}

.dialogue.is--chat-bot .logo-block {
    display: none;
}


.dialogue.is--chat-bot .avatar-logo-block {
    margin-bottom: 0;
}

.dialogue.is--chat-bot .buttons-content-block {
    bottom: 45px;
    z-index: 99999;
}

.dialogue.is--chat-bot .button-next-gray, .dialogue.is--chat-bot .button-next {
box-shadow: 0px 0px 6px 3px #0000002e;
margin-top: 20px;
}

.dialogue.is--chat-bot .dialogue-question {
    margin-top: 5px;
}

.dialogue.is--chat-bot {
    margin-bottom: 0;
    padding-bottom: 0;
}

.dialogue.is--chat-bot .dialogue-left {
    margin-bottom: 60px;
    margin-top: 0;
}

        
/* ==========================================================================
   Blog
   ========================================================================== */

.blog-body .blog-menu-right-mob-icon {
-webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  }

.blog-article-content p, .blog-article-content ul, .blog-article-content ol {
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 1.4em;
    font-weight: 300;
}
.blog-content-block li {
    margin-bottom: 5px;
    margin-top: 5px;
}
.blog-article-content .youtube-block-main p, .blog-article-content .story-image-block p {
    margin-bottom: 0;
}

.blog-article-content a {
    color: #1b66f3;
    font-weight: 500;
    text-decoration: underline;
}
.blog-article-content a:hover {
    text-decoration: none;
}
.blog-article-content h2 {
    margin-top: 30px;
    margin-bottom: 20px;
    color: #000;
    font-size: 40px;
    line-height: 1.3em;
}
.blog-article-content h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    color: #000;
    font-size: 30px;
    line-height: 1.3em;
}
.blog-article-content .youtube-block-main, .blog-article-content .story-image-block {
    padding-bottom: 0;
    margin-bottom: 30px;
}

.blog-article-content p img {
    display: block;
    overflow: hidden;
    max-width: 700px;
    margin-bottom: 20px;
    border-radius: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}
.blog-body header {
    min-height: 70px;
}

a.first-screen-button > span, a.story-button > span {    
    text-transform: none;
    font-size: 18px;
    font-weight: normal;
    display: block;
}

@media screen and (max-width: 991px) {
.blog-article-content img {
    max-width: 100%;
}
.first-screen-right.is--with-slider.is--on-top {
    border-radius: 0;
}
}


@media screen and (max-width: 767px) {
.blog-article-content p {
    font-size: 16px;
}    
.blog-article-content img {
    margin-bottom: 15px;
}
a.first-screen-button span, a.story-button span {    
    font-size: 16px;
}

.first-screen-right.is--on-top .first-screen-main-image,
.first-screen-right.is--on-top .story-slider-n {
    margin-bottom: 10px;
}
}


@media screen and (max-width: 479px){
.blog-article-content h2 {
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 20px;
}  
.blog-article-content h3 {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 18px;
}  
.blog-article-content p {
    margin-bottom: 25px;
    font-size: 14px;
}
.blog-body header {
    min-height: 60px;
}
a.first-screen-button span, a.story-button span {
    font-size: 12px;
}
}


.video-yt {padding-bottom:56.25%;position:relative} /*--- bottom (or top) padding sets aspect ratio ---*/

/*--- placeholder link & <iframe> (when loaded) ---*/
    .video-yt a, .video-yt iframe {display:block;width:100%;height:100%;position:absolute}
    .video-yt iframe {border:0}

/*--- optional custom play button ---*/
    .video-yt a::before {
    box-sizing: border-box;
    display: block;
    height: 60px;
    width: 60px;
    background-color: rgba(0,0,0,0.6);
    border: 0.05em solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.6);
    position: absolute;
    top: 50%;
    left: 50%; 
    z-index: 1;
    font-size: 3em;
    margin: -0.5em 0 0 -0.5em;
    transition: background-color .2s;
    content: "";
}
.video-yt a:hover::before, .video-yt a:focus::before {
    background-color: red;
}
.video-yt a::after {
    display: block;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-width: 0.2em 0 0.2em 0.3em;
    border-left-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    font-size: 4em;
        margin-left: 3px;
    margin-top: -2px;
    content: "";
}

/*--- placeholder/preview image ---*/
        .video-yt img {object-fit:cover;height:100%;width:100%;max-width: none;}
        


.story-3col-item-button, .story-2col-p-button, .pop-up-button-close {cursor: pointer;     
-webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;}
    
.html-no-scroll {
    overflow: hidden;
}

.popup-p ol, .popup-p ul, .popup-2col-left ul, .popup-2col-left ol {
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.popup-p ol ol, .popup-p ul ol, .popup-p ol ul, .popup-p ul ul, .popup-2col-left ol ol, .popup-2col-left ul ol, .popup-2col-left ol ul, .popup-2col-left ul ul {
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.popup-p ol ol, .popup-2col-left ol {
    padding-left: 30px;
}
.popup-p ol ol li, .popup-2col-left ol ol li {
    list-style-type: disc;
}

.popup-p ::marker, .popup-2col-left ::marker {
    font-weight: bold;
}
.first-screen.is--with-videobg {
    background: none;
}



/*
input.is--mask-complete, input.is--mask-complete:hover {
    border-color: green;
    background-color: #00800024 !important;
}
*/

.blog-help-breadcrumbs-p svg {
    width: 20px;
    vertical-align: bottom;
    opacity: 0.5;
}
.blog-help-breadcrumbs-p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.story-slider-new-slide {display:none;}
.story-slider-new-slide.is--active {display: inline-block;}

.story-slider-new-grid.one-col .story-slider-new-img-fill-hidden.one-col.is--fix-h {
    aspect-ratio: 16/9;
    object-fit: cover;
}
.story-2col-img-fill-block {
    align-self: center;
}
.story-slider-new-text-block {
    align-self: center;
}
.inside-form-block.t-result .icon-social:first-child {
    margin-left: 0;
}
.container-dialogue .youtube-block {
    box-shadow: none;
}
.youtube-block.dialogue-image-hidden-top-bg {
    aspect-ratio: unset;
    max-height: unset;
}
.story-2col-p ul, .story-2col-p ol {
    padding-left: 25px;
}


.first-screen-logo.is--in-right {
    display: none;
}

@media screen and (max-width: 991px) {
    
.first-screen-logo.is--in-right {
    display: block;
    margin-bottom: 30px;
}
.first-screen-logo.is--logo-hide {
    display: none;
}
.first-screen-main-image.is--square {
    aspect-ratio: 1 / 1 !important;
    min-height: 0;
    width: 100%;
    max-width: 100%;
}
.first-screen-main-image.is--horizontal {
    aspect-ratio: 2 / 1 !important;
    min-height: 0;
    width: 100%;
    max-width: 100%;
}

.first-screen.is--only-this-block-visible-100vh.is--with-videobg .background-video {
    min-height: 100vh;
    height: auto !important;
}

}

/*
.storytelling-block .w-container > .fadein:last-child {
  opacity: 1 !important;
  transform: none !important;
}
*/


.first-screen.is--only-this-block-visible-100vh.is--with-videobg .background-video {
    height: 100%; /* Було 100vh;, я побачив що обрізає якщо контенту більше ніш на висоту екрана і поставив 100% */
    min-height: 100vh;
    display: flex;
}


/*--- Це щоб лого в першому екрані не створював блимання при завантаженні сторінки ---*/

.first-screen-logo.is--horizontal-logo {max-width: 220px;}
.first-screen-logo.is--square-logo, .first-screen-logo.is--vertical-logo {height: 80px;}

.first-screen-logo.is--big.is--horizontal-logo {width: 220px;}
.first-screen-logo.is--big.is--square-logo, .first-screen-logo.is--big.is--vertical-logo {height: 120px;}

@media screen and (max-width:479px){
.first-screen-logo.is--horizontal-logo {max-width: 200px;}
.first-screen-logo.is--square-logo, .first-screen-logo.is--vertical-logo {height: 60px;}

.first-screen-logo.is--big.is--horizontal-logo {width: 200px;}
.first-screen-logo.is--big.is--square-logo, .first-screen-logo.is--big.is--vertical-logo {height: 100px;}

.story-3col-item-button.is--in-feature {
    width: 100%;
}
}


.first-screen-logo {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    object-position: left;
}

@keyframes fadeInAnimation { 
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    100% { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.youtube-block.is--mini-video {
    max-width: 760px !important;
}

.popup-block .popup-h {
    font-weight: bold;
}
.popup-block .popup-p {
    margin-bottom: 30px;
}
.popup-block .youtube-block {
    box-shadow: none !important;
}

@media screen and (min-width:480px){
    .story-feature-img-block.is--1col-r-b, .story-feature-img-block.is--1col-b, .story-feature-img-block.is--1col-b-l {align-self: end;} 
}

.story-feature-img-block.is--1col-b-l, .story-feature-img-block.is--1col-l {order: -9999;}

.story-feature-img.is--compact.is--5 {aspect-ratio: 2/1; object-fit: cover; object-position: top; width: 100%;}
.story-feature-img.is--compact.is--4 {aspect-ratio: 16/9; object-fit: cover; object-position: top; width: 100%;}
.story-feature-img.is--compact.is--3 {aspect-ratio: 16/10; object-fit: cover; object-position: top; width: 100%;}
.story-feature-img.is--compact.is--2 {aspect-ratio: 7/5; object-fit: cover; object-position: top; width: 100%;}
.story-feature-img.is--compact.is--1 {aspect-ratio: 4/3; object-fit: cover; object-position: top; width: 100%;}
.story-feature-img.is--compact.is--square {aspect-ratio: 1/1; object-fit: cover; object-position: center; width: 100%;}




.story-feature-img.is--transparent {
-webkit-mask-image: linear-gradient(black 50%, transparent);
  mask-image: linear-gradient(black 50%, transparent);
}

.story-feature, .story-3col-item-block.is--with-border, .story-numbers-item, .story-faq-item, .story-module {
background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8YwwAAdEBAUAAxpEAAAAASUVORK5CYII=) repeat !important;
}
.story-numbers-item.is--border {background: none !important; background-color: transparent !important;}

.story-feature.is--square {
    text-align: center;
}
.story-feature-img.is--compact.is--square {
    max-width: 70%;
}

.story-feature.is--1col .story-feature-img.is--compact.is--square {max-width: 45%;}

.story-feature-img {

}

.dialogue.is--chat-bot .inside-form-block {
    animation: opac 0.8s;
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.dialogue.is--pop-up {
    padding: 0px;
}

@media screen and (max-width: 991px) {
.dialogue.is--pop-up .close-chatbot {
    position: fixed;
}
}

@media screen and (min-width: 992px) {
.dialogue.is--pop-up .close-chatbot {
    right: 15px;
    top: 15px;
    border: 1px solid gray;
    border-radius: 12px;
    padding: 8px;
    position: fixed;
}
}

.dialogue.is--pop-up .container-dialogue {
    border-radius: 0;
    min-height: 100vh !important;
}


@media screen and (min-width:480px) and (max-width:991px) {
.dialogue.is--pop-up a.button-back {
    left: 40px;
}

.dialogue.is--pop-up a.goodpromo-branding {
    right: 40px;
}
}

.dialogue.is--block {
    padding: 14px;
}
.dialogue.is--block .container-dialogue, .dialogue.is--block .grid-dialogue {
    border-radius: 6px;
}


@media screen and (min-width:480px){
    .dialogue.is--pop-up a.button-back, .dialogue.is--pop-up a.goodpromo-branding {
    bottom: 15px;
    }
}

@media screen and (min-width:992px){
.dialogue.is--pop-up a.goodpromo-branding {
    bottom: 15px;
    right: 15px;
    }
}

.dialogue.is--pop-up .grid-dialogue {
    min-height: 100vh !important;
    border-radius: 0;
}

.dialogue.is--pop-up .button-back {
    left: 15px;
}

.goodpromo-b.is--hide {
    display: none !important;
}

.dialogue .inside-form-block ul.iti__country-list {
    z-index: 9999999999999;
    min-width: 270px;
}


.dialogue-description .dialogue-description {
    padding-bottom: 0;
    margin-bottom: 0;
}


/* --- New --- */

.dialogue.is--block .button-back {
    bottom: 25px;
    left: 25px;
}

.dialogue.is--block .goodpromo-branding {
    bottom: 25px;
    right: 25px;
}

.dialogue .dialogue-left.is--margin-b {
    margin-bottom: 65px;
}

.dialogue.is--chat-bot p.dialogue-description {
    padding-bottom: 10px;
}

@media (min-width: 992px) and (max-width: 1300px) {
.dialogue-left {
    padding-left: 40px;
    padding-right: 40px;
}
}

.story-3col-item-img.is--big.is--5 {aspect-ratio: 2/1;}
.story-3col-item-img.is--big.is--4 {aspect-ratio: 5/3;}
.story-3col-item-img.is--big.is--3 {aspect-ratio: 3/2;}
.story-3col-item-img.is--big.is--2 {aspect-ratio: 4/3;}
.story-3col-item-img.is--big.is--1 {aspect-ratio: 16/14;}


/**
  * @yaireo/ui-range - CSS-only custom, flexible, range input (повзунок)
  *
  * @version v2.1.15
  * @homepage https://github.com/yairEO/ui-range
  */

.range-slider{--primary-color: #0366D6;--value-offset-y: var(--ticks-gap);--value-active-color: white;--value-background: transparent;--value-background-hover: var(--primary-color);--value-font: 700 12px/1 Arial;--fill-color: var(--primary-color);--progress-background: #EEE;--progress-radius: 20px;--track-height: calc(var(--thumb-size)/2);--min-max-font: 12px Arial;--min-max-opacity: .5;--min-max-x-offset: 10%;--thumb-size: 22px;--thumb-color: white;--thumb-shadow: 0 0 3px rgba(0,0,0,.4),
                  0 0 1px rgba(0,0,0,.5) inset,
                  0 0 0 99px var(--thumb-color) inset;--thumb-shadow-active: 0 0 0 calc(var(--thumb-size)/4) inset var(--thumb-color),
                         0 0 0 99px var(--primary-color) inset,
                         0 0 3px rgba(0,0,0,.4);--thumb-shadow-hover: var(--thumb-shadow);--ticks-thickness: 1px;--ticks-height: 5px;--ticks-gap: var(--ticks-height, 0);--ticks-color: silver;--step: 1;--ticks-count: (var(--max) - var(--min)) / var(--step);--maxTicksAllowed: 30;--too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));--x-step: Max( var(--step), var(--too-many-ticks) * (var(--max) - var(--min)) );--tickIntervalPerc_1: Calc( (var(--max) - var(--min)) / var(--x-step) );--tickIntervalPerc: calc(  (100% - var(--thumb-size))/var(--tickIntervalPerc_1) * var(--tickEvery, 1)  );--value-a: Clamp(var(--min), var(--value, 0), var(--max));--value-b: var(--value, 0);--text-value-a: var(--text-value, "");--completed-a: calc((var(--value-a) - var(--min) ) / (var(--max) - var(--min)) * 100);--completed-b: calc((var(--value-b) - var(--min) ) / (var(--max) - var(--min)) * 100);--ca: Min(var(--completed-a), var(--completed-b));--cb: Max(var(--completed-a), var(--completed-b));--thumbs-too-close: Clamp(
    -1,
    1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001),
    1
  );--thumb-close-to-min: Min(1, Max(var(--ca) - 5, 0));--thumb-close-to-max: Min(1, Max(95 - var(--cb), 0));box-sizing:content-box;display:inline-block;height:Max(var(--track-height), var(--thumb-size));background:linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/2 - var(--ticks-thickness)/2);background-position-y:var(--flip-y, bottom);padding-bottom:var(--flip-y, var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider[data-ticks-position='top']{--flip-y: 1}.range-slider::before,.range-slider::after{--offset: calc(var(--thumb-size)/2);content:counter(x);display:var(--show-min-max, block);font:var(--min-max-font);position:absolute;bottom:var(--flip-y, -2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:Clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc( var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));pointer-events:none}.range-slider::before{--before: 1;--at-edge: var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge: var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:'';width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end: calc(var(--thumb-size)/2);--clip-end: calc(100% - (var(--cb) ) * 1%);--clip-start: calc(var(--ca) * 1%);--clip: inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/2 - var(--track-height)/2);height:calc(var(--track-height));background:var(--progress-background, #EEE);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{content:'';position:absolute;left:0;right:0;clip-path:var(--clip);top:0;bottom:0;background:var(--fill-color, black);box-shadow:var(--progress-flll-shadow);z-index:1;border-radius:inherit}.range-slider__progress::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:var(--progress-shadow);pointer-events:none;border-radius:inherit}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height), var(--thumb-size))/2 + calc(var(--ticks-gap)/2 * var(--flip-y, -1)));cursor:-webkit-grab;cursor:grab;outline:none;background:none}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{appearance:none;border:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius, 50%);background:var(--thumb-color);box-shadow:var(--thumb-shadow);pointer-events:auto;transition:.1s}.range-slider>input::-moz-range-thumb{appearance:none;border:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius, 50%);background:var(--thumb-color);box-shadow:var(--thumb-shadow);pointer-events:auto;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;border:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius, 50%);background:var(--thumb-color);box-shadow:var(--thumb-shadow);pointer-events:auto;transition:.1s}.range-slider>input:hover{--thumb-shadow: var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background: var(--value-background-hover);--y-offset: -5px;color:var(--value-active-color);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow: var(--thumb-shadow-active);cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:0s}.range-slider>input:nth-of-type(1){--is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999 ,1)}.range-slider>input:nth-of-type(1)+output{--value: var(--value-a);--x-offset: calc(var(--completed-a) * -1%)}.range-slider>input:nth-of-type(1)+output:not(:only-of-type){--flip: calc(var(--thumbs-too-close) * -1)}.range-slider>input:nth-of-type(1)+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999 ,1)}.range-slider>input:nth-of-type(2)+output{--value: var(--value-b)}.range-slider>input:only-of-type ~ .range-slider__progress{--clip-start: 0}.range-slider>input+output{--flip: -1;--x-offset: calc(var(--completed-b) * -1%);--pos: calc(((var(--value) - var(--min))/(var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));transition:all .12s ease-out, left 0s}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}
  
  
.range-slider-block {
    margin-top: 30px;
}

.range-slider  {
  width: 100%;
margin-bottom: 70px;
}

.range-slider-legend {
    text-align: center;
    margin-top: 27px;
    color: black;
    opacity: .5;
    margin-bottom: 0;
font-size: 14px;
-webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.range-slider>input+output.is--plus::after {
    content: var(--prefix, "") var(--text-value-a) "+" var(--suffix, "");
}
.range-slider output {
    white-space: nowrap;
}


.grid-answers {
    margin-bottom: 10px;
}

.popup-block a {
    text-decoration: underline !important;
}

.popup-block a:hover {
    text-decoration: none !important;
}

.first-screen-custom-code.is--hide {
    display: none;
}
.first-screen-main-image.is--illustration-round {
    border-radius: 20px !important;
    min-height: unset !important;
}

.write-me-messenger-block {
    margin-bottom: 10px;
}

.story-testimonial-photo {
    object-fit: cover;
}


.story-slider-n.is--16-9 .story-slider-n-item-img-bg {
    aspect-ratio: 16/9;
}
.story-slider-n.is--3-2 .story-slider-n-item-img-bg {
    aspect-ratio: 3/2;
}
.story-slider-n.is--2-3 .story-slider-n-item-img-bg {
    aspect-ratio: 2/3;
}
.story-slider-n.is--1-2 .story-slider-n-item-img-bg {
    aspect-ratio: 1/2;
}
.story-slider-n.is--1-1 .story-slider-n-item-img-bg {
    aspect-ratio: 1/1;
}

.story-slider-n.is--in-2col {
    width: 100%;
}

.story-slider-n.is--in-2col .story-slider-n-item-img-bg {
    aspect-ratio: unset;
    height: 100%;
    width: 100%;
}

.story-slider-n.is--in-2col .story-slider-n-item{
    height: 100%;
    width: 100% !important;
}

.story-slider-n.is--in-2col {
    margin-bottom: unset !important;
}

@media screen and (max-width:479px) {
.story-slider-n.is--in-2col .story-slider-n-item-img-bg {
    aspect-ratio: 1/1;
    min-height: unset !important;
}  
}

@media screen and (min-width: 480px) and (max-width: 991px) {
.story-slider-n.is--in-2col .story-slider-n-item-img-bg {
    min-height: 400px;
}    

.story-slider-n.is--in-2col .story-slider-n-img-description {
padding: 25px 35px 35px;
}  

}

.story-slider-n.is--in-2col .story-slider-n-img-description {
    font-size: 16px;
}

@media screen and (min-width:992px) {
.story-slider-n.is--in-2col .story-slider-n-img-description {
    padding: 15px 25px 30px;
}  
.story-slider-n-2col-text-block {
    align-self: center;
}
.story-slider-n-2col-fill-img {
    height: fit-content;
}


}


.story-slider-n.is--2img p.story-slider-n-img-description, .story-slider-n.is--3img p.story-slider-n-img-description, .story-slider-n.is--4img p.story-slider-n-img-description, .story-slider-n.is--5img p.story-slider-n-img-description {
    padding: 15px 15px 30px;
    font-size: 12px;
}


@media screen and (max-width: 991px) {
.story-slider-n-2col-item-img-bg.is--top {
    order: -1;
}
.story-slider-n-2col-item-img-bg {
    order: 1;
}


} 



.first-screen-right.is--with-slider {
    width: 100%;
    max-width: calc(100vw - 55px);
    margin-bottom: 0;
}

@media screen and (min-width:992px) {
.first-screen-right.is--with-slider .story-slider-n-item-img {
aspect-ratio: 1/1;
}
}


@media screen and (max-width:991px) {
.first-screen-right.is--with-slider .story-slider-n-item-img {
aspect-ratio: 16/9;
min-height: unset;
}
.first-screen-right.is--with-slider .story-slider-n.is--in-2col .story-slider-n-item {

}
}

.story-3col-grid.is--no-margin-b {
    margin-bottom: 30px;
}

@media screen and (max-width:479px) {
.first-screen-right.is--with-slider .story-slider-n-item-img {
min-height: unset;
aspect-ratio: 1/1;
}

.story-3col-grid.is--2col-mob, .story-ecommerce-3col.is--2col-mob {
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 10px;
}

.story-3col-grid.is--2col-mob .story-3col-item-heading,
.story-ecommerce-3col.is--2col-mob .story-ecommerce-3col-item-h {
    font-size: 14px;
}
.story-3col-grid.is--2col-mob .story-3col-item-p,
.story-ecommerce-3col.is--2col-mob .story-ecommerce-3col-item-p,
.story-ecommerce-3col.is--2col-mob .story-ecommerce-3col-item-price {
    font-size: 11px;
}

.story-3col-grid.is--2col-mob .story-3col-item-button,
.story-ecommerce-3col.is--2col-mob .story-ecommerce-3col-item-button {
        font-size: 10px;
        padding-left: 7px;
        padding-right: 7px;
}

.story-3col-grid.is--no-margin-b {
    margin-bottom: 10px;
}


}


.first-screen-bonus.is--with-bg {
 background-size: cover !important; background-position: center !important;
}

.inside-form-block.t-form.is--visible.is--after-result {display: none;}

.a-button-final.is--to-form {
    cursor: pointer;
}

.button-choice.is--correct .button-correct-answer {
    display: block;
}

.button-choice.is--correct, .button-choice.is--correct:hover {
    background-color: rgba(140, 216, 72, .1) !important;
    pointer-events: none;
}
.button-choice.is--incorrect, .button-choice.is--incorrect:hover {
    background-color: rgba(216, 72, 72, .1) !important;
    pointer-events: none;
}

.inside-form-block.is--testing-result {
    display: block;
}


.inside-form-block.is--testing-result ~ .inside-form-block.is--visible {
  display: none;
}

.first-screen-right.is--with-slider {
    overflow: hidden;
}

.is--with-slider .swiper-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
}

@media (max-width: 991px) {
  .is--with-slider.is--compact-mob .swiper-slide img {
    aspect-ratio: 2 / 1;
  }
  
  .header-submenu {
    box-shadow: none !important;
    text-align: center;
    display: none;
  }
  .header-menu-mob .header-submenu.is--visible {
    display: grid;
}
.header-menu-mob .header-submenu-item {
    padding-top: 4px;
    padding-bottom: 4px;
}
  .header-menu-item .header-menu-a-mob::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
}
.header-menu-item .header-menu-a-mob {
    flex-flow: nowrap;
    margin: 0 auto;
    place-content: center;
}
.header-submenu {
    font-size: 16px;
    line-height: 1.3em;
}
}

.first-screen-logo.is--round, .header-menu-logo-img.is--round, .footer-logo-img.is--round {
    border-radius: 10px;
}

.agree-cbox-block {cursor: pointer;}



@media (min-width: 992px) {
    
.header-menu-links-block.is--no-logo > .header-menu-a:first-child {
    padding-left: 0;
}

.header-menu-links-block.is--no-logo.no--no-button {
    justify-content: center;
}

.header-menu-item {
    padding-top: 10px;
    padding-bottom: 10px;
}
.header-submenu {
    display: none;
    position: absolute;
    border-radius: 5px;
    z-index: 1;
    margin-top: 10px;
}

.header-menu-item:hover .header-submenu {
    display: block;
}

.header-submenu-item {
    display: block;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
}

.header-submenu::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 30px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
}

.header-menu-item .header-menu-a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
}

.header-submenu-item:first-child:hover {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.header-submenu-item:last-child:hover {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}    
    
    
    
    

.is--padding-menu-no-img-fs {
    padding-top: 70px !important;
    padding-bottom: 70px;
}
.header-menu-r.is--s .header-menu-a, .header-menu-r.is--s .header-menu-button {
    font-size: 14px;
}
.header-menu-r.is--m .header-menu-a, .header-menu-r.is--m .header-menu-button {
    font-size: 15px;
}
.header-menu-r.is--l .header-menu-a, .header-menu-r.is--l .header-menu-button {
    font-size: 16px;
}


}


.header-menu-item .header-menu-a {
    white-space: nowrap;
}

.header-menu-a.is--current {
    color: #FFC108;
}



/* меню гамбургер */
.header-menu-mob-icon {
  display: inline-block;
  cursor: pointer;
}

.menu-bar1, .menu-bar2, .menu-bar3 {
  width: 35px;
  height: 3px;
  background-color: #eee;
  margin: 6px 0;
  transition: 0.4s;
  border-radius: 5px;
}

.is--change .menu-bar1 {
  transform: translate(0, 9px) rotate(-45deg);
}

.is--change .menu-bar2 {opacity: 0;}

.is--change .menu-bar3 {
  transform: translate(0, -9px) rotate(45deg);
}
.header-menu-r-mob-icon {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.header-menu-mob {
    max-height: calc(100vh - 75px);
    overflow-y: auto;
}

span.header-menu-a, span.header-menu-a:hover {
    text-decoration: none;
    font-weight: 900;
    cursor: default;
    white-space: nowrap;
}
span.header-menu-a.is--address, span.header-menu-a-mob.is--tel.is--address {
    font-weight: 300;
}

.header-menu-a-mob.is--tel, .header-menu-a-mob.is--tel:hover {
    text-decoration: none;
    font-weight: 900;
    white-space: nowrap;
}

.header-menu-button {
    text-wrap: nowrap;
}

.first-screen.is--center .first-screen-left .first-screen-logo, .first-screen.is--center .first-screen-left .first-screen-over-heading, .first-screen.is--center .first-screen-left .first-screen-heading, .first-screen.is--center .first-screen-left .first-screen-description, .first-screen.is--center .first-screen-left .first-screen-price-block, .first-screen.is--center .first-screen-left .first-screen-button, .first-screen.is--center .first-screen-left .first-screen-under-button, .first-screen.is--center .first-screen-left .first-screen-logo-text, .first-screen.is--center .first-screen-left .first-screen-messengers, .first-screen.is--center .first-screen-left .first-screen-buttons, .first-screen.is--center .first-screen-left .first-screen-timer, .first-screen.is--center .first-screen-left .fs-overheading-border-block, .first-screen.is--center .first-screen-left .fs-social-proof {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.first-screen.is--center .first-screen-left .fs-social-proof {
    flex-direction: column;
}

.first-screen.is--center .first-screen-left .fs-social-proof-stars {
    justify-content: center;
    margin-top: 10px;
}

.first-screen.is--center .first-screen-left .fs-overheading-border-block {
    justify-content: center;
}


.first-screen-right-video {
    align-self: center;
    box-shadow: 0 0 8px 1px #FFC108;
    border-radius: 20px;
    overflow: hidden;
}

@media (min-width: 992px) {
.grid-first-screen.is--with-video-r .first-screen-heading:not(.is--xxl) { font-size: 58px; }
.grid-first-screen.is--with-video-r .first-screen-heading.is--m { font-size: 42px; }
.grid-first-screen.is--with-video-r .first-screen-heading.is--l { font-size: 54px; }

.grid-first-screen.is--with-video-r .first-screen-description { font-size: 25px; }


.story-features-bottom.is--no-img .story-features-4col-item-p {
    font-size: 17px;
}

.is--2col .footer-links-bottom, .is--3col .footer-links-bottom, .is--4col .footer-links-bottom {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    align-items: end;
}

}

.story-iframe iframe {
    border: 0;
}
.story-iframe.is--round iframe {
    border-radius: 20px;
}


.is--hide-by-tab {
    display: none !important;
}
.is--hide-by-more {
    display: none !important;
}

.story-tabs-block.w-tabs {
    position: relative; /* Важливо для підтримки абсолютного позиціонування ::after */
    overflow: hidden; /* Запобігає виходу змісту за межі блоку */
}

.story-tabs-block.is--sticky { /* Якщо це налаштування якось буде сбивати попереднє – можна тоді додати усередені можливо */
    position: -webkit-sticky !important;
    position: sticky !important;
    transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.story-tabs-block.is--sticky.hide {
            top: -280px;
            opacity: 0;
        }

.story-tabs-block.w-tabs::after {
    content: '';
    position: absolute;
    right: 0px;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 100px;
    background: linear-gradient(to right, rgb(0 143 255 / 0%), rgb(22 22 22));
}

.story-tabs-block.w-tabs.is--was-scrolled::after {
    background: none !important;
    width: 0;
    height: 0;
}

.story-tabs .story-tab-item:first-child:not(.is--w-border) {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.story-tabs .story-tab-item:last-child:not(.is--w-border) {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}
.story-tabs .story-tab-item.is--w-border {
    background-color: transparent !important;
}

.story-tabs .story-tab-item.is--w-border:last-child {
    margin-right:0;
}
.story-tabs {
    scroll-behavior: smooth;
}

.footer-container.is--no-links .footer-logo-block, .footer-container.is--no-links .footer-logo {
    text-align: center;
    justify-content: center;
    align-items: center;
}

.footer-container.is--no-links .footer-logo-block {
    max-width: unset !important;
}
.is--2col .footer-link {
    margin-left: 0;
}

p.footer-link {
    margin-bottom: 0;
    text-decoration: none !important;
    font-weight: bold;
    cursor: default;
    text-transform: uppercase;
}

.header-menu-links-block.is--center {
    justify-content: center !important;
}

.play-fixed-b {
    cursor: pointer;
    color: #161616;
    display: flex;
    justify-content: center;
    align-items: center;
}
.play-fixed-b audio {
    display: none;
}
#audio-icon-play, #audio-icon-pause {display: none;}
#audio-icon-play.is--visible, #audio-icon-pause.is--visible {display: block;}
#audio-icon-play {margin-left: 6px;}
#audio-icon-pause {margin-left: 3px; margin-right: 3px;}

@media screen and (max-width:479px) {
#audio-icon-play, #audio-icon-pause {
    height: 22px !important;
    width: 22px !important;
}
}

.play-fixed-b.is--hide {
    display: none;
}

.story-3col-pricing-item-p br {
    content: "";
    height: 5px;
    display: block;
    line-height: 0;
}

@media screen and (max-width:479px) {
.story-3col-pricing-item-p br {
    height: 4px;
}
}


.story-testimonials-who-p a {
    text-decoration: underline;
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Цільовий стиль для останнього блоку в другому рядку */
    .story-testimonials > :nth-child(3) {
        grid-column: 1 / -1; /* займає всі доступні колонки в рядку */
    }
}


.fadein.fadein-invisible {
    transition: all 1s !important;
}

a.button-for-textarea.is--in-answer.is--hide, div.button-for-textarea.is--in-answer.is--gray.is--hide {
    display: none;
}

.story-3col-item-block.is--clickable, .story-ecommerce-3col-item-block.is--clickable {cursor:pointer;}

.story-3col-item-img.is--hide {
    display: none;
}

.inside-form-block.is--form-popup {
    display: block;
}

.popup-p.is--no-margin {
    margin-bottom: 10px !important;
}
.popup-p.is--form.is--visible {
    display: block;
    margin-bottom: 8px;
}
.pop-up-form .dialogue-leadform-block {
    font-weight: 400;
}

.thanks-screen-popup-form.is--hide {
    display: none;
}

.inside-form-block.is--form-popup.is--hide {
    display: none;
}

.thanks-screen-popup-form .a-button-final {
    text-decoration: none !important;
}

.popup-p.is--form.is--lead .inside-form-block.t-form.is--form-popup {
    display: none !important;
}

.popup-p.is--form.is--lead .thanks-screen-popup-form {
    display: block !important;
}


/* Це якщо активовано ЗШБ для основних */
@media screen and (min-width: 992px) {
    .container-1200.w-container.is--max-w .story-1col-text-block {
        max-width: 880px;
    }
    .container-1200.w-container.is--max-w .story-text-in-border-block {
        max-width: 890px;
    }
    .container-1200.w-container.is--max-w .story-quote {
        max-width: 1020px;
    }
}


/* Це якщо активовано ЗШБ для конкретних */
@media screen and (min-width: 992px) {
    .story-1col-text-block.is--max-w-item .story-1col-text-p, .story-text-in-border-block.is--max-w-item p.story-text-in-border-text {
        max-width: 100%;
    }
    
}

.story-feature video {
    box-shadow: none !important;
    display: block;
    border-radius: unset;
}

.first-screen-logos.is--round-logos .first-screen-logos-item {
    border-radius: 10px;
    overflow: hidden;
}

/* Ці по ідеї можна видалити 2 */
.first-screen.is--utm-show {
    display: flex !important;
}
.first-screen.is--utm-hide {
    display: none !important;
}

.story-2col-p-button.fadein {
    transition: unset !important;
}

.story-3col-item-block.is--with-border .story-3col-item-button {
    margin-bottom: 0;
}
.story-3col-item-button.is--accent {
    font-weight: 400;
}

.story-button-block.is--sticky-mob {
    position: sticky;
    bottom: 0;
    padding: 10px;
    background-color: black;
}

@media screen and (min-width: 992px) {
    .story-button-block.is--sticky-mob {
        display: none;
    }
}



.story-3col-pricing.is--2col .story-3col-pricing-item {
    background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8YwwAAdEBAUAAxpEAAAAASUVORK5CYII=) repeat !important;
}


.story-3col-pricing.is--2col .story-3col-pricing-item-h {
    margin-top: 0 !important;
    font-size: 27px !important;
}
.story-3col-pricing.is--2col .story-3col-pricing-item-price {
    font-size: 33px !important;
    font-weight: 900 !important;
}
.story-3col-pricing.is--2col .story-3col-pricing-item-button {
    display: block !important;
}

.story-button-block .story-button-more.w-button {
    background: none !important;
}


.video-widget {
    box-shadow: 0 0 12px rgba(0, 0, 0, .2);
    animation: fadeInFromBottom ease 3s; /* Поява знизу */
}

@keyframes fadeInFromBottom { 
    0% {
        opacity: 0;
        transform: scale(0) translateY(0);
    }
    50% {
        opacity: 0;
        transform: scale(0.9) translateY(40px);
    }
    100% { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.video-widget.is--fadeout {
    animation: fadeOutToBottom 0.5s ease-in forwards; /* Закриття вниз */
}

@keyframes fadeOutToBottom {
    0% {
        opacity: 1;
        transform: translateY(0); /* Початкове значення - на місці */
    }
    30% {
        opacity: 1;
        transform: translateY(-15px); /* Підняти на 15px */
    }
    70% {
        opacity: 0;
        transform: translateY(90px); /* Зникнення вниз */
    }
    100% {
        opacity: 0;
        transform: translateY(250px); /* Зникнення вниз */
    }
}



.video-widget, .video-widget-play, .video-widget-close {transition: all 0.3s ease;}
.video-widget.is--big:hover > .video-widget-play {transform: translate(-50%, -50%) scale(1.2);}
.video-widget.is--big .video-widget-close:hover ~ .video-widget-play {transform: translate(-50%, -50%) scale(1);}
.video-widget .video-widget-close {opacity:0;}
.video-widget:hover .video-widget-close, .video-widget.is--big .video-widget-close {opacity:0.6;}
.video-widget.is--big.is--pause > .video-widget-play {opacity:1;}
@media screen and (max-width: 991px) {
    .video-widget .video-widget-close {opacity:0.6;}
}


/* Додавання базових стилів для анімації */
.story-ecommerce-cart.is--animated, .story-ecommerce-cart:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease-in-out;
}

.story-ecommerce-cart {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.story-ecommerce-cart:hover {
    transform: scale(1.1);
    transition: transform 0.1s ease-in-out;
}

/* Базовий стан .story-ecommerce-message */
.story-ecommerce-message {
    transform: translateY(0);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    opacity: 1;
}

/* Анімація при появі */
.story-ecommerce-message.is--animated {
    transform: translateY(20px);
    opacity: 0;
}

#open-dialogue.dialogue.is--hide-strong {display:none !important;}

.story-ecommerce-checkout-cart-item-img-link {
    text-align: left;
}


/* Анімація для підйому */
@keyframes slideUpAndDisappear {
    0% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Клас для запуску анімації */
.story-ecommerce-cart.is--with-header {
    animation: slideUpAndDisappear 0.3s forwards;
}


/* Анімація для зникнення */
@keyframes slideDownAndDisappear {
    0% {
        transform: translateY(70px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Анімація при видаленні класу */
.story-ecommerce-cart.is--hiding {
    animation: slideDownAndDisappear 0.3s forwards;
}

.story-tabs.is--show-all .story-tab-item.is--hidden {
    display: none !important;
}

.story-ecommerce-similar .story-ecommerce-3col,
.story-ecommerce-similar .story-ecommerce-3col-item-block {
    margin-bottom: 0 !important;
}

.story-ecommerce-story > div {
    margin-bottom: 0 !important;
}

.story-ecommerce-3col-item-img, .story-ecommerce-main-img, .story-ecommerce-other-img {
    background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM8YwwAAdEBAUAAxpEAAAAASUVORK5CYII=) repeat;
}


.story-ecommerce-storytelling-h:first-of-type {
    margin-top: 0 !important;
}

.story-ecommerce-3col-item-block.is--out {
    filter: grayscale(1);
    opacity: .5;
    order: 99;
}
.story-ecommerce-3col-item-block.is--out.is--hide {
    display: none;
}

.story-3col-grid a.story-3col-item-block-a-js, .story-3col-grid a.story-3col-item-block-a-js *,
.story-3col-grid a.story-3col-item-button-a-js, .story-3col-grid a.story-3col-item-button-a-js *{
    text-decoration: none !important;
}

a.story-3col-item-block-a-js .story-3col-item-block.is--clickable:hover .story-3col-item-img.is--big {
    border: 2px solid var(--button-color) !important;
    padding: 4px;
    /* transform: scale(1.1); */
}
a.story-3col-item-block-a-js .story-3col-item-block.is--clickable:hover .story-3col-item-img.is--big.is--with-border {
    border: none !important;
    padding: 0;
    /* transform: none; */
}


.first-screen-button.is--second.w-button {
    background: none !important;
}


.is--b-animation {
    animation: 3s ease infinite bAnimation;
}

@keyframes bAnimation {
    0% {
        transform: translateX(3px) rotate(1deg);
    }

    2.5% {
        transform: translateX(-3px) rotate(-1deg);
    }

    5% {
        transform: translateX(3px) rotate(1deg);
    }

    7.5% {
        transform: translateX(-3px) rotate(-1deg);
    }

    10% {
        transform: translateX(2px) rotate(1deg);
    }

    12.5% {
        transform: translateX(-2px) rotate(-1deg);
    }

    15% {
        transform: translateX(2px) rotate(1deg);
    }

    17.5% {
        transform: translateX(-2px) rotate(-1deg);
    }

    20% {
        transform: translateX(1px) rotate(1deg);
    }

    22.5% {
        transform: translateX(-1px) rotate(-1deg);
    }

    25% {
        transform: translateX(0px) rotate(0deg);
    }
}



.story-checkout-block.is--payment .story-checkout-radio[d-payment="3"] .story-checkout-radio-text {
    background: url(other/files/plata_light_bg.png) no-repeat right 4px;
    padding-right: 68px;
    background-size: 24%;
}


.ecommerce-upsale-hide {display: none;}

.is--no-margin-b {
  margin-bottom: 15px;
}

.story-ecommerce-checkout.is--consultation .ecommerce-1product-block {
    display: none;
}
.story-ecommerce-checkout.is--consultation .story-ecommerce-checkout-info {
    display: none;
}
.story-ecommerce-checkout.is--consultation .story-ecommerce-checkout-grid {
    grid-template-columns: 1fr;
}
.story-ecommerce-checkout.is--consultation .story-checkout-block {
    margin: 20px auto 0;
    max-width: 590px;
}

.story-ecommerce-checkout.is--consultation .story-ecommerce-checkout-h2 {
    display: none;
}

.story-module.is--with-minimize.is--close .story-module-head {
    border-bottom: none;
    padding-bottom: 0;
}

.story-module.is--with-minimize.is--close .story-module-img-more {
    transform: rotate(90deg);
}

body.is--iframe .story-ecommerce-checkout {
    display: none !important;
}

.story-2col-grid.is--with-overheading .story-2col-text-block > *:last-child {
    margin-bottom: 0px !important;
}

.story-slider-n {
    max-width: 1020px !important;
}