/* variables */ :root { /* --- Common colors --- */ --white: #fff; --black: #000; --error: #cd2525; --error_light: #f018183d; --success: #4caf50; --gray: #666; --gray-light: #8a8a8a; --orange: #d9a01a; --orange-hover: #f0aa08; --orange_light: #fdf6e4; /* --- Common Opacity colors --- */ --white-opacity: #FFFFFF5E; --border-opacity: #ffffff80; --white-opacity-lighter: #FFF3; --border-opacity-lighter: #ffffff54; --gray-opacity-dark: #0f141930; --gray-opacity-white: #0f14190f; /* --- Gradients --- */ --btn-hover-bg-gradient-color-dark: radial-gradient(circle at center, var(--btn-bling-color-white-1) 0%, var(--btn-bling-color-white-2) 30%, transparent 70%); --btn-hover-bg-gradient-color-white: radial-gradient(circle at center, var(--btn-bling-color-dark-1) 0%, var(--btn-bling-color-dark-2) 30%, transparent 70%); --bg-color-white: radial-gradient(circle at center, var(--bg-color-white-1) 0%, var(--bg-color-white-2) 100%); --bg-color-dark: radial-gradient(circle at center, var(--bg-color-dark-1) 0%, var(--bg-color-dark-2) 100%); --item-bg-white: radial-gradient(circle at center, var(--item-bg-white-1) 0%, var(--item-bg-white-2) 100%); --item-bg-dark: radial-gradient(circle at center, var(--item-bg-dark-1) 0%, var(--item-bg-dark-2) 100%); --image-fg-white: radial-gradient(circle at center, var(--image-fg-white-1) 0%, var(--image-fg-white-2) 100%); --image-fg-dark: radial-gradient(circle at center, var(--image-fg-dark-1) 0%, var(--image-fg-dark-2) 100%); /* --- Socials & Messengers --- */ --viber: #675da9; --telegram: #0088cc; --whatsapp: #26d266; --facebook: #1877F2; --twitter: #0f1419; --youtube: #f03; --pinterest: #e60023; --instagram: #f7085c; /* Page margin */ --margin-lt-rt: 8px; --margin-lt-rt-minus: calc(-1 * var(--margin-lt-rt)); /* NO need to change */ --margin-lt-rt-twice: calc(var(--margin-lt-rt) * 2); /* NO need to change */ } /* --- Body - fonts, colors, background --- */ Body {font-family:var(--font-family), sans-serif; font-size:var(--text-common); line-height:1.2; font-weight:var(--text-common-weight); color:var(--text-white); display:flex; flex-direction:column; height:100%; width:100%; min-width:360px; scroll-behavior:smooth; text-rendering:optimizeSpeed;} Body.body_overflow {overflow:hidden;} .container {margin:0 auto; padding:0 var(--margin-lt-rt); width:100%; max-width:var(--content-width); position:relative; z-index:1;} /* --- Common other --- */ *, *::before, *::after {box-sizing:border-box;} Body, H1, H2, H3, H4, P, LI, Figure, Figcaption, Blockquote, DL, DD {margin:0;} Menu, UL, OL {list-style:none; margin:0; padding:0;} Img {display:block;} Input, Button, Textarea, Select {font:inherit;} Table {table-layout:fixed;} .hidden {display:none !important;} Button, A {touch-action:manipulation;} A {text-decoration:none; color:inherit; transition:.3s ease;} /* --- Common Properties --- */ .align_center {text-align:center; justify-content:center;} .align_left {text-align:left; justify-content:flex-start;} .align_right {text-align:right; justify-content:flex-end;} .upper {text-transform:uppercase;} .ui_row {display:flex;} .ui_row.margin {margin-bottom:16px;} .ui_row.between {justify-content:space-between;} /* --- Svg --- */ .svg_icon, .inner_light.dark Form .svg_icon {width:20px; height:20px; fill:var(--icon-white); flex-shrink:0;} .svg_icon.margin {margin-right:6px;} .svg_icon.big {width:24px; height:24px;} /* --- If Dark - Svg --- */ .dark .svg_icon {fill:var(--icon-dark);} /* --- Rows, Inputs, Texareas --- */ .form_row {display:flex; flex-direction:column; margin-bottom:16px; position:relative;} .form_row Label {font-size:var(--text-middle); color:var(--text-middle-white); font-weight:var(--text-middle-weight); margin-bottom:4px; transition:.3s;} .form_row .label_error, .dark .form_row .label_error, .inner_light .form_row .label_error, .dark.inner_light .hero_form .form_row Label.label_error {background:var(--error); color:var(--white); padding:2px 8px 22px 8px; margin:0 0 -20px auto; border-radius:var(--border-radius-btn) var(--border-radius-btn) 0 0; width:fit-content; text-align:right;} .input_box {position:relative; display:flex;} Input:not([type="checkbox"]):not([type="radio"]), Select, Textarea, .inner_light.dark Input:not([type="checkbox"]):not([type="radio"]), .inner_light.dark Select, .inner_light.dark Textarea {height:42px; width:100%; font-size:var(--text-middle); color:var(--text-white); border:2px solid var(--border-color-white); border-radius:var(--border-radius-btn); background:var(--input-white); padding:0 8px; outline:none; background-position:calc(100% + 32px) 50%; transition:.3s;} .has_icon Input:not([type="checkbox"]):not([type="radio"]), .has_icon Select, .has_icon Textarea, .inner_light.dark .has_icon Input:not([type="checkbox"]):not([type="radio"]), .inner_light.dark .has_icon Textarea {padding-left:32px;} .has_icon.input_box .svg_icon {position:absolute; top:10px; left:8px; z-index:2;} Textarea, .inner_light.dark Textarea {padding:6px 8px; resize:vertical; min-height:120px; max-height:400px;} Select {cursor:pointer; padding-right:32px; appearance:none; background-position:right 9px center; background-repeat:no-repeat, repeat; background-size:14px 8px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%238a8a8a' viewBox='0 0 13 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.5 7a.956.956 0 0 1-.657-.256l-5.57-5.25a.839.839 0 0 1 0-1.237.968.968 0 0 1 1.312 0L6.5 4.888 11.415.257a.968.968 0 0 1 1.313 0 .839.839 0 0 1 0 1.237l-5.572 5.25A.956.956 0 0 1 6.5 7Z'/%3E%3C/svg%3E");} Input.error:not([type="checkbox"]):not([type="radio"]), Textarea.error, .inner_light.dark Input.error:not([type="checkbox"]):not([type="radio"]), .inner_light.dark Textarea.error {background:var(--input-white) url("../images/danger.svg") no-repeat calc(100% - 10px) 50% / 22px; z-index:2; border:2px solid var(--error);} Input:not([type="checkbox"]):not([type="radio"]).success, Textarea.success {border-color:var(--success);} Input:not([type="checkbox"]):not([type="radio"]):focus, Textarea:focus, Select:focus, .inner_light.dark Input:not([type="checkbox"]):not([type="radio"]):focus, .inner_light.dark Textarea:focus, .inner_light.dark Select:focus {border-color:var(--btn-bg-white); outline:0; outline-offset:0;} Input[type=text]:disabled, Input[type=tel]:disabled {opacity:.4; pointer-events:none;} Input:not([type="checkbox"]):not([type="radio"])::placeholder, Textarea::placeholder, .inner_light.dark Input:not([type="checkbox"]):not([type="radio"])::placeholder, .inner_light.dark Textarea::placeholder {color:var(--text-white); opacity:.5;} /* --- If Dark - Rows, Inputs, Texareas --- */ .dark .form_row Label, .inner_dark .form_row Label {color:var(--text-middle-dark);} .dark Input:not([type="checkbox"]):not([type="radio"]), .dark Select, .dark Textarea, .inner_dark Input:not([type="checkbox"]):not([type="radio"]), .inner_dark Select, .inner_dark Textarea {color:var(--text-dark); background:var(--input-dark); border-color:var(--border-color-dark); background-position:calc(100% + 32px) 50%;} .dark Input:not([type="checkbox"]):not([type="radio"])::placeholder, .dark Textarea::placeholder, .inner_dark Input:not([type="checkbox"]):not([type="radio"])::placeholder, .inner_dark Textarea::placeholder {color:var(--text-dark);} .dark Input:not([type="checkbox"]):not([type="radio"]):focus, .dark Textarea:focus, .dark Select:focus, .inner_dark Input:not([type="checkbox"]):not([type="radio"]):focus, .inner_dark Textarea:focus, .inner_dark Select:focus {border-color:var(--btn-text-dark);} .dark Input.error:not([type="checkbox"]):not([type="radio"]), .dark Textarea.error, .inner_dark Input.error:not([type="checkbox"]):not([type="radio"]), .inner_dark Textarea.error {background:var(--input-dark) url("../images/danger.svg") no-repeat calc(100% - 10px) 50% / 22px; border:2px solid var(--error);} /* --- If Dark but Inner Light - Rows, Inputs, Texareas --- */ .dark.inner_light .hero_form .form_row Label {color:var(--text-middle-white);} /* --- Checkbox & Radio Logic --- */ .choice_group {display:flex; flex-direction:column; gap:8px;} .checkbox {display:flex; align-items:center; position:relative; cursor:pointer; min-height:24px; padding-left:32px; font-size:var(--text-common); color:var(--text-common-white); font-weight:var(--text-common-weight); line-height:1.4; transition:all .25s ease; user-select:none; width:max-content;} .checkbox Input {position:absolute; opacity:0; width:0; height:0;} .checkbox::before {content:''; position:absolute; top:2px; left:0; width:20px; height:20px; background:var(--white); border:1px solid rgba(0,0,0,0.1); transition:all .3s ease; border-radius:var(--border-radius-btn); box-shadow:inset 0 2px 4px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.02);} .checkbox::after {content:''; position:absolute; top:9px; left:6px; width:9px; height:5px; border-bottom:2.5px solid var(--btn-bg-white); border-left:2.5px solid var(--btn-bg-white); transform:rotate(-45deg) translateY(-5px); opacity:0; filter:blur(2px); transition:all .3s cubic-bezier(.175,.885,.32,1.275);} .checkbox:has(Input:checked)::before {background:rgba(255,255,255,.1); box-shadow:inset 0 2px 6px rgba(0,0,0,0.1), 0 0 0 4px color-mix(in srgb, var(--input-white), transparent 92%); backdrop-filter:brightness(1.1); border-color:rgba(0,0,0,0.05);} .checkbox:has(Input:checked)::after {opacity:1; transform:rotate(-45deg) translateY(0); filter:blur(0);} .checkbox:hover::before {border-color:rgba(0,0,0,0.3); background:rgba(255,255,255,.1);} /* --- Radio --- */ .checkbox:has(Input[type=radio])::before {border-radius:50%;} .checkbox:has(Input[type=radio])::after {top:8px; left:6px; width:8px; height:8px; border:none; border-radius:50%; background:var(--btn-bg-white); transform:scale(0); filter:blur(2px); transition:all .3s cubic-bezier(.5, -0.5, .5, 1.5);} .checkbox:has(Input[type=radio]:checked)::after {opacity:1; transform:scale(1); filter:blur(0);} /* --- Dark Theme Overrides (Contrast Improved) --- */ .inner_dark .checkbox {color:var(--text-common-dark);} .inner_dark .checkbox::before {background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); box-shadow:inset 0 2px 4px rgba(0,0,0,.2);} .inner_dark .checkbox:has(Input:checked)::before {background:var(--btn-bg-white); border-color:rgba(0,0,0,.1); backdrop-filter:brightness(1.2); box-shadow:inset 0 2px 6px rgba(0,0,0,.3), 0 0 0 4px color-mix(in srgb, var(--input-dark), transparent 85%);} .inner_dark .checkbox::after {border-color:color-mix(in srgb, var(--btn-bg-dark), white 20%); filter:drop-shadow(0 0 2px color-mix(in srgb, var(--btn-bg-dark), transparent 50%));} .inner_dark .checkbox:has(Input[type=radio])::after {background:color-mix(in srgb, var(--btn-bg-dark), white 20%); filter:drop-shadow(0 0 3px color-mix(in srgb, var(--btn-bg-dark), transparent 40%));} .inner_dark .checkbox:hover::before {border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1);} /* --- Headings --- */ /* --- Common - headings --- */ H1, .h1, H2, .h2, H3, .h3, H4, .h4 {display:flex; font-weight:var(--title-big-weight); font-size:var(--title-big); color:var(--title-big-white); flex-wrap:wrap; margin-bottom:max(calc(var(--title-big) * 0.8), 32px);} Section > .container > .h1:has(+ .h2) {margin-bottom:12px;} H2, .h2 {font-weight:var(--title-middle-weight); font-size:var(--title-middle); margin-bottom:max(calc(var(--title-middle) * 0.8), 24px); color:var(--title-middle-white);} H3, .h3 {font-weight:var(--title-small-weight); font-size:var(--title-small); margin-bottom:max(calc(var(--title-small) * 0.8), 18px); color:var(--title-small-white);} H4, .h4 {font-weight:var(--block-title-small-weight); font-size:var(--block-title-small); margin-bottom:max(calc(var(--block-title-small) * 0.8), 16px); color:var(--title-small-white);} /* --- Inner Tile - headings --- */ .inner_h1, .inner_h2, .dark.inner_light .inner_h1, .dark.inner_light .inner_h2 {font-weight:var(--block-title-big-weight); font-size:var(--block-title-big); color:var(--block-title-big-white); margin-bottom:max(calc(var(--block-title-big) * 0.8), 16px); display:flex;} .inner_h2, .dark.inner_light .inner_h2 {font-weight:var(--block-title-small-weight); font-size:var(--block-title-small); margin-bottom:max(calc(var(--block-title-small) * 0.8), 16px);} /* --- If Dark - Common - headings --- */ .dark H1, .dark .h1 {color:var(--title-big-dark);} .dark H2, .dark .h2 {color:var(--title-middle-dark);} .dark H3, .dark .h3, .dark H4, .dark .h4 {color:var(--title-small-dark);} /* --- If Dark - Inner Tile - headings --- */ .dark .inner_h1, .inner_dark .inner_h1 {color:var(--block-title-big-dark);} .dark .inner_h2, .inner_dark .inner_h2 {color:var(--block-title-small-dark);} /* --- SWIPER --- */ .swiper-wrapper {padding:16px 0 24px 0;} /* --- Arrows - Swiper --- */ .swiper-button-next, .swiper-button-prev {display:none;} .swiper-button-next, .swiper-button-prev {position:absolute; top:50%; left:24px; transform:translateY(-50%); width:50px; height:50px; z-index:10; cursor:pointer; align-items:center; justify-content:center; transition:all .4s ease;} .swiper-button-next {left:auto; right:24px;} .no_arrows .swiper-button-next, .no_arrows .swiper-button-prev {display:none;} .swiper-button-next::before, .swiper-button-prev::before {content:''; position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); backdrop-filter:var(--popup-transparency-effect); transform:scale(.9); transition:all .4s cubic-bezier(.4,0,.2,1);} .swiper-button-next::after, .swiper-button-prev::after {content:''; position:absolute; width:10px; height:10px; border-top:2px solid var(--icon-dark); border-right:2px solid var(--icon-dark); transition:all .3s ease; z-index:2;} .swiper-button-next::after {transform:rotate(45deg); margin-right:4px;} .swiper-button-prev::after {transform:rotate(-135deg); margin-left:4px;} .swiper:hover .swiper-button-next::before, .swiper:hover .swiper-button-prev::before, .for_gallery:hover .swiper-button-next::before, .for_gallery:hover .swiper-button-prev::before, .for_reviews:hover .swiper-button-next::before, .for_reviews:hover .swiper-button-prev::before, .for_catalog:hover .swiper-button-next::before, .for_catalog:hover .swiper-button-prev::before {background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.2); box-shadow:0 8px 25px rgba(0,0,0,0.15); transform:scale(1);} .for_gallery:hover .swiper-button-next:hover::before, .for_gallery:hover .swiper-button-prev:hover::before, .for_reviews:hover .swiper-button-next:hover::before, .for_reviews:hover .swiper-button-prev:hover::before, .for_catalog:hover .swiper-button-next:hover::before, .for_catalog:hover .swiper-button-prev:hover::before {background:rgba(255,255,255,.3);} .swiper-button-next:hover::after, .swiper-button-prev:hover::after {border-color:var(--white); filter:drop-shadow(0 0 2px rgba(255,255,255,.5));} .swiper-button-next:hover::after {transform:rotate(45deg) translate(2px, -2px);} .swiper-button-prev:hover::after {transform:rotate(-135deg) translate(2px, -2px);} /* --- Disabled Arrows - Swiper --- */ .swiper-button-disabled::before {opacity:.3;} /* --- Arrows Above & Under - Swiper --- */ .above .swiper-button-next, .above .swiper-button-prev, .under .swiper-button-next, .under .swiper-button-prev {transform:none; width:44px; height:32px; border-radius:var(--border-radius-btn); top:auto; right:0; left:auto;} .above .swiper-button-next::before, .above .swiper-button-prev::before, .under .swiper-button-next::before, .under .swiper-button-prev::before {border-radius:var(--border-radius-btn);} .above .swiper-button-next, .above .swiper-button-prev {top:-30px;} .under .swiper-button-next, .under .swiper-button-prev {bottom:-24px;} .above .swiper-button-prev, .under .swiper-button-prev {right:54px;} .above .swiper-button-next::after, .above .swiper-button-prev::after, .under .swiper-button-next::after, .under .swiper-button-prev::after {width:8px; height:8px;} /* --- Catalog Middle Arrows - Swiper --- */ .catalog .middle .swiper-button-next::before, .catalog .middle .swiper-button-prev::before {background:var(--item-bg-dark);} .catalog .middle:hover .swiper-button-next::before, .catalog .middle:hover .swiper-button-prev::before {box-shadow:0 4px 15px rgba(0,0,0,.4); background:var(--item-bg-dark);} /* --- Pagination - Swiper --- */ .swiper-pagination-bullet {background:var(--icon-dark); opacity:.3; width:8px; height:8px; display:inline-block; border-radius:50%; transition:all .3s ease;} .popup_inner .swiper-pagination-bullet {background:var(--icon-white);} .swiper-pagination-bullet-active {opacity:1; transform:scale(1.2);} .swiper-pagination-lock {display:none;} /* --- Counts - Swiper --- */ .swiper-counter {display:flex; position:absolute; left:0; bottom:-3px; color:var(--icon-dark); font-size:11px; font-weight:600; letter-spacing:1px; z-index:1; pointer-events:none;} .gallery_popup_overlay .swiper-counter {color:var(--icon-white); bottom:auto; top:16px; left:16px;} .swiper-counter .sep {margin:0 4px; opacity:.5;} .swiper-counter .total {opacity:.5;} .swiper-pagination {bottom:0;} /* --- If Inner Dark - Swiper --- */ .inner_dark .swiper-counter {color:var(--icon-white);} .gallery_popup_overlay .inner_dark .swiper-counter, .product_details.inner_dark .swiper-counter {color:var(--icon-dark);} .inner_dark .swiper-pagination-bullet {background:var(--icon-white);} .inner_dark.popup_inner .swiper-pagination-bullet, .product_details.inner_dark .swiper-pagination-bullet {background:var(--icon-dark);} /* --- Arrows --- */ .inner_dark .swiper-button-next::before, .inner_dark .swiper-button-prev::before, .inner_dark .for_gallery:hover .swiper-button-prev::before, .inner_dark .for_gallery:hover .swiper-button-next::before, .inner_light.popup_inner .swiper .swiper-button-next::before, .inner_light.popup_inner .swiper .swiper-button-prev::before, .inner_dark .for_reviews:hover .swiper-button-prev::before, .inner_dark .for_reviews:hover .swiper-button-next::before, .inner_dark .for_catalog:hover .swiper-button-next:hover::before, .inner_dark .for_catalog:hover .swiper-button-prev:hover::before, .inner_dark .for_catalog:hover .swiper-button-next::before, .inner_dark .for_catalog:hover .swiper-button-prev::before {background:var(--item-bg-dark);} .inner_dark.popup_inner .swiper .swiper-button-next::before, .inner_dark.popup_inner .swiper .swiper-button-prev::before, .inner_dark .product_gallery .swiper-button-next::before, .inner_dark .product_gallery .swiper-button-prev::before {background:rgba(255,255,255,.15);} /* --- Catalog Middle Arrows --- */ .catalog.inner_dark .middle .swiper-button-next::before, .catalog.inner_dark .middle .swiper-button-prev::before {background:rgba(255,255,255,.08);} .catalog.inner_dark .middle:hover .swiper-button-next::before, .catalog.inner_dark .middle:hover .swiper-button-prev::before {background:rgba(255,255,255,.3); box-shadow:0 8px 25px rgba(0,0,0,0.15);} .catalog.inner_dark .middle:hover .swiper-button-next:hover::before, .catalog.inner_dark .middle:hover .swiper-button-prev:hover::before {background:rgba(255,255,255,.5);} /* --- If Dark & Inner dark - Swiper --- */ .dark.inner_dark .swiper-counter {color:var(--icon-dark);} .dark.inner_dark .swiper-pagination-bullet {background:var(--icon-dark);} /* --- If Light & Inner light - Swiper --- */ .light.inner_light .swiper-counter {color:var(--icon-white);} .light.inner_light .swiper-pagination-bullet {background:var(--icon-white);} /* --- Arrows --- */ .light.inner_light .above .swiper-button-next::before, .light.inner_light .above .swiper-button-prev::before, .light.inner_light .for_gallery:hover .above .swiper-button-prev::before, .light.inner_light .for_gallery:hover .above .swiper-button-next::before, .light.inner_light .under .swiper-button-next::before, .light.inner_light .under .swiper-button-prev::before, .light.inner_light .for_gallery:hover .under .swiper-button-prev::before, .light.inner_light .for_gallery:hover .under .swiper-button-next::before, .light.inner_light .product_gallery .swiper-button-next::before, .light.inner_light .product_gallery .swiper-button-prev::before {background:var(--item-bg-dark);} /* --- If Dark & Inner light - Swiper --- */ .dark.inner_light .product_gallery .swiper-button-next::before, .dark.inner_light .product_gallery .swiper-button-prev::before {background:var(--item-bg-dark);} /* --- Thumbs - Swiper --- */ .swiper-thumbs.swiper {display:block; flex-shrink:0; margin:8px 0 0 0; padding:8px; height:calc(80px + 16px); width:100%; overflow:hidden; position:relative;} .swiper-thumbs:not(.swiper-initialized) .swiper-wrapper {display:flex; align-items:flex-start; height:auto; overflow:hidden;} .swiper-thumbs.swiper .swiper-slide {opacity:.4; transition:.4s cubic-bezier(.4,0,.2,1); width:auto; height:100%; cursor:pointer; aspect-ratio:var(--ratio);} .swiper-thumbs.swiper .swiper-slide-thumb-active, .swiper-thumbs .swiper-slide:hover {opacity:1;} .thumb_img_inner {border-radius:var(--border-radius-tile); border:2px solid transparent; box-shadow:0 4px 12px rgba(0,0,0,0); transition:.3s; width:100%; height:100%; overflow:hidden;} .swiper-slide:hover .thumb_img_inner {box-shadow:0 8px 20px rgba(0,0,0,.3);} .contain .swiper-slide .thumb_img_inner {padding:4px;} .swiper-slide-thumb-active .thumb_img_inner {border-color:var(--icon-white); box-shadow:0 8px 20px rgba(0,0,0,.3); transform:translateY(-6px);} .thumb_img_inner Img {width:100%; height:100%; object-fit:cover;} .contain .thumb_img_inner Img {object-fit:contain;} /* --- If Inner Dark - Thumbs - Swiper --- */ .product_details.inner_dark .swiper-slide-thumb-active .thumb_img_inner, .dark.popup_inner .swiper-slide-thumb-active .thumb_img_inner, .inner_dark.popup_inner .swiper-slide-thumb-active .thumb_img_inner {border-color:var(--icon-dark);} /* --- Any Tiles --- */ .tiles {display:flex; flex-wrap:wrap; gap:16px; justify-content:center;} .tiles.cols_mobile_2 .tile_item {width:calc(50% - 8px);} .tiles.cols_mobile_3 .tile_item {width:calc(33.333% - 11px);} /* --- PAGINATION --- */ /* --- Load more --- */ .for_load_more {margin:32px 0; text-align:center;} .load_more {display:inline-flex; align-items:center; gap:6px; padding:12px 24px; border:1px solid var(--border-color-dark); border-radius:var(--border-radius-tile); color:var(--gray); font-weight:var(--title-big-weight); transition:.3s ease;} .load_more:hover {color:var(--black); border-color:var(--gray); box-shadow:0 4px 12px rgba(0,0,0, .08); transform:translateY(-1px);} .load_more .svg_icon {transition:transform .5s ease;} .load_more.loading .svg_icon {animation:spin 1s linear infinite;} @keyframes spin {100% {transform:rotate(360deg);}} .load_more Span {opacity:.8;} /* --- Page Selection --- */ .pagination {display:flex; justify-content:center; align-items:center; gap:8px; list-style:none;} .pagination LI {display:flex; align-items:center;} .pagination A, .pagination B {display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; border-radius:var(--border-radius-btn); background:var(--white); color:var(--gray); font-size:var(--text-small); transition:.25s ease; border:1px solid var(--border-color-dark);} .pagination LI.active B {background:var(--bg-color-dark); color:var(--white); border-color:var(--white); box-shadow:0 4px 12px rgba(0,0,0, .08); transform:translateY(-4px);} .pagination A:hover {border-color:var(--gray); color:var(--black); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0, .08);} .pagination LI.disabled {color:var(--gray-light); letter-spacing:2px;} .pagination A.arrow_btn {position:relative; background:#f8f9fa;} .arrow_btn::after {content:''; width:8px; height:8px; border-top:2px solid var(--gray); border-right:2px solid var(--gray); display:block;} .arrow_btn.prev::after {transform:rotate(-135deg); margin-left:4px;} .arrow_btn.next::after {transform:rotate(45deg); margin-right:4px;} .arrow_btn:hover::after {border-color:var(--black);} /* --- If Inner Dark - Load more & Page Selection --- */ .inner_dark .load_more {border-color:var(--gray-light); color:var(--border-color-dark); background:var(--btn-bg-white);} .inner_dark .load_more:hover {color:var(--white); border-color:var(--btn-bg-dark);} .inner_dark .pagination A, .inner_dark .pagination B {background:var(--btn-bg-white); color:var(--border-color-dark); border-color:var(--gray-light);} .inner_dark .pagination LI.active B {color:var(--white);} .inner_dark .pagination A:hover {border-color:var(--btn-bg-dark); color:var(--white);} .inner_dark .pagination A.arrow_btn {background:var(--btn-bg-white);} .inner_dark .arrow_btn::after {border-color:var(--border-color-dark);} .inner_dark .arrow_btn:hover::after {border-color:var(--white);} /* --- Popup --- */ .popup, .top_menu_close, .gallery_popup_overlay {position:fixed; inset:0; opacity:0; visibility:hidden; display:flex; justify-content:center; z-index:99; background:rgba(0,0,0,.6); height:100dvh; transition:all .4s ease;} .popup.popup_open, .open.top_menu_close, .gallery_popup_overlay.popup_open {opacity:1; visibility:visible; backdrop-filter:var(--popup-transparency-effect);} .popup_inner.popup_product {max-width:var(--content-width);} .popup_inner {min-width:350px; width:calc(100% - 32px); max-width:400px; padding:32px 0 16px 0; background:var(--item-bg-white); max-height:calc(100dvh - 64px); box-shadow:0 4px 15px rgba(0,0,0,.4); border-radius:var(--border-radius-tile); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(.8) translateY(30px); display:flex; height:auto; opacity:0; transition:all .5s cubic-bezier(.19,1,.22,1); color:var(--text-white);} .popup_open .popup_inner {transform:translate(-50%, -50%) scale(1) translateY(0); opacity:1;} .popup_close, .menu_close {position:absolute; top:-20px; left:50%; transform:translateX(-50%); width:40px; height:40px; border-radius:50%; background:var(--white); cursor:pointer; z-index:10; transition:all .3s cubic-bezier(.19,1,.22,1); box-shadow:0 4px 15px rgba(109,62,70,.2);} .popup_close:hover, .menu_close:hover {transform:translateX(-50%) scale(1.1); background:var(--error); box-shadow:0 6px 20px rgba(109,62,70,.4);} .popup_close Span, .menu_close Span {display:block; position:absolute; top:19px; left:11px; width:19px; height:3px; background:var(--error); border-radius:2px; transition:all .3s cubic-bezier(.19,1,.22,1);} .popup_close:hover Span, .menu_close:hover Span {background:var(--white);} .popup_close .line_1, .menu_close .line_1 {transform:rotate(45deg);} .popup_close .line_2, .menu_close .line_2 {transform:rotate(-45deg);} .popup_close:hover .line_1, .menu_close:hover .line_1 {animation:dance_X_1 .4s cubic-bezier(.19,1,.22,1) forwards;} .popup_close:hover .line_2, .menu_close:hover .line_2 {animation:dance_X_2 .4s cubic-bezier(.19,1,.22,1) forwards;} @keyframes dance_X_1 { 0% {transform:rotate(45deg);} 40% {transform:rotate(0deg);} 60% {transform:rotate(0deg);} 100% {transform:rotate(135deg);} } @keyframes dance_X_2 { 0% {transform:rotate(-45deg);} 40% {transform:rotate(0deg);} 60% {transform:rotate(0deg);} 100% {transform:rotate(45deg);} } .map_popup .popup_inner {max-width:calc(var(--content-width) - 10%); height:100%; padding:0;} .map_popup .map_wrap, .map_popup .popup_inner iframe {width:100%; height:100%; border-radius:var(--border-radius-tile);} .popup_box {width:100%; max-height:100%; display:flex; flex-direction:column; opacity:0; transform:translateY(10px); transition:all .5s ease .2s;} .popup_open .popup_box {opacity:1; transform:translateY(0);} .popup_box .shade_1, .popup_box .shade_2 {position:absolute; top:-1px; left:var(--margin-lt-rt); width:calc(100% - var(--margin-lt-rt-twice)); height:24px; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transition:.3s;} .popup_box .shade_2 {bottom:-1px; top:auto;} .shade_top .shade_1, .shade_bottom .shade_2 {opacity:1; visibility:visible; z-index:1;} .popup_box .shade_1::before, .popup_box .shade_2::before {content:''; height:1px; background:rgba(0,0,0,0.05); box-shadow:0 0 15px 2px rgba(0,0,0,0.2), 0 0 30px 5px rgba(0,0,0,0.1); position:absolute; left:5%; width:90%;} .popup_box .shade_1::before {top:-1px;} .popup_box .shade_2::before {bottom:-1px;} Form {width:100%; height:100%; padding:0 var(--margin-lt-rt-twice) var(--margin-lt-rt-twice) var(--margin-lt-rt-twice); overflow:auto; scroll-behavior:smooth; max-height:100%; display:flex; flex-direction:column;} Form Header {display:flex; flex-direction:column; margin:0 0 24px 0;} Form Header > *:last-child {margin-bottom:0;} Form .btn {width:100%;} .protected_data {display:flex; margin:12px 0 0 0; font-size:13px; align-items:center;} .protected_data .svg_icon {margin:0 6px 0 0; width:18px; height:18px;} /* --- If Dark - Popup --- */ .dark .popup_inner, .inner_dark .popup_inner, .inner_dark.popup_inner {color:var(--text-dark); background:var(--item-bg-dark);} /* --- Box for Buttons --- */ .for_btn {display:flex; flex-wrap:wrap; gap:16px;} .for_btn.margin {margin:24px 0;} .for_btn.margin.swiper_top {margin:0 0 24px 0;} .for_btn.h1_center {justify-content:center;} .for_btn.h1_right {justify-content:flex-end;} .for_btn.h1_left {justify-content:flex-start;} .for_btn.h2_center {justify-content:center;} .for_btn.h2_right {justify-content:flex-end;} .for_btn.h2_left {justify-content:flex-start;} .for_btn A.btn {width:max-content;} /* --- Buttons --- */ .btn {position:relative; overflow:hidden; border-radius:var(--border-radius-btn); background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; height:42px; flex-shrink:0; width:max-content; padding:1px; cursor:pointer; box-sizing:border-box; box-shadow:0 4px 8px rgba(0,0,0,.3); transition:background .4s ease, box-shadow .4s ease;} .btn:hover {background:rgba(255,255,255,.12); box-shadow:0 6px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05);} .btn Span {position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--btn-bg-white); user-select:none; box-sizing:border-box; border-radius:calc(var(--border-radius-btn) - 1px); padding:0 20px; color:var(--btn-text-white); font-size:var(--text-middle); font-weight:var(--text-middle-weight); transition:background .4s ease, color .4s ease; overflow:hidden;} .btn:hover Span {background:var(--btn-hover-bg-white);} .btn Span::after {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transition:left .8s cubic-bezier(.165,.84,.44,1); pointer-events:none; z-index:3;} .btn:hover Span::after {left:100%;} .btn::before, .dark .btn.light::before, .inner_dark .btn.light::before {content:''; position:absolute; z-index:1; width:150px; height:150px; transform:translate(-50%, -50%); left:var(--x, -200px); background:var(--btn-hover-bg-gradient-color-white); pointer-events:none; top:var(--y, -200px); will-change:left, top; transition:opacity .4s ease; opacity:0;} .btn:hover::before, .dark .btn.light:hover::before, .inner_dark .btn.light:hover::before {opacity:1;} .btn:not(:hover)::before {transition:opacity .3s ease; opacity:0;} /* --- If Dark buttons --- */ .dark .btn, .inner_dark .btn, .dark.inner_dark .hero_text .btn {background:rgba(255,255,255,.1);} .dark .btn:hover, .inner_dark .btn:hover, .dark.inner_dark .hero_text .btn:hover {background:rgba(255,255,255,.2); box-shadow:0 6px 16px rgba(0,0,0,.4);} .dark .btn Span, .inner_dark .btn Span, .dark.inner_dark .hero_text .btn Span {background:var(--btn-bg-dark);} .dark .btn:hover Span, .inner_dark .btn:hover Span, .dark.inner_dark .hero_text .btn:hover Span {background:var(--btn-hover-bg-dark);} .dark .btn::before, .inner_dark .btn::before, .dark.inner_dark .hero_text .btn::before {background:var(--btn-hover-bg-gradient-color-dark);} .dark .btn Span::after, .inner_dark .btn Span::after, .dark.inner_dark .hero_text .btn Span::after {background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);} /* --- Inner Dark but Light buttons --- */ .inner_dark .hero_text .btn, .dark.inner_light .hero_form .btn, .dark.inner_light .one_icon .btn, .dark.inner_light.photo_main .btn, .dark.inner_light.product_details .btn {background:rgba(255,255,255,.05);} .inner_dark .hero_text .btn:hover, .dark.inner_light .hero_form .btn:hover, .dark.inner_light .one_icon .btn:hover, .dark.inner_light.photo_main .btn:hover, .dark.inner_light.product_details .btn:hover {background:rgba(255,255,255,.12); box-shadow:0 6px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05);} .inner_dark .hero_text .btn Span, .dark.inner_light .hero_form .btn Span, .dark.inner_light .one_icon .btn Span, .dark.inner_light.photo_main .btn Span, .dark.inner_light.product_details .btn Span {background:var(--btn-bg-white);} .inner_dark .hero_text .btn:hover Span, .dark.inner_light .hero_form .btn:hover Span, .dark.inner_light .one_icon .btn:hover Span, .dark.inner_light.photo_main .btn:hover Span, .dark.inner_light.product_details .btn:hover Span {background:var(--btn-hover-bg-white);} .inner_dark .hero_text .btn::before, .dark.inner_light .hero_form .btn::before, .dark.inner_light .one_icon .btn::before, .dark.inner_light.photo_main .btn::before, .dark.inner_light.product_details .btn::before {background:radial-gradient(circle, var(--btn-bg-dark) 0%, transparent 70%);} .inner_dark .hero_text .btn Span::after, .dark.inner_light .hero_form .btn Span::after, .dark.inner_light .one_icon .btn Span::after, .dark.inner_light.photo_main .btn Span::after, .dark.inner_light.product_details .btn Span::after {background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);} /* --- Light buttons --- */ .light.btn, .inner_dark .light.btn, .dark .light.btn, .dark.inner_dark .light.btn {box-shadow:0 2px 8px rgba(0,0,0,.2);} .light.btn Span, .inner_dark .light.btn Span, .dark .light.btn Span, .dark.inner_dark .light.btn Span {background:var(--border-color-white); color:var(--text-white);} .light.btn:hover Span, .inner_dark .light.btn:hover Span, .dark .light.btn:hover Span, .dark.inner_dark .light.btn:hover Span {background:var(--white);} .light.btn Span::after, .inner_dark .light.btn Span::after, .dark .light.btn Span::after, .dark.inner_dark .light.btn Span::after {background:linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);} /* --- Common Links --- */ A.link, .inner_dark .top_menu_wrap A.link, Article A, .dark.inner_light A.link {color:var(--link-white);} A.link:hover, .inner_dark .top_menu_wrap A.link:hover, Article A:hover, .dark.inner_light A.link:hover {color:var(--link-white-hover);} .dark A.link, .inner_dark A.link, .dark.inner_dark .top_menu_wrap A.link, Article.dark A {color:var(--link-dark);} .dark A.link:hover, .inner_dark A.link:hover, .dark.inner_dark .top_menu_wrap A.link:hover, Article.dark A:hover {color:var(--link-dark-hover);} A.link.has_icon {align-items:center; display:flex;} A.link.has_icon .svg_icon, .dark.inner_light A.link.has_icon .svg_icon {fill:var(--link-white); transition:.3s ease;} A.link.has_icon:hover .svg_icon, .dark.inner_light A.link.has_icon:hover .svg_icon {fill:var(--link-white-hover);} .dark A.link.has_icon .svg_icon, .inner_dark A.link.has_icon .svg_icon {fill:var(--link-dark);} .dark A.link.has_icon:hover .svg_icon, .inner_dark A.link.has_icon:hover .svg_icon {fill:var(--link-dark-hover);} /* --- Animations --- */ /* --- Blur in Section & Article --- */ .blur, Article.anime H1, Article.anime H2, Article.anime H3, Article.anime H4, Section .h1, Section .h2, .product_details .main_title H1, .chars H2 {opacity:0; filter:blur(20px); transform:translateY(30px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1);} .in_view .blur, Article.anime H1.in_view_inner, Article.anime H2.in_view_inner, Article.anime H3.in_view_inner, Article.anime H4.in_view_inner, Section.in_view > .container > .h1, Section.in_view > .container > .h2, .two_cols_box .one_col :is(Article.anime, Section) :is(.h1, .h2).in_view_inner, .product_details.in_view .main_title H1, .chars.in_view H2 {opacity:1; filter:blur(0); transform:translateY(0);} .in_view .blur:nth-child(1), Article.anime H1.in_view_inner, Section.in_view > .container > .h1, .product_details.in_view .main_title H1, .chars.in_view H2 {transition-delay:0s;} .in_view .blur:nth-child(2), Article.anime H2.in_view_inner, Section.in_view > .container > .h2 {transition-delay:0.15s;} .in_view .blur:nth-child(3), Article.anime H3.in_view_inner {transition-delay:0.3s;} .in_view .blur:nth-child(4), Article.anime H4.in_view_inner {transition-delay:0.45s;} /* --- Blur for Article components --- */ Article.anime Img:not(.component_img Img), Article.anime figure {opacity:0; filter:blur(20px); transform:translateY(30px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1);} Article.anime Img.in_view_inner:not(.component_img Img.in_view_inner), Article.anime figure.in_view_inner {opacity:1; filter:blur(0); transform:translateY(0);} /* --- Blockquote Animation (Slide from Right) --- */ Article.anime Blockquote {opacity:0; transform:translateX(60px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1); will-change:transform, opacity, filter;} Article.anime Blockquote.in_view_inner {opacity:1; transform:translateX(0);} /* --- Table Rows Animation (Sequential) --- */ Article.anime table TR {opacity:0; filter:blur(10px); transform:translateY(20px); will-change:transform, opacity, filter; transition:opacity .6s ease-out, filter .6s ease-out, transform .7s cubic-bezier(0.22, 1, 0.36, 1);} Article.anime Figure.in_view_inner Table TR {opacity:1; filter:blur(0); transform:translateY(0); transition-delay:calc(var(--i) * .1s);} /* --- Article Lists Animation --- */ Article.anime LI, .chars.anime .one_char {position:relative; opacity:0; filter:blur(15px); transform:translateY(25px) scale(0.98); will-change:transform, opacity, filter; transition:opacity .7s ease-out, filter .7s ease-out, transform .8s cubic-bezier(0.16, 1, 0.3, 1);} Article.anime .in_view_inner LI, .chars.anime.in_view .one_char {opacity:1; filter:blur(0); transform:translateY(0) scale(1); transition-delay:calc(var(--i) * .15s);} /* --- Fade UP (Кнопка) --- */ .fade_up {opacity:0; transform:translateY(25px); transition:transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease-out;} .in_view .fade_up {opacity:1; transform:translateY(0); transition-delay:0.7s;} /* --- Animated Form --- */ .hero_form.animated_form, .two_columns .one_col .hero_form {opacity:0; transition:all 1.5s cubic-bezier(.22, 1, .36, 1); transition-delay:.8s;} .two_columns .one_col .hero_form {transition-delay:.2s;} .middle .hero_form.animated_form, .left .hero_form.animated_form, .right .hero_form.animated_form, .two_columns .one_col .hero_form {transform:translateY(60px);} .in_view .hero_form.animated_form, .two_columns .one_col .hero_form.in_view_inner {opacity:1; transform:translate(0, 0);} /* --- Animated Icons --- */ .perspective.icon_box .one_icon {opacity:0; transform:translateY(40px) rotateX(-15deg); transform-origin:center bottom; backface-visibility:hidden; -webkit-font-smoothing:subpixel-antialiased; transition:opacity .8s ease, transform .8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1); transition-delay:calc(var(--i, 0) * .2s); will-change:transform, opacity;} .done .perspective.icon_box {perspective:none;} .in_view_inner.perspective .one_icon {opacity:1; transform:translateY(0) rotateX(0deg);} .done .perspective .one_icon {transition-delay:0s; transform:none; will-change:auto; filter:none;} .done .perspective A.one_icon:hover {transform:translateY(-5px); transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1);} .done .perspective A.one_icon.no_background:hover {transform:translateY(0);} /* Photo Zoom */ .photo_zoom.photo_main {perspective:2000px;} .photo_zoom.photo_main .photo_box Img, .photo_zoom.photo_main .video_box {opacity:0; will-change:transform, opacity, filter; filter:contrast(0.4) brightness(1.7) saturate(0); transition-delay:0s; transform:rotateY(-30deg) rotateX(15deg) translateZ(-250px) scale(0.95); transform-origin:left center; transition:opacity .9s ease, transform 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 1.4s ease;} .photo_zoom.photo_main .photo_box.in_view_inner Img, .photo_zoom.photo_main .video_box.in_view_inner {opacity:1; transform:rotateY(0deg) rotateX(0deg) translateZ(0) scale(1); filter:contrast(1) brightness(1) saturate(1); transition-delay:.3s;} /* For faq list: from left-right */ .faq_list.use_stagger:not(.done) .faq_item {opacity:0; visibility:hidden;} .faq_list.use_stagger.in_view_inner:not(.done) .faq_item {opacity:1; visibility:visible; animation-duration:.8s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.2, 1, .3, 1); animation-delay:calc(var(--i) * 220ms);} .faq_list.use_stagger.in_view_inner:not(.done) .faq_item:nth-child(2n+1) {animation-name:faqFlyInLeft;} .faq_list.use_stagger.in_view_inner:not(.done) .faq_item:nth-child(2n) {animation-name:faqFlyInRight;} @keyframes faqFlyInLeft { 0% {opacity:0; transform:translateX(-60px) rotate(-2deg);} 100% {opacity:1; transform:translateX(0) rotate(0);} } @keyframes faqFlyInRight { 0% {opacity:0; transform:translateX(60px) rotate(2deg);} 100% {opacity:1; transform:translateX(0) rotate(0);} } .faq_list.use_stagger.done .faq_item {opacity:1; visibility:visible; transform:none; animation:none !important;} /* For Gallery: tiles appearance */ .foto_gallery.anime .one_photo {opacity:0; transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transform:translateY(30px); transition-delay:calc(var(--i) * .1s);} .foto_gallery.anime .gallery_box.in_view_inner .one_photo {opacity:1; transform:translateY(0);} /* For Reviews: tiles appearance */ .reviews.anime .one_review {opacity:0; transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--appear-index, 0) * .15s); transform:translateY(30px);} .reviews.anime .swiper .one_review {transition-delay:calc(var(--i) * .12s);} .reviews.anime .one_review.in_view_item, .reviews.anime .reviews_box.in_view_inner .one_review {opacity:1; transform:translateY(0);} /* Stars */ .reviews.anime .one_review .stars .star {opacity:0; transform:scale(.5) translateY(5px); transition:opacity .5s cubic-bezier(.2,0,.2,1), transform.5s cubic-bezier(.34,1.56,.64,1);} .reviews.anime .one_review.in_view_item .stars .star, .reviews.anime .reviews_box.swiper.in_view_inner .one_review .stars .star {opacity:1; transform:scale(1) translateY(0);} /* Delay for Stars */ .reviews.anime .one_review .stars .star:nth-child(1) {transition-delay:calc(var(--appear-index, 0) * .15s + .3s);} .reviews.anime .one_review .stars .star:nth-child(2) {transition-delay:calc(var(--appear-index, 0) * .15s + .4s);} .reviews.anime .one_review .stars .star:nth-child(3) {transition-delay:calc(var(--appear-index, 0) * .15s + .5s);} .reviews.anime .one_review .stars .star:nth-child(4) {transition-delay:calc(var(--appear-index, 0) * .15s + .6s);} .reviews.anime .one_review .stars .star:nth-child(5) {transition-delay:calc(var(--appear-index, 0) * .15s + .7s);} /* Delay for Stars if Swiper */ .reviews.anime .reviews_box.swiper.in_view_inner .one_review .stars .star:nth-child(1) {transition-delay:calc(var(--i) * .12s + .3s);} .reviews.anime .reviews_box.swiper.in_view_inner .one_review .stars .star:nth-child(2) {transition-delay:calc(var(--i) * .12s + .4s);} .reviews.anime .reviews_box.swiper.in_view_inner .one_review .stars .star:nth-child(3) {transition-delay:calc(var(--i) * .12s + .5s);} .reviews.anime .reviews_box.swiper.in_view_inner .one_review .stars .star:nth-child(4) {transition-delay:calc(var(--i) * .12s + .6s);} .reviews.anime .reviews_box.swiper.in_view_inner .one_review .stars .star:nth-child(5) {transition-delay:calc(var(--i) * .12s + .7s);} /* For Catalog: tiles appearance */ .catalog.anime .product_item {opacity:0; transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--appear-index, 0) * .15s); transform:translateY(30px);} .catalog.anime .swiper .product_item {transition-delay:calc(var(--i) * .12s);} .catalog.anime .product_item.in_view_item, .catalog.anime .catalog_items.in_view_inner .product_item {opacity:1; transform:translateY(0);} /* For Product Detail: photos appearance */ .product_details.anime .gallery_item, .product_details.anime .swiper-thumbs .thumb_item {opacity:0; transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i, 0) * .15s); transform:translateY(30px);} .product_details.anime .gallery_item.in_view_item, .product_details.anime .gallery_main.in_view_inner .gallery_item, .product_details.anime .swiper-thumbs.in_view_inner .swiper-slide {opacity:1; transform:translateY(0);} .product_details.anime .swiper-thumbs .thumb_item {transition-delay:calc(var(--i) * .12s);} /* --- Main HEADER ------------------------------------------------------------------------------------ */ .site_header {padding:8px 0; background:var(--bg-color-white); position:fixed; top:0; left:0; transform:translateY(0); box-shadow:0 15px 35px -5px rgba(0,0,0,0.1),0 5px 15px rgba(0,0,0,0.05); width:100%; will-change:transform; z-index:9; transition:transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;} .site_header.header_hidden {transform:translateY(-105%);} .transparent.site_header, .transparent.dark.site_header {background:none; box-shadow:unset;} .transparent.now_is_solid.site_header, .transparent.dark.now_is_solid.site_header {box-shadow:0 15px 35px -5px rgba(0,0,0,0.1),0 5px 15px rgba(0,0,0,0.05);} .transparent.now_is_solid {background:var(--bg-color-white);} .header_inner {width:100%; display:flex; align-items:center; justify-content:space-between;} .logo {max-width:136px;} .logo Img {object-fit:scale-down; width:100%; height:auto;} .transparent.site_header .logo Img:nth-child(2), .now_is_solid .logo Img:nth-child(2) {display:none;} .burger {width:40px; height:40px; position:relative; overflow:hidden; cursor:pointer; order:-1;} .burger Span {display:block; background:var(--btn-bg-dark); width:24px; height:3px; border-radius:2px; position:absolute; left:8px; transition:transform .3s cubic-bezier(.7,0,.3,1);} .burger Span.b_1 {top:11px;} .burger Span.b_2 {top:19px; width:18px; transition-delay:.05s;} .burger Span.b_3 {top:27px; transition-delay:.1s;} .burger Span::after {content:''; position:absolute; left:-40px; top:0; width:24px; height:3px; background:inherit; border-radius:inherit;} .burger Span.b_2::after {left:-34px; width:18px;} .burger:hover Span {transform:translateX(40px);} .phone_container {display:flex; flex-direction:column; flex-shrink:0; align-items:flex-end;} .phone_container .one_phone {display:flex; align-items:center;} .phone_container .messengers_box {display:none;} .phone_container .messengers_box A {display:flex; width:18px; height:18px; justify-content:center; align-items:center; margin:0 0 0 6px;} .phone_container .messengers_box A Img, .phone_container .messengers_box A .svg_icon {max-width:100%; max-height:100%;} .phone_container .messengers_box A.Viber .svg_icon {fill:var(--viber);} .phone_container .messengers_box A.Telegram .svg_icon {fill:var(--telegram);} .phone_container .messengers_box A.WhatsApp .svg_icon {fill:var(--whatsapp);} .phone_container .call_us {display:flex; justify-content:center; align-items:center; width:40px; height:40px;} .phone_container .call_us Span {display:none;} .phone_container .write_us {display:none;} /* --- If Dark - Main HEADER --- */ .dark.site_header, .dark.transparent.now_is_solid {background:var(--bg-color-dark);} .dark .burger Span {background:var(--icon-dark);} /* --- If Dark - Main HEADER but Hero is transparent & light --- */ .transparent.site_header.hero_light .logo Img:nth-child(2), .now_is_solid.transparent.site_header.hero_light .logo Img:nth-child(1), .transparent.site_header.hero_light .top_menu .logo Img:nth-child(1) {display:flex;} .transparent.site_header.hero_light .logo Img:nth-child(1), .now_is_solid.transparent.site_header.hero_light .logo Img:nth-child(2) {display:none;} .dark.hero_light:not(.now_is_solid) .burger Span {background:var(--icon-white);} .dark.hero_light:not(.now_is_solid) .svg_icon {fill:var(--icon-white);} .dark.hero_light .top_menu .svg_icon {fill:var(--icon-dark);} /* --- If light - Main HEADER but Hero is transparent & dark --- */ .transparent.site_header.hero_dark .logo Img:nth-child(2), .now_is_solid.transparent.site_header.hero_dark .logo Img:nth-child(1), .transparent.site_header.hero_dark .top_menu .logo Img:nth-child(1) {display:flex;} .transparent.site_header.hero_dark .logo Img:nth-child(1), .now_is_solid.transparent.site_header.hero_dark .logo Img:nth-child(2) {display:none;} .light.hero_dark:not(.now_is_solid) .burger Span {background:var(--icon-dark);} .light.hero_dark:not(.now_is_solid) .svg_icon {fill:var(--icon-dark);} .light.hero_dark .top_menu .svg_icon {fill:var(--icon-white);} /* --- MENU Main - BOX --- */ .top_menu_close {transition:opacity .4s ease .5s, visibility 0s linear 2.4s; z-index:9;} .open.top_menu_close {transition:opacity .4s ease 0s, visibility 0s linear 0s;} .top_menu_wrap .menu_close {left:auto; right:-20px; top:16px; transform:translateY(calc(-100% - 32px)); transition:transform .4s ease;} .top_menu_wrap.open .menu_close {transform:translateY(0); transition-delay:.6s;} .top_menu_wrap {position:fixed; top:0; left:-100%; transition:left .75s cubic-bezier(.15,0,.4,1); transition-delay:.2s; z-index:10; min-width:270px; width:calc(100% - 56px); height:100dvh; max-width:380px;} .top_menu_wrap.open {left:0;} .top_menu {background:var(--bg-color-white); padding:16px 0 24px 0; overflow-y:auto; display:flex; flex-direction:column; overflow-x:hidden; width:100%; height:100%;} .top_menu .mob_logo {margin:0 auto 12px auto;} /* --- MENU Main --- */ .top_menu UL.menu {margin:0 0 32px 0;} .dark.inner_light .top_menu UL.menu {background:var(--bg-color-white);} .top_menu UL.menu LI, .bottom_menu UL.menu LI {position:relative; border-bottom:1px solid var(--border-color-dark); overflow:hidden;} .dark.inner_light .top_menu UL.menu LI {border-color:var(--border-color-white);} .top_menu UL.menu LI A, .bottom_menu UL.menu LI A {position:relative; display:flex; flex-direction:column; width:100%; padding:12px 32px 12px 16px; text-decoration:none; color:var(--menu-name-first-white); font-size:var(--menu-name-first); font-weight:var(--menu-name-first-weight); opacity:0; transform:translate3d(0, 20px, 0); transition:opacity .3s ease, transform .3s ease;} .bottom_menu UL.menu LI A {transition:.3s;} .dark.inner_light .top_menu UL.menu LI A, .dark.inner_light .bottom_menu UL.menu LI A {color:var(--menu-name-first-white);} .open > .top_menu UL.menu > LI > A, .in_view .bottom_menu UL.menu > LI > A {opacity:1; transform:translate3d(0, 0, 0);} /* --- Delay for 1st level - MENU Main --- */ .open > .top_menu UL.menu > LI:nth-child(1) > A {transition-delay:0.60s;} .open > .top_menu UL.menu > LI:nth-child(2) > A {transition-delay:0.67s;} .open > .top_menu UL.menu > LI:nth-child(3) > A {transition-delay:0.74s;} .open > .top_menu UL.menu > LI:nth-child(4) > A {transition-delay:0.81s;} .open > .top_menu UL.menu > LI:nth-child(5) > A {transition-delay:0.88s;} .open > .top_menu UL.menu > LI:nth-child(6) > A {transition-delay:0.95s;} .open > .top_menu UL.menu > LI:nth-child(7) > A {transition-delay:1.02s;} .open > .top_menu UL.menu > LI:nth-child(8) > A {transition-delay:1.09s;} .open > .top_menu UL.menu > LI:nth-child(9) > A {transition-delay:1.16s;} .open > .top_menu UL.menu > LI:nth-child(10) > A {transition-delay:1.23s;} .open > .top_menu UL.menu > LI:nth-child(11) > A {transition-delay:1.30s;} .open > .top_menu UL.menu > LI:nth-child(12) > A {transition-delay:1.37s;} .open > .top_menu UL.menu > LI:nth-child(13) > A {transition-delay:1.44s;} .open > .top_menu UL.menu > LI:nth-child(14) > A {transition-delay:1.51s;} .open > .top_menu UL.menu > LI:nth-child(15) > A {transition-delay:1.58s;} .open > .top_menu UL.menu > LI:nth-child(16) > A {transition-delay:1.65s;} /* --- Arrows base style - MENU Main --- */ .top_menu .has_submenu > A::before, .top_menu .has_submenu > A::after, .bottom_menu .has_submenu > A::before, .bottom_menu .has_submenu > A::after {content:''; position:absolute; top:50%; right:20px; width:6px; height:2px; background:var(--btn-bg-white); border-radius:2px; transition:.4s cubic-bezier(.165,.84,.44,1); opacity:.6;} .dark.inner_light .top_menu .has_submenu > A::before, .dark.inner_light .top_menu .has_submenu > A::after, .dark.inner_light .bottom_menu .has_submenu > A::before, .dark.inner_light .bottom_menu .has_submenu > A::after {background:var(--btn-bg-white)} .top_menu .has_submenu > A::before, .bottom_menu .has_submenu > A::before {transform:translateX(-3px) rotate(45deg);} .top_menu .has_submenu > A::after, .bottom_menu .has_submenu > A::after {transform:translateX(1px) rotate(-45deg);} .top_menu .has_submenu.active > A::before, .bottom_menu .has_submenu.active > A::before {transform:translateX(-3px) rotate(-45deg);} .top_menu .has_submenu.active > A::after, .bottom_menu .has_submenu.active > A::after {transform:translateX(1px) rotate(45deg);} .top_menu .submenu, .bottom_menu .submenu {transition:max-height .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .4s ease, visibility 0s .5s; max-height:0; opacity:0; visibility:hidden; padding-left:24px; overflow:hidden;} .top_menu LI.has_submenu.active > .submenu, .bottom_menu LI.has_submenu.active > .submenu {max-height:800px; opacity:1; visibility:visible; transition:max-height .6s cubic-bezier(0.4, 0, 0.2, 1), opacity .4s ease, visibility 0s 0s;} .top_menu LI.has_submenu.active > .submenu > LI > A, .bottom_menu LI.has_submenu.active > .submenu > LI > A {opacity:1; transform:translate3d(0, 0, 0); transition:opacity .4s ease, transform .4s ease;} /* --- Delay for 2nd level - MENU Main --- */ .top_menu LI.has_submenu.active > .submenu > LI:nth-child(1) > A {transition-delay:.10s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(2) > A {transition-delay:.17s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(3) > A {transition-delay:.24s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(4) > A {transition-delay:.31s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(5) > A {transition-delay:.38s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(6) > A {transition-delay:.45s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(7) > A {transition-delay:.52s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(8) > A {transition-delay:.59s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(9) > A {transition-delay:.66s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(10) > A {transition-delay:.73s;} .top_menu LI.has_submenu.active > .submenu > LI:nth-child(n+11) > A {transition-delay:.80s;} .top_menu UL.menu LI UL.submenu LI, .bottom_menu UL.menu LI UL.submenu LI {border:none;} .top_menu .submenu .submenu > LI > A {font-size:var(--menu-name-second);} .top_menu_box UL LI A > Span, .dark.inner_light .top_menu_box UL LI A > Span {display:flex; font-size:calc(var(--text-small) - 2px); font-weight:var(--text-small-weight); color:var(--text-white); opacity:.6;} /* --- Info box - MENU Main --- */ .info_box {display:flex; flex-direction:column; padding:0 16px;} .info_box .one_box {display:flex; margin:0 0 24px 0;} .info_box .one_box:last-child {margin:0;} .info_box .info_text {margin-left:var(--margin-lt-rt-twice); display:flex; flex-direction:column;} .info_box .mob_social .info_text {margin-left:calc(var(--margin-lt-rt-twice) + 26px);} .top_menu_wrap .mob_phones_list LI + LI {margin-top:4px;} .info_box .info_text A.map {margin:6px 0 0 0; font-size:var(--text-middle); width:max-content;} .info_box .info_text .title {font-size:var(--menu-name-second); font-weight:var(--menu-name-first-weight); margin:0 0 6px 0;} /* --- If Inner Dark - MENU Main --- */ .inner_dark .top_menu UL.menu, .inner_dark .bottom_menu {background:var(--bg-color-dark);} .inner_dark .top_menu UL.menu LI, .inner_dark .bottom_menu UL.menu LI {border-color:var(--border-color-white);} .inner_dark .top_menu UL.menu LI A, .dark .top_menu UL.menu LI A, .inner_dark .bottom_menu UL.menu LI A, .dark .bottom_menu UL.menu LI A {color:var(--menu-name-first-dark);} .inner_dark .top_menu .has_submenu > A::before, .inner_dark .top_menu .has_submenu > A::after, .dark .top_menu .has_submenu > A::before, .dark .top_menu .has_submenu > A::after, .inner_dark .bottom_menu .has_submenu > A::before, .inner_dark .bottom_menu .has_submenu > A::after, .dark .bottom_menu .has_submenu > A::before, .dark .bottom_menu .has_submenu > A::after {background:var(--menu-name-first-dark);} .inner_dark .top_menu_box UL LI A > Span, .dark .top_menu_box UL LI A > Span, .inner_dark .bottom_menu UL LI A > Span, .dark .bottom_menu UL LI A > Span {color:var(--text-dark);} /* --- If Dark - MENU Main --- */ .dark .top_menu {background:var(--bg-color-dark); color:var(--text-dark);} .dark.inner_dark .top_menu UL.menu, .dark.inner_dark .bottom_menu {background:unset;} /* --- Main CONTENT ------------------------------------------------------------------------------------ */ Main {display:flex; width:100%; flex-direction:column; margin-top:62px; overflow:clip;} .site_header.transparent ~ Main {margin-top:0;} Main > Section, Main > Article {background:var(--bg-color-white);} /* --- If Dark --- */ Main > Section.dark, Main > Article.dark {background:var(--bg-color-dark);} /* --- Simple Parallax for any Section --- */ .simple_parallax {clip-path:inset(0 0 0 0);} .simple_parallax .component_img {position:fixed;} /* --- HERO --- */ .hero {display:flex; align-items:center; position:relative; min-height:var(--hero-height); overflow:hidden;} .two_columns .hero {min-height:unset;} .transparent ~ MAIN .hero:first-of-type {order:-1;} .site_header.transparent ~ Main > .hero:nth-child(1) {padding-top:62px;} .component_img {display:flex; position:absolute; top:0; left:0; width:100%; height:100%;} .bg_left .component_img, .bg_right .component_img {height:auto; top:50%; transform:translateY(-50%);} .component_img Img, .component_img Video {display:block; width:100%; height:100%; margin:0; object-fit:cover; border-radius:unset; box-shadow:unset;} .bg_left .component_img Img, .bg_left .component_img Video, .bg_right .component_img Img, .bg_right .component_img Video {width:auto; max-width:100%; height:auto; max-height:100%;} .bg_right .component_img Img, .bg_right .component_img Video {margin-left:auto; margin-right:0;} /* --- Fade animation - Common Overlay & Background pictures --- */ .fade .component_img {opacity:0; transition:opacity 2s cubic-bezier(.4, 0, .2, 1); will-change:opacity;} .fade .active .component_img {opacity:1;} /* --- Zoom Fade animation - Common Overlay & Background pictures --- */ .zoomFade .component_img {will-change:opacity, transform; animation:zoom 20s ease-in infinite;} @keyframes zoom { 0% {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);} } .component_img::before {position:absolute; inset:0; content:''; background:var(--image-fg-white); opacity:var(--image-fg-opacity-white);} .hero .component_img::before {opacity:var(--slider-opacity, var(--image-fg-opacity-white));} /* --- If Dark - Common Overlay & Background pictures --- */ .dark .component_img::before {background:var(--image-fg-dark); opacity:var(--image-fg-opacity-dark);} .dark.hero .component_img::before {opacity:var(--slider-opacity, var(--image-fg-opacity-dark));} /* --- If Dark - Hero --- */ .dark .hero_text {color:var(--text-common-dark);} /* --- Hero - Content --- */ .hero_inner {position:relative; display:flex; flex-direction:column; z-index:1; padding-top:calc(var(--section-padding-mobile) * 2); padding-bottom:var(--section-padding-mobile);} .hero_text {display:flex; flex-direction:column; color:var(--text-common-white); width:100%; align-items:center; justify-content:center;} .hero_text .text_place {width:100%;} .text_place .table .btn {margin:0;} .hero .for_btn {margin-top:32px; width:100%; justify-content:center;} .hero_text .h1, .hero_text .h2, .hero_text .h3 {width:100%;} .hero_text:has(.h2.align_left, .h3.align_left) .for_btn {justify-content:flex-start;} .hero_text:has(.h2.align_right, .h3.align_right) .for_btn {justify-content:flex-end;} /* --- Hero - Form --- */ .hero_form {margin:32px auto 0; min-width:350px; width:calc(100% - 32px); max-width:400px; padding:32px 0 0 0; background:var(--item-bg-white); box-shadow:0 4px 15px rgba(0,0,0,.4); border-radius:var(--border-radius-tile); display:flex;} .inner_dark .hero_form {color:var(--text-dark); background:var(--item-bg-dark);} .hero_form Form {padding-bottom:calc(var(--margin-lt-rt-twice) * 2);} /* --- BREADCRUMBS --- */ .breadcrumbs {padding:16px 0; width:100%; overflow:hidden; color:var(--text-white); background:var(--bg-color-white);} .breadcrumbs.in_header {order:-1;} .transparent + Main .breadcrumbs {order:0;} .breadcrumbs.in_footer, .transparent + Main .breadcrumbs.in_footer {order:9999;} .breadcrumbs UL.container {display:flex; overflow-x:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-left:15px; padding-right:15px;} .breadcrumbs UL.container::-webkit-scrollbar {display:none;} .breadcrumbs LI {display:flex; align-items:center; flex:0 0 auto;} .breadcrumbs LI A, .breadcrumbs LI SPAN {white-space:nowrap; font-size:14px;} .breadcrumbs LI A {padding-right:20px; position:relative; color:inherit; text-decoration:none; opacity:.7;} .breadcrumbs LI A::before {content:''; width:6px; height:6px; background:currentColor; border-radius:50%; position:absolute; top:50%; right:8px; transform:translateY(-50%); opacity:.5;} .breadcrumbs LI:last-child Span {opacity:1; font-weight:600;} /* --- If dark - Breadcrumbs --- */ .dark.breadcrumbs {color:var(--text-dark); background:var(--bg-color-dark);} .inner_dark.breadcrumbs LI A {color:var(--link-white); opacity:1;} .dark.inner_dark.breadcrumbs LI A {color:var(--orange);} /* --- ARTICLE --- */ Article {padding:var(--section-padding-mobile) 0; position:relative; color:var(--text-common-white);} Main > Article {clip-path:inset(0 0 0 0);} Article.content_text {padding:0;} Article.content_text.top + .need_margin, .need_margin + Article.content_text.bottom {margin-top:calc(var(--section-padding-mobile) / 2);} Article .component_img::before {opacity:var(--article-opacity, var(--image-fg-opacity-white));} Article.dark .component_img::before {opacity:var(--article-opacity, var(--image-fg-opacity-dark));} .main_head_1:has(+ .main_head_2) {margin-bottom:12px;} /* --- Headings - Article --- */ Article H1 {margin-top:12px;} Article H2 {margin-top:8px;} Article H3 {margin-top:4px;} Article H4 {margin-top:2px;} Article :is(h1, h2, h3, h4, h5, h6) {display:block;} /* --- Paragraph - Article --- */ Article P {margin-bottom:1.5em; line-height:1.5;} Article > P:last-of-type, .text_place > P:last-of-type {margin-bottom:0;} Article Strong, Article B {font-weight:700;} /* --- Lists - Article --- */ Article UL, Article OL {padding-left:28px; margin-bottom:1.5em; list-style-position:outside;} Article LI {margin-bottom:.6em; line-height:1.5; padding-left:6px;} Article LI > UL, Article LI > OL {margin-top:.6em; margin-bottom:.6em;} Article LI LI {font-size:calc(var(--text-common) - 1px); opacity:.85;} Article LI:last-child {margin-bottom:0;} /* --- Unordered Lists (Маркери) --- */ Article UL {list-style-type:disc;} Article UL UL {list-style-type:circle; padding-left:22px;} Article UL UL UL {list-style-type:square;} /* --- Ordered Lists (Цифри) --- */ Article OL {list-style-type:decimal;} Article OL OL {list-style-type:lower-alpha; padding-left:22px;} Article OL OL OL {list-style-type:lower-roman;} /* --- Гарні маркери (Modern Browsers) --- */ Article LI::marker {color:rgba(0,0,0,.6); font-weight:500;} /* --- Images - Article --- */ Article Img {width:auto; max-width:100%; height:auto;} Article Figure.image {display:flex; flex-direction:column; justify-content:center; margin:0 auto 1.5em auto; max-width:100%;} Article Figure.image.image-style-side {max-width:100%; margin-left:auto; margin-right:0;} Article Figure.image.image-style-side Img {width:100%; height:auto; display:block;} Article Figure.image Figcaption {margin-top:12px; padding:0 16px; font-size:13px; color:var(--text-white); border-left:2px solid var(--btn-bg-dark); font-style:italic; opacity:.8;} /* --- Blockquote - Article --- */ Blockquote {position:relative; margin:40px 0 40px 40px; padding:32px 40px; background:var(--gray-opacity-white); border-radius:var(--border-radius-tile); column-span:all; border-left:4px solid var(--btn-bg-dark);} Blockquote P {font-size:var(--block-title-big); line-height:1.6; font-style:italic; color:var(--text-white); margin:0 !important; position:relative; z-index:2;} Blockquote::before {content:'\201C'; position:absolute; top:-10px; left:20px; font-size:80px; color:var(--gray-opacity-dark); font-family:serif; z-index:1; line-height:1;} /* --- Tables - Article --- */ Figure.table {margin:1.5em auto; display:flex; flex-direction:column; column-span:all;} Figure.table.left {margin:0 auto 1.5em 0;} Figure.table.right {margin:0 0 1.5em auto;} Figure.table Table {width:100%; border-collapse:separate; border-spacing:0; color:var(--text-white); background:var(--item-bg-white); border-radius:var(--border-radius-tile); box-shadow:0 10px 30px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.05); break-inside:avoid;} Thead TR {background:rgba(0,0,0,.02);} Thead TR TH, TD {padding:8px 16px; font-weight:var(--title-big-weight); font-size:var(--text-small); letter-spacing:.05em; color:var(--text-common-white); text-align:left; line-height:1.5; border-bottom:1px solid rgba(0,0,0,.05);} TD {border-bottom:1px solid rgba(0,0,0,.03); letter-spacing:unset; font-weight:var(--text-common-weight); transition:.3s;} TR:last-child TD {border-bottom:none;} TR:hover TD {background:rgba(0,0,0,.02);} @media (max-width:767px) { Figure.table {width:100% !important; margin:-20px 0 20px 0; padding:20px; overflow-x:auto; -webkit-overflow-scrolling:touch;} Figure.table Table {min-width:600px; table-layout:auto;} } /* --- If short - Article --- */ Article .overflow {height:500px; overflow-x:hidden; overflow-y:auto;} .is_collapsed .last_visible_fade {-webkit-mask-image:linear-gradient(to bottom, black 40%, transparent 95%); mask-image:linear-gradient(to bottom, black 40%, transparent 95%); opacity:.8; transition:opacity .3s ease; margin-bottom:0;} /* --- Author - Article --- */ Article Footer {margin:0 auto; padding:0 var(--margin-lt-rt); width:100%; max-width:var(--content-width); position:relative;} .authors_list {padding:0; margin:16px 0 0 0; display:flex; list-style:none; flex-direction:column;} .authors_list > LI {display:flex; flex-wrap:wrap; align-items:center;} .authors_list > LI:not(:first-child) {margin:4px 0 0 0;} .authors_list .name {display:flex;} .authors_list .name Span {margin:0 6px 0 0; color:var(--gray-light);} .authors_list .social_list {list-style:none; display:flex; margin:0 0 0 16px; padding:unset;} .authors_list .social_list .btn {width:28px; height:28px;} .authors_list .social_list .btn Img {width:16px; height:16px; border-radius:unset; border:unset; box-shadow:unset;} /* --- If Inner dark - Article --- */ .inner_dark Figure.table Table {background:var(--item-bg-dark); color:var(--text-dark); border-color:rgba(255,255,255,.4);} .inner_dark Thead TR {background:rgba(0,0,0,.02);} .inner_dark Thead TR TH, .inner_dark TD {color:var(--text-common-dark); border-color:rgba(255,255,255,.05);} .inner_dark TD {color:rgba(255,255,255,.8);} .inner_dark TR:hover TD {background:rgba(0,0,0,.05);} .inner_dark Blockquote, .dark Blockquote {background:var(--gray-opacity-dark);} .inner_dark Blockquote P, .dark Blockquote P {color:var(--text-dark);} .inner_dark Blockquote::before, .dark Blockquote::before {color:var(--white-opacity);} /* --- If Dark - Article --- */ Article.dark, .dark Article {color:var(--text-common-dark);} Article.dark LI::marker {color:rgba(255,255,255,.6);} Article.dark .authors_list .name Span {color:var(--border-opacity);} Article.dark Figure.image Figcaption {color:var(--border-opacity);} .dark.inner_dark Figure.table Table {border-color:rgba(255,255,255,.1);} /* --- If Dark & Inner Light - Article --- */ Article.dark.inner_light Figure.table Table {box-shadow:0 10px 30px rgba(255,255,255,.1);} Article.dark.inner_light Img {box-shadow:0 0 30px rgba(255,255,255,.1);} Article.dark.inner_light .btn {background:rgba(255,255,255,.05); box-shadow:0 4px 8px rgba(0,0,0,.3);} Article.dark.inner_light .btn:hover {background:rgba(255,255,255,.12); box-shadow:0 6px 20px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05);} Article.dark.inner_light .btn Span {background:var(--btn-bg-white); color:var(--btn-text-white);} Article.dark.inner_light .btn:hover Span {background:var(--black);} Article.dark.inner_light .btn Span::after {background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);} Article.dark.inner_light .btn::before, .dark .btn.light::before, .inner_dark .btn.light::before, .dark.inner_dark .btn.light::before {background:radial-gradient(circle, var(--btn-bg-dark) 0%, transparent 70%);} /* --- ICONS --- */ .icon_list {padding:var(--section-padding-mobile) 0; display:flex; position:relative;} .two_columns .icon_list {padding:0;} .icon_list .component_img::before {opacity:var(--icon-list-opacity, var(--image-fg-opacity-white));} .icon_list.dark .component_img::before {opacity:var(--icon-list-opacity, var(--image-fg-opacity-dark));} .icon_box {perspective:1000px;} .icon_box .one_icon {display:flex; padding:12px; background:var(--item-bg-white); box-shadow:0 -1px 2px rgba(0,0,0,.02), 0 8px 16px -2px rgba(0,0,0,.04), 0 4px 8px -1px rgba(0,0,0,.06); border-radius:var(--border-radius-tile); align-items:center; flex-direction:column; width:100%; flex:0 0 auto; position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16,1,.3,1);} .one_icon::before {content:''; position:absolute; inset:0; z-index:-1; transition:transform .4s cubic-bezier(.16,1,.3,1);} .icon_list .icon_box .one_icon.no_background, .inner_dark .icon_box .one_icon.no_background {background:transparent; box-shadow:none;} .icon_box .icon_img {display:flex; width:100%; align-items:center; justify-content:center; max-height:var(--data-max-width); margin:0 0 24px 0;} .icon_box .icon_img Img, .icon_box .icon_img svg {width:100%; max-width:var(--data-max-width); height:auto; display:block; object-fit:contain; aspect-ratio:var(--ratio);} .icon_content {display:flex; flex-direction:column;} .icon_box .inner_h1 {font-size:var(--block-title-big); justify-content:center; text-align:center; word-break:break-word; transition:.3s;} .icon_content .inner_h1:last-child {margin-bottom:0;} .icon_box .inner_text {display:flex; font-size:var(--text-middle); font-weight:var(--text-middle-weight); color:var(--text-middle-white); word-break:break-word; text-align:center; flex-direction:column; justify-content:center;} .icon_box .inner_text .for_btn {width:100%; justify-content:center; display:flex; margin:16px 0 0 0;} /* --- If Icons is Link --- */ A.one_icon {transition:all .4s cubic-bezier(0.16, 1, 0.3, 1); cursor:pointer; text-decoration:none;} /* --- with background --- */ A.one_icon:not(.no_background)::after {content:''; position:absolute; top:-150%; left:-50%; width:200%; height:200%; background:linear-gradient(45deg, transparent 45%, rgba(255,255,255,.6) 50%, transparent 55%); transform:rotate(0deg); transition:all .8s cubic-bezier(0.16, 1, 0.3, 1); pointer-events:none; opacity:0;} /* --- without background --- */ A.one_icon.no_background .inner_h1 {position:relative; padding:0 12px; transition:all .4s ease;} A.one_icon.no_background .inner_h1::before, A.one_icon.no_background .inner_h1::after {content:''; position:absolute; top:50%; width:2px; height:0; background:var(--btn-bg-dark); transform:translateY(-50%); transition:all .4s cubic-bezier(0.16, 1, 0.3, 1); opacity:0;} A.one_icon.no_background .inner_h1::before {left:0;} A.one_icon.no_background .inner_h1::after {right:0;} /* --- If Inner dark - Icons --- */ .inner_dark .icon_box .one_icon {background:var(--item-bg-dark); box-shadow:0 4px 12px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.03);} .inner_dark .one_icon:not(.no_background)::after {background:linear-gradient(45deg, transparent 45%, rgba(255,255,255,.05) 50%, transparent 55%); transition-duration:1.2s;} .inner_dark .icon_box .inner_text {color:var(--text-middle-dark);} .inner_dark .icon_box .one_icon.no_background .inner_text {color:var(--text-middle-white);} .inner_dark .one_icon.no_background .inner_h1 {color:var(--block-title-big-white);} /* --- If Dark - Icons --- */ .dark.inner_dark .one_icon.no_background .inner_h1 {color:var(--block-title-big-dark); opacity:.6;} .dark.inner_dark A.one_icon.no_background .inner_h1::before, .dark.inner_dark A.one_icon.no_background .inner_h1::after {background:var(--block-title-big-dark);} .dark.inner_dark .icon_box .one_icon.no_background .inner_text {color:var(--text-middle-dark);} /* --- If Dark & Inner Light - Icons --- */ .dark.inner_light A.one_icon.no_background .inner_h1::before, .dark.inner_light A.one_icon.no_background .inner_h1::after {background:var(--block-title-big-dark);} /* --- PHOTO --- */ .photo_main {padding:var(--section-padding-mobile) 0; display:flex; position:relative;} .two_columns .photo_main {padding:0;} .photo_main .component_img::before {opacity:var(--photo-main-opacity, var(--image-fg-opacity-white));} .photo_main.dark .component_img::before {opacity:var(--photo-main-opacity, var(--image-fg-opacity-dark));} .photo_box {display:flex;} .photo_box Img {display:block; width:100%; height:auto; border-radius:var(--border-radius-tile);} /* --- VIDEO --- */ .video_box {position:relative; width:100%; border-radius:var(--border-radius-tile); overflow:hidden; background:var(--black); line-height:0;} .two_columns .video_box {padding:0;} .video_main .component_img::before {opacity:var(--video-main-opacity, var(--image-fg-opacity-white));} .video_main.dark .component_img::before {opacity:var(--video-main-opacity, var(--image-fg-opacity-dark));} .video_inner {position:relative; width:100%; aspect-ratio:16/9; display:block; overflow:hidden; cursor:pointer;} .uploaded Video {object-fit:contain;} .video_inner Video, .video_inner Iframe, .video_inner .prev_video, .video_inner .embed_box {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; border:0;} .prev_video Img {width:100%; height:100%; object-fit:cover;} /* --- Button Play-Pause - Video --- */ .play_btn {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:85px; height:85px; z-index:10; cursor:pointer; transition:.4s cubic-bezier(.4,0,.2, 1);} .play_btn.hidden {opacity:0; visibility:hidden; transform:translate(-50%,-50%) scale(1.4); filter:blur(10px);} .play_btn .circles {position:absolute; inset:0; border-radius:50%; background:var(--error); border:2px solid rgba(0,0,0, .2); box-shadow:0 10px 20px rgba(255,0,0, .3); transition:.3s ease;} .play_btn:hover .circles {transform:scale(1.1); box-shadow:0 15px 30px rgba(255,0,0, .5); background:#E60000;} .play_btn .icons {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;} .play_btn svg {display:block; width:40%; height:40%; fill:var(--white); stroke:var(--white); stroke-width:6; stroke-linejoin:round; transition:.5s cubic-bezier(.5,0,.2, 1);} .play_btn:hover svg {transform:scale(1.1) translate(1px, 0); filter:drop-shadow(0 0 5px rgba(255,255,255, .5));} .play_btn path {transition:d .5s cubic-bezier(0.5,0,0.2,1), transform .5s cubic-bezier(0.5,0,0.2,1);} .play_btn.is_playing svg {transform:translateX(1px);} .play_btn.is_playing .part_1 {d:path("M15,10 L15,50 L32,40 L32,20 Z");} .play_btn.is_playing .part_2 {d:path("M32,20 L32,40 L50,30 L50,30 Z");} .play_btn.is_paused svg {transform:scale(0.9);} .play_btn.is_paused .part_1 {d:path("M10,10 L10,50 L22,50 L22,10 Z"); transform:translateX(-2px);} .play_btn.is_paused .part_2 {d:path("M38,10 L38,50 L50,50 L50,10 Z"); transform:translateX(2px);} /* --- FAQ --- */ .faq {padding:var(--section-padding-mobile) 0; position:relative;} .two_columns .faq {padding:0;} .faq .component_img::before {opacity:var(--faq-opacity, var(--image-fg-opacity-white));} .faq.dark .component_img::before {opacity:var(--faq-opacity, var(--image-fg-opacity-dark));} /* --- One Item - FAQ --- */ .faq_item {display:flex; flex-direction:column; width:100%; position:relative; margin-bottom:16px; padding:0 16px; background:var(--item-bg-white); border:1px solid rgba(0,0,0,0.05); border-radius:var(--border-radius-tile); box-shadow:0 -1px 2px rgba(0,0,0,.02), 0 8px 16px -2px rgba(0,0,0,.04), 0 4px 8px -1px rgba(0,0,0,.06); transition:transform .4s cubic-bezier(0.16, 1, .3, 1), box-shadow .4s cubic-bezier(0.16, 1, .3, 1); overflow:hidden;} .faq_item.active {padding:4px 24px; margin:8px -6px 24px -6px; width:calc(100% + 12px); border-color:rgba(0,0,0,.08); box-shadow:0 20px 45px rgba(0,0,0,.1); z-index:2;} .faq_item.active::before {content:''; position:absolute; inset:0; z-index:-1; backdrop-filter:blur(15px) brightness(1.05); -webkit-backdrop-filter:blur(15px) brightness(1.05); background-image:linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%, transparent 75%, transparent); background-size:20px 20px; border-radius:inherit;} /* --- Question - FAQ --- */ .faq_question {padding:24px 40px 24px 0; cursor:pointer; font-weight:var(--block-title-big-weight); font-size:var(--block-title-big); line-height:1.4; color:var(--block-title-big-white); position:relative; transition:all .3s ease;} .faq_question::before, .faq_question::after {content:''; position:absolute; right:0; top:50%; width:14px; height:2px; background:var(--block-title-big-white); transform:translateY(-50%); transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); border-radius:2px;} .faq_question::after {transform:translateY(-50%) rotate(90deg);} .faq_item.active .faq_question {color:var(--icon-white); padding-bottom:16px;} .faq_item.active .faq_question::before, .faq_item.active .faq_question::after {background:var(--icon-white);} .faq_item.active .faq_question::after {transform:translateY(-50%) rotate(0deg); opacity:0;} /* --- Answer - FAQ --- */ .faq_answer {display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .4s ease;} .faq_item.active .faq_answer {grid-template-rows:1fr; opacity:1; padding-bottom:26px;} .answer_inner {min-height:0;} .answer_content {padding-top:20px; border-top:1px solid rgba(0,0,0,0.06); opacity:0; line-height:1.8; font-size:var(--block-title-small); color:var(--block-title-big-white); transition:opacity .5s ease .15s;} .answer_content P {margin-bottom:1.5em; line-height:1.5;} .answer_content P:last-of-type {margin-bottom:0;} .faq_item.active .answer_content {opacity:1;} /* --- If Dark - FAQ --- */ .inner_dark .faq_item {background:var(--item-bg-dark); border-color:rgba(255,255,255,0.08); box-shadow:0 4px 12px rgba(0,0,0,0.15);} .inner_dark .faq_item.active::before {background-image:linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent); backdrop-filter:blur(15px) brightness(1.2);} .inner_dark .faq_question {color:var(--block-title-big-dark);} .inner_dark .faq_question::before, .inner_dark .faq_question::after {background:var(--block-title-big-dark);} .inner_dark .faq_item.active .faq_question {color:var(--icon-dark);} .inner_dark .faq_item.active .faq_question::before {background:var(--icon-dark);} .inner_dark .answer_content {border-color:rgba(255,255,255,0.1); color:var(--block-title-big-dark);} /* --- FORMS --- */ .forms {padding:var(--section-padding-mobile) 0; position:relative;} .two_columns .forms {padding:0;} .forms .component_img::before {opacity:var(--forms-opacity, var(--image-fg-opacity-white));} .forms.dark .component_img::before {opacity:var(--forms-opacity, var(--image-fg-opacity-dark));} .forms .hero_form {margin:0 auto;} /* --- TWO COLS --- */ .two_columns {padding:var(--section-padding-mobile) 0; position:relative;} .two_columns .component_img::before {opacity:var(--two-columns-opacity, var(--image-fg-opacity-white));} .two_columns.dark .component_img::before {opacity:var(--two-columns-opacity, var(--image-fg-opacity-dark));} .two_cols_box {display:flex; flex-direction:column; gap:32px; padding:24px 0;} .two_cols_box .container, .two_cols_box Article {padding:0;} .two_cols_box .component_img {display:none;} /* --- TIMELINE --- */ .timeline {position:relative; padding:var(--section-padding-mobile) 0;} .two_columns .timeline {padding:0;} .timeline .component_img::before {opacity:var(--timeline-opacity, var(--image-fg-opacity-white));} .timeline.dark .component_img::before {opacity:var(--timeline-opacity, var(--image-fg-opacity-dark));} .timeline_box {position:relative; display:flex; flex-direction:column; gap:32px; width:100%;} .timeline_line {position:absolute; left:20px; width:2px; background:var(--btn-bg-white); opacity:.2; z-index:1; height:0; transition:height 0.8s cubic-bezier(0.22, 1, 0.36, 1);} .timeline_item {position:relative; display:flex; align-items:center; width:100%; z-index:2;} .step_marker {position:absolute; left:20px; display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; background:var(--btn-bg-white); color:var(--block-title-big-dark); border-radius:20px; font-weight:var(--block-title-big-weight); font-size:var(--block-title-small); z-index:5; white-space:nowrap; opacity:0; transform:translate(-50%, 0) scale(0); transition:opacity .5s ease, transform .6s cubic-bezier(0.34, 1.56, 0.64, 1), background .4s ease, box-shadow .4s ease;} .timeline_item.in_view_inner .step_marker {opacity:1; transform:translate(-50%, 0) scale(1); box-shadow:0 0 20px rgba(0,0,0,.4);} .step_marker::before {content:''; position:absolute; top:50%; width:0; height:2px; background:var(--btn-bg-white); opacity:.2; transform:translateY(-50%); z-index:-1; transition:width .6s ease .3s;} .step_marker::after {content:''; position:absolute; inset:0; border-radius:20px; border:2px solid var(--btn-bg-white); opacity:0; transform:scale(1); pointer-events:none;} .timeline_item.in_view_inner .step_marker::after {animation:marker-pulse 1.2s cubic-bezier(.24, 0, .38, 1) forwards;} @keyframes marker-pulse { 0% {transform:scale(1); opacity:1;} 100% {transform:scale(1.5, 1.8); opacity:0;} } .step_card {margin-left:60px; padding:24px; background:var(--item-bg-white); border-radius:var(--border-radius-tile); opacity:0; transform:translateY(50px) scale(.95); box-shadow:0 -1px 2px rgba(0,0,0,.02), 0 8px 16px -2px rgba(0,0,0,.04), 0 4px 8px -1px rgba(0,0,0,.06); width:100%; transition-delay:.2s; transition:transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;} .timeline_item.in_view_inner .step_card {opacity:1; transform:translateY(0) scale(1);} .step_card .title {margin:0; color:var(--title-small-white); font-size:var(--text-middle); font-weight:var(--title-small-weight); text-align:left; opacity:.05; transform:translateY(10px); transition:opacity .8s ease, transform .8s ease;} .timeline_item.in_view_inner .step_card .title {opacity:1; transform:translateY(0); transition-delay:.4s;} .step_card .sub_title {margin-top:12px; color:var(--text-small-white); font-size:var(--text-small); line-height:1.5; opacity:.1; transition:opacity .8s ease, transform .8s ease; transform:translateY(15px);} .timeline_item.in_view_inner .step_card .sub_title {opacity:1; transform:translateY(0); transition-delay:.5s;} /* --- If Dark - TIMELINE --- */ .inner_dark .timeline_line {background:var(--btn-bg-dark);} .inner_dark .step_marker {background:var(--btn-bg-dark);} .inner_dark .step_marker::before {background:var(--btn-bg-dark);} .inner_dark .step_marker::after {border-color:var(--btn-bg-dark);} .inner_dark .step_card {background:var(--item-bg-dark); box-shadow:0 4px 12px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.03);} .inner_dark .step_card .title {color:var(--title-small-dark);} .inner_dark .step_card .sub_title {color:var(--text-dark);} /* --- PHOTO GALLERY --- */ .foto_gallery {padding:var(--section-padding-mobile) 0; position:relative;} .two_columns .foto_gallery {padding:0;} .foto_gallery .component_img::before {opacity:var(--gallery-opacity, var(--image-fg-opacity-white));} .foto_gallery.dark .component_img::before {opacity:var(--gallery-opacity, var(--image-fg-opacity-dark));} .for_gallery {position:relative;} .gallery_box {align-items:flex-start;} .swiper.gallery_box {width:calc(100% + var(--margin-lt-rt-twice)); margin:0 var(--margin-lt-rt-minus); padding:0 var(--margin-lt-rt);} .foto_gallery Figure {display:flex; flex-direction:column;} .foto_gallery .img_wrap {display:flex; width:100%; align-items:center; justify-content:center; max-height:var(--data-max-height); overflow:hidden; border-radius:var(--border-radius-tile); box-shadow:0 4px 12px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.03);} .foto_gallery .swiper .img_wrap, .tit_on_hover .swiper .one_photo {box-shadow:0 4px 8px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.03);} .foto_gallery .img_wrap Img {object-fit:cover; width:100%; height:auto; aspect-ratio:var(--ratio); border-radius:var(--border-radius-tile);} /* --- Figcaption - Photo gallery --- */ .foto_gallery Figure Figcaption {margin-top:12px; padding-left:12px; border-left:2px solid var(--icon-dark); font-size:var(--text-small); line-height:1.4; color:var(--text-common-dark);} /* --- Figcaption only on Hover - Photo gallery --- */ .tit_on_hover .one_photo {overflow:hidden; border-radius:var(--border-radius-tile); box-shadow:0 4px 12px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.03);} .tit_on_hover.foto_gallery Figure {position:relative; overflow:hidden;} .tit_on_hover.foto_gallery .img_wrap {box-shadow:none;} .tit_on_hover.foto_gallery Figure Figcaption {position:absolute; bottom:0; left:0; right:0; padding:8px 12px; transform:translateY(0); border:none; color:var(--text-common-white); pointer-events:none; background:rgba(255,255,255,.3); backdrop-filter:blur(8px); border-top:1px solid rgba(0,0,0,.1); margin:0;} /* --- Video Play button adaptation - Photo gallery --- */ .foto_gallery .play_btn {width:40px; height:40px; transform:translate(-50%,-50%) scale(.8); transition:all .4s cubic-bezier(.4,0,.2,1.2);} .tiles.cols_mobile_1 .play_btn, .tiles.cols_mobile_2 .play_btn {width:54px; height:54px;} .foto_gallery .one_photo:hover .play_btn {transform:translate(-50%,-50%) scale(1.1); opacity:1;} .foto_gallery .play_btn svg {width:45%; height:45%; stroke-width:8;} .tit_on_hover.foto_gallery .one_photo.has_title:hover .play_btn {transform:translate(-50%,-70%) scale(1.1);} /* --- If original photo sizes - Photo gallery --- */ .original .gallery_box.tiles {display:block; column-gap:16px; width:100%;} .original .gallery_box.tiles.swiper .swiper-wrapper {align-items:center;} .original .gallery_box.tiles.cols_mobile_1 {column-count:1;} .original .gallery_box.tiles.cols_mobile_2 {column-count:2;} .original .gallery_box.tiles.cols_mobile_3 {column-count:3;} .original .gallery_box.tiles .one_photo {display:inline-block; width:100%; margin-bottom:16px; break-inside:avoid;} .original.foto_gallery .img_wrap {max-height:unset;} .original.foto_gallery .img_wrap Img {object-fit:contain; aspect-ratio:unset;} .original .need_margin + Article.content_text.bottom {margin-top:calc((var(--section-padding-mobile) / 2) - 16px);} /* --- Displaying on Other page - Photo gallery --- */ .gallery_column {display:flex; flex-direction:column;} .gallery_column Figure {display:flex; flex-direction:column; align-items:center; width:100%; margin-bottom:32px;} .gallery_column Figure:last-child {margin:0;} .gallery_column Figure Img {display:block; max-width:100%; width:auto; height:auto;} /* --- If Inner dark - Photo gallery --- */ .inner_dark.foto_gallery Figure Figcaption {border-color:var(--icon-white); color:var(--text-common-white);} .inner_dark.tit_on_hover.foto_gallery Figure Figcaption {color:var(--white); background:rgba(0,0,0,.3); border-color:rgba(255,255,255,.1);} /* --- POPUPS for PHOTO GALLERY --- */ .gallery_popup_overlay .swiper-button-next, .gallery_popup_overlay .swiper-button-prev {display:none;} /* --- Main Slider Common - Popups for photo gallery --- */ .gallery_popup_overlay .popup_inner {max-width:var(--content-width); padding:0; flex-direction:column; flex-grow:1; min-height:0; height:90vh;} .gallery_popup_overlay .swiper:not(.swiper-thumbs) {border-radius:var(--border-radius-tile); overflow:hidden; height:100%;} .gallery_popup_overlay .swiper-wrapper {padding:0;} .gallery_popup_overlay [data-object="popupSwiper"] .swiper-slide {width:100% !important; height:100%; display:flex; align-items:center; justify-content:center;} .gallery_popup_overlay .swiper:not(.swiper-thumbs) .swiper-slide Img {max-width:100%; max-height:100%; object-fit:contain; user-select:none;} .gallery_popup_overlay .swiper-thumbs {display:none;} .gallery_popup_overlay .swiper-pagination {display:block; bottom:16px;} /* --- If Inner dark - Popups for photo gallery --- */ .gallery_popup_overlay .inner_dark.popup_inner {background:var(--item-bg-dark);} /* --- VIEW 1 - Popups for photo gallery --- */ .popup_bg_blur {position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; border-radius:var(--border-radius-tile); transition:opacity .8s ease;} .no_bg .popup_bg_blur {display:none;} .popup_bg_blur::after {content:''; position:absolute; top:-10%; left:-10%; width:120%; height:120%; background-image:var(--bg-image); background-size:cover; background-position:center; filter:blur(60px) brightness(.4); opacity:.6; transition:background-image .8s ease;} /* --- If Dark - View 1 --- */ .inner_dark .popup_bg_blur::after {filter:blur(60px) brightness(.6);} /* --- VIEW 2 - Popups for photo gallery --- */ .gallery_popup_overlay:has(.popup_inner.no_bg.view_2) {background:rgba(255,255,255,.9);} .gallery_popup_overlay:has(.popup_inner.view_2) {background:rgba(255,255,255,1);} .popup_inner.view_2 .popup_bg_blur {border-radius:unset;} .popup_inner.view_2 {background:none; box-shadow:none; height:100%; width:100%; max-height:unset; border-radius:unset;} .popup_inner.view_2 .popup_close {transform:unset; right:16px; left:auto; top:16px;} /* --- If Dark - View 2 --- */ .gallery_popup_overlay:has(.inner_dark.popup_inner.no_bg.view_2) {background:rgba(0,0,0,.9);} .gallery_popup_overlay:has(.inner_dark.popup_inner.view_2) {background:rgba(0,0,0,1);} .gallery_popup_overlay .inner_dark.popup_inner.view_2 {background:none; border-radius:unset;} /* --- VIEW 3 - Popups for photo gallery --- */ .popup_inner.view_3 {width:100%; height:100%; max-width:unset; max-height:unset; border-radius:unset; transform:unset; left:0; top:0;} .view_3 .popup_bg_blur {z-index:unset; border-radius:unset;} .popup_inner.view_3 .popup_close {transform:unset; right:16px; left:auto; top:16px;} .gallery_main_box {display:flex; height:100%; width:100%;} .main_scroll {flex:1; height:100%; overflow-y:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; z-index:1;} .scroll_item {width:100%; height:100%; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; box-sizing:border-box;} .slide_content_wrapper {max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center;} .slide_content_wrapper Img {max-width:100%; max-height:100dvh; object-fit:contain; box-shadow:0 10px 30px rgba(0,0,0,.15);} .view_3 .gallery_thumbs {display:none;} /* --- Pagination like Swiper - View 3 --- */ .view_3_pagination_wrapper {position:fixed; left:16px; top:50%; transform:translateY(-50%); width:20px; height:72px; overflow:hidden; z-index:10; pointer-events:none;} .view_3_pagination {position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px; top:0; transition:top .3s ease; will-change:top; left:50%; transform:translateX(-50%);} .view_3_pagination Span {background:var(--icon-white); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); opacity:.3; width:8px; height:8px; flex-shrink:0; border-radius:50%; transform:scale(.33); transition:transform .3s ease, opacity .3s ease;} .view_3_pagination .swiper-pagination-bullet-active {opacity:1; transform:scale(1);} .view_3_pagination .bullet-near {transform:scale(.66); opacity:.3;} .view_3_pagination .bullet-far {transform:scale(.33); opacity:.3;} /* --- REVIEWS --- */ .reviews {padding:var(--section-padding-mobile) 0; position:relative;} .two_columns .reviews {padding:0;} .reviews .component_img::before {opacity:var(--reviews-opacity, var(--image-fg-opacity-white));} .reviews.dark .component_img::before {opacity:var(--reviews-opacity, var(--image-fg-opacity-dark));} .for_reviews {position:relative;} .swiper.reviews_box {width:calc(100% + var(--margin-lt-rt-twice)); margin:0 var(--margin-lt-rt-minus); padding:0 var(--margin-lt-rt);} .one_review {display:flex; flex-direction:column; padding:16px; background:var(--item-bg-white); transition:transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16,1,.3,1); box-shadow:0 -1px 2px rgba(0,0,0,.02), 0 8px 16px -2px rgba(0,0,0,.04), 0 4px 8px -1px rgba(0,0,0,.06); border-radius:var(--border-radius-tile); justify-content:space-between;} .swiper .one_review {box-shadow:0 -1px 2px rgba(0,0,0,.02), 0 8px 8px -2px rgba(0,0,0,.04), 0 4px 8px -1px rgba(0,0,0,.06);} /* --- Review header - Reviews --- */ .review_header {display:flex; align-items:center; margin-bottom:16px;} .review_header .photo {position:relative; width:48px; height:48px; margin:0 12px 0 0; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.8); box-shadow:0 0 0 4px rgba(0,0,0,.02), 0 4px 12px rgba(0,0,0,.08);} .review_header .photo Img {width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;} .author {display:flex; flex-direction:column; margin:0 12px 0 0; font-size:var(--block-title-small); color:var(--block-title-small-white); font-weight:var(--block-title-small-weight); width:100%;} .author_name + .author_text {margin:4px 0 0 0;} .author_text {opacity:.6; font-size:var(--text-small);} .stars {display:flex; align-items:center;} .stars .star {display:flex; align-items:center; margin:0 2px;} .stars .svg_icon {width:16px; height:16px; fill:var(--orange);} .stars .svg_icon:nth-child(2) {display:none;} .star.active .svg_icon:nth-child(1) {display:none;} .star.active .svg_icon:nth-child(2) {display:block;} /* --- Review text or video Place - Reviews --- */ .review_place {display:flex; flex-direction:column; margin:0 0 16px 0; line-height:1.5;} .review_place Iframe {border-radius:var(--border-radius-tile);} .review_place .youtube {position:relative; cursor:pointer; overflow:hidden; width:100%; border-radius:var(--border-radius-tile);} .review_place .youtube Img.shorts_play {width:100%; height:var(--height-shorts); object-fit:cover;} .reviews .shorts_text {position:absolute; top:0; left:0; right:0; padding:8px 12px; color:var(--white); font-size:var(--text-small); pointer-events:none; background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.6),rgba(0,0,0,0)); min-height:70px;} .one_review:hover .play_btn {transform:translate(-50%,-50%) scale(1.1); opacity:1;} .one_review .play_btn svg {width:45%; height:45%; stroke-width:8;} /* --- Review footer - Reviews --- */ .review_footer {display:flex; justify-content:space-between; align-items:center; min-height:42px;} .review_footer .date {display:flex; align-items:center; margin:0 16px 0 0;} .review_footer .svg_icon {width:16px; height:16px; margin:0 6px 0 0; fill:var(--gray-light);} .review_footer .date Span {font-size:var(--text-small); opacity:.6;} /* --- If Inner Dark - Reviews --- */ .inner_dark .one_review {background:var(--item-bg-dark); box-shadow:0 4px 8px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.03);} .inner_dark .review_header .photo {box-shadow:0 0 0 4px rgba(255,255,255,.02), 0 4px 12px rgba(255,255,255,.08); border:1px solid rgba(0,0,0,.8);} .inner_dark .author {color:var(--block-title-small-dark);} .inner_dark .review_place, .inner_dark .review_footer .date Span {color:var(--text-dark);} /* --- CATALOG --- */ .catalog {padding:var(--section-padding-mobile) 0; position:relative;} .two_columns .catalog {padding:0;} .catalog .component_img::before {opacity:var(--catalog-opacity, var(--image-fg-opacity-white));} .catalog.dark .component_img::before {opacity:var(--catalog-opacity, var(--image-fg-opacity-dark));} .for_catalog {position:relative;} .swiper.catalog_items {width:calc(100% + var(--margin-lt-rt-twice)); margin:0 var(--margin-lt-rt-minus); padding:0 var(--margin-lt-rt);} .catalog_box {display:flex; flex-direction:column;} /* --- One Product - Catalog --- */ .product_item {display:flex; flex-direction:column; background:var(--item-bg-white); border-radius:var(--border-radius-tile); padding:0; position:relative; z-index:1; overflow:visible;} .product_item.swiper-slide {height:unset; display:flex; flex-direction:column;} .product_item::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--item-bg-white); border-radius:var(--border-radius-tile); pointer-events:none; box-shadow:0 -1px 2px rgba(0,0,0,.02), 0 8px 16px -2px rgba(0,0,0,.04), 0 4px 8px -1px rgba(0,0,0,.06); transition:.3s;} .product_photo {position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:var(--catalog-ratio, 1/1); z-index:1; background:var(--white); border-radius:var(--border-radius-tile) var(--border-radius-tile) 0 0; transition:border-radius .3s;} .product_photo A, .product_photo .if_not_link {display:flex; align-items:center; justify-content:center; width:100%; height:100%;} .product_photo A Img, .product_photo .if_not_link Img {display:block; max-width:var(--data-max-width, 300px); max-height:var(--data-max-width, 300px); transition:border-radius .3s; object-fit:contain; font-size:0; border-radius:var(--border-radius-tile) var(--border-radius-tile) 0 0; width:100%; height:100%;} .statuses_place {position:absolute; top:8px; left:8px; display:flex; flex-direction:column; z-index:2;} .status-block {padding:3px 6px 4px; font-size:var(--text-small); line-height:1; border-radius:var(--border-radius-btn); margin-bottom:6px;} .product_info {display:flex; flex-direction:column; justify-content:space-between; flex:1 1 auto; padding:12px 16px; position:relative; z-index:1;} .product_text {display:flex; flex-direction:column;} .product_title {display:flex; margin:0 0 12px 0; font-weight:var(--block-title-big-weight); font-size:var(--block-title-big);} .product_desc {display:flex; flex-direction:column; font-weight:var(--text-small-weight); font-size:var(--text-small); color:var(--text-white);} .product_desc H1, .product_desc H2, .product_desc H3, .product_desc H4 {font-weight:var(--block-title-big-weight); font-size:var(--block-title-big); color:var(--text-white); margin-bottom:max(calc(var(--block-title-big) * 0.6), 10px);} .product_desc H2 {font-size:calc(var(--block-title-big) - 2px); margin-bottom:max(calc(var(--block-title-big) * 0.6), 8px);} .product_desc H3 {font-size:calc(var(--block-title-small) - 1px); margin-bottom:max(calc(var(--block-title-small) * 0.6), 6px);} .product_desc H4 {font-weight:var(--block-title-small-weight); font-size:calc(var(--block-title-small) - 2px); margin-bottom:max(calc(var(--block-title-small) * 0.6), 4px);} Article .product_desc H1, Article .product_desc H2, Article .product_desc H3, Article .product_desc H4 {margin-top:0;} .product_desc P {margin-bottom:1em; line-height:1.4;} .product_desc P:last-of-type {margin:0;} .product_footer {margin:12px 0 0 0; min-height:40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} .product_price {display:flex; flex-direction:column; flex-shrink:0; margin:0 6px 0 0;} .product_price .price {font-size:calc(var(--title-small) - 2px); font-weight:var(--title-small-weight); color:var(--icon-white); padding:4px 0;} .product_price .old_price {opacity:.6; text-decoration:line-through; font-size:var(--text-small);} /* --- Without background - Catalog --- */ .product_item.no_background, .product_item.no_background::before, .no_background .product_photo, .inner_dark .product_item.no_background, .inner_dark .product_item.no_background::before, .inner_dark .product_item.no_background:hover::before, .inner_dark .no_background .product_photo {background:transparent; box-shadow:none;} A.one_icon.no_background .inner_h1 {position:relative; padding:0 12px; transition:all .4s ease;} A.one_icon.no_background .inner_h1::before, A.one_icon.no_background .inner_h1::after {content:''; position:absolute; top:50%; width:2px; height:0; background:var(--btn-bg-dark); transform:translateY(-50%); transition:all .4s cubic-bezier(0.16, 1, 0.3, 1); opacity:0;} A.one_icon.no_background .inner_h1::before {left:0;} A.one_icon.no_background .inner_h1::after {right:0;} /* --- If Inner Dark - Catalog --- */ .inner_dark .product_item {background:var(--item-bg-dark); box-shadow:0 4px 8px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.03);} .inner_dark .product_item::before {background:var(--item-bg-dark); box-shadow:0 -1px 2px rgba(0,0,0,.16), 0 8px 16px -2px rgba(0,0,0,.04), 0 4px 8px -1px rgba(0,0,0,.32);} .inner_dark .product_photo {background:var(--black);} .inner_dark .product_title {color:var(--link-dark);} .inner_dark A.product_title:hover {color:var(--link-white);} .inner_dark .product_desc, .inner_dark .product_desc H1, .inner_dark .product_desc H2, .inner_dark .product_desc H3, .inner_dark .product_desc H4 {color:var(--text-dark); opacity:.6;} .inner_dark .no_background .product_price .price {color:var(--icon-dark);} /* --- PRODUCT DETAILS - CATALOG --- */ .product_details {padding:var(--section-padding-mobile) 0;} .product_details .main_title.mobile {display:flex;} .product_details .main_title.desktop {display:none;} .product_details .main_title H1 {display:flex; font-weight:var(--title-big-weight); font-size:max(calc(var(--title-middle) - 8px), 22px); color:var(--title-big-white); margin-bottom:24px; flex-wrap:wrap;} .sku {display:flex; margin:-16px 0 8px 0; font-size:calc(var(--text-small) - 2px); opacity:.6;} .sku Span {margin:0 6px 0 0;} .product_details .main_box {display:flex; flex-direction:column; width:100%; gap:16px;} .product_gallery {padding:8px; background:var(--white); border-radius:var(--border-radius-tile); position:relative; box-shadow:0 4px 20px rgba(0, 0, 0, 0.05);} .product_gallery .statuses_place {top:16px; left:16px;} /* --- Gallery - Product catalog --- */ .gallery_main {display:flex; flex-direction:column;} .gallery_main.swiper {display:flex; flex-direction:row; width:100%; overflow:hidden; position:relative; aspect-ratio:var(--ratio); padding:0 0 24px 0;} .gallery_item {display:flex; align-items:center; justify-content:center; width:100%; height:auto; aspect-ratio:var(--ratio); margin-bottom:24px;} .gallery_item.swiper-slide {flex:0 0 100%; width:100%; display:none;} .gallery_item.swiper-slide:first-child, .gallery_main.swiper-initialized .swiper-slide {display:flex;} .gallery_item:last-child {margin-bottom:0;} .gallery_item Img {display:block; max-width:var(--data-max-width); max-height:var(--data-max-height); object-fit:contain; font-size:0; width:100%; height:100%; border-radius:var(--border-radius-tile) var(--border-radius-tile) 0 0;} /* --- If Swiper - Gallery - Product catalog --- */ .product_details .swiper-counter {bottom:-2px;} .product_details .swiper-wrapper {padding:0;} .product_details .swiper-thumbs.swiper {display:none;} /* --- Main Info - Product catalog --- */ .main_info {display:flex; flex-direction:column; background:var(--white); padding:16px 8px; width:calc(100% + var(--margin-lt-rt-twice)); margin:0 0 0 var(--margin-lt-rt-minus); box-shadow:0 4px 20px rgba(0, 0, 0, 0.05);} .main_info .sku {display:none;} .main_info .for_price {display:flex; align-items:center; justify-content:space-between;} .main_info .for_price + Article {margin:16px 0 0 0;} .main_info .product_price .price {font-size:calc(var(--title-middle) - 3px);} .main_info .product_price .old_price {font-size:var(--text-common);} .main_info Article {padding:0;} /* --- Description & Chars - Product catalog --- */ .chars {display:flex; flex-direction:column; background:var(--white); width:calc(100% + var(--margin-lt-rt-twice)); margin:var(--section-padding-mobile) 0 0 var(--margin-lt-rt-minus); padding:16px 8px; box-shadow:0 4px 20px rgba(0, 0, 0, 0.05);} .all_chars {display:flex; flex-direction:column;} .all_chars Div {display:flex;} .all_chars .tit {padding:8px 16px 0 0; margin:0 0 8px 0; display:flex; width:40%; word-break:break-word; font-size:var(--text-common); position:relative; flex-grow:1; overflow:hidden;} .all_chars .tit Span {flex-shrink: 0; padding-right:8px;} .all_chars .tit::after {content:''; border-bottom:1px dotted var(--border-color-dark); flex-grow:1; margin-bottom:4px; min-width:20px;} .all_chars .value {margin:0 0 8px 0; display:inline-flex; word-break:break-word; position:relative; width:60%; padding:8px 0 0 0; font-size:calc(var(--text-common) - 1px); flex-shrink:0; text-align:right;} .footer_description {padding-bottom:0;} /* --- If Inner Dark - Product catalog --- */ .inner_dark .product_gallery, .inner_dark .main_info, .inner_dark .chars {background:var(--item-bg-dark);} .inner_dark .main_info H1, .dark.product_details .main_title H1 {color:var(--title-big-dark);} .inner_dark .main_info H2, .inner_dark .chars H2 {color:var(--title-middle-dark);} .inner_dark .main_info .sku, .dark .sku {color:var(--text-dark);} .inner_dark .main_info Article {color:var(--text-dark);} .inner_dark .all_chars {color:var(--text-dark);} .inner_dark .all_chars .tit::before {border-color:var(--border-color-white);} /* --- If Dark & Inner Light - Product catalog --- */ .dark.inner_light .main_info H1 {color:var(--title-big-white);} .dark.inner_light .main_info H2, .dark.inner_light .chars H2 {color:var(--title-middle-white);} .dark.inner_light .main_info .sku {color:var(--text-white);} .dark.inner_light .main_info Article {color:var(--text-white);} /* --- FOOTER ------------------------------------------------------------------------------------ */ .footer {background:var(--bg-color-white); color:var(--text-white);} .footer .container {display:flex; flex-direction:column;} /* --- Footer Menu --- */ .bottom_menu {width:100%; background:var(--bg-color-white);} .bottom_menu .container {padding:0;} /* --- Delay for 1st level - Footer Menu --- */ .in_view .bottom_menu > UL.menu > LI:nth-child(1) > A {transition-delay:0.07s;} .in_view .bottom_menu > UL.menu > LI:nth-child(2) > A {transition-delay:0.14s;} .in_view .bottom_menu > UL.menu > LI:nth-child(3) > A {transition-delay:0.21s;} .in_view .bottom_menu > UL.menu > LI:nth-child(4) > A {transition-delay:0.28s;} .in_view .bottom_menu > UL.menu > LI:nth-child(5) > A {transition-delay:0.35s;} .in_view .bottom_menu > UL.menu > LI:nth-child(6) > A {transition-delay:0.42s;} /* --- Delay for 2nd level - MENU Main --- */ .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(1) > A {transition-delay:.1s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(2) > A {transition-delay:.17s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(3) > A {transition-delay:.24s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(4) > A {transition-delay:.31s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(5) > A {transition-delay:.38s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(6) > A {transition-delay:.45s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(7) > A {transition-delay:.52s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(8) > A {transition-delay:.59s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(9) > A {transition-delay:.66s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(10) > A {transition-delay:.73s;} .bottom_menu LI.has_submenu.active > .submenu > LI:nth-child(n+11) > A {transition-delay:.80s;} .footer_top {display:flex; flex-direction:column; margin:16px 0 8px 0;} .bot_logo {display:flex; margin:0 0 16px 0; justify-content:center; align-items:center; max-width:unset;} .bot_logo .logo {max-width:272px;} .footer_top .info_box {padding:0;} .footer_top .phone_container, .footer_top .info_box .one_box:last-child {flex-direction:row; order:-1; margin:0 0 24px 0;} .footer_top .info_box .it_box {display:flex; flex-direction:column;} .footer_top .info_box .phone_container .info_text {margin:0;} .footer_top .mob_phones_list {display:flex; flex-direction:column;} .footer_top .mob_phones_list LI:not(:first-child) {margin:4px 0 0 26px;} .footer_top .phone_container .call_us {width:auto; height:auto; color:var(--link-white);} .footer_top .mob_phones_list LI:not(:first-child) .svg_icon {display:none;} .footer_top .phone_container .call_us Span {display:flex; width:100%; padding:0 0 0 16px;} .footer_top .phone_container .write_us {display:flex; font-weight:var(--text-middle-weight); margin:4px 0 0 42px; color:var(--link-white); font-size:var(--text-middle);} .footer_top .info_box .info_text A.map {color:var(--link-white);} .mob_social {display:flex;} .mob_social.desktop {display:none;} .mob_social UL.social_list {display:flex;} UL.social_list LI:not(:last-child) {margin:0 6px 0 0;} UL.social_list .btn {width:42px; box-shadow:0 0 2px rgba(0,0,0,.3);} UL.social_list .btn:hover {box-shadow:0 6px 20px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05);} UL.social_list .btn Span {padding:0;} .footer_bottom {display:flex; flex-direction:column; font-size:14px; background:var(--img-bg); color:var(--text-middle-dark)} .footer_bottom .ui_row {padding:8px 0;} .footer_bottom .ui_row:first-child {padding:8px 0 0 0;} .footer_bottom .ui_row:only-child {padding:8px 0;} .footer_bottom .ui_row:first-child .profile_link {display:none;} .footer_bottom .ui_row:last-child .profile_link {display:flex; margin:0 16px 0 0; align-items:center;} .footer_bottom .ui_row:only-child .profile_link {display:none;} .footer_bottom .profile_link Span {display:flex; margin:0 6px;} .footer_bottom .copyright {margin:0 16px 0 0;} .footer_bottom .rest {display:flex;} .footer_bottom .lang {display:flex;} .footer_bottom .lang LI:not(:last-child) {margin:0 8px 0 0;} .footer_bottom .lang LI.active A {color:var(--link-white); pointer-events:none;} /* --- Captcha policy in footer --- */ .grecaptcha-badge {visibility:hidden; opacity:0; pointer-events:none;} .google_captcha_info {display:none;} .captcha_here .google_captcha_info {display:flex; font-size:12px; padding:8px 0;} .google_captcha_info .policy {display:inline; color:var(--gray-light);} .google_captcha_info .policy A {text-decoration:underline;} /* --- If inner_dark - FOOTER --- */ .inner_dark .footer_bottom {background:var(--item-bg-dark);} /* --- If dark - FOOTER --- */ .dark.footer {background:var(--bg-color-dark); color:var(--text-dark);} .dark .footer_top .phone_container .call_us {color:var(--link-dark);} .dark .google_captcha_info .policy {color:var(--text-dark); opacity:.6;} .dark.footer .info_box .info_text A.map, .dark.footer .phone_container .write_us {color:var(--link-dark); opacity:.6;} .dark.footer .info_box .info_text A.map:hover, .dark.footer .phone_container .write_us:hover {opacity:1;} /* --- Старі стилі - перевірити --- */ .container.publication.page_publication .product_gallery, .container.publication.page_publication .gallery_nav {max-width: var(--data-max-width); margin-left: auto; margin-right: auto;} .catalog .fig_bottom {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 24px;} .catalog .fig_title {margin-top: 0; margin-bottom: 6px; word-break: break-word; color: var(--block-title-big-white);} .catalog FIGCAPTION {display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 10px 10px 10px;} .catalog FIGCAPTION .date {margin: 0 0 6px auto; font-size: 12px; opacity: 0.5;} .catalog FIGCAPTION .author_name {margin: 0 0 6px 0; font-size: 12px;} .tile {display: flex; justify-content: center; flex-wrap: wrap; width: calc(100% + 8px); margin-left: -4px;} .tile .item {display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 calc(100% - 16px); margin: 0 4px 8px 4px;} .tile.cols_mobile_2 .item {flex: 0 0 calc((100% / 2) - 8px);} .tile.cols_mobile_3 .item {flex: 0 0 calc((100% / 3) - 8px);} /* --- Items Dark --- */ .inner_dark .item {color:var(--text-dark); background:var(--item-bg-dark);} .inner_dark .item .fig_title, .inner_dark .item .fig_sub_title {color:var(--text-dark);} .group_message {display:block; font-size:var(--text-small); font-weight:var(--text-small-weight); color:var(--text-small-white); margin-top:4px;} .group_message.error {color:var(--error);} .group_message.success {color:var(--success);} .fig_title {font-size:var(--block-title-big); margin-top:25px; font-weight:bold; color:var(--block-title-big-white);} .fig_sub_title {margin-top:12px; font-size:var(--text-middle); font-weight:var(--text-middle-weight); color:var(--text-middle-white); word-break:break-word;} div.error { border: 1px solid var(--error); } /* МИ ПРОПОНУЄМО */ .we_offer .item { color: var(--text-white); background: var(--item-bg-white); } .we_offer .item img { font-size: 0; height: 256px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* МИ ПРОПОНУЄМО ТЕМНИЙ */ .we_offer.dark { color: var(--text-dark); background: var(--bg-color-dark); } .inner_dark .item { color: var(--text-dark); background: var(--item-bg-dark); } .inner_dark .fig_title { color: var(--text-dark); } /* ПРИКЛАДИ РОБІТ */ .our_work .item { margin: 0 10px; color: var(--text-white); background: var(--item-bg-white); } .our_work.radius .item { margin: 0 12px 10px 12px; } .our_work .item figure img { font-size: 0; height: 375px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .our_work .fig_title { font-size: calc(var(--block-title-big) - 2px);; padding: 0 10px; } /* ПРИКЛАДИ РОБІТ ТЕМНИЙ */ .our_work.dark { color: var(--text-dark); background: var(--bg-color-dark); } .inner_dark .item { color: var(--text-dark); background: var(--item-bg-dark); } .inner_dark .fig_title { color: var(--text-dark); } /* ДОДАТКОВІ ПОСЛУГИ */ .add_services_table_wrap { width: 100%; position: relative; } .add_services_table { min-width: 1110px; background-color: #fff; padding: 14px 14px 0px; } .add_services.radius .add_services_table { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .table_row { background-color: #F4F4F4; display: flex; align-items: center; height: 50px; padding: 0 10px 0 25px; } .table_row:not(:last-child) { margin-bottom: 7px; } .table_row > td { color: #282828; font-weight: bold; font-size: var(--text-common); min-width: 142px; } .table_row > td.checkbox { min-width: 60px; } .table_row thead th { width: 100%; max-width: 355px; flex-shrink: 0; } .table_row input { width: 60px; height: 27px; padding-left: 0; background: transparent; text-align: center; color: #282828; } .table_title_row { background-color: transparent; } .table_title_row > div { color: #727272; font-weight: normal; } .table_title_row > div:last-child { min-width: 60px; text-align: center; } .table_row_bottom { align-items: flex-start; justify-content: space-between; flex-wrap: wrap; background-color: #fff; height: auto; padding: 10px; } .radius .table_row_bottom { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .table_row_bottom div.top_part { width: 100%; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; } .table_row_bottom .top_part a { line-height: 1.2; color: #F3234A; text-align: center; width: 100%; font-size: var(--text-common); font-weight: 300; border-bottom: 1px solid; width: max-content; margin: 0 50%; white-space: nowrap; } .table_row_bottom .top_part span { font-size: var(--text-common); color: #727272; margin: 15px 0; } .table_row_bottom .top_part .total_sum { font-size: 24px; font-weight: bold; color: #282828; margin: 15px 0 9px 15px; } .table_row_bottom a.btn { margin: 0 auto; width: 180px; font-weight: bold; } /* ДОДАТКОВІ ПОСЛУГИ ТЕМНИЙ */ .add_services.dark { color: var(--text-dark); background: var(--bg-color-dark); } .inner_dark .add_services_table { color: var(--text-dark); background: var(--item-bg-dark); } .inner_dark .table_row.table_title_row { background-color: transparent; } .inner_dark .table_row.table_title_row > div { color: #727272 } .inner_dark .table_row { background-color: #1F202E; color: var(--text-dark); } .inner_dark .table_row > td { color: var(--text-dark); } .inner_dark .table_row input { color: #fff; border-color: #57596E; } .inner_dark .table_row_bottom { color: var(--text-dark); background: var(--item-bg-dark); } .inner_dark .table_row_bottom .top_part .total_sum { color: var(--text-dark); } .inner_dark .table_row_bottom .top_part a { color: var(--link-dark); } .inner_dark .table_row_bottom a.btn { color: var(--btn-text-dark); background-color: var(--btn-bg-dark); } .publications_swiper.swiper { width: calc(100% + 20px); margin-left: -10px; padding: 10px; } /*--- one left four rght ---*/ .one_left-four_rght { display: flex; flex-direction: column; } .one_left-four_rght > .col:nth-child(1) { margin-bottom: 16px; } .catalog .one_left-four_rght > .col:nth-child(1) .item figure img { height: auto; margin-bottom: 0; } .catalog .one_left-four_rght > .col:nth-child(1) figcaption { padding: 0 10px 20px 10px; width: 100%; position: absolute; bottom: 0; left: 0; } .catalog .one_left-four_rght > .col:nth-child(1) .fig_title { text-decoration: none; color: var(--block-title-small-dark); font-size: 14px; font-weight: 700; } .catalog .one_left-four_rght > .col:nth-child(1) .fig_title a { text-decoration: none; color: var(--block-title-small-dark); } .inner_dark .one_left-four_rght > .col:nth-child(1) .fig_title a { color: var(--block-title-small-white); } .catalog .one_left-four_rght > .col:nth-child(1) .fig_sub_title { margin-top: 0; color: var(--text-middle-dark); } .inner_dark .one_left-four_rght > .col:nth-child(1) .fig_sub_title { color: var(--text-middle-white); } .catalog .one_left-four_rght > .col:nth-child(1) .fig_bottom { padding-top: 12px; } .catalog .one_left-four_rght > .col:nth-child(1) .btn { color: var(--btn-text-dark); background-color: var(--btn-bg-dark); } .inner_dark .one_left-four_rght > .col:nth-child(1) .btn { color: var(--btn-text-white); background-color: var(--btn-bg-white); } .one_left-four_rght > .col:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .catalog .one_left-four_rght > .col:nth-child(2) .item figure img { height: auto; margin-bottom: 8px; } .catalog .one_left-four_rght > .col:nth-child(2) figcaption { padding: 0 8px 8px 8px; } .catalog .one_left-four_rght > .col:nth-child(2) .fig_title { text-decoration: none; color: var(--block-title-small-white); font-size: 14px; font-weight: 700; } .catalog .one_left-four_rght > .col:nth-child(2) .fig_title a { text-decoration: none; color: var(--block-title-small-white); } .inner_dark .one_left-four_rght > .col:nth-child(2) .fig_title { text-decoration: none; color: var(--block-title-small-dark); font-size: 14px; font-weight: 700; } .inner_dark .one_left-four_rght > .col:nth-child(2) .fig_title a { text-decoration: none; color: var(--block-title-small-dark); } .catalog .one_left-four_rght > .col:nth-child(2) .fig_sub_title { margin-top: 0; } .catalog .one_left-four_rght > .col:nth-child(2) .fig_bottom { padding-top: 12px; } .catalog .one_left-four_rght > .col:nth-child(2) a.btn { min-height: 32px; } /* --- four horizontal eight above --- */ .four_horizontal-eight_above { display: flex; flex-direction: column; } .four_horizontal-eight_above > .col:nth-child(1) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .four_horizontal-eight_above > .col:nth-child(1) .item figure img { height: auto; } .catalog .four_horizontal-eight_above > .col:nth-child(1) figcaption { padding: 0 8px 8px 8px; } .catalog .four_horizontal-eight_above > .col:nth-child(1) .fig_title { text-decoration: none; color: var(--block-title-small-white); font-size: 14px; font-weight: 700; } .catalog .four_horizontal-eight_above > .col:nth-child(1) .fig_title a { text-decoration: none; color: var(--block-title-small-white); } .inner_dark .four_horizontal-eight_above > .col:nth-child(1) .fig_title { text-decoration: none; color: var(--block-title-small-dark); font-size: 14px; font-weight: 700; } .inner_dark .four_horizontal-eight_above > .col:nth-child(1) .fig_title a { text-decoration: none; color: var(--block-title-small-dark); } .catalog .four_horizontal-eight_above > .col:nth-child(1) .fig_sub_title { margin-top: 0; } .catalog .four_horizontal-eight_above > .col:nth-child(1) .fig_bottom { padding-top: 12px; } .catalog .four_horizontal-eight_above > .col:nth-child(1) a.btn { min-height: 32px; } .catalog .four_horizontal-eight_above > .col:nth-child(2) { display: grid; gap: 16px; } .catalog .four_horizontal-eight_above > .col:nth-child(2) figure { flex-direction: row; } .catalog .four_horizontal-eight_above > .col:nth-child(2) figure > a { flex: 0 0 75px; } .catalog .four_horizontal-eight_above > .col:nth-child(2) .item figure img { margin-bottom: 0; height: 100%; aspect-ratio: auto !important; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .catalog .four_horizontal-eight_above > .col:nth-child(2) figcaption { padding: 8px; } .catalog .four_horizontal-eight_above > .col:nth-child(2) .fig_title { text-decoration: none; color: var(--block-title-small-white); font-size: 14px; font-weight: 700; } .inner_dark .four_horizontal-eight_above > .col:nth-child(2) .fig_title { color: var(--block-title-small-dark); } .catalog .four_horizontal-eight_above > .col:nth-child(2) .fig_title a { text-decoration: none; color: var(--block-title-small-white); } .inner_dark .four_horizontal-eight_above > .col:nth-child(2) .fig_title a { color: var(--block-title-small-dark); } .catalog .four_horizontal-eight_above > .col:nth-child(2) .fig_sub_title { margin-top: 0; } .catalog .four_horizontal-eight_above > .col:nth-child(2) .fig_bottom { padding-top: 8px; } .catalog .four_horizontal-eight_above > .col:nth-child(2) a.btn { min-height: 32px; padding-left: 12px; padding-right: 12px; margin: 0; width: auto; } /* --- three col --- */ .catalog .three_col { display: flex; flex-direction: column; } .catalog .three_col > .col:nth-child(2) { display: flex; flex-direction: column; order: -1; margin-bottom: 30px; } .catalog .three_col > .col:nth-child(2) .item { flex: 0 1 auto; margin-bottom: 10px; } .catalog .three_col > .col:nth-child(2) .item figure { flex: 0 1 auto; } .catalog .three_col > .col:nth-child(2) .item:nth-child(1) figure img { aspect-ratio: 4 / 3 !important; height: auto; margin-bottom: 16px; } .catalog .three_col > .col:nth-child(2) .item:nth-child(1) .fig_title { font-size: 16px; margin-bottom: 10px; } .catalog .three_col > .col:nth-child(2) .item:nth-child(1) .fig_title a { font-size: 16px; text-decoration: none; color: var(--texct-common-white); } .catalog .three_col > .col:nth-child(2) .item:nth-child(1) .fig_sub_title { margin-top: 0; } .catalog .three_col > .col:nth-child(2) .item:nth-child(1) .fig_bottom { padding-top: 12px; } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) figure { flex-direction: row; min-height: 116px; } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) figure > a { flex: 0 0 50%; align-self: stretch; display: block; position: relative; } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) figure img { display: block; margin-bottom: 0; height: 100%; position: absolute; top: 0; left: 0; aspect-ratio: auto !important; } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) figcaption { padding: 8px; } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) .fig_title { font-size: 12px; margin-bottom: 8px; } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) .fig_title > a { text-decoration: none; color: var(--texct-common-white); } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) .fig_sub_title { font-size: 12px; margin-top: 0; } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) .fig_bottom { padding-top: 8px; } .catalog .three_col > .col:nth-child(2) .item:not(:nth-child(1)) a.btn { font-size: var(--text-small); min-height: 32px; width: auto; margin-left: 0; padding: 5px 20px; } .catalog .three_col > .col:nth-child(1) { margin-bottom: 30px; } .catalog .three_col > .col:nth-child(1), .catalog .three_col > .col:nth-child(3) { position: relative; display: flex; overflow-x: auto; margin: 0 -10px 0 0 ; padding-top: 40px; padding-bottom: 10px; width: calc(100% + 10px); } .catalog .three_col > .col:nth-child(1)::before, .catalog .three_col > .col:nth-child(3)::before { content: ""; width: 24px; height: 24px; position: absolute; top: 0; right: 10px; background-image: url(./../images/swipe.svg); background-size: contain; background-repeat: no-repeat; } .catalog .three_col > .col:nth-child(1) .item, .catalog .three_col > .col:nth-child(3) .item { width: 220px; flex: 0 0 220px; margin-right: 10px; } .catalog .three_col > .col:nth-child(1) figure > a, .catalog .three_col > .col:nth-child(3) figure > a { display: none; } .catalog .three_col > .col:nth-child(1) .statuses_place, .catalog .three_col > .col:nth-child(3) .statuses_place { position: relative; flex-direction: row; flex-wrap: wrap; top: unset; left: unset; padding: 8px 8px 0 8px; } .catalog .three_col > .col:nth-child(1) .status-block { margin: 0 8px 8px 0; } .catalog .three_col > .col:nth-child(1) .status-block + .status-block, .catalog .three_col > .col:nth-child(3) .status-block + .status-block { margin-top: 0; } .catalog .three_col > .col:nth-child(1) figcaption, .catalog .three_col > .col:nth-child(3) figcaption { padding: 8px; } .catalog .three_col > .col:nth-child(1) .fig_title, .catalog .three_col > .col:nth-child(3) .fig_title { font-size: 12px; margin-bottom: 8px; } .catalog .three_col > .col:nth-child(1) .fig_title > a, .catalog .three_col > .col:nth-child(3) .fig_title > a { text-decoration: none; color: var(--texct-common-white); } .catalog .three_col > .col:nth-child(1) .fig_sub_title, .catalog .three_col > .col:nth-child(3) .fig_sub_title { font-size: 12px; margin-top: 0; } .catalog .three_col > .col:nth-child(1) .fig_bottom, .catalog .three_col > .col:nth-child(3) .fig_bottom { display: none; padding-top: 8px; } .catalog .three_col > .col:nth-child(1) .fig_bottom a.btn, .catalog .three_col > .col:nth-child(3) .fig_bottom a.btn { font-size: var(--text-small); min-height: 32px; width: auto; margin-left: 0; padding: 5px 20px; } /* ------------ new styles ------------------ */ /* ВХІД */ .profile { margin-bottom: 80px; } .auth_form { max-width: 400px; margin: 0 auto; } .auth_form .H2 { text-align: center; } /* --- 404 --- */ .page_404 { padding: 50px 0 100px 0; } .text_404_num { font-size: 70px; line-height: 1.2; text-align: center; margin-bottom: 20px; font-weight: 600; } .text_404_title { text-align: center; font-size: 22px; line-height: 1.2; margin-bottom: 12px; } .subtitle_404 { display: block; text-align: center; font-size: 18px; margin-bottom: 12px; } .links_404_title { display: flex; flex-direction: column; align-items: center; justify-content: center; } .links_404_title .btn { width: 300px; margin-top: 8px; } .support { padding: 50px 0; position: relative; } .support .container { display: flex; flex-direction: column; position: unset; } .support .container > .col:nth-child(1) { z-index: 1; } .support_list { margin-bottom: 30px; } .support_list li { color: var(--text-white); display: flex; flex-direction: column; padding: 8px 8px 8px 44px; position: relative; background: var(--item-bg-white); border-radius: 8px; } .support_list li + li { margin-top: 12px; } .support_icon { position: absolute; top: 8px; left: 8px; display: block; width: 30px; height: 30px; object-fit: contain; } .support_name { font-size: var(--block-title-big); line-height: 1.2; font-weight: 700; margin-bottom: 8px; } .support_text { font-size: var(--text-common); } .support_big-img { width: auto; max-width: 100%; margin-left: auto; border-radius: 8px; } .support.dark { color: var(--text-dark); background: var(--bg-color-dark); } .inner_dark .support_list li { color: var(--text-dark); background: var(--item-bg-dark); } .support.bg_full-100 > .container > .col:nth-child(1) { display: none; } .support.bg_full-100 .support_big-img { position: relative; width: 100%; height: auto; object-fit: cover; border-radius: 8px; } .support.bg_full-75 > .container > .col:nth-child(1) { display: none; } .support.bg_full-75 .support_big-img { position: relative; width: 75%; margin: 0 auto; height: auto; object-fit: cover; border-radius: 8px; } /* --- dropdown --- */ .dropdown { position: relative; height: 44px; border: 1px solid var(--border-color-white); transition: width 0.3s; } .dropdown_short { width: 68px; height: 30px; margin: 0 20px; color: #1d1d1d; } .dropdown_short:hover .drop_arrow { background-color: #5ead5a; } .dropdown.dropdown-open { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .dropdown.dropdown_short.dropdown-open { width: 68px; } .dropdown .overflow { width: 100%; height: 100%; padding: 0 40px 0 0; background-color: #fff; position: relative; float: left; } .dropdown.short .overflow { width: 138px; } .dropdown.dropdown-open .overflow { z-index: 10; } .dropdown Span { color: var(--text-common); font-weight: var(--text-common-weight); font-size: 15px; line-height: 1.2; cursor: pointer; height: 100%; padding: 0 20px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; white-space: nowrap; z-index: 2; } .dropdown_short Span { padding: 0 10px; } .dropdown UL { position: absolute; top: 40px; right: -1px; left: -1px; max-height: 350px; background: #fff; border: 1px solid #d7d7d7; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); z-index: 4; margin: 0; border-top: none; overflow-y: auto; display: none; } .dropdown_short ul { border: 1px solid #d7d7d7; border-radius: 3px; top: 28px; overflow: auto; } .dropdown UL LI { position: relative; float: left; background: none; width: 100%; font-size: 15px; line-height: 1.2; border-top: 1px solid #d7d7d7; } .dropdown_short UL LI { border: none; } .dropdown UL LI A { width: 100%; text-decoration: none; color: #666; position: relative; float: left; padding: 11px 20px; transition: 0.3s; } .dropdown_short ul li a { color: #1d1d1d; text-align: center; padding: 6px 0; } .dropdown UL LI A:hover { background-color: #efefef; } .dropdown_short ul li a:hover { background-color: #e6e6e6; color: initial; } .dropdown UL LI A.selected { display: none; } .drop_arrow { position: absolute; right: 0; top: 0; background-color: #fff; border: none; width: 40px; height: 40px; transition: background-color 0.3s; cursor: pointer; } .drop_arrow:after { content: ""; position: absolute; left: 50%; top: 50%; margin: -3px 0 0 -5.5px; width: 0; height: 0; border-style: solid; border-width: 6px 5.5px 0 5.5px; border-color: #ccc transparent transparent transparent; transition: 0.3s; } .dropdown-open .drop_arrow:after { border-top-color: #747474; transform: rotateX(180deg); } .dropdown_short .drop_arrow { right: -1px; top: -1px; background-color: #70c46a; border-radius: 0 3px 3px 0; width: 31px; height: 30px; } .dropdown_short .drop_arrow:after { border-width: 6px 3.5px 0 3.5px; border-color: #fff transparent transparent transparent; margin-left: -3.5px; } .dropdown_alt { width: 100%; height: 50px; color: #504f4f; } .dropdown_alt span { font-size: 16px; } .dropdown_alt .drop_arrow { border-bottom-right-radius: 3px; border-top-right-radius: 3px; background-color: #73c86d; width: 50px; height: 50px; right: -1px; top: -1px; } .dropdown_alt .drop_arrow:hover { background-color: var(--main-active-color); } .dropdown_alt .drop_arrow:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 11px 8px 0 8px; border-color: #fff transparent transparent transparent; margin: -5.5px 0 0 -8px; } .dropdown_alt ul { border: none; top: calc(100% + 1px); } .dropdown_alt UL LI { font-size: 16px; border: none; } .dropdown_alt UL LI A { background-color: #f7f7f7; border-right: 1px solid #d7d7d7; border-left: 1px solid #d7d7d7; color: #504f4f; padding: 14px 20px; } .dropdown_alt UL LI + LI A { border-top: 1px solid #d7d7d7; } .dropdown_alt UL LI:last-child A { border-bottom: 1px solid #d7d7d7; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .dropdown_alt UL LI A:hover { border-color: #73c86d; } .dropdown_alt UL LI:hover + LI A { border-top-color: #73c86d; } .dropdown_alt.dropdown-open { width: initial; } .dropdown_alt.dropdown-open .drop_arrow { border-bottom-right-radius: 0; } .dropdown_sm { background-color: #fff; height: 45px; } .dropdown_sm .drop_arrow { width: 45px; height: 45px; } .dropdown_sm .drop_arrow:after { border-width: 8px 6px 0 6px; border-color: #fff transparent transparent transparent; margin: -4px 0 0 -6px; } .options_dropdown_list UL LI { position: relative; padding: 0 0 0 10px; } .options_dropdown_list UL LI:before { content: ""; width: 4px; height: 4px; background-color: #000; border-radius: 100%; position: absolute; left: 0; top: 11px; } .options_dropdown_list UL LI A { text-decoration: none; color: #117f8a; -webkit-transition: color 0.3s; transition: color 0.3s; } .options_dropdown_list UL LI A:hover { color: #000; } .options_dropdown_tile UL { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 10px 0 0 0; } .options_dropdown_tile UL LI { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; margin: 0 3px 3px 0; } .options_dropdown_tile UL LI A { text-decoration: none; background-color: #f3f3f3; color: #000; padding: 5px 10px; -webkit-transition: 0.3s; transition: 0.3s; } .options_dropdown_tile UL LI A:hover { background-color: #117f8a; color: #fff; } .options_dropdown_tile UL LI.disabled { opacity: 0.5; } .options_dropdown_tile UL LI.disabled a { cursor: default; } .options_dropdown_tile UL LI.disabled a:hover { background-color: #f3f3f3; color: #000; } .inner_dark .dropdown { border-color: var(--border-color-dark); } .inner_dark .dropdown .overflow { color: var(--text-dark); background: transparent; } .inner_dark .dropdown UL { color: var(--text-dark); border-color: var(--border-color-dark); background-color: #231d2e; } .inner_dark .dropdown UL LI { border-color: var(--border-color-dark); } .inner_dark .dropdown UL LI A { color: var(--text-dark); } .inner_dark .dropdown UL LI A:hover { background-color: #34293f; } /* Contact Button */ .contact_puls_btn {position:fixed; bottom:140px; right:23px; width:68px; height:68px; padding:0; background:var(--btn-hover-bg-dark); border-radius:50%; border:1px solid var(--border-opacity-lighter); cursor:pointer; overflow:visible; transition:opacity .3s, transform .4s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s ease; z-index:8; display:flex; align-items:center; justify-content:center; opacity:1; visibility:visible; box-shadow:0 10px 30px color-mix(in srgb, var(--btn-bg-dark), transparent 50%);} .contact_puls_btn.at_footer {opacity:0; visibility:hidden; overflow:hidden;} .contact_puls_btn:hover {box-shadow:0 15px 40px color-mix(in srgb, var(--btn-bg-dark), transparent 50%); border-color:var(--white);} .contact_puls_btn::before {content:''; position:absolute; inset:0; background:radial-gradient(circle at center, color-mix(in srgb, var(--btn-bg-dark), white 30%) 0%, transparent 75%); border-radius:50%; opacity:0; transition:opacity .4s ease; z-index:0;} .contact_puls_btn:hover::before {opacity:1;} .cpb_pulse {position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; background:transparent; border:.5px solid color-mix(in srgb, var(--btn-bg-dark), white 20%); animation:cpb_silk_flow_1 6s linear infinite; will-change:transform, opacity, border-radius; transition:opacity .4s ease, border-color .4s ease;} .cpb_pulse:nth-of-type(2) {animation:cpb_silk_flow_2 9s linear infinite; animation-delay:-3s; border-color:color-mix(in srgb, var(--btn-bg-dark), black 25%); border-width:.8px; filter:blur(.8px); opacity:.35;} .cpb_icons {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:46px; height:46px; border-radius:50%; overflow:hidden; z-index:2; animation:cpb_logic_icons 6s infinite; opacity:0; -webkit-backdrop-filter:var(--popup-transparency-effect); backdrop-filter:var(--popup-transparency-effect); box-shadow:inset 0 0 10px rgba(0,0,0,0.2); display:flex; align-items:center; transition:transform .4s cubic-bezier(.175, .885, .32, 1.275), opacity .3s ease;} .cpb_icons_line {display:flex; align-items:center; position:relative; left:11px; will-change:transform; animation:cpb_icons_slide 6s steps(1) infinite;} .cpb_icons_line .icon {width:24px; height:24px; margin-right:44px; flex-shrink:0; fill:var(--white); filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));} .cpb_label {position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:3; font-size:9px; color:var(--white); text-transform:uppercase; font-weight:var(--title-big-weight); line-height:1.4; transition:transform .4s cubic-bezier(.175, .885, .32, 1.275), opacity .3s ease; animation:cpb_logic_label 6s infinite;} .cpb_label .icon {width:24px; height:24px; margin-bottom:4px; fill:var(--white);} .cpb_close {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:rotate(-90deg) scale(.5); transition:opacity .4s ease, transform .5s cubic-bezier(.175, .885, .32, 1.275);} .cpb_close::before, .cpb_close::after {content:''; position:absolute; width:0; height:3px; background:var(--black); border-radius:var(--border-radius-btn); transition-delay:.1s; transition:transform .4s cubic-bezier(.175, .885, .32, 1.275), width .4s ease;} .cpb_close::before, .cpb_close::after {transform:rotate(0deg);} .contact_puls_btn.active {background:var(--white); border-color:var(--white); transform:scale(.95);} .contact_puls_btn.active .cpb_close {opacity:1; pointer-events:all; transform:rotate(0deg) scale(1);} .contact_puls_btn.active .cpb_close::before {transform:rotate(45deg); width:24px;} .contact_puls_btn.active .cpb_close::after {transform:rotate(-45deg); width:24px;} .contact_puls_btn.active .cpb_label, .contact_puls_btn.active .cpb_icons {transform:translate(-50%, -50%) scale(0) rotate(90deg) !important; opacity:0 !important; pointer-events:none;} .contact_puls_btn.active::before, .contact_puls_btn.active .cpb_pulse {opacity:0 !important; transform:scale(0.5); transition:all .3s ease;} @keyframes cpb_icons_slide { 0%, 35% {transform:translateX(0);} 35.1%, 65% {transform:translateX(-68px);} 65.1%, 95% {transform:translateX(-136px);} 95.1%, 100% {transform:translateX(0);} } @keyframes cpb_logic_label { 0%, 30%, 100% {opacity:1; transform:scale(1); visibility:visible;} 35%, 95% {opacity:0; transform:scale(.8); visibility:hidden;} } @keyframes cpb_logic_icons { 0%, 30%, 100% {opacity:0; transform:translate(-50%, -50%) scale(.7); visibility:hidden;} 35%, 95% {opacity:1; transform:translate(-50%, -50%) scale(1); visibility:visible;} } @keyframes cpb_silk_flow_1 { 0% {transform:scale(1) rotate(0deg); opacity:0; border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;} 30% {opacity:.3;} 50% {transform:scale(1.25) rotate(180deg); border-radius:45% 55% 75% 25% / 40% 65% 35% 60%;} 100% {transform:scale(1.55) rotate(360deg); opacity:0; border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;} } @keyframes cpb_silk_flow_2 { 0% {transform:scale(1) rotate(360deg); opacity:0; border-radius:35% 65% 65% 35% / 55% 55% 45% 45%;} 40% {opacity:.25;} 60% {transform:scale(1.35) rotate(120deg); border-radius:65% 35% 40% 60% / 55% 45% 65% 35%;} 100% {transform:scale(1.65) rotate(0deg); opacity:0; border-radius:35% 65% 65% 35% / 55% 55% 45% 45%;} } /* Dropdown - Contact Button */ .cpb_dropdown {height:auto; display:flex; flex-direction:column; align-items:flex-end; position:fixed; right:30px; bottom:216px; z-index:1000; overflow:hidden; visibility:hidden; max-height:0; transition:max-height .5s ease-out;} .cpb_dropdown.show {max-height:1000px; overflow:visible; visibility:visible;} .cpb_dropdown .one_row {display:flex; justify-content:flex-end; transform:translateY(15px) rotate(2deg); opacity:0; transition:transform .4s cubic-bezier(.175,.885,.32,1.275), opacity .3s ease; margin-bottom:8px;} .cpb_dropdown.show .one_row {transform:translateY(0) rotate(0deg); opacity:1;} .cpb_dropdown.show .one_row:nth-child(1) {transition-delay:.05s;} .cpb_dropdown.show .one_row:nth-child(2) {transition-delay:.1s;} .cpb_dropdown.show .one_row:nth-child(3) {transition-delay:.15s;} .cpb_dropdown.show .one_row:nth-child(4) {transition-delay:.2s;} .cpb_dropdown.show .one_row:nth-child(5) {transition-delay:.25s;} .cpb_dropdown.show .one_row:nth-child(6) {transition-delay:.3s;} .cpb_dropdown .one_row .btn {height:36px; background:var(--btn-bg-white);} .cpb_dropdown .one_row .btn.Viber::before {background:radial-gradient(circle, var(--viber) 0%, transparent 70%);} .cpb_dropdown .one_row .btn.Telegram::before {background:radial-gradient(circle, var(--telegram) 0%, transparent 70%);} .cpb_dropdown .one_row .btn.WhatsApp::before {background:radial-gradient(circle, var(--whatsapp) 0%, transparent 70%);} .cpb_dropdown Span {order:1; font-size:12px; font-weight:500; white-space:nowrap; padding:0 12px; transition:.3s;} .cpb_dropdown .one_row .btn:hover Span {background:none; padding-right:18px;} .cpb_dropdown .one_row img, .cpb_dropdown .one_row .icon {width:18px; height:18px; margin:0 0 0 8px; order:2; transition:.3s ease; fill:var(--white);} /* --- UP Button --- */ .up_btn.btn, .up_btn.btn.active.at_footer {position:fixed; bottom:30px; right:30px; width:54px; height:54px; padding:0; background:var(--btn-bg-white); cursor:pointer; overflow:hidden; visibility:hidden; border-radius:var(--border-radius-tile); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255, 255, 255, 0.05); opacity:0; box-shadow:0 4px 10px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.5); transform:translateY(150px) scaleX(.5) scaleY(1.8); color:var(--white); z-index:8; transition:all .8s cubic-bezier(.175, .885, .32, 1.275);} .up_btn.btn.active {opacity:1; visibility:visible; transform:translateY(0) scale(1); border-radius:calc(var(--border-radius-tile) * 2);} .btn_glass {position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.15) 0%, transparent 80%); opacity:0; transition:opacity .4s ease; pointer-events:none; z-index:1; mix-blend-mode:overlay;} .up_btn.btn:hover .btn_glass {opacity:1;} .arrow_icon {width:24px; height:24px; position:relative; z-index:3; filter:drop-shadow(0 0 5px rgba(255,255,255,.2)); pointer-events:none; opacity:0; transform:translateY(15px); transition:transform .4s cubic-bezier(0.2, 1, .3, 1), opacity .4s ease;} .up_btn.btn.active .arrow_icon {opacity:1; transform:translateY(0);} .up_btn.btn:hover {background:var(--btn-bg-white); border-color:rgba(255, 255, 255, .2); box-shadow:0 30px 60px rgba(0, 0, 0, .6), inset 1px 1px 0 rgba(255, 255, 255, .4), inset -1px -1px 0 rgba(0, 0, 0, .9), inset 6px 6px 15px rgba(255, 255, 255, .1);} .up_btn.btn:hover .arrow_icon {animation:arrow_pulse_up 1.5s ease-in-out infinite; filter:brightness(1.8) drop-shadow(0 0 12px #fff);} @keyframes arrow_pulse_up { 0%, 100% {transform:translateY(0);} 50% {transform:translateY(-6px);} } .up_btn.btn:active {transform:scale(.95); box-shadow:0 5px 15px rgba(0, 0, 0, .4), inset 2px 2px 6px rgba(0, 0, 0, .8), inset -1px -1px 2px rgba(255, 255, 255, .1); transition:.1s;} /* --- Consent popup --- */ .consent_popup {display:flex; flex-direction:column; max-width:800px; width:calc(100% - 48px); padding:16px; background:var(--white); border-radius:var(--border-radius-tile); position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(150px); opacity:0; visibility:hidden; transition:cubic-bezier(0.2, 0, 0.2, 1) .4s; z-index:99; border:1px solid rgba(0,0,0,.1); box-shadow:0 15px 35px rgba(0,0,0,.1), 0 5px 15px rgba(0,0,0,.05);} .consent_popup.active {transform:translateX(-50%) translateY(0); opacity:1; visibility:visible;} .consent_popup::before, .consent_popup::after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; border:2px solid #FFFFFF; border-radius:12px; pointer-events:none; z-index:-1; opacity:0;} .consent_popup.active::before {animation:rippleOut 3s ease-out infinite;} .consent_popup.active::after {animation:rippleOut 4.5s ease-out 1.5s infinite;} .consent_box {display:flex; flex-direction:column; margin:0 0 12px 0;} .consent_message {display:inline; margin:0 0 8px 0;} .consent_accept {display:flex;} .consent_accept .btn {width:100%;} .consent_popup .link {width:max-content; opacity:.6;} @keyframes rippleOut { 0% {transform:scale(1); opacity:.6; border-width:2px;} 50% {opacity:.3; border-width:1px;} 100% {transform:scale(1.1, 1.4); opacity:0; border-width:0;} } /* --- OLD - CHECK --- *//* --- Popup --- */ .popup .popup_title {text-transform:uppercase; font-size:var(--block-title-big); line-height:1.2; font-weight:900; color:var(--text-white); text-align:center; display:flex; align-items:center; justify-self:center; margin-bottom:20px;} .popup img[alt]::after, .popup img[data-lazy]::after {background-color:transparent;} .inner_dark .gallery-details__inner img {background:transparent;} .form_phones {display:flex; align-items:center; justify-content:start;} .form_phones.align_center {justify-content:center;} .form_phones.align_right {justify-content:end;} .inner_dark .form_phones .svg_icon {fill:var(--icon-dark);} .form_phones .popup_icon-text {margin:9px 0;} .popup_icon-text {margin-bottom:18px; display:flex; justify-content:center;} .inner_dark .popup_icon-text {color:var(--text-dark);} .popup.dark .popup_icon-text svg {fill:#fff;} .inner_dark .popup_icon-text svg {fill:var(--icon-dark);} .popup .popup_subtitle {font-size:var(--block-title-small); line-height:1.2; color:var(--text-white); text-align:center; display:flex; align-items:center; justify-self:center; margin-bottom:25px;} .popup.dark .popup_title {color:var(--text-dark);} .popup.dark .popup_subtitle {color:var(--text-dark);} .mobile_contacts_popup a.call_us {margin-bottom:12px; display:flex;} .success_popup .popup_inner {display:flex;} .success_popup .svg_icon {fill:#09C500;} .form_bottom-message {font-size:12px; color:#727272; display:flex; align-items:center; justify-content:center;} .form_bottom-message .svg_icon {fill:#09C500;} .popup.dark .dropdown {border:1px solid var(--border-color-dark);} .popup.dark .dropdown .overflow {background-color:transparent;} .popup_inner.invite_popup {max-width:480px;} .popup_inner.invite_popup .invite_text {font-weight:400;} .popup_inner.invite_popup .socials {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:12px;} .popup_inner.invite_popup .social_button {display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:8px; transition:opacity .3s ease, transform .3s ease;} .popup_inner.invite_popup .social_button:hover {opacity:.7;} .popup_inner.invite_popup .social_button img {display:block; width:100%; height:100%; object-fit:contain; object-position:center;} /* --- OLD - CHECK --- *//* --- MENU Main - BOX --- */ .top_menu_wrap .bottom_menu li a {border-bottom:none; padding:5px 10px;} /* --- OLD - CHECK --- *//* --- Hero - Form --- */ .form_bottom-guard { display: block; text-align: center; margin-top: 8px; font-size: var(--text-small); font-weight: var(--text-small-weight); color: var(--text-small-white);} .hero_text .title, .hero_text .subtitle, .hero_text .title_sm {text-align:left;} .inner_dark .form_bottom-guard { color: var(--text-small-dark);} .hero .error_message { margin-bottom: 12px; font-size: 14px; color: var(--icon-white); animation: error_light-color 0.2s linear 0.3s forwards;} .inner_dark .error_message { color: var(--icon-dark); animation: error_dark-color .2s linear .3s forwards;} @keyframes error_light-color { 0% {color:var(--icon-white);} 100% {color:var(--text-white);} } @keyframes error_dark-color { 0% {color:var(--icon-dark);} 100% {color:var(--text-dark);} } /* --- SEARCH FILTERS --- */ .search_filters {padding: 16px 0;} .search_box, form.search_box {display: flex;flex-direction: column;padding: 0;} form.search_box {height: auto;overflow: unset;scroll-behavior: unset;} .input_wrap {display: flex;flex-direction: column;margin-bottom: 16px;} .label_title {font-size: 14px;margin-bottom: 4px;} .input_box-wrap {position: relative;display: flex;flex-direction: column;} .input_box-wrap > .svg_icon {margin: 0;width: 22px;height: 22px;position: absolute;top: 11px;left: 8px;z-index: 11;fill: var(--icon-white);} .input_box-wrap > input[type=text], .input_box-wrap > input[type=email], .input_box-wrap > input[type=tel], .input_box-wrap > input[type=password], .input_box-wrap > input[type=date], .input_box-wrap > textarea {padding-left: 12px;padding-right: 12px;background: var(--white);border-radius: var(--border-radius-btn);border: 1px solid #d7d7d7;} .input_box-wrap > .svg_icon + input[type=text], .input_box-wrap > .svg_icon + input[type=email], .input_box-wrap > .svg_icon + input[type=tel], .input_box-wrap > .svg_icon + input[type=password], .input_box-wrap > .svg_icon + input[type=date], .input_box-wrap > .svg_icon + textarea {padding-left: 36px;} .input_box-wrap .dropdown {height: 42px;background-color: var(--white);border-radius: var(--border-radius-btn);border: 1px solid #d7d7d7;} .input_box-wrap .drop_arrow {background-color: transparent;} .input_box-wrap .dropdown .overflow {background-color: transparent;} .select_place .dropdown .overflow > Span {padding-left: 36px;} .select_place .dropdown .overflow input {padding: 0;width: 100%;min-width: 1px;background-color: transparent;border: none;} .search_filters .dropdown ul {top: 42px;z-index: 14;} .select_place .dropdown ul li a {display: flex;flex-direction: column;position: relative;min-height: 24px;} .select_place .dropdown ul li span {font-weight: 700;font-size: 14px;padding: 0;} .select_place .dropdown ul li i {font-style: normal;color: #a6a6a6;} .swich_place {display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;border-radius: 50%;background-color: #fff;border: 1px solid var(--border-color-white);margin: -13px 0 -19px calc(100% - 42px);z-index: 1;position: relative;cursor: pointer;} .swich_place .svg_icon {width: 16px;height: 16px;margin: 0;fill: #a0a0a0;transition: 0.3s;} .search_box .btn {margin-top: 8px;border: none;outline: none;cursor: pointer;} /* --- CATALOG LIST --- */ .catalog_list {padding: 32px 0;} .catalog_list .container {max-width: 850px;} .catalog_box {display: flex;flex-direction: column;} .product_item-wrap {padding: 8px;display: flex;flex-direction: column;border: 4px solid var(--border-color-white);} .catalog_list.radius .product_item-wrap {border-radius: 8px;} .product_item-wrap + .product_item-wrap {margin-top: 20px;} .product_head {display: flex;flex-direction: column;padding: 8px;margin-bottom: 16px;border: 1px solid var(--border-color-white);background: var(--item-bg-white);} .catalog_list.radius .product_head {border-radius: 8px;} .product_head .time {display: flex;align-items: center;} .product_head .time .from, .product_head .time .to {font-size: 20px;font-weight: 600;} .bus_icon {display: flex;align-items: center;justify-content: center;flex: 1 1 auto;margin: 0 8px;position: relative;} .bus_icon::before {content: "";width: 10px;height: 10px;position: absolute;top: 50%;left: 0;transform: translateY(-50%);border: 2px solid var(--icon-white);border-radius: 50%;} .bus_icon::after {content: "";width: 8px;height: 8px;border-bottom: 2px solid var(--icon-white);border-right: 2px solid var(--icon-white);position: absolute;top: 50%;right: 0;transform: translateY(-50%) rotate(-45deg);} .bus_icon .svg_icon {margin: 0;fill: var(--icon-white);width: 36px;height: 28px;} .bus_icon .dots {flex: 0 0 calc(50% - 18px);border-bottom: 2px dashed var(--icon-white);} .bus_icon .dots:nth-child(1) {flex: 0 0 calc(50% - 30px);margin: 0 4px 0 12px;} .bus_icon .dots:nth-child(3) {flex: 0 0 calc(50% - 30px);margin: 0 6px 0 4px;} .product_head .date {font-size: 12px;font-weight: 600;display: flex; margin-bottom: 4px;} .product_head .road_time {color: var(--icon-white-theme);text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1 1 auto;margin: 0 8px;} .product_head .place {font-size: 12px;display: flex;justify-content: space-between;} .product_head .place .from {flex: 0 0 50%;display: flex;flex-direction: column;padding-right: 8px;} .product_head .place .to {flex: 0 0 50%;display: flex;flex-direction: column;align-items: flex-end;padding-left: 8px;} .product_head .place span {font-weight: 600;} .product_head .place i {font-style: normal;opacity: 0.7;} .product_head .place .to span, .product_head .place .to i {text-align: end;} .passage_rout {margin-bottom: 12px;} .show_route {color: var(--icon-white);text-decoration: underline;margin-bottom: 12px;padding-left: 20px;position: relative;} .show_route::before, .show_route::after {content: "";width: 1px;height: 6px;background-color: var(--icon-white);position: absolute;top: 50%;left: 10px;transform-origin: bottom;transition: 0.3s;} .show_route::before {transform: translateY(-50%) rotate(45deg);} .show_route::after {transform: translateY(-50%) rotate(-45deg);} .show_route.active::before {transform-origin: top;transform: translateY(-50%) rotate(-45deg);} .show_route.active::after {transform-origin: top;transform: translateY(-50%) rotate(45deg);} .cities_list {margin-top: 8px;} .cities_list li {font-size: 14px;} .cities_list li + li {margin-top: 4px;} .price_box {display: flex;margin-bottom: 4px;} .price_box > .col:nth-child(1) {margin: 0 0 0 auto;} .price_box .total {font-size: 24px;font-weight: 600;} .product_item-wrap .btn {width: 100%;} .product_item-wrap .btn .svg_icon {fill: var(--btn-text-white-theme);} /* --- ORDER FORM --- */ .order_form {padding: 32px 0;} .order_form .container {display: flex;flex-direction: column;} .order_inputs {display: flex;flex-direction: column;} .order_top {display: flex;align-items: center;margin-bottom: 12px;} .order_top .svg_icon {margin: 0 12px 0 0;width: 40px;height: 40px;fill: var(--text-common-white);} .order_title {font-size: 22px;font-weight: 600;margin: 0;} .order_form .step {display: flex;flex-direction: column;padding: 8px;margin-bottom: 16px;border: 4px solid var(--border-color-white);} .order_form.radius .step {border-radius: 8px;} .stap_top {display: flex;align-items: center;margin-bottom: 8px;} .stap_top .step_number {font-size: 16px;font-weight: 600;display: flex;align-items: center;justify-content: center;margin-right: 8px;width: 30px;height: 30px;background: var(--item-bg-white);border: 1px solid var(--border-color-white);} .order_form.radius .stap_top .step_number {border-radius: 8px;} .stap_top .step_text {font-size: 18px;font-weight: 600;margin: 0;} .passenger_title {font-size: 16px;font-weight: 700;text-align: center;display: block;margin: 0 0 8px 0;width: 100%;} .user_info + .passenger_title {margin-top: 20px;} .seat-info {display: flex;flex-direction: column;margin-bottom: 8px;} .seat-info .example {font-size: 14px;margin-bottom: 4px;display: flex;align-items: center;} .seat-info .example i {margin-right: 8px;width: 30px;height: 30px;background: #1CCE8F;} .order_form.radius .seat-info .example i {border-radius: 8px;} .seat-info .example.chosen i {background: #00ABFF;} .seat-info .example.unavailable i {background: #d6d6d6;} .bus_seats-wrap {overflow-y: hidden;overflow-x: auto;} .bus_seats {display: flex;flex-direction: column;min-width: max-content;} .bus_seats .seat, .bus_seats .empty_space, .bus_seats .driver, .bus_seats .exit {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;margin: 3px;} .order_form.radius .bus_seats .seat, .order_form.radius .bus_seats .empty_space, .order_form.radius .bus_seats .exit {border-radius: 8px;} .bus_seats .exit .svg_icon {fill: var(--icon-white);margin: 0;} .bus_seats .driver .svg_icon {fill: var(--texct-common-white);margin: 0;} .bus_seats .seat {font-size: 14px;font-weight: 600;color: var(--text-common-dark);background: #1CCE8F;border: none;cursor: pointer;} .bus_seats .seat.unavailable {background: #d6d6d6;cursor: unset;} .bus_seats .seat.chosen {background: #00ABFF;} .bus_seats .row {display: flex;} .paymets_list {display: flex;flex-direction: column;} .paymets_list .radio_box + .radio_box {margin-top: 8px;} .radio_box {display: flex;position: relative;} .radio_box > input {position: absolute;top: 0;left: 0;opacity: 0;visibility: hidden;} .radio_inner {display: flex;align-items: center;padding-left: 26px;position: relative;width: 100%;cursor: pointer;} .radio_inner::before {content: "";width: 16px;height: 16px;border: 1px solid gray;border-radius: 50%;position: absolute;top: 5px;left: 4px;} .radio_inner::after {content: "";width: 10px;height: 10px;background-color: var(--icon-white);position: absolute;top: 8px;left: 7px;border-radius: 50%;opacity: 0;transition: 0.3s;} .radio_box > input:checked + .radio_inner::after {opacity: 1;} .paymets_list .radio_inner {line-height: 28px;padding: 14px 14px 14px 46px;border: 1px solid var(--border-color-white);background: var(--item-bg-white);} .order_form.radius .paymets_list .radio_inner {border-radius: 8px;} .paymets_list .radio_inner::before {top: 20px;left: 18px;} .paymets_list .radio_inner::after {top: 23px;left: 21px;} .payment_images {margin-left: auto;display: flex;} .payment_images .svg_icon {width: 28px;height: 28px;margin: 0 0 0 8px;} .order_data {display: flex;flex-direction: column;padding: 12px;border: 4px solid var(--border-color-white); } .order_form.radius .order_data {border-radius: 8px;} .order_data-title {font-size: 18px;font-weight: 600;margin-bottom: 8px;} .order_direction {display: flex;flex-direction: column;padding: 12px 12px 12px 34px;margin-bottom: 12px;min-height: 150px;background: var(--item-bg-white);border: 1px solid var(--border-color-white);position: relative;} .order_form.radius .order_direction {border-radius: 8px;} .order_direction i {position: absolute;top: 30px;left: 16px;width: 2px;height: 70px;border-right: 2px dashed var(--icon-white);} .order_direction i::before {content: "";width: 10px;height: 10px;position: absolute;top: -13px;left: -4px;border: 2px solid var(--icon-white);border-radius: 50%;} .order_direction i::after {content: "";width: 8px;height: 8px;border-bottom: 2px solid var(--icon-white);border-right: 2px solid var(--icon-white);position: absolute;bottom: -10px;right: -5px;transform: translateY(-50%) rotate(45deg);} .order_direction .city {font-size: 14px;font-weight: 600;} .order_direction * + .city {margin-top: 8px;} .order_direction .time {font-size: 14px;font-weight: 600;color: var(--icon-white);} .order_direction .station {font-size: 14px;opacity: 0.7;} .order_price {font-size: 16px;margin-bottom: 12px;} .order_price span[data-object="passagePrice"] {font-weight: 700;} .order_price span[data-object="passagePrice"] b {font-size: 24px;} .warning {font-size: 14px;color: red;font-style: normal;margin-top: 6px;} body .Zebra_DatePicker table {min-width: unset;} body .Zebra_DatePicker *, body .Zebra_DatePicker :after, body .Zebra_DatePicker :before {box-sizing: border-box !important;} body .Zebra_DatePicker {width: 340px !important;max-width: 340px !important;background-color: #fff;padding: 12px;border-radius: 12px;box-shadow: 0 2px 10px #afafaf73;transform: translate(-5px, 5px);} body .Zebra_DatePicker .dp_actions td.dp_previous, body .Zebra_DatePicker .dp_actions td.dp_next {font-size: 0;background: transparent;position: relative;height: 36px;width: 36px;} body .Zebra_DatePicker .dp_actions td.dp_previous {transform: rotate(180deg);} body .Zebra_DatePicker .dp_actions td.dp_previous::before, body .Zebra_DatePicker .dp_actions td.dp_next::before {content: "";width: 8px;height: 8px;border-bottom: 2px solid var(--icon-white);border-right: 2px solid var(--icon-white);position: absolute;top: 50%;left: 50%;right: auto;transform: translate(-50%, -50%) rotate(-45deg);transition: 0.3s;} @media (hover: hover) { body .Zebra_DatePicker .dp_actions td.dp_previous:hover::before, body .Zebra_DatePicker .dp_actions td.dp_next:hover::before {border-color: #2e2e2e;} } body .Zebra_DatePicker .dp_actions td.dp_caption {width: calc(100% - 72px);background: transparent;transition: 0.3s;} @media (hover: hover) { body .Zebra_DatePicker .dp_actions td.dp_caption:hover {color: var(--icon-white);} } body .Zebra_DatePicker .dp_body td, body .Zebra_DatePicker .dp_body th {font-weight: 400;padding: 10px 5px;border-radius: 6px;border: none;transition: 0.3s;} body .Zebra_DatePicker table {border-collapse: unset;border-radius: 0;border-spacing: 4px;} body .Zebra_DatePicker table.dp_daypicker.dp_body th {background: transparent;font-weight: 400;} body .Zebra_DatePicker .dp_body .dp_current {background: #d1d1d1;color: var(--icon-white);} body .Zebra_DatePicker .dp_body .dp_disabled {background: #f4f4f4;color: #aeaeae;} body .Zebra_DatePicker .dp_body .dp_selected {background: var(--icon-white);color: #fff;} body .Zebra_DatePicker .dp_body .dp_hover {background-color: black;} body .Zebra_DatePicker .dp_footer {margin-top: 12px;} body .Zebra_DatePicker .dp_actions td.dp_today {font-size: 16px;background: transparent;position: relative;transition: color 0.3s;} @media (hover: hover) { body .Zebra_DatePicker .dp_actions td.dp_today:hover {color: var(--icon-white);} }