@charset "UTF-8"; *, ::before, ::after { -webkit-box-sizing: border-box; box-sizing: border-box; outline: none!important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_100.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_100_Italic.ttf') format('truetype'); font-weight: 100; font-style: Italic; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_200.ttf') format('truetype'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_200_Italic.ttf') format('truetype'); font-weight: 200; font-style: Italic; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_300.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_300_Italic.ttf') format('truetype'); font-weight: 300; font-style: Italic; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_400.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_400_Italic.ttf') format('truetype'); font-weight: 400; font-style: Italic; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_500.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_500_Italic.ttf') format('truetype'); font-weight: 500; font-style: Italic; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_600.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_600_Italic.ttf') format('truetype'); font-weight: 600; font-style: Italic; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_700.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_700_Italic.ttf') format('truetype'); font-weight: 700; font-style: Italic; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_800.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_800_Italic.ttf') format('truetype'); font-weight: 800; font-style: Italic; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_900.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/Inter_900_Italic.ttf') format('truetype'); font-weight: 900; font-style: Italic; } @font-face { font-family: 'Murs Gothic'; src: url('../fonts/MursGothic/mursgothic-ExtraBold.woff') format('woff'), url('../fonts/MursGothic/mursgothic-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; } :root{ --textFonts: 'Inter', 'Arial', 'sans-serif', 'serif'; --textColor: var(--314152); --Buttons: var(--ff8976); } pre { font-family: monospace, monospace; font-size: 1em } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } dfn { font-style: italic } mark { background-color: #ff0; color: #000 } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } audio, video { display: inline-block } audio:not([controls]) { display: none; height: 0 } picture, video { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; max-width: 100%; width: 100%; position: relative; overflow: hidden; } picture::after { content: ""; top: 0; left: 0; right:0; position: absolute; display: block; bottom: 0; } button { color: var(--textColor); font-family: var(--textFonts); text-transform: none; text-indent: 0px; text-shadow: none; cursor: default; margin: 0; padding: 0; background-color: transparent; background-image: none; outline: none!important; border: 0; cursor: pointer } button, input, optgroup, select, textarea { font-size: 100%; line-height: 1.15; margin: 0 } input[type="text"]::-ms-clear { display: none; } input[type="password"]::-ms-reveal { display: none; } button, input { overflow: visible } button, select { text-transform: none } [type=reset], [type=submit], button, html [type=button] { -webkit-appearance: button } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0 } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { display: inline-block; vertical-align: baseline } textarea { overflow: auto } [type=checkbox], [type=radio] { padding: 0 } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details, menu { display: block } summary { display: list-item } canvas { display: inline-block } template { display: none } [hidden] { display: none } [hidden], template { display: none } address { font-style: inherit } cite, dfn, em, i { font-style: italic } [tabindex], a, area, button, input, label, select, textarea { -ms-touch-action: manipulation; touch-action: manipulation } [hreflang]>abbr[title] { text-decoration: none } table { border-collapse: collapse; border-spacing: 0 } audio, canvas, iframe, img, svg, video { vertical-align: middle } audio:not([controls]) { display: none; height: 0 } input, select, textarea { display: block; margin: 0; padding: 0; width: 100%; outline: 0; border: 0; border-radius: 0; color: inherit; font: inherit; line-height: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none transparent } select { text-transform: none } select::-ms-expand { display: none } select::-ms-value { background: 0 0; color: inherit } textarea { overflow: auto; resize: vertical } :root{ --353535a3: #353535a3; --0065591c: #0065591c; --0000000f: #0000000f; --textColor: var(--314152); --textColorInverse: var(--f9fffd); --bodyColor: var(--f9fffd); --menuColor: var(--f9fffd); --colorOverlay: var(--353535a3); --blurOverlay: 6px; --linkColor: var(--314152); --linkActive: var(--ff6666); --iconSocial: var(--70c8bc); --hCount: 60px; --maxWidthBlock: 1600px; --blockShadow: 0px 5px 15px 0px var(--353535a3); --blockShadow: 0px 5px 10px 0px var(--0065591c); --IconsColorSvg: var(--25d366); --Buttons: var(--ff8976); } html { color: var(--textColor); font-family: var(--textFonts); font-size: 18px; min-height: 100%; height: 100%; font-display: swap; line-height: 30px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } @media (max-width:1600px) { html { font-size: 16px; } } body { position: relative; background-color: var(--bodyColor); min-height: 100%; margin: 0; padding: 0; } body.baguetteBox-open { position: fixed; right: 0; left: 0; } @media screen and (max-width: 768px) { body.has-nav-open { position: fixed; right: 0; left: 0; } } article, aside, footer, header, nav, section { display: block } figure { margin: 1em 40px } figcaption, figure, main { display: block } main { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; min-height: 100vh; margin-left: auto; margin-right: auto; } ::-moz-selection { background-color: #101010; color: #fff; text-shadow: none } ::selection { background-color: #101010; color: #fff; text-shadow: none } a, .j-link { background-color: transparent; color: #b30800; text-decoration: none; outline: 0; cursor: pointer; -webkit-text-decoration-skip: objects; -webkit-transition: color .3s cubic-bezier(.4, 0, 0, 1), border-color opacity .3s, visibility .9s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: color .3s cubic-bezier(.4, 0, 0, 1), border-color opacity .3s, visibility .9s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); } .j-link { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } a:active, a:hover, .j-link:active, .j-link:hover { filter: saturate(200%) !important; text-decoration: underline; } .is-desktop .j-link:not([data-act="true"]) { text-decoration: none; color: inherit; cursor: text; filter: saturate(100%) !important; } a[href=""], a:not([href]) { color: inherit; } a[href=""], a:not([href]) { cursor: text; } a[href=""]:hover, a[href=""]:focus, a:not([href]):hover, a:not([href]):focus { color: inherit; } img, svg { max-width: 100%; border-style: none; height: auto; width: 100%; height: inherit; width: inherit; } img, video { pointer-events: none; } video::-webkit-media-controls { display:none !important; } a svg { pointer-events: none } svg { fill: currentColor } svg:not(:root) { overflow: hidden } p { margin: 0; margin-bottom: 15px; display: inline-block; vertical-align: top; } ol, ul, dl { list-style: none; margin: 0; padding: 0; padding-left: 15px; list-style-position: inside; width: 100%; margin: 15px 0; margin-top: 0; } ul { list-style-type: disc; } ol { list-style-type: decimal } ol li, ul li { margin: 0; padding: 0; margin-bottom: 15px; display: list-item; text-align: -webkit-match-parent } ol li:last-of-type, ul li:last-of-type { margin-bottom: 0; } li::marker { color: #b30800; font-size: 1em; } li>p { margin-bottom: 0!important; max-width: calc(100% - 30px); display: inline-block; vertical-align: middle; } b, strong { font-weight: bolder; font-weight: inherit; font-weight: 700 } big { font-size: 120%; } small { font-size: 80%; } hr { display: inline-block; vertical-align: middle; margin: 0; margin-bottom: 15px; padding: 0; height: 1px; border: 0; border-top: 1px solid #838383; overflow: visible; width: 100%; } blockquote { border-left: 10px solid #f33f52; color: inherit; font-size: 1.125rem; font-style: italic; line-height: 22px; margin: 0; margin-bottom: 1.875rem; margin-left: 15px; margin-top: 1rem; padding: 0; padding-left: 15px; quotes: none; max-width:100%; } blockquote p { line-height: inherit; margin-bottom: 0!important } blockquote p::before, blockquote p::after { font-size: 1.5rem; color: inherit } blockquote p::before { content: "\201C"; margin-right: 10px; } blockquote p::after { content: "\201D"; margin-left: 10px; } .o-h, .o-h1, .o-h2, .o-h3, .o-h4, .o-h5, .o-h6, h1, h2, h3, h4, h5, h6 { color: inherit; display: inline-block; font-family: 'Murs Gothic'; font-weight: 900; line-height: 1.3em; margin: 0; margin-bottom: 1em; max-width: 100%; overflow-wrap: break-word; vertical-align: middle; word-wrap: break-word; width: 100%; letter-spacing: 1px; } .o-h1, h1 { font-size: 2.8rem; } .o-h2, h2 { font-size: 2.1rem; } .o-h3, h3 { font-size: 1.5rem; } .o-h4, h4 { font-size: 1.25rem; } .o-h5, h5 { font-size: 1.125rem; } .o-h6, h6 { font-size: 1rem; } .-tcenter { text-align: center; } /*------------ FORM.BLOCK ------------*/ .b-form, .b-form-wrap, .form-block, .form-block-field { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; max-width: 100%; width: 100%; position: relative; } .b-form, .b-form-wrap, .form-block, .form-block-field { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .b-form, .b-form-wrap, .form-block, .form-block-field { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .b-form.-fstart . { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .b-form.-fend { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .b-form.-fcenter { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .-onefield .form-block { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .b-form { } .b-form .b-form-wrap { max-width: 700px; padding: 40px; background-color: #fff; background-color: rgba(255,255,255,.90); z-index: 2; border: 1px solid #ccc; border-radius: 30px; } @media (max-width:768px) { .b-form .b-form-wrap { border-radius: 15px; } } .b-form--main .form-block { -webkit-transform: translateX(800px); -ms-transform: translateX(800px); transform: translateX(800px); -webkit-transition: -webkit-transform .6s cubic-bezier(.4, 0, 0, 1); transition: -webkit-transform .6s cubic-bezier(.4, 0, 0, 1); transition: transform .6s cubic-bezier(.4, 0, 0, 1); transition: transform .6s cubic-bezier(.4, 0, 0, 1), -webkit-transform .6s cubic-bezier(.4, 0, 0, 1) } .has-form-open .b-form--main .form-block { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } .has-form-open .b-form--main .form-block { -webkit-transition-delay: .2s; transition-delay: .2s } .b-form .form-header, .b-form .form-subheader { color: inherit; display: inline-block; font-display: swap; line-height: 1.3em; margin: 0; margin-bottom: 30px; max-width: 100%; overflow-wrap: break-word; vertical-align: middle; word-wrap: break-word; width: 100%; } .b-form .form-header { font-size: 1.4rem; } .b-form .form-subheader { font-size: 1.1rem; color: #999; } .b-form .form-header>*:last-child, .b-form .form-subheader>*:last-child { margin-bottom: 0; } .form-block-field { margin: 0; padding: 0; margin-bottom: 15px; border: 0; } .-onefield .form-block-field { max-width: calc(100% - 80px); width: calc(100% - 80px); } .form-block .o-buttons { margin-top: 15px; margin-bottom: 30px; } .-onefield .o-buttons { max-width: 90px; width: 90px; margin-left: 20px; margin-top: -30px; } .form-hpot { opacity: 0.001; position: absolute; z-index: -1; } .form-block-field>* { background-color: transparent; font-size: 1rem; padding: 0; margin: 0; } .form-block-field label, .form-block-field-input input, .form-block-field textarea, .form-block-field select, .form-block-field-radio div, .form-block-field-checkbox div { padding-bottom: 15px; color: #999; display: inline-block; vertical-align: middle; } .form-block-field label { font-size: 1rem; } .form-block-field select { height: 40px; } .form-block-field input::-webkit-input-placeholder, .form-block-field textarea::-webkit-input-placeholder { color: #adadad; } .form-block-field input::-moz-placeholder, .form-block-field textarea::-moz-placeholder { color: #adadad; } .form-block-field input::placeholder, .form-block-field textarea::placeholder { color: #adadad; } .form-block-field-radio>div, .form-block-field-checkbox>div { padding-bottom: 15px; } .form-label-text, .form-required, .form-message { display: inline-block; vertical-align: middle; } .form-label-text { padding-right: 10px; } .form-required { color: #bd081c; font-size: 1.5rem; line-height: 1em; position: absolute; bottom: 25px; left: -26px; height: 16px; width: 16px; margin-bottom: -8px; } .form-message, .form-success, .form-fatal { width: 100%; padding: 0; margin-top: 30px; font-size: 1rem; color: #bd081c; border-radius: 10px; font-weight: bold; position: relative; display: none; } .form-block-field .form-message, .form-block-field .form-success, .form-block-field .form-fatal { margin-top: 0; margin-bottom: 15px; } .form-success, .form-fatal { padding: 15px 10px; border-width: 1px; border-style: solid; border-color: #bd081c; box-shadow: 0 0 3px #bd081c; } .form-success { box-shadow: 0 0 3px #25d366; border-color: #25d366; color: #25d366; } .form-fatal:after { content: " !!! "; } .form-message.-active, .form-success.-active, .form-fatal.-active { display: inline-block; } .form-message:after { content: " !!! "; } .form-block-field-input input, .form-block-field-textarea textarea { color: #212121; padding: 15px; background-color: #f5f5f5; } .form-block-field-radio input, .form-block-field-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .form-block-field .form-block-field-options { width: 100%; padding-bottom: 0; } .form-block-field .form-block-field-option { padding-bottom: 15px; width: 100%; } .form-block-field .form-block-field-option:last-child { padding-bottom: 0; } .form-block-field .form-block-field-option label { line-height: 25px; display: inline-block; vertical-align: middle; padding-left: 40px; position: relative; color: #212121; padding-bottom: 0; cursor: pointer; overflow: hidden; } .form-block-field .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } .form-block-field .checkmark:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #bd081c; background-color: #4680C2; border-radius: 50%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .form-block-field label:hover input:not(:checked)~.checkmark:after { background-color: #ccc; } .form-block-field label:hover input~.checkmark:after, .form-block-field label input:checked~.checkmark:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .form-block-field .checkmark:after { -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1) } .form-block-field::before { content: ''; position: absolute; display: block; top: -10px; left: -10px; box-shadow: 0 0 3px #bd081c; z-index: -1; width: calc(100% + 20px); height: calc(100% + 20px); visibility: hidden; opacity: 0; } .form-block-field.-active::before { visibility: visible; opacity: 1; } .form-block-field-input::after, .form-block-field-select::after, .form-block-field-textarea::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; border-bottom: 2px solid #999 } .form-block-field-select::before { content: "▼"; position: absolute; right: 0; bottom: 15px; line-height: 20px; color: #999; font-size: 1.2rem; z-index: -1; } .form-block-field-textarea::before { content: ""; position: absolute; right: 0; bottom: 0; display: block; height: 0; width: 0; border-right: 15px solid #fff; border-top: 15px solid transparent; } input, select, textarea { width: 100%; max-width: 100%; } select { text-transform: none } select::-ms-expand { display: none } select::-ms-value { background: 0 0; color: inherit } textarea { overflow: auto; resize: vertical } .o-label { display: block; font-size: 1.25rem; padding-bottom: .8125rem } .o-input, .o-select, .o-textarea { padding-bottom: .8125rem; background-color: transparent; font-size: 1.5625rem; font-family: "Moderat Trial", sans-serif } /*------------ JS-SCROLL.ANIMATION ------------*/ .js-scroll { } .js-scroll.is-show { } body.is-transitioning .js-scroll { } .js-scroll-item { -webkit-transition: opacity 0.7s cubic-bezier(.4, 0, 0, 1), -webkit-transform 0.7s cubic-bezier(.4, 0, 0, 1); transition: opacity 0.7s cubic-bezier(.4, 0, 0, 1), -webkit-transform 0.7s cubic-bezier(.4, 0, 0, 1); -o-transition: transform 0.7s cubic-bezier(.4, 0, 0, 1), opacity 0.7s cubic-bezier(.4, 0, 0, 1); transition: transform 0.7s cubic-bezier(.4, 0, 0, 1), opacity 0.7s cubic-bezier(.4, 0, 0, 1); transition: transform 0.7s cubic-bezier(.4, 0, 0, 1), opacity 0.7s cubic-bezier(.4, 0, 0, 1), -webkit-transform 0.7s cubic-bezier(.4, 0, 0, 1); -webkit-transform: translateY(300px); -ms-transform: translateY(300px); transform: translateY(300px); opacity: 0; visibility: hidden; } .js-scroll.is-show .js-scroll-item { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; } body.is-transitioning .js-scroll .js-scroll-item { -webkit-transform: translateY(500px); -ms-transform: translateY(500px); transform: translateY(500px); opacity:0; } /*------------ C-NAV-BUTTON ------------*/ .c-nav-button { position: fixed; top: 60px; z-index: 1000; } .c-nav-button.-left { left: 30px; } .c-nav-button.-right { right: 30px; } .c-nav-button.-top { -webkit-transform: translateY(-300px); -ms-transform: translateY(-300px); transform: translateY(-300px); } .c-nav-button.-bottom { -webkit-transform: translateY(300px); -ms-transform: translateY(300px); transform: translateY(300px); } @media (max-width:900px) { body.is-loaded .c-nav-button { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .c-nav-button.-bottom { top:auto; bottom: 120px; } @media screen and (max-width:640px) { .c-nav-button.-bottom { bottom: 100px; } .c-nav-button.-left { left: 20px; } .c-nav-button.-right { right: 20px; } } .c-button, .c-button-icon { display: inline-block; vertical-align: middle; position: relative; } .c-button { padding: 10px; z-index: 2; font-size: 0; } .c-button::before { background-color: #101010; border-radius: 30px; content: ""; opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; opacity: .5; width: 60px; height: 60px; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .c-nav-button .c-button:active::before, .c-nav-button .c-button:active::before { -webkit-animation: hoverButton 0.3s 1 ease-in-out; animation: hoverButton 0.3s 1 ease-in-out } @-webkit-keyframes hoverButton {0% {opacity: 0;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);}100% {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}}@keyframes hoverButton {0% {opacity: 0;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);}100% {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}} .c-button-icon { background-color: #fff; border-radius: 50%; width: 40px; height: 40px; line-height: 40px; z-index: 2; overflow: hidden; } .c-button-icon .c-button-iconSvg { color: #212121; height: 40px; left: 0; margin: 0; max-width: 100%; padding: 2px; position: absolute; top: 0; width: 40px; z-index: 5; -webkit-transition: fill .3s cubic-bezier(.4, 0, 0, 1); transition: fill .3s cubic-bezier(.4, 0, 0, 1); } .has-nav-open .nav-button .c-button-iconSvg, .nav-button .c-button-iconSvg.-close { opacity: 0; z-index: 1; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .has-nav-open .nav-button .c-button-iconSvg.-close { opacity: 1; z-index: 2; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*------------ C-NAV.ANIMATION ------------*/ .c-nav-button { -webkit-transition: -webkit-transform .9s cubic-bezier(.4, 0, 0, 1); transition: -webkit-transform .9s cubic-bezier(.4, 0, 0, 1); transition: transform .9s cubic-bezier(.4, 0, 0, 1); transition: transform .9s cubic-bezier(.4, 0, 0, 1), -webkit-transform .9s cubic-bezier(.4, 0, 0, 1); } .c-nav-button .c-button-iconSvg, .c-button::before, .c-button::after { -webkit-transition: opacity .15s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: opacity .15s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), opacity .15s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), opacity .15s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .c-nav, .c-nav_main, .c-nav_list, .c-nav_item, .c-nav_link { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; max-width: 100%; width: 100% } .c-nav { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .c-nav_main, .c-nav_list, .c-nav_item, .c-nav_link { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-nav_list { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .c-nav_main { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .c-nav, .c-nav_item, .c-nav_link { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -ms-flex-line-pack: start; align-content: flex-start; } @media (min-width:901px) { .c-nav { } } body.has-nav-open .c-nav { } .c-nav_background { background-color: #fff; background-position: center; background-size: cover; bottom: 0; cursor: pointer; left: 0; position: fixed; right: 0; top: 0; background-color: rgba(255, 255, 255, .7); z-index: 800; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } body.has-nav-open .c-nav_background { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .c-nav_main { height: 100%; background-color: #fff; overflow: hidden; overflow-y: auto; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); bottom: 0; right: 0; position: fixed; top: 0; z-index: 850; } @media (min-width:901px) { .c-nav_main { height: auto; overflow: hidden; position: relative; z-index: 0; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } } .has-nav-open .c-nav_main { visibility: visible; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .c-nav_main { max-width: 800px; } @media (min-width:901px) { .c-nav_main { max-width: 100%; } .nav-btn-visible .c-nav_main { max-width: 800px; } } .c-nav_list { margin: 15px 0; padding: 0; list-style: none; position: relative; max-width: 1300px; } .c-nav_item { width: auto; margin-bottom: 0; } @media (max-width:900px) { .c-nav_list { margin: 40px 0; } .c-nav_item { width:100%; } } .c-nav_link { color: #101010; position: relative; padding: 0 0.9375rem; font-size: 1.3rem; line-height: 50px; width: auto; z-index: 4 } .c-nav_link:active, .c-nav_link:hover { text-decoration: underline; } @media (max-width:900px) { .c-nav_link { font-size: 3.125rem; line-height: 2em; padding: 0; } } @media (max-width:700px) { .c-nav_link { font-size: 2.1875rem } } .c-nav_label { display: inline-block; -webkit-transform: translateX(800px); -ms-transform: translateX(800px); transform: translateX(800px); } @media (min-width:901px) { .c-nav_label { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } /*------------ C-NAV.ANIMATION ------------*/ @media (max-width:900px) { .has-nav-active .c-nav_background, .has-nav-active .c-nav_main { -webkit-transition: -webkit-transform .4s cubic-bezier(.4, 0, 0, 1) .4s; transition: -webkit-transform .4s cubic-bezier(.4, 0, 0, 1) .4s; transition: transform .4s cubic-bezier(.4, 0, 0, 1) .4s; transition: transform .4s cubic-bezier(.4, 0, 0, 1) .4s, -webkit-transform .4s cubic-bezier(.4, 0, 0, 1) .4s; } .c-nav_background { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } body.has-nav-open .c-nav_main { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } body.has-nav-open .c-nav_background { -webkit-transition-delay: 0s; transition-delay: 0s; } .c-nav_background, .c-nav_main { -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; } .c-nav_label { -webkit-transition: -webkit-transform .6s cubic-bezier(.4, 0, 0, 1); transition: -webkit-transform .6s cubic-bezier(.4, 0, 0, 1); transition: transform .6s cubic-bezier(.4, 0, 0, 1); transition: transform .6s cubic-bezier(.4, 0, 0, 1), -webkit-transform .6s cubic-bezier(.4, 0, 0, 1) } .c-nav_item:nth-child(1) .c-nav_label {-webkit-transition-delay: .2s;transition-delay: .2s } .has-nav-open .c-nav_item:nth-child(1) .c-nav_label {-webkit-transition-delay: .1s;transition-delay: .1s } .c-nav_item:nth-child(2) .c-nav_label {-webkit-transition-delay: .15s;transition-delay: .15s } .has-nav-open .c-nav_item:nth-child(2) .c-nav_label {-webkit-transition-delay: .2s;transition-delay: .2s } .c-nav_item:nth-child(3) .c-nav_label {-webkit-transition-delay: .1s;transition-delay: .1s } .has-nav-open .c-nav_item:nth-child(3) .c-nav_label {-webkit-transition-delay: .3s;transition-delay: .3s } .c-nav_item:nth-child(4) .c-nav_label {-webkit-transition-delay: 50ms;transition-delay: 50ms } .has-nav-open .c-nav_item:nth-child(4) .c-nav_label {-webkit-transition-delay: .4s;transition-delay: .4s } .has-nav-open .c-nav_item:nth-child(5) .c-nav_label {-webkit-transition-delay: .5s;transition-delay: .5s } .has-nav-open .c-nav_item:nth-child(6) .c-nav_label {-webkit-transition-delay: .6s;transition-delay: .6s } .has-nav-open .c-nav_item:nth-child(7) .c-nav_label {-webkit-transition-delay: .7s;transition-delay: .7s } .has-nav-open .c-nav_item:nth-child(8) .c-nav_label {-webkit-transition-delay: .8s;transition-delay: .8s } .has-nav-open .c-nav_label { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .c-content, .c-content-background, .c-content-wrap, .c-content-box, .c-content-text, .с-content-image, .c-content-text--wrap, .c-content-coll, .o-content-buttons, .o-buttons, .o-button, .s-map, .s-map-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; position: relative; } .c-content, .c-content-background, .c-content-wrap, .c-content-box, .c-content-text, .с-content-image, .c-content-coll, .o-content-buttons, .s-map, .s-map-wrap { max-width: 100%; width: 100%; } .c-content, .c-content-wrap, .o-button.-nocircle { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .o-button { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .c-content-wrap { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .s-bg { display: block; position: absolute; top: 0; left: 0; opacity: .5; overflow: hidden; pointer-events: none; z-index: -1; width: 100%; min-height: 100vh; } .s-bg img { object-fit: cover; } /*------------ S-HEADER ------------*/ .s-header, .s-header--wrapper, .s-header--left, .s-burger, .s-header--logo, .s-header--logo a, .s-header--center, .s-header--right, .s-header--socials, .s-menu, .s-menu nav, .s-menu nav ul, .s-contacts, .s-request, .s-contacts--phone, .s-contacts--address, .s-btn--request { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .s-header--wrapper, .s-header--socials { -ms-flex-flow: row nowrap; flex-flow: row nowrap; } @media screen and (max-width: 768px) { .s-header--wrapper { -ms-flex-flow: row wrap; flex-flow: row wrap; } } .s-burger button, .s-contacts { -ms-flex-flow: column wrap; flex-flow: column wrap; } .s-header, .s-header--wrapper, .s-header--socials, .s-menu, .s-menu nav, .s-menu nav ul, .s-contacts--phone, .s-contacts--address { max-width: 100%; width: 100%; } .s-header { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .s-header--socials, .s-contacts--phone, .s-contacts--address { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .s-burger, .s-header--wrapper, .s-header--left, .s-header--center, .s-header--right, .s-contacts, .s-request, .s-header--logo, .s-header--logo a { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .s-burger, .s-header--logo { -ms-flex-line-pack: center; align-content: center; } .s-header { padding: calc(var(--hCount) / 3) calc(var(--hCount) / 3); padding-bottom: 30px; } .s-header--wrapper { position: relative; z-index: 901; max-width: var(--maxWidthBlock); padding: 0; margin: 0; padding-left: calc(var(--hCount) / 2); padding-right: calc(var(--hCount) / 2); border-radius: calc(var(--hCount) - var(--hCount) / 6); background: var(--menuColor); box-shadow: var(--blockShadow); padding: calc(var(--hCount) / 3) calc(var(--hCount) / 2); } @media screen and (max-width: 768px) { .s-header--wrapper { overflow: hidden; } } .s-burger { margin-right: calc(var(--hCount) / 2); height: var(--hCount); } .s-burger--mobile { display: none; } @media screen and (max-width: 1000px) { .s-burger { display: none; } .s-burger--mobile { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 0; margin-left: calc(var(--hCount) / 2); } } .s-burger button { border: none; background-color: transparent; border-radius: 0; cursor: pointer; padding: 0; } .s-burger .line { -webkit-transition: opacity .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: opacity .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), opacity .15s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), opacity .15s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .s-burger .line1 { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; } .has-nav-open .s-burger .line1 { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 8px 0px; -ms-transform-origin: 8px 0px; transform-origin: 8px 0px; } .s-burger .line2 { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; } .has-nav-open .s-burger .line2 { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 10px 25px; -ms-transform-origin: 10px 25px; transform-origin: 10px 25px; } .s-burger .line3 { opacity: 1; } .has-nav-open .s-burger .line3 { opacity: 0; } @media (hover: hover) { .s-burger:hover .line3 { -webkit-animation: hoverButton 0.3s 1 ease-in-out; animation: hoverButton 0.3s 1 ease-in-out } } @media screen and (max-width: 1000px) { .s-burger--mobile button { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes hoverButton { 0% { -webkit-transform: translateX(calc(var(--hCount) / 6)); -ms-transform: translateX(calc(var(--hCount) / 6)); transform: translateX(calc(var(--hCount) / 6)) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } @keyframes hoverButton { 0% { -webkit-transform: translateX(calc(var(--hCount) / 6)); -ms-transform: translateX(calc(var(--hCount) / 6)); transform: translateX(calc(var(--hCount) / 6)) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .s-header--logo { height: var(--hCount); } .s-header--logo img { height: var(--hCount); max-width: none; width: auto; } @media screen and (max-width: 480px) { .s-header--logo img { height: calc(var(--hCount) - var(--hCount) / 3); border-radius: 5px; } } @media screen and (max-width: 340px) { .s-header--logo img { height: calc(var(--hCount) - var(--hCount) / 2.5); } } .s-header--center { padding: 0 calc(var(--hCount) / 2); -webkit-flex: 1 1 auto; flex: 1 1 auto; } @media screen and (max-width: 480px) { .s-header--center { padding: 0; } } .s-header--socials { } @media screen and (max-width: 1024px) { .s-header--socials { display:none; } } .s-menu .s-header--socials, .s-menu .s-header--socials .o-buttons { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .s-menu .s-header--socials { margin-top: calc(var(--hCount) / 2); margin-top: var(--hCount); display:none; } @media screen and (max-width: 1024px) { .s-menu .s-header--socials { display: -webkit-box; display: -ms-flexbox; display: flex; } } .s-contacts { text-align: right; margin-right: calc(var(--hCount) / 2); max-width: calc(var(--hCount) * 4 - var(--hCount) / 2); } @media screen and (max-width: 880px) { .s-contacts { display:none } } .s-menu .s-contacts { display:none; margin: 0; margin-top: calc(var(--hCount) / 2); max-width: 100%; } @media screen and (max-width: 880px) { .s-menu .s-contacts { display: -webkit-box; display: -ms-flexbox; display: flex; } } .s-menu .s-contacts--phone, .s-menu .s-contacts--address { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .s-menu .s-contacts--address { margin-top: calc(var(--hCount) / 6); } .s-contacts--address { opacity: 0.6; } .s-contacts--phone *, .s-contacts--address * { padding: 0; margin: 0; line-height: 1.2; color: var(--FontDarkColor); text-decoration: none; font-style: normal; } .s-contacts--phone * { font-size: 1.2rem; font-weight: 700; } .s-contacts--address * { font-size: 1rem; } .s-request { } @media screen and (max-width: 768px) { .s-request { display:none; } } .s-menu .s-request { display:none; margin-top: calc(var(--hCount) / 2); width: 100%; max-width: 100%; } @media screen and (max-width: 768px) { .s-menu .s-request { display: -webkit-box; display: -ms-flexbox; display: flex; } } .s-menu, .s-overlay { -webkit-transition: opacity 0.7s cubic-bezier(.4, 0, 0, 1), -webkit-transform 0.7s cubic-bezier(.4, 0, 0, 1); transition: opacity 0.7s cubic-bezier(.4, 0, 0, 1), -webkit-transform 0.7s cubic-bezier(.4, 0, 0, 1); -o-transition: transform 0.7s cubic-bezier(.4, 0, 0, 1), opacity 0.7s cubic-bezier(.4, 0, 0, 1); transition: transform 0.7s cubic-bezier(.4, 0, 0, 1), opacity 0.7s cubic-bezier(.4, 0, 0, 1); transition: transform 0.7s cubic-bezier(.4, 0, 0, 1), opacity 0.7s cubic-bezier(.4, 0, 0, 1), -webkit-transform 0.7s cubic-bezier(.4, 0, 0, 1); } .s-menu { position: absolute; left: 0; top: calc(var(--hCount) + var(--hCount)); border-radius: var(--hCount); background: var(--menuColor); box-shadow: var(--blockShadow); padding: calc(var(--hCount) - var(--hCount) / 3); opacity: 0; pointer-events: none; } @media screen and (max-width: 768px) { .s-menu { position: relative; background: transparent; box-shadow: none; max-height: 0; opacity: 1; overflow: hidden; padding: 0; border-radius: 0; top: auto; -webkit-transition: max-height .3s cubic-bezier(.4, 0, 0, 1); transition: max-height .3s cubic-bezier(.4, 0, 0, 1); } } .s-overlay { position: fixed; top: 0; left: 0; z-index: 900; width: 100%; height: 100%; background: var(--colorOverlay); backdrop-filter: blur(var(--blurOverlay)); -webkit-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; cursor: pointer; pointer-events: none; opacity: 0; } .has-nav-open .s-menu, .has-nav-open .s-overlay { opacity: 1; pointer-events: auto; max-height: 1000px; } @media screen and (max-width: 768px) { .has-nav-open .s-menu { max-height: calc(100vh - var(--hCount)* 2 - var(--hCount)* 2); overflow-y: scroll; } } .s-menu nav ul { margin: 0; padding: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .s-menu nav li, .s-menu nav a, .s-menu nav span { display: inline-block; vertical-align: middle; list-style: none; margin: 0; padding: 0; width: 100%; } .s-menu nav { width: calc(100% + var(--hCount)); max-width: calc(100% + var(--hCount)); margin-right: calc(var(--hCount) * -1); } .s-menu nav > ul { margin-right: calc(var(--hCount) / 2); max-width: none; width: auto; } @media screen and (max-width: 1000px) { .s-menu nav { width: calc(100% + var(--hCount) / 2); max-width: calc(100% + var(--hCount) / 2); margin-right: calc(var(--hCount) / 2 * -1); } .s-menu nav > ul { margin-right: calc(var(--hCount) / 2); } } @media screen and (max-width: 768px) { .s-menu nav { width: 100%; max-width: 100%; margin-right: 0; } .s-menu nav > ul { border-radius: calc(var(--hCount) / 3); border: 1px solid #ECF3F1; background: #F0F7F5; padding: calc(var(--hCount) / 3); margin-right: 0; max-width: 100%; margin-top: calc(var(--hCount) / 3); width: 100%; } } .s-menu nav li { position: relative; } .s-menu nav a, .s-menu nav span { color: var(--linkColor); font-size: 16px; font-style: normal; font-weight: 700; line-height: calc(var(--hCount) - var(--hCount) / 3); } @media screen and (max-width: 350px) { .s-menu nav a, .s-menu nav span { font-size: 15px; } } .s-menu nav span { font-weight: 400; } .s-menu nav li.--active > a, .s-menu nav li.--active > span { color: var(--linkActive); } .s-menu nav a:hover { opacity: .8; } .s-menu nav a::after { content: "→"; display: inline-block; width: calc(var(--hCount) / 6); height: calc(var(--hCount) / 6); opacity: .3; margin-left: 2px; } @media screen and (max-width: 768px) { .s-menu > *:last-child { margin-bottom: var(--hCount); } } .s-menu--parent { position: relative; } .s-menu--arrow { display: none; } @media screen and (max-width: 768px) { .s-menu nav > ul > ul { max-height: 0; overflow: hidden; -webkit-transition: max-height .3s cubic-bezier(.4, 0, 0, 1); transition: max-height .3s cubic-bezier(.4, 0, 0, 1); } .s-menu nav > ul.has-parent-open > ul { max-height: 1000px; } .s-menu--arrow { display: block; width: calc(var(--hCount) / 2); min-width: calc(var(--hCount) / 2); height: calc(var(--hCount) / 2); min-height: calc(var(--hCount) / 2); border-radius: 50%; background-color: #E8F0ED; position: absolute; right: 0; top: 50%; margin-top: calc(var(--hCount) / 4 * -1); } .s-menu--arrow::before { content: ""; display: block; width: calc(var(--hCount) / 4); min-width: calc(var(--hCount) / 4); height: calc(var(--hCount) / 4); min-height: calc(var(--hCount) / 4); background-image: url('data:image/svg+xml,\ '); background-size: 100% 100%; background-repeat: no-repeat; position: absolute; left: 50%; top: 50%; margin-top: calc(var(--hCount) / 8 * -1); margin-left: calc(var(--hCount) / 8 * -1); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .has-parent-open .s-menu--arrow::before { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } } /*------------ P-HEADER ------------*/ .c-content.p-header { } .c-content.p-header .c-content-wrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-content.p-header h1 { text-align: center; max-width: 900px; } .c-content.p-header a { display:none } .c-content.p-header .c-content-wrap>* { margin-bottom: 0 } /*------------ S-FOOTER ------------*/ .s-footer { } .s-footer .s-header--logo, .s-footer .s-header--logo * { height: auto; max-width: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .s-footer .s-header--logo { margin-bottom: 30px; } .s-footer .s-header--logo img { max-width: 250px; } .s-footer .s-menu { position: relative; left: 0; top: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; max-height: none; pointer-events: auto; margin-bottom: 30px; } .s-footer .s-menu nav { width: calc(100% + var(--hCount) / 2); max-width: calc(100% + var(--hCount) / 2); margin-right: calc(var(--hCount) / 2 * -1); } .s-footer .--foterLine nav { margin-bottom: 0; } .s-footer .s-menu > *:last-child { margin-bottom: 0; } .s-footer .s-menu nav > ul { border-radius: 0; border: 0; background: transparent; margin-top: 0; } .s-footer .s-menu nav > ul > ul { max-height: 1000px; } .s-footer .s-content-background { background-color: #fff; } .s-footer .--foterLine { margin-top: 30px; } .s-footer .--foterLine * { display: inline-block; vertical-align: middle; line-height: 25px; list-style-type: none; margin: 0; padding: 0; color: #838383; font-size: 14px; } .s-footer .--foterLine > * { width: 100%; margin-bottom: 15px; } .s-footer .--foterLine ul, .s-footer .--foterLine > *:last-child { margin-bottom: 0; } .s-footer .--foterLine ul { margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); } .s-footer .--foterLine li { margin: 0; padding: 15px; padding-top: 0; width: 100%; max-width: 100%; } .s-footer .--foterLine a, .s-footer .--foterLine span { } /*------------ O.BUTTONS ------------*/ .o-buttons { margin: -10px; max-width: calc(100% + 20px); width: 110%; } .o-button { background-color: transparent; background-image: none; border: 0; border-radius: 25px; cursor: pointer; height: 50px; line-height: 50px; margin: 0; margin: 10px; min-width: 50px; outline: none!important; text-decoration: none!important; padding: 0; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: manipulation; touch-action: manipulation; z-index: 2; box-shadow: 0px 4px 5px 0 rgba(0, 0, 0, .3); } .is-desktop .o-button.j-link:not([data-act="true"]) { display: none; } .o-button::before { -webkit-transition: opacity .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: opacity .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), opacity .15s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), opacity .15s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .o-button::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 25px; background-color: inherit; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index: -1; } .is-desktop .o-button:hover::before { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .is-mobile .o-button:active::before { -webkit-animation: hoverButtons 0.3s 1 ease-in-out; animation: hoverButtons 0.3s 1 ease-in-out } .o-button:active, .o-button:hover { filter: saturate(100%) !important; } @-webkit-keyframes hoverButtons {0% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}100% {-webkit-transform: scale(1.15);-ms-transform: scale(1.15);transform: scale(1.15);}}@keyframes hoverButtons {0% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}100% {-webkit-transform: scale(1.15);-ms-transform: scale(1.15);transform: scale(1.15);}} .o-button_circle { position: absolute; top: 50%; left: 5px; border-radius: 50%; z-index: 3; margin: 0; margin-top: -20px; width: 40px; height: 40px; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .is-desktop .o-button:not(.-nolable):hover .o-button_circle { -webkit-transform: translate(-5px, 0); transform: translate(-5px, 0) } .is-mobile .o-button:not(.-nolable):active .o-button_circle { -webkit-animation: hoverButtonС 0.3s 1 ease-in-out; animation: hoverButtonС 0.3s 1 ease-in-out } @-webkit-keyframes hoverButtonС {0% {opacity: 0;-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);transform: translate(0, 0);}100% {opacity: 1;-webkit-transform: translate(-5px, 0);-ms-transform: translate(-5px, 0);transform: translate(-5px, 0);}}@keyframes hoverButtonС {0% {opacity: 0;-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);transform: translate(0, 0);}100% {opacity: 1;-webkit-transform: translate(-5px, 0);-ms-transform: translate(-5px, 0);transform: translate(-5px, 0);}} /* BUTTON_CIRCLE.BEFORE.AFTER */ .o-button_circle::after, .o-button_circle::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* BUTTON_CIRCLE.BEFORE */ .o-button_circle::before { background-color: #fff; } /* BUTTON_CIRCLE.AFTER */ .o-button_circle::after { background-color: inherit; color: #fff; -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } .o-button:hover .o-button_circle::after { -webkit-transform: scale(.85); -ms-transform: scale(.85); transform: scale(.85); } .o-button_icon-wrap { width: 30px; height: 30px; line-height: 30px; margin-left: -15px; margin-top: -15px; position: absolute; top: 50%; left: 50%; z-index: 3; color: inherit !important; } .o-button_icon-wrap svg { color: #fff; height: 100%; left: 0; margin: 0; max-width: 100%; padding: 0; position: absolute; top: 0; width: 100%; z-index: 5; -webkit-transition: fill .3s cubic-bezier(.4, 0, 0, 1); transition: fill .3s cubic-bezier(.4, 0, 0, 1); } /* BUTTON_LABEL */ .o-button_label { color: #fff!important; font-size: 16px; line-height: 16px; padding: 0 20px; padding-left: 55px; text-align: left; margin-top: -2px; display: inline-block; vertical-align: middle; word-break:keep-all ; overflow-wrap: normal; } .o-button.-nolable .o-button_label { display:none } .o-button_label::after { content: attr(data-text); line-height: 16px; display: inline-block; vertical-align: middle; } .o-button.--white .o-button_label, .o-button.--lightgrey .o-button_label { color: #212121!important; } .o-button.-nocircle .o-button_label { padding-left: 20px; text-align: center; } .o-button.-link .o-button_label { padding: 0; } /*------------ C-CONTENT ------------*/ .c-content-wrap { max-width: 1600px; padding-right: 90px; padding-left: 90px; z-index: 2; } @media screen and (max-width: 1100px) { .c-content-wrap { padding-right: 60px; padding-left: 60px; } } @media screen and (max-width: 768px) { .c-content-wrap { padding-right: 30px; padding-left: 30px; } } .c-content-background { position: absolute; bottom: 0; right: 0; top: 0; left: 0; max-width: 100%; overflow: hidden; z-index: 0; } .c-content-background picture { height: 100%; } .c-content-background img { object-fit: cover; height: 100%; width: auto; min-width: 100%; max-width: none; vertical-align: bottom; } .c-content-coll { padding: 0 15px; } .c-content-coll.--coll-3 { max-width: 25%; } @media screen and (max-width: 900px) { .c-content-coll.--coll-3 { max-width: 33.3333333333%; } } .c-content-coll.--coll-4 { max-width: 33.3333333333%; } @media screen and (max-width: 980px) { .c-content-coll.--coll-4 { max-width: 50%; } } @media screen and (max-width: 640px) { .c-content-coll.--coll-4 { max-width: 100%; } } .c-content-coll.--coll-5 { max-width: 41.6666666666%; } @media screen and (max-width: 768px) { .c-content-coll.--coll-5 { max-width: 100%; } } .c-content-coll.--coll-6 { max-width: 50%; } @media screen and (max-width: 640px) { .c-content-coll.--coll-6 { max-width: 100%; } } .c-content-coll.--coll-7 { max-width: 58.3333333333%; } @media screen and (max-width: 768px) { .c-content-coll.--coll-7 { max-width: 100%; } } .c-content-coll.--coll-8 { max-width: 66.6666666666%; } @media screen and (max-width: 980px) { .c-content-coll.--coll-8 { max-width: 50%; } } @media screen and (max-width: 640px) { .c-content-coll.--coll-8 { max-width: 100%; } } .c-content-coll.--coll-9 { max-width: 75%; } @media screen and (max-width: 980px) { .c-content-coll.--coll-9 { max-width: 66.6666666666%; } } @media screen and (max-width: 768px) { .c-content-coll.--coll-3, .c-content-coll.--coll-9 { max-width: 100%; } } .c-content-coll.--coll-12 { max-width: 100%; } .c-content-coll>*:last-child { margin-bottom: 0!important; } .c-content-box { } .c-content-box.--selfStart { -ms-flex-item-align: start; align-self: flex-start; } .c-content-box.--selfCenter { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .c-content-box.--selfStretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } .c-content-box.--selfEnd { -ms-flex-item-align: end; align-self: flex-end; } @media screen and (max-width: 980px) { .c-content-box { } } .c-content-text--wrap { text-align: left; } .c-content-text--wrap:last-child, .c-content-text:last-child { margin-bottom: 0; } .c-content-text--wrap, .c-content-text p { margin-bottom: 15px; } .c-content-text>*:last-child, .c-content-text--wrap>*:last-child { margin-bottom: 0; } .c-content-text p:first-of-type { padding-left: 40px; } .c-content-text.--noImg p { padding-left: 0; width: 100%; } .c-content-text svg { color: inherit; height: 30px; width: 30px; margin-right: 10px; position: absolute; left: 0; top: 0; } .c-content-text a, .c-content-text .j-link { color: inherit; } /*------------ C-HOME ------------*/ .c-home-image { } .c-home { z-index: 99; } .c-home .c-content-wrap { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .c-home-text { max-width: 924px; margin-top: 150px; margin-bottom: 150px; } @media screen and (max-width: 1400px) { .c-home-text { max-width: 650px; } } @media screen and (max-width: 1200px) { .c-home-text { margin-top: 400px; } } @media screen and (max-width: 900px) { .c-home-text { margin-top: 600px; } } @media screen and (max-width: 440px) { .c-home-text { margin-top: 100px; } } .c-home-image { width: 100%; position: absolute; top: -60px; bottom: -60px; right: 120px; } @media screen and (max-width: 900px) { .c-home-image { right: 90px; width: calc(100% - 180px); top: 0; bottom: 0; } } @media screen and (max-width: 768px) { .c-home-image { right: 30px; width: calc(100% - 60px); } } .c-home-image picture { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 100%; overflow: visible; } @media screen and (max-width: 768px) { .c-home-image picture { border-radius: 15px; } } .c-home .c-home-image img { height: 100%; width: auto; max-width: 100%; } .c-home.--animate .c-home-image img { -webkit-animation: slideImage 10s; animation: slideImage 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @media screen and (max-width: 900px) { .c-home .c-home-image img { height: auto; width: 100%; max-width: 100%; } } @-webkit-keyframes slideImage { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px) } 50% { -webkit-transform: translateY(20px); transform: translateY(20px) } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px) } } @keyframes slideImage { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px) } 50% { -webkit-transform: translateY(20px); transform: translateY(20px) } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px) } } .c-home h1 { font-size: 4rem; line-height: 1.4em; letter-spacing: 1px; word-wrap: normal; text-transform: uppercase; } @media screen and (max-width: 1400px) { .c-home h1 { font-size: 5vw; } } @media screen and (max-width: 900px) { .c-home h1 { font-size: 6.8vw; } } .c-home .c-content-text { } .c-home .c-content-text p { letter-spacing: 0.5px; } /*------------ C-GALLERY ------------*/ .c-gallery-frame, .c-gallery-slides, .c-gallery--item, .c-gallery--link, .c-gallery--overlay { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; max-width: 100%; width: 100%; position: relative; } .c-content.c-gallery.--home .c-content-wrap, .c-gallery--item, .c-gallery--link, .c-gallery--overlay { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .c-gallery--overlay { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .c-content.c-gallery .c-content-coll, .c-gallery--item, .c-gallery--link { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .c-content.c-gallery { } .c-content.c-gallery .c-content-wrap { } .c-content.c-gallery.--home .c-content-wrap { } .c-content.c-gallery.--home .c-gallery-frame { overflow:hidden; } .c-content.c-gallery.--home .c-gallery-slides { /*-ms-flex-flow: row nowrap; flex-flow: row nowrap;*/ } .c-gallery-header { margin: 0; margin-top: 60px; margin-bottom: 60px; } .c-gallery-header:first-child { margin-top: 0; } .c-content.c-gallery .c-content-row { -ms-flex-flow: row nowrap; flex-flow: row nowrap; overflow: hidden; max-width: calc(100% + 2px); min-width: calc(100% + 2px); margin-right: -2px; } .c-content.c-gallery .c-content-row:last-child { margin-bottom: -15px; } .c-content.c-gallery .c-content-row:nth-of-type(even) { -ms-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap; } @media (max-width:768px) { .c-content.c-gallery .c-content-row { -ms-flex-flow: row wrap!important; flex-flow: row wrap!important; } } .c-content.c-gallery .c-content-coll { max-width: 50%; min-width: 50%; padding: 0; } @media (max-width:768px) { .c-content.c-gallery .c-content-row .c-content-coll { display: none; max-width: 100%; min-width: 100%; } .c-content.c-gallery .c-content-row .c-content-coll:nth-child(1), .c-content.c-gallery .c-content-row .c-content-coll:nth-child(2) { display: -webkit-box; display: -ms-flexbox; display: flex; } } .c-gallery--item { border-right: 2px solid transparent; border-bottom: 2px solid transparent; max-width: 50%; position: relative; overflow: hidden; margin: 0; padding:0; } .c-content.c-gallery .c-content-coll:first-child .c-gallery--item { max-width: 100%; } .c-gallery--link { background-color: #fff; } .c-content.c-gallery picture { width: 100%; height: 100%; } .c-gallery--overlay { position: absolute; right: 0; bottom: 0; left: 0; background-color: rgba(255,255,255, .9)!important; margin: 0; padding:0; } @media (max-width:700px) { .c-gallery--overlay { display: none; } } .c-gallery--header { position: relative; padding: 30px; } @media (max-width:768px) { .c-gallery--header { padding: 15px; } } .c-gallery--header>* { color: #212121!important; font-weight: 700; margin-bottom: 0; } .c-gallery--overlay:active .c-gallery--header>*, .c-gallery--overlay:hover .c-gallery--header>* { text-decoration: underline; } .c-gallery .g-product-btn { opacity: 0.6; } .c-gallery .g-product-btn:hover { opacity: 0.9; } .c-gallery .g-product-btn.--prev { left: 40px; } .c-gallery .g-product-btn.--next { right: 40px; } @media (max-width: 1100px){ .c-gallery .g-product-btn.--prev { left: 30px; } .c-gallery .g-product-btn.--next { right: 30px; } } .c-gallery .g-product-dots { margin-top: 30px; } .c-gallery .g-product-dots .c-content-wrap { max-width: 100%; padding-right: 0; padding-left: 0; } .c-gallery .g-product-dots .c-content-row { overflow: visible; } /*------------ C-PRODUCT_SUGGEST.ANIMATION ------------*/ .c-gallery--overlay { -webkit-transition: -webkit-transform .6s cubic-bezier(.4, 0, 0, 1); transition: -webkit-transform .6s cubic-bezier(.4, 0, 0, 1); transition: transform .6s cubic-bezier(.4, 0, 0, 1); transition: transform .6s cubic-bezier(.4, 0, 0, 1), -webkit-transform .6s cubic-bezier(.4, 0, 0, 1); -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .c-gallery--link.-active:not(.cart-button) .c-gallery--overlay, .c-gallery--link:not(.-notactive):hover .c-gallery--overlay { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /*------------ C-ACTION ------------*/ /*------------ C-TAGS ------------*/ .c-content.c-tags .c-content-row { margin: -5px; } .c-content.c-tags a { display: inline-block; vertical-align: middle; border: 2px solid #fff; border-color: inherit; border-radius: 25px; text-align: center; font-size: 14px; margin: 5px; padding: 5px 10px; } /*------------ O-PAGINATION ------------*/ .c-content.o-pagination .c-content-wrap { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; overflow: visible; } .c-content.o-pagination .c-content-row.--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-content.o-pagination .c-content-row.--end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .c-content.o-pagination { z-index: 3; background-color: #fff; } .c-content.o-pagination .c-content-row { margin-right: -15px; margin-bottom: -15px; max-width: calc(100% + 15px); width: calc(100% + 15px); } .o-pagination-button { background-color: transparent; background-image: none; border: 0; border-radius: 25px; cursor: pointer; height: 50px; margin: 0; margin-right: 15px; margin-bottom: 15px; width: 50px; outline: none!important; padding: 0; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; z-index: 2; } .o-pagination-button.-select { width: 150px; } .o-pagination-button::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 35px; background-color: #666; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index: -1; -webkit-transition: opacity .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: opacity .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), opacity .15s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), opacity .15s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .o-pagination-button:hover::before, .o-pagination-button:active::before, .o-pagination-button.active::before { background-color: #000; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .o-pagination-button:focus::before { background-color: #000 } .o-pagination-circle { position: absolute; top: 50%; left: 5px; background-color: #666; border-radius: 50%; z-index: 3; margin: 0; margin-top: -20px; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; font-size: 18px; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .o-pagination-button.active .o-pagination-circle, .o-pagination-button:hover .o-pagination-circle { color: #212121; } .o-pagination-button.is-active .o-pagination-circle { -webkit-transform: translate(-7px, 0); transform: translate(-7px, 0) } .o-pagination-circle::before { content: ""; position: absolute; top: 0; left: 0; background-color: #fff; border-radius: 50%; -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); width: 40px; height: 40px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); z-index: -1; } .o-pagination-button:hover .o-pagination-circle::before, .o-pagination-button.active .o-pagination-circle::before, .o-pagination-button.is-active .o-pagination-circle::before { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .o-pagination-icon { width: 32px; height: 32px; margin-left: -16px; margin-top: -16px; position: absolute; top: 50%; left: 50%; z-index: 3; } .o-pagination-icon svg { color: #fff; height: 100%; left: 0; margin: 0; max-width: 100%; padding: 0; position: absolute; top: 0; width: 100%; z-index: 5; -webkit-transition: fill .3s cubic-bezier(.4, 0, 0, 1); transition: fill .3s cubic-bezier(.4, 0, 0, 1); } .o-pagination .o-pagination-button.is-active svg, .o-pagination .o-pagination-button:hover svg { color: #101010; } /* PAGINATION LABEL */ .o-pagination-label { color: #fff; font-family: 'Rubik', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; font-size: 1.2rem; font-weight: normal; letter-spacing: -.01em; line-height: 18px; padding: 0 30px; padding-left: 55px; line-height: 50px; display: inline-block; vertical-align: middle; } .o-pagination-select { position: absolute; top: 0; left: 10px; right: 10px; z-index: -2; background-color: #fff; background-color: rgba(255,255,255,.95); border-radius: 0 0 25px 25px; padding: 15px; margin-top: 45px; } .o-pagination-select .o-pagination-label { color: #212121; width: 100%; line-height: 2; border-radius: 25px; padding: 0 15px; text-align: center; font-size: 1.1rem; } .o-pagination-select .o-pagination-label:hover, .o-pagination-select .o-pagination-label.active { background-color: #ededed; } /*------------ O-BUTTON_CIRCLE.ANIMATION ------------*/ .o-pagination-button { opacity:0; visibility: hidden; -webkit-transform: scale(.25); -ms-transform: scale(.25); transform: scale(.25); -webkit-transition: opacity .5s, -webkit-transform .5s cubic-bezier(.4, 0, 0, 1); transition: opacity .5s, -webkit-transform .5s cubic-bezier(.4, 0, 0, 1); -o-transition: transform .5s cubic-bezier(.4, 0, 0, 1), opacity .5s; transition: transform .5s cubic-bezier(.4, 0, 0, 1), opacity .5s; transition: transform .5s cubic-bezier(.4, 0, 0, 1), opacity .5s, -webkit-transform .5s cubic-bezier(.4, 0, 0, 1); } .o-pagination.is-show .o-pagination-button { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; } body.is-transitioning .o-pagination .o-pagination-button { opacity:0; -webkit-transform: scale(.25); -ms-transform: scale(.25); transform: scale(.25); } .o-pagination .o-pagination-button .o-pagination-select { opacity:0; visibility: hidden; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: opacity .5s, -webkit-transform .5s cubic-bezier(.4, 0, 0, 1); transition: opacity .5s, -webkit-transform .5s cubic-bezier(.4, 0, 0, 1); -o-transition: transform .5s cubic-bezier(.4, 0, 0, 1), opacity .5s; transition: transform .5s cubic-bezier(.4, 0, 0, 1), opacity .5s; transition: transform .5s cubic-bezier(.4, 0, 0, 1), opacity .5s, -webkit-transform .5s cubic-bezier(.4, 0, 0, 1); } .o-pagination .o-pagination-button.is-active .o-pagination-select { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /*------------ O-NOTES ------------*/ .c-content.o-notes { } .c-content.o-notes .c-content-coll { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } @media screen and (max-width:640px) { .c-content.o-notes .c-content-coll { max-width: 100%; } } .o-notes-block { background-color: #fff; position: relative; width: 100%; } .o-notes-image { max-width: 100%; width: 100%; height: 250px; max-height: 250px; background-position: center; background-size: cover; background-repeat: no-repeat; } .o-notes-caption { padding: 15px; padding-bottom: 85px; z-index: 3; } .o-notes-caption a { font-size: 1.6rem; width: 100%; color: #212121; } .o-notes-caption a:hover { text-decoration: underline; color: #6c6c6c; cursor: pointer; } .o-notes-caption span { width: 100%; display: inline-block; vertical-align: middle; position: relative; padding-top: 15px; margin-bottom: 30px; margin-top: 15px; color: #7c7d7d; font-weight: 400; } .o-notes-caption span::before { content: ''; position: absolute; left: 0; top: 0; width: 50px; height: 3px; background-color: #9a9695; } .o-notes-caption span::after { content: attr(data-title); } .c-content.o-notes .o-button { margin-bottom: 0; position: absolute; right: 15px; bottom: 30px; margin-right: 0; margin-top: 0; z-index: 8; } /*------------ C-ACCORDION ------------*/ .c-content.c-accordion { } .c-content.c-accordion .c-content-wrap { counter-reset: item; } .c-accordion--section, .c-accordion--header, .c-accordion--content, .c-accordion--wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; max-width: 100%; width: 100%; position: relative; z-index: 5; } .c-accordion--section { border-bottom: 1px solid #101010; } .c-accordion--section:last-child { border-width: 0; } .c-accordion--header { padding-top: 3.75rem; padding-bottom: 3.75rem; cursor: pointer; } .c-accordion--title { margin-bottom: 0; position: relative; z-index: 2; display: inline-block; vertical-align: middle; } .c-accordion--title .c-accordion--number { font-weight: 700; color: #999; } .c-accordion--title .c-accordion--number::before { content: counter(item) ' — '; counter-increment: item; } .c-accordion--plus { position: absolute; top: 50%; right: 0; width: 1.25rem; height: 1.25rem; margin-top: -.625rem; } .c-accordion--plus::before, .c-accordion--plus::after { content: ""; position: absolute; } .c-accordion--plus::before { top: 50%; right: 0; left: 0; border-top: 2px solid #101010; margin-top: -1px; } .c-accordion--plus::after { top: 0; bottom: 0; left: 50%; border-left: 2px solid #101010; margin-left: -1px; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,0,1); transition: -webkit-transform .3s cubic-bezier(.4,0,0,1); transition: transform .3s cubic-bezier(.4,0,0,1); transition: transform .3s cubic-bezier(.4,0,0,1),-webkit-transform .3s cubic-bezier(.4,0,0,1); } .c-accordion--header.js-active .c-accordion--plus::after { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .c-accordion--content { max-height: 0; overflow: hidden; opacity:0; visibility: hidden; -webkit-transition: max-height .3s cubic-bezier(.4, 0, 0, 1), opacity .15s, visibility .15s cubic-bezier(.4, 0, 0, 1); transition: max-height .3s cubic-bezier(.4, 0, 0, 1), opacity .15s, visibility .15s cubic-bezier(.4, 0, 0, 1); } .c-accordion--content.js-active { max-height: 50000px; opacity: 1; visibility: visible; -webkit-transition: max-height .15s cubic-bezier(.4, 0, 0, 1), opacity .5s, visibility .5s cubic-bezier(.4, 0, 0, 1); transition: max-height .15s cubic-bezier(.4, 0, 0, 1), opacity .5s, visibility .5s cubic-bezier(.4, 0, 0, 1); } .c-accordion--wrap { padding-left: 5.75rem; padding-right: 5.75rem; padding-bottom: 6.5625rem; } @media (max-width: 1000px){ .c-accordion--wrap { padding-left: 0; padding-right: 0; } } .c-accordion--wrap a { font-weight: bold; text-decoration: underline; display: inline-block; } /*------------ B-PRODUCT ------------*/ .c-content.b-product { } .c-content.b-product .c-content-wrap { } .c-content.b-product .c-content-row { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .b-product-coll, .b-product-images, .b-product-carousel, .b-product-image, .b-product-wrap, .c-product_buy_content-2, .c-product_buy_price-2, .c-product_buy_colors-2, .c-product_buy_table-2, .c-product_buy_table-2 p, .c-product_buy_table-2 p span { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; max-width: 100%; width: 100% } .b-product-coll { max-width: 600px; padding: 15px; position: relative; } .b-product-coll:nth-of-type(1) { max-width: calc(100% - 450px); } .b-product-coll:nth-of-type(2) { max-width: 450px; margin-top: 60px; } @media (max-width:1500px) { .b-product-coll:nth-of-type(1) { max-width: calc(100% - 400px); } .b-product-coll:nth-of-type(2) { max-width: 400px; } } @media (max-width:1200px) { .b-product-coll:nth-of-type(1) { max-width: calc(100% - 300px); } .b-product-coll:nth-of-type(2) { max-width: 300px; } } @media (max-width:980px) { .b-product-coll:nth-of-type(1), .b-product-coll:nth-of-type(2) { max-width: 700px; } } @media (max-width:768px) { .b-product-coll:nth-of-type(2) { margin-top: 0; } } .b-product-images { position: relative; overflow:hidden; } .b-product-images:before { content: ""; display: block; width: 100%; max-width: 100%; padding-top:100%; position: relative; z-index: 1; } .b-product-image { bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 0; background-color: #fff; } .b-product-wrap { left: 0; top: 0; right:0; bottom:0; position: absolute; visibility: hidden; opacity: 0; z-index: 1; } .b-product-wrap.is-current { visibility: visible; opacity: 1; z-index: 2; } .b-product-wrap::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 3; } .b-product-images picture::before { content: ""; top: 0; left: 0; z-index: 2; display: block; width: 100%; max-width: 100%; padding-top: 100%; } .b-product-wrap img { object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; max-width: 100%; z-index: 1; } .b-product-images.--1x1::before, .b-product-images.--1x1 picture::before { padding-top:100%; } .b-product-images.--3x1::before, .b-product-images.--3x1 picture::before { padding-top:33.33333333%; } .b-product-images.--4x3::before, .b-product-images.--4x3 picture::before { padding-top:75%; } .b-product-images.--5x4::before, .b-product-images.--5x4 picture::before { padding-top:80%; } .b-product-images.--5x3::before, .b-product-images.--5x3 picture::before { padding-top:60%; } .b-product-images.--3x4::before, .b-product-images.--3x4 picture::before { padding-top:133%; } .b-product-images.--4x5::before, .b-product-images.--4x5 picture::before { padding-top:125%; } .b-product-images.--5x7::before, .b-product-images.--5x7 picture::before { padding-top:140%; } /*///------!!!!!!!!!!!!!!!!-----------*/ .c-product_buy_title-2, .c-product_buy_articul, .c-product_buy_sclad, .c-product_buy_delivery { line-height: 40px; margin-bottom: 0; margin-top: 0; width: 100%; } .c-product_buy_title-2 { line-height: 1.3; margin-bottom: 30px; } .c-product_buy_articul { font-size: 1.5rem; letter-spacing: 1px; color: #666; } .c-product_buy_sclad, .c-product_buy_delivery { } .c-product_buy_delivery { margin-bottom: 30px; } .c-product_buy_sclad svg, .c-product_buy_delivery svg { display: inline-block; vertical-align: middle; height: 40px; color: #7da6d4; width: 40px; margin-right: 10px; padding: 3px; } .c-product_buy_table-2 { font-size: 1.1rem; margin-bottom: 30px; } .c-product_buy_table-2 p { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; position: relative; margin-bottom: 0; } @media (max-width:1200px) { .c-product_buy_table-2 p { padding: 10px 0; } .c-product_buy_table-2 p::before, .c-product_buy_table-2 p:last-child::after { border-top: 1px solid #101010; content: ""; left: 0; position: absolute; right: 0; top: 0; } .c-product_buy_table-2 p:last-child::after { bottom: 0; } } .c-product_buy_table-2 p span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; padding: 10px; position: relative; } .c-product_buy_table-2 p span:first-child { color: #aaaaaa; padding-left: 0; max-width: 130px; } .c-product_buy_table-2 p span:last-child { padding-right: 0; max-width: calc(100% - 130px); } @media (max-width:1200px) { .c-product_buy_table-2 p span:first-child, .c-product_buy_table-2 p span:last-child { max-width: 100%; padding: 5px 0; } } .c-product_buy_table-2 p span::before { content: ""; position: absolute; top: 0; right: 0; left: 0; border-top: 1px solid #101010; opacity: .25; } .c-product_buy_table-2 p:last-child span::after { content: ""; border-bottom: 1px solid #101010; position: absolute; bottom: 0; right: 0; left: 0; opacity: .25; } .c-product_buy_table-2 p span:first-child::before { right: 10px; } .c-product_buy_table-2 p span:last-child::after, .c-product_buy_table-2 p span:last-child::before { left: 10px; } @media (max-width:1200px) { .c-product_buy_table-2 p span::after, .c-product_buy_table-2 p span::before { display:none; } .c-product_buy_table-2 p:last-child span::after { right: 0; } } .c-product_buy_price-2 { color: #bd081c; font-size: 30px; font-weight: 700; margin-bottom: 40px; max-width: 100%; position: relative; } .c-product_buy_price-2 del { color: #AAA; display: inline-block; font-size: 20px; font-weight: normal; margin-bottom: 5px; text-decoration: none; vertical-align: middle; position: relative; } .c-product_buy_price-2 del::after { content: ''; position: absolute; border: 1px solid; left: -10px; right: -10px; top: 48%; opacity: 0.5; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } .c-product_buy_price-2 del small { display: inline-block; vertical-align: middle; padding-left: 5px; } .c-product_buy_price-2 em { color: #bd081c; position: absolute; right: 0; top: 0; } .c-product_buy_price-2 span { display: inline-block; vertical-align: middle; width: 100%; } .c-product_buy_price-2 span.priceText { color: #aaa; font-size: 1.3rem; } .c-product_buy_colors-2 { margin: 0 -10px; margin-bottom: 40px; padding: 0; list-style: none; } @media (max-width:900px) { .c-product_buy_colors-2 { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } .c-product_buy_colors_item-2 { cursor: pointer; height: 80px; margin: 0 10px; margin-bottom: 20px; position: relative; width: 80px; z-index: 1; box-shadow: 0 0 7px 0px #666; border: 2px solid #fff; border-radius: 50%; } .c-product_buy_colors_item-2::before { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; border: 3px solid #7da6d4; border-radius: 50%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); z-index: -1; } .c-product_buy_colors_item-2.is-current::before, .c-product_buy_colors_item-2:hover::before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .c-product_buy_colors_item-2 picture { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .c-product_buy_colors_item-2 img { } .c-dots-2, .c-dots_list-2, .c-dots_item-2, .c-dots_link-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; max-width: 100%; width: 100% } .c-dots-2 { position: absolute; bottom: 0; z-index: 2; pointer-events: none; display:none; -webkit-transition: opacity .9s, -webkit-transform .9s cubic-bezier(.4, 0, 0, 1); transition: opacity .9s, -webkit-transform .9s cubic-bezier(.4, 0, 0, 1); transition: transform .9s cubic-bezier(.4, 0, 0, 1), opacity .9s; transition: transform .9s cubic-bezier(.4, 0, 0, 1), opacity .9s, -webkit-transform .9s cubic-bezier(.4, 0, 0, 1) } /* VERTICAL */ .c-dots-2.-vertical { -ms-flex-flow: column wrap; flex-flow: column wrap; margin: 0; max-width: 76px; top: 0; } .c-dots-2.-vertical.-left { left:0; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px); } .c-dots-2.-vertical.-right { right:0; -webkit-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px) } .c-dots_list-2 { font-size: 0; list-style: none; margin: 0; overflow: hidden; padding: 0; pointer-events: auto; } .c-dots_item-2 { position: relative; max-width: 88px; margin: 0; } .c-dots_link-2 { position: relative; opacity: 1; visibility: visible; } .c-dots-2.-vertical .c-dots_link-2 { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .c-dots_link-2::before { content: ""; display: inline-block; opacity: .25; vertical-align: middle; } .c-dots-2.-vertical .c-dots_link-2::before { border-left: 2px solid #fff; height: 88px; } /* fixed */ .c-dots-2.-vertical.-fixed { position: fixed; right:43px } @media (max-width:1200px) { .c-dots-2.-vertical.-fixed { right: 27px; } } @media (max-width:700px) { .c-dots-2.-vertical.-fixed { right: 7px; } } @media (max-width:640px) { .c-dots-2.-vertical.-fixed { display: none; } } /* HORIZONT */ .c-dots-2.-horizont { position: relative; visibility: visible; opacity: 1; } .c-dots-2.-horizont .c-dots_link-2 { height: 88px; } .c-dots-2.-horizont .c-dots_link-2::before { border-top: 2px solid #fff; width: 88px; } .c-dots_link-2.is-current .c-dots_dot-2::before, .c-dots_link-2.is-show .c-dots_dot-2::before, .c-dots_link-2:hover .c-dots_dot-2::before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* DOT */ .c-dots_dot-2 { background-color: #fff; border-radius: 50%; display: block; height: 12px; left: 50%; position: absolute; top: 50%; margin-left:-6px; margin-top:-6px; width: 12px; } .c-dots_dot-2::before { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; border: 3px solid #fff; -webkit-transform: scale(.25); -ms-transform: scale(.25); transform: scale(.25); -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .c-dots-2.-gray .c-dots_link-2::before { border-color: #7f7f7f; } .c-dots-2.-gray .c-dots_dot-2 { background-color: #7f7f7f; } .c-dots-2.-gray .c-dots_dot-2::before { border-color: #7f7f7f; } /*------------ C-DOTS.ANIMATION ------------*/ .is-show .c-dots-2.-vertical { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .b-product-images .c-dots-2.is-current { visibility: visible; opacity:1; z-index: 4; } @media (max-width:768px) { .b-product-images .c-dots-2 { visibility: hidden; opacity:0; } } .js-product-current { display: none; } .js-product-current.is-current { display: -webkit-box; display: -ms-flexbox; display: flex; } /*------------ O-PICTURE ------------*/ .o-picture-link { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; max-width: 100%; width: 100%; position: relative; } .o-picture-link { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .o-picture-link { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .o-picture { overflow: hidden; } .o-picture-link figure { } .o-picture-link picture, .o-picture-link video { overflow: hidden; background-color: var(--0000000f); } .--ratioBox .o-picture-link picture, .--ratioBox .o-picture-link img, .--ratioBox .o-picture-link video { object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .--ratioBox .o-picture-link::before { content: ""; top: 0; left: 0; z-index: 2; display: block; width: 100%; max-width: 100%; padding-top:100%; z-index: 1 } .--ratioBox.--1x1 .o-picture-link::before { padding-top:100%; } .--ratioBox.--3x1 .o-picture-link::before { padding-top:33.33333333%; } .--ratioBox.--4x3 .o-picture-link::before { padding-top:75%; } .--ratioBox.--5x4 .o-picture-link::before { padding-top:80%; } .--ratioBox.--5x3 .o-picture-link::before { padding-top:60%; } .--ratioBox.--5x2\/5 .o-picture-link::before { padding-top:50%; } .--ratioBox.--5x2 .o-picture-link::before { padding-top:40%; } .--ratioBox.--3x4 .o-picture-link::before { padding-top:133%; } .--ratioBox.--4x5 .o-picture-link::before { padding-top:125%; } .--ratioBox.--5x7 .o-picture-link::before { padding-top:140%; } .o-picture-link img, .o-picture-link video { max-width: 100%; width: 100%; -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .o-picture-link { height: 100%; } .o-picture-link { -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .o-picture-link:hover, .splide__slide.is-active .o-picture-link { filter: saturate(200%) !important; } .splide--fade .splide__slide.is-active .o-picture-link { filter: saturate(100%) !important; } .o-picture-link.--active { cursor: pointer; } .o-picture-overlay::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: 0; -webkit-transition: opacity .9s cubic-bezier(.4, 0, 0, 1); transition: opacity .9s cubic-bezier(.4, 0, 0, 1); } .o-picture-link:hover .o-picture-overlay::after, .splide__slide.is-active .o-picture-link .o-picture-overlay::after { opacity: .2; } .o-picture-icon { background-color: #fff; border-radius: 50%; height: 50px; left: 50%; margin-left: -25px; margin-top: -25px; position: absolute; top: 50%; width: 50px; box-shadow: 0px 4px 5px 0 rgba(0, 0, 0, .3); z-index: 3; -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: .5; box-shadow: 0px 0px 11px 1px rgba(0, 0, 0, .8); } .is-desktop .o-picture-link:hover .o-picture-icon, .is-mobile .o-picture-link .o-picture-icon, .splide__slide.is-active .o-picture-link .o-picture-icon { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .is-mobile .o-picture-link .o-picture-icon { opacity: .3; } .o-picture-icon svg { color: #101010; height: 26px; left: 50%; margin-left: -13px; margin-top: -13px; top: 50%; width: 26px; position: absolute; } .o-picture-count { background-color: #ddd; display: inline-block; vertical-align: middle; padding: 5px 15px; position: absolute; bottom: 5px; right: 5px; line-height: 20px; color: #212121; } /*------------ O-CARDS ------------*/ .o-cards, .o-cards-items, .o-cards-container, .o-cards-wrap, .o-cards-caption, .o-cards .o-picture, .o-card { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; max-width: 100%; width: 100%; } .o-cards { margin: 0; } .o-cards-wrap { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .o-cards .o-cards-container { overflow: hidden; } .o-cards .o-cards-items { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .o-cards .o-cards-caption { } .o-cards.--top .o-cards-caption { padding: 0; margin-bottom: 60px; } .o-cards.--bottom .o-cards-items { margin-bottom: 0; } .o-cards.--bottom .o-cards-caption { padding: 0; margin-top: 30px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .o-cards.--top .o-cards-caption { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .o-cards.--left, .o-cards.--right { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .o-cards.--left .o-cards-caption { max-width: 300px; padding: 0; padding-right: 30px; } .o-cards.--right .o-cards-caption { max-width: 300px; padding: 0; padding-left: 30px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .o-cards.--left .o-cards-items, .o-cards.--right .o-cards-items { max-width: calc(100% - 300px); } .o-cards.--left.--450 .o-cards-caption, .o-cards.--right.--450 .o-cards-caption { max-width: 450px; } .o-cards.--left.--450 .o-cards-items, .o-cards.--right.--450 .o-cards-items { max-width: calc(100% - 450px); } @media screen and (max-width:1300px) { .o-cards.--left.--450 .o-cards-caption, .o-cards.--right.--450 .o-cards-caption { max-width: 400px; } .o-cards.--left.--450 .o-cards-items, .o-cards.--right.--450 .o-cards-items { max-width: calc(100% - 400px); } } @media screen and (max-width:980px) { .o-cards.--left .o-cards-items, .o-cards.--left .o-cards-caption, .o-cards.--right .o-cards-items, .o-cards.--right .o-cards-caption { max-width: 100%!important; } .o-cards.--left .o-cards-caption, .o-cards.--right .o-cards-caption { margin-bottom: 30px; padding: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .o-cards .o-cards-container { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .o-cards .o-cards-items .o-cards-caption { max-width: 100%; padding: 0; } .o-cards.--bottomc .o-cards-items .o-cards-caption { margin-top: 30px; margin-bottom: 0; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .o-cards.--bottom.--bottomc .o-cards-items .o-cards-caption { } .o-cards.--topc .o-cards-items .o-cards-caption { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 30px; } .o-cards .o-cards-caption>* { margin-bottom: 15px; } .o-cards .o-cards-caption>*:last-child, .o-cards .o-cards-caption .o-cards-text>*:last-child { margin-bottom: 0; } .o-cards .o-cards-caption .o-cards-text { position: sticky; top: 0; padding: 0; padding-top: 30px; overflow: hidden; } .o-cards.--top .o-cards-caption .o-cards-text, .o-cards.--bottom .o-cards-caption .o-cards-text { padding-top: 0; } @media screen and (max-width:980px) { .o-cards .o-cards-caption .o-cards-text { padding-top: 0; } } .o-cards-wrap { } .o-cards .o-card .o-picture { max-width: 100% !important; padding: 0; } .o-cards .o-card { max-width: 100%; margin: 0; } @media screen and (max-width:900px) { .o-cards .o-card { padding: 5px!important; } } /*---------------------*/ .o-cards.--2coll .o-card { max-width: 50%; } .o-cards.--2coll .o-card.--2coll { max-width: 100%; } /*---------------------*/ .o-cards.--3coll .o-card { max-width: 33.33333333%; } .o-cards.--3coll .o-card.--2coll { max-width: 66.6666666%; } .o-cards.--3coll .o-card.--3coll { max-width: 100%; } /*---------------------*/ .o-cards.--4coll .o-card { max-width: 25%; } .o-cards.--4coll .o-card.--2coll { max-width: 50%; } .o-cards.--4coll .o-card.--3coll { max-width: 75%; } .o-cards.--4coll .o-card.--4coll { max-width: 100%; } @media screen and (max-width:900px) { .o-cards.--4coll .o-card { max-width: 33.33333333%; } .o-cards.--4coll .o-card.--2coll { max-width: 66.6666666%; } .o-cards.--4coll .o-card.--3coll { max-width: 100%; } } @media screen and (max-width:768px) { .o-cards.--3coll .o-card, .o-cards.--4coll .o-card { max-width: 50%; } .o-cards.--3coll .o-card.--2coll, .o-cards.--4coll .o-card.--2coll { max-width: 100%; } } .o-cards picture::before { content: ""; top: 0; left: 0; z-index: 2; display: block; width: 100%; max-width: 100%; padding-top:100%; z-index: 1 } .o-cards .ratio-card picture::before, .o-cards.--1x1 picture::before { padding-top:100%; } .o-cards.--3x1 picture::before { padding-top:33.33333333%; } .o-cards.--4x3 picture::before { padding-top:75%; } .o-cards.--5x4 picture::before { padding-top:80%; } .o-cards.--5x3 picture::before { padding-top:60%; } .o-cards.--5x2\/5 picture::before { padding-top:50%; } .o-cards.--5x2 picture::before { padding-top:40%; } .o-cards.--3x4 picture::before { padding-top:133%; } .o-cards.--4x5 picture::before { padding-top:125%; } .o-cards.--5x7 picture::before { padding-top:140%; } /*----------*/ .o-cards .ratio-card.--1x1 picture::before { padding-top:100%; } .o-cards .ratio-card.--3x1 picture::before { padding-top:33.33333333%; } .o-cards .ratio-card.--4x3 picture::before { padding-top:75%; } .o-cards .ratio-card.--5x4 picture::before { padding-top:80%; } .o-cards .ratio-card.--5x3 picture::before { padding-top:60%; } .o-cards .ratio-card.--5x2\/5 picture::before { padding-top:50%; } .o-cards .ratio-card.--5x2 picture::before { padding-top:40%; } .o-cards .ratio-card.--3x4 picture::before { padding-top:133%; } .o-cards .ratio-card.--4x5 picture::before { padding-top:125%; } .o-cards .ratio-card.--5x7 picture::before { padding-top:140%; } .o-cards .o-picture-link img { object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .o-cards .o-picture .o-picture-link, .o-cards .o-card-caption { -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .o-cards .o-picture .o-picture-link { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .o-cards .o-card-caption { } .o-cards .o-card-caption { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; visibility: visible; padding: 10px; color: #101010; z-index: 3 } .o-cards .o-card-caption>* { margin-bottom: 15px; } .o-cards .o-card-caption>*:last-child { margin-bottom: 0; } .--cardCaptHide .o-card-caption { display:none; } .--cardCaptShow .o-card-caption, .--cardCaptHide .--cardCaptShow .o-card-caption { display: -webkit-box; display: -ms-flexbox; display: flex; } .o-cards .o-card-caption-text { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; margin-bottom: 15px; } .o-cards .o-card-caption-title { font-size: 1.3rem; width: 100%; line-height: 25px; display: inline-block; vertical-align: middle; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' } .o-cards .o-card-caption-title:hover { text-decoration: underline; color: #6c6c6c; cursor: pointer } .o-cards .o-card-caption-articul, .o-cards .o-card-caption-sclad { width: 100%; display: inline-block; vertical-align: middle; position: relative; padding-top: 15px; margin-bottom: 0; margin-top: 15px; color: #7c7d7d; font-weight: 400 } .o-cards .o-card-caption-sclad { padding-top: 0; color: #bd081c; } .o-cards .o-card-caption-articul::before { content: ''; position: absolute; left: 0; top: 0; width: 50px; height: 3px; background-color: #9a9695 } .o-cards .o-card-caption-articul::after, .o-cards .o-card-caption-sclad::after { content: attr(data-title) } .o-cards .o-card-caption-price { width: 100%; display: inline-block; vertical-align: middle; color: #7c7d7d; font-weight: 400; font-size: 1.5em; line-height: 27px; height: 27px; } .o-cards .o-card-caption-price svg { color: #bd081c; width: 27px; height: 27px; margin-left: -5px; margin-top: -5px; } .o-cards .o-card-caption-btn { margin-bottom: 15px; } .o-cards .o-card-caption-btn .o-button { height: 50px; min-width: 50px; margin-top: 15px; margin-right: 15px; } .o-cards .o-card-caption-btn .o-button:hover::before, .o-cards .o-card-caption-btn .o-button:active::before { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .o-cards .o-card-caption-btn .o-button:hover .o-button_circle, .o-cards .o-card-caption-btn .o-button:active .o-button_circle { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .o-cards.--captNo .o-card-caption { display:none; } .o-cards .o-picture { max-width: 100%; padding: 15px; margin: 0; } @media screen and (max-width:900px) { .o-cards .o-picture { padding: 5px; } } /*---------------------*/ .o-cards.--2coll .o-picture { max-width: 50%; } .o-cards.--2coll .o-picture.--2coll { max-width: 100%; } /*---------------------*/ .o-cards.--3coll .o-picture { max-width: 33.33333333%; } .o-cards.--3coll .o-picture.--2coll { max-width: 66.6666666%; } .o-cards.--3coll .o-picture.--3coll { max-width: 100%; } /*---------------------*/ .o-cards.--4coll .o-picture { max-width: 25%; } .o-cards.--4coll .o-picture.--2coll { max-width: 50%; } .o-cards.--4coll .o-picture.--3coll { max-width: 75%; } .o-cards.--4coll .o-picture.--4coll { max-width: 100%; } @media screen and (max-width:900px) { .o-cards.--4coll .o-picture { max-width: 33.33333333%; } .o-cards.--4coll .o-picture.--2coll { max-width: 66.6666666%; } .o-cards.--4coll .o-picture.--3coll { max-width: 100%; } } @media screen and (max-width:768px) { .o-cards.--3coll .o-picture, .o-cards.--4coll .o-picture { max-width: 50%; } .o-cards.--3coll .o-picture.--2coll, .o-cards.--4coll .o-picture.--2coll { max-width: 100%; } } .o-cards[data-module="CarouselSlider"] .o-cards-wrap { -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .o-cards[data-module="CarouselSlider"] .o-cards-container { --scrollbar-border-width: 11px; padding-bottom: 30px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scroll-behavior: smooth; } .o-cards[data-module="CarouselSlider"] .o-cards-container.--noScroll { overflow: hidden; padding-bottom: 0; } .--paperW .o-cards[data-module="CarouselSlider"] .o-cards-container { scrollbar-color: #212121 transparent; } .--paperB .o-cards[data-module="CarouselSlider"] .o-cards-container { scrollbar-color: #fff transparent; } .o-cards[data-module="CarouselSlider"] .o-cards-items { position: relative; } .o-cards[data-module="CarouselSlider"] .o-cards-wrap { margin: -5px; width: calc(100% + 10px); max-width: calc(100% + 10px); } .o-cards[data-module="CarouselSlider"] .o-picture { padding: 5px; } .o-cards.--4coll[data-module="CarouselSlider"] .o-picture { min-width: 25%; } .o-cards.--3coll[data-module="CarouselSlider"] .o-picture { min-width: 33.33333333333%; } .o-cards.--2coll[data-module="CarouselSlider"] .o-picture { min-width: 50%; } .o-cards.--1coll[data-module="CarouselSlider"] .o-picture { min-width: 100%; } @media screen and (max-width:1300px) { .o-cards.--4coll.--left[data-module="CarouselSlider"] .o-picture, .o-cards.--4coll.--right[data-module="CarouselSlider"] .o-picture { min-width: 33.33333333333%; } } @media screen and (max-width:900px) { .o-cards.--4coll[data-module="CarouselSlider"] .o-picture { min-width: 33.33333333%!important; } } @media screen and (max-width:768px) { .o-cards.--3coll[data-module="CarouselSlider"] .o-picturee, .o-cards.--4coll[data-module="CarouselSlider"] .o-picture { min-width: 50%!important; } } @media screen and (max-width:420px) { .o-cards.--2coll[data-module="CarouselSlider"] .o-picture, .o-cards.--3coll[data-module="CarouselSlider"] .o-picture, .o-cards.--4coll[data-module="CarouselSlider"] .o-picture { min-width: calc(100% - 30px)!important; } } .o-cards[data-module="CarouselSlider"] .o-slider-nav { position: absolute; display: block; height: 110px; width: 40px; top: 50%; right: -50px; margin-top: -65px; z-index: 100; } @media screen and (max-width: 768px) { .o-cards[data-module="CarouselSlider"] .o-slider-nav { right: 10px; } } @media screen and (max-width: 640px) { .o-cards[data-module="CarouselSlider"] .o-slider-nav { right: 0; } } .o-cards[data-module="CarouselSlider"] .o-slider-btn { display: block; cursor: pointer; height: 40px; width: 40px; color: #ffffff; background-color: #212121; border-radius: 30px; overflow: hidden; padding: 6px; margin-bottom: 30px; box-shadow: 0px 4px 5px 0 rgba(0, 0, 0, .3); position:relative; z-index: 0; } .--paperB .o-cards[data-module="CarouselSlider"] .o-slider-btn { color: #212121; background-color: #fff; } .is-desktop .o-cards[data-module="CarouselSlider"] .o-slider-btn2 { -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .is-desktop .o-cards[data-module="CarouselSlider"]:hover .o-slider-btn2 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } @media screen and (max-width:768px) { .o-cards[data-module="CarouselSlider"] .o-slider-btn { } } .o-cards[data-module="CarouselSlider"] .o-slider-btn[disabled] { opacity: .3; background-position: 0 100%; cursor: default; } .o-cards[data-module="CarouselSlider"] .o-slider-btn:not([disabled]) { opacity: .7; } .o-cards[data-module="CarouselSlider"] .o-slider-btn:not([disabled]):hover { opacity: 1; } .o-cards[data-module="CarouselSlider"] .o-slider-btn.--next { } .o-cards[data-module="CarouselSlider"] .o-slider-btn.--prev { margin-bottom: 0; } .o-cards[data-module="CarouselSlider"] .o-slider-btn svg { position: relative; height: 100%; width: 100%; z-index: -1; } /*------------ C-CARDS ------------*/ .c-cards, .c-cards-items, .c-cards-container, .c-cards-wrap, .c-cards-caption, .c-cards .o-picture, .c-card { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; max-width: 100%; width: 100%; } .c-cards { margin: 0; } .c-cards-wrap { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .c-cards .c-cards-container { overflow: hidden; padding: 0; } .c-cards .c-cards-container.--5P { margin: -5px; max-width: calc(100% + 10px); width: calc(100% + 10px); } .c-cards .c-cards-container.--15P { margin: -15px; max-width: calc(100% + 30px); width: calc(100% + 30px); } .c-cards .c-cards-container.--30P { margin: -30px; max-width: calc(100% + 60px); width: calc(100% + 60px); } [data-module="Slider"] .c-cards-container.--5P { margin: 0 -5px; } [data-module="Slider"] .c-cards-container.--15P { margin: 0 -15px; } [data-module="Slider"] .c-cards-container.--30P { margin: 0 -30px; } @media screen and (max-width: 768px) { .c-cards .c-cards-container.--30P, .c-cards .c-cards-container.--15P, .c-cards .c-cards-container.--5P { margin: -5px; max-width: calc(100% + 10px); width: calc(100% + 10px); } } .c-card { overflow: hidden; } .c-cards .c-cards-items { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .c-cards .c-cards-caption { } .c-cards.--top .c-cards-caption { padding: 0; margin-bottom: 60px; } .c-cards.--bottom .c-cards-items { margin-bottom: 0; } .c-cards.--bottom .c-cards-caption { padding: 0; margin-top: 30px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .c-cards.--top .c-cards-caption { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .c-cards.--left, .c-cards.--right { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .c-cards.--left.--300 .c-cards-caption, .c-cards.--right.--300 .c-cards-caption { max-width: 300px; } .c-cards.--left .c-cards-caption { padding-right: 30px; } .c-cards.--right .c-cards-caption { padding-left: 30px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .c-cards.--left.--300 .c-cards-items, .c-cards.--right.--300 .c-cards-items { max-width: calc(100% - 300px); } .c-cards.--left.--400 .c-cards-caption, .c-cards.--right.--400 .c-cards-caption { max-width: 400px; } .c-cards.--left.--400 .c-cards-items, .c-cards.--right.--400 .c-cards-items { max-width: calc(100% - 400px); } .c-cards.--left.--500 .c-cards-caption, .c-cards.--right.--500 .c-cards-caption { max-width: 500px; } .c-cards.--left.--500 .c-cards-items, .c-cards.--right.--500 .c-cards-items { max-width: calc(100% - 500px); } .c-cards.--left.--600 .c-cards-caption, .c-cards.--right.--600 .c-cards-caption { max-width: 600px; } .c-cards.--left.--600 .c-cards-items, .c-cards.--right.--600 .c-cards-items { max-width: calc(100% - 600px); } @media screen and (max-width:1300px) { } @media screen and (max-width:980px) { .c-cards.--left .c-cards-items, .c-cards.--left .c-cards-caption, .c-cards.--right .c-cards-items, .c-cards.--right .c-cards-caption { max-width: 100%!important; } .c-cards.--left .c-cards-caption, .c-cards.--right .c-cards-caption { margin-bottom: 30px; padding: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .c-cards .c-cards-container { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .c-cards .c-cards-items .c-cards-caption { max-width: 100%; padding: 0 30px; opacity: 0.7; } .c-cards.--bottomc .c-cards-items .c-cards-caption { margin-top: 30px; margin-bottom: 0; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .c-cards.--bottom.--bottomc .c-cards-items .c-cards-caption { } .c-cards.--topc .c-cards-items .c-cards-caption { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 30px; } .c-cards .c-cards-caption>* { margin-bottom: 15px; } .c-cards .c-cards-caption>*:last-child, .c-cards .c-cards-caption .c-cards-text>*:last-child { margin-bottom: 13px; } .c-cards .c-cards-caption .c-cards-text { position: sticky; top: 0; padding: 0; padding-top: 30px; overflow: hidden; } .c-cards.--top .c-cards-caption .c-cards-text, .c-cards.--bottom .c-cards-caption .c-cards-text { padding-top: 0; } @media screen and (max-width:980px) { .c-cards .c-cards-caption .c-cards-text { padding-top: 0; } } .c-cards-wrap { } .c-card.c-card--blockspage { min-width: 300px; } /*---------------------*/ .c-cards.--2coll .c-card { max-width: 50%; } .c-cards.--2coll .c-card.--2coll { max-width: 100%; } /*---------------------*/ .c-cards.--3coll .c-card { max-width: 33.33333333%; } .c-cards.--3coll .c-card.--2coll { max-width: 66.6666666%; } .c-cards.--3coll .c-card.--3coll { max-width: 100%; } /*---------------------*/ .c-cards.--4coll .c-card { max-width: 25%; } .c-cards.--4coll .c-card.--2coll { max-width: 50%; } .c-cards.--4coll .c-card.--3coll { max-width: 75%; } .c-cards.--4coll .c-card.--4coll { max-width: 100%; } @media screen and (max-width:980px) { .c-cards.--4coll .c-card, .c-cards.--3coll .c-card { max-width: 33.33333333%; } .c-cards.--4coll .c-card.--2coll { max-width: 66.6666666%; } .c-cards.--4coll .c-card.--3coll { max-width: 100%; } } @media screen and (max-width:840px) { .c-cards.--3coll .c-card, .c-cards.--4coll .c-card { max-width: 50%; } .c-cards.--3coll .c-card.--2coll, .c-cards.--4coll .c-card.--2coll { max-width: 100%; } } @media screen and (max-width:640px) { .c-cards .c-card { max-width: 100%!important; } [data-module="Slider"] .c-card { max-width: 80%!important; } [data-module="Slider"].--1coll .c-card, [data-module="Slider"] .c-card.--1coll, [data-module="Slider"] .c-card.c-card--blockspage { max-width: 100%!important; } } /*----------*/ .c-cards.--ratioBox.--1x1 .o-picture-link::before { padding-top:100%; } .c-cards.--ratioBox.--3x1 .o-picture-link::before { padding-top:33.33333333%; } .c-cards.--ratioBox.--4x3 .o-picture-link::before { padding-top:75%; } .c-cards.--ratioBox.--5x4 .o-picture-link::before { padding-top:80%; } .c-cards.--ratioBox.--5x3 .o-picture-link::before { padding-top:60%; } .c-cards.--ratioBox.--5x2\/5 .o-picture-link::before { padding-top:50%; } .c-cards.--ratioBox.--5x2 .o-picture-link::before { padding-top:40%; } .c-cards.--ratioBox.--3x4 .o-picture-link::before { padding-top:133%; } .c-cards.--ratioBox.--4x5 .o-picture-link::before { padding-top:125%; } .c-cards.--ratioBox.--5x7 .o-picture-link::before { padding-top:140%; } .c-cards .o-picture .o-picture-link, .c-cards .o-card-caption { -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .c-cards .o-picture .o-picture-link { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .c-card--video .o-picture-link::after { content: ""; top: 0; left: 0; right: 0; position: absolute; display: block; bottom: 0; } .c-cards .o-card-caption { } .c-cards .o-card-caption { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; visibility: visible; padding: 10px; color: #101010; z-index: 3; position: absolute; bottom: 15px; left: 15px; max-width: calc(100% - 30px); background-color: #fff; border-radius: 15px; font-size: 14px; box-shadow: var(--blockShadow); } .c-cards .o-card-caption>* { margin-bottom: 15px; } .c-cards .o-card-caption>*:last-child { margin-bottom: 0; } .--cardCaptHide .o-card-caption { display:none; } .--cardCaptShow .o-card-caption, .--cardCaptHide .--cardCaptShow .o-card-caption { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-cards .o-card-caption-text { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; margin-bottom: 15px; } .c-cards .o-card-caption-title { font-size: 1.3rem; width: 100%; line-height: 25px; display: inline-block; vertical-align: middle; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' } .c-cards .o-card-caption-title:hover { text-decoration: underline; color: #6c6c6c; cursor: pointer } .c-cards .o-card-caption-articul, .c-cards .o-card-caption-sclad { width: 100%; display: inline-block; vertical-align: middle; position: relative; padding-top: 15px; margin-bottom: 0; margin-top: 15px; color: #7c7d7d; font-weight: 400 } .c-cards .o-card-caption-sclad { padding-top: 0; color: #bd081c; } .c-cards .o-card-caption-articul::before { content: ''; position: absolute; left: 0; top: 0; width: 50px; height: 3px; background-color: #9a9695 } .c-cards .o-card-caption-articul::after, .c-cards .o-card-caption-sclad::after { content: attr(data-title) } .c-cards .o-card-caption-price { width: 100%; display: inline-block; vertical-align: middle; color: #7c7d7d; font-weight: 400; font-size: 1.5em; line-height: 27px; height: 27px; } .c-cards .o-card-caption-price svg { color: #bd081c; width: 27px; height: 27px; margin-left: -5px; margin-top: -5px; } .c-cards .o-card-caption-btn { margin-bottom: 15px; } .c-cards .o-card-caption-btn .o-button { height: 50px; min-width: 50px; margin-top: 15px; margin-right: 15px; } .c-cards .o-card-caption-btn .o-button:hover::before, .c-cards .o-card-caption-btn .o-button:active::before { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .c-cards .o-card-caption-btn .o-button:hover .o-button_circle, .c-cards .o-card-caption-btn .o-button:active .o-button_circle { -webkit-transform: translate(0, 0); transform: translate(0, 0); } /*------------ SPLIDE ------------*/ .o-content-splide, .splide, .splide__track, .splide__list, .splide__slide, .splide__pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; position: relative; } .o-content-splide, .splide, .splide__track, .splide__list, .splide__slide, .splide__pagination { max-width: 100%; width: 100%; } .splide__list, .splide__slide { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .splide__container { box-sizing:border-box; position:relative } .splide__list { backface-visibility:hidden; height:100%; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .splide.is-initialized:not(.is-active) .splide__list { display:block } .splide__pagination { margin:0; pointer-events:none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .splide__pagination li { display:inline-block; line-height:1; list-style-type:none; margin:0; pointer-events:auto } .splide:not(.is-overflow) .splide__pagination { display:none } .splide__progress__bar { width:0 } .splide { position:relative; visibility:hidden } .splide.is-initialized,.splide.is-rendered { visibility:visible } .splide__slide { -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-flex-negative:0; flex-shrink:0; list-style-type:none!important; margin:0; position:relative } .splide__slide img { vertical-align:bottom } .splide__spinner { animation:splide-loading 1s linear infinite; border:2px solid #999; border-left-color:transparent; border-radius:50%; bottom:0; contain:strict; display:inline-block; height:20px; left:0; margin:auto; position:absolute; right:0; top:0; width:20px } .splide__sr { clip:rect(0 0 0 0); border:0; height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px } .splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause { display:none } .splide__toggle.is-active .splide__toggle__pause { display:inline } .splide__track { overflow:hidden; position:relative; z-index:0 } @keyframes splide-loading { 0%{ -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0) } to{ -webkit-transform:rotate(1turn); -ms-transform:rotate(1turn); transform:rotate(1turn) } } .splide__track--draggable { -webkit-touch-callout:none; -webkit-user-select:none; -ms-user-select:none; user-select:none } .splide__track--fade>.splide__list>.splide__slide { margin:0!important; opacity:0; z-index:0 } .splide__track--fade>.splide__list>.splide__slide.is-active { opacity:1; z-index:1 } .splide--rtl { direction:rtl } .splide__track--ttb>.splide__list { display:block } .splide__arrow { -ms-flex-align:center; -webkit-box-align:center; align-items:center; background: #fff; border:0; border-radius:50%; cursor:pointer; display:-ms-flexbox; display:-webkit-box; display:flex; height: 40px; -ms-flex-pack:center; -webkit-box-pack:center; justify-content:center; opacity:.7; padding:0; position:absolute; top:50%; margin-top: -20px; width: 40px; z-index:1 } .splide__arrow svg { fill: #333; height: 20px; width: 20px } .splide__arrow:hover:not(:disabled) { opacity:.9 } .splide__arrow:disabled { opacity:.3 } .splide__arrow:focus-visible { outline: 3px solid #0bf; outline-offset: 3px } .splide__arrow--prev { left:15px } .splide__arrow--prev svg { -webkit-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1) } .splide__arrow--next { right:15px } .splide.is-focus-in .splide__arrow:focus { outline: 3px solid #0bf; outline-offset: 3px } .splide__pagination { padding: 0 30px; right: 0; z-index: 1; margin-top: 15px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .splide__pagination__page { background: #333; border:0; border-radius:50%; display:inline-block; height: 10px; margin: 10px; opacity:.7; padding:0; position:relative; -webkit-transition:-webkit-transform .2s linear; transition:-webkit-transform .2s linear; -o-transition:transform .2s linear; transition:transform .2s linear; transition:transform .2s linear, -webkit-transform .2s linear; width:10px } .splide__pagination__page.is-active { background: var(--Buttons); -webkit-transform:scale(1.4); -ms-transform:scale(1.4); transform:scale(1.4); z-index:1 } .splide__pagination__page:hover { cursor:pointer; opacity:.9 } .splide__pagination__page:focus-visible { outline: 3px solid #0bf; outline-offset: 3px } .splide.is-focus-in .splide__pagination__page:focus { outline: 3px solid #0bf; outline-offset: 3px } .splide__progress__bar { background: #ccc; height: 3px } .splide__slide { -webkit-tap-highlight-color:rgba(0,0,0,0) } .splide__slide:focus { outline:0 } @supports(outline-offset:-3px) { .splide__slide:focus-visible{ outline: 3px solid #0bf; outline-offset: -3px } } @media screen and (-ms-high-contrast:none) { .splide__slide:focus-visible { border: 3px solid #0bf } } @supports(outline-offset:-3px) { .splide.is-focus-in .splide__slide:focus { outline: 3px solid #0bf; outline-offset: -3px } } @media screen and (-ms-high-contrast:none) { .splide.is-focus-in .splide__slide:focus { border: 3px solid #0bf } .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus { border-color: #0bf } } .splide__toggle { cursor:pointer } .splide__toggle:focus-visible { } .splide.is-focus-in .splide__toggle:focus { } .splide__track--nav>.splide__list>.splide__slide { cursor:pointer } .splide__track--nav>.splide__list>.splide__slide.is-active { } .splide__arrows--rtl .splide__arrow--prev { left:auto; right: 15px } .splide__arrows--rtl .splide__arrow--prev svg { -webkit-transform:scaleX(1); -ms-transform:scaleX(1); transform:scaleX(1) } .splide__arrows--rtl .splide__arrow--next { left: 15px; right:auto } .splide__arrows--rtl .splide__arrow--next svg { -webkit-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1) } .splide__arrows--ttb .splide__arrow { left:50%; -webkit-transform:translate(-50%); -ms-transform:translate(-50%); transform:translate(-50%) } .splide__arrows--ttb .splide__arrow--prev { top: 15px } .splide__arrows--ttb .splide__arrow--prev svg { -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg) } .splide__arrows--ttb .splide__arrow--next { bottom: 15px; top:auto } .splide__arrows--ttb .splide__arrow--next svg { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg) } .splide__pagination--ttb{ bottom:0; display:-ms-flexbox; display:-webkit-box; display:flex; -ms-flex-direction:column; -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column; left:auto; padding: 15px 0; right: 6px; top:0 } .my-carousel-progress { background: #fff; display:-ms-flexbox; display:-webkit-box; display:flex; width: calc(100% - 60px); margin: 0 30px; margin-top: 15px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .my-carousel-progress-bar { background: var(--Buttons); height: 3px; -webkit-transition: width 400ms ease; -o-transition: width 400ms ease; transition: width 400ms ease; width: 0; } /*------------ O-NOTE ------------*/ .c-content.o-note { } .c-content.o-note .yaContext-desktop, .c-content.o-note .yaContext-mobile { display: none; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; max-width: 100%; width: 100%; } @media screen and (max-width:980px) { .c-content.o-note>.c-content-wrap { padding-right: 30px; padding-left: 30px; } } .o-note-article { background-color: #fff; padding: 60px; width: 100%; } @media screen and (max-width:900px) { .o-note-article { padding: 30px; } } .o-note-article .c-content-wrap { padding: 0; } /*------------ S-MAP ------------*/ .s-map { overflow: hidden; } .s-map-wrap { min-height: 500px; } .s-map .s-map-ballon { padding: 30px; } .s-map .s-map-ballon-header, .s-map .s-map-ballon-footer, .s-map .s-map-ballon-body { margin-bottom: 15px; } .s-map .s-map-ballon>*:last-child { margin-bottom: 0; } .s-map .s-map-ballon-header>*, .s-map .s-map-ballon-footer>*, .s-map .s-map-ballon-body>* { margin-bottom: 15px; } .s-map .s-map-ballon-header>*:last-child, .s-map .s-map-ballon-footer>*:last-child, .s-map .s-map-ballon-body>*:last-child { margin-bottom: 0; } /*------------ O-CATEGORY ------------*/ .o-category, .o-category-items, .o-category .o-picture, .o-category-caption { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; max-width: 100%; width: 100%; position: relative; } .o-category-items { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .o-category { overflow: hidden; margin: -15px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .o-category-items { margin: 0; padding: 0; margin-right: -15px; width: 110%; max-width: calc(100% + 15px); margin-bottom: -30px; } .o-category .o-picture { max-width: 160px; padding: 15px; margin: 0; } @media screen and (max-width:1200px) { .o-category .o-picture { max-width: 250px; } } @media screen and (max-width:600px) { .o-category .o-picture { max-width: 200px; } } @media screen and (max-width:480px) { .o-category .o-picture { max-width: 160px; } } @media screen and (max-width:390px) { .o-category .o-picture { max-width: 130px; } } .o-category .o-picture .o-picture-link { color: #101010; box-shadow: 0px 4px 5px 0 rgba(0, 0, 0, .3); text-decoration: none; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .o-category .o-picture .o-picture-link { border-radius: 30px; overflow: hidden; } @media screen and (max-width:768px) { .o-category .o-picture .o-picture-link { border-radius: 15px; } } .o-category .o-picture .o-category-caption { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .o-category .o-picture .o-picture-link::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: rgba(236,236,236,.7); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1); transition: transform .3s cubic-bezier(.4, 0, 0, 1), background-color .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.4, 0, 0, 1); } .o-category .o-picture .o-picture-link:hover::before { } .o-category .o-picture .o-picture-link picture { overflow: hidden; position: relative; max-width: 250px; } .o-category .o-picture .o-picture-link picture::before { content: ""; top: 0; left: 0; z-index: 2; display: block; width: 100%; max-width: 100%; padding-top:100%; z-index: 1 } .o-category .o-picture .o-picture-link img { object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 10px; } @media screen and (max-width: 768px) { .o-category .o-picture .o-picture-link img { padding: 5px; } } .o-category .o-category-caption { min-height: 90px; text-align: center; padding: 10px; color: inherit; background-color: #ececec; -webkit-transition: background-color .3s cubic-bezier(.4, 0, 0, 1); transition: background-color .3s cubic-bezier(.4, 0, 0, 1); } .o-category .o-picture-link:hover .o-category-caption { background-color: #bd081c; color: #fff; } .o-category .o-category-caption>* { margin-bottom: 15px; } .o-category .o-category-caption>*:last-child { margin-bottom: 0; } .c-clickbar { } .c-clickbar-text { max-width: 400px; } .c-clickbar .c-clickbar-text>* { padding-top: 0; padding-bottom: 30px; margin-bottom: 0; } .c-clickbar .c-clickbar-text .o-card-items { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-clickbar .c-clickbar-text .o-card .o-picture { max-width: 200px; } .c-clickbar .o-card .o-picture .o-picture-link picture { border-radius: 50%; } .c-clickbar .c-content-text { text-align: center; } .c-clickbar .o-buttons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cookie-banner--wrapper { z-index: 9999999999; position: relative } @-webkit-keyframes fadeInBottom { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInBottom { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .cookie-banner--wrapper .cookie-banner--container { position: fixed; bottom: 0; overflow: hidden; padding: 30px; background: #222; color: #fff; box-sizing: border-box; font-size: .8em; opacity: 0; visibility: hidden; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .8s; -moz-animation-duration: .8s; -o-animation-duration: .8s; animation-duration: .8s; -moz-animation-fill-mode: both; -o-animation-fill-mode: both } .is-loaded--cookieBanner .cookie-banner--wrapper .cookie-banner--container { -webkit-animation-name: fadeInBottom; animation-name: fadeInBottom } @media (max-width: 499px) { .cookie-banner--wrapper .cookie-banner--container { left: 0; right: 0 } } @media (min-width: 500px) { .cookie-banner--wrapper .cookie-banner--container { width: 450px; bottom: 20px; left: 20px } } @media screen and (min-width: 768px) { .cookie-banner--wrapper .cookie-banner--container { font-size: .9em } } .cookie-banner--wrapper .cookie-banner--message { margin-bottom: 15px } .cookie-banner--wrapper .cookie-banner--message a { text-decoration: none; color: #96c7ff; } .cookie-banner--wrapper .cookie-banner--message a:hover { text-decoration: underline; } .cookie-banner--wrapper .cookie-banner--message a:active { color: #b2f7ff } .cookie-banner--wrapper .cookie-banner--btn { min-width: 200px; } .cookie-banner--wrapper .cookie-banner--btn:hover { } @media print { .cookie-banner--wrapper { display: none } } /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */ .pswp { --pswp-bg: #000; --pswp-placeholder-bg: #222; --pswp-root-z-index: 100000; --pswp-preloader-color: rgba(79, 79, 79, 0.4); --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); /* defined via js: --pswp-transition-duration: 333ms; */ --pswp-icon-color: #fff; --pswp-icon-color-secondary: #4f4f4f; --pswp-icon-stroke-color: #4f4f4f; --pswp-icon-stroke-width: 2px; --pswp-error-text-color: var(--pswp-icon-color); } /* Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) */ .pswp { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--pswp-root-z-index); display: none; touch-action: none; outline: 0; opacity: 0.003; contain: layout style size; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Prevents focus outline on the root element, (it may be focused initially) */ .pswp:focus { outline: 0; } .pswp * { box-sizing: border-box; } .pswp img { max-width: none; } .pswp--open { display: block; } .pswp, .pswp__bg { transform: translateZ(0); } .pswp__bg { opacity: 1; background: var(--pswp-bg); } .pswp__bg { background: var(--colorOverlay); backdrop-filter: blur(var(--blurOverlay)); } .pswp, .pswp__scroll-wrap { overflow: hidden; } .pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pswp__img, .pswp__zoom-wrap { width: auto; height: auto; } .pswp__item::after { content: ""; top: 0; left: 0; right: 0; position: absolute; display: block; bottom: 0; width: 100%; height: 100%; } .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* :active to override grabbing cursor */ .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img, .pswp__button, .pswp__counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__item { /* z-index for fade transition */ z-index: 1; overflow: hidden; } .pswp__hidden { display: none !important; } /* Allow to click through pswp__content element, but not its children */ .pswp__content { pointer-events: none; } .pswp__content > * { pointer-events: auto; } /* PhotoSwipe UI */ /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg-container { display: grid; } .pswp__error-msg { margin: auto; font-size: 1em; line-height: 1; color: var(--pswp-error-text-color); } /* class pswp__hide-on-close is applied to elements that should hide (for example fade out) when PhotoSwipe is closed and show (for example fade in) when PhotoSwipe is opened */ .pswp .pswp__hide-on-close { opacity: 0.005; will-change: opacity; transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); z-index: 10; /* always overlap slide content */ pointer-events: none; /* hidden elements should not be clickable */ } /* class pswp--ui-visible is added when opening or closing transition starts */ .pswp--ui-visible .pswp__hide-on-close { opacity: 1; pointer-events: auto; } /*