/*------------------------RESET---------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ ::-moz-selection {color: white; background: var(--color1);} ::selection {color: white; background: var(--color1);} :root { --font1: 'erbaum', sans-serif; /* 200 - 500 */ --wrapper-side: 3vw; --header: 4.5em; --border-radius0: 0.6rem; --border-radius1: 1.2rem; --button-height: 2.4em; --gap1: 1rem; --gap2: min(1.8rem, calc(0.8rem + 3vw)); --color0: #2B2321; --color1: #6F483B; --color2: #9D7A5C; --color3: #D1CAB8; --white-10: rgba(255,255,255,0.1); --white-20: rgba(255,255,255,0.2); --white-60: rgba(255,255,255,0.6); --white-70: rgba(255,255,255,0.7); --black-30: rgba(0,0,0,0.3); --black-40: rgba(0,0,0,0.4); --black-60: rgba(0,0,0,0.6); --color-error: #df0e3b; --header: min(8rem, calc(3rem + 5vw)); --header-item: 2.2rem; --section-padding: min(7rem, calc(3rem + 6vw)); --section-padding-lower: calc(0.7 * var(--section-padding)); --wrapper-width: 86vw; --wrapper-max: 62rem; --wrapper-wide-max: 72rem; --wrapper-medium-max: 54rem; --wrapper-narrow-max: 47rem; --wrapper-thin-max: 38rem; --preview-padding: 0.4rem; --icon-size: 3rem; --line-basic: 1.4; --button-height: 2.4em; --box-shadow: 0 0 1.2em black; --headline-line: 1.3; --form-gap: 1em; --form-items-gap: 0.8em; --form-item-height: 3.2em; --form-item-border: solid 0.1em var(--white-20); --form-item-padding: 1em; } html {display: block; width: 100%; height: 100%; text-align: center; font-size: min(17px, calc(12px + 1vw)); font-weight: 300; color: var(--color3); background: var(--color0); letter-spacing: 0.06em; line-height: var(--line-basic); overflow-x: hidden; font-family: var(--font1);} body {display: block; width: 100%; position: relative; box-sizing: border-box;} body.header-show :is(.main, .footer) {filter: blur(6px); opacity: 0.35;} form {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;} .wrapper {display: flex; width: var(--wrapper-width); flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap2); margin: 0 auto; box-sizing: border-box; position: relative; z-index: 5;} @media screen and (min-width: 1367px) { .wrapper {max-width: var(--wrapper-max);} .wrapper.wide {width: 94%; max-width: var(--wrapper-wide-max);} .wrapper.medium {max-width: var(--wrapper-medium-max);} .wrapper.narrow {max-width: var(--wrapper-narrow-max);} .wrapper.thin {max-width: var(--wrapper-thin-max);} } strong {font-weight: 500;} em {font-style: italic;} button {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;} .header {display: block; width: 100%; height: var(--header); position: fixed; top: 0; left: 0; box-sizing: border-box; z-index: 1000; transition: .5s ease-in-out;} .header:before {display: block; position: absolute; inset: 0; background: var(--color0); opacity: 0; content: ""; transition: .5s ease-in-out;} .header .wrapper {width: 90%; height: 100%;} .header .inner {display: flex; width: 100%; height: 100%; justify-content: space-between; align-items: center; position: relative; box-sizing: border-box;} .header .logo {display: block; width: min(7em, calc(3em + 12vw));} .header .logo img {display: block; width: 100%;} .header .collapse {display: flex;} .header nav {display: flex; justify-content: center; box-sizing: border-box;} .header nav > ul {display: flex; align-items: center; position: relative;} .header nav > ul > li {display: flex; align-items: center; transition: .15s ease-in-out;} .header nav > ul > li > a {display: flex; height: var(--header-item); align-items: center; color: inherit; font-size: 0.9em; font-weight: 300; line-height: 1; position: relative; padding-inline: 1.1em; border-radius: 1.2em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;} .header nav > ul > li > a:hover, .header nav > ul > li > a.sel {background: var(--white-10); color: white;} .header-elements {display: flex; justify-content: flex-end; align-items: center;} .header-elements .soc {display: flex;} .header-elements .soc a {display: flex; width: var(--header-item); height: var(--header-item); justify-content: center; align-items: center; border-radius: 100%; margin-inline: -0.2em; transition: .15s ease-in-out;} .header-elements .soc a img {display: block; width: 45%; transition: .15s ease-in-out;} .header-elements .soc a:hover {background: var(--white-10);} .header-elements .soc a:hover img {filter: brightness(2);} .header.scroll {backdrop-filter: blur(6px);} .header.scroll:before {opacity: 0.7;} .header:not(.show).scroll-down {top: calc(-1 * var(--header));} /* @media screen and (min-width: 1081px) and (max-width: 1280px){ .header {font-size: 0.85em;} .header nav > ul > li > a {padding-inline: 1em;} } @media screen and (min-width: 1081px) { .header .collapse {flex-grow: 2;} .header :is(.collapse, nav, nav > ul) {height: 100%;} .header nav {flex-grow: 2;} .header nav > ul {justify-content: center;} .header #navicon {display: none;} } @media screen and (max-width: 1080px) { .header .collapse {width: 100%; height: calc(100svh - var(--header)); position: fixed; left: -9999px; top: var(--header); bottom: 0; padding: 0 calc(50vw - 0.5 * var(--wrapper-width)) 1rem; box-sizing: border-box; opacity: 0; transform: scale(0.85); transition: opacity .5s ease-in-out, transform .5s ease-in-out;} .header nav {width: 100%; background: var(--black-40);; box-shadow: var(--box-shadow); padding: 0 7vw; overflow-y: auto; transition: .5s ease-in-out;} .header nav > ul {width: 100%; flex-direction: column;} .header nav > ul > li {width: 100%;} .header nav > ul > li > a {width: 100%; text-align: left; font-size: 1.2em;} .header nav > ul > li > a:hover {color: var(--color1);} .header nav > ul > li:first-child a {margin-top: 8vw;} .header nav > ul > li:last-child a {margin-bottom: 8vw;} .header-elements {flex-grow: 2;} .header #navicon {display: block; width: 1.4em; height: 1em; position: relative; cursor: pointer; margin-left: 0.6em;} .header #navicon span {display: block; width: 100%; height: 0.16em; background: white; border-radius: 2px; position: absolute; left: 0; transition: .15s ease-in-out;} .header #navicon span:nth-child(1) {top: 0;} .header #navicon span:nth-child(2), .header #navicon span:nth-child(3) {top: calc(50% - 0.08em);} .header #navicon span:nth-child(4) {bottom: 0;} .header #navicon div {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;} .header.show {background: transparent; backdrop-filter: blur(0px);} .header.show #navicon span:nth-child(2) {transform: rotate(45deg);} .header.show #navicon span:nth-child(3) {transform: rotate(-45deg);} .header.show #navicon span:nth-child(1), .header.show #navicon span:nth-child(4) {opacity: 0 !important;} .header.show #navicon div {display: block;} .header.show .collapse {left: 0; opacity: 1; transform: scale(1);} .header.show .collapse nav {border-radius: 2em;} .header.show.hide .collapse {opacity: 0; transform: scale(1.15);} } @media screen and (max-width: 540px) { .header .btn-cart {width: var(--button-height); padding-inline: 0;} .header .btn-cart .text {display: none;} .header .btn-cart .count {background: white; color: var(--color0); outline: solid 0.25em var(--color0); position: absolute; right: -0.15em; bottom: -0.15em; content: "";} } */ .footer {display: block; width: 100%; position: relative; z-index: 10; padding-block: calc(0.5 * var(--section-padding));} .footer .bg-img div {background-image: linear-gradient(to right, transparent, var(--white-10), transparent);} .footer-contacts {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap1) var(--gap2); font-size: min(0.9em, calc(0.35em + 2vw)); position: relative; z-index: 2;} .footer-contacts a {display: flex; align-items: center; gap: 0.5em; font-size: 1em; color: inherit; font-weight: 400; transition: .25s ease-in-out;} .footer-contacts a span {display: flex; width: 1.5em; height: 1.5em; justify-content: center; align-items: center; background: var(--color3); border-radius: 100%; position: relative; top: -0.05em; transition: .15s ease-in-out;} .footer-contacts a span img {display: block; height: 65%;} .footer-contacts a:hover {color: white;} .footer-contacts a:hover span {background: white;} .footer .bottom {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.2em 1.2em; font-size: 0.7em; padding-block: var(--gap2);} .footer .bottom li {display: block; color: var(--white-60);} .footer .bottom li a {color: inherit; text-decoration: underline; transition: .25s ease-in-out;} .footer .bottom li a:hover {color: var(--white-70); text-decoration-color: transparent;} .main {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; flex-grow: 1; transition: .15s ease-in-out;} .section {display: block; width: 100%; position: relative; padding-top: var(--section-padding); overflow: hidden;} .section.padding-top-lower, .section:first-child {padding-top: var(--section-padding-lower);} .section.padding-bottom-lower {padding-bottom: var(--section-padding-lower);} .section.padding-top-0 {padding-top: 0;} .section.padding-bottom {padding-bottom: var(--section-padding);} .section.color0 {background: var(--color0); overflow: hidden;} .section.color0:before, .section.color0:after {display: block; width: 30rem; height: 30rem; opacity: 0.1; background: url("../images/icons/pictogram-outline-white.svg") no-repeat center center; background-size: contain; position: absolute; content: "";} .section.color0:before {left: 65%; top: -15rem;} .section.color0:after {right: 65%; bottom: -15rem;} .section.color0-10 {background: var(--color0-10);} .section.start-top:before, .section.bottom-end:after {display: block; width: 100%; height: 20em; background-image: linear-gradient(to bottom, white, transparent); position: absolute; left: 0; top: 0; content: "";} .section.bottom-end:after {top: auto; bottom: 0; transform: rotate(180deg);} .section.bottom-start {background-image: linear-gradient(to top, var(--color0-10), transparent var(--section-padding-lower), transparent);} .section.bottom-start + .section {padding-top: 0;} .section.overflow + .section {padding-top: calc(2 * var(--section-padding)); margin-top: calc(-1 * var(--section-padding));} .section.color0 :is(h2, p) {color: white;} body:not(.hp) .section:first-child {padding-top: min(2.5rem, 3vw);} .main p, .main li {display: block; width: 100%; box-sizing: border-box; position: relative;} .main p a, .main ul:not([class]) li a {color: inherit; text-decoration: underline; transition: .15s ease-in-out;} .main p a:hover, .main ul:not([class]) li a:hover {opacity: 0.8; text-decoration-color: transparent;} .main strong {font-weight: 700;} .main em {font-style: italic;} ul.checks {display: block; margin-top: -0.2em;} ul.checks li {display: inline-block; text-align: left; padding-left: 1.5em; margin-top: 0.2em;} ul.checks li:before {display: block; width: 1.15em; height: 1.15em; background: url("../images/icons/check-color2.svg") no-repeat left center; background-size: contain; position: absolute; left: 0; top: 0.14em; content: "";} .txt-gradient1 {background: -webkit-linear-gradient(0deg, var(--color2b), var(--color1-2), var(--color1b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} h1, h2, h3 {display: block; width: 100%; font-weight: 400; box-sizing: border-box; font-family: var(--font1);} h1 {font-size: min(calc(1.5em + 4vw), 3.6em);} h2 {font-size: min(calc(1.2em + 4vw), 2.8em);} h3 {font-size: min(calc(1em + 4vw), 1.45em);} .subheadline {font-size: min(calc(0.6em + 3vw), 1.45em); font-weight: 500;} h1 + .subheadline {margin-top: -1em;} .subheadline:has(+ h2) {margin-bottom: -1em;} .icon {display: flex; width: var(--icon-size); height: var(--icon-size); justify-content: center; align-items: center; font-weight: 700; border-radius: 100%; position: relative; box-sizing: border-box; isolation: isolate; z-index: 2;} .icon img {display: block; width: auto; height: 44%;} .icon.black-60 {background: var(--black-60);} .icon.white {background: white;} .icon.color2 {background-image: linear-gradient(to top, var(--color2), var(--color2b));} .icon.shadow:before {display: block; width: 116%; height: 116%; border-radius: 100%; position: absolute; inset: -8%; z-index: -1; content: ""; box-shadow: 0 0 0.8em black;} .icon:not(:has(img)) {font-size: 1.3em; padding-bottom: 0.2em;} .breadcrumbs {display: block; max-width: 100%; font-size: 0.75em; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;} .breadcrumbs::-webkit-scrollbar {display: none;} .breadcrumbs ul {display: flex; gap: 1.3em; margin: 0; padding: 0 !important;} .breadcrumbs ul li {display: flex; width: auto; align-items: center; line-height: 1.3 !important; position: relative; padding: 0; margin: 0;} .breadcrumbs ul li:before {display: none;} .breadcrumbs ul li:not(:last-child) a:after {display: inline-block; width: 0.5em; height: 0.5em; position: absolute; right: -0.88em; top: 0.42em; background: url("../images/icons/chevron-white.svg") no-repeat center center; background-size: contain; content: "";transition: .25s ease-in-out;} .breadcrumbs ul li a {display: block; color: inherit; text-decoration: none; font-weight: 500; border: none; white-space: nowrap; opacity: 0.7; letter-spacing: 0; transition: .25s ease-in-out;} .breadcrumbs ul li a[href]:hover {opacity: 1;} .breadcrumbs:has(+ .article) {width: 100%;} .pagination {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em;} .pagination a {display: flex; width: 2.4em; aspect-ratio: 1; border-radius: 100%; justify-content: center; align-items: center; align-items: center; font-size: 0.9em; color: white; text-decoration: none; font-weight: 700; background: var(--white-10); padding-bottom: 0.2em; box-sizing: border-box; cursor: pointer; transition: .25s ease-in-out;} .pagination a:hover {background: var(--white-20);} .pagination a.sel {background: white; color: var(--color0);} .submenu {display: flex; width: 100vw; --submenu-height: 7.5em; --submenu-item-width: 7.2em; justify-content: center; margin-inline: calc(0.5 * var(--wrapper-width) - 50vw); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-image: linear-gradient(to right, transparent, black calc(50vw - 0.5 * var(--wrapper-width)), black calc(100vw - 50vw + 0.5 * var(--wrapper-width)), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black calc(50vw - 0.5 * var(--wrapper-width)), black calc(100vw - 50vw + 0.5 * var(--wrapper-width)), transparent); } .submenu nav {display: flex; width: auto; max-width: calc(100% + 0.4em); margin-inline: -0.2em; flex-direction: row; margin: 0 !important; padding: 0 !important; box-sizing: border-box;} .submenu nav::-webkit-scrollbar {display: none;} .submenu nav div {display: flex; width: var(--submenu-item-width); padding: 0.2em 0.2em 0.5em; margin: 0; scroll-snap-align: start; box-sizing: border-box; flex-shrink: 0;} .submenu nav div a {display: flex; width: 100%; height: var(--submenu-height); flex-direction: column; justify-content: center; align-items: center; gap: 0.6em; border: solid 0.12em transparent; border-radius: var(--border-radius0); font-size: 0.8em; color: white; line-height: 1.3; letter-spacing: 0; text-decoration: none; font-weight: 700; background: var(--white-20); padding: 1em 0.8em 0.85em; opacity: 0.7; position: relative; box-sizing: border-box; cursor: pointer; transition: .25s ease-in-out;} .submenu nav div a img {display: block; height: 2.2em; flex-shrink: 0;} .submenu nav div a:hover {opacity: 1; cursor: pointer;} .submenu nav div a .reset {display: none; width: 1.2em; height: 1.2em; border-radius: 100%; background: url("../images/icons/cross-white.svg") no-repeat center center, var(--color2); background-size: 40%; position: absolute; right: calc(50% - 0.6em); bottom: -0.6em; transition: .25s ease-in-out;} .submenu nav div a .reset:hover {background-color: var(--color2b);} .submenu:not(.nav) nav div a.sel {opacity: 1; border-color: var(--color2);} .submenu nav div a.sel .reset {display: block;} .submenu.nav nav div a {justify-content: center; height: 2.6em; text-align: center; font-size: 0.9em; border-radius: calc(0.5 * var(--submenu-height)); padding: 0 1.2em;} @media screen and (min-width: 1081px) { .submenu {width: 100%; --submenu-height: 3.5em; margin-inline: 0; mask-image: none; -webkit-mask-image: none;} .submenu nav {width: 100%; justify-content: center; flex-wrap: wrap;} .submenu nav div {width: 20%; padding: 0.2em;} .submenu nav div a {flex-direction: row; justify-content: flex-start; text-align: left; padding-inline: 1.1em 2.5em;} .submenu nav div a .reset {right: 0.8em; bottom: calc(50% - 0.6em);} .submenu nav div a img {height: 1.5em; position: relative; top: -0.1em;} } @media screen and (max-width: 1080px) { .submenu nav div:first-child {width: calc(50vw - 0.5 * var(--wrapper-width) + var(--submenu-item-width)); padding-left: calc(50vw - 0.5 * var(--wrapper-width));} .submenu nav div:last-child {width: calc(50vw - 0.5 * var(--wrapper-width) + var(--submenu-item-width)); padding-right: calc(50vw - 0.5 * var(--wrapper-width));} } @media screen and (max-width: 640px) { .submenu {font-size: 0.9em;} } .content {display: flex; width: 100%; max-width: 42rem; flex-direction: column; align-items: center; gap: var(--gap2); box-sizing: border-box;} .content .icon {--icon-size: 3em; font-size: 1.4em;} .content .large {font-size: clamp(1em, calc(0.2em + 4vw), 1.5em); letter-spacing: 0;} .content:not(:first-child), .content + * {margin-top: var(--gap1);} .content .breadcrumbs + h1 {margin-top: 0;} .content .logo {display: flex; width: 7em; aspect-ratio: 1; justify-content: center; align-items: center; box-sizing: border-box; position: relative; z-index: 2;} .content .logo img {display: block; height: 100%;} .content .logo:has(+ .cover) {background: var(--color0); padding: 1.2em; border-radius: 100%; margin-block: calc(-1 * var(--gap1)) calc(-3.5em - var(--gap2));} .content .cover {display: block; width: 100%; padding-top: 66.66%; position: relative;} .content .cover a {display: block; position: absolute; inset: 0; background: white; border-radius: var(--border-radius1); overflow: hidden;} .content .cover a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .25s ease-in-out;} .content .cover a:hover img {opacity: 0.85;} @media screen and (min-width: 1081px) { .content .cover {width: 120%; margin-inline: -10%;} } .event-infographics {display: flex; width: 100%; justify-content: center; row-gap: var(--gap2);} .event-infographics > div {display: flex; width: 8em; max-width: 33.33%; flex-direction: column; align-items: center; padding-inline: 0.7em; box-sizing: border-box; position: relative; letter-spacing: 0; line-height: 1.3;} .event-infographics > div .icon {--icon-size: 2.9em; font-size: 0.85em; margin-bottom: 0.8em;} .event-infographics > div .icon img {height: 54%;} .event-infographics > div .title {display: block; font-size: 0.8em; color: var(--color2); font-weight: 500; margin-bottom: 0.15em;} .event-infographics > div p {font-size: 1.1em; font-weight: 700;} @media screen and (min-width: 769px) { .event-infographics {column-gap: var(--gap2);} .event-infographics > div {width: auto; max-width: unset; align-items: flex-start; padding-inline: 3.2em 0;} .event-infographics > div .icon {position: absolute; left: 0; top: 0.16em;} .event-infographics > div * {text-align: left;} } .button {display: flex; height: var(--button-height); justify-content: center; align-items: center; gap: 0.5em; outline: none; cursor: pointer; font-size: 0.85em; font-weight: 700; letter-spacing: 0.1em;; line-height: 1; color: white; text-transform: uppercase; text-shadow: none !important; background: var(--color0); padding: 0 1.4em 0; position: relative; outline: none; border: none; border-radius: calc(var(--button-height) / 2); box-sizing: border-box; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;} .button :is(img, svg) {display: block; height: 1.1em; fill: white;} .button:hover {background: black; transform: scale(0.98);} .button.white {background: white; color: var(--color0);} .button.white > svg {fill: var(--color0);} .button.white:hover {background: hsl(0,0%,90%);} .button.white-10 {background: var(--white-10);} .button.white-10:hover {background: var(--white-20);} .button.color1 {background: var(--color1); color: white;} .button.color1:hover {background: var(--color1b);} .button.color2 {background: var(--color2); color: white;} .button.color2:hover {background: var(--color2b);} .button.circle {width: var(--button-height); padding-inline: 0;} .link {text-decoration: underline; transition: .15s ease-in-out;} .link:hover {text-decoration-color: transparent;} .link.color1 {color: var(--color1)} .link.color1:hover {color: var(--color0b);} .flex {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.5em; flex-wrap: wrap;} .bg-img {display: flex; justify-content: center; position: absolute; inset: 0;} .bg-img div {display: block; width: clamp(40rem, 100vw, 100rem); height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;} .mask-block {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-image: linear-gradient(to top, transparent, black 30%, black 70%, transparent); -webkit-mask-image: linear-gradient(to top, transparent, black 30%, black 70%, transparent); } .mask-inline {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent); } .hp .anim {opacity: 0; transform: translate(0, 3em); transition: 0.6s ease-in-out; transition-delay: 0.15s;} .hp .anim.zoom {transform: translate(0) scale(0.85);} .hp .anim.from-bottom {transform: translate(0, 3em);} .hp .anim.play {opacity: 1; transform: translate(0) scale(1) !important;} .section:has(.hero) .bg-img div {background-image: url("../images/wall.webp");} .hero {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 3rem 0; margin-top: var(--header);} .hero :is(h1, p) {width: auto;} .hero h1 {font-size: min(calc(1.6em + 4vw), 3.2em);} .hero .opening {font-size: 0.85em; padding: 0.65em 0.9em 0.6em; border: solid 0.13em var(--color2); border-radius: var(--border-radius0); box-sizing: border-box;} .hero .work {display: flex; max-width: 15em; align-items: center; gap: 0.7em; text-align: left;} .hero .work img {display: block; height: 2.7em;} .hero .graphics {display: block; width: min(100%, 36rem); margin-top: calc(-1 * (var(--section-padding) + var(--header) + var(--hero-mobile-margin) + 5rem)); aspect-ratio: 1; order: -1; position: relative; container-type: inline-size; --hero-mobile-margin: 0px;} .hero .graphics .image {display: block; width: 100%; height: 100%; border-radius: 100%; overflow: hidden; border: solid 3cqw var(--white-10); box-sizing: border-box; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-image: linear-gradient(to bottom, transparent 24%, black 65%); -webkit-mask-image: linear-gradient(to bottom, transparent 24%, black 65%); } .hero .graphics .image img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;} .hero .graphics .image .elipse {width: 100%; height: 100%; left: 25%; bottom: -50%; border: solid 10cqw var(--color2); opacity: 0.3;} .hero .graphics .elipse {display: flex; aspect-ratio: 1; flex-direction: column; justify-content: center; align-items: center; border-radius: 100%; box-sizing: border-box; position: absolute; box-shadow: var(--box-shadow);} .hero .graphics .elipse.e1 {width: 5%; background: var(--color2); left: 12%; bottom: 12%;} .hero .graphics .elipse.e2 {width: 19%; background: var(--color2); left: 40%; bottom: 0;} .hero .graphics .elipse.e3 {width: 36%; background: url("../images/cfv-label.webp") no-repeat center center; background-size: contain; left: 48%; bottom: -3%;} .hero .graphics .elipse.e4 {width: 8em; font-size: 0.85em; background: var(--color1); left: 16%; bottom: 40%;} .hero .graphics .elipse.e4 .icon {display: block; height: 1.8em;} .hero .graphics .elipse.e4 p {font-size: 1.3em;} .hero .graphics .elipse.e4 a {font-size: 0.65em; color: var(--color3); font-weight: 400; text-decoration: underline; margin-top: 0.3em; transition: 0.15s ease-in-out;} .hero .graphics .elipse.e4 a:hover {color: var(--color2); text-decoration-color: transparent;} @media screen and (min-width: 1081px) { .hero {flex-direction: row; justify-content: space-between; align-items: flex-end;} .hero .content {width: 20rem; align-items: flex-start; margin-bottom: 3em;} .hero :is(h1, p) {text-align: left;} .hero .graphics {width: calc(90% - 20rem); margin: -15% 0 0; order: 1;} .hero .graphics .image {width: 140%; height: 140%; position: absolute; left: 0; bottom: 0;} .hero .graphics .elipse.e2 {left: 55%;} .hero .graphics .elipse.e3 {left: 63%;} .hero .graphics .elipse.e4 {left: 18%; bottom: 65%; font-size: 1em;} } @media screen and (max-width: 580px) { .hero .graphics {width: 120vw; margin-inline: -10vw; --hero-mobile-margin: -3rem;} } .section:has(.logos) {padding-top: var(--section-padding-lower);} .logos {display: flex; width: 100%; max-width: 56rem; justify-content: center; flex-wrap: wrap;} .logos a {display: block; width: 33.33%; height: min(6em, calc(3em + 10vw)); padding: 0.2em; box-sizing: border-box;} .logos a span {display: block; width: 100%; height: 100%; background: var(--black-40); padding: 1em; box-sizing: border-box; border-radius: var(--border-radius0);} .logos a img {display: block; width: 100%; height: 100%; object-fit: contain;} .logos a:nth-child(1) span {background: none; background-image: linear-gradient(to right, transparent, var(--black-40));} .logos a:nth-child(6) span {background: none; background-image: linear-gradient(to left, transparent, var(--black-40));} @media screen and (min-width: 769px) { .logos a {width: 16.66%;} } @media screen and (max-width: 768px) { .logos a:nth-child(4) span {background: none; background-image: linear-gradient(to right, transparent, var(--black-40));} .logos a:nth-child(3) span {background: none; background-image: linear-gradient(to left, transparent, var(--black-40));} } .img-box {display: flex; container-type: inline-size; padding: 0.4em; box-sizing: border-box;} .img-box .inner {display: flex; width: 100%; min-height: 100%; flex-direction: column; position: relative;} .img-box .inner .img {display: block; position: absolute; inset: 0; border-radius: var(--border-radius1); overflow: hidden; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-image: linear-gradient(to top, transparent 1em, black 70%); -webkit-mask-image: linear-gradient(to top, transparent 1em, black 70%); } .img-box .inner .img img {display: block; width: 100%; height: 100%; object-fit: cover;} .img-box .inner .info {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1); position: relative; z-index: 2; padding-inline: max(1.2em, 10cqw); box-sizing: border-box; margin-top: 90cqw; text-shadow: 0 0 0.5em var(--black-60);} .img-box .inner .icon {--icon-size: 3em; font-size: 1.3em;} .img-box .inner .title {display: block; width: 100%; font-size: clamp(1em, 9cqw, 1.6em); font-weight: 700; line-height: var(--headline-line);} .img-box .inner .text {font-size: 0.9em;} .img-box .inner .flex {margin-top: 0.5em;} .img-box .inner .flex .button {font-size: 0.75em;} .img-box .inner .locality {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4em; font-size: 0.75em;} .img-box .inner .locality img {display: block; height: 1em; position: relative; top: 0.26em;} .img-box:has(.text) .inner .img {max-height: 26rem;} .box {display: block; width: 100%; background: var(--color3); border-radius: var(--border-radius1); box-sizing: border-box; box-shadow: var(--box-shadow); margin-block: 1rem; position: relative;} .box:before {display: block; position: absolute; inset: 0.8em; border: solid 0.15em var(--color2); border-radius: calc(0.5 * var(--border-radius1)); content: "";} .box * {color: var(--color0);} .box > h2:first-child {margin-top: -0.15em;} .box .inner {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1); position: relative; z-index: 2;} .section:has(.anniversary) {overflow: visible;} .anniversary {padding: 3em; margin-bottom: 0;} .anniversary .images {display: block; position: absolute; inset: 0; border-radius: var(--border-radius1); overflow: hidden;} .anniversary .images div {display: block; width: calc(30% - 4rem); height: 100%; background: url("../images/champage.webp") no-repeat left bottom; background-size: contain; position: absolute; bottom: 0;} .anniversary .images div:first-child {left: auto; transform: rotateY(180deg);} .anniversary .icon {display: flex; width: 7em; height: 7em; justify-content: center; align-items: center; background: var(--color1); border-radius: 100%; border: solid 0.7em var(--color0); position: relative; margin-top: -7em;} .anniversary .icon:before {display: block; position: absolute; inset: 0.3em; border: solid 0.1em var(--color0); border-radius: 100%; content: "";} .anniversary .icon img {display: block; width: 50%;} .anniversary .text {display: flex; width: 100%; max-width: 32rem; flex-direction: column; align-items: center; gap: var(--gap1); text-align: center; margin-bottom: 0.5em;} .anniversary .text h2 {font-size: min(calc(0.6em + 3vw), 1.4em); margin-bottom: -0.2em;} .anniversary .text p {font-size: 0.9em;} @media screen and (min-width: 1081px) { .anniversary .images div {width: calc(5rem + 18%); left: calc(50% + 13rem);} .anniversary .images div:first-child {right: calc(50% + 13rem);} } @media screen and (max-width: 1080px) { .anniversary .images div {width: 15rem; left: 16%;} .anniversary .images div:first-child {right: 16%;} .anniversary .text {margin-bottom: 8em;} } .anniversary-soc {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1) 0; margin-top: calc(-1.8em - var(--gap2)); position: relative; z-index: 3;} .anniversary-soc a {display: flex; width: 3.6em; height: 3.6em; justify-content: center; align-items: center; background: var(--color2); border-radius: 100%; border: solid 0.5em var(--color0); box-sizing: border-box; margin-inline: -0.05em; transition: .15s ease-in-out;} .anniversary-soc a img {display: block; width: 55%; transition: .15s ease-in-out;} .anniversary-soc a:hover {background: var(--color3);} .anniversary-soc p {display: block; width: 100%; text-align: center; font-size: 0.9em;} .arrow-list {gap: 0.2em;} .arrow-list li {padding-left: 1.35em; text-align: left;} .arrow-list li:before {width: 1em; height: 1em; background: url("../images/icons/button-arrow-color0.svg") no-repeat center center; background-size: contain; top: 0.28em;} .chevrons-list {gap: 0.2em;} .chevrons-list li {padding-left: 1.35em; text-align: left;} .chevrons-list li:before {width: 1em; height: 0.7em; background: url("../images/icons/chevron-color1.svg") no-repeat center center; background-size: contain; top: 0.42em;} .preview {display: flex; width: 100%; padding: var(--preview-padding); box-sizing: border-box; container-type: inline-size;} .preview .inner {display: flex; width: 100%; flex-direction: column; gap: 1em; background: white; border-radius: var(--border-radius1); padding: 0 min(1.6em, calc(0.3em + 4cqw)) min(1.6em, calc(0.3em + 4cqw)); box-sizing: border-box;} .preview .img {display: block; width: 100%; position: relative;} .preview .img a {display: block; width: 100%; aspect-ratio: 4/3; border-radius: 0 0 var(--border-radius1) var(--border-radius1); overflow: hidden;} .preview .img a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .preview .img a:hover img {opacity: 0.9;} .preview .info {display: flex; width: 100%; flex-direction: column; gap: 0.8em; flex-grow: 2; color: var(--color0); padding-inline: 0.3em; box-sizing: border-box;} .preview .title {display: block; width: 100%; text-align: left; font-size: min(6.5cqw, 1.2em); font-weight: 700; line-height: var(--headline-line); letter-spacing: 0; margin-bottom: -0.1em;} .preview .title a {color: inherit; transition: .15s ease-in-out;} .preview .title a:hover {color: var(--color1);} .preview .perex {display: block; width: 100%; text-align: left; font-size: min(4.5cqw, 0.85em); opacity: 0.8; margin-top: -0.3em;} .preview .bottom {display: flex; width: calc(100% + 0.6em); margin: 0 -0.3em; align-items: flex-end; align-content: flex-end; flex-grow: 2; margin-top: 0.3em;} .preview .bottom .flex {justify-content: space-between; gap: 0.8em 5%; background: white; padding: 0.5em; box-sizing: border-box; border-radius: 1.5em; box-shadow: 0 0 0.7em rgba(0,0,0,0.3); container-type: inline-size;} .preview .bottom .flex .price {display: block; text-align: left; font-size: min(1em, 6.4cqw); font-weight: 700; letter-spacing: 0; padding-left: 0.4em;} .preview .bottom .flex .button {font-size: min(0.75em, 4.8cqw);} .preview-blog {display: flex; width: 100%; padding: var(--preview-padding); box-sizing: border-box; container-type: inline-size;} .preview-blog .inner {display: flex; width: 100%; flex-direction: column; gap: 1em; background: var(--black-60); border-radius: var(--border-radius1); padding: 0 min(2em, calc(0.2em + 7cqw)) min(1.6em, calc(0.3em + 4cqw)); box-sizing: border-box;} .preview-blog .img {display: block; width: 100%; position: relative;} .preview-blog .img a {display: block; width: 100%; aspect-ratio: 3/2; border-radius: 0 0 var(--border-radius1) var(--border-radius1); overflow: hidden;} .preview-blog .img a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .preview-blog .img a:hover img {opacity: 0.9;} .preview-blog .info {display: flex; width: 100%; flex-direction: column; gap: 0.8em; flex-grow: 2; padding-left: 3.7em; box-sizing: border-box; position: relative;} .preview-blog .title {display: block; width: 100%; text-align: left; font-size: min(6cqw, 1.48em); font-weight: 700; line-height: var(--headline-line); letter-spacing: 0; margin-bottom: -0.1em;} .preview-blog .title a {color: inherit; transition: .15s ease-in-out;} .preview-blog .title a:hover {color: var(--color1);} .preview-blog .date {display: flex; flex-direction: column; align-items: center; position: absolute; left: 0; top: 0.145em;} .preview-blog .date span {display: block; font-weight: 700; letter-spacing: 0;} .preview-blog .date div {display: flex; flex-direction: column; align-items: center; padding: 0.15em 0.5em 0.3em; border: solid 0.12em white; border-radius: 0.5em; box-sizing: border-box;} .preview-blog .date .day {font-size: 1.1em;} .preview-blog .date .month {font-size: 0.8em; text-transform: uppercase; margin-top: -0.2em;} .preview-blog .date .year {font-size: 0.7em;} .preview-blog .flex {align-content: flex-end; justify-content: flex-start; flex-grow: 2; margin-top: 0.3em;} .preview-blog .flex .button {font-size: min(0.7em, 4.5cqw);} .preview-review {display: flex; width: 100%; padding: var(--preview-padding); box-sizing: border-box; container-type: inline-size;} .preview-review .inner {display: flex; width: 100%; flex-direction: column; background: var(--black-60); border-radius: var(--border-radius1); overflow: hidden;} .preview-review .img {display: block; width: 100%; position: relative; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-image: linear-gradient(to top, transparent 1em, black 70%); -webkit-mask-image: linear-gradient(to top, transparent 1em, black 70%); } .preview-review .img a {display: block; width: 100%; aspect-ratio: 3/4;} .preview-review .img a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .preview-review .img a:hover img {opacity: 0.9;} .preview-review .info {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.8em; flex-grow: 2; margin-top: -65cqw; padding: max(1.8em, 10cqw); box-sizing: border-box; position: relative; z-index: 2;} .preview-review .icon {padding: 1.3em;} .preview-review .icon img {height: 100%;} .preview-review :is(.title, .perex) {display: block; width: 100%; text-align: left;} .preview-review .title {font-size: min(7.5cqw, 1.5em); font-weight: 700; line-height: var(--headline-line); letter-spacing: 0;} .preview-review .title a {color: inherit; transition: .15s ease-in-out;} .preview-review .title a:hover {color: var(--color1);} .preview-review .perex {font-size: min(4.5cqw, 0.85em); opacity: 0.8; margin-top: -0.3em;} .preview-review .flex {justify-content: flex-start; align-content: flex-end; flex-grow: 2; margin-top: 0.75em;} .preview-review .flex .button {font-size: min(0.7em, 4.5cqw);} .swiper-slide {display: flex; height: auto; flex-shrink: 0; transition: .35s ease-in-out;} .swiper-slide > * {width: 100%;} .swiper-button {display: flex; width: var(--swiper-button-size); height: var(--swiper-button-size); --swiper-button-size: 3.2em; justify-content: center; align-items: center; background: var(--color1); position: absolute; top: calc(50% - 0.5 * var(--swiper-button-size)); z-index: 5; margin: 0; box-sizing: border-box; cursor: pointer; transition: .35s ease-in-out;} .swiper-button-prev {right: auto; transform: rotate(-180deg);} .swiper-button-next {left: auto;} .swiper-button img {display: block; height: 30%;} .swiper-button:after {display: none;} .swiper-button:hover {background: var(--color1b);} .swiper-button-lock {opacity: 0 !important;} .swiper-buttons-edges .swiper-button {width: calc(0.5 * var(--swiper-button-size)); height: var(--swiper-button-size); padding-left: 0.2em; border-radius: calc(50% - 0.5 * var(--swiper-button-size)) 0 0 calc(50% - 0.5 * var(--swiper-button-size));} .swiper-buttons-edges .swiper-button-prev {left: 0 !important;} .swiper-buttons-edges .swiper-button-next {right: 0 !important;} @media screen and (min-width: 1801px) { .swiper-button {width: var(--swiper-button-size); --swiper-button-size: 2.6em; border-radius: 100%;} } @media screen and (max-width: 1800px) { .swiper-button {font-size: 1.2em; padding-right: 1.5em; border-radius: var(--swiper-button-size);} .swiper-button-prev {left: calc(-50vw + 50% - (0.45 * var(--swiper-button-size)));} .swiper-button-next {right: calc(-50vw + 50% - (0.45 * var(--swiper-button-size)));} } @media screen and (max-width: 1800px) and (pointer: coarse){ .swiper-button-prev {left: calc(-50vw + 50% - (0.55 * var(--swiper-button-size)));} .swiper-button-next {right: calc(-50vw + 50% - (0.55 * var(--swiper-button-size)));} } .section:has(.carousel) {overflow: hidden;} .carousel {display: block; width: 100%; position: relative; box-sizing: border-box;} .carousel-inner {display: block; width: 100%; box-sizing: border-box; overflow: hidden;} .carousel .swiper {display: block; width: 100%; box-sizing: border-box; overflow: visible;} .carousel + .flex {margin-top: var(--gap1);} .carousel + .flex .button {font-size: 0.8em;} .carousel.c2 .swiper {overflow: hidden;} @media screen and (min-width: 1801px) { .carousel .swiper {overflow: visible;} .about-slider .swiper-button-prev, .carousel .swiper-button-prev {left: -8%;} .about-slider .swiper-button-next, .carousel .swiper-button-next {right: -8%;} } @media screen and (max-width: 1800px) { .carousel-inner {width: 100vw; margin-inline: calc(-1 * var(--carousel-edge)); padding-inline: var(--carousel-edge); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-image: linear-gradient(to right, transparent, black var(--carousel-edge), black calc(100% - var(--carousel-edge)), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black var(--carousel-edge), black calc(100% - var(--carousel-edge)), transparent); } } @media screen and (min-width: 1367px) and (max-width: 1800px){ .carousel {--carousel-edge: calc(50vw - 0.5 * var(--wrapper-max));} .carousel-blog {--carousel-edge: calc(50vw - 0.5 * var(--wrapper-medium-max));} .carousel.c2 {--carousel-edge: 0;} .carousel.c2 .carousel-inner {width: 100%;} .carousel.c2 .swiper-button {font-size: 0.9em; width: var(--swiper-button-size); --swiper-button-size: 2.6em; padding-right: 0; border-radius: 100%;} .carousel.c2 .swiper-button-prev {left: calc(-0.5 * var(--swiper-button-size));} .carousel.c2 .swiper-button-next {right: calc(-0.5 * var(--swiper-button-size));} } @media screen and (max-width: 1366px) { .carousel {--carousel-edge: calc(50vw - 0.5 * var(--wrapper-width));} } @media screen and (max-width: 640px) { .section .wrapper:has(.carousel) {--wrapper-width: min(24rem, 80vw);} .carousel .swiper-slide:not(.swiper-slide-active) {opacity: 0.3;} } .cta-about {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2); position: relative; z-index: 2;} .carousel-about {margin-top: var(--gap2);} .carousel-about:before {display: block; background: var(--white-20); box-shadow: var(--box-shadow); border-radius: var(--border-radius1); position: absolute; inset: -0.6em; content: "";} .carousel-about .swiper {border-radius: calc(0.7 * var(--border-radius1));} .carousel-about .img {display: block; width: 100%; padding-top: 66.66%; position: relative;} .carousel-about .img span {display: block; position: absolute; inset: 0; overflow: hidden;} .carousel-about .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} @media screen and (min-width: 1367px) and (max-width: 1800px){ .carousel-about .swiper-button-prev {margin-left: -0.3em;} .carousel-about .swiper-button-next {margin-right: -0.3em;} } .box-about {display: flex; width: 90%; max-width: 44rem; flex-direction: column; align-items: center; gap: var(--gap1); font-size: 0.9em; background: var(--color0); padding: min(3em, calc(1em + 5vw)); border-radius: var(--border-radius1); box-sizing: border-box; margin-block: max(-8em, calc(-2em - 10vw)) var(--gap2); box-shadow: var(--box-shadow); position: relative; z-index: 3;} .box-about > img {display: block; width: 7em;} .box-about .button {margin-top: var(--gap1);} .infographics {display: flex; width: 100%; max-width: 34rem; justify-content: center; flex-wrap: wrap; gap: var(--gap2) 0;} .infographics > div {display: flex; width: 50%; flex-direction: column; align-items: center; gap: var(--gap1); padding-inline: 3.5%; box-sizing: border-box;} .infographics > div .icon {--icon-size: 3em; font-size: 1.6em;} .infographics > div p {font-size: 0.85em; font-weight: 500; letter-spacing: 0;} @media screen and (min-width: 961px) { .infographics {max-width: 48rem;} .infographics > div {width: 25%;} } .image-text {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2) 0; box-sizing: border-box;} .image-text :is(.image, .text) {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1); position: relative;} .image-text .image {max-width: 40em;} .image-text .image .inner {display: block; width: 100%; padding-top: 75%; position: relative;} .image-text .image .inner > div {display: block; position: absolute; inset: 0; border-radius: var(--border-radius1); overflow: hidden;} .image-text .image .inner > div img {display: block; width: 100%; height: 100%; object-fit: cover;} .image-text .text {z-index: 2;} .image-text + .infographics {margin-toP: var(--gap2);} @media screen and (min-width: 1081px) { .image-text {flex-direction: row; justify-content: space-between; padding-inline: var(--padding1);} .image-text .image {width: 60%; margin-inline-end: -10%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-image: linear-gradient(to left, transparent, black 50%); -webkit-mask-image: linear-gradient(to left, transparent, black 50%); } .image-text .text {width: 50%; align-items: flex-start;} .image-text .text :is(h1, h2, p) {text-align: left;} .image-text.reversed {flex-direction: row-reverse;} .image-text.reversed .image {margin-inline: -10% 0; mask-image: linear-gradient(to right, transparent, black 50%); -webkit-mask-image: linear-gradient(to right, transparent, black 50%); } } @media screen and (max-width: 1080px) { .image-text .text {max-width: 40rem;} .image-text .image {max-width: min(80vw, 34rem); order: -1;} } @media screen and (min-width: 641px) and (max-width: 1080px){ .image-text .text ul.checks {column-count: 2; column-gap: 1.2em;} } .carousel-gallery-full .img {display: block; width: calc(100% - 0.8em); margin-inline: 0.4em; padding-top: calc(100% * 4 / 3); position: relative;} .carousel-gallery-full .img a {display: block; aspect-ratio: unset !important; position: absolute; inset: 0; background: white; border-radius: var(--border-radius1); overflow: hidden;} .carousel-gallery-full .img a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .25s ease-in-out;} .carousel-gallery-full .img a:hover img {opacity: 0.85;} .carousel-gallery {width: calc(100% + 0.8em); margin-inline: -0.4em;} .carousel-gallery .img {display: block; width: calc(100% - 0.8em); margin-inline: 0.4em; padding-top: calc(100% * 3 / 4); position: relative;} .carousel-gallery .img a {display: block; aspect-ratio: unset !important; position: absolute; inset: 0; background: white; border-radius: var(--border-radius1); overflow: hidden;} .carousel-gallery .img a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .25s ease-in-out;} .carousel-gallery .img a:hover img {opacity: 0.85;} .carousel-gallery .swiper-button-prev {left: } @media screen and (max-width: 1366px) { .carousel-gallery .swiper {overflow: visible !important;} } .about-page .quote {display: flex; width: 100%;} .about-page .quote span {display: block; max-width: 20em; text-align: left; font-size: 1.1em; font-weight: 500; padding-left: 3.7em; position: relative; box-sizing: border-box;} .about-page .quote span:before {display: block; width: 3em; height: 2.3em; background: url("../images/icons/quotes-color1.svg") no-repeat left top; background-size: auto contain; position: absolute; left: 0; top: 0.35em; content: "";} .about-page .icon-info {text-align: center; font-size: 0.9em; line-height: 1.3; height: auto; flex-wrap: wrap; padding: 0.5em 1em 0.5em;} .about-page .icon-info img {font-size: 1.2em;} .about-page .swiper-button {padding-right: 0;} .about-page .swiper-button-prev {left: -1em;} .about-page .swiper-button-next {right: -1em;} @media screen and (max-width: 1080px) { .about-page .quote {justify-content: center;} } .about-page .image .bg {background-image: linear-gradient(45deg, var(--color0-30), transparent 80%);} .about-page .image .bg:before, .about-page .image .bg:after {display: block; opacity: 0.08; filter: saturate(3); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; content: "";} .about-page .image .bg:before {width: 65%; height: 65%; background-image: url("../images/icons/pictogram-color0.svg"); left: 5%; bottom: 18%;} .about-page .image .bg:after {width: 58%; height: 58%; background-image: url("../images/icons/pictogram-outline-color0.svg"); right: 4%; top: 0;} .about-page .image .pictogram1 {top: 9%; right: 18.5%;} .about-page .image .label {font-size: 4.5cqw; background: rgba(225,225,255,0.6); padding: 0.6em 1.2em 0.6em; left: 4%; bottom: 6%;} .about-page .image .label:before {display: block; width: 4em; text-align: center; font-size: 0.6em; color: white; font-weight: 700; background: var(--color0); padding: 0.34em 0; border-radius: 1.2em; position: absolute; left: calc(50% - 2em); bottom: 80%; content: "Tým";} .about-page .image .person {font-size: 3cqw; background: var(--color0); padding: 0.9em 1.5em 0.95em 1em; border-radius: 1em; position: absolute; right: 0; bottom: 16%;} .article {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.6rem;} .article * {text-align: left;} .article h1 {font-size: min(2.5em, calc(0.8em + 4vw)); margin-top: 0 !important; text-wrap: unset;} .article .date {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; font-weight: 500; margin-top: -0.6em;} .article .date img {display: block; height: 1em; position: relative; top: 0.08em;} .article :is(h2, h3) {margin-block: 0.4em -0.1em;} .article h2 {font-size: 1.75em; font-weight: 800;} .article h3 {font-size: 1.4em; font-weight: 700; color: var(--color1);} .article .image {display: block; width: 100%; aspect-ratio: 4/3; background: white; border-radius: var(--border-radius1); box-shadow: var(--box-shadow);} .article .image span {display: block; width: 100%; height: 100%; border-radius: var(--border-radius1); overflow: hidden; transition: .15s ease-in-out;} .article .image span img {display: block; width: 100%; height: 100%; object-fit: cover;} .article .image:hover span {opacity: 0.8;} .article .video-embed {display: block; width: 100%; aspect-ratio: 16/9;} .article .video-embed span {display: block; width: 100%; height: 100%;} .article .video-embed span iframe {display: block; width: 100%; height: 100%; position: absolute; inset: 0; border-radius: var(--frame); overflow: hidden;} .article .quote {padding-left: 3.3em; box-sizing: border-box; position: relative; padding-bottom: 1em; border-bottom: solid 0.12em var(--color1);} .article .quote:after {display: block; width: 1.2em; height: 1.2em; position: absolute; left: 1.3em; top: .28em; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M384,384c-17.67,0-32-14.33-32-32s14.33-32,32-32c35.29,0,64-28.71,64-64v-32h-76.85c-20.79,0-34.53,0-48.21-6.97-12.11-6.17-21.78-15.85-27.96-27.98-6.98-13.69-6.98-27.44-6.98-48.25v-57.6c0-20.82,0-34.57,6.98-48.26,6.18-12.12,15.85-21.79,27.97-27.97,13.68-6.97,27.44-6.97,48.26-6.97h57.6c20.81,0,34.55,0,48.25,6.98,12.13,6.18,21.8,15.85,27.98,27.96,6.97,13.68,6.97,27.42,6.97,48.21v172.85c0,70.58-57.42,128-128,128ZM352.62,161.54h0s0,0,0,0ZM352.35,159.65c3.88.35,11.44.35,18.8.35h76.85s0-76.85,0-76.85c0-7.36,0-14.92-.35-18.8-3.87-.35-11.46-.35-18.85-.35h-57.6c-7.38,0-14.97,0-18.85.35-.35,3.88-.35,11.47-.35,18.85v57.6c0,7.38,0,14.97.35,18.85ZM350.45,64.62s0,0,0,0c0,0,0,0,0,0ZM447.38,62.44h0s0,0,0,0ZM96,384c-17.67,0-32-14.33-32-32s14.33-32,32-32c35.29,0,64-28.71,64-64v-32h-76.85c-20.79,0-34.53,0-48.21-6.97-12.12-6.18-21.79-15.85-27.97-27.98-6.97-13.69-6.97-27.43-6.97-48.24v-57.6c0-20.82,0-34.57,6.98-48.26,6.17-12.12,15.85-21.79,27.97-27.96C48.63,0,62.38,0,83.2,0h57.6c20.81,0,34.55,0,48.25,6.98,12.13,6.18,21.81,15.85,27.98,27.96,6.97,13.68,6.97,27.42,6.97,48.21v172.85c0,70.58-57.42,128-128,128ZM64.62,161.54s0,0,0,0c0,0,0,0,0,0ZM64.35,159.65c3.88.35,11.44.35,18.8.35h76.85s0-76.85,0-76.85c0-7.36,0-14.92-.35-18.8-3.87-.35-11.46-.35-18.85-.35h-57.6c-7.38,0-14.97,0-18.85.35-.35,3.88-.35,11.47-.35,18.85v57.6c0,7.38,0,14.97.35,18.85ZM62.45,64.62s0,0,0,0c0,0,0,0,0,0ZM161.54,64.62s0,0,0,0c0,0,0,0,0,0ZM159.38,62.44h0s0,0,0,0Z' width='1' height='1' fill='rgb(255,204,51)' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain;} .article ul, ol {display: flex; flex-wrap: wrap; gap: 0.2em; padding: 0 0 0 1.2em; margin: -0.15em 0 0;} .article ul li, ol li {padding-left: 1.8em; position: relative; box-sizing: border-box;} .article li:before {display: block; position: absolute; content: "";} .article ul li:before {width: 1em; height: 0.6em; top: 0.43em; left: 0.1em; background: url("../images/icons/chevron-white.svg") no-repeat left center; background-size: contain;} .article ol {list-style-type: none; counter-reset: li;} .article ol li {counter-increment: li;} .article ol li:before {font-weight: 400; top: 0; left: -0.025em; content: counter(li)".";} .article :is(.highlight1, .highlight2) {display: flex; width: 100%; flex-wrap: wrap; gap: 0.9rem; padding: min(3em, calc(0.5em + 5vw)); position: relative; border-radius: var(--border-radius1); box-sizing: border-box;} .article :is(.highlight1, .highlight2) > *:first-child {margin-top: 0 !important;} .article :is(.highlight1, .highlight2) h3 {color: white;} .article :is(.highlight1, .highlight2) .button {margin-top: 0.5rem;} .article .highlight1 {background: var(--white-10);} .article .highlight2 {background: linear-gradient(var(--color0), var(--color0)) padding-box, linear-gradient(to right, var(--color2), var(--color1), var(--color2)) border-box; border: 0.26em solid transparent; box-shadow: var(--box-shadow);} .article .embed {display: block; width: 100%; border-radius: 1em; overflow: hidden;} .article .embed iframe {display: block; width: 100%;} @media screen and (min-width: 769px) { .article :is(.image) {width: 112%; margin-inline: -6%;} } @media screen and (min-width: 641px) { .article .preview-blog {padding: 0;} .article .preview-blog .inner {justify-content: space-between; flex-direction: row; align-items: stretch; padding: 1.4em 1.4em 1.4em 0;} .article .preview-blog .img {width: 27%;} .article .preview-blog .img a {border-radius: 0 var(--border-radius1) var(--border-radius1) 0;} .article .preview-blog .info {width: 70%; justify-content: space-between; padding: 0; flex-grow: unset;} .article .preview-blog .title {font-size: 3.6cqw;} .article .preview-blog .date {flex-direction: row; align-items: center; gap: 0.2em; left: auto; top: auto; right: 1em; bottom: 0.3em; opacity: 0.6;} .article .preview-blog .date span {display: inline-block; font-size: 0.8em; text-transform: none !important; font-weight: 500; margin: 0;} .article .preview-blog .date div {flex-direction: row; gap: 0.2em; padding: 0; border: none; border-radius: 0;} .article .preview-blog .date .day:after {content: ".";} .article .preview-blog .flex .button {font-size: 0.7em;} } .features {counter-reset: feature; margin-bottom: 0.5em;} .features > div {display: flex; padding: 0.5em; box-sizing: border-box; counter-increment: feature;} .features .box {background: var(--white-10); flex-direction: column; align-items: center; gap: var(--gap1); padding: min(3em, calc(1em + 3cqw)); position: relative; overflow: hidden; container-type: inline-size; margin: 0;} .features .box:before {display: block; width: 100%; height: 1em; position: absolute; left: 0; bottom: 0.07em; z-index: -1; font-size: 90cqw; font-weight: 700; color: black; opacity: 0.25; content: "0"counter(feature);} .features .box .icon {margin-bottom: 0.5em;} .features .box h2 {font-size: min(2em, calc(1em + 3cqw));} .features .box p {font-size: 0.9em;} body:has(.item-info) h1 {font-size: min(calc(1em + 4vw), 2.7em);} .section:has(.cover-slider) {overflow: hidden;} .cover-slider {overflow: visible; position: relative; padding: 0 !important;} .cover-slider .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;} .cover-slider .image {width: 100%; padding-top: 66.66%; position: relative;} .cover-slider .image .swiper {display: block; width: 100%; height: 100%; position: absolute; inset: 0; border-radius: var(--border-radius1);} .cover-slider .image .swiper-slide {width: 100%; height: 100%;} .cover-slider .thumbs {display: flex; width: 100%; justify-content: center; padding-inline: 3rem; box-sizing: border-box; margin-top: var(--gap2);} .cover-slider .thumbs .swiper {display: block; width: 100%; max-width: var(--wrapper-thin-max); border-radius: calc(0.5 * var(--border-radius1));} .cover-slider .thumbs .swiper-slide div {display: block; width: 100%; padding-top: calc(100% * 9 / 16); position: relative;} .cover-slider .thumbs .swiper-slide span {display: block; position: absolute; inset: 0;} .cover-slider .thumbs .swiper-slide:not(.swiper-slide-thumb-active) {opacity: 0.4;} .cover-slider .thumbs .swiper-slide:hover {opacity: 1; cursor: pointer} @media screen and (min-width: 1081px) { .cover .swiper-button {font-size: 0.85em; padding-right: 0;} .cover .swiper-button-prev {left: -1.6em;} .cover .swiper-button-next {right: -1.6em;} } .steps {row-gap: 3em;} .steps > div {display: flex; flex-direction: column; align-items: center; gap: var(--gap1); padding: 0 1.2em; box-sizing: border-box; position: relative;} .steps > div:nth-child(-n+2):before {display: block; background: var(--color1); position: absolute; border-radius: 0.08em; content: "";} .steps > div .icon {margin-bottom: 0.5em;} .steps > div h2 {font-size: min(1.5em, calc(1em + 3cqw));} .steps > div p {font-size: 0.9em;} @media screen and (min-width: 769px) { .steps.grid {--row-count: 3;} .steps > div:before {width: calc(100% - var(--icon-size) - 3em); height: 0.16em; left: calc(50% + 0.5 * var(--icon-size) + 1.5em); top: calc(0.5 * var(--icon-size) - 0.08em);} } .item-info {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2);} .price-buy {width: auto; gap: 1em 1.4em; background: var(--white-10); padding: 0.8em 0.8em 0.8em 1.4em; border-radius: 2em;} .price-buy .price {display: block; font-size: 1.1em; font-weight: 700; letter-spacing: 0;} .specs {max-width: 40rem; flex-direction: column; gap: var(--gap2); background: var(--white-10); padding: min(4em, calc(1em + 5vw));} .specs h2 {font-size: 1.8em;} .specs table {width: 100%; border-collapse: collapse;} .specs table td {width: 40%; font-size: 0.9em; text-align: left; vertical-align: top;} .specs table td:last-child {width: 60%; text-align: right; padding-left: 1.2em;} .specs table tr:not(:first-child) td {padding-top: 1em; border-top: solid 1px var(--white-20);} .specs table tr:not(:last-child) td {padding-bottom: 1em;} .checkbox {display: block; position: relative;} input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked {position: absolute; left: -9999px; top: 0;} .chk1:not(:checked) + label, .chk1:checked + label {display: block; min-width: 0.9em; min-height: 0.9em; position: relative; text-align: left; font-size: 0.9em; color: var(--color0); font-weight: 400; padding-inline-start: 1.4em; cursor: pointer; box-sizing: border-box; transition: .25s ease-in-out;} .chk1:not(:checked) + label:before, .chk1:checked + label:before {display: block; width: 0.9em; height: 0.9em; background: var(--color0-40); opacity: 0.7; position: absolute; left: 0; top: 0.3em; border-radius: 0.2em; overflow: hidden; content: "";} .chk1:checked + label:before {background: URL('../images/icons/check-white.svg'), var(--color1); opacity: 1;} .chk1:disabled + label, .chk1:disabled + label:before {opacity: 0.4;} .chk1 + label a {color: inherit; font-weight: 500; text-decoration: underline; transition: .25s ease-in-out;} .chk1 + label a:hover {opacity: 0.8; text-decoration-color: transparent;} .wndw {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: min(1rem, 5%); box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 1000000;} .wndw:before {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .3s ease-in-out;} .wndw > .outer {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;} .wndw > div {display: flex; width: 100%; max-width: 48em; max-height: calc(100svh - 3rem); background: var(--color0); position: relative; border-radius: 1.2em; top: 0; z-index: 2; box-shadow: 0 0 0.6em rgba(0,0,0,0.12); transform: scale(0.8); transition: .25s ease-in-out;} .wndw > div .overflow {display: block; width: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;} .wndw > div .overflow > div {display: block; width: 100%; height: auto;} .wndw.show {left: 0;} .wndw.show:before {opacity: 1;} .wndw.show > div {transform: scale(1);} .wndw.show.hide {left: -99999px; transition: left 0s ease-in-out; transition-delay: 0.3s;} .wndw.show.hide:before {opacity: 0;} .wndw.show.hide > div {transform: scale(0.8) !important; opacity: 0;} .wndw .cross {display: block; width: 1.8em; height: 1.8em; font-size: 1em; background: var(--color2); border-radius: 100%; cursor: pointer; position: absolute; right: -0.6em; top: -0.6em; z-index: 10002; box-shadow: 0 0 0.4em rgba(0,0,0,0.1); transition: .2s ease-in-out;} .wndw .cross span {display: block; width: 50%; height: 0.14em; background: white; border-radius: 2px; position: absolute; left: 25%; top: calc(50% - 0.07em); z-index: 1;} .wndw .cross:hover {background: var(--color0b);} .wndw .cross span:nth-child(1) {transform: rotate(45deg);} .wndw .cross span:nth-child(2) {transform: rotate(-45deg);} .wndw .wndw-content {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.2em; font-size: 1rem; padding: max(2rem, 8%) min(6rem, 10vw); box-sizing: border-box;} .wndw .wndw-content .icon {margin-bottom: -0.4em;} .wndw .wndw-content .wndw-title {display: block; width: 100%; text-align: center; font-size: min(2em, calc(1em + 3vw)); font-weight: 700; line-height: 1.1; margin-bottom: 0.15em;} .wndw .wndw-content p {display: block; width: 100%; text-align: center; font-size: 0.9em;} .wndw .wndw-content p strong {font-weight: 700;} .wndw .wndw-content .title:has(+ p), .wndw .wndw-content .title2:has(+ p) {margin-bottom: -0.35em;} .wndw .wndw-content .flex {gap: 0.3em; margin-top: 1em;} .wndw .wndw-content .flex .button {min-width: 8em; font-size: 0.9em;} .wndw .wndw-content .link {font-size: 0.75em; opacity: 0.8; cursor: pointer;} .phones {display: block; width: 100%;} .phones ul {display: flex; width: 100%; flex-wrap: wrap;} .phones ul li {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.75em 1em; box-sizing: border-box;} .phones ul li:not(:last-child) {margin-bottom: 1em; padding-bottom: 1em; border-bottom: solid 1px var(--color0-30);} .phones ul li .info {display: flex; flex-direction: column; flex-shrink: unset;} .phones ul li .info span {display: block; width: 100%; text-align: left; font-weight: 400; box-sizing: border-box; position: relative;} .phones ul li .info .title {font-size: 1.2em; font-weight: 800; margin-top: -0.1em;} .phones ul li .info .address {font-size: 0.85em; padding-left: 1.3em;} .phones ul li .info .address:Before {display: block; width: 1.1em; height: 1.1em; background: url("../images/icons/marker-color0.svg") no-repeat left center; background-size: contain; position: absolute; left: 0; top: 0.13em; content: "";} .phones ul li a {white-space: nowrap;} @media screen and (max-width: 540px) { .phones ul li {flex-wrap: wrap;} .phones ul li .info {width: 100%;} .phones ul li .info .title {font-size: 1.45em;} } .contacts {display: flex; width: 100%; justify-content: center; flex-direction: column; gap: 3em; background: var(--white-10); padding: min(4em, calc(1em + 5vw)); box-sizing: border-box; border-radius: var(--border-radius1);} .contacts > div {display: flex; flex-direction: column; align-items: center; gap: var(--gap1);} .contacts h2 {font-size: 1.55em;} .contacts .small {font-size: 0.7em;} .contacts .contact {display: block; text-align: left; color: inherit; padding-left: 1.65em; position: relative; box-sizing: border-box; transition: .15s ease-in-out;} .contacts .contact img {display: block; height: 1.15em; position: absolute; left: 0; top: 0.18em;} .contacts .contact span {display: block; font-size: 0.75em; opacity: 0.7;} .contacts .contact[href]:hover {opacity: 0.8;} @media screen and (min-width: 1081px) { .contacts {justify-content: space-between; flex-direction: row; font-size: 0.9em;} .contacts > div {align-items: flex-start;} .contacts > div:nth-child(1) {width: 12em;} .contacts > div:nth-child(2) {width: 12em;} .contacts * {text-align: left;} } input[type="date"] {background-image: url("../images/icons/calendar-white.svg"); background-repeat: no-repeat; background-position: right 1em center; background-size: auto 1em;} input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {opacity: 0;} input[type="date"]::-webkit-calendar-picker-indicator {opacity: 0;} .form {display: flex; width: 100%; flex-wrap: wrap; gap: var(--form-gap); position: relative; z-index: 10;} .form h2 {font-size: min(calc(0.8em + 3vw), 1.6em); padding-inline: var(--padding1); box-sizing: border-box; margin-top: 0.4em;} .form.form-cols {justify-content: space-between;} .form.form-cols > div {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--form-gap); position: relative; z-index: 10;} .form.form-cols > div > *:first-child {margin-top: 0;} @media screen and (min-width: 769px) { .form.form-cols > div {width: 48%;} } .form-items {display: flex; width: 100%; flex-wrap: wrap; gap: 1.4em var(--form-items-gap);} @media screen and (min-width: 769px) { .form-items :is(.w33, .w33-50) {width: calc(33.33% - 2 / 3 * var(--form-items-gap));} .form-items .w66 {width: calc(66% - 0.5 * var(--form-items-gap));} } @media screen and (min-width: 341px) and (max-width: 768px){ .form-items .w33-50 {width: calc(50% - 0.5 * var(--form-items-gap));} } @media screen and (min-width: 481px) { .form-items .w50-100 {width: calc(50% - 0.5 * var(--form-items-gap));} } .form-item {display: block; width: 100%; text-transform: none;} .form-item .element {display: block; width: 100%; height: var(--form-item-height); border: var(--form-item-border); border-radius: calc(0.5 * var(--form-item-height)); box-sizing: border-box; position: relative; transition: .15s ease-in-out;} .form-item .element :is(input, textarea) {display: block; width: 100%; height: 100%; font-size: 1em; color: white; font-weight: 700; border: none; outline: none; padding: calc(0.5 * var(--form-item-height) - 1em) var(--form-item-padding); box-sizing: border-box; background-color: transparent; font-family: var(--font1); transition: .15s ease-in-out;} .form-item .element:has(textarea) {height: 14em;} .form-item .element textarea {padding-block: var(--form-item-padding);} .form-item .element > label {display: block; font-size: 0.8em; font-weight: 500; color: white; letter-spacing: 0; background: var(--color0); padding-inline: 0.4em; position: absolute; left: var(--form-item-padding); top: -0.77em; transition: .15s ease-in-out;} .form-item .element:focus-within {border-color: var(--white-60);} .form-item-error {display: block; width: 100%; font-size: 0.75em; color: var(--color-error); font-weight: 700; letter-spacing: 0; padding-inline: 1.6em; box-sizing: border-box; margin-top: 0.5em;} .form-item-note {display: block; width: 100%; font-size: 0.75em; color: var(--color0c); font-weight: 700; letter-spacing: 0; padding-inline: 1em; box-sizing: border-box; margin-top: 0.5em;} .form-item-note a {color: inherit; text-decoration: underline; transition: .15s ease-in-out;} .form-item-note a:hover {color: var(--color0b); text-decoration-color: transparent;} .form-item.obligatory .element > label:after {color: var(--color-error); content: " *";} .form .send {display: flex; width: 100%; flex-direction: column; align-items: center; flex-wrap: wrap; gap: 1.2em; padding: 0 var(--padding1); box-sizing: border-box;} .form .send span {display: block; font-size: 0.75em; color: var(--white-70);} .form .send span a {color: inherit; text-decoration: underline; transition: .2s ease-in-out;} .form .send span a:hover {opacity: 0.7; text-decoration-color: transparent;} .grid {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; --row-count: 1;} .grid > * {width: calc(100% / var(--row-count));} .grid:has(.img-box) {row-gap: var(--gap2);} @media screen and (min-width: 1281px) { .grid.g5-4-2 {--row-count: 5;} } @media screen and (min-width: 961px) and (max-width: 1280px){ .grid.g5-4-2 {--row-count: 4;} } @media screen and (max-width: 960px) { .grid.g5-4-2 {--row-count: 2; max-width: 30rem;} } @media screen and (min-width: 1081px) { .grid.g3-1, .grid.g3-2-1 {--row-count: 3;} .grid.g4-2-1 {--row-count: 4;} } @media screen and (min-width: 541px) { .grid.g2-1 {--row-count: 2;} } @media screen and (min-width: 541px) and (max-width: 1080px){ .grid.g3-2-1, .grid.g4-2-1 {--row-count: 2;} } .cart-row {display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5em 2em; background: white; letter-spacing: 0; padding: 0.5em 1.2em 0.5em 0; position: relative; border-radius: calc(0.6 * var(--border-radius1)); box-sizing: border-box;} .cart-row > * {flex-shrink: 0;} .cart-row .img {display: block; width: 5.6em; aspect-ratio: 4/3; background: white; border-radius: 0 var(--border-radius0) var(--border-radius0) 0; overflow: hidden;} .cart-row .img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .cart-row .img:hover img {opacity: 0.9;} .cart-row .info {display: block; flex-grow: 2; flex-shrink: unset;} .cart-row .info span {display: block; text-align: left; color: var(--color0); line-height: 1.3;} .cart-row .info .title {font-weight: 600;} .cart-row .info .title a {color: inherit; transition: .15s ease-in-out;} .cart-row .info .title a:hover {color: var(--color1);} .cart-row .info .note {display: block; font-size: 0.8em; color: var(--black-60); margin-top: 0.5em;} .cart-row .price {font-size: 1em; color: var(--color0); font-weight: 700;} .cart-row .action {display: block; width: 1.4em; height: 1.4em; position: relative; cursor: pointer; border-radius: 100%; transition: .15s ease-in-out;} .cart-row .action:before, .cart-row .action:after {display: block; width: 60%; height: 0.18em; background: white; border-radius: 0.03em; position: absolute; left: 20%; top: calc(50% - 0.09em); content: "";} .cart-row .action:after {transform: rotate(-90deg);} .cart-row .action:hover {opacity: 0.8;} .cart-row .remove {background: var(--black-30); transform: rotate(45deg);} .cart-row .add {background: var(--color1);} @media screen and (min-width: 961px) { .cart-row {flex-wrap: nowrap;} .cart-row .info {margin-left: -0.8em;} } @media screen and (max-width: 960px) { .cart-row {flex-direction: column; align-items: flex-start; padding: 0.8em 2.2em 0.8em 7em;} .cart-row .info {padding-right: 2.5em;} .cart-row .img {width: 6em; height: 4.6em; aspect-ratio: unset; position: absolute; left: 0; top: calc(50% - 2.3em);} .cart-row .action {position: absolute; right: 1.8em; top: calc(50% - 0.8em);} } .cart-items {display: flex; width: 100%; flex-direction: column; gap: 0.6em;} h2:has(+ .cart-items) {font-size: min(calc(1.2em + 4vw), 1.8em); margin-top: var(--gap1);} .cart-row.not-sel {background: var(--white-10);} .cart-row.not-sel .info span {color: white;} .cart-row.not-sel .info .note {color: var(--white-70);} .cart-row.not-sel .price {color: white;}