@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');

:root {
    --color-gold: #9e8e50;
    --color-aqua: 120, 205, 212;
    --color-black: 0, 0, 0;
    --color-blue: 0, 36, 76;
    --color-dark-grey: 35, 31, 32;
    --color-grey-93: 238, 238, 238;
    --color-grey-warm: 101, 92, 86;
    --color-white: 255, 255, 255;

    --color-unit-floor: 255, 255, 255;
    --color-unit-floor-stroke: 35, 31, 32;
    --color-unit-others: 255, 255, 255;
    --color-unit-others-stroke: 35, 31, 32;
    --color-unit-unavailable: 178, 178, 178;
    --color-unit-unavailable-stroke: 35, 31, 32;
    --color-unit-match: 120, 205, 212;
    --color-unit-match-stroke: 35, 31, 32;
    --color-unit-match-active: 62, 165, 175;
    --color-unit-other: 161, 227, 229;
    --color-unit-other-stroke: 35, 31, 32;

    --transition-duration-bt: 0.4s;
    --transition-timing-linear: linear;
    --transition-timing-ease-out: cubic-bezier(0, 0.6, 0.4, 1);
    --transition-timing-ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
}

@font-face {
    font-family: 'Ridley';
    src: url("../fonts/RidleyGrotesk-Light.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Ridley';
    src: url("../fonts/RidleyGrotesk-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Ridley';
    src: url("../fonts/RidleyGrotesk-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'Ridley';
    src: url("../fonts/RidleyGrotesk-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Ridley';
    src: url("../fonts/RidleyGrotesk-ExtraBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 900;
}

html {
    height: 100%;
    font-family: Ridley, proxima-nova, sans-serif;
    /*font-size: 62.5%;*/
    /*scroll-behavior: smooth;*/
}

body {
    width: 100%;
    height: 100%;
    background: rgb(var(--color-white));
    overflow-y: scroll;
}

body.noscroll {
    overflow: hidden;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

img, iframe, video {
    display: block;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, button, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: none;
}

.content h1 {
    font-family: Italiana, proxima-nova, sans-serif;
    color: var(--color-gold);
    text-transform: uppercase;
}
.content h2, .content h3 {
    font-family: Italiana, proxima-nova, sans-serif;
}
body.pg-contact .content h3 {
    font-family: Ridley, proxima-nova, sans-serif;
}
body.pg-plans section.bckg {
    /* force black background for 'plans' page */
    background-color: rgb(var(--color-black));
}

ul, li {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5 {
    font-weight: normal;
}

button {
    background: none;
    border-radius: 0;
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

*:focus {
    outline: 0;
}


/*************************************
	Header
 *************************************/

/* color 2 letters in 'Bien<strong>en</strong>vue' */
.home-title h2 strong {
    color: var(--color-gold);
}

header {
    display: block;
    /*position: absolute;
    position: sticky;*/
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(var(--color-blue), 0);
    margin: 0;
    padding: 0;
    transition: background-color 0.4s linear;
    z-index: 2;
}

/*div.banner,
div.banner-bckg {
    display: block;
    position: relative;
    width: 100%;
    color: rgb(var(--color-white));
    font-size: 24px;
    line-height: 1em;
    text-align: center;
    text-transform: uppercase;
    padding: min(9px, (9 / 1280) * 100vw);
    z-index: 200;
}

div.banner-bckg {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(var(--color-blue),0.5);
    mix-blend-mode: multiply;
}*/

header.fixed {
    position: fixed;
    background: rgba(var(--color-black), 0.5);
    transition: background-color 0.4s 0.6s linear, transform 0.6s;
}

header.hide {
    transform: translateY(-100%);
}

header div.banner {
    display: block;
    position: relative;
    width: 100%;
    color: rgb(var(--color-white));
    font-size: 18px;
    letter-spacing: 0.2em;
    line-height: 1em;
    background: rgba(var(--color-blue), 0.75);
    text-align: center;
    text-transform: uppercase;
    /*padding: min(9px, (9 / 1280) * 100vw);*/
    padding: min(14px, (14 / 1280) * 100vw);
}

header nav {
    display: block;
    position: relative;
    margin: 0 auto;
    /*width: min(1280px, 100vw);*/
}

header nav ul li {
    display: none;
    position: relative;
    color: rgb(var(--color-white));
    font-size: 24px;
    line-height: 1em;
    text-transform: uppercase;
}

header nav ul li.home,
header nav ul li.lang {
    display: block;
}

@media screen and (min-width: 961px) {
    header nav ul li.lang {
        /*margin-right: 100px;*/
    }
}

header nav ul li.home {
    flex-grow: 1;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

/*header nav ul li.home a {
    display: inline-block;
    width: 208px;
    height: 54px;
    background: url("../images/logo-symphonia-viu.svg") center center no-repeat;
    background-size: contain;
}*/
header nav ul li.home a {
    display: inline-block;
}

header nav ul li.home a img {
    width: 208px;
    height: auto;
}

header nav ul li.lang a {
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 600;
    line-height: 1.25em;
    /*bottom: 0;*/
    /*line-height: 0.6em;*/
}

header nav ul li.symphonia-pop:before {
    content: "";
    display: block;
    width: auto; /* never set a fixed width */
    border-top: solid 1px rgb(var(--color-white));
    margin-bottom: 0.5em;
    /*margin-top: 1.5em;*/
    /*padding-top: 1.5em;*/
}


/*--  nav-open  --*/

body.nav-open {
    overflow: hidden;
}

body.nav-open header div.banner {
    display: none;
}

body.nav-open header nav {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    left: 0;
    top: 0;
}

body.nav-open header nav:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /*background-image: linear-gradient(rgb(var(--color-blue)), rgb(var(--color-aqua)));*/
    background-color: rgb(var(--color-black));
    animation: kf-nav-open-bckg 0.4s linear both;
    z-index: -1;
}

@keyframes kf-nav-open-bckg {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.95;
    }
}

body.nav-open header nav ul {
    display: block;
    max-width: 1280px;
    margin: 0 auto;
}

body.nav-open header nav ul li {
    display: block;
    animation: kf-fadein 0.4s 0.4s linear both;
}

body.nav-open header nav ul li + li {
    margin-top: 0.5em;
}

body.nav-open header nav ul li.lang {
    margin-top: 0.5em;
    /*margin-top: 1.5em;*/
}

body.nav-open header nav ul li.lang a {
    position: relative;
    right: auto;
    bottom: auto;
}


/*--  nav ico  --*/

/* 2025-12: old menu icon (using menu.css now) */
/*header div.ico {*/
/*    display: block;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: min(34px, (((18 + 27) / 1280) * 100vw) - 11px);*/
/*    flex-flow: column nowrap;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    cursor: pointer;*/
/*    pointer-events: auto;*/
/*    transform: translateX(max(-590px, -50vw + 50px));*/
/*    z-index: 2;*/
/*}*/

header div.ico > div {
    display: block;
    position: relative;
    width: 27px;
    height: 22px;
}

header div.ico span {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background: rgb(var(--color-white));
    border-radius: 9999px;
    transition: background 0.3s 0.3s, opacity 0.3s 0.3s, top 0.3s 0.3s, transform 0.3s;
}

body.nav-open header div.ico span {
    transition: background 0.3s, opacity 0.3s, top 0.3s, transform 0.3s 0.3s;
}

header div.ico span:nth-child(1) {
    top: 0px;
}

header div.ico span:nth-child(2) {
    top: calc(50% - 1.5px);
}

header div.ico span:nth-child(3) {
    top: calc(100% - 3px);
}

body.nav-open header div.ico span:nth-child(1) {
    top: calc(50% - 1.5px);
    transform: rotate(45deg);
}

body.nav-open header div.ico span:nth-child(2) {
    opacity: 0;
}

body.nav-open header div.ico span:nth-child(3) {
    top: calc(50% - 2px);
    transform: rotate(-45deg);
}


/*************************************
	Sections
 *************************************/


.container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.page {
    flex: 1 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
}

section {
    display: block;
    position: relative;
    width: 100%;
}

section > div {
    display: block;
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 min(100px, (100 / 1280) * 100vw);
}

strong {
    font-weight: 600;
}

sup {
    display: inline-block;
    position: relative;
    font-size: 0.6em;
    vertical-align: top;
    margin-top: -0.3em;
}

.text-transform-none {
    text-transform: none;
}

.text-transform-uppercase {
    text-transform: uppercase;
}

.white-space-nowrap {
    white-space: nowrap;
}

.bt {
    display: inline-block;
    background: rgb(var(--color-aqua));
    color: rgb(var(--color-white));
    font-size: 16px;
    line-height: 1.25em;
    padding: 0.5em 1em;
}

@keyframes kf-fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.grecaptcha-badge {
    visibility: hidden;
}


/*************************************
	Header
 *************************************/


section.bckg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
}

/* new <video> tag for background video */
section.bckg #background-video {
    position: fixed; /* Fixes it to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full width */
    height: 100vh; /* Full height */
    object-fit: cover; /* Ensures it scales properly */
    z-index: -1; /* Places it behind other elements */
}

section.bckg > div {
    display: block;
    position: absolute;
    width: 100%;
    max-width: none;
    height: 100%;
    left: 0;
    top: 0;
}

section.bckg img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

section.bckg iframe {
    display: block;
    position: absolute;
    width: calc((16 / 9) * 100vh);
    height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
    section.bckg iframe {
        width: 100vw;
        height: calc((9 / 16) * 100vw);
    }
}

section.bckg:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /*background-image: linear-gradient(rgb(var(--color-blue)), rgb(var(--color-aqua)));*/
    background-color: rgba(var(--color-black), 0.5);
    opacity: 0.85;
}

/* specific pages must have darker tint */
body:not(.pg-home) section.bckg:after {
    background-color: rgba(var(--color-black), 0.9);
}

div.nenuphars {
    /* disable nenuphars at large (associated JS code therefore has no effect) */
    display: none;
    pointer-events: none;
}

div.nenuphar {
    display: block;
    position: absolute;
}

div.nenuphar > div > div > div {
    display: block;
    position: absolute;
    width: min(327px, (327 / 1280) * 100vw);
    height: min(342px, (342 / 1280) * 100vw);
    left: 0;
    top: 0;
    background: url("../images/img-nenuphar-outline.svg") center center no-repeat;
    background-size: contain;
    transform: translate(-50%, -50%);
}

div.nenuphar.flower > div > div > div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url("../images/img-nenuphar-flower.png") center center no-repeat;
    background-size: 75% auto;
}

div.nenuphar.flower {
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
}

section.home-title,
section.header {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
body:not(.pg-home) section.header h2 {
    font-family: Ridley, proxima-nova, sans-serif;
}

section.home-title div.content,
section.header div.content {
    position: fixed;
    color: rgb(var(--color-white));
    text-align: center;
    padding: min(100px, (100 / 1280) * 100vw);
}

section.header div.content {
    padding-right: min(200px, (200 / 1280) * 100vw);
    padding-left: min(200px, (200 / 1280) * 100vw);
}

section.home-title.inplace,
section.header.inplace {
    align-items: flex-end;
}

section.home-title.inplace div.content,
section.header.inplace div.content {
    position: relative;
}

section.home-title h2 {
    min-height: 0;
    font-size: 42px;
    font-size: clamp(42px, (102 / 1280) * 100vw, 102px);
    letter-spacing: 0.2em;
    line-height: 1em;
    text-transform: uppercase;
}

section.home-title h2 strong {
    font-weight: 800;
}

section.home-title div.nenuphars {
    position: fixed;
    width: 100vw;
    max-width: none;
    height: 100vh;
    left: 0;
    top: 0;
    padding: 0;
}

section.home-title div.nenuphars > div,
section.home-title div.nenuphars > div > div {
    transition: transform 1.2s cubic-bezier(0, 0.6, 0.4, 1);
}

section.home-title div.nenuphars > div:nth-child(1) {
    left: calc(50vw - ((390 / 1280) * 100vw));
    top: calc(50vh - ((235 / 1280) * 100vw));
}

section.home-title div.nenuphars > div:nth-child(2) {
    left: calc(50vw + ((500 / 1280) * 100vw));
    top: calc(50vh + ((110 / 1280) * 100vw));
}

section.home-title div.nenuphars > div:nth-child(2) > div > div {
    transform: rotate(-180deg) scale(0.77);
}

section.home-title div.nenuphars > div:nth-child(3) {
    left: calc(50vw - ((685 / 1280) * 100vw));
    top: calc(50vh + ((305 / 1280) * 100vw));
}

section.home-title div.nenuphars > div:nth-child(3) > div > div {
    transform: rotate(-90deg);
}

section.home-section {
    display: flex;
    align-items: flex-start;
}

section.home-section div.content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    color: rgb(var(--color-white));
    padding-bottom: min(100px, (100 / 1280) * 100vw);
}

section.home-section:nth-of-type(even) div.content > div:nth-child(1) {
    grid-column: 2 / span 1;
}

section.home-section:nth-of-type(even) div.content > div:nth-child(2) {
    grid-column: 1 / span 1;
    grid-row-start: 1;
}

section.home-section div.content > div:nth-child(1),
section.home-section:nth-of-type(even) div.content > div:nth-child(2) {
    transform: translateX(50%);
}

section.home-section div.content > div:nth-child(2),
section.home-section:nth-of-type(even) div.content > div:nth-child(1) {
    transform: translateX(-50%);
}

section.home-section div.content > div {
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.6, 0, 0.4, 1);
}

section.home-section.show div.content > div,
section.home-section.show:nth-of-type(even) div.content > div {
    transform: translateX(0);
    transition: transform 1.2s cubic-bezier(0.6, 0, 0.4, 1);
}

section.home-section div.content > div img {
    width: 100%;
    height: auto;
}

section.home-section div.content > div.video {
    padding-top: 56.25%;
}

section.home-section div.content > div iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

section.home-section div.content > div h3,
section.home-section div.content > div p {
    padding: 0 50px;
}

section.header h1,
section.home-section h3 {
    min-height: 0vh;
    font-size: 32px;
    font-size: clamp(24px, (48 / 1280) * 100vw, 48px);
    letter-spacing: 0.025;
    line-height: 1.1em;
    /*text-transform: uppercase;*/
}

section.header h2,
section.header p,
section.home-section p,
section.cta-next-page p,
section.gallery p {
    min-height: 0vh;
    font-size: clamp(16px, (22 / 1280) * 100vw, 22px);
    line-height: 1.2727em;
}

section.header h1 {
    display: inline-block;
    margin-top: 0.5em;
}

section.header h2 {
    font-weight: 600;
    text-transform: uppercase;
}

section.header h1 + p {
    margin-top: 1.8182em;
}

section.header h1 + h2,
section.header h1 + p {
    margin-top: 1.8182em;
}

section.header h2 + p {
    margin-top: 0.6em;
}

section.home-section p + p,
section.cta-next-page p + p {
    margin-top: 1.2em;
}

section.home-section p:last-of-type {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height, margin;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0, 0.6, 0.4, 1);
    transition-timing-function: linear;
}

section.home-section.show p:last-of-type {
    max-height: 1.2727em;
    margin-top: 1.2727em;
    transition-delay: 1.2s;
}

section.home-section a,
section.cta-next-page a {
    position: relative;
    text-transform: uppercase;
}

section.home-section a:after,
section.cta-next-page a:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: rgb(var(--color-white));
}

