@charset "utf-8";
/* CSS Document */

@font-face {font-family:'montserrat';  src:url('../font/montserrat300.ttf') format('truetype'); font-weight:300; font-style:normal;}
@font-face {font-family:'montserrat';  src:url('../font/montserrat400.ttf') format('truetype'); font-weight:400; font-style:normal;}
@font-face {font-family:'montserrat';  src:url('../font/montserrat400i.ttf') format('truetype'); font-weight:400; font-style:italic;}
@font-face {font-family:'montserrat';  src:url('../font/montserrat500.ttf') format('truetype'); font-weight:500; font-style:normal;}
@font-face {font-family:'montserrat';  src:url('../font/montserrat600.ttf') format('truetype'); font-weight:600; font-style:normal;}
@font-face {font-family:'montserrat';  src:url('../font/montserrat700.ttf') format('truetype'); font-weight:700; font-style:normal;}


:root
{
--bs1:#5087C7;
--bs2:#DE6FAB;
--font:#727D84;
--gray:#a0a0a0;
--light:#efeff4;
}

* {font-family:"montserrat", sans-serif; outline:none; transition:0.3s;}
body {color:var(--font); margin:0px; font-size:16px;}
section {padding:48px 0px 60px;}
#contacts {padding:0px;}
h1, h2, h3, h4, strong, b {font-weight:600;}
h1, h2 {text-align:center; font-size:50px; margin:0px 0px 24px;}
h3 {font-size:40px; margin:0px 0px 24px;}
h4 {font-size:24px; margin:0px 0px 20px; font-weight:300; text-transform:uppercase;}
.g-common h2 {color:var(--light);}
img {max-width:100%;}
.s-common {background:var(--light); background-size:100% 100%; background-attachment:fixed;}
.c-common {background-color:#ffffff;}
.g-common {background-color:var(--dark);}
footer {padding:48px 0px 40px; background-color:var(--bs1); color:#ffffff;}
section ul {list-style:none; margin:20px 0px; padding:0px;}
section li {margin:0px 0px 12px; font-size:16px;}
section li:before {content:""; display:inline-block; width:30px; height:27px; background: url(../pic/ico-checkmark.svg) no-repeat; background-size:100%; margin-right:16px; vertical-align:middle;}
section .big-ul li {font-weight:500; color:var(--bs1);}
label {display:block; margin:0px auto 16px; width:100%;}
label span {display:block; font-size:14px; color:var(--bs1);}
input[type=text], textarea {width:calc(100% - 34px); padding:8px 16px; color:#ffffff; font-size:20px; background:none; border:1px solid #ffffff;}
input[type=text]::placeholder, textarea::placeholder {color:#ffffff60;}
select {padding:8px 16px; width:100%; color:var(--bs1); font-size:24px; background:none; border:1px solid #ffffff;}
input[type=submit], button[type=submit] {width:calc(60% - 34px); padding:8px 16px; color:#ffffff; font-size:24px; background:none; border:1px solid #ffffff; cursor:pointer;}
input[type=submit]:hover, button[type=submit]:hover {background:#ba131a30;}
input[type=checkbox] {appearance:none; width:20px; height:20px; vertical-align:top; margin:0px 12px 0px 0px; border:1px solid #ffffff;}
input[type=checkbox]:checked {background:url(/pic/ico-checkmark.svg) no-repeat #ffffff; background-size:100%;}
section a {color:var(--bs1); font-weight:500;}

.full {width:100%;}
.wide {width:92%; margin:auto;}
.wrap {width:1200px; margin:auto;}

.topmenu {position:fixed; z-index:100;}
.topmenu nav ul {list-style:none; margin:0px; padding:0px;}
.topmenu nav ul a {text-decoration:none;}
.topmenu nav > ul {display:flex; flex-wrap:wrap; justify-content:center;}
.topmenu nav > ul > li {position:relative; margin:0px 8px;}
.topmenu nav > ul ul {display:none; position:absolute; width:240px; left:0px; padding:16px; background-color:#ffffff; border-radius:0px 6px 10px 6px; box-shadow:0px 2px 5px #777777;}
.topmenu nav > ul > li > a {display:block; height:24px; padding:12px 24px; color:#ffffff; font-size:20px; font-weight:500;}
.topmenu nav > ul > li:hover > a {background-color:var(--bs1);}
.topmenu nav > ul ul > li > a {display:block; padding:8px 0px; border-bottom:1px solid var(--bs2); color:var(--font); font-size:18px; font-weight:600;}
.topmenu nav > ul ul > li:first-child > a {padding:0px 0px 8px;}
.topmenu nav > ul ul > li:last-child > a {border-bottom:0px; padding:8px 0px 0px;}
.topmenu nav > ul > li:hover > ul {display:block;}
.topmenu nav > ul ul > li > a:hover {color:var(--bs1);}

nav {padding:12px 0px; background:#00000050;}
.start nav {padding:0px 0px; background-color:var(--bs2); box-shadow:0px 1px 5px #444444;}

.burger {width:28px; height:28px; padding:12px; border-radius:30px; cursor:pointer; display:none; position:absolute; top:12px; left:12px; z-index:50;}
.burger span, .burger span:before, .burger span:after {width:calc(100% - 24px); position:absolute; height:3px; background:#ffffff; display:block; transition:0.3s;}
.burger span:before, .burger span:after {width:100%;}
.burger span {top:24px;}
.burger span:before {content:""; top:-9px; transition:top 300ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.burger span:after {content:""; bottom:-9px; transition:bottom 300ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.burger span.active:before {content:""; top:0px; transform:rotate(45deg); transition:top 300ms, transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); background:var(--font);}
.burger span.active:after {content:""; bottom:0; transform:rotate(-45deg); transition:bottom 300ms, transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); background:var(--font);}
.burger span.active {background: rgba(255, 255, 255, 0);} 
.start .burger {background-color:#fffffff0;}
.start .burger span, .start .burger span:before, .start .burger span:after {background:var(--bs1);}
.start .burger span.active {background: rgba(255, 255, 255, 0);} 


.big-banner {position:relative; width:100%; height:100vh;}
.mini-banner {position:relative; width:100%; height:260px;}
.mainboard {width:100%; height:100%; filter:brightness(0.40); background:var(--font); transition:0s;}
.mainboard div {position:absolute; width:100%; height:100%; transition:0s;}
.mainboard div:nth-child(n+2) {display:none;}
.mainboard img {width:100%; height:100%; object-fit:cover;}
.logo {position:absolute; width:320px; height:160px; top:calc(30% - 115px); left:calc(50% - 150px);}
.slogan {position:absolute; width:100%; top:40%;}
.slogan-h1 {margin-bottom:32px; text-align:center; font-size:96px; font-weight:500; color:#ffffff;}
.slogan-h2 {text-align:center; font-size:50px; font-weight:500; color:var(--bs2);}
.scroll-tab {position:absolute; width:100%; bottom:5%; text-align:center; opacity:0.4; cursor:pointer;}
.scroll-tab:hover {opacity:0.7;}
.scroll-tab span {display:block; margin:auto; color:var(--bs2); font-size:20px; font-weight:600;}
.scroll-tab img {width:60px;}
.start .scroll-tab {opacity:0;}
.mini-banner .logo {width:240px; height:170px; top:60px; left:calc(50% - 120px);}

.plates {display:grid; grid-gap:20px; grid-template-columns:auto auto;}
.plates .triple-unit {padding:50px 40px 50px 45px; color:var(--font); cursor:pointer; transition:0.2s; border:1px solid rgba(160, 160, 160, 0.19);}
.plates .triple-unit:hover {background-color:var(--light);}
.plates .triple-unit .img img {width:auto; height:74px;}
.plates .triple-unit .header {margin:21px 0px; font-weight:600; font-size:18px; color:var(--bs1); line-height:1.38; text-transform:uppercase;}
.plates .triple-unit p {margin:0px; line-height:1.5;}
.monoplates {display:grid; grid-gap:32px; grid-template-columns:auto;}
.monoplate {padding:50px 40px 50px 45px; color:var(--font); cursor:pointer; transition:0.2s; border:1px solid var(--bs1);}
.monoplate:hover {background-color:var(--light);}
.monoplate .header {margin:21px 0px; font-weight:600; font-size:18px; color:var(--bs1); line-height:1.38; text-transform:uppercase;}
.monoplate p {margin:0px; line-height:1.5;}

.shower {display:flex; flex-wrap:wrap; justify-content:space-between;}
.dual-unit {display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:100%; margin:40px 0px; text-decoration:none;}
.dual-unit:hover {box-shadow:0px 0px 25px #32323240;}
.dual-unit:hover .quart-img {filter:brightness(0.80);}
.quart-img {width:64%; height:400px;}
.quart-img img {width:100%; height:100%; object-fit:cover;}
.quart-text {display:grid; grid-gap:0px; justify-content: center; align-content:center; align-items:center; width:30%; padding:0% 3%; background-color:var(--light);}
.shower .dual-unit:nth-child(2n) {flex-direction:row-reverse;}
.shower .hd {padding:0px 0px 25px; color:#000000; font-size:24px; font-weight:600; text-transform:uppercase; text-align:center; border-bottom:1px solid var(--bs2);}
.shower .knowmore {margin:50px 0px 0px; padding:12px 24px; border:1px solid; border-radius:40px; font-size:14px; font-weight:600; color:var(--bs1); text-decoration:none; text-transform:uppercase;}
.shower .knowmore:hover {background-color:var(--bs1h);}
.g-common .shower .hd {color:#ffffff;}
.detail {padding:16px 0px 0px; font-size:14px; line-height:24px; border-top:3px solid var(--bs2); color:var(--font);}
.detail p {margin:0px;}
.det-mini .detail {height:70px;}
.g-common .detail {color:var(--light);}

.grider {display:grid; grid-gap:48px 4%; grid-template-columns:22% 22% 22% 22%; align-content:center; justify-content:center;}
.grid-unit {text-decoration:none; color:var(--font);}
.grid-unit:hover {box-shadow:0px 0px 25px #32323240;}
.grid-img {width:auto; height:240px;}
.grid-img img {width:100%; height:100%; object-fit:contain;}
.grid-img img.cvr {object-fit:cover;}
.grid-text {display:flex; flex-wrap:wrap; align-content:center; justify-content:center; min-height:80px; border-top:1px solid #e2dfdf;}
.grid-unit:hover .grid-text {background-color:#e2dfdf;}
.grider .hd {width:90%; color:#000000; font-size:20px; font-weight:600; text-transform:uppercase; text-align:center;}
.grider .hdplus {font-size:14px; font-weight:500; text-align:center;}

.singlet {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-around;}
.single-img {width:50%; text-align:center;}
.single-desc {width:40%;}
.prop-element {display:flex; justify-content:start; padding:12px 10px;}
.prop-element span:first-child {width:230px;}
.prop-element:nth-child(2n+1) {background-color:var(--light);}
.prop-element img {vertical-align:middle; margin-right:20px;}
.prop-pics {border-bottom:3px solid var(--bgnd);}
.prop-pics img {margin-right:12px; vertical-align:bottom;}

.flexer-dual {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start;}
.flexer-dual > div {width:47%;}
.fl-img img {border-radius:8px;}
.hitext {font-size:18px; line-height:1.5; font-weight:300;}
.p-str {color:#000000; font-weight:400;}
.p-large {margin:40px 120px; text-align:center; font-weight:500; font-size:32px; color:var(--bs2);}
.hitext > div.stick {position:sticky; top:80px;}

.quartel {display:grid; grid-gap:30px; grid-template-columns:auto auto auto auto;}
.quartel > div {height:240px;}
.quartel img {width:100%; height:100%; object-fit:cover;}
.p-links div {text-align:center; color:var(--bs1); font-weight:500;}
.p-links span {display:block; width:200px; height:80px; margin:auto; color:var(--bs1); font-weight:500;}
.p-links a {text-decoration:none;}
.p-links .circles-ico {width:60px; height:60px; padding:45px; border:5px solid; margin:20px auto 20px; border-radius:90px;}
.p-links a:hover .circles-ico {margin:10px auto 30px;}
.circles-ico img {width:100%; height:100%; object-fit:contain;}

.gallery-zm {display:grid; justify-content:left; grid-gap:30px 30px; margin:30px 0px; grid-template-columns:auto auto auto auto;}
.gallery-zm div a {display:block; width:100%; height:200px;}
.gallery-zm div a:hover {opacity:0.7;}
.gallery-zm div a img {object-fit:cover; width:100%; height:100%;}
.gallery-zm div p {display:block; text-align:center; font-size:14px;}

.trio {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start;}
.trio > div {width:28%;}
.roundimg .hd {color:#000000; height:48px; font-size:24px; font-weight:600;}
.roundimg img {border-radius:50%;}
.roundimg .detail {height:100px; padding:20px 0px 0px; font-size:16px;}

.footerel {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start;}
.footerel > div {width:24%;}
.footerel .footer-logo {width:190px; margin:0px;}
.footerel .socials {display:flex; flex-wrap:wrap; justify-content:left; align-items:start; margin:32px 0px;}
.footerel .socials a {display:block; width:40px; height:40px; border:2px solid; border-radius:24px; margin-right:28px; color:#ffffff;}
.footerel .socials a:hover {background-color:#ffffff20;}
.footer-nav {list-style:none; margin:0px; padding:0px;}
.footer-nav li {display:block; margin:8px 0px;}
.footer-nav li a {color:#ffffff; text-decoration:none; font-weight:500;}
.footer-nav li a:hover {color:var(--light); text-decoration:underline;}
.footer-last {display:flex; flex-wrap:wrap; justify-content:left; align-items:start; margin:0px 0px 24px; line-height:1.5;}
.footer-last-ico {width:24px; margin-right:24px;}
.footer-last-ico + span {width:calc(100% - 48px); line-height:1.8;}
.footer-last a {color:#ffffff;}

.knowmore {text-align:center;}
.knowmore a {display:inline-block; margin:auto; padding:12px 24px; border:1px solid; border-radius:40px; font-size:14px; font-weight:600; color:var(--bs1); text-decoration:none; text-transform:uppercase;}
.knowmore a:hover {background-color:var(--bs1h);}
.knowmore.large a {font-size:18px; padding:16px 72px;}
.g-common .knowmore a {color:var(--bs2);}
.g-common .knowmore a:hover {background-color:var(--bs2h);}

footer .knowmore {text-align:left;}
footer .knowmore a {color:#ffffff;}
footer .knowmore a:hover {background-color:#ffffff20;}
.map {width:100%; height:480px;}
.map iframe {width:100%; height:100%; border:0px; border-radius:8px;}
.copyright {margin:32px 0px 0px; text-align:center; color:var(--light); font-size:13px;}
.copyright a {color:#ffffff;}

.crumbs {display:inline-block; padding:4px 16px; background-color:var(--bs2h); border:1px solid var(--bs2); border-top:0px; border-radius:0px 0px 12px 12px;}
.crumbs a {color:var(--bs1); text-decoration:none; font-size:14px; font-weight:600;}
.crumbs a:hover {text-decoration:underline;}
.crumbs span {color:var(--font); font-size:14px; font-weight:600;}

.flavour {display:grid; grid-gap:24px; justify-content:center; grid-template-columns:48% 48%;}
.flavour a {display:flex; justify-content:start; align-items:center; padding:60px 40px; background:var(--bs1h); color:var(--font); text-decoration:none; text-align:left;}
.flavour a:hover {box-shadow:0px 0px 25px #32323240; background:var(--bs2h);}
.flav-hd {height:70px; font-size:24px; font-weight:500;}
.flav-sd {height:40px; font-size:18px; font-weight:300;}
.flavour a:nth-child(1) {border-radius:120px 120px 0px 120px;}
.flavour a:nth-child(2) {border-radius:120px 120px 120px 0px;}
.flavour a:nth-child(3) {border-radius:120px 0px 120px 120px;}
.flavour a:nth-child(4) {border-radius:0px 120px 120px 120px;}
.flav-img {width:120px; margin-right:24px;}
.flav-txt {width:calc(100% - 144px);}

.vexi {display:flex; flex-wrap:nowrap; position:relative; justify-content:space-between; align-items:center; align-content:center;}
.vex-block {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;}
.vex-block > div {display:flex; align-content:center; align-items:center; justify-content:center; text-align:center; width:160px; height:80px;}
.vexi:before {content:""; display:block; position:absolute; width:100%; height:4px; top:78px; background:var(--bs1);}
.vex-block:before {content:"|"; display:block; position:absolute; top:64px; font-size:28px; line-height:28px; font-weight:700; color:var(--bs1);}
.vex-y {font-size:20px; font-weight:700; letter-spacing:2px;}
.vex-block:nth-child(2n+1) {flex-direction: column-reverse;}

.fdback-form {display:none; position:fixed; width:100vw; height:80vh; padding:10vh 0px; top:0px; left:0px; background-color:#000000cc; z-index:50;}
.fdback-field {position:relative; width:60vw; margin:40px auto 0px; padding:2vh 5vw; background-color:var(--bs2); text-align:center;}
.close {display:block; position:absolute; top:24px; right:24px; width:48px; height:48px; color:var(--bs1); font-size:48px; line-height:48px; cursor:pointer; transition:0.2s; text-decoration:none;}
.close:hover {transform:rotate(90deg);}
.fdback-field form {max-width:600px; margin:auto;}



/* Adaptive */


@media (max-width:1580px)
{
.wide {width:calc(100% - 60px);}

}

@media (max-width:1480px)
{
h1, h2 {font-size:44px;}
h4 {font-size:22px;}
.logo {width:260px; left:calc(50% - 130px);}
.detail {font-size:13px;}
.shower .hd {font-size:18px;}
.single-desc {width:48%;}
.grider .hd {font-size:18px;}
}

@media (max-width:1260px)
{
.topmenu nav > ul > li > a {padding:10px 16px; font-size:16px;}
.wrap {width:calc(100% - 20px);}
.wide {width:calc(100% - 20px);}
.logo {width:230px; left:calc(50% - 115px);}

.shower .quart-img {height:320px;}
.slogan {top:50%;}
.grider {grid-gap:40px 3%; grid-template-columns:30% 30% 30%;}
.p-large {margin:40px 40px; font-size:24px;}
.flavour {grid-template-columns:45% 45%;}

.quartel {grid-template-columns:auto auto auto;}
}

@media (max-width:1080px)
{
.slogan-h1 {font-size:80px;}
.slogan-h2 {font-size:42px;}
.grider {grid-gap:40px 5%; grid-template-columns:45% 45%;}
.gallery-zm {grid-template-columns:auto auto auto;}

.plates .triple-unit {padding:40px 28px; font-size:18px;}

}


@media (max-width:1020px)
{
.burger {display:block;}
.topmenu nav {display:none; position:fixed; top:0px; left:0px; padding:40px 16px 0px 0px; background:#ffffffe0; border-radius:0px 0px 80px 0px; z-index:25; transition:0s;}
.topmenu nav > ul {display:block; padding:24px; width:80%; margin:auto;}
.topmenu nav > ul ul {position:static; display:block; padding:0px 20px; margin:2px 0px 6px; background-color:transparent; box-shadow:none;}
.topmenu nav > ul ul li, .top-menu nav > ul > li {border-bottom:0px; height:auto; padding:2px 0px;}
.topmenu nav > ul ul > li > a {padding:0px;}
.topmenu nav > ul > li {padding:0px 0px 8px;}
.topmenu nav > ul > li > a {border-right:0px; padding:0px; font-weight:600; color:var(--bs1);}
.topmenu nav > ul > li:hover {background-color:transparent;}
.topmenu nav > ul > li:last-child > ul {margin-left:auto;}
.topmenu nav > ul ul > li:first-child > a {padding:0px;}
.topmenu nav > ul ul > li:last-child > a {padding:0px;}
.topmenu nav > ul > li:hover > a {background-color:transparent;}
.topmenu nav > ul > li > a:hover {color:var(--bs2);}
.topmenu nav > ul > li > a:after {width:0px;}

.logo {width:200px; height:150px; top:calc(32% - 75px); left:calc(50% - 100px);}
.slogan-h1 {font-size:32px;}
.slogan-h2 {font-size:18px;}
.slogan {top:45%;}

h1, h2 {font-size:32px;}
h3 {font-size:24px;}

.flexer-dual > div {width:100%;}
.shower .quart-img {width:50%;}
.shower .quart-text {width:44%;}
.dual-unit {margin:30px 0px;}
.quartel {grid-template-columns:auto auto;}

.single-desc, .single-img {width:100%;}


.hitext > div.stick {position:static;}
.hitext .fl-img img {width:100%; height:320px; object-fit:cover;}
.hitext h3 {margin:24px 0px;}

.roundimg .detail {height:130px; font-size:14px;}
.map {height:540px;}
.footerel > div {width:100%; margin:0px 0px 32px;}
.ftrl-unit {text-align:center;}
.footerel .footer-logo {margin:auto;}
.footerel .socials {justify-content:space-between; width:190px; margin:16px auto;}
.footerel .socials a {margin-right:0px;}
.footer-nav {display:flex; flex-wrap:wrap; justify-content:center;}
.footer-nav li {margin:8px 16px;}
.footer-last {width:280px; text-align:left; margin:0px auto 16px;}
footer .knowmore {text-align:center;}

.flav-hd {height:60px; font-size:20px;}
.flav-sd {font-size:16px; font-weight:400;}

.vexi {flex-wrap:wrap; width:360px; margin:auto;}
.vexi:before {width:4px; height:100%; top:0px; left:168px;}
.vex-block:nth-child(2n+1) {flex-direction:inherit;}
.vex-block:before {top:auto; left:168px; transform:rotate(90deg);}
.vex-block > div {width:160px; padding:10px 0px 10px 20px;}
.vex-block > div.vex-n {text-align:left;}

.flav-img {width:64px; margin-right:16px;}
.flav-txt {width:calc(100% - 80px);}

}


@media (max-width:639px)
{
section {padding:32px 0px 48px;}
h1, h2 {font-size:26px;}
h4 {margin:0px 0px 10px;}

.big-banner {height:80vh;}
.topmenu nav > ul {width:calc(100% - 60px); padding:24px 0px 24px 60px;}
.shower .quart-img {width:100%; height:200px; margin-bottom:0px;}
.shower .quart-text {width:100%; padding:30px 0px;}
.quart-img {width:100%; height:160px; margin-bottom:16px;}
.quart-text {width:100%;}
.det-mini .detail {height:auto; padding-bottom:32px;}
.knowmore a {font-size:13px; padding:10px 24px;}
.knowmore.large a {font-size:16px; padding:14px 0px; width:100%;}
.grider {grid-gap:40px; grid-template-columns:auto;}
.shower .knowmore {margin:32px 0px 0px;}
.single-desc {font-size:13px;}
.prop-element span:first-child {width:196px;}

.hitext {font-size:16px;}
.p-links .circles-ico {width:40px; height:40px; padding:32px;}
.p-links span {width:80%; font-size:13px;}
.trio > div {width:70%;}
.roundimg {justify-content:center;}
.roundimg .detail {height:90px;}
.footer-nav li {margin:4px 12px;}
.footer-nav li a {font-size:14px;}
.footer-last:first-child {margin:16px auto 16px;}
.copyright {margin:0px;}
.p-large {margin:20px; font-size:20px;}

.flavour {grid-template-columns:100%;}
.flavour a {padding:40px 20px;}
.flav-hd {height:50px;}
.flavour a:nth-child(n) {border-radius:80px;}
.flav-img {width:48px; margin-right:12px;}
.flav-txt {width:calc(100% - 60px);}

.fdback-form {width:auto;}
.fdback-field {width:auto; padding:16px; margin:0px 16px;}
.close {width:32px; height:32px; font-size:32px; line-height:32px; top:12px; right:12px;}
input[type=submit], button[type=submit] {width:calc(80% - 34px);}
.gallery-zm {grid-template-columns:auto; justify-content:center;}

.plates {grid-template-columns:auto;}
.plates .triple-unit {padding:32px 20px; font-size:18px;}
.quartel {grid-gap:20px; grid-template-columns:auto;}
}