*, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; position: relative; background: #fff; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: 700; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; 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-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } :root { --page-width-mobile: calc(100% - 30px); --page-width-desktop: calc(1280px - 60px); --page-width-desktop-xl: calc(1360px - 80px); --body-bg: #fff; --color-main: #000; --color-1: #ee0000; --color-2: #777; --font-1: 'Merriweather', Georgia, 'Times New Roman', serif; --font-2: 'Oswald', sans-serif; --col-gap-size: 100px; --row-gap-size: 30px; --sidebar-ease-fx: cubic-bezier(.65,.05,.36,1); --sidebar-ease-time: 600ms; } noscript div { color: red; text-align: center; padding: 20px; } .ns { -webkit-user-select: none; user-select: none; } a, input, textarea, button, select, .swiper-pagination { -webkit-tap-highlight-color: transparent; } ::selection { background-color: #bbb; color: #fff; } .d025 { animation-delay: 250ms; } .d05 { animation-delay: 500ms; } .d075 { animation-delay: 750ms;} .d1 { animation-delay: 1000ms; } .d125 { animation-delay: 1250ms; } .d15 { animation-delay: 1500ms; } .d175 { animation-delay: 1750ms; } .d2 { animation-delay: 2000ms; } .d225 { animation-delay: 2250ms; } .d25 { animation-delay: 2500ms; } .d275 { animation-delay: 2750ms; } .d3 { animation-delay: 3000ms; } .d325 { animation-delay: 3250ms; } .d35 { animation-delay: 3500ms; } .d375 { animation-delay: 3750ms; } @media only screen and (min-width: 1280px) { .anim-fil, .anim-fir, .anim-fiu, .anim-fid, .anim-fi, .anim-bi, .hide { opacity: 0; } .visible { opacity: 1; } } .blured { filter: blur(5px); opacity: .6; } .-f2 { font-family: var(--font-2); } .-lhn { line-height: 1; } .-fsb { font-size: 125%; } .-fsb2 { font-size: 165%; line-height: 1.5; } .-fwb { font-weight: 700; } .-fwn { font-weight: 400; } .-fwl { font-weight: 300; } .-nw { white-space: nowrap; } .-tar { text-align: right; } .-tac, .center { text-align: center; } .-tsw {text-shadow: 1px 1px 0 rgba(255, 255, 255, 1) } .text-big { font-size: 125%; } .text-small { font-size: 80%; } .color-a { color: var(--color-main); } .color-b { color: var(--color-1); } .color-c { color: #ee0000; } .colod-d { color: var(--color-2); } h1, .h1 { display: inline-block; margin: 25px 0 30px; position: relative; font-family: var(--font-2); font-size: calc(3.1rem + 30 * ((100vw - 360px) / 680)); font-weight: 700; font-style: normal; line-height: 1.15; letter-spacing: .5rem; text-transform: uppercase; } h1::after, .h1::after { content: ""; width: 60%; max-width: 200px; height: 6px; background: var(--color-1); position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); } h2, .h2 { font-size: calc(2.7rem + 10 * ((100vw - 360px) / 680)); font-weight: 500; line-height: 1.2; margin: 35px 0; } h3, .h3 { font-size: calc(2.4rem + 10 * ((100vw - 20px) / 680)); font-weight: 500; line-height: 1.2; margin: 25px 0; } h4, .h4, caption { font-size: calc(2.1rem + 10 * ((100vw - 260px) / 680)); font-weight: 500; line-height: 1.2; margin: 25px 0; } @media only screen and (min-width: 1280px) { .animated { -webkit-animation-duration: .7s; animation-duration: .7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.fast { -webkit-animation-duration: .45s; animation-duration: .45s; } .animated.faster { -webkit-animation-duration: .3s; animation-duration: .3s; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } nav { display: none; justify-content: space-between; position: relative; font-family: var(--font-2); text-transform: uppercase; } nav ul { list-style-type: none; padding: 0; margin: 0; z-index: 1; } nav ul li { display: block; -webkit-user-select: none; user-select: none; position: relative; } nav > ul li a { display: flex; align-items: center; height: 100%; padding: 25px 35px; text-decoration: none; color: #000; font-size: 1.9rem; font-weight: 700; transition: background 300ms ease; } a.no-click { cursor: default; } nav .menu { display: flex; } nav .menu > li { margin: 0; } nav .menu > li::after { content: ""; width: 1px; height: 100%; background: #ddd; position: absolute; top: 100%; transform: translateY(-100%); z-index: 1; pointer-events: none; } nav .menu > li:first-child::after { display: none; } nav .menu > li.active-root > a { background: #eee; } nav .menu > li:hover > a { background: #eee; } nav .dropdown { display: none; width: max-content; max-width: 280px; padding: 0; margin: 0; background: #fff; position: absolute; z-index: 1; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2); } nav .menu li .dropdown ul { left: 100%; top: 0; } nav .menu > li.drop-to-left .dropdown ul, nav .menu > li:last-child .dropdown ul { left: auto; right: 100%; } nav .dropdown li { width: 100%; position: relative; margin: 0; padding: 0; border-bottom: 1px solid #e6e6e6; } nav .dropdown li:last-child { border-bottom: none; } nav .dropdown li:hover > a, nav .dropdown li.active > a { background: #e6e6e6; color: var(--color-1); } .page nav .dropdown li.active > a { color: var(--color-1); } nav .dropdown a { display: block; padding: 15px 35px; color: var(--color-main); font-weight: 500; text-transform: none; text-align: left; transition: color 300ms ease, background 300ms ease; } nav .megamenu { display: none; width: 100%; background: #fff; position: absolute; left: 0; z-index: 1; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2); } nav:not(.mobile) .megamenu { max-height: calc(100vh - 232px - 30px); } nav:not(.mobile) .megamenu .megamenu-tabs, nav:not(.mobile) .megamenu .megamenu-tabs-content { overflow-x: hidden; overflow-y: auto; } nav .megamenu-tabs { display: block; width: 250px; padding: 35px 15px; background: #e6e6e6; } nav .megamenu-tabs li { position: relative; background: none; border-bottom: 1px solid #fff; } nav .megamenu-tabs li:last-child { border-bottom: none; } nav .megamenu-tabs li.active-tab::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #e6e6e6; position: absolute; top: 50%; right: -30px; z-index: -1; animation: 200ms ease-out forwards show-tabs-arrow; } @keyframes show-tabs-arrow { 0% { transform: translateY(-50%) translateX(-20px); } 100% { transform: translateY(-50%) translateX(0); } } nav .megamenu-tabs li a { padding: 20px 30px; color: var(--color-main); font-size: 2.1rem; line-height: 1.1; font-weight: 500; transition: color 300ms ease; } nav .megamenu-tabs li:hover a, nav .megamenu-tabs li.active-tab a { color: var(--color-1); } nav .megamenu-tabs li.active-tab a { pointer-events: none; } nav .megamenu-tabs-content { display: none; flex: 1; padding: 50px 50px; } nav .megamenu-tabs-content.active-tab-content { display: block; } nav .megamenu-tabs-content { font-family: var(--font-2); font-size: 1.7rem; opacity: 0; animation: 200ms ease-out forwards 100ms show-tabs-content; } @keyframes show-tabs-content { 0% { transform: translateY(-15px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } nav .megamenu-tabs-content a { padding: 0; margin: 0; color: var(--color-main); font: 400 2.1rem/1.2 var(--font-1); text-transform: none; transition: color 300ms ease; } nav .megamenu-tabs-content a:hover { color: var(--color-1); } .megamenu-tabs-content-nav { margin-top: 4px; column-count: 4; column-gap: 40px; } .megamenu-tabs-content-nav li { display: inline-block; width: 100%; margin: 0 0 15px; position: relative; } .megamenu-tabs-content-nav li a { display: inline-flex; padding-left: 6px; font-weight: 500; transition: padding 250ms ease-out, color 250ms ease; } .megamenu-tabs-content-nav li a::before { content: "-"; transform: translateX(-6px); color: var(--color-2); transition: transform 200ms ease-out; } .megamenu-tabs-content-nav li:not(.active) a:hover { padding-left: 0; } .megamenu-tabs-content-nav li:not(.active) a:hover::before { transform: translateX(-6px); } nav .megamenu-tabs-content li.active a { color: var(--color-1); } @keyframes show-drop-element { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } nav:not(.mobile) .menu li:hover > .dropdown { display: block; z-index: 2; animation: 200ms ease-out forwards show-drop-element; will-change: opacity, transform; } nav:not(.mobile) .menu li:hover > .megamenu { display: flex; z-index: 2; animation: 200ms ease-out forwards show-drop-element; will-change: opacity, transform; } .page nav > .menu li.drop a > span { display: none; } .page nav > .menu li.drop a.hasdrop { padding-right: 40px; position: relative; } .page nav > .menu li.drop a.hasdrop::after { content: "\203A"; display: flex; justify-content: center; align-items: flex-start; width: 40px; height: 100%; padding-top: 13px; position: absolute; top: 0; right: 0; font-size: 2rem; font-weight: 400; color: var(--color-1); } .page nav > .menu li.drop.drop-to-left a.hasdrop, .page nav > .menu li.drop:last-child a.hasdrop { padding-left: 40px; padding-right: 20px; } .page nav > .menu li.drop.drop-to-left a.hasdrop::after, .page nav > .menu li.drop:last-child a.hasdrop::after { content: "\2039"; right: auto; left: 0; } @media only screen and (max-width: 1279px) { .sidebar nav.mobile { display: block; width: 100%; background: #fff; } nav.mobile::before { display: none; } nav.mobile .menu { display: block; } nav.mobile > ul li a { padding: 15px 25px; font-size: 2rem; font-weight: 500; line-height: 1.1; } nav.mobile > ul li a.home { padding-top: 18px; padding-bottom: 18px; } nav.mobile .menu > li { box-shadow: 0 -1px 0 0 rgba(255, 255, 255, .2); margin: 0; } nav.mobile .menu > li::after { display: none; } nav.mobile .menu > li.active { background: #fff; } nav.mobile .menu > li.active-root > a, nav.mobile .menu > li.active > a { background: var(--color-1); color: #fff; } nav.mobile .show { display: block; width: 100%; max-width: 100%; animation: 400ms ease-in-out forwards show-mobile-drop-element; transform-origin: 0 0; } @keyframes show-mobile-drop-element { 0% { opacity: 0; transform: scaleY(0); } 30% { opacity: 0; } 80% { transform: scaleY(1); } 100% { opacity: 1; } } nav.mobile > ul li.drop > a, nav.mobile > ul li.drop a.hasdrop { padding-right: 40px; position: relative; } nav.mobile > .menu li.drop a > span { position: absolute; top: 0; right: 0; height: 100%; } nav.mobile > ul li.drop > a > span::after, nav.mobile > ul li.drop a.hasdrop > span::after { content: "+"; display: flex; justify-content: center; align-items: center; width: 100%; width: 40px; height: 100%; position: absolute; top: 0; right: 0; font-size: 1.9rem; font-weight: 500; background: rgba(255, 255, 255, .25); cursor: pointer; } nav.mobile > ul li.drop.active > a > span::after, nav.mobile > ul li.drop a.hasdrop.active-drop > span::after { content: "-"; } nav.mobile .dropdown { position: relative; box-shadow: none; } nav.mobile .menu li .dropdown .dropdown { padding-left: 25px; } nav.mobile .menu li .dropdown ul { position: relative; left: 0; top: 0; } nav.mobile .menu > li.drop-to-left .dropdown ul, nav.mobile .menu > li:last-child .dropdown ul { left: 0; top: 0; } nav.mobile .dropdown a { font-size: 1.9rem; } nav.mobile .dropdown li a.active-drop { background: #e6e6e6; color: var(--color-1); } nav.mobile .megamenu { position: relative; box-shadow: none; } nav.mobile .megamenu-tabs { width: 100%; padding: 0; } nav.mobile .megamenu-tabs li a { font-size: 1.7rem; } nav.mobile .megamenu-tabs li.active-tab::after { display: none; } nav.mobile .megamenu-tabs-content { padding: 20px 25px; } nav.mobile .megamenu-tabs-content-nav { margin: 0; columns: 2; } @media only screen and (max-width: 575px) { nav.mobile .megamenu-tabs-content-nav { columns: 1; } } nav.mobile .megamenu-tabs-content-nav li { margin: 8px 0; } nav.mobile .megamenu-tabs-content-nav li a { padding: 0; font-size: 1.75rem; } nav.mobile .megamenu-tabs-content-nav li a:hover { padding: 0; } nav.mobile .megamenu-tabs-content-nav li a::before, nav.mobile .megamenu-tabs-content-nav li a:hover::before { transform: translateX(-6px); } } .sidebar { width: 260px; height: 100%; position: fixed; top: 0; right: 0; z-index: 1; transform: translateX(260px); transition: transform var(--sidebar-ease-time) var(--sidebar-ease-fx); } .sidebar::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; box-shadow: 30px 0px 40px 40px rgba(0, 0, 0, .2); opacity: 0; transition: opacity var(--sidebar-ease-time) var(--sidebar-ease-fx); } .sidebar.sidebar-show { transform: translateX(0); z-index: 3; } .sidebar.sidebar-show::before { opacity: 1; } .sidebar__inner { width: 100%; height: 100%; overflow-y: auto; background: #fff; } .sidebar__top { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 30px 20px 25px 15px; } .sidebar__top .burgermenu { margin: 0; order: 1; animation: none; } .sidebar__top__social { display: flex; order: 2; } .sidebar__top__social a { display: flex; align-items: center; justify-content: center; height: 30px; margin-left: 20px; } .sidebar__top__social a img { transition: opacity 300ms ease; } .sidebar__top__social a:hover img { opacity: .4; } .sidebar__footer { color: #fff; padding: 20px 0 0 0; } .sidebar__footer h3 { display: block; margin: 0 0 10px; position: relative; font-size: 2.2rem; font-weight: 500; letter-spacing: .4rem; } .sidebar__footer h3::before { content: ""; width: 100%; height: 1px; background: var(--color-1); position: absolute; left: calc(-100% - 10px); top: calc(50% - 1px); } .sidebar__footer a { color: #fff; text-decoration: none; transition: color 300ms ease; } .sidebar__footer a:hover { color: var(--color-1); } .sidebar__footer p { margin: 0 0 5px; font-size: 1.6rem; } .page { display: block; min-height: 100vh; position: relative; z-index: 2; transition-property: opacity, transform; transition-duration: var(--sidebar-ease-time); transition-timing-function: var(--sidebar-ease-fx); opacity: 1; background: #000; } .page-hide { opacity: .2; transform: translateX(-260px); pointer-events: none; } .page-hide::after { content: ""; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 500; pointer-events: all; } @media only screen and (min-width: 380px) { .sidebar { width: 300px; transform: translateX(300px); } .page-hide { transform: translateX(-300px); } } @media only screen and (min-width: 576px) { .sidebar { width: 400px; transform: translateX(400px); } .sidebar__footer { background-size: 220px; padding-bottom: 80px; } .page-hide { transform: translateX(-400px); } } @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: var(--color-1); } .swiper-container { margin-left: auto; margin-right: auto; position: relative; list-style: none; padding: 0; overflow: hidden; z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 50%; transform: translateX(-50%); width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 30px; height: 18px; display: inline-block; position: relative; outline: none; transition: width 300ms ease; } .swiper-pagination-bullet::before { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: background 300ms ease; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { width: 40px; } .swiper-pagination-bullet-active::before { background: var(--color-1); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 7px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 72px; height: 72px; background: url('/gfx/loader.svg') no-repeat center; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 10; transform-origin: 50%; } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } :root { --font-size-base: 1.65rem; } html { height: 100%; font-size: 62.5%; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #e9eaea #000; } body { font: 400 var(--font-size-base)/1.4 var(--font-1); color: var(--color-main); background: #000; min-width: 340px; height: 100%; overflow-x: hidden; position: relative; } body::-webkit-scrollbar-track { background-color: #000; } body::-webkit-scrollbar { width: 10px; background-color: #000; } body::-webkit-scrollbar-thumb { background-color: #e9eaea; } body.fixed { position: fixed; left: 0; width: 100%; } a { color: var(--color-1); } a:hover { color: #000; } header { width: 100%; position: relative; z-index: 100; background: #fff; box-shadow: 0 0 30px 0 rgba(0, 0, 0, .3); } .header__inner { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: var(--page-width-mobile); min-height: 55px; margin: 0 auto; padding: 10px 0; position: relative; } .header__content { display: flex; justify-content: space-between; align-items: center; width: 100%; } .mobile_tools { display: flex; } .mobile_tools a { display: block; margin-left: 17px; } .mobile_tools a img { display: block; max-width: 60px; transition: opacity 300ms ease; } .mobile_tools a:hover img { opacity: .5; } .logo { display: block; width: 120px; height: auto; transition: transform 150ms ease-out; } .logo span { display: block; } .logo img { display: inline-block; width: 100%; transform-origin: bottom center; transition: opacity 300ms ease, transform 150ms ease-out; } .logo:hover img { opacity: .5; } .burgermenu { display: block; width: 40px; height: 33px; padding: 6px 5px; margin: 0; animation: 250ms show-burgermenu; position: fixed; top: 11px; right: 15px; z-index: 600; background: rgba(255, 255, 255, .9); } .sidebar .burgermenu { right: auto; left: 15px; } @keyframes show-burgermenu { 0% { opacity: 0; } 100% { opacity: 1; } } .burgermenu span { display: block; width: calc(100% - 10px); height: 3px; position: absolute; background: #000; border-radius: 4px; transition-property: transform, opacity, background; transition-duration: 250ms; transition-timing-function: ease-in-out; } .burgermenu:hover span { background: var(--color-1); } .burgermenu span:first-child { transform: translateY(0); } .burgermenu span.middle { transform: translateY(9px); } .burgermenu span:last-child { transform: translateY(18px); } .header .burgermenu.sticky span { background: var(--color-main); } .burgermenu.open span:first-child { transform: translateY(9px) rotate(45deg); } .burgermenu.open span:last-child { transform: translateY(9px) rotate(-45deg); } .burgermenu.open .middle { opacity: 0; transform: translate(-9px, 9px); } .burgermenu.open span { background: var(--color-1); } #slider::after { content: ""; width: 100%; height: 45px; position: absolute; left: 0; bottom: -1px; z-index: 1; } #slider .swiper-desc-wrapper { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #slider .swiper-desc { text-align: center; padding: 0 25px; } #slider .swiper-desc .h { --h-size: calc(4.5rem + 40 * ((100vw - 360px) / 680)); display: block; position: relative; margin: 0; font-family: var(--font-2); font-weight: 700; font-size: var(--h-size); line-height: 1; color: #fff; text-transform: uppercase; letter-spacing: .5rem; } #slider .swiper-desc .h::after { content: ""; width: 40%; max-width: 200px; height: 6px; background: var(--color-1); position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); } #slider .swiper-desc .desc { --desc-size: calc(2.6rem + 10 * ((100vw - 360px) / 680)); margin-top: 30px; font-size: var(--desc-size); font-weight: 400; font-style: italic; color: #fff; } #slider .swiper-desc .desc p { margin: 0; } #slider .swiper-pagination { display: flex; width: var(--page-width-mobile); bottom: 22px; } #slider .swiper-slide img { width: 100%; max-width: 100%; min-height: 350px; max-height: 880px; display: block; object-fit: cover; } .sub_page #slider a { pointer-events: none; } .sub_page #slider .swiper-desc-wrapper { display: none; } .sub_page #slider .swiper-pagination { display: none; } .sub_page #slider .swiper-slide img { min-height: inherit; height: 130px; } .footer { position: relative; z-index: 1; background: #000; padding: 10px 0 20px; } .footer__inner { width: var(--page-width-mobile); margin: 0 auto; font-style: italic; } .footer__data { display: block; text-align: center; } .footer__data-box { display: inline-flex; align-items: flex-start; margin: 25px 0; } .footer__data-box p { margin: 0; font-size: 1.65rem; color: #fff; } .footer__data-box p span { display: block; margin-bottom: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4rem; } .footer__data-box p a { color: #fff; text-decoration: none; transition: color 300ms ease; } .footer__data-box p a:hover { color: var(--color-1); } .footer__copy { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 30px; padding-top: 20px; font-size: 1.35rem; color: rgba(255, 255, 255, .4); border-top: 2px solid rgba(255, 255, 255, .15); } .footer__copy a { color: rgba(255, 255, 255, .4); text-decoration: none; transition: color 300ms ease; } .footer__copy a:hover { color: #fff; } .footer__copy .sep { display: inline-block; margin: 0 10px; } .footer__copy p { margin: 7px 0; } .footer__copy p:first-child { padding-right: 20px; } .footer__copy-design a { color: #fff; font-weight: 500; } .footer__copy-design a:hover { color: var(--color-1); } .section { margin: 0 auto; padding: 50px 0; font-style: italic; line-height: 1.7; } .section p { margin: 30px 0; } hr { position: relative; width: 100%; height: 0; border: none; border-top: 1px solid rgba(0, 0, 0, .15); background: none; margin: 35px 0; } .box { display: flow-root; padding: 30px 30px 10px; background: rgba(0, 0, 0, .1); text-shadow: 1px 1px 0 #fff; border-radius: 15px; } .box__photo { display: block; margin: 0 0 20px; } .box__photo picture { display: block; overflow: hidden; background: #fff; transition: background 300ms ease; will-change: opacity, transform; } .box__photo picture img { display: block; width: 100%; transition: opacity 300ms ease, transform 300ms ease; } a.box__photo:hover picture { background: var(--color-1); } a.box__photo:hover img { opacity: .4; transform: scale(1.15); } .box__content .desc-more { display: flex; align-items: center; margin: 30px 0 20px; text-align: right; } .box__content .desc-more hr { position: relative; flex: 1; width: 100%; height: 2px; border: none; background: none; margin: 0; overflow: hidden; } .box__content .desc-more hr::before { content: ""; width: calc(100% - 25px); height: 100%; position: absolute; top: 0; left: 0; background: #fff; } .box__content .desc-more .btn { margin: 0; } .box__content time { margin-bottom: 5px; } .box__header { margin: 0 0 30px; text-align: left; font-size: calc(2.4rem + 10 * ((100vw - 360px) / 500)); font-weight: 700; } .box__header a { color: var(--color-main); text-decoration: none; transition: color 300ms ease; } .box__header a:hover { color: var(--color-1); } .box__desc { text-align: left; hyphens: auto; } time { display: block; font-size: 1.3rem; color: var(--color-3); margin: 0; padding: 0; } .box + .box { margin-top: 30px; } .frame { display: inline-block; position: relative; border: 5px solid var(--color-1); padding: 15px 50px; margin: 10px auto !important; font-family: var(--font-2); font-size: 120%; font-style: normal; font-weight: 700; line-height: 1.4; letter-spacing: .2rem; text-transform: uppercase; border-top-right-radius: 30px; border-bottom-left-radius: 30px; } .btn { display: inline-flex; align-items: center; position: relative; margin: 10px 10px 10px 0; padding: 13px 25px; border: none; border-top-right-radius: 15px; border-bottom-left-radius: 15px; background: var(--color-1); font: 700 italic calc(var(--font-size-base) - .2rem)/1 var(--font-1); letter-spacing: .3rem; color: #fff; text-decoration: none; text-transform: uppercase; text-shadow: none; cursor: pointer; outline: none; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2); transition: background 200ms ease-in-out, color 200ms ease-in-out, padding 250ms ease-in-out; -webkit-user-select: none; user-select: none; } .btn:last-child { margin-right: 0; } .btn::after { content: ""; display: inline-block; margin-left: 10px; width: 10px; height: 20px; background: url('/gfx/arrow.svg') no-repeat; background-size: contain; transition: opacity 250ms ease, transform 250ms ease-in-out; } .btn:hover { padding-left: 31px; padding-right: 9px; background: #fff; color: var(--color-1); } .btn:hover::after { transform: translateX(10px) scale(0); opacity: 0; } .btn.style-2 { background: #fff; color: var(--color-main); } .btn.style-2:hover { color: var(--color-1); } .btn.style-2::after { background-image: url('/gfx/arrow-2.svg'); } .btn.prev { flex-direction: row-reverse; } .prev:hover { padding-left: 9px; padding-right: 31px; } .btn.prev::after { margin-left: 0; margin-right: 10px; transform: rotate(180deg); } .btn.prev:hover::after { transform: rotate(180deg) translateX(10px) scale(0); } .btn:disabled, .btn.disabled { pointer-events: none; opacity: .4; background: #ccc; } .social { display: none; } .img-b { border: 7px solid #fff; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1); } .photo-zoom { display: inline-flex; position: relative; margin: 0 auto; } .photo-zoom::before { content: ""; width: 30%; max-width: 60px; height: 30%; max-height: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.6); z-index: 1; opacity: 0; background: url("/gfx/zoom.svg") no-repeat 50%; background-size: contain; transition: opacity 300ms ease-in-out, transform 300ms ease; } .photo-zoom picture { display: block; background: var(--color-1); overflow: hidden; } .photo-zoom picture img { display: block; width: auto; max-width: 100%; height: auto; transition: opacity 300ms ease, transform 300ms ease; } .photo-zoom:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .photo-zoom:hover picture img { opacity: .4; transform: scale(1.15); } .gallery { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; justify-content: center; clear: both; } .innerGall { margin: 30px 0; clear: both; } .about, .offer__inner, .slogan { width: var(--page-width-mobile); } main .h1 { margin: 0 auto 30px; } .text__preamble { margin: 30px 0 50px; } .text__desc { padding: 0 10%; } .subpage { width: var(--page-width-mobile); margin: 0 auto; clear: both; position: relative; } .subpage::before { content: ""; width: 100vw; height: 100%; position: absolute; top: 0; left: -15px; z-index: -1; background: #fff; } .subpage ul.breadcrumb { display: block; list-style-type: none; margin: 0 0 30px; padding: 5px 0 10px; border-bottom: 1px solid rgba(0, 0, 0, .15); text-align: center; } .subpage ul li.breadcrumb-item { display: inline-block; position: relative; margin: 3px 15px 3px 0; padding: 0; font-size: 1.3rem; } .subpage ul li.breadcrumb-item::before { content: ""; display: inline-flex; width: 5px; height: 10px; margin-right: 15px; background: url('/gfx/arrow-2.svg') no-repeat; background-size: contain; } .subpage ul li.breadcrumb-item:first-child::before { display: none; } .subpage ul li.breadcrumb-item a { color: var(--color-main); text-decoration: none; transition: color 300ms ease; } .subpage ul li.breadcrumb-item a:hover:not(.no-click) { color: var(--color-1); } .subpage ul li.breadcrumb-item.active { color: var(--color-2); } .subpage > section { padding-top: 0; padding-bottom: 50px; } .subpage > section > *:last-child { margin-bottom: 0; } .subpage h1 { margin: 0 auto 60px; text-align: center; width: 100%; } .subpage h1 + *, .subpage h1 + .-fsb *:first-of-type { margin-top: 0; } .subpage a:not(.btn) { text-decoration: none; color: #000; transition: color 300ms ease; } .subpage a:hover { color: var(--color-1); } .subpage a[href$=".pdf"], .subpage a[href$=".zip"], .subpage a[href$=".rar"] { position: relative; display: inline-block; } .subpage a[href$=".pdf"]::before, .subpage a[href$=".zip"]::before, .subpage a[href$=".rar"]::before { content: ""; width: 30px; height: 28px; display: inline-block; margin: 0 10px 0 8px; transform: translateY(5px); background: url('/gfx/download.svg') no-repeat 0 0; } .subpage ul { list-style-type: none; margin: 0; padding: 0 3rem; } .subpage li { position: relative; margin: 10px 0; } .subpage ul li:not(.breadcrumb-item)::before { content: "-"; display: inline-block; position: relative; width: 3rem; margin-left: -3rem; top: 3px; font-size: 130%; font-weight: bold; color: var(--color-1); } .subpage caption { margin: 0 auto 20px; color: var(--color-1); } .subpage table { border: none; border-collapse: collapse; max-width: 100%; margin: 35px auto 50px; } .subpage h2 + table, .subpage h3 + table, .subpage h4 + table { margin-top: 0; } .subpage table th { text-align: left; padding: 5px 10px; background: rgba(0, 0, 0, .1) } .subpage table th:last-child { text-align: right; } .subpage table tr td { padding: 8px 10px; margin: 0; text-align: left; border: none; border-bottom: 1px dashed rgba(223, 84, 0, .6); line-height: 1.4; transition: background 400ms ease; } .subpage table tr td:first-child { width: 75% !important; } .subpage table tr td:last-child { text-align: right; } .subpage table tr:hover td { background: rgba(0, 0, 0, .05); } .map { display: block; margin-top: 40px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1); background: var(--color-1); } .map img { display: block; width: 100%; transition: opacity 300ms ease; } .map:hover img { opacity: .8; } .go-top { display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; background: #fff; box-shadow: 0 0 30px 0 rgba(0, 0, 0, .06); position: fixed; right: 0; bottom: 10%; z-index: 999; transform: translateX(42px); transition: background 300ms ease, transform 300ms var(--sidebar-ease-fx); border-top-left-radius: 15px; } .go-top.show { transform: translateX(0); } .go-top img { display: none; } .go-top svg { display: block; width: 100%; height: 40%; object-fit: contain; transform: rotate(-90deg); } .go-top svg path { fill: var(--color-1); transition: fill 300ms ease; } .go-top:hover { background: var(--color-1); } .go-top:hover svg path { fill: #fff; } @media only screen and (min-width: 576px) { .col-2, .col-3 { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-column-gap: var(--col-gap-size); grid-row-gap: var(--row-gap-size); overflow: hidden; } .col-3 { grid-template-columns: repeat(3, 1fr); } .no-col-gape { grid-column-gap: 0; } .no-row-gape { grid-row-gap: 0; } .col-2 .cell, .col-3 .cell { position: relative; } [class*='col-'] *:last-child { margin-bottom: 0; } [class*='col-']:not(.no-col-gape).sep .cell::before { content: ""; width: 1px; height: 100%; position: absolute; top: 0; left: calc(var(--col-gap-size) * -1 / 2); background: #e3e3e3; } } .cookies { display: none; flex-flow: column; padding: 20px; color: #fff; max-width: 300px; position: fixed; left: 0; bottom: 0; z-index: 500; background: rgba(0, 0, 0, .9); border-top-right-radius: 30px; font-size: 1.4rem; font-weight: 400; transform: translateY(100%); } .cookies--show { display: inline-flex; animation: cookie-show 300ms ease-out forwards 2s; } .cookies--accepted { display: inline-flex; transform: translateY(0); animation: cookie-hide 300ms ease-out forwards .1s; pointer-events: none; } .cookies p { margin: 0; } .cookies a { display: inline-block; color: inherit; text-decoration: none; transition: color 300ms ease; } .cookies a:hover { color: var(--color-1); } .cookies button { background: #fff; font-weight: 500; border: none; border-radius: 6px; margin: 10px 0 0; padding: 10px; cursor: pointer; outline: none; transition-property: color, background; transition-duration: 300ms; transition-timing-function: ease; } .cookies button:hover { color: #fff; background: var(--color-1); } @keyframes cookie-show { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes cookie-hide { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } } .gallery img { max-width:100%; height:auto; } html { overflow-x:hidden; overflow-x:clip; } @font-face { font-family: 'lg'; src: url("/fonts/lg.eot?n1z373"); src: url("/fonts/lg.eot?#iefixn1z373") format("embedded-opentype"), url("/fonts/lg.woff?n1z373") format("woff"), url("/fonts/lg.ttf?n1z373") format("truetype"), url("/fonts/lg.svg?n1z373#lg") format("svg"); font-weight: normal; font-style: normal; } .lg-icon { font-family: 'lg'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 2px; color: #999; cursor: pointer; display: block; font-size: 22px; margin-top: -10px; padding: 8px 10px 9px; position: absolute; top: 50%; z-index: 1080; outline: none; border: none; background-color: transparent; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { pointer-events: none; opacity: 0.5; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { color: var(--color-1); } .lg-actions .lg-next { right: 20px; } .lg-actions .lg-next:before { content: "\e095"; } .lg-actions .lg-prev { left: 20px; } .lg-actions .lg-prev:after { content: "\e094"; } @-webkit-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-moz-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-ms-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-webkit-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-moz-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-ms-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } .lg-outer.lg-right-end .lg-object { -webkit-animation: lg-right-end 0.3s; -o-animation: lg-right-end 0.3s; animation: lg-right-end 0.3s; position: relative; } .lg-outer.lg-left-end .lg-object { -webkit-animation: lg-left-end 0.3s; -o-animation: lg-left-end 0.3s; animation: lg-left-end 0.3s; position: relative; } .lg-toolbar { z-index: 1082; left: 0; position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { color: #999; cursor: pointer; float: right; font-size: 24px; height: 47px; line-height: 27px; padding: 10px 0; text-align: center; width: 50px; text-decoration: none !important; outline: medium none; background: none; border: none; box-shadow: none; -webkit-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; } .lg-toolbar .lg-icon:hover { color: var(--color-1); } .lg-toolbar .lg-close:after { content: "\e070"; } .lg-toolbar .lg-download:after { content: "\e0f2"; } .lg-sub-html { background-color: rgba(0, 0, 0, 0.45); bottom: 0; color: #EEE; font-size: 16px; left: 0; padding: 10px 40px; position: fixed; right: 0; text-align: center; z-index: 1080; } .lg-sub-html h4 { margin: 0; font-size: 13px; font-weight: bold; } .lg-sub-html p { font-size: 12px; margin: 5px 0 0; } #lg-counter { color: #999; display: inline-block; font-size: 16px; padding-left: 20px; padding-top: 12px; vertical-align: middle; } .lg-toolbar, .lg-prev, .lg-next { opacity: 1; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; } .lg-hide-items .lg-prev { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .lg-hide-items .lg-next { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } .lg-hide-items .lg-toolbar { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); opacity: 0; -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } .lg-outer .lg-thumb-outer { background-color: #fff; bottom: 0; position: absolute; width: 100%; z-index: 1080; max-height: 350px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { padding: 10px 0; height: 100%; margin-bottom: -5px; } .lg-outer .lg-thumb-item { cursor: pointer; float: left; overflow: hidden; height: 100%; background: var(--color-1); margin-bottom: 5px; } @media (min-width: 1025px) { .lg-outer .lg-thumb-item img { -webkit-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } } .lg-outer .lg-thumb-item img { width: 100%; height: 100%; object-fit: cover; } .lg-outer .lg-thumb-item.active img, .lg-outer .lg-thumb-item:hover img { opacity: .5; } .lg-outer.lg-has-thumb .lg-item { padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { -webkit-transition: bottom 0.25s ease; -o-transition: bottom 0.25s ease; transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 100px; } .lg-outer .lg-toggle-thumb { background-color: #fff; border-radius: 2px 2px 0 0; color: #000; cursor: pointer; font-size: 24px; height: 39px; line-height: 27px; padding: 5px 0; position: absolute; right: 20px; text-align: center; top: -39px; width: 50px; outline: medium none; border: none; transition: color 300ms ease; } .lg-outer .lg-toggle-thumb:after { content: "\e1ff"; } .lg-outer .lg-toggle-thumb:hover { color: var(--color-1); } .lg-outer .lg-video-cont { display: inline-block; vertical-align: middle; max-width: 1140px; max-height: 100%; width: 100%; padding: 0 5px; } .lg-outer .lg-video { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .lg-outer .lg-video .lg-object { display: inline-block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .lg-outer .lg-video .lg-video-play { width: 84px; height: 59px; position: absolute; left: 50%; top: 50%; margin-left: -42px; margin-top: -30px; z-index: 1080; cursor: pointer; } .lg-outer .lg-has-vimeo .lg-video-play { background: url("/gfx/gallery/vimeo-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-vimeo:hover .lg-video-play { background: url("/gfx/gallery/vimeo-play.png") no-repeat scroll 0 -58px transparent; } .lg-outer .lg-has-html5 .lg-video-play { background: transparent url("/gfx/gallery/video-play.png") no-repeat scroll 0 0; height: 64px; margin-left: -32px; margin-top: -32px; width: 64px; opacity: 0.8; } .lg-outer .lg-has-html5:hover .lg-video-play { opacity: 1; } .lg-outer .lg-has-youtube .lg-video-play { background: url("/gfx/gallery/youtube-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-youtube:hover .lg-video-play { background: url("/gfx/gallery/youtube-play.png") no-repeat scroll 0 -60px transparent; } .lg-outer .lg-video-object { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } .lg-outer .lg-has-video .lg-video-object { visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { visibility: visible; } .lg-progress-bar { background-color: #333; height: 5px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1083; opacity: 0; -webkit-transition: opacity 0.08s ease 0s; -moz-transition: opacity 0.08s ease 0s; -o-transition: opacity 0.08s ease 0s; transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { background-color: var(--color-1); height: 5px; width: 0; } .lg-progress-bar.lg-start .lg-progress { width: 100%; } .lg-show-autoplay .lg-progress-bar { opacity: 1; } .lg-autoplay-button:after { content: "\e01d"; } .lg-show-autoplay .lg-autoplay-button:after { content: "\e01a"; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transition-duration: 0s; transition-duration: 0s; } .lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } #lg-zoom-in:after { content: "\e311"; } #lg-actual-size { font-size: 20px; } #lg-actual-size:after { content: "\e033"; } #lg-zoom-out { opacity: 0.5; pointer-events: none; } #lg-zoom-out:after { content: "\e312"; } .lg-zoomed #lg-zoom-out { opacity: 1; pointer-events: auto; } .lg-outer .lg-pager-outer { bottom: 60px; left: 0; position: absolute; right: 0; text-align: center; z-index: 1080; height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { overflow: visible; } .lg-outer .lg-pager-cont { cursor: pointer; display: inline-block; overflow: hidden; position: relative; vertical-align: top; margin: 0 5px; } .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { background-color: #fff; color: #FFF; bottom: 100%; height: 83px; left: 0; margin-bottom: 20px; margin-left: -60px; opacity: 0; padding: 5px; position: absolute; width: 120px; border-radius: 3px; -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { width: 100%; height: 100%; } .lg-outer .lg-pager { background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; display: block; height: 12px; -webkit-transition: box-shadow 0.3s ease 0s; -o-transition: box-shadow 0.3s ease 0s; transition: box-shadow 0.3s ease 0s; width: 12px; } .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px dashed; bottom: -10px; display: inline-block; height: 0; left: 50%; margin-left: -5px; position: absolute; vertical-align: middle; width: 0; } .lg-fullscreen:after { content: "\e20c"; } .lg-fullscreen-on .lg-fullscreen:after { content: "\e20d"; } .lg-outer #lg-dropdown-overlay { background-color: rgba(0, 0, 0, 0.25); bottom: 0; cursor: default; left: 0; position: fixed; right: 0; top: 0; z-index: 1081; opacity: 0; visibility: hidden; -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; } .lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay { -webkit-transition-delay: 0s; transition-delay: 0s; -moz-transform: translate3d(0, 0px, 0); -o-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); opacity: 1; visibility: visible; } .lg-outer.lg-dropdown-active #lg-share { color: #FFF; } .lg-outer .lg-dropdown { background-color: #fff; border-radius: 2px; font-size: 14px; list-style-type: none; margin: 0; padding: 10px 0; position: absolute; right: 0; text-align: left; top: 50px; opacity: 0; visibility: hidden; -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; } .lg-outer .lg-dropdown:after { content: ""; display: block; height: 0; width: 0; position: absolute; border: 8px solid transparent; border-bottom-color: #FFF; right: 16px; top: -16px; } .lg-outer .lg-dropdown > li:last-child { margin-bottom: 0px; } .lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon { color: #333; } .lg-outer .lg-dropdown a { color: #333; display: block; white-space: pre; padding: 4px 12px; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; } .lg-outer .lg-dropdown a:hover { background-color: rgba(0, 0, 0, 0.07); } .lg-outer .lg-dropdown .lg-dropdown-text { display: inline-block; line-height: 1; margin-top: -3px; vertical-align: middle; } .lg-outer .lg-dropdown .lg-icon { color: #333; display: inline-block; float: none; font-size: 20px; height: auto; line-height: 1; margin-right: 8px; padding: 0; vertical-align: middle; width: auto; } .lg-outer #lg-share { position: relative; } .lg-outer #lg-share:after { content: "\e80d"; } .lg-outer #lg-share-facebook .lg-icon { color: #3b5998; } .lg-outer #lg-share-facebook .lg-icon:after { content: "\e901"; } .lg-outer #lg-share-twitter .lg-icon { color: #00aced; } .lg-outer #lg-share-twitter .lg-icon:after { content: "\e904"; } .lg-outer #lg-share-googleplus .lg-icon { color: #dd4b39; } .lg-outer #lg-share-googleplus .lg-icon:after { content: "\e902"; } .lg-outer #lg-share-pinterest .lg-icon { color: #cb2027; } .lg-outer #lg-share-pinterest .lg-icon:after { content: "\e903"; } .group { *zoom: 1; } .group:before, .group:after { display: table; content: ""; line-height: 0; } .group:after { clear: both; } .lg-outer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1050; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lg-outer.lg-visible { opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; opacity: 1; } .lg-outer.lg-grab img.lg-object { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer.lg-grabbing img.lg-object { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg { height: 100%; width: 100%; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; } .lg-outer .lg-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; white-space: nowrap; } .lg-outer .lg-item { background: url("/gfx/loader.svg") no-repeat scroll center center transparent; display: none !important; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { display: inline-block !important; } .lg-outer.lg-css .lg-current { display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { display: inline-block; text-align: center; position: absolute; width: 100%; height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } .lg-outer .lg-img-wrap { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; } .lg-outer .lg-item.lg-complete { background-image: none; } .lg-outer .lg-item.lg-current { z-index: 1060; } .lg-outer .lg-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { opacity: 1; } .lg-outer .lg-empty-html { display: none; } .lg-outer.lg-hide-download #lg-download { display: none; } .lg-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: #000; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-backdrop.in { opacity: 1; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { -webkit-transition: none 0s ease 0s !important; -moz-transition: none 0s ease 0s !important; -o-transition: none 0s ease 0s !important; transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { -webkit-transition: opacity 0.1s ease 0s; -moz-transition: opacity 0.1s ease 0s; -o-transition: opacity 0.1s ease 0s; transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { opacity: 0; position: absolute; left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { left: 0; opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } @media only screen and (min-width: 576px) { .footer__data-box p a { font-size: 140%; } .box { padding: 40px 40px 20px; } .box__photo { float: right; width: 50%; margin: 0 0 20px 40px; } .gallery { grid-column-gap: 20px; grid-row-gap: 20px; } .gallery.vertical { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 768px) { .box { display: flex; align-items: stretch; padding: 40px; } .box__photo { display: inline-table; float: none; width: auto; margin: 0 45px 0 0; } .box__content { display: flex; flex-flow: column nowrap; justify-content: space-between; flex-basis: 100%; } .box__desc p:last-child { margin-bottom: 0; } .box__content .desc-more { margin-bottom: 0; } .gallery { grid-template-columns: repeat(3, 1fr); } .gallery.vertical { grid-template-columns: repeat(4, 1fr); } } @media only screen and (min-width: 992px) { :root { --page-width-mobile: calc(100% - 60px); } .footer { padding-top: 30px; } .footer__data { display: flex; justify-content: center; } .footer__data-box { margin: 0; } .subpage::before { left: -30px; } hr { margin: 40px 0; } .photo-zoom::before { width: 80px; height: 80px; background-size: 60px; } } @media only screen and (min-width: 1280px) { :root { --font-size-base: 2rem; } .sidebar { display: none; transition: none; } h1, .h1 { font-size: 7rem; } h1::after, .h1::after { height: 10px; bottom: -24px; } h2, .h2 { font-size: 4.45rem; } h3, .h3 { font-size: 3.7rem; } h4, .h4, caption { font-size: 3rem; } .page { background-attachment: fixed; } header { position: fixed; top: 0; left: 0; outline: 1px solid transparent; transition: background 300ms ease; } .header__inner { width: var(--page-width-desktop); min-height: auto; padding: 0; } .header__content { width: auto; } .mobile_tools { display: none; } nav { display: flex; height: 83px; } nav > ul li a { font-size: 1.9rem; } nav .menu > li > a { line-height: 1; } .burgermenu { display: none; } #slider .swiper-desc .h { --h-size: 11.4rem; } #slider .swiper-desc .h::after { height: 10px; bottom: -24px; } #slider .swiper-desc .desc { --desc-size: 5.5rem; margin-top: 40px; transform: translateY(0); } #slider .swiper-pagination { width: var(--page-width-desktop); } #slider .swiper-pagination-bullet::before { height: 4px; } #slider .swiper-slide img { height: 880px; } .sub_page #slider .swiper-slide img { height: 350px; } .about, .offer__inner, .slogan { width: var(--page-width-desktop); } .text__preamble { margin-bottom: 50px; } .text__desc { padding: 0 15%; } .footer__inner { width: var(--page-width-desktop); } .footer__data-box { margin-top: 10px; } .subpage { width: var(--page-width-desktop); } .subpage::before { width: 200vw; left: -100vw; } .subpage h1 { margin-bottom: 80px; } .subpage table { max-width: 80%; } .subpage table tr td:first-child { width: 80% !important; } .headers { font-size: 3rem; } .box__header { font-size: 3.4rem; } .btn::after { width: 12px; height: 24px; } .social { display: flex; flex-direction: column; align-items: center; position: fixed; top: 20%; right: 0; z-index: 10; background: #fff; padding: 10px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, .1); } .social a { display: flex; justify-content: center; width: 30px; height: auto; margin: 8px 0; } .social a img { transition: opacity 300ms ease; } .social a:hover img { opacity: .4; } } @media only screen and (min-width: 1600px) { .header__inner { width: var(--page-width-desktop-xl); } #slider .swiper-pagination { width: var(--page-width-desktop-xl); } .about, .footer__inner, .subpage { width: var(--page-width-desktop-xl); } }