section.header div.header-flower,
section.header div.header-symphonia-sol,
section.header div.header-symphonia-pop {
    display: none; /* hide the pink flower */
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

section.header div.header-flower {
    width: min(200px, (200 / 1280) * 100vw);
    height: min(60px, (60 / 1280) * 100vw);
}

section.header div.header-symphonia-sol {
    width: min(330px, (330 / 1280) * 100vw);
    height: min(91px, (91 / 1280) * 100vw);
}

section.header div.header-symphonia-pop {
    width: min(330px, (330 / 1280) * 100vw);
    height: min(103px, (103 / 1280) * 100vw);
}

section.header div.header-flower:before,
section.header div.header-symphonia-sol:before,
section.header div.header-symphonia-pop:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    transform-origin: center bottom;
}

section.header div.header-flower:before {
    background-image: url("../images/img-flower.png");
    animation: kf-flower 1.6s 0.2s var(--transition-timing-ease-out) both;
}

@keyframes kf-flower {
    0% {
        transform: scale(0) translateY(125%);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

section.header div.header-flower:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: rgb(var(--color-white));
    animation: kf-flower-border 1.6s var(--transition-timing-ease-out) both;
}

@keyframes kf-flower-border {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

section.header div.header-symphonia-sol:before {
    background-image: url("../images/logo-symphoniasol-white.svg");
}

section.header div.header-symphonia-pop:before {
    background-image: url("../images/logo-symphonia-pop-white.svg");
}

section.home-section div.nenuphars,
section.gallery div.nenuphars,
section.cta-next-page div.nenuphars {
    position: absolute;
    max-width: none;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    padding: 0;
}

section.home-section.project div.nenuphars > div:nth-child(1) {
    left: 66%;
    top: 10%;
}

section.home-section.project div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.53) rotate(270deg);
}

section.home-section.project div.nenuphars > div:nth-child(2) {
    left: 33%;
    top: 90%;
}

section.home-section.project div.nenuphars > div:nth-child(2) > div > div {
    transform: scale(0.75) rotate(45deg);
}

section.home-section.condominiums div.nenuphars > div:nth-child(1) {
    left: 82%;
    top: 15%;
}

section.home-section.condominiums div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.51) rotate(135deg);
}

section.home-section.condominiums div.nenuphars > div:nth-child(2) {
    left: 90%;
    top: 40%;
}

section.home-section.condominiums div.nenuphars > div:nth-child(2) > div > div {
    transform: scale(0.69);
}

section.home-section.collections div.nenuphars > div:nth-child(1) {
    left: 15%;
    top: 5%;
}

section.home-section.collections div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.95) rotate(315deeg);
}

