/* variables */ :root { --link-white-hover: #cf0000; --link-dark-hover: #4778b3; --section-padding-mobile: 42px; --section-padding-desktop: 48px; /* --- 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; /* --- 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;} /* --- 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 {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(--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(--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(--btn-bg-white); 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(--btn-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(--btn-bg-white) 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);} /* --- 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);} 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);} Article H1, Article H2, Article H3, Article H4 {display:inline-flex;} /* --- 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);} /* --- Slick --- */ .slick-slider{position:relative;display:block;box-sizing:border-box;user-select:none;touch-action:pan-y;} .slick-slider .slick-track,.slick-slider .slick-list{transform:translate3d(0,0,0);} .slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;} .slick-list:focus{outline:none;} .slick-list.dragging{cursor:hand;} .slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;} .slick-track:before,.slick-track:after{display:table;content:'';} .slick-track:after{clear:both;} .slick-loading .slick-track{visibility:hidden;} .slick-slide{display:none;float:left;height:100%;min-height:1px;} [dir='rtl'] .slick-slide{float:right;} .slick-slide img{display:block;pointer-events:none;} .slick-slide.slick-loading img{display:none;} .slick-slide.dragging img{pointer-events:none;} .slick-initialized .slick-slide{display:block;} .slick-loading .slick-slide{visibility:hidden;} .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;} .slick-arrow.slick-hidden{display:none;} /* --- Popup --- */ .popup, .top_menu_close {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 {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 0 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:16px; 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:''; position:absolute; top:0; left:0; width:100%; height:1px; box-shadow:0 0 8px rgba(0,0,0,.6);} .popup_box .shade_2::before {top:auto; bottom:-1px;} Form {width:100%; height:100%; padding:0 var(--margin-lt-rt-twice) 32px 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 {color:var(--text-dark); background:var(--item-bg-dark);} /* --- 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 20px 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(--black);} .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:radial-gradient(circle, var(--btn-bg-dark) 0%, transparent 70%); pointer-events:none; top:var(--y, -200px); transition:opacity .4s ease; will-change:left, top; 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 20px 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(--icon-white);} .dark .btn::before, .inner_dark .btn::before, .dark.inner_dark .hero_text .btn::before {background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.4) 40%, transparent 80%);} .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 {background:rgba(255,255,255,.05);} .inner_dark .hero_text .btn:hover, .dark.inner_light .hero_form .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);} .inner_dark .hero_text .btn Span, .dark.inner_light .hero_form .btn Span {background:var(--btn-bg-white);} .inner_dark .hero_text .btn:hover Span, .dark.inner_light .hero_form .btn:hover Span {background:var(--black);} .inner_dark .hero_text .btn::before, .dark.inner_light .hero_form .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 {background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);} /* --- Light buttons --- */ .light.btn {box-shadow:0 2px 8px rgba(0,0,0,.2);} .light.btn Span {background:var(--border-color-white); color:var(--text-white);} .light.btn:hover Span {background:var(--white);} .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 {color:var(--link-white);} A.link:hover, .inner_dark .top_menu_wrap A.link:hover, Article A: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);} /* --- Animations --- */ /* --- Blur in short Section --- */ .blur, Article H1, Article H2, Article H3, Article H4 {opacity:0; filter:blur(20px); transform:translateY(30px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1);} .in_view .blur, Article H1.in_view_inner, Article H2.in_view_inner, Article H3.in_view_inner, Article H4.in_view_inner {opacity:1; filter:blur(0); transform:translateY(0);} .in_view .blur:nth-child(1), Article H1.in_view_inner {transition-delay:0s;} .in_view .blur:nth-child(2), Article H2.in_view_inner {transition-delay:0.15s;} .in_view .blur:nth-child(3), Article H3.in_view_inner {transition-delay:0.3s;} .in_view .blur:nth-child(4), Article H4.in_view_inner {transition-delay:0.45s;} /* --- Blur for Article components --- */ Article Img:not(.component_img Img), Article figure {opacity:0; filter:blur(20px); transform:translateY(30px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1);} Article Img.in_view_inner:not(.component_img Img.in_view_inner), Article figure.in_view_inner {opacity:1; filter:blur(0); transform:translateY(0);} /* --- Blockquote Animation (Slide from Right) --- */ Article Blockquote {opacity:0; transform:translateX(60px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1); will-change:transform, opacity, filter;} Article Blockquote.in_view_inner {opacity:1; transform:translateX(0);} /* --- Table Rows Animation (Sequential) --- */ Article 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 Figure.in_view_inner Table TR {opacity:1; filter:blur(0); transform:translateY(0); transition-delay:calc(var(--tr-i) * .1s);} /* --- Article Lists Animation --- */ Article LI {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 .in_view_inner LI {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 {opacity:0; transition:all 1.5s cubic-bezier(0.22, 1, 0.36, 1); transition-delay:.8s;} .middle .hero_form.animated_form, .left .hero_form.animated_form, .right .hero_form.animated_form {transform:translateY(60px);} .in_view .hero_form.animated_form {opacity:1; transform:translate(0, 0);} /* --- 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;} .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);} /* HERO */ .hero {display:flex; align-items:center; position:relative; min-height:var(--hero-height); overflow:hidden; clip-path:inset(0 0 0 0);} .dvh_100.hero {height:100dvh;} Main > Section.hero, Main > Section.dark.hero {background:none;} .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%;} .component_img.simple_paralax {position:fixed;} .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:var(--section-padding-mobile); 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 .btn, .content_text.bottom_text .btn {display:inline-flex; margin:0 8px 6px 0; width:max-content;} .text_place .table .btn {margin:0;} .hero .for_btn {display:flex; flex-wrap:wrap; margin-top:32px; gap:16px; width:100%; justify-content:center;} .hero_text .h1, .hero_text .h2, .hero_text .h3 {width:100%;} .hero_text .h3.align_left ~ .for_btn {justify-content:flex-start;} .hero_text .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);} /* --- 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); clip-path:inset(0 0 0 0);} Article .component_img {position:fixed;} 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;} /* --- Paragraph - Article --- */ Article P {margin-bottom:1.5em; line-height:1.5;} Article > 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; border-radius:var(--border-radius-tile); box-shadow:0 0 30px var(--gray-opacity-white); border:1px solid rgba(0,0,0,.04);} 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:'“'; 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;} Article .for_btn {column-span:all;} /* --- 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 {background:radial-gradient(circle, var(--btn-bg-dark) 0%, transparent 70%);} /* --- 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;} .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);} .content_text {padding:0; color:var(--text-common-white); background-color:var(--bg-color-white);} .content_text.top_text {margin-bottom:25px; padding:0;} .content_text.bottom_text {margin-top:25px; padding:0;} .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;} .dark .content_text {color:var(--text-dark); background-color:var(--bg-color-dark);} div.error { border: 1px solid var(--error); } .icon_label { position: absolute; display: flex; top: 13px; left: 6px; } .icon_label .svg_icon { width: 16px; height: 16px; margin: 0; } .styled_checkbox { display: flex; flex-direction: column; margin-bottom: 12px; position: relative; } .styled_checkbox > input { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; } .checkbox_name { position: relative; font-size: var(--text-common); color: var(--text-common-white); font-weight: var(--text-common-weight); padding-left: 22px; cursor: pointer; } .checkbox_name::before { content: ""; width: 16px; height: 16px; border: 1px solid var(--icon-white); border-radius: 3px; position: absolute; top: 3px; left: 0; transition: 0.3s; } .checkbox_name::after { content: ""; width: 8px; height: 5px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg); position: absolute; top: 7px; left: 4px; opacity: 0; transition: 0.3s; } .styled_checkbox > input:checked + .checkbox_name::before { background-color: var(--icon-white); } .styled_checkbox > input:checked + .checkbox_name::after { opacity: 1; } .styled_checkbox > input[type=radio] + .checkbox_name::before { border-radius: 50%; } .styled_checkbox > input[type=radio] + .checkbox_name::after { width: 8px; height: 8px; border-radius: 50%; border-bottom: none; border-left: none; background-color: #fff; } .inner_dark .checkbox_name { color: var(--text-common-dark); } .inner_dark .checkbox_name::before { border-color: var(--icon-dark); } .inner_dark .styled_checkbox > input:checked + .checkbox_name::before { background-color: var(--icon-dark); } .statuses_place { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; z-index: 2; } .status-block { padding: 3px 5px; font-size: 12px; line-height: 1.2; border-radius: 3px; } .status-block + .status-block { margin-top: 6px; } .row { position: relative; width: 100%; } .shadow .item, .shadow .step_content, .shadow .r_content, .shadow .hero_form { box-shadow: 0 0 7px rgb(0 0 0 / 30%); } .radius .item, .radius .item img, .radius .step_content, .radius .r_content, .radius .hero_form { border-radius: 8px; } .radius .radius_sm, .radius .radius_sm .table_row { border-radius: 6px; } .shadow a.item { display: inline-block; transition: all .4s ease; } [data-action="showSliderPhotoPopup"]:hover, [data-action="showSinglePhotoPopup"]:hover { border-radius: 8px; box-shadow: 0px 1px 15px rgba(40, 40, 40, 0); cursor: pointer; transition: 0.3s; } [data-action="showSliderPhotoPopup"]:hover, [data-action="showSinglePhotoPopup"]:hover { box-shadow: 0px 1px 15px rgba(40, 40, 40, 0.9); } .slick-arrow { position: absolute; left: 10px; top: 50%; z-index: 11; background-color: transparent; font-size: 0; padding: 0; width: 38px; height: 38px; border-radius: 8px; border: 2px solid #282828; cursor: pointer; } .dark .slick-arrow { border-color: #fff; } .slick-arrow:hover { border-color: transparent; } .slick-next.slick-arrow { left: auto; right: 10px; transform: scale(-1); } .slick-arrow:after, .slick-arrow:before { content: ''; background-color: #282828; position: absolute; top: 7px; left: 15px; width: 2px; height: 12px; transform: rotate(45deg); } .dark .slick-arrow:after, .dark .slick-arrow:before { background-color: #fff; } .slick-arrow:before { top: 15px; transform: rotate(-45deg); } .slick-dots { display: flex; margin-top: 20px; width: 100%; justify-content: center; } .slick-dots li { position: relative; width: 18px; height: 18px; border-radius: 50%; background: transparent; border: 2px solid transparent; } .slick-dots li.slick-active { border: 2px solid #F3234A; } .slick-dots li.slick-active button { background: #F3234A; } .slick-dots li button { padding: 0; font-size: 0; width: 8px; height: 8px; background: #282828; border: none; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .tile .slick-slide { margin: 0 12px; } .tile .slick-list { padding: 10px 5px !important; } .checkbox { position: relative; height: 100%; cursor: pointer; } .checkbox:before, .checkbox:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 27px; height: 27px; border: 1px solid #727272; background-color: #fff; } .radius .checkbox:before, .radius .checkbox:after { border-radius: 6px; } .checkbox:after { z-index: -1; left: 50%; top: 53%; transform: translate(-50%, -50%); width: auto; height: auto; border: none; content: url("data:image/svg+xml;utf8,"); } .checkbox.active:before { background-color: #F3234A; border-color: #F3234A; } .checkbox.active:after { z-index: 1; } .inner_dark tr { color: var(--text-dark); } /* ПЕРЕВАГИ */ .advantages { padding: var(--section-padding-mobile) 0; } .advantages.dark .H1 { color: var(--title-big-dark); } .advantages.dark .H2 { color: var(--title-middle-dark); } .advantages .H3 { display: block; text-align: center; } .advantages.dark .H3 { color: var(--title-small-dark); } .advantages.dark .content_text { color: var(--text-common-dark); } .advantages.dark .content_text h1, .advantages.dark .content_text .H1 { color: var(--title-big-dark); } .advantages.dark .content_text h2, .advantages.dark .content_text .H2 { color: var(--title-middle-dark); } .advantages.dark .content_text h3, .advantages.dark .content_text .H3 { color: var(--title-small-dark); } .advantages.dark .content_text h4, .advantages.dark .content_text .H4 { color: var(--block-title-small-dark); } .advantages .item { padding: 10px; background: var(--item-bg-white); z-index: 1; } .inner_dark .item.no_background, .advantages .item.no_background { background: transparent; box-shadow: none; } .advantages .item figure { display: flex; flex-direction: column; align-items: center; } .advantages .item img { font-size: 0; margin-left: auto; margin-right: auto; width: 100%; /*margin-bottom: 25px;*/ margin-bottom: 0; position: relative; } .advantages .item figure.icons_component { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; object-fit: contain; } .advantages .item figure.icons_component img { width: 100%; max-width: var(--data-max-width); height: auto; display: block; object-fit: contain; } /* ПЕРЕВАГИ ТЕМНИЙ */ .advantages.dark { /*background: var(--bg-color-dark);*/ } .advantages.dark .title, .advantages.dark .subtitle { color: var(--text-dark); } .inner_dark .item { color: var(--text-dark); background: var(--item-bg-dark); } .inner_dark .item .fig_title { color: var(--text-dark); } .inner_dark .item .fig_sub_title { color: var(--text-dark); } /* МИ ПРОПОНУЄМО */ .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 .checkbox:before, .inner_dark .checkbox:after { background-color: transparent; } .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); } /* ПРОЦЕС СПІВПРАЦІ */ .work_process { padding: var(--section-padding-mobile) 0; position: relative; } .work_process-picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: var(--image-fg-opacity-white); } .work_process-picture img { display: block; width: 100%; height: 100%; object-fit: cover; } .process_tree { width: 100%; position: relative; max-width: 100%; margin: 0 auto; } .work_process.faq .process_tree { max-width: 100%; } .pr_step { display: flex; justify-content: flex-end; width: auto; position: relative; margin-left: 30px; padding-bottom: 30px; } .pr_step:last-child { padding-bottom: 0; } .pr_step:after { content: ''; position: absolute; bottom: 0; top: 0; left: 0; transform: translateX(-50%); width: 2px; height: 100%; background-color: var(--btn-bg-white); border-radius: 0; opacity: 0.5; } .pr_step:nth-child(1)::after { top: 89px; height: calc(100% - 89px); } .pr_step .step_number { font-weight: var(--title-big-weight); position: absolute; z-index: 2; top: 0; left: 1px; width: 90px; height: 90px; color: var(--btn-bg-white); font-size: var(--title-middle); display: flex; align-items: center; justify-content: center; } .pr_step:not(:nth-child(1)):last-child .step_number { top: auto; bottom: 1px; } .pr_step .step_number::before { content: ""; width: 50%; height: 2px; position: absolute; bottom: 0; left: 0; background-color: var(--btn-bg-white); transform: translateY(50%); opacity: 0.5; } .pr_step .step_number::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background-color: var(--btn-bg-white); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); } .pr_step .step_content { position: relative; overflow: visible; width: calc(100% - 100px); padding: 20px; color: var(--text-white); background: var(--item-bg-white); text-align: left; transition: 0.3s; } .step_content .fig_title { color: var(--title-small-white); text-align: left; margin-top: 0; margin-bottom: 0; transition: 0.3s; } .step_content .fig_sub_title { /*display: none;*/ color: #727272; margin-top: 10px; } .inner_dark .step_content .fig_sub_title { color: var(--text-dark); } .step_content.active .fig_sub_title { /*display: block;*/ } .step_content .apply { font-size: var(--text-middle); font-weight: var(--text-middle-weight); font-weight: 300; line-height: 1.2; color: #F3234A; border-bottom: 1px solid #F3234A; margin-top: 10px; width: max-content; display: flex; } .work_process_inner a.btn { width: 100%; margin-top: 50px; height: 50px; filter: none; text-transform: none; } .faq.work_process .step_number { display: none; } .faq.work_process .step_content { width: 100%; } .faq.work_process .pr_step { margin-left: 0; padding-bottom: 0; } .faq.work_process .pr_step + .pr_step { margin-top: 16px; } .faq.work_process .pr_step:after { display: none; } .faq.work_process .step_content { cursor: pointer; } .faq.work_process .step_content .fig_sub_title { display: none; } .faq.work_process .step_content.active .fig_sub_title { display: block; } .faq .fig_title { margin-top: 0; } /* ПРОЦЕС СПІВПРАЦІ ТЕМНИЙ */ .work_process.dark { color: var(--text-common-dark); } .work_process.dark .content_text { color: var(--text-common-dark); } .work_process.dark h1, .work_process.dark .H1 { color: var(--title-big-dark); } .work_process.dark h2, .work_process.dark .H2 { color: var(--title-middle-dark); } .work_process.dark h3, .work_process.dark .H3 { color: var(--title-small-dark); } .work_process.dark h4, .work_process.dark .H4 { color: var(--block-title-small-dark); } .inner_dark .pr_step .step_number, .dark.inner_dark .pr_step .step_number { color: var(--btn-bg-dark); } .inner_dark .pr_step .step_number::before, .dark.inner_dark .pr_step .step_number::before { background-color: var(--btn-bg-dark); } .inner_dark .pr_step .step_number::after, .dark.inner_dark .pr_step .step_number::after { background-color: var(--btn-bg-dark); } .inner_dark .pr_step:after { background-color: var(--btn-bg-dark); } .inner_dark .pr_step .step_content { background: var(--item-bg-dark); } .inner_dark .step_content .fig_title { color: var(--title-small-dark); } .inner_dark .step_content .apply { color: var(--link-dark); border-color: var(--link-dark); } .work_process.dark .work_process_inner a.btn { color: var(--btn-text-dark); background-color: var(--btn-bg-dark); } /* КАТАЛОГ */ .catalog { color: var(--text-common-white); padding: var(--section-padding-mobile) 0; position: relative; } .catalog .slick-list { padding: 10px 5px; } .catalog .item { display: flex; flex-direction: column; background: var(--item-bg-white); } .catalog .swiper { width: calc(100% + 20px); margin: -10px; padding: 10px; } .catalog .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; } .catalog .swiper:not(.swiper-initialized)[data-coll-mobile="1"] .item { flex: 0 0 100%; } .catalog .swiper:not(.swiper-initialized)[data-coll-mobile="2"] .item { flex: 0 0 calc(50% - 5px); margin-right: 10px; } .catalog .swiper.swiper-initialized .item { height: auto; } /* .tile { display: grid; grid-template-columns: 1fr; grid-gap: 8px; } .tile.coll_mobile-2 { grid-template-columns: 1fr 1fr; } .tile.coll_mobile-3 { grid-template-columns: repeat(3, 1fr); grid-gap: 8px; } */ .tile { display: flex; justify-content: center; flex-wrap: wrap; width: calc(100% + 8px); margin-left: -4px; /* grid-template-columns: 1fr; grid-gap: 8px; */ } .tile .item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 calc(100% - 16px); margin-bottom: 8px; margin: 0 4px 8px 4px; } .tile.coll_mobile-2 .item { flex: 0 0 calc((100% / 2) - 8px); } .tile.coll_mobile-3 .item { flex: 0 0 calc((100% / 3) - 8px); } .catalog .fig_title { margin-top: 0; margin-bottom: 6px; color: var(--block-title-big-white); word-break: break-word; } .catalog.inner_dark .fig_title {color: var(--block-title-big-dark);} .catalog .item figure img { margin: 0 auto; width: 100%; max-width: var(--data-max-width); font-size: 0; object-fit: contain; height:auto; } .catalog figure { text-align: left; display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; } .catalog figcaption { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px 10px 10px 10px; } .catalog figcaption .date { font-size: 12px; opacity: 0.5; margin: 0 0 6px auto; } .catalog figcaption .author_name { font-size: 12px; margin: 0 0 6px 0; } .catalog .fig_bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 24px; } .catalog .price { font-size: var(--title-small); font-weight: var(--title-small-weight); color: var(--title-small-white); margin-bottom: 8px; width: auto; } .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; } /* КАТАЛОГ ТЕМНИЙ */ .catalog.dark { color: var(--text-common-dark); background: var(--bg-color-dark); } .inner_dark .item { background: var(--item-bg-dark); } .inner_dark .fig_title { color: var(--text-dark); } .inner_dark .item .price { color: var(--title-small-dark); } .inner_dark .slick-dots li.slick-active button { background: var(--link-dark); } .inner_dark .slick-dots li.slick-active { border: 2px solid var(--link-dark); } .catalog.dark { color: var(--text-common-dark); } .catalog.dark .content_text { color: var(--text-common-dark); } .catalog.dark h1, .catalog.dark .H1 { color: var(--title-big-dark); } .catalog.dark h2, .catalog.dark .H2, .catalog.dark .subtitle { color: var(--title-middle-dark); } .catalog.dark h3, .catalog.dark .H3 { color: var(--title-small-dark); } .catalog.dark h4, .catalog.dark .H4 { color: var(--block-title-small-dark); } .inner_dark .fig_title { color: var(--text-common-dark); } .inner_dark .fig_sub_title { color: var(--text-middle-dark); } /* НОВИНИ */ .news figure { text-align: left; } .news figcaption { padding: 0 25px 25px; } .news .fig_sub_title { color: #727272; } .news .item img { font-size: 0; height: 300px; } .news .fig_bottom { display: flex; margin-top: 20px; color: #727272; } .news .fig_bottom > div { display: flex; align-items: center; font-size: var(--text-small); font-weight: var(--text-small-weight); color: var(--text-small-white); margin-right: 30px; } .news .fig_bottom > div .svg_icon { width: 16px; height: 16px; } /* НОВИНИ ТЕМНИЙ */ .news.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); } /* ВІДГУКИ */ .reviews_work { color: var(--text-white); display: flex; align-items: center; margin-bottom: 0px; padding: var(--section-padding-mobile) 0; background: center / cover no-repeat; position: relative; } .reviews .item { position: relative; margin: 0 5px; background-color: transparent; box-shadow: none !important; } .author_foto { position: relative; width: 90px; height: 90px; overflow: hidden; overflow: hidden; margin: 0 auto 0; transform: translateY(-45px); } .radius .author_foto { border-radius: 50%; } .radius .author_foto img { font-size: 0; } .r_content { color: var(--text-white); text-align: center; padding: 0 25px 25px; margin: 50px auto 25px; overflow: visible; background: var(--item-bg-white); } .r_text { margin: -20px auto 20px; font-style: italic; } .r_author { padding-right: 6px; font-size: var(--block-title-small); color: var(--block-title-small-white); font-weight: bold; } .r_city, .r_author_date { font-size: var(--text-small); font-weight: var(--text-small-weight); color: var(--text-small-white); } .rw_item_title .stars { margin-left: auto; } .rw_item_title .stars .icon { margin: 0 0 0 6px; } .rw_item_title .stars .svg_icon { margin: 0; } .r_gallery { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px; } .radius .r_gallery img { border-radius: 5px; font-size: 0; } /* ВІДГУКИ ТЕМНИЙ */ .reviews.dark { color: var(--text-dark); background: var(--bg-color-dark); } .inner_dark .r_content { color: var(--text-dark); background: var(--item-bg-dark); } /* ВІДГУКМ ПРО НАШІ РОБОТИ */ .reviews_work .item { display: flex; flex-direction: column; color: var(--text-white); padding: 20px 20px 0; background: var(--item-bg-white); } .rw_item_title { display: flex; align-items: center; margin-bottom: 20px; } .reviews_work .author_foto { transform: none; width: 40px; height: 40px; margin: 0 12px 0 0; } .reviews_work .author_foto img { font-size: 0; width: 100%; height: 100%; object-fit: cover; } .rw_item_text { display: flex; flex-direction: column; font-size: var(--text-middle); font-weight: var(--text-middle-weight); color: var(--text-middle-white); margin-bottom: 10px; } .reviews_work .item > div.rw_item_text { display: flex; flex-direction: column; align-items: flex-start; } .rw_item_text .media { width: 100%; margin-top: 4px; margin-bottom: 6px; } .rw_item_text .youtube { position: relative; cursor: pointer; overflow: hidden; width: 100%; border-radius: 8px; } .rw_item_text .youtube::before { content: ""; width: 100%; height: 30%; background: linear-gradient(0deg, rgba(42, 123, 155, 0) 0%, rgb(0 0 0 / 47%) 100%); position: absolute; top: 0; left: 0; } .rw_item_text .youtube img.shorts_play { width: 100%; height: var(--height-shorts); object-fit: cover; } .reviews_work .item .youtube .svg_icon { display: block; margin: 0; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } .shorts_top-text { font-size: 16px; padding: 14px 16px 0 16px; color: #ffffff; position: absolute; top: 0; left: 0; z-index: 2; } .rw_item_bottom { background-color: #F1F1F1; margin-top: auto; padding: 0 18px; height: 48px; align-items: center; display: flex; justify-content: space-between; font-size: var(--text-small); color: var(--text-small-white); font-weight: var(--text-small-weight); margin: auto -20px 0; } .radius .rw_item_bottom { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .reviews_work .item > div { display: flex; align-items: center; width: 100%; } .reviews_work .item > div .svg_icon { flex: 0 0 14px; width: 14px; height: 14px; } .reviews_work .item .sourse { text-decoration: underline; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .reviews_work .item .sourse:hover { text-decoration: none; } .rw_share { display: flex; align-items: center; } .rw_like { display: flex; align-items: center; } .comment_original a { border-bottom: 1px solid;; color: var(--link-white) } .inner_dark .comment_original a { color: var(--link-dark) } /* ВІДГУКИ ПРО НАШІ РОБОТИ ТЕМНИЙ */ .reviews_work.dark { color: var(--text-common-dark); } .reviews_work.dark .content_text { color: var(--text-common-dark); } .reviews_work.dark h1, .reviews_work.dark .H1 { color: var(--title-big-dark); } .reviews_work.dark h2, .reviews_work.dark .H2 { color: var(--title-middle-dark); } .reviews_work.dark h3, .reviews_work.dark .H3 { color: var(--title-small-dark); } .reviews_work.dark h4, .reviews_work.dark .H4 { color: var(--block-title-small-dark); } .inner_dark .item { color: var(--text-common-dark); background: var(--item-bg-dark); } .inner_dark .item > div { background: var(--item-bg-dark); } .inner_dark .r_author { color: var(--block-title-small-dark); } .inner_dark .r_author_date { color: var(--text-small-dark); } .inner_dark .rw_item_text { color: var(--text-common-dark); } .inner_dark .rw_like { color: var(--text-common-dark); } .inner_dark .item > div .svg_icon { fill: var(--icon-dark); } /* ФОТОГАЛЕРЕЯ */ .foto_gallery { padding: var(--section-padding-mobile) 0; position: relative; } .foto_gallery figure { display: flex; flex-direction: column; align-items: center; justify-content: center; } .foto_gallery figure img { margin-bottom: 0; font-size: 0; object-fit: cover; width: 100%; max-width: var(--data-max-width); height: auto; } .foto_gallery.radius figure img { border-radius: 8px; } .foto_gallery figure figcaption { margin-top: 12px; } .foto_gallery .tile.slider_gallery-view { display: flex; gap: 0; width: 100%; margin: 0; } .foto_gallery .tile.slider_gallery-view.swiper:not(.swiper-initialized) { overflow: hidden; display: flex; } .foto_gallery .tile.slider_gallery-view.swiper:not(.swiper-initialized) .swiper-wrapper { /* display: flex; */ } .foto_gallery .tile.slider_gallery-view.swiper:not(.swiper-initialized) .swiper-slide { /* flex: 0 0 100%; */ } .foto_gallery .tile.slider_gallery-view .item { display: flex; flex-direction: column; flex: unset; margin: 0; width: 100%; } .foto_gallery .item { box-shadow: none; background: transparent; } .gallery_column { display: flex; flex-direction: column; } .gallery_column figure { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 30px; } .gallery_column figure img { display: block; max-width: 100%; width: auto; height: auto; } .popup.gallery_zoom_popup .popup_inner { max-width: 1110px; height: 100%; } .popup.gallery_zoom_popup .popup_inner .swiper { height: 100%; } .popup.gallery_zoom_popup .popup_inner .swiper img { display: block; width: 100%; height: 100%; object-fit: contain; } .popup.gallery_video_popup .popup_inner { max-width: 1110px; } .popup.gallery_video_popup .popup_inner iframe { width: 100%; height: auto; aspect-ratio: 3/2; display: block; } .popup.gallery_zoom_popup .swiper-wrapper { align-items: center; } /* ФОТОГАЛЕРЕЯ ТЕМНИЙ */ .foto_gallery.dark { color: var(--text-common-dark); /* background: var(--bg-color-dark); */ } .foto_gallery.dark .content_text { color: var(--text-common-dark); } .foto_gallery.dark h1, .foto_gallery.dark .H1 { color: var(--title-big-dark); } .foto_gallery.dark h2, .foto_gallery.dark .H2 { color: var(--title-middle-dark); } .foto_gallery.dark h3, .foto_gallery.dark .H3 { color: var(--title-small-dark); } .foto_gallery.dark h4, .foto_gallery.dark .H4 { color: var(--block-title-small-dark); } .foto_gallery.dark a.item { opacity: 1; } .foto_gallery.dark a.item:hover { opacity: .55; } .inner_light .slider_gallery-view .swiper-button-prev, .inner_light .slider_gallery-view .swiper-button-next { border-color: var(--icon-white); } .inner_light .slider_gallery-view .swiper-button-prev::before, .inner_light .slider_gallery-view .swiper-button-prev::after, .inner_light .slider_gallery-view .swiper-button-next::before, .inner_light .slider_gallery-view .swiper-button-next::after { background-color: var(--icon-white); } /* ЗАЛИШИЛИСЬ ПИТАННЯ */ .question_inner a.btn { width: 100%; filter: none; } /* ЗАЛИШИЛИСЬ ПИТАННЯ ТЕМНИЙ */ .hero.question.dark::after { background-color: rgba(5, 9, 15, .5); } .hero.question.dark .question_inner a.btn { color: var(--btn-text-dark); background-color: var(--btn-bg-dark); } /* ДЕТАЛЬНЕ ТОВАРУ */ .product_details { padding: 30px 0 50px 0; } .product_details.dark { background: var(--bg-color-dark); } .product_details .container { display: flex; flex-direction: column; } .product_details .container.publication { display: flex; flex-direction: column; } .container.publication.page_publication .product_gallery { max-width: var(--data-max-width); margin-left: auto; margin-right: auto; } .container.publication.page_publication .gallery_nav { max-width: var(--data-max-width); } .container.publication.page_publication .btn { width: fit-content; max-width: 100%; } .product_gallery { margin-bottom: 20px; padding: 10px; background-color: #fff; } .inner_dark .product_gallery { color: var(--text-dark); background: var(--item-bg-dark); } .inner_dark .product_gallery .gallery-details__inner img { background-color: transparent; } .product_details.radius .product_gallery { border-radius: 8px; } .product_gallery .statuses_place { top: 20px; left: 20px; } .gallery_main-wrap { margin-bottom: 10px; width: 100%; position: relative; } .gallery_main-wrap.galery_wrap-grid { padding-bottom: 0; height: auto; } .gallery_main-wrap.swiper.swiper-initialized { padding-bottom: 75%; } .gallery_main { display: flex; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .gallery_main.galery_grid { position: relative; height: auto; overflow: unset; } .gallery_main.galery_grid > div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-width: 100%; height: auto; } .gallery_main.galery_grid.one_col > div { grid-template-columns: 1fr; } .gallery_main.galery_grid .swiper-zoom-container { height: auto; } .gallery_main.galery_grid .gallery-details__inner { height: auto; } .gallery_main.galery_grid .gallery-details__inner img { height: auto; object-fit: contain; } .gallery_main.swiper { /* position: absolute; */ } .swiper .swiper-button-next, .swiper .swiper-button-prev { position: absolute; top: 50%; transform: translateY(-50%); font-size: 0; margin: 0; width: 30px; height: 30px; border: 2px solid var(--icon-dark); border-radius: 4px; } .swiper .swiper-button-prev { left: 10px; transform: translateY(-50%) rotate(180deg); } .swiper .swiper-button-next { right: 10px; } .swiper .swiper-button-next::before, .swiper .swiper-button-next::after, .swiper .swiper-button-prev::before, .swiper .swiper-button-prev::after { content: ""; width: 10px; height: 2px; background-color: var(--icon-dark); position: absolute; top: 50%; left: 50%; transform-origin: right; } .swiper .swiper-button-next::before, .swiper .swiper-button-prev::before { transform: translate(-50%, -50%) rotate(-45deg); } .swiper .swiper-button-next::after, .swiper .swiper-button-prev::after { transform: translate(-50%, -50%) rotate(45deg); } .inner_dark .swiper .swiper-button-next, .inner_dark .swiper .swiper-button-prev { border-color: var(--border-color-dark); } .inner_dark .swiper .swiper-button-next::before, .inner_dark .swiper .swiper-button-next::after, .inner_dark .swiper .swiper-button-prev::before, .inner_dark .swiper .swiper-button-prev::after { background-color: var(--border-color-dark); } .gallery_main .slick-list { height: 100%; } .gallery_main .slick-track { height: 100%; } .gallery_main:not(.swiper-initialized) .swiper-wrapper { display: flex; overflow: hidden; } .gallery_main:not(.swiper-initialized) .gallery-details__inner { flex: 0 0 100%; } .swiper-zoom-container { height: 100%; } .swiper-zoom-container img { height: 100%; } .gallery-details__inner { display: block; width: 100%; height: 100%; } .slick-initialized .slick-slide.gallery-details__inner { height: 100%; } .gallery-details__inner img { display: block; width: 100%; height: auto; object-fit: cover; margin-bottom: 0; background: #ffffff; } .product_details.radius .gallery-details__inner img { border-radius: 8px; } .gallery_nav { display: flex; overflow: hidden; width: 100%; } .gallery_nav-item { width: auto; height: auto; padding: 0 5px; cursor: pointer; } .gallery_nav.swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; overflow: hidden; } .gallery_nav.swiper:not(.swiper-initialized) .gallery_nav-item { flex: 0 0 100%; } .gallery_item-inner { width: 100%; height: auto; position: relative; } .gallery_item-inner img { display: block; width: 100%; height: auto; background-color: #ffffff; object-fit: cover; } .product_details.radius img { border-radius: 8px; } .photo_description { color: var(--text-common-white); margin-top: 20px; padding: 0; } .product_details-description { display: flex; flex-direction: column; padding: 30px 26px 30px; background-color: #fff; } .product_details.inner_dark .product_details-description { color: var(--text-dark); background: var(--item-bg-dark); } .product_details.radius .product_details-description { border-radius: 8px; } .product_details-title { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--title-middle-white); margin-bottom: 16px; } .product_details .row-desk { display: flex; flex-direction: column; } .product_details .col-desk { display: flex; flex-direction: column; width: 100%; } .product_info-top { margin-bottom: 16px; } .product_characteristics { margin-bottom: 16px; } .product_details-text { color: var(--text-common-white); margin-bottom: 16px; padding: 0; } .product_details-text p { margin-bottom: 12px; } .product_details-price { color: var(--title-small-white); font-size: 24px; font-weight: 600; margin-bottom: 20px; } .dark .author .name { color: var(--text-dark); } .dark .author .name a { color: var(--link-dark); } .inner_dark .photo_description { color: var(--text-common-dark); } .inner_dark .product_details-text { color: var(--text-common-dark); } .inner_dark .product_details-title { color: var(--title-middle-dark); } .inner_dark .product_details-price { color: var(--title-small-dark); } .product_details-description .btn { width: fit-content; max-width: 100%; } .popup.product_details { background: rgba(0, 0, 0, .8); } .popup.product_details.dark .product_details-description { color: var(--text-white); background: var(--item-bg-white); } .popup.product_details.dark .product_details-description a.btn { color: var(--btn-text-white); background-color: var(--btn-bg-white); } .inner_dark .product_details-description { color: var(--text-dark); background: var(--item-bg-dark); } .popup.product_details.inner_dark .product_details-description a.btn { color: var(--btn-text-dark); background-color: var(--btn-bg-dark); } .product_details.dark .container.publication .product_details-title, .product_details.dark .container.publication .product_info-top, .product_details.dark .container.publication .photo_description { color: var(--text-dark); } /* ------------ 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; } .photo_section { padding: var(--section-padding-mobile) 0; color: var(--text-white); } .photo_section-text { margin-bottom: 20px; color: var(--text-common-white); } .photo_section.dark .photo_section-text, .photo_section.dark .photo_section-bottom_text { color: var(--text-common-dark); } .photo_section video { display: block; width: 100%; height: auto; max-height: 800px; border-radius: 8px; } .photo_section-picture { display: block; } .photo_section-picture img { display: block; width: 100%; height: auto; border-radius: 8px; position: relative; } .photo_section-bottom_text { margin-top: 20px; color: var(--text-common-white); } .photo_section.dark { color: var(--text-common-dark); } .photo_section.dark h1, .photo_section.dark .H1 { color: var(--title-big-dark); } .photo_section.dark h2, .photo_section.dark .H2 { color: var(--title-middle-dark); } .photo_section.dark h3, .photo_section.dark .H3 { color: var(--title-small-dark); } .photo_section.dark h4, .photo_section.dark .H4 { color: var(--block-title-small-dark); } .two_columns { position: relative; padding: var(--section-padding-mobile) 0; } .two_columns .top_text, .two_columns .bottom_text { color: var(--text-common-white); } .two_columns.dark > .container > .top_text { color: var(--text-common-dark); } .two_columns.dark > .container > .bottom_text { color: var(--text-common-dark); } .two_columns.dark > .container > h1, .two_columns.dark > .H1 { color: var(--title-big-dark); } .two_columns.dark > .container > h2, .two_columns.dark > .container > .H2 { color: var(--title-middle-dark); } .two_columns.dark > .container > h3, .two_columns.dark > .container > .H3 { color: var(--title-small-dark); } .two_columns.dark > .container > h4, .two_columns.dark > .container > .H4 { color: var(--block-title-small-dark); } .columns_wrap { display: flex; flex-direction: column; } .columns_wrap Article {clip-path:unset;} .columns_wrap .container { padding: 0; } .columns_wrap .col-1 { margin-bottom: 30px; position: relative; } .columns_wrap .col-2 { position: relative; } .columns_wrap .component_img, .columns_wrap .component_img { display: none; } .two_columns .hero { padding: 0; min-height: unset; } .two_columns .advantages { padding: 0; } .two_columns .photo_section { padding: 0; } .video_box { position: relative; } .video_box .img_wrap { position: relative; } .video_box .img_wrap::before { content: ""; width: 75px; height: 75px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('../images/video-play.svg'); background-size: contain; background-repeat: no-repeat; pointer-events: none; } .video_box figcaption { margin-top: 12px; } .two_columns.dark .top_text, .two_columns.dark .bottom_text { color: var(--text-common-dark); } .video_section { width: 100%; aspect-ratio: 16 / 9; display: block; position: relative; } .video_section-inner { display: block; width: 100%; height: 100%; } .video_section-inner iframe, .video_section-inner video { display: block; width: 100%; height: 100%; } .prev_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .prev_video::before { content: ""; width: 75px; height: 75px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('../images/video-play.svg'); background-size: contain; background-repeat: no-repeat; pointer-events: none; } .prev_video img { display: block; width: 100%; max-height: 800px; object-fit: contain; } .styled_video-upload { display: block; position: relative; } .styled_video-upload video { width: 100%; height: 100%; max-height: 800px; object-fit: contain; } .styled_video-upload .play-btn, .photo_section .play-btn { width: 75px; height: 75px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; cursor: pointer; } .styled_video-upload .play-btn .svg_icon, .photo_section .play-btn .svg_icon { width: 75px; height: 75px; } .stars { display: flex; align-items: center; } .stars .star { display: flex; align-items: center; margin: 0 2px; } .stars .svg_icon { width: 22px; height: 22px; } .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; } .pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 30px 0 40px 0; } .pagination li { margin: 3px; } .pagination li a, .pagination li b { color: var(--text-white); font-size: 15px; line-height: 1.2; display: flex; align-items: center; justify-content: center; padding: 0 5px; min-width: 30px; height: 30px; border-radius: 5px; border: 1px solid var(--border-color-white) } .pagination li.active a, .pagination li.active b { color: var(--btn-text-white); background-color: var(--btn-bg-white); border-color: var(--btn-bg-white); } .pagination li:not(.active) a:hover { opacity: 0.75; } .pagination li a.arrow_btn { font-size: 0; position: relative; } .pagination li a.arrow_btn.prev { transform: rotate(180deg); } .pagination li a.arrow_btn::before, .pagination li a.arrow_btn.last::after{ content: ""; width: 8px; height: 8px; border-bottom: 1px solid var(--text-white); border-right: 1px solid var(--text-white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .pagination li a.arrow_btn.last::before { margin-left: 1px; } .pagination li a.arrow_btn.last::after { margin-left: -7px; } /* --- 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(--bg-color-dark); border-radius:50%; border:1px solid var(--border-opacity-lighter); cursor:pointer; overflow:visible; box-shadow:0 10px 30px rgba(0,0,0,0.4); 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;} .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 .checkbox_name {color:var(--text-common-dark);} .popup.dark .checkbox_name::before {border:1px solid var(--icon-dark);} .popup.dark .styled_checkbox > input:checked + .checkbox_name::before {border-color:var(--icon-dark); background-color:transparent;} .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);} }