section.home-section.collections div.nenuphars > div:nth-child(2) {
    left: 69%;
    top: 80%;
}

section.home-section.collections div.nenuphars > div:nth-child(2) > div > div {
    transform: scale(0.9) rotate(90deeg);
}

section.home-section.home-plans div.nenuphars > div:nth-child(1) {
    left: 32%;
    top: 30%;
}

section.home-section.home-plans div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.70) rotate(180deg);
}

section.home-section.features div.nenuphars > div:nth-child(1) {
    left: 45%;
    top: 75%;
}

section.home-section.features div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.70) rotate(225deg);
}

section.home-section.gallery div.nenuphars > div:nth-child(1) {
    left: 66%;
    top: 0%;
}

section.home-section.gallery div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.70) rotate(35deg);
}

section.home-section.nuns-island div.nenuphars > div:nth-child(1) {
    left: 35%;
    top: 0%;
}

section.home-section.nuns-island div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.53) rotate(120deg);
}

div.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min(531px, (531 / 1280) * 100vw), auto);
    grid-column-gap: min(18px, (18 / 1280) * 100vw);
    align-content: space-between;
    color: rgb(var(--color-white));
    text-align: center;
}

div.gallery-grid.grid-5-cols {
    grid-template-columns: 2.8333fr 1fr 1.6667fr 1fr 2.8333fr;
    grid-auto-rows: minmax(min(18px, (18 / 1280) * 100vw), auto);
}

div.gallery-grid > * {
    position: relative;
    padding-bottom: min(18px, (18 / 1280) * 100vw);
}

div.gallery-grid > * > * {
    transition: transform 1.2s cubic-bezier(0, 0.6, 0.4, 1);
}

div.gallery-grid figure,
div.gallery-grid picture,
div.gallery-grid picture img,
div.gallery-grid div.video,
div.gallery-grid div.video-ratio,
div.gallery-grid iframe {
    display: block;
    width: 100%;
    height: 100%;
}

div.gallery-grid:not(.grid-5-cols) picture,
div.gallery-grid:not(.grid-5-cols) picture img {
    height: min(531px, (531 / 1280) * 100vw);
}

div.gallery-grid picture {
    opacity: 0;
}

div.gallery-grid picture.show {
    opacity: 1;
    transition: opacity 0.4s linear;
}

div.gallery-grid picture img {
    position: absolute;
    object-fit: cover;
}

div.gallery-grid figure figcaption {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    color: rgb(var(--color-white));
    font-size: 14px;
    text-align: right;
    padding: 0.5em;
}

div.gallery-grid div.video {
    position: relative;
    overflow: hidden;
}

div.gallery-grid div.video-ratio {
    position: absolute;
}

div.gallery-grid > div.grid-item-widescreen div.video-ratio {
    top: 50%;
    padding-top: 56.25%;
    transform: translateY(-50%);
}

div.gallery-grid > div.grid-item-square div.video-ratio {
    width: 177.78%;
    left: 50%;
    transform: translateX(-50%);
}

div.gallery-grid iframe {
    position: absolute;
    left: 0;
    top: 0;
}

div.gallery-grid div.text-block {
    padding: min(100px, (100 / 1280) * 100vw) 15% min(50px, (50 / 1280) * 100vw) 15%;
}

div.gallery-grid img.logo {
    display: inline-block;
    width: 208px;
    height: auto;
}

.grid-item-landscape,
.grid-item-widescreen,
.grid-item-square {
    grid-row-end: span 18;
}

.grid-item-portrait,
.grid-item-big-square {
    grid-row-end: span 25;
}

.align-self {
    align-self: var(--align-self);
}

.grid-column-start {
    grid-column-start: var(--grid-column-start);
}

.grid-column-end {
    grid-column-end: var(--grid-column-end);
}

.grid-row-start {
    grid-row-start: var(--grid-row-start);
}

.grid-row-end {
    grid-row-end: var(--grid-row-end);
}

section.cta-next-page div.nenuphars > div:nth-child(1) {
    left: 60%;
    top: 50%;
}

section.cta-next-page div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.45) rotate(270deg);
}

section.gallery div.nenuphars > div:nth-child(1) {
    left: 70%;
    top: 10%;
}

section.gallery div.nenuphars > div:nth-child(1) > div > div {
    transform: scale(0.53) rotate(270deg);
}

section.gallery div.nenuphars > div:nth-child(2) {
    left: 17%;
    top: 80%;
}

section.gallery div.nenuphars > div:nth-child(2) > div > div {
    transform: scale(0.94) rotate(45deg);
}

section.gallery div.nenuphars > div:nth-child(3) {
    left: 64%;
    top: 95%;
}

section.gallery div.nenuphars > div:nth-child(3) > div > div {
    transform: scale(0.7) rotate(180deg);
}

div.two-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 72px;
    color: rgb(var(--color-white));
    margin-top: min(100px, (100 / 1280) * 100vw);
    padding: 0 min(200px, (200 / 1280) * 100vw);
}

div.two-cols:after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background: rgb(var(--color-white));
}

div.two-cols.merged {
    grid-template-columns: auto;
}

div.two-cols.merged:after {
    content: none;
}

div.two-cols > div:first-of-type {
    text-align: right;
}

div.two-cols.merged > div {
    text-align: center !important;
}

div.two-cols h3,
div.two-cols p,
div.two-cols ul,
section.plans h3,
section.contact h3 {
    min-height: 0vh;
    font-size: clamp(16px, (18 / 1280) * 100vw, 18px);
    line-height: 1.5556em;
}

div.two-cols ul {
    line-height: 1.2727em;
}

div.two-cols * + p,
div.two-cols * + ul,
section.contact p + p,
section.contact p + * {
    margin-top: 1.5556em;
}

div.two-cols ul li + li {
    margin-top: 0.6em;
}

div.two-cols h3,
section.contact h3 {
    font-weight: 600;
    text-transform: uppercase;
}

section.cta-next-page > div {
    color: rgb(var(--color-white));
    text-align: center;
    padding-top: min(200px, (200 / 1280) * 100vw);
    padding-bottom: min(200px, (200 / 1280) * 100vw);
}


/*************************************
	Plans
 *************************************/


section.plans {
    color: rgb(var(--color-dark-grey));
}

section.subsequent + section.subsequent {
    margin-top: min(100px, (100 / 1280) * 100vw);
}

section.plans > div > div {
    background: rgb(var(--color-white));
}

section.plans div.plans-selectors > form,
section.plans div.plans-unit {
    display: grid;
    position: relative;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: min(40px, (40 / 1280) * 100vw);
    padding: min(20px, (20 / 1280) * 100vw);
}

section.plans div.plans-selectors > form input,
section.plans div.plans-selectors > form textarea,
section.plans div.plans-selectors > form select {
    display: block;
    position: relative;
    width: 100%;
    background: rgb(var(--color-white));
    border: solid 1px rgb(var(--color-dark-grey));
    border-radius: 0;
    color: rgb(var(--color-dark-grey));
    font-family: Ridley, proxima-nova, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1em;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
}

section.plans div.plans-selectors > form label {
    display: block;
    position: relative;
    color: rgb(var(--color-dark-grey));
    font-size: 16px;
    line-height: 24px;
    transform-origin: left top;
    transition: opacity 0.4s, transform 0.4s;
}

section.plans div.plans-selectors > form input[type="button"] {
    display: inline-block;
    width: 38px;
    height: 38px;
    cursor: pointer;
    line-height: 38px;
    margin: 0 10px 10px 0;
    padding: 0;
    transition: background-color 0.4s, color 0.4s;
}

section.plans div.plans-selectors > form input[type="button"].disabled,
section.plans div.plans-selectors > form input[type="button"]:disabled {
    cursor: default;
    opacity: 0.25;
}

section.plans div.plans-selectors > form input[type="button"]:hover:not(:disabled),
section.plans div.plans-selectors > form input[type="button"].active {
    background-color: rgb(var(--color-aqua));
    color: rgb(var(--color-white));
}

section.plans div.plans-selectors > form label.checkbox {
    display: block;
    font-weight: 400;
    margin: 0 0 10px 0;
    padding: 0 0 0 30px;
}

section.plans div.plans-selectors > form input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    font-size: 0;
    margin: 0;
    padding: 0;
}

section.plans div.plans-selectors > form input[type="checkbox"]:before {
    content: "\f00c";
    display: block;
    width: 18px;
    height: 18px;
    background: rgb(var(--color-white));
    border: solid 1px rgb(var(--color-dark-grey));
    color: rgba(var(--color-dark-grey), 0);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    transition-property: width, height, border-width, line-height, background, color;
    transition-duration: 0.4s;
    transition-timing-function: var(--transition-timing-ease-out);
}

section.plans div.plans-selectors > form input[type="checkbox"]:checked:before {
    width: 14px;
    height: 14px;
    border-width: 3px;
    color: rgba(var(--color-dark-grey), 1);
    line-height: 14px;
    transition-delay: 0, 0, 0, 0, 0.1s, 0.2s;
}

section.plans div.plans-selectors > form > div {
    position: relative;
}

section.plans div.plans-selectors > form > div + div:before {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    left: max(-20px, (-20 / 1280) * 100vw);
    top: 0;
    background: rgb(var(--color-dark-grey));
}

section.plans h3 {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.8em;
}


/* -- Plans header -- */


section.plans div.plans-building {
    margin-bottom: min(20px, (20 / 1280) * 100vw);
}

section.plans div.plans-building {
}

.plans-building .building {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: var(--ratio);
    overflow: hidden;
}

.plans-building .building img,
.plans-building .building svg {
    display: none;
    position: absolute;
}

.plans-building .building.horizontal img,
.plans-building .building.horizontal svg,
.plans-building .building.vertical img,
.plans-building .building.vertical svg {
    display: block;
}

.plans-building .building.horizontal img,
.plans-building .building.horizontal svg {
    width: 100%;
    height: auto;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.plans-building .building.vertical img,
.plans-building .building.vertical svg {
    width: auto;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.plans-building .building svg g.floor {
    fill: rgba(var(--color-aqua), 0.50);
    mix-blend-mode: overlay;
    cursor: pointer;
    transition: fill 0.6s, mix-blend-mode 0.6s;
}

.plans-building .building svg g.floor:hover,
.plans-building .building svg g.floor.active {
    fill: rgba(var(--color-aqua), 0.95);
    mix-blend-mode: multiply;
}

.plans-building .building a.bt {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
}


/* -- Selectors -- */

.selectors {
    grid-column: 9 / span 4;
}

.selectors > form {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(4, auto);
    align-content: space-between;
    height: 100%;
}


/* -- Floor plan -- */

.floor-plan > div > div {
    grid-column: 2 / span 10;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 80px;
}

.floor-plan h2 {
    text-align: center;
}

.floor-plan form.select_unit {
    display: none;
}

div#floor-plan svg {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
}

div#floor-plan svg g.units .unit,
div#floor-plan svg g.units .balcony,
div#floor-plan svg g.units .unit-pattern {
    transition: fill 0.6s, stroke 0.6s;
}

div#floor-plan svg g.floor {
    fill: rgb(var(--color-unit-floor));
    stroke: rgb(var(--color-unit-floor-stroke));
}

div#floor-plan svg g.others {
    fill: rgb(var(--color-unit-others));
    stroke: rgb(var(--color-unit-others-stroke));
}

div#floor-plan svg g.others text {
    fill: rgba(var(--color-unit-others-stroke), 0.5);
    stroke: none;
}

div#floor-plan svg g.units .unit,
div#floor-plan svg g.units .balcony {
    fill: rgb(var(--color-unit-unavailable));
}

div#floor-plan svg g.units .balcony {
    fill: rgba(var(--color-unit-unavailable), 0.6);
    stroke: rgb(var(--color-unit-unavailable-stroke));
}

div#floor-plan svg g.units .unit-stroke {
    stroke: rgb(var(--color-unit-unavailable-stroke));
}

div#floor-plan svg g.units .unit-pattern,
div#floor-plan svg g.units .unit-stroke {
    fill: none;
}

div#floor-plan svg text {
    font-family: Ridley, proxima-nova, sans-serif;
    font-weight: 300;
    font-size: 24px;
}

div#floor-plan svg text.text-anchor-end {
    text-anchor: end;
}

div#floor-plan svg g.units text {
    fill: rgb(var(--color-unit-unavailable-stroke));
}


/* -- Floor plan | match -- */

div#floor-plan svg g.units g.unavailable {
    pointer-events: none;
}

div#floor-plan svg g.units g.match .unit,
div#floor-plan svg g.units g.match .balcony,
div#floor-plan svg g.units g.other .unit,
div#floor-plan svg g.units g.other .balcony {
    fill: rgb(var(--color-unit-match));
    stroke: rgb(var(--color-unit-match-stroke));
}

div#floor-plan svg g.units g.other .unit,
div#floor-plan svg g.units g.other .balcony {
    fill: rgb(var(--color-unit-match-active));
}

div#floor-plan svg g.units g.match .balcony,
div#floor-plan svg g.units g.other .balcony {
    fill: rgba(var(--color-unit-match), 0.6);
}

div#floor-plan svg g.units g.other .balcony {
    fill: rgba(var(--color-unit-match-active), 0.6);
}

div#floor-plan svg g.units g.match .unit-stroke,
div#floor-plan svg g.units g.other .unit-stroke {
    stroke: rgb(var(--color-unit-match-stroke));
}

div#floor-plan svg g.units g.match:hover .unit,
div#floor-plan svg g.units g.match.active .unit,
div#floor-plan svg g.units g.other:hover .unit,
div#floor-plan svg g.units g.other.active .unit {
    fill: rgb(var(--color-unit-match-active));
}

div#floor-plan svg g.units g.other:hover .unit,
div#floor-plan svg g.units g.other.active .unit {
    fill: rgb(var(--color-unit-match));
}

div#floor-plan svg g.units g.match:hover .balcony,
div#floor-plan svg g.units g.match.active .balcony,
div#floor-plan svg g.units g.other:hover .balcony,
div#floor-plan svg g.units g.other.active .balcony {
    fill: rgba(var(--color-unit-match-active), 1);
}

div#floor-plan svg g.units g.other:hover .balcony,
div#floor-plan svg g.units g.other.active .balcony {
    fill: rgba(var(--color-unit-match), 1);
}


/* -- Floor plan | other -- */


div#floor-plan svg g.units g.other .unit-pattern {
    fill: url(#pattern);
}

div#floor-plan svg g.units g.match .unit-pattern,
div#floor-plan svg g.units g.other .unit-pattern {
    stroke-width: 16px;
}

div#floor-plan svg g.units g.match .unit-pattern,
div#floor-plan svg g.units g.other .unit-pattern {
    stroke: rgb(var(--color-unit-match));
}


/* -- Floor plan | availability -- */

div#floor-plan svg g.units g.available,
div#floor-plan svg g.units g.soon {
    cursor: pointer;
}

div#floor-plan svg pattern line {
    fill: none;
    stroke: rgb(var(--color-white));
    stroke-width: 2;
    stroke-miterlimit: 10;
    opacity: 0.5;
}

div#floor-plan g#compass > * {
    fill: rgb(var(--color-black));
}

div#floor-plan g#compass > circle {
    fill: rgb(var(--color-white));
}


/* -- Floor plan legend -- */

.floor-plan-legend {
    padding-top: min(20px, (20 / 1280) * 100vw);
}

.floor-plan-legend ul li {
    position: relative;
    font-size: 16px;
    line-height: 1.25em;
    margin: 0 0 0.5em 0;
    padding: 0 0 0 2em;
}

.floor-plan-legend ul li:before,
.floor-plan-legend ul li:after {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    border: solid 1px transparent;
}

.floor-plan-legend ul li:before {
    background-color: rgb(var(--color-unit-unavailable));
    border-color: rgb(var(--color-unit-unavailable-stroke));
}

.floor-plan-legend ul li.match:before,
.floor-plan-legend ul li.other:before {
    background-color: rgb(var(--color-unit-match));
    border-color: rgb(var(--color-unit-match-stroke));
}

.floor-plan-legend ul li.other:after {
    width: 10px;
    height: 10px;
    left: 3px;
    top: 3px;
    background: url("../images/pattern-availability-soon.svg") left top repeat;
}


/* -- Unit -- */


div.plans-unit {
    text-transform: uppercase;
}

div.plans-unit:empty {
    display: none !important;
}

div.unit-collection {
    display: flex;
    justify-content: center;
    position: relative;
    padding-bottom: min(20px, (20 / 1280) * 100vw);
}

div.unit-title,
div.unit-hr {
    grid-column: 1 / -1;
    position: relative;
}

div.unit-hr:before,
div.unit-hr:after {
    content: "";
    display: block;
}

div.unit-hr:before {
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: min(20px, (20 / 1280) * 100vw);
    background: rgb(var(--color-dark-grey));
}

div.unit-collection + div.unit-title:before {
    content: none;
}

div.unit-hr:after {
    height: min(40px, (40 / 1280) * 100vw);
}

div.unit-hr:first-of-type:before {
    top: max(-20px, (-20 / 1280) * 100vw);
}

div.unit-hr:first-of-type:after {
    height: 0;
}

div.unit-area {
    grid-column-end: span 2;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-column-gap: min(20px, (20 / 1280) * 100vw);
    justify-content: start;
}

div.unit-area span:nth-of-type(3n+1) {
    padding-right: min(20px, (20 / 1280) * 100vw);
}

div.unit-area span:nth-of-type(3n+2) {
    text-align: right;
}

div.unit-area span:nth-of-type(3n+2),
div.unit-area span:nth-of-type(3n+3) {
    text-transform: none;
}

div.unit-area span:nth-last-of-type(-n+3) {
    font-weight: 700;
}

div.unit-area hr {
    grid-column: 1 / -1;
    height: 0.5em;
}

div.unit-details {
    grid-row-end: span 2;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    position: relative;
}

div.unit-details:after,
div.unit-cta:after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    right: min(-20px, (-20 / 1280) * 100vw);
    top: 0;
    background: rgb(var(--color-dark-grey));
}

div.unit-details ol {
    display: none;
}

div.unit-details ol.show {
    display: block;
}

div.unit-details ol li {
    position: relative;
    font-size: 16px;
    line-height: 1.25em;
    margin-bottom: 10px;
    padding-left: 60px;
}

div.unit-details ol li:before {
    content: attr(data-num);
    display: block;
    position: absolute;
    width: 38px;
    height: 38px;
    left: 0;
    top: 0;
    background: rgb(var(--color-white));
    border: solid 1px rgb(var(--color-dark-grey));
    color: rgb(var(--color-dark-grey));
    font-size: 18px;
    line-height: 38px;
    text-align: center;
}

section.plans div.floors-nav,
section.plans div.unit-images,
section.plans div.unit-tools {
    grid-column-end: span 2;
}

section.plans div.unit-images img {
    display: none;
    width: 100%;
    height: auto;
}

section.plans div.unit-images img.show {
    display: block;
}

section.plans div.floors-nav {
    display: flex;
    padding-bottom: min(40px, (40 / 1280) * 100vw);
}

section.plans div.floors-nav:empty {
    padding-bottom: 0;
}

section.plans div.floors-nav > div {
    cursor: pointer;
}

section.plans div.floors-nav > div.active {
    font-weight: 600;
    color: rgb(var(--color-aqua));
}

section.plans div.floors-nav > div + div {
    margin-left: min(20px, (20 / 1280) * 100vw);
}

div.unit-cta,
div.unit-tools {
    position: relative;
    padding: min(20px, (20 / 1280) * 100vw) 0;
}

div.unit-cta {
    text-align: center;
}

div.unit-tools {
    display: flex;
    justify-content: space-between;
}

div.unit-tools div,
div.unit-tools a {
    display: inline-block;
    margin-left: 12px;
}

div.unit-tools div + a {
    margin-left: 24px;
}

div.unit-tools a + a {
    margin-left: 12px;
}

section.plans span.fa-stack {
    width: 2em;
    font-size: 18px;
    margin: 0;
}

section.plans span.fa-stack i:nth-of-type(1) {
    color: rgb(var(--color-aqua));
}

section.plans span.fa-stack i:nth-of-type(2) {
    color: rgb(var(--color-white));
}


/*************************************
	Contact
 *************************************/


section.contact div.content {
    display: grid;
    grid-template-columns: 42% 58%;
    color: rgb(var(--color-white));
}

section.contact div.content a.social-network i {
    font-size: 28px;
}

section.contact a.social-network + a.social-network {
    margin-left: 0.5em;
}

form#form_register,
form#form_contact {
    position: relative;
    font-size: 0px;
}

form#form_contact.hide {
    height: 0 !important;
    overflow: hidden;
    transition: height 0.8s var(--transition-timing-ease-in-out);
}

form#form_register input,
form#form_register textarea,
form#form_register select,
form#form_register label,
form#form_register p,
form#form_register button[type="submit"],
form#form_contact input,
form#form_contact textarea,
form#form_contact select,
form#form_contact label,
form#form_contact p,
form#form_contact button[type="submit"] {
    display: block;
    position: relative;
    min-height: 0vh;
    color: rgb(var(--color-blue));
    font-family: Ridley, proxima-nova, sans-serif;
    font-weight: 400;
    font-size: 16px;
    font-size: clamp(16px, (20 / 1920) * 100vw, 20px);
    line-height: 1.4em;
    margin: 0;
    padding: 0.5em 0.75em;
}

form#form_register input,
form#form_register textarea,
form#form_register select,
form#form_contact input,
form#form_contact textarea,
form#form_contact select {
    width: 100%;
    min-height: 0;
    background: rgb(var(--color-grey-93));
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: min-height 0.4s var(--transition-timing-ease-in-out);
}

form#form_contact select {
    background: url("../images/ico-arrow-select.svg") right 17px center no-repeat;
    background-size: 10px 6px;
    padding-right: 50px;
}

form#form_register label,
form#form_contact label {
    transform: translateY(100%);
    transform-origin: left bottom;
    transition: margin 0.4s var(--transition-timing-ease-in-out), transform 0.4s var(--transition-timing-ease-in-out);
    z-index: 2;
}

form#form_register input + label,
form#form_contact input + label {
    margin-top: -1.5em;
    text-align: left;
}

form#form_register label.focus-in,
form#form_contact label.focus-in {
    margin-top: 0;
    transform: scale(0.8) translateY(0);
    transition: color 0.2s 0.4s linear, margin 0.4s var(--transition-timing-ease-in-out), transform 0.4s 0.2s var(--transition-timing-ease-in-out);
}

form#form_register label.focus-in {
    color: rgb(var(--color-blue));
}

form#form_contact label.focus-in {
    color: rgb(var(--color-white));
}

form#form_contact textarea.focus-in {
    min-height: 5.2em;
}

form#form_contact label.checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 1em;
    color: rgb(var(--color-white));
    margin: 2em 0;
    padding: 0;
    transform: none;
}

form#form_contact input[type="checkbox"] {
    align-self: start;
    width: auto;
    height: auto;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    font-size: 0;
    margin: 0;
    padding: 0;
}

form#form_contact input[type="checkbox"]:before {
    content: "\f00c";
    display: block;
    width: 38px;
    width: clamp(38px, (48 / 1920) * 100vw, 48px);
    height: 38px;
    height: clamp(38px, (48 / 1920) * 100vw, 48px);
    min-height: 0vh;
    background: transparent;
    color: rgba(var(--color-blue), 0);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    font-size: clamp(16px, (20 / 1920) * 100vw, 20px);
    line-height: 38px;
    line-height: clamp(38px, (48 / 1920) * 100vw, 48px);
    text-align: center;
    transition: color 0.4s linear;
}

form#form_contact input[type="checkbox"]:checked:before {
    color: rgba(var(--color-blue), 1);
}

form#form_register label[for="postal_code"],
form#form_register input[name="postal_code"],
form#form_contact label[for="postal_code"],
form#form_contact input[name="postal_code"] {
    display: none;
}

form#form_register button[type="submit"],
form#form_contact button[type="submit"] {
    display: inline-block;
    background: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    text-transform: uppercase;
}

form#form_register button[type="submit"]:disabled,
form#form_contact button[type="submit"]:disabled {
    background: rgba(var(--color-blue), 0.5);
}

form#form_register button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 1em;
}

form#form_register input:-webkit-autofill,
form#form_register input:-webkit-autofill:hover,
form#form_register input:-webkit-autofill:focus,
form#form_register input:-webkit-autofill:active,
form#form_contact input:-webkit-autofill,
form#form_contact input:-webkit-autofill:hover,
form#form_contact input:-webkit-autofill:focus,
form#form_contact input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgb(var(--color-grey-93)) inset !important;
    box-shadow: 0 0 0 30px rgb(var(--color-grey-93)) inset !important;
    -webkit-text-fill-color: rgb(var(--color-blue));
    color: rgb(var(--color-blue));
}

form#form_contact p,
form#form_register p {
    padding: 0;
}

form#form_contact p small,
form#form_register p small {
    font-size: 0.8em;
    line-height: 1.2em;
}

form p:not(:last-child) a {
    white-space: nowrap;
}

form input.error,
form p.error {
    color: #FF0000;
}

input.error {
    background: #f2bebe;
}

.takk {
    display: block;
    position: relative;
    animation: kf-fade-in 0.4s linear both;
}

section.map div.content {
    padding-top: min(100px, (100 / 1280) * 100vw);
    padding-bottom: min(100px, (100 / 1280) * 100vw);
}

div#map-canvas {
    width: 100%;
    height: 630px;
}


/*************************************
	Register
 *************************************/


div.register {
    bottom: 0;
    display: block;
    position: fixed;
    right: 615px;
    background: rgba(var(--color-grey-93), 0.9);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    margin-top: min(18px, (18 / 1280) * 100vw);
    /*padding: min(18px, (18 / 1280) * 100vw) min(36px, (36 / 1280) * 100vw);*/
    padding: 0;
    opacity: 0;
    transform: translateX(min(590px, (590 / 1280) * 100vw));
    transition: top 0.6s, opacity 0.2s;
    z-index: 3;
}

div.register h2 {
    padding: 1rem;
}

@media screen and (max-width: 1280px) {
    div.register {
        right: 49%;
    }
}

body.nav-open div.register {
    z-index: 3;
}

div.register.fadein {
    opacity: 1;
}

div.register h2 {
    color: rgb(var(--color-blue));
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    padding-left: 1.5em;
}

/* 2024-10-16: disable down caret since now 'Make an appointment' is not a dropdown but button instead */
div.register h2:after {
    /*content: "\f078";*/
    /*display: inline-block;*/
    /*font-family: "Font Awesome 5 Free";*/
    /*font-weight: 900;*/
    /*margin-left: 1em;*/
}

div.register.show h2:after {
    /*content: "\f077";*/
}

div.register form,
div.register .takk {
    display: none;
}

div.register.show form,
div.register.show .takk {
    display: block;
    width: auto;
    border-top: solid 1px rgb(var(--color-blue));
    margin-top: min(18px, (18 / 1280) * 100vw);
    padding-bottom: min(18px, (18 / 1280) * 100vw);
}

div.register .takk {
    color: rgb(var(--color-blue));
    padding-top: min(18px, (18 / 1280) * 100vw);
}


/*************************************
	Section privacy
 *************************************/


section.privacy {
    color: rgb(var(--color-white));
    padding-top: clamp(100px, (230 / 1366) * 100vw, 230px);
    padding-bottom: clamp(100px, (230 / 1366) * 100vw, 230px);
}

section.privacy div.content {
    position: relative;
    text-align: left;
}

section.privacy h1 {
    display: block;
    text-align: center;
}

/*section.privacy h1 {
	min-height: 0vh;
    font-size: clamp(24px, (68 / 1366) * 100vw, 68px);
    letter-spacing: 0.05em;
    line-height: 1em;
    margin-bottom: 0.5em;
    text-align: center;
    text-transform: uppercase;
}

section.privacy h2 {
	min-height: 0vh;
    font-size: clamp(18px, (48 / 1366) * 100vw, 48px);
    letter-spacing: 0.05em;
    line-height: 1em;
    text-transform: uppercase;
}*/

section.privacy p,
section.privacy ul {
    font-size: 16px;
    line-height: 1.4em;
}

section.privacy * + h1,
section.privacy * + h2,
section.privacy * + p {
    margin-top: 1em;
}

section.privacy p + p {
    margin-top: 1.4em;
}

section.privacy ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

section.privacy li {
    display: list-item;
    list-style: disc;
}

section.privacy li + li {
    margin-top: 0.7em;
}

section.privacy a {
    text-decoration: underline;
    word-break: break-all;
}


/*************************************
	Footer
 *************************************/


footer {
    background: rgb(var(--color-black));
    z-index: 2;
}

footer > div {
    display: grid;
    position: relative;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: min(25px, (25 / 1280) * 100vw);
    grid-row-gap: min(15px, (15 / 1280) * 100vw);
    max-width: 1280px;
    margin: 0 auto;
    padding: min(25px, (25 / 1280) * 100vw) min(100px, (100 / 1280) * 100vw) 0 min(100px, (100 / 1280) * 100vw);
}

footer h2,
footer p {
    display: block;
    min-height: 0vh;
    color: rgb(var(--color-white));
    font-size: clamp(10px, (12 / 1280) * 100vw, 12px);
    font-size: 12px;
    line-height: 1.3333em;
}

footer i {
    font-size: 20px;
}

footer h2 {
    font-weight: 600;
    text-transform: uppercase;
}

footer p + p {
    margin-top: 1.3333em;
}

footer small {
    font-size: inherit;
}

footer a.social-network + a.social-network {
    margin-left: 1em;
}

footer > div > div {
    position: relative;
}

footer div.logo {
    /*grid-column: 1 / -1;*/
}

footer div.logo img {
    width: min(208px, (208 / 1280) * 100vw);
    height: auto;
}

footer div.address,
footer div.hours,
footer div.copyright {
    padding-bottom: min(25px, (25 / 1280) * 100vw);
}

footer div.address:before,
footer div.hours:before,
footer div.hours:after,
footer div.copyright:before {
    content: "";
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
    transform-origin: center center;
}

footer div.address:before,
footer div.hours:before,
footer div.copyright:before {
    /* background-image: url("../images/img-nenuphar-blank-blue.png"); */
}

footer div.address:before {
    width: 112px;
    height: 112px;
    left: -154px;
    top: -32px;
}

footer div.hours:before,
footer div.hours:after {
    width: 136px;
    height: 136px;
    left: -25px;
    top: -176px;
    transform: rotate(90deg);
}

/* disable the floating nenuphar above hours in footer */
footer div.hours:after {
    /*background-image: url("../images/img-nenuphar-flower-blue.png");*/
    /*background-size: 70% auto;*/
    /*transform: rotate(0);*/
}

footer div.copyright:before {
    width: 110px;
    height: 110px;
    right: 0;
    bottom: -45px;
    transform: rotate(-90deg);
}

footer div.copyright {
    grid-column-end: span 2;
    text-transform: uppercase;
    overflow: hidden;
}


/*************************************
	Lightbox
 *************************************/


#lightbox, #lightbox .lightbox_bckg {
    position: fixed;
    display: none;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

#lightbox {
    z-index: 4;
}

#lightbox.show {
    display: block;
    animation: kf-fade-in 0.2s linear 0s forwards;
}

#lightbox .lightbox_bckg {
    display: block;
    background: rgba(var(--color-black), 0.75);
}

#lightbox button.bt-close {
    position: absolute;
    width: 60px;
    height: 60px;
    right: 30px;
    top: 30px;
    color: rgb(var(--color-white));
    font-size: 32px;
    line-height: 60px;
    text-align: center;
}

#lightbox button.bt-close:after {
    content: "\2715";
}

#lightbox div.lightbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#lightbox div.lightbox-content {
    display: block;
    position: relative;
    box-shadow: 0 0 100rem rgba(var(--color-black), 0.9);
    pointer-events: auto;
}

#lightbox div.lightbox-content.gallery {
    width: calc(100vw - 60px);
    height: calc(100vh - 60px);
    background: rgba(var(--color-black), 0.85);
    padding: 30px;
}

#lightbox div.lightbox-content.gallery iframe,
#lightbox div.lightbox-content.gallery img {
    width: 100%;
    height: 100%;
    animation: kf-fade-in 0.8s linear 0s forwards;
}

#lightbox div.lightbox-content.gallery img {
    object-fit: contain;
}

#lightbox div.lightbox-content.gallery div.ctrl_arr {
    display: block;
    position: absolute;
    right: 30px;
    bottom: 30px;
}

#lightbox div.lightbox-content.gallery div.ctrl_arr button {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
    background: rgba(var(--color-white), 0.8);
    opacity: 0.2;
    pointer-events: none;
    transform: none;
}

#lightbox div.lightbox-content.gallery div.ctrl_arr button[data-dir="next"] {
    margin-left: 1px;
}

#lightbox div.lightbox-content.gallery div.ctrl_arr button:after {
    content: "\f060";
    color: rgb(var(--color-black));
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    transition: color 0.4s;
}

#lightbox div.lightbox-content.gallery div.ctrl_arr button[data-dir="next"]:after {
    content: "\f061";
}

#lightbox div.lightbox-content.gallery div.ctrl_arr button.show {
    opacity: 1;
    pointer-events: auto;
}


/****  Open House  ****/


#lightbox div.lightbox-content.lb-open-house {
    width: min(980px, (980 / 520) * 95vh);
    height: min(520px, 95vh);
}

#lightbox div.lightbox-content.lb-open-house img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#lightbox .lightbox-content.lb-open-house button.bt-close {
    right: 6px;
    top: 6px;
}


/****  Holidays 2021  ****/


#lightbox .lightbox-content.lb-holidays-2021,
#lightbox .lightbox-content.lb-holidays-2021 img {
    width: 980px;
    height: 520px;
    object-fit: cover;
}

#lightbox .lightbox-content.lb-holidays-2021 {
    box-shadow: none;
}

#lightbox .lightbox-content.lb-holidays-2021 button.bt-close {
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translateY(-100%);
}

@media screen and (max-width: 980px) and (orientation: landscape) {
    #lightbox .lightbox-content.lb-holidays-2021,
    #lightbox .lightbox-content.lb-holidays-2021 img {
        width: calc((980 / 1024) * 100vw);
        height: calc((520 / 1024) * 100vw);
    }
}

@media screen and (max-width: 980px) and (orientation: portrait) {
    #lightbox .lightbox-content.lb-holidays-2021,
    #lightbox .lightbox-content.lb-holidays-2021 img {
        width: calc((490 / 980) * 85vh);
        height: 85vh;
    }
}


/****  Holidays 2023  ****/


#lightbox .lightbox-content.lb-holidays-2023 {
    box-shadow: none;
}

#lightbox .lightbox-content.lb-holidays-2023 button.bt-close {
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translateY(-100%);
}

@media screen and (orientation: landscape) {
    #lightbox .lightbox-content.lb-holidays-2023,
    #lightbox .lightbox-content.lb-holidays-2023 img {
        width: min(980px, 85vw);
        height: min(520px, (520 / 980) * 85vw);
    }
}

@media screen and (orientation: portrait) {
    #lightbox .lightbox-content.lb-holidays-2023,
    #lightbox .lightbox-content.lb-holidays-2023 img {
        width: min(490px, (490 / 980) * 75vh);
        height: min(980px, 75vh);
    }
}


/****  Open House June 2022  ****/


@media screen and (max-width: 980px) {
    #lightbox div.lightbox-content.lb-open-house {
        width: min(490px, (490 / 980) * 90vh);
        height: min(980px, 90vh);
    }
}

#lightbox .lightbox-content.lb-open-house-june-2022 {
    box-shadow: none;
}

#lightbox .lightbox-content.lb-open-house-june-2022 button.bt-close {
    position: absolute;
    width: clamp(30px, (60 / 1920) * 100vw, 60px);
    height: clamp(30px, (60 / 1920) * 100vw, 60px);
    right: 0px;
    top: 0px;
    font-size: clamp(24px, (48 / 1920) * 100vw, 48px);
    line-height: clamp(30px, (60 / 1920) * 100vw, 60px);
}

@media screen and (orientation: landscape) {
    #lightbox .lightbox-content.lb-open-house-june-2022,
    #lightbox .lightbox-content.lb-open-house-june-2022 img {
        width: min(1150px, (1150 / 1920) * 100vw);
        height: min(575px, (575 / 1920) * 100vw);
    }
}

@media screen and (orientation: portrait) {
    #lightbox .lightbox-content.lb-open-house-june-2022,
    #lightbox .lightbox-content.lb-open-house-june-2022 img {
        width: min(575px, (575 / 1150) * 85vh);
        height: min(1150px, 85vh);
    }
}


/****  Open House June 2024  ****/


#lightbox .lightbox-content.lb-open-house-june-2024 {
    box-shadow: none;
}

#lightbox .lightbox-content.lb-open-house-june-2024 button.bt-close {
    position: absolute;
    width: clamp(30px, (60 / 1920) * 100vw, 60px);
    height: clamp(30px, (60 / 1920) * 100vw, 60px);
    right: 0px;
    top: 0px;
    font-size: clamp(24px, (48 / 1920) * 100vw, 48px);
    line-height: clamp(30px, (60 / 1920) * 100vw, 60px);
}

@media screen and (orientation: landscape) {
    #lightbox .lightbox-content.lb-open-house-june-2024,
    #lightbox .lightbox-content.lb-open-house-june-2024 img {
        width: min(1150px, (1150 / 1920) * 100vw);
        height: min(520px, (520 / 1920) * 100vw);
    }
}

@media screen and (orientation: portrait) {
    #lightbox .lightbox-content.lb-open-house-june-2024,
    #lightbox .lightbox-content.lb-open-house-june-2024 img {
        width: min(575px, (575 / 1150) * 85vh);
        height: min(1140px, 85vh);
    }
}


@keyframes kf-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    /*div.banner,
    div.banner-bckg {
        min-height: 0vh;
        font-size: min(24px, (16 / 375) * 100vw);
        padding: min(10px, (10 / 375) * 100vw);
    }*/
    header div.banner {
        min-height: 0vh;
        /*font-size: min(24px, (16 / 375) * 100vw);*/
        font-size: 12px;
        font-size: min(24px, (12 / 375) * 100vw);
        letter-spacing: 0.1em;
        /*padding: min(10px, (10 / 375) * 100vw);*/
        padding: min(8px, (8 / 375) * 100vw);
    }

    header nav ul {
        /* handled in menu.css now and we removed the useless padding */
        /*padding: min(20px, (20 / 375) * 100vw) min(80px, (40 / 375) * 100vw);*/
        /*padding: min(16px, (16 / 375) * 100vw) min(80px, (40 / 375) * 100vw);*/
    }

    body:not(.nav-open) header nav ul li {
        font-size: 18px;
    }

    body:not(.nav-open) header nav ul li.lang a {
        line-height: 1em;
    }

    /*header nav ul li.home a {
        width: min(208px, (138 / 375) * 100vw);
        height: min(54px, (((54 / 208) * 138) / 375) * 100vw);
    }*/
    header nav ul li.home a img {
        width: min(208px, (138 / 375) * 100vw);
    }

    header div.ico {
        left: min(80px, (40 / 375) * 100vw);
        /*top: min(36px, (((((27 / 208) * 138) + 20) / 375) * 100vw) - 11px);*/
        top: min(36px, (((((27 / 208) * 138) + 16) / 375) * 100vw) - 11px);
        transform: none;
    }


    /*************************************
        Sections
     *************************************/
    section > div {
        padding: 0 min(80px, (40 / 375) * 100vw);
    }

    div.nenuphar > div > div > div {
        width: min(327px, (142 / 375) * 100vw);
        height: min(342px, (149 / 375) * 100vw);
    }

    section.home-title div.content {
        padding-right: 0;
        padding-left: 0;
    }

    section.home-title div.nenuphars > div:nth-child(1) {
        left: calc(50vw - ((80 / 375) * 100vw));
        top: calc(50vh - ((100 / 375) * 100vw));
    }

    section.home-title div.nenuphars > div:nth-child(2) {
        left: calc(50vw + ((100 / 375) * 100vw));
        top: calc(50vh + ((80 / 375) * 100vw));
    }

    section.home-title div.nenuphars > div:nth-child(3) {
        left: calc(50vw - ((150 / 375) * 100vw));
        top: calc(50vh + ((150 / 375) * 100vw));
    }

    section.home-section div.content {
        grid-gap: min(40px, (40 / 375) * 100vw);
        text-align: center;
        padding-bottom: min(80px, (60 / 375) * 100vw);
    }

    section.home-section div.content > div:nth-child(1),
    section.home-section div.content > div:nth-child(2),
    section.home-section:nth-of-type(even) div.content > div:nth-child(1),
    section.home-section:nth-of-type(even) div.content > div:nth-child(2) {
        grid-column: 1 / -1;
        grid-row-start: auto;
    }

    section.header div.content {
        padding: min(80px, (40 / 375) * 100vw) min(160px, (40 / 375) * 100vw);
    }

    section.home-section div.content > div:nth-child(1),
    section.home-section:nth-of-type(even) div.content > div:nth-child(2) {
        transform: translateX(100vw);
    }

    section.home-section div.content > div:nth-child(2),
    section.home-section:nth-of-type(even) div.content > div:nth-child(1) {
        transform: translateX(-100vw);
    }

    section.home-section.show div.content > div,
    section.home-section.show:nth-of-type(even) div.content > div {
        transform: translateX(0);
    }

    section.home-section div.content > div h3,
    section.home-section div.content > div p {
        padding: 0;
    }

    section.home-section p:last-of-type {
        max-height: 1.2727em;
        margin-top: 1.2727em;
        overflow: hidden;
        transition: none;
    }

    section.header div.header-flower {
        width: min(150px, (150 / 375) * 100vw);
        height: min(45px, (45 / 375) * 100vw);
    }

    div.gallery-grid {
        grid-gap: min(40px, (40 / 375) * 100vw);
    }

    div.gallery-grid.grid-5-cols {
        grid-auto-rows: auto;
    }

    div.gallery-grid > * {
        grid-column: 1 / -1;
        padding-bottom: 0;
    }

    div.gallery-grid a {
        pointer-events: none;
    }

    div.gallery-grid:not(.grid-5-cols) picture,
    div.gallery-grid:not(.grid-5-cols) picture img {
        height: auto;
    }

    div.gallery-grid picture {
        padding-top: 133.33%;
    }

    div.gallery-grid picture.show {
        padding-top: 0;
    }

    div.gallery-grid picture img {
        position: relative;
    }

    div.gallery-grid div.video-ratio {
        position: relative;
        padding-top: 56.25%;
    }

    div.gallery-grid > div.grid-item-widescreen div.video-ratio,
    div.gallery-grid > div.grid-item-square div.video-ratio {
        width: 100%;
        left: 0;
        top: 0;
        transform: none;
    }

    div.gallery-grid div.text-block {
        padding: min(40px, (40 / 375) * 100vw) 0;
    }

    .grid-item-landscape,
    .grid-item-widescreen,
    .grid-item-square {
        grid-row-end: auto;
    }

    .grid-item-portrait,
    .grid-item-big-square {
        grid-row-end: auto;
    }

    .grid-column-start {
        grid-column-start: auto;
    }

    .grid-column-end {
        grid-column-end: auto;
    }

    .grid-row-start {
        grid-row-start: auto;
    }

    .grid-row-end {
        grid-row-end: auto;
    }

    div.two-cols {
        grid-template-columns: auto;
        grid-gap: min(80px, (80 / 375) * 100vw);
        padding: 0 min(80px, (40 / 375) * 100vw);
    }

    div.two-cols:after {
        content: none;
    }

    div.two-cols > div,
    div.two-cols > div:first-of-type {
        position: relative;
        text-align: center;
    }

    div.two-cols > div:first-of-type:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        bottom: max(-40px, (-40 / 375) * 100vw);
        background: rgb(var(--color-white));
    }


    /*************************************
        Plans
     *************************************/
    section.plans > div {
        padding: 0 min(40px, (20 / 375) * 100vw);
    }

    section.plans div.plans-selectors > form,
    section.plans div.plans-unit {
        padding: min(40px, (20 / 375) * 100vw);
    }

    section.plans div.plans-selectors > form {
        grid-gap: min(40px, (40 / 375) * 100vw);
    }

    section.plans div.plans-selectors > form > div {
        grid-column: 1 / -1;
    }

    section.plans div.plans-selectors > form > div + div:before,
    div.unit-collection:before,
    div.unit-title:before,
    div.unit-details:before,
    div.floors-nav:before {
        content: "";
        display: block;
        position: absolute;

        width: 100%;
        height: 1px;
        left: 0;
        top: max(-20px, (-20 / 375) * 100vw);

        background: rgb(var(--color-dark-grey));
    }

    section.plans div.plans-unit {
        grid-gap: min(20px, (20 / 375) * 100vw);
    }

    div.unit-collection + div.unit-title:before {
        content: none;
    }

    div.unit-title h3 {
        margin-bottom: 0;
    }

    div.unit-details {
        margin-top: min(20px, (20 / 375) * 100vw);
    }

    section.plans div.plans-building {
        display: none;
    }

    div.plans-unit > div {
        position: relative;
        grid-column: 1 / -1 !important;
    }

    div.unit-collection {
        padding: 0;
    }

    div.unit-collection img {
        width: min(234px, 50vw);
        height: auto;
    }

    div.unit-hr {
        display: none;
    }

    div.unit-details:after,
    div.unit-cta:after {
        content: none;
    }

    div.unit-cta {
        padding: min(20px, (20 / 375) * 100vw) 0;
    }

    div.unit-tools {
        flex-flow: column nowrap;
        align-items: center;
        text-align: center;
        padding: 0 0 min(20px, (20 / 375) * 100vw) 0;
    }

    div.unit-tools div.share > div {
        display: block;
        padding: min(40px, (40 / 375) * 100vw) 0 min(20px, (20 / 375) * 100vw) 0;
    }

    div.unit-tools div,
    div.unit-tools a,
    div.unit-tools div + a {
        margin-left: 0;
    }

    section.plans div.floors-nav {
        grid-row-start: 6;
        flex-flow: column nowrap;
        padding: 0;
    }

    section.plans div.floors-nav:empty {
        display: none;
    }

    section.plans div.floors-nav > div + div {
        margin-top: min(10px, (10 / 375) * 100vw);
        margin-left: 0;
    }


    /*************************************
        Contact
     *************************************/
    section.contact div.content {
        grid-row-gap: min(80px, (40 / 375) * 100vw);
    }

    section.contact div.content > div {
        grid-column: 1 / -1;
    }

    section.contact div.content > div:nth-of-type(2) {
        grid-row-start: 1;
    }

    section.map div.content {
        padding-top: min(80px, (40 / 375) * 100vw);
        padding-bottom: min(80px, (40 / 375) * 100vw);
    }

    div#map-canvas {
        width: 100%;
        height: max(100vw - 160px, 100vw - (80 / 375) * 100vw);
    }


    /*************************************
        Register
     *************************************/
    div.register {
        position: sticky;
        top: auto !important;
        bottom: min(20px, (20 / 375) * 100vw);
        width: calc(100vw - ((40 / 375) * 100vw));
        left: min(40px, (20 / 375) * 100vw);
        margin-bottom: min(20px, (20 / 375) * 100vw);
        padding: min(20px, (20 / 375) * 100vw);
        transform: none;
    }

    div.register h2:after {
        /*content: "\f077";*/
    }

    div.register.show h2:after {
        content: "\f078";
    }

    div.register.show form,
    div.register .takk {
        padding-bottom: 0;
    }

    div.register .takk {
        margin-top: min(20px, (20 / 375) * 100vw);
        padding-top: min(20px, (20 / 375) * 100vw);
    }


    /*************************************
        Footer
     *************************************/
    footer > div {
        grid-column-gap: 0;
        grid-row-gap: min(20px, (20 / 375) * 100vw);
        overflow: hidden;
        padding: min(40px, (40 / 375) * 100vw) min(80px, (40 / 375) * 100vw);
    }

    footer h2,
    footer p {
        font-size: 16px;
    }

    footer small {
        display: inline-block;
        /*font-size: 0.75em;*/
        font-size: 0.875em;
        line-height: 1.3333em;
    }

    footer i {
        font-size: 32px;
    }

    footer > div > div {
        grid-column: 1 / -1 !important;
    }

    footer div.logo {
        padding-bottom: min(20px, (20 / 375) * 100vw);
    }

    footer div.logo img {
        width: min(208px, (172 / 375) * 100vw);
    }

    footer div.address,
    footer div.hours,
    footer div.copyright {
        padding-bottom: 0;
    }

    footer div.address:before {
        width: min(112px, (90 / 375) * 100vw);
        height: min(112px, (90 / 375) * 100vw);
        left: auto;
        right: 0;
        top: 0;
        transform: translate(30%, -100%);
    }

    footer div.hours:before,
    footer div.hours:after {
        width: min(136px, (108 / 375) * 100vw);
        height: min(136px, (108 / 375) * 100vw);
        left: auto;
        right: 0;
        top: 0;
        transform: translate(66%, -50%);
    }

    footer div.copyright:before {
        width: min(110px, (88 / 375) * 100vw);
        height: min(110px, (88 / 375) * 100vw);
        right: auto;
        left: 0;
        bottom: 0;
        transform: translate(-75%, 90%);
        transform-origin: center;
    }

    footer div.copyright {
        overflow: visible;
    }
}

.body-preload,
.preload {
    display: none !important;
}

/********************************************
 * Home popup
 ********************************************/

.swal2-popup.home-popup.special {
    background-color: #fff;
    width: 750px;
}

.swal2-popup.home-popup.special2 {
    background-color: #12264B;
    height: 610px !important;
}

.swal2-popup.home-popup {
    /*background-color: #022863;*/
    background-color: rgb(var(--color-dark-grey));
    padding: 0;
    width: 660px;
    height: 440px;
    max-width: 100%;
    max-height: 100%;
}

.swal2-popup.home-popup .swal2-html-container {
    padding: 0;
}

/* target popup wrapper if it has the 'home-popup-img' child element */
.swal2-popup.home-popup .swal2-html-container:has(> .home-popup-img) {
    height: 500px !important;
}

#home-popup {
    display: flex;
}

#home-popup .popup__left {
    flex-grow: 1;
    width: 100%;
}

#home-popup.special .popup__left img {
    width: 100%;
    max-width: 375px;
}

#home-popup.special2 {
    flex-wrap: wrap !important;
}

#home-popup .popup__left img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    max-width: 330px;
    max-height: 440px;
    border-radius: 5px 0 0 5px;
}

#home-popup .popup__right {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
}

#home-popup.special .popup__title {
    color: #022863;
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
    font-size: 25px;
}

#home-popup .popup__title {
    color: white;
    text-transform: uppercase;
    padding: 2rem 3rem;
    font-weight: 600;
}

#home-popup.special .popup__date {
    color: #022863;
    text-transform: uppercase;
    padding-left: 1rem;
    padding-right: 1rem;
}

#home-popup.special .popup__desc {
    color: #022863;
    padding-top: 1.5rem;
    padding-bottom: 0;
    font-weight: 600;
    font-size: 16px !important;
    text-transform: uppercase;
}

#home-popup .popup__desc {
    color: white;
    padding: 0 2rem 3rem;
}

#home-popup.special .popup__unit {
    margin: 0.75rem auto;
    padding: 0.5rem;
    color: #022863;
    border: 2px solid #022863;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    width: max-content;
}

#home-popup.special .popup__unit_desc {
    color: #022863;
    font-size: 14px;
}

#home-popup.special .popup__cta {
    background-color: #022863;
    color: white;
    margin-top: 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
}

#home-popup .popup__cta {
    background-color: white;
    color: black;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-weight: 600;
    width: max-content;
    cursor: pointer;
}

#home-popup.special .popup__cta:hover {
    background-color: rgba(2, 40, 99, 0.25);
    color: #022863;
}

#home-popup .popup__cta:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: white;
}

#home-popup .popup__target {
    color: white;
    text-transform: uppercase;
    padding-bottom: 2rem;
}

#home-popup.special2 img {
    width: 100% !important;
}

#home-popup.special2 img.gif {
    padding-top: 1.5rem;
}

#home-popup.special2 img.bg {
    padding: 0 2.5rem;
}

#home-popup.special2 .sub-section {
    padding: 0 2.5rem;
    margin-left: auto;
    margin-right: auto;
}

#home-popup.special2 .popup__date {
    color: white;
    font-weight: bold;
    font-size: 24px;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

@media screen and (max-width: 600px) {
    .swal2-popup.home-popup {
        height: 660px;
    }
    .swal2-popup.home-popup:has(.home-popup-img) {
        /*height: 100% !important;*/
        height: auto !important;
    }
    .swal2-popup.home-popup .swal2-html-container:has(> .home-popup-img) {
        height: auto !important;
    }

    #home-popup.special2 img, #home-popup.special2 .sub-section {
        padding: 0 !important;
    }

    #home-popup:not(.special2) {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    #home-popup .popup__right {
        padding-top: 2rem;
    }

    #home-popup .popup__left {
        max-width: 100%;
    }

    #home-popup.special .popup__left img {
        height: 300px;
        max-width: 100%;
    }

    #home-popup .popup__left img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0 0 5px 5px;
        object-fit: cover;
    }
}