@charset "UTF-8";

:root {
	--yellow-phase2: 246,140,91;
	
	--color-black: 0,0,0;
	--color-dark-grey: 68,75,79;
	--color-lavender: 253,186,84;
	--color-light-grey: 204,204,202;
	--color-medium-grey: 153,153,147;
    --color-orange: 250,166,51;
    --color-orange-flash: 255,119,14;
    --color-orange-dark: 228,91,38;
    --color-red: 215,34,41;
    --color-warm-orange: 255,214,139;
	--color-white: 255,255,255;
	
	--transition-duration-bt: 0.4s;
	--transition-timing-ease-in-out: cubic-bezier(0.5,0,0.5,1);
}

html {
	height: 100%;
	font-family: 'Muli', sans-serif;
}

body {
	width: 100%;
	height: 100%;
    background: rgb(var(--color-dark-grey));
	overflow-x: hidden;
	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;
}

ul, li {
	list-style: none;
}

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

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

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

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

*:focus {
    outline: 0;
}


/*************************************
	Button
 *************************************/


.bt, 
.ctrl-arr button, 
button[type="submit"], 
form label.checkbox span:before {
	display: inline-block;
	position: relative;
	min-width: 3em;
	min-height: 3em;
	border: solid 2px rgba(var(--color-white), 0.6);
	font-size: clamp(16px, (20 / 1920) * 100vw, 20px);
	line-height: calc(3em - 4px);
	text-align: center;
	text-transform: uppercase;
	margin-left: -2px;
	padding: 0 0.75em;
	transition: background-color var(--transition-duration-bt) 0.2s, background-image var(--transition-duration-bt) 0.2s, border-color var(--transition-duration-bt), color var(--transition-duration-bt) 0.2s, transform var(--transition-duration-bt);
}

.bt:first-of-type, 
.ctrl-arr button:first-of-type {
	margin-left: 0;
}

.bt span {
	display: block;
	position: absolute;
	right: -60px;
	top: 50%;
	color: rgb(var(--color-white));
	white-space: nowrap;
	transform: translate(100%,-50%);
	transform-origin: left top;
	transition: top var(--transition-duration-bt), right var(--transition-duration-bt), bottom var(--transition-duration-bt);
}

.bt span:before, 
.bt span:after, 
form label.checkbox span:after {
	content: "";
	display: block;
	position: absolute;
	width: 60px;
	height: 2px;
	left: -70px;
	top: 50%;
	background: rgba(var(--color-white), 1);
	border-radius: 1px;
	transform: translateY(-50%);
	transform-origin: right top;
	transition: transform var(--transition-duration-bt), background-color var(--transition-duration-bt) 0.2s;
}

.bt span:after {
	left: auto;
	right: -70px;
	transform: scaleX(0) translateY(-50%);
	transform-origin: left top;
}

.bt:hover, 
.ctrl-arr button:hover:not([disabled="disabled"]), 
button[type="submit"]:hover {
	background-color: rgb(var(--color-white));
	color: rgb(var(--color-dark-grey));
}

.bt:hover span {
	right: -10px;
}

.bt:hover span:before {
	transform: scaleX(0) translateY(-50%);
}

.bt:hover span:after {
	transform: scaleX(1) translateY(-50%);
}

.bt.rotate90deg span {
	right: auto;
	top: auto;
	left: 50%;
	bottom: -60px;
	transform: rotate(90deg) translate(0, 50%);
	transform-origin: left bottom;
}

.bt.rotate270deg span {
	right: auto;
	left: 50%;
	top: -60px;
	transform: rotate(270deg) translate(0, -50%);
	transform-origin: left top;
}

.bt.rotate90deg:hover span {
	right: auto;
	bottom: -10px;
}

.bt.rotate270deg:hover span {
	right: auto;
	top: -10px;
}

.bt:active {
	transform: translateY(25%);
}

.bt.invert {
	border-color: rgba(var(--color-dark-grey), 0.6);
}

.bt.invert span {
	color: rgb(var(--color-dark-grey));
}

.bt.invert span:before,
.bt.invert span:after {
	background: rgba(var(--color-dark-grey), 1);
}

.bt.invert:hover {
	background-color: rgb(var(--color-dark-grey));
	color: rgb(var(--color-white));
}

.bt.contrast {
	background-color: rgba(var(--color-dark-grey), 1);
	border-color: rgba(var(--color-dark-grey), 1);
	color: rgb(var(--color-white));
}

.bt.contrast:hover {
	background-color: rgba(var(--color-white), 0.5);
	color: rgb(var(--color-dark-grey));
}

.bt.margin-right-square {
	margin-right: 60px;
}

.bckg-lavender .ctrl-arr button {
	border-color: rgba(var(--color-dark-grey), 0.6);
}

.bckg-lavender .ctrl-arr button:hover:not([disabled="disabled"]) {
	background-color: rgb(var(--color-dark-grey));
	color: rgb(var(--color-white));
}

.bckg-white button[type="submit"], 
.bckg-white form label.checkbox span:before {
	border-color: rgba(var(--color-dark-grey), 0.6);
}

.bckg-white form label.checkbox span:after {
	background: rgba(var(--color-dark-grey), 1);
}

.bckg-white .ctrl-arr button:hover:not([disabled="disabled"]), 
.bckg-white button[type="submit"]:hover {
	background-color: rgb(var(--color-dark-grey));
	color: rgb(var(--color-white));
}


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


 .ticker {
	display: flex;
	position: fixed;
	left: 0;
	top: 0;
	justify-content: center;
	align-items: center;
	width: 100%;
	background: rgb(var(--color-orange-dark));
	color: #FFFFFF;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	padding: 10px;
	z-index: 1100;
}


/*************************************
	Nav
 *************************************/


header {
    display: block;
    position: absolute;
	width: 100%;
    top: 0;
	margin: 0;
    padding: 0;
	z-index: 1400;
}

header:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(var(--color-dark-grey),0.85);
	opacity: 0;
	transition: opacity 0.4s linear;
}

header.fixed {
    position: fixed;
	transition: transform 0.6s;
}

header.fixed:before {
	opacity: 1;
	transition: none;
}

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

header nav {
    max-width: 1920px;
    margin: 0 auto;
	padding: min(50px, (50 / 1920) * 100vw) min(100px, (100 / 1920) * 100vw);
	transition: padding 0.6s cubic-bezier(0.25,0.25,0.25,1);
}

header nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
	align-items: center;
	position: relative;
    column-gap: 1.25em;
	min-height: 0vh;
	/*font-size: clamp(16px, (24 / 1920) * 100vw, 24px);*/
	font-size: clamp(14px, (24 / 1920) * 100vw, 24px);
}

header nav ul li {
	min-height: 0vh;
	position: relative;
	color: rgb(var(--color-white));
	font-weight: 300;
	font-size: inherit;
	line-height: 1.2em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.2s linear, margin 0.6s cubic-bezier(0.25,0.25,0.25,1);
}

header nav ul li:hover,
header nav ul li.active {
	color: rgb(var(--color-orange));
}

header nav ul li.home {
	flex-grow: 1;
	display: flex;
	justify-content: flex-start;
    column-gap: 1.25em;
	transform-origin: left top;
	transition: margin 0.6s cubic-bezier(0.25,0.25,0.25,1), transform 0.6s cubic-bezier(0.25,0.25,0.25,1);
}

header li.home div.logo {
	margin-bottom: max(-17px, (-17 * 1280) * 100vw);
}

header li.home div.logo img {
	display: block;
	height: clamp(min(70px, (70 / 375) * 100vw), (140 / 1280) * 100vw, 140px);
}

:root {
	--logo-alt-h: 85;
	--logo-alt-h-pseudo: calc(var(--logo-alt-h) * 0.6471);
	--ico-phase-3-offset: calc((var(--logo-alt-h) - var(--logo-alt-h-pseudo)) * 0.5px);
	--logo-alt-h-mobile: 45;
	--logo-alt-h-pseudo-mobile: calc(var(--logo-alt-h-mobile) * 0.6471);
	--ico-phase-3-offset-mobile: calc((var(--logo-alt-h-mobile) - var(--logo-alt-h-pseudo-mobile)) * 0.5px);
}

header li.home div.logo-alt {
	display: block;
	position: relative;
	height: clamp(min(var(--logo-alt-h-mobile) * 1px, (var(--logo-alt-h-mobile) / 375) * 100vw), (var(--logo-alt-h) / 1280) * 100vw, var(--logo-alt-h) * 1px);
	perspective: clamp(min(var(--logo-alt-h-mobile) * 1px, (var(--logo-alt-h-mobile) / 375) * 100vw), (var(--logo-alt-h) / 1280) * 100vw, var(--logo-alt-h) * 1px);
	margin-top: clamp(min(16px, (16 / 375) * 100vw), (19 / 1280) * 100vw, 19px);
	margin-top: min(19px, (19 / 1280) * 100vw);
}

header li.home div.logo-alt div.ico-phase-3 {
	position: absolute;
	width: 100%;
	height: clamp(min(var(--logo-alt-h-mobile) * 1px, (var(--logo-alt-h-mobile) / 375) * 100vw), (var(--logo-alt-h) / 1280) * 100vw, var(--logo-alt-h) * 1px);
	animation: kf-ico-phase-3 6.4s cubic-bezier(0.25, 0.25, 0.25, 1) infinite both;
}

@keyframes kf-ico-phase-3 {
    0% {
		transform: rotateX(90deg);
	}
	10%, 55% {
		transform: rotateX(0deg);
	}
	
	65%, 100% {
		transform: rotateX(-90deg);
	}
}

header li.home div.ico-phase-3:before,
header li.home div.ico-phase-3:after {
	content: "";
	display: block;
	position: absolute;
	width: clamp(min(var(--logo-alt-h-pseudo-mobile) * 1px, (var(--logo-alt-h-pseudo-mobile) / 375) * 100vw), (var(--logo-alt-h-pseudo) / 1280) * 100vw, var(--logo-alt-h-pseudo) * 1px);
	height: clamp(min(var(--logo-alt-h-pseudo-mobile) * 1px, (var(--logo-alt-h-pseudo-mobile) / 375) * 100vw), (var(--logo-alt-h-pseudo) / 1280) * 100vw, var(--logo-alt-h-pseudo) * 1px);
	left: 0;
	right: 0;
	background: url("../images/ico-phase-3.svg") center center no-repeat;
	background-size: 100%;
	margin: 0 auto;
	opacity: 0.75;
	animation-duration: 6.4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.25, 0.25, 0.25, 1);
}

header li.home div.ico-phase-3:before {
	top: 0;
	animation-name: kf-ico-phase-3-before;
}

header li.home div.ico-phase-3:after {
	bottom: 0;
	animation-name: kf-ico-phase-3-after;
}

@media screen and (max-width: 960px) {
	header li.home div.ico-phase-3:before {
		animation-name: kf-ico-phase-3-mobile-before;
	}

	header li.home div.ico-phase-3:after {
		animation-name: kf-ico-phase-3-mobile-after;
	}

}

@keyframes kf-ico-phase-3-before {
    0%, 5%, 60%, 100% {
		opacity: 0.75;
		transform: translateY(var(--ico-phase-3-offset));
	}
	
	20%, 45% {
		opacity: 1;
		transform: translateY(0);
	}
	
}

@keyframes kf-ico-phase-3-after {
    0%, 5%, 60%, 100% {
		opacity: 0.75;
		transform: translateY(calc(var(--ico-phase-3-offset) * -1));
	}
	
	20%, 45% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes kf-ico-phase-3-mobile-before {
    0%, 5%, 60%, 100% {
		opacity: 0.75;
		transform: translateY(var(--ico-phase-3-offset-mobile));
	}
	
	20%, 45% {
		opacity: 1;
		transform: translateY(0);
	}
	
}

@keyframes kf-ico-phase-3-mobile-after {
    0%, 5%, 60%, 100% {
		opacity: 0.75;
		transform: translateY(calc(var(--ico-phase-3-offset-mobile) * -1));
	}
	
	20%, 45% {
		opacity: 1;
		transform: translateY(0);
	}
}

header li.home div.logo-alt div.logo-brivia {
	display: flex;
	align-items: center;
	position: relative;
	height: clamp(min(var(--logo-alt-h-mobile) * 1px, (var(--logo-alt-h-mobile) / 375) * 100vw), (var(--logo-alt-h) / 1280) * 100vw, var(--logo-alt-h) * 1px);
	transform: rotateX(90deg);
	animation: kf-logo-brivia 6.4s cubic-bezier(0.25,0.25,0.25,1) infinite both;
}

header li.home div.logo-alt div.logo-brivia img {
	display: block;
	width: auto;
	height: clamp(min((var(--logo-alt-h-mobile) * .5) * 1px, ((var(--logo-alt-h-mobile) * .5) / 375) * 100vw), ((var(--logo-alt-h) * .5) / 1280) * 100vw, (var(--logo-alt-h) * .5) * 1px);
}

@keyframes kf-logo-brivia {
    0%, 65% {
		transform: rotateX(90deg);
	}
	75%, 90% {
		transform: rotateX(0deg);
		animation-timing-function: linear;
	}
	100% {
		transform: rotateX(-90deg);
	}
}

header nav ul li.new-window a:after {
    content: "\f08e";
    display: inline-block;
    font-family: "Font Awesome 6 Free";
	font-weight: 900;
    font-size: 0.6em;
    vertical-align: top;
    margin-left: 0.5em;
}

header div.alt {
	display: none;
}

header.fixed nav {
	padding-top: min(25px, (25 / 1920) * 100vw);
	padding-bottom: min(25px, (25 / 1920) * 100vw);
}

header.fixed nav ul li.home {
	margin-bottom: calc(clamp(min(70px, (70 / 375) * 100vw), (140 / 1280) * 100vw, 140px) * -0.5);
	transform: scale(0.5);
	transition-duration: 0s;
}

header.fixed nav ul li.home div.logo {
	clip-path: polygon(0 0, 100% 0, 100% 62%, 43% 62%, 43% 100%, 0 100%);
}

.widget {
    display: block;
    position: fixed;
    width: calc((240 / 1920) * 100vw);
    left: calc((30 / 1920) * 100vw);
    top: calc(((400 / 1920) * 100vw));
	background: rgb(var(--color-orange-dark));
    border-radius: 9999px;
    color: rgb(var(--color-white));
	font-weight: 600;
	font-size: clamp(12px, (14 / 1920) * 100vw, 14px);
    line-height: 1.2em;
    text-align: center;
    text-transform: uppercase;
    padding: 0.9em 0.5em;
	z-index: 1200;
}


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


.container {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding-top: calc(min(100px, (100 / 1920) * 100vw) + clamp(min(70px, (70 / 375) * 100vw), (140 / 1280) * 100vw, 140px) + max(-17px, (-17 * 1280) * 100vw));
}

.page,
.page-previous {
	flex: 1 0 auto;
	display: block;
	position: relative;
	transition: transform 1.2s cubic-bezier(0.6,0,0.4,1);
}

.page-previous {
	position: absolute;
	left: 0;
	top: 0;
	transition: transform 1.2s cubic-bezier(0.6,0,0.4,1);
}

.container.loading .page, 
.container.loading .page-previous {
	transition-duration: 0s;
}

.container.loading.next .page {
	transform: translateX(100vw);
}

.container.loading.prev .page {
	transform: translateX(-100vw);
}

.container.next .page-previous {
	transform: translateX(-100vw);
}

.container.prev .page-previous {
	transform: translateX(100vw);
}

.container.loading .page-previous {
	transform: translateX(0);
}

section {
	display: block;
	position: relative;
	width: 100%;
	color: rgb(var(--color-white));
	opacity: 1;
	transition: opacity 0.8s;
}

section:not(.header) h2,
section:not(.header) h3 {
/*section.privacy h1 {*/
    min-height: 0vh;
	font-size: clamp(24px, (48 / 1920) * 100vw, 48px);
	font-weight: 600;
	line-height: 1.1667em;
	text-transform: uppercase;
	margin-bottom: 0.3333em;
}

section h4,
section .h4 {
/*section.privacy h2,
section.privacy ol > li {*/
    min-height: 0vh;
	font-weight: 600;
	font-size: clamp(20px, (32 / 1920) * 100vw, 32px);
	line-height: 1.3125em;
	margin-bottom: 0.5625em;
}

/*section.privacy h2 {
	text-transform: uppercase;
	margin-bottom: 0;	
}*/

section h4:last-child,
section .h4:last-child {
	margin-bottom: 0;
}

section p, 
.takk p,
section ul.list li,
.expandable-list > button {
/*section.privacy h3,
section.privacy li {*/
    min-height: 0vh;
	color: inherit;
	font-size: clamp(16px, (16 / 1920) * 100vw, 20px);
	line-height: 1.7em;
	margin: 0 0 1.7em 0;
}

/*section.privacy h3 {
	font-weight: 700;
	text-transform: none;
	margin: 0;
}*/

section ul.list {
	margin: 0 0 34px 0;
}

section ul.list li {
	position: relative;
	margin-bottom: 8px;
	padding: 0 0 0 20px;
}

section ul.list li:before {
	content: "•";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

section small {
	font-size: 16px;
	line-height: 1.625em;
}

p:last-child, 
section ul:last-child, 
section li:last-of-type {
	margin-bottom: 0 !important;
}

section ul.list li.expandable-list {
	font-size: 20px;
    transition: padding 0.6s var(--transition-timing-ease-in-out);
}

section ul.list li.expandable-list.active {
	padding-bottom: 1em;
}

section ul.list li.expandable-list li:before {
	content: "-";
}

.expandable-list > button {
	display: inline-block;
	cursor: pointer;
	text-align: left;
	margin: 0;
	padding-right: 2em;
    transition: color 0.2s linear;
}

.expandable-list > button:hover,
.expandable-list.active > button {
	color: rgb(var(--color-orange));
}

.expandable-list > button:after {
	content: "\f078";
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	color: rgb(var(--color-orange));
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
	transition: transform 0.6s var(--transition-timing-ease-in-out);
}

.expandable-list.active > button:after {
	transform: scaleY(-1);
}

.expandable-list ol,
.expandable-list ul {
    height: 0;
    overflow: hidden;
    transition: height 0.6s var(--transition-timing-ease-in-out);
}

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

.asterisk {
    display: block;
    position: relative;
    padding-left: 16px;
}

.asterisk:before {
    content: "*";
    position: absolute;
    left: 0;
}

.color-orange {
	color: rgb(var(--color-orange));
}

.text-align-center {
	text-align: center;
}

.text-align-right {
	text-align: right;
}

.text-decoration-underline {
	text-decoration: underline;
}

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

.lowercase {
	text-transform: none;
}

.uppercase {
	text-transform: uppercase;
}

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

.grecaptcha-badge { 
    visibility: hidden;
}

section.header h2 {
	font-family: "punto", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: min(100px, (100 / 1280) * 100vw);
	line-height: 1em;
	text-transform: uppercase;
	text-shadow: 0 0 10px rgb(255,255,0);
	animation: kf-h2-glow 0.8s linear alternate infinite;
}

@keyframes kf-h2-glow {    
    0% {
		text-shadow: 0 0 15px rgba(var(--color-warm-orange),1), 0 0 15px rgba(var(--color-warm-orange),1);
	}
    100% {
		text-shadow: 0 0 15px rgba(var(--color-warm-orange),0.4), 0 0 15px rgba(var(--color-warm-orange),0.4);
	}
}

section.header h3 {
	display: inline-block;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(12px, (24 / 1280) * 100vw, 24px);
	line-height: 1.4em;
	margin-top: 0.7em;
}

section.header div.header-text {
	display: block;
	position: absolute;
	left: calc((300/1920) * 100vw);
	top: calc((300/1920) * 100vw);
	z-index: 100;
}

section.header h1,
section.header h2, 
#lightbox h2 {
    min-height: 0vh;
	font-size: clamp(32px, (80 / 1920) * 100vw, 80px);
	line-height: 1em;
	text-transform: uppercase;
	margin: 0 0 0.3em 0;
}

.mask-gradient:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-image: 
		linear-gradient(90deg, rgba(var(--color-white),0.9) 0%, rgba(var(--color-white),0.5) 20%, rgba(var(--color-white),0) 40%), 
		linear-gradient(rgba(var(--color-white),0.9), rgba(var(--color-white),0.5) 20%, rgba(var(--color-white),0) 30%);
}

section.intro {
	z-index: 910;
}

section.intro:before {
	content: "";
	display: block;
	position: absolute;
	height: 100%;
	right: 0;
	top: 0;
}

section.contact-form {
	padding-bottom: calc((105/1920) * 100vw);
}

section .bckg.bckg-dark-blue-grey {
	display: block;
	position: absolute;
	left: 0;
	top: calc((105/1920) * 100vw);
	width: 100vw;
	height: calc(100% - ((105 / 1920) * 100vw));
	background: rgb(var(--color-dark-grey));
}

section .bckg.bckg-dark-blue-grey:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: calc((270/1920) * 100vw);
	background-size: calc((69/1920) * 100vw) auto;
	background-color: rgb(var(--color-dark-grey));
}

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

section.bckg-lavender:before {
	background: rgb(var(--color-lavender));
}

section.intro.bckg-white:before {
	background: rgb(var(--color-white));
}

section.intro .text-block {
	display: block;
	position: relative;
	padding: calc((135/1920) * 100vw);
	margin-top: calc((-105/1920) * 100vw);
	margin-left: auto;
}

section.intro .text-block.bckg-orange {
	background: rgb(var(--color-orange-flash));
	color: rgb(var(--color-white));
}

section.intro .text-block.bckg-white {
	background: rgb(var(--color-white));
	color: rgb(var(--color-dark-grey));
}

section.intro.w-7cols:before {
	width: calc((915/1920) * 100vw);
	height: 100%;
	right: calc((165/1920) * 100vw);
	max-height: calc((915/1920) * 100vw);
}

section.intro.w-7cols .text-block {
	width: calc((915/1920) * 100vw);
	margin-right: calc((165/1920) * 100vw);
}

section.intro.w-7cols.promo .text-block {
    margin-right: 0;
	margin-left: calc((165/1920) * 100vw);
}

section.intro.w-9cols:before {
	width: calc((1350/1920) * 100vw);
	height: 100%;
	max-height: calc((1350/1920) * 100vw);
}

section.intro.w-9cols .text-block {
	width: calc((1350/1920) * 100vw);
	padding-right: calc((165/1920) * 100vw);
}

section.intro.w-10cols:before {
	width: calc((1485/1920) * 100vw);
	height: 100%;
	max-height: calc((1485/1920) * 100vw);
}

section.intro.w-10cols .text-block {
	width: calc((1485/1920) * 100vw);
}

section.quote {
	margin-top: calc((((-835 / 2) / 1920) * 100vw) + 90px);
	padding: 0 calc((165/1920) * 100vw) 0 calc((300/1920) * 100vw);
}

section.quote > div {
	display: flex;
	flex: row nowrap;
	justify-content: space-between;
	align-items: flex-end;	
}

section.quote img {
	width: calc((780/1920) * 100vw);
	height: calc((520/1920) * 100vw);
	z-index: 930;
}

:root {
	--registration-bckg-size: clamp(min(400px, (280 / 320) * 100vw), (540 / 1280) * 100vw, 540px);
	--registration-bckg-offset: calc(var(--registration-bckg-size) * (147.25 / 540));
}

section.home-project {
	overflow: hidden;
}

section.home-project:before,
section.home-project:after {
	content: "";
	display: block;
	position: absolute;
	width: var(--registration-bckg-size);
	height: var(--registration-bckg-size);
	left: calc(50% - (var(--registration-bckg-size) / 2));
	top: calc(50% - (((var(--registration-bckg-size) * 2) - (var(--registration-bckg-size) - (var(--registration-bckg-offset) * 2))) / 2));
	background: url("../images/bckg-3.svg") center center no-repeat;
	background-size: contain;
	opacity: 0;
	transform: translateY(var(--registration-bckg-offset));
	transition: opacity 0.2s linear, transform 0.2s linear;
	z-index: -1;
}

section.home-project.show:before,
section.home-project.show:after {
	opacity: calc((clamp(0, (var(--spot-l-prct) - 0.5) * 2, 1)));
}

section.home-project:before {
	transform: translateY(calc(var(--registration-bckg-offset) - (calc((clamp(0, (var(--spot-l-prct) - 0.5) * 2, 1))) * var(--registration-bckg-offset))));
}

section.home-project:after {
	transform: translateY(calc(var(--registration-bckg-offset) + (calc((clamp(0, (var(--spot-l-prct) - 0.5) * 2, 1))) * var(--registration-bckg-offset))));
}

section.home-project.ease-out:before,
section.home-project.ease-out:after {
	transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0, 0.25, 0.25, 1);
}

:root {
	--spot-size: clamp(min(150px, (110 / 320) * 100vw), (280 / 1280) * 100vw, 280px);
}

.spots {
	position: relative;
	width: auto !important;
	font-size: 0;
	text-align: center;
	margin: 0 !important;
	padding: 0 min(100px, (100 / 1280) * 100vw) !important;
	padding-top: calc(var(--spot-size) * 0.6) !important;
	overflow: hidden;
	z-index: 300;
}

.spots.left,
.spots.right {
	position: absolute;
	top: 50%;
	transform-origin: center bottom;
}

.spots.left {
	left: 0;
	transform: translate(-50%, -100%) rotate(90deg);
}

.spots.right {
	right: 0;
	transform: translate(50%, -100%) rotate(-90deg);
}

.spots.btm {
	display: none;
}

.spots > div {
	margin-bottom: calc(var(--spot-size) * -0.6);
}

.spots > div > span {
	display: inline-block;
	position: relative;
	width: 1em;
	height: 1em;
	background: rgb(var(--color-white));
	border: solid 0.014em rgb(var(--color-dark-grey));
	border-radius: 0.5em;
	font-size: var(--spot-size);
	margin: -0.6em -0.1em 0 -0.1em;
	transform: scale(0);
	transform-origin: 50% 75%;
	transform-origin: center bottom;
}

.spots.ease-out > div > span {
	transition: transform 1.2s cubic-bezier(0, 0.25, 0.25, 1);
}

.spots > div > span {
	transform: scale(0);
	transition: transform 0.2s linear;
}

section.home-project.show .spots > div > span {
	transform: scale(calc(clamp(0, (var(--prct) - 0.5) * 2, 1)));
}

section.home-project.show .spots.left > div > span,
section.home-project.show .spots.right > div > span {
	transform: scale(calc(var(--spot-l-prct)));
}

.spots > div:nth-child(2),
.spots > div:nth-child(3) {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--spot-size) * 0.6);
	margin: 0 auto;
}

.spots > div:nth-child(2) > span {
	background: rgb(var(--color-warm-orange));
	mix-blend-mode: multiply;
}

.spots > div:nth-child(2) > span:nth-of-type(2),
.spots > div:nth-child(2) > span:nth-of-type(3),
.spots > div:nth-child(2) > span:nth-of-type(5) {
	background: rgb(var(--color-orange));
}

.spots > div:nth-child(3) > span {
	background: transparent;
}

.spots > div > span:nth-of-type(2),
.spots > div > span:nth-of-type(4) {
	transform-origin: 75% 75%;
	transform-origin: right bottom;
}

.spots > div > span:nth-of-type(3),
.spots > div > span:nth-of-type(6) {
	transform-origin: 25% 75%;
	transform-origin: left bottom;
}

section.center > div {
	width: calc((780/1920) * 100vw);
	margin: 0 auto;
	padding: calc((230/1920) * 100vw) 0;
}

div.cta-container {
	display: block;
	position: sticky;
	width: 50px;
	left: 50vw;
	bottom: 62.5px;
	margin-top: calc(((-105 / 1920) * 100vw) - 62.5px);
	transform: translateX(-50%);
	z-index: 1020;
}

a.cta-anchor {
	display: block;
	position: relative;
	width: 50px;
	height: 125px;
	background: url("../images/icon-arrow-cta.svg") center top no-repeat;
	background-size: contain;
	animation: kf-cta-anchor 1.6s var(--transition-timing-ease-in-out) 0s infinite forwards;
}

@keyframes kf-cta-anchor {
	0% {
		opacity: 0;
		transform: translateY(-50%);
	}
	50%, 80% {
		opacity: 1;
	}
	80% {
		transform: translateY(0);
	}
	100% {
		opacity: 0;
	}
}

section.neighbourhood:before {
	content: "";
	display: block;
	position: absolute;
	width: 100vw;
	height: 100%;
	left: 0;
	top: calc(((835 / 1920) / 2) * 100vw);
	z-index: -1;
}

section.neighbourhood:last-of-type:before {
	height: calc(100% - (((835 / 1920) / 2) * 100vw) + ((120 / 1920) * 100vw));
}

section.neighbourhood.bckg-lavender:before {
	background: rgb(var(--color-lavender));
}

section.neighbourhood.bckg-dark-blue-grey:before {
	background: rgb(var(--color-dark-grey));
}

section.neighbourhood .text-block {
    position: relative;
	margin: calc((150/1920) * 100vw)  0 calc((120/1920) * 100vw) 0;
	padding: 0 calc((705/1920) * 100vw) 0 calc((300/1920) * 100vw);
    z-index: 1000;
}

section.home-plans > div {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	background: rgb(var(--color-orange));
	margin: 0 0 0 calc((165/1920) * 100vw);
	padding: calc((105/1920) * 100vw) calc((270/1920) * 100vw) calc((105/1920) * 100vw) calc((135/1920) * 100vw);
}

section.home-plans > div > img {
	width: calc((405/1920) * 100vw);
	height: auto;
}

section.home-plans .text-block {
	position: relative;
	width: calc((810/1920) * 100vw);
}

section.contact-footer.bckg-dark-blue-grey {
	background: rgb(var(--color-dark-grey));
	padding: calc((180 / 1920) * 100vw);
}

.text-block-2-cols {
	display: grid;
	grid-column-gap: calc((30 / 1920) * 100vw);
	grid-template-columns: 50% 50%;
	width: calc((1320 / 1920) * 100vw);
	margin: 0 auto;
}

.text-block h4,
.text-block .h4 {
	font-size: 16px !important;
	line-height: 1.25em !important;
	text-transform: uppercase !important;
}

div.gallery-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
	grid-gap: calc((20/1920) * 100vw);
	padding: calc((165/1920) * 100vw);
}

div.gallery-grid div.section {
	grid-column: 1 / -1;
}

div.gallery-grid div.section h3 {
	margin: 0;
}

div.gallery-grid div.section:not(:first-child) h3 {
	margin: 1.1667em 0 0 0;
}

div.gallery-grid picture {
	display: block;
	position: relative;
	padding-top: calc((835 / 1215) * 100%);
    opacity: 0;
}

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

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

div.gallery-grid a.virtual-tour {
	position: relative;
}

div.gallery-grid a.virtual-tour figcaption {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	width: 100%;
	min-height: 0vh;
	height: 50%;
	left: 0;
	top: 0;
	color: rgb(var(--color-white));
	font-size: 24px;
	z-index: 10;
}

div.gallery-grid a.virtual-tour:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(var(--color-black),0.5) url("../images/ico-360-galerie.svg") center 65% no-repeat;
	background-size: 25% auto;
}

section.privacy.intro.w-9cols:before {
	max-height: none;
}

/*section.privacy ol {
	counter-reset: counter_ol;
}

section.privacy li {
	margin-bottom: 0;
}

section.privacy * + p,
section.privacy * + ol,
section.privacy * + ul {
	margin-top: 1.7em;
}

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

section.privacy ol,
section.privacy ul {
	padding-left: 2.5em;
}

section.privacy ol li:before,
section.privacy ul li:before {
	display: block;
	position: absolute;
}

section.privacy ol > li {
	counter-increment: counter_ol;
}

section.privacy ol > li:before {
	content: counter(counter_ol) ".";
	margin: 0 0 0 -1em;
}

section.privacy ul li:before {
	content: "•";
	margin-left: -1em;
}

section.privacy a {
	text-decoration: underline;
}*/

.privacy h1 {
    min-height: 0vh;
    font-weight: 600;
	font-size: clamp(24px, (48 / 1920) * 100vw, 48px) !important;
    line-height: 1.1667em;
    text-transform: uppercase;
    margin-bottom: 0.3333em;
}
.privacy h2,
.privacy ol > li:before {
    min-height: 0vh;
    font-weight: 600 !important;
	font-size: clamp(20px, (32 / 1920) * 100vw, 32px) !important;
    line-height: 1.3125em !important;
    text-transform: uppercase;
}
.privacy h3,
.privacy p,
.privacy li,
.privacy ol ol > li:before {
    min-height: 0vh;
    color: inherit;
	font-size: clamp(14px, (16 / 1920) * 100vw, 20px) !important;
    line-height: 1.7em !important;
}
.privacy h3,
.privacy ol ol > li:before {
    font-weight: 700 !important;
    text-transform: none !important;
	margin-bottom: 0 !important;
}
.privacy ol {
    counter-reset: counter_ol;
}
.privacy * + p,
.privacy * + ol,
.privacy * + ul,
.privacy * + .table {
    margin-top: 1.7em;
}
.privacy ol > li + li {
    margin-top: 3.4em;
}
.privacy ol, 
.privacy ul {
    padding-left: 3em;
}
.privacy ol li:before,
.privacy ul li:before {
    display: block;
    position: absolute;
    margin-left: -0.5em;
    transform: translateX(-100%);
}
.privacy ol > li {
    counter-increment: counter_ol;
}
.privacy ol > li:before {
    content: counter(counter_ol) ".";
}
.privacy ol ol > li:before {
    content: counter(counter_ol, lower-alpha) ".";
}
.privacy ul li:before {
    content: "•";
}
/*.privacy table,
.privacy th,
.privacy td {
    border: 1px solid rgb(var(--color-dark-grey));
    border-collapse: collapse;
}
.privacy th,
.privacy td {
    padding: 10px;
}
.privacy table tr td {
    width: 33%;
    vertical-align: top;
}*/
.privacy .table > div {
	border: solid 0px rgb(var(--color-dark-grey));
	border-top-width: 1px;
	border-left-width: 1px;
	padding: 0.5em;
}
.privacy a {
    text-decoration: underline;
}

@media screen and (min-width: 768px) {
	.privacy .table {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.privacy .table > div:nth-child(-n+5) {
		grid-column-start: 1;
	}
	.privacy .table > div:nth-child(n+6) {
		grid-column-start: 2;
	}
	.privacy .table > div:nth-child(n+11) {
		grid-column-start: 3;
		border-right-width: 1px;
	}
	.privacy .table > div:nth-child(5n+1) {
		grid-row-start: 1;
		font-weight: 700;
	}
	.privacy .table > div:nth-child(5n+2) {
		grid-row-start: 2;
	}
	.privacy .table > div:nth-child(5n+3) {
		grid-row-start: 3;
	}
	.privacy .table > div:nth-child(5n+4) {
		grid-row-start: 4;
	}
	.privacy .table > div:nth-child(5n+5) {
		grid-row-start: 5;
		border-bottom-width: 1px;
	}
	.privacy a {
		text-decoration: underline;
	}
}

@media screen and (max-width: 767px) {
	/*.privacy table {
		border: none;
	}
	.privacy table,
	.privacy th,
	.privacy td {
		display: block;
	}
	.privacy table tr td {
		width: 100%;
	}*/
	.privacy .table > div {
		border-right-width: 1px;
	}
	.privacy .table > div:nth-child(5n+3),
	.privacy .table > div:nth-child(5n+4),
	.privacy .table > div:nth-child(5n+5) {
		border-top-width: 0;
	}
	.privacy .table > div:last-child {
		border-bottom-width: 1px;
	}
	.privacy .table > div:nth-child(5n+1) {
		grid-row-start: 1;
		font-weight: 700;
	}
}


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


section.plans {
	z-index: 915;
}

section.plans > div {
	padding: 0 calc((165/1920) * 100vw);
}

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

.plans-type-selector {
	display: flex;
	justify-content: space-between;
	position: sticky !important;
	top: 0;	
	background: rgba(var(--color-dark-grey),0.9);
	margin-top: calc((67.5/1920) * 100vw);
	padding: 10px;
	z-index: 10;
}

.plans-type-selector > div {
	display: flex;
	flex-flow: column;
	row-gap: 1em;
	font-size: 14px;
}

.plans-type-selector h3,
.plans-unit-selector h3 {
	min-height: 0vh;
	font-size: clamp(14px, (18 / 1920) * 100vw, 18px) !important;
	margin: 0;
}

form[name="plan_selector"] div.bedrooms-selector label,
form[name="plan_selector"] div.available-date-selector input {
	min-height: 0vh;
	display: block;
	position: relative;
	height: 1.5em;
	border: none;
	border-radius:0;
	color: rgb(var(--color-white));
	font-family: 'Muli', sans-serif;
	font-weight: 300;
	font-size: clamp(12px, (14 / 1920)* 100vw, 14px);
	line-height: 1em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.125em 0.25em;
	-webkit-appearance: none; 
	transition: background 0.2s linear, color 0.2s linear;
}

form[name="plan_selector"] div.available-date-selector label {
	position: relative;
	padding-right: 24px;
}

form[name="plan_selector"] div.available-date-selector label:after {
    content: "\f073";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
	color: rgb(var(--color-white));
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: 24px;
    line-height: 1em;
    transform: translateY(-50%);
}

form[name="plan_selector"] div.available-date-selector input:read-only {
	-webkit-text-fill-color: rgb(var(--color-white));
}

form[name="plan_selector"] div.plans-type-selector label:hover,
form[name="plan_selector"] div.plans-type-selector label.checked {
	color: rgb(var(--color-orange-dark));
}

form[name="plan_selector"] div.plans-type-selector label.checked {
	background: rgb(var(--color-orange-dark));
	color: rgb(var(--color-white));
}

form[name="plan_selector"] div.plans-type-selector div.bedrooms-selector input {
	display: none;
}

form[name="plan_selector"] div.plans-type-selector div.bedrooms-selector > div {
	display: flex;
	column-gap: 10px;
}

form[name="plan_selector"] div.available-date-selector input {
	background: none;
}

.plans-floor-selector {
	display: none;
}

div.ui-slider,
div.ui-slider-range {
	position: relative;
	width: 150%;
    height: 6px !important;
    background: rgba(var(--color-white),1);
    border: none !important;
    border-radius: 3px;
}

div.ui-slider {
	background: rgba(var(--color-white),0.25);
	font-size: 14px;
	margin: 1em 0 0 0;
}

span.ui-slider-handle {
	position: relative;
    width: 16px !important;
    height: 16px !important;
    top: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

span.ui-slider-handle > span,
div.ui-slider span.min-val {
    position: absolute;
    display: block;
    left: 50%;
    top: -5px;
	background: rgb(var(--color-white));
	border-radius: 3px;
    color: rgb(var(--color-dark-grey));
    font-weight: 300;
    font-size: 14px;
    line-height: 1em;
    white-space: nowrap;
	padding: 0.125em 0.25em;
    transform: translate(-50%, -100%);
}

span.ui-slider-handle > span:after,
div.ui-slider span.min-val:after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left: 50%;
	bottom: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid rgb(var(--color-white));
	transform: translate(-50%, 100%);
}

div.ui-slider span.min-val {
	left: 0;
	background: transparent;
	border: solid 1px rgba(var(--color-white),1);
	color: rgba(var(--color-white),1);
	padding: calc(0.125em - 1px) 0.25em;
	opacity: 0.6;
}

div.ui-slider span.min-val:after {
	border-top-color: rgba(var(--color-white),1);
}

div.ui-datepicker {
    background: transparent;
    border: none !important;
    border-radius: 0 !important;
    color: rgb(var(--color-dark-grey));
    font-family: 'Muli', sans-serif;
    font-weight: 700;    
    font-size: 14px;
}

div.ui-datepicker-header {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0;
}

a.ui-datepicker-prev,
a.ui-datepicker-prev:hover,
a.ui-datepicker-next,
a.ui-datepicker-next:hover {
    top: 8px !important;
    background-color: transparent !important;
    border: none !important;
}

a.ui-datepicker-prev,
a.ui-datepicker-prev:hover {
    left: 8px !important;
}

a.ui-datepicker-next,
a.ui-datepicker-next:hover {
    right: 8px !important;
}

a.ui-datepicker-prev span,
a.ui-datepicker-next span {
    background-image: none !important;
}

a.ui-datepicker-prev:before,
a.ui-datepicker-next:before {
    content: "\f137";
    display: block;
    width: 100%;
    color: rgb(var(--color-dark-grey));
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    text-align: center;
}

a.ui-datepicker-next:before {
    content: "\f138";
}

a.ui-state-default {
    background: transparent !important;
    border: none !important;
    color: rgb(var(--color-dark-grey)) !important;
    font-weight: 500;
    font-size: 14px;
    text-align: center !important;
}

a.ui-state-default.ui-state-highlight {
    background: rgba(var(--color-dark-grey),0.75) !important;
    color: rgb(var(--color-white)) !important;
}

a.ui-state-default.ui-state-active {
    border: solid 1px rgba(var(--color-dark-grey),0.75) !important;
}

form[name="plan_selector"] div.box {
    display: none;
    position: absolute;
    min-width: 100%;
    left: 0;
    background: rgb(var(--color-white));
    padding: min(20px, (20 / 1366) * 100vw);
    filter: drop-shadow(0 0 5px rgba(var(--color-white), 0.35)) drop-shadow(0 0 15px rgba(var(--color-black), 0.5));
    z-index: 10000;
}

form[name="plan_selector"] div.box {
	left: 50%;
    min-width: initial;
}

form[name="plan_selector"] div.box:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
}

form[name="plan_selector"] div.box.top {
    top: 0;
    transform: translate(-50%, calc(-100% - 17px));
}

form[name="plan_selector"] div.box.top:after {
    bottom: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 17px solid rgb(var(--color-white));
    transform: translate(-50%, 100%);
}

form[name="plan_selector"] div.box.bottom {
    bottom: 0;
    transform: translate(-50%, calc(100% + 17px));
}

form[name="plan_selector"] div.box.bottom:after {
    top: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 17px solid rgb(var(--color-white));
    transform: translate(-50%, -100%);
}

form[name="plan_selector"] div.box.show {
    display: block;
}

form[name="plan_selector"] div.box li {
    cursor: pointer;
    color: rgb(var(--color-dark-grey));
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2857em;
}

form[name="plan_selector"] div.box li + li {
    margin-top: 1em;
}


/* -- Plans header -- */

.plans-building {
    width: 100%;
	height: auto;
	padding: calc((67.5/1920) * 100vw) 0;
}

.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 g.floor-highlight {
    fill: rgba(var(--color-orange-dark), 0.5);
    mix-blend-mode: multiply;
    cursor: pointer;
    transition: fill 0.6s, mix-blend-mode 0.6s;
}

.plans-building .building svg g.floor:hover g.floor-highlight,
.plans-building .building svg g.floor.active g.floor-highlight {
    fill: rgba(var(--color-orange-dark), 0.95);
}

.plans-building .building svg g.floor g.floor-num {
	pointer-events: none;
}

.plans-building .building svg g.floor g.floor-num circle {
    fill: rgba(var(--color-white), 1);
	stroke: rgb(var(--color-dark-grey));
	stroke-width: 1px;
	pointer-events: none;
    transition: fill 0.6s;
}

.plans-building .building svg g.floor.active g.floor-num circle {
    fill: rgba(var(--color-orange-dark), 1);
}

.plans-building .building svg g.floor g.floor-num text {
	fill: rgb(var(--color-dark-grey));
	font-family: 'Muli', sans-serif;
	font-weight: 600;
	font-size: 24px;
	text-anchor: middle;
	dominant-baseline: middle;
    transition: fill 0.6s;
}

.plans-building .building svg g.floor.active g.floor-num text {
	fill: rgb(var(--color-white));
}

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


/* -- Floor plan -- */

.plans-unit-selector {
	display: none;
	width: min(780px, 100%);
	margin: 0 auto;
}

.plans-unit-selector.show {
	display: block;
}

div#floor-plan,
div.street-name {
	font-size: 8px;
}

div.street-name {
	line-height: 1.2em;
	text-align: center;
	text-transform: uppercase;
	padding: 1em 0;
}

div.street-name.rotate {
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: rotate(-90deg);
	transform-origin: top left;
}

div.street-name.rotate > span {
	display: block;
	transform: translateX(-50%);
}

div#floor-plan,
.floor-plan-legend {
	padding: calc((67.5/1920) * 100vw) 0;
}

div#floor-plan {
	padding-left: 3.2em;
}

div#floor-plan label.select {
    display: none;
}

div#floor-plan svg {
	display: block;
	width: 100%;
	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,
div#floor-plan svg g.others,
div#floor-plan svg g.units .unit,
div#floor-plan svg g.units .balcony,
div#floor-plan svg g.units .unit-pattern,
div#floor-plan svg g.units .unit-stroke {
    fill: none;
    stroke: rgb(var(--color-white));
	stroke-width: 1px;
	stroke-miterlimit: 10;
}

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

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

div#floor-plan svg g#others .st4 {
	fill:none;
	stroke: rgb(var(--color-white));
	stroke-miterlimit:10;
}

div#floor-plan svg text {
    font-family: 'Muli', sans-serif;
    font-weight: 600;
    font-size: 6px;
    text-anchor: middle;
    dominant-baseline: middle; 
}

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

div#floor-plan svg g.units text {
    fill: rgba(var(--color-white), 0.8);
}


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

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

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

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


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

div#floor-plan svg g.units g.other .unit {
    fill: rgba(var(--color-light-grey),1);
    stroke: rgb(var(--color-light-grey));
}

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

div#floor-plan svg g.units g.soon .unit-pattern {
    fill: url(#pattern);
    stroke: rgb(var(--color-orange-dark));
}

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

div#floor-plan svg g.units g.active .unit {
    fill: rgba(var(--color-orange-dark),1);
}

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


/* -- 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 g.units g.available text,
div#floor-plan svg g.units g.soon text {
    fill: rgba(var(--color-dark-grey), 1);
}

div#floor-plan svg g.units g.active text {
    fill: rgba(var(--color-dark-grey), 1);
}

div#floor-plan svg pattern line {
    fill: none;
    stroke: rgba(var(--color-dark-grey), 0.4);
    stroke-width: 1.5;
    stroke-miterlimit: 10;
    opacity: 0.5;
}


/* -- Floor plan legend -- */

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

.floor-plan-legend ul li {
	min-height: 0vh;
    position: relative;
    font-size: clamp(14px, (16 / 1920) * 100vw, 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-white));
    border-color: rgb(var(--color-dark-grey));
}

.floor-plan-legend ul li.match:after,
.floor-plan-legend ul li.soon:after,
.floor-plan-legend ul li.unavailable:after,
.floor-plan-legend ul li.other:after {
    width: 10px;
    height: 10px;
    left: 3px;
    top: 3px;
}

.floor-plan-legend ul li.match:after {
    background-color: rgb(var(--color-orange));
}

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

.floor-plan-legend ul li.unavailable:after {
    background-color: rgb(var(--color-dark-grey));
}

.floor-plan-legend ul li.other:after {
    background: rgb(var(--color-light-grey));
}

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


/* -- Unit -- */

div.plans-unit {
    display: grid;
	grid-template-columns: auto auto !important;
	grid-column-gap: 1.5em;
	grid-row-gap: 1.5em;
	color: rgb(var(--color-white));
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2em;
	padding: calc((67.5/1920) * 100vw) 0;
}

div.plans-unit > div {
	grid-column-start: 1;
}

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

div.unit-title,
div.unit-occupancy,
div.unit-area,
div.unit-global,
div.unit-details {
    position: relative;
}

div.unit-title {
	grid-column: 1 / span 1;
    text-transform: uppercase;
}

div.unit-title span {
    display: block;
	font-weight: 700;
    font-size: 1.5em;
    line-height: 1.2em;
}

div.unit-hr {
    height: 1px;
    background: rgb(var(--color-light-grey));
}

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

div.unit-area {
	justify-self: start;
    display: grid;
    grid-template-columns: 1fr repeat(2, auto);
	grid-row-gap: 0.25em;
}

div.unit-area span > span {
    display: inline-block;
}

div.unit-area > span:nth-of-type(3n+1) > span {
    padding-right: 0.25em;
}

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

div.unit-area > span:nth-of-type(3n+3) > span {
    padding-left: 0.5em;
}

div.unit-area strong {
    font-weight: 600;
	font-size: 1.125em;
}

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

div.unit-details ol {
    display: none;
	column-count: 2;
	column-gap: 2em;
	column-fill: auto;
	-moz-column-fill: balance;
	counter-reset: ud;
}

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

div.unit-details ol li {
    position: relative;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
	padding-left: 1.75em;
}

div.unit-details ol li + li {
    margin-top: 1.5em;
}

div.unit-details ol li:before {
	content: counter(ud) ".";
	counter-increment: ud;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

section.plans div.unit-images {
	grid-column: 2 / span 1;
	grid-row: 2 / span 6;
	background: rgb(var(--color-white));
}

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

section.plans div.unit-images.m img {
	transform: scaleX(-1);
}

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 {
    display: none;
    padding-bottom: 0;
}

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

section.plans div.floors-nav > div.active {
    font-weight: 600;
}

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

div.unit-cta,
div.unit-tools {
	grid-column: 1 / -1;
    position: relative;
}

div.unit-cta {
	position: sticky;
	bottom: 10px;
}

div.unit-cta .bt:not(:hover) {
	background: rgb(var(--color-orange-dark));
	box-shadow: 0 0 20px 10px rgba(var(--color-dark-grey),1);
}

div.unit-tools {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
}

div.unit-tools div,
div.unit-tools a {
    display: inline-block;
}

div.unit-tools div.share {
    color: rgba(var(--color-white),0.46);
    line-height: 1.2em;
    text-transform: uppercase;
}

div.unit-tools a + a {
    margin-left: 0.5em;
}

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

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

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


/*************************************
	Google Maps info window
 *************************************/


.map-container {
	position: relative;
	width: calc((1590 / 1920) * 100vw);
	height: calc((1000 / 1920) * 100vw);
	margin: 0 0 calc((100 / 1920) * 100vw) calc((165 / 1920) * 100vw);
	overflow: hidden;
}

#map-canvas {
	width: calc((1050 / 1920) * 100vw);
	height: 100%;
	margin: 0 0 0 calc((540 / 1920) * 100vw);
}

#map-list {
	display: block;
	position: absolute;
	width: calc((540 / 1920) * 100vw);
	height: calc((1000 / 1920) * 100vw);
	left: 0;
	top: 0;
	background: rgb(var(--color-white));
	overflow: scroll;
}

#map-list li > div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: calc((10 / 1920) * 100vw);
	position: relative;
	width: 100%;
	height: calc((200 / 1920) * 100vw);
	border-bottom: solid 1px #E6E6E6;
	cursor: pointer;
	padding: calc((20 / 1920) * 100vw);
	transition: background-color 0.6s;
}

#map-list .label {
	display: block;
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	background: rgb(var(--yellow-phase2));
	border-radius: 0.75em;
	color: rgb(var(--color-dark-grey));
	font-weight: 600;
	font-size: clamp(12px, (16 / 1920) * 100vw, 16px);
	text-align: center;
	line-height: 1.5em;
	margin-right: 0.625em;
	transition: background-color 0.6s;
}

#map-list .description {
    min-height: 0vh;
	display: block;
	color: rgb(var(--color-dark-grey));
	font-size: clamp(12px, (16 / 1920) * 100vw, 16px);
	line-height: 1.5em;
	text-transform: uppercase;
	padding: 0 0 0 2.125em;
}

#map-list .name {
	flex-grow: 1;
    min-height: 0vh;
	display: block;
	color: rgb(var(--color-dark-grey));
	font-weight: 600;
	font-size: clamp(14px, (29 / 1920) * 100vw, 20px);
	line-height: 1.2em;
	text-transform: uppercase;
}

#map-list .url {
	color: rgb(var(--color-dark-grey));
	font-size: 14px;
	line-height: 1.2857em;
	text-align: right;
	z-index: 10;
}

#map-list .click {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 9;
}

#map-list li.active {
	background: rgb(var(--yellow-phase2));
}

#map-list li.active .label {
	background: rgb(var(--color-white));
}

.gm-style-iw-t:before, 
.gm-style-iw-t:after { /* arrow */
	content: none !important;
}

.gm-style-iw {
	width: 50px !important;
	height: 50px !important;
	left: 0 !important;
	top: 0 !important;
	box-shadow: none !important;
	overflow: hidden !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	transform: translate(-25px, -2px) !important;
	z-index: 1;
}

.gm-style-iw.lb9 {
	transform: translate(-25px, 6px) !important;
}

.gm-style-iw:before, 
.gm-style-iw:after {
	content: "";
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	left: 0;
	top: 0;
	background: rgba(var(--yellow-phase2), 0.25);
	border-radius: 50px;
	z-index: -1;
}

.gm-style-iw:before {
	animation: kf-gm-style-iw-before 1.2s var(--transition-timing-ease-in-out) 0s both;
}

@keyframes kf-gm-style-iw-before {
    0%		{transform: scale(0);}
    100%	{transform: scale(1);}
}

.gm-style-iw:after {
	background: rgba(var(--yellow-phase2), 0.5);
	animation: kf-gm-style-iw-after 2.4s var(--transition-timing-ease-in-out) 0s infinite both;
}

@keyframes kf-gm-style-iw-after {
    0%		{transform: scale(0);}
	50%		{opacity: 1;}
    100%	{opacity: 0; transform: scale(1);}
}

.gm-style-iw > div > div {
	width: 50px !important;
}

.gm-style-iw button.gm-ui-hover-effect { /* close button */
	display: none !important;
}

.gm-style-iw-d {
	overflow: hidden !important;
}

.gm-style-iw div#content {
	width: 50px;
	height: 50px;
	color: rgb(var(--color-dark-grey));
	font-size: 12px;
	line-height: 50px;
	text-align: center;
}

.gm-style-iw-tc {
    display: none;
}

.gm-style > iframe + div {
	border: none !important;
}


/*************************************
	Slider
 *************************************/


.ctrl-arr {
	position: absolute;
	width: auto !important;
	right: 0;
	top: 50%;
	transform: translate(150%, -50%);
	z-index: 10;
}

.ctrl-arr button {
	background: url(../images/icon-arrow-prev.svg) center center no-repeat;
	background-size: contain;
	outline: none;
	transition: background-color var(--transition-duration-bt) 0.2s, border-color var(--transition-duration-bt), color var(--transition-duration-bt) 0.2s;
}

.ctrl-arr button:hover:not([disabled="disabled"]) {
	background-image: url(../images/icon-arrow-prev-hover.svg);
}

.ctrl-arr button[data-dir="next"] {
	transform: rotate(180deg);
}

.ctrl-arr button[disabled="disabled"] {
	opacity: 0.35;
	pointer-events: none;
}

section.bckg-dark-blue-grey .ctrl-arr button {
	background-image: url(../images/icon-arrow-prev-hover.svg);
}

.slider .ctrl_bts {
	display: block;
	position: absolute;
	bottom: calc((50/1600) * 100vw);
	left: 50%;
	transform: translateX(-50%);
}

.slider .ctrl_bts > div {
	display: none;
	position: relative;
}

.slider .ctrl_bts button {
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: rgba(255,255,255,0);
	border: solid 1px rgb(var(--color-white));
	margin: 0 10px;
	padding: 0;
	transition: background-color 0.6s;
}

.slider .ctrl_bts button.ctrl_bt_on {
	background-color: rgba(255,255,255,1);
}

.slider_status {
	display: none;
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: rgb(var(--color-white));
}


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


footer {
	color: rgb(var(--color-white));
	padding: calc((115/1920) * 100vw) calc((165/1920) * 100vw);
	padding-bottom: calc((30/1920) * 100vw);
}

footer > div {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: calc((30/1920) * 100vw);
	position: relative;
}

:root {
	--footer-spot-size: min(120px, (120 / 1920) * 100vw);
	--footer-spot-size-mobile: calc((110 / 320) * 100vw);
}

footer .spots {
	position: absolute;
	bottom: calc((-30/1920) * 100vw);
	padding: 0 min(12px, (12 / 1280) * 100vw) !important;
	padding-top: calc(var(--footer-spot-size) * 0.6) !important;
}

footer .spots.btm {
	display: block;
}

footer .spots > div {
	margin-bottom: calc(var(--footer-spot-size) * -0.92);
}

footer .spots > div > span {
	font-size: var(--footer-spot-size);
	transform: scale(calc(clamp(0, (var(--prct) - 0.5) * 2, 1)));
}

footer .spots > div:nth-child(2),
footer .spots > div:nth-child(3) {
	top: calc(var(--footer-spot-size) * 0.6);
}

footer > div > div {
    min-height: 0vh;
	font-size: clamp(14px, (16 / 1920) * 100vw, 16px);
	line-height: 1.5625em;
}

footer > div > div.office,
footer > div > div.opening,
footer > div > div.contact {
	grid-column-end: span 3;
}

footer > div > div.contact form#form_contact {
	padding-top: clamp(16px, (20 / 1920) * 100vw, 20px);
}

footer > div > div.contact form#form_contact label,
footer > div > div.contact form#form_contact input, 
footer > div > div.contact form#form_contact textarea,
footer > div > div.contact form#form_contact input[type="checkbox"]:checked ~ span:before {
	color: rgb(var(--color-white));
}

footer > div > div.contact form#form_contact label,
footer > div > div.contact form#form_contact input, 
footer > div > div.contact form#form_contact textarea {
	font-size: clamp(14px, (16 / 1920) * 100vw, 16px);
}

footer > div > div.contact form#form_contact label span {
	text-transform: none !important;
}

footer > div > div.contact form#form_contact label:after {
	top: calc(clamp(14px, (16 / 1920) * 100vw, 16px) + 13px);
}

footer form input:-webkit-autofill,
footer form input:-webkit-autofill:hover, 
footer form input:-webkit-autofill:focus, 
footer form input:-webkit-autofill:active {
    -webkit-text-fill-color: rgb(var(--color-white));
	-webkit-box-shadow: 0 0 0 60px rgb(var(--color-dark-grey)) inset !important;
	box-shadow: 0 0 0 60px rgb(var(--color-dark-grey)) inset !important;
}

footer > div > div.contact form#form_contact label.checkbox {
	font-size: clamp(16px, (20 / 1920) * 100vw, 20px);
	margin: 0 0 1.75em 0;
	padding: 0 0 0 3em;
}

footer > div > div.contact form#form_contact label.checkbox span {
	font-size: clamp(14px, (16 / 1920) * 100vw, 16px);
}

footer > div > div.contact form#form_contact label.checkbox span:before {
	left: calc(-3em + 2px);
	top: 0;
	color: rgba(var(--color-white), 0);
}

footer > div > div.contact form#form_contact label.checkbox span:after {
	top: calc(0.75em + 2px);
}

footer > div > div.contact form label.checkbox span:before {
	min-width: 1.5em;
	min-height: 1.5em;
	line-height: calc(1.5em - 4px);
}

footer > div > div.contact form label.checkbox span:after {
	background: rgba(var(--color-white), 0.6);
	font-size: clamp(16px, (20 / 1920) * 100vw, 20px);
	width: calc(3em - (1.5em + 8px));
	left: calc((3em - (1.5em + 4px)) * -1);
}

footer button[type="submit"] {
	color: rgb(var(--color-white));
}

footer > div > div span {
	font-weight: 700;
	text-transform: uppercase;
}

footer .logo {
	grid-column-end: span 3;
	grid-row-end: span 3;
	width: calc((310/1920) * 100vw);
	text-align: center;
}

footer .logo a {
	display: inline-block;
	width: calc((220/1920) * 100vw);
}

footer .logo img {
	display: block;
	width: calc((220/1920) * 100vw);
	height: calc((348/1920) * 100vw);
}

footer .phone {
	grid-column-start: 4;
	grid-column-end: span 3;
	align-self: end;
}

footer .social {
	grid-column-end: span 2;
	align-self: end;
}

footer .partners {
	grid-column-end: span 4;
	text-align: right;
}

footer .partners img {
	display: inline-block;
	width: auto;
	height: min((55 / 375) * 100vw, 60px);
}

footer .copyright {
	grid-column: 4 / span 9;
	font-size: 14px;
	line-height: 1.4286em;
	text-align: right;
	margin: calc((40/1920) * 100vw) 0 0 0;
}


/*************************************
	Form
 *************************************/


form#form_contact {
	display: block;
	position: relative;
	font-size: 0px;
}

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

form#form_contact label {
	display: block;
	position: relative;
	color: rgb(var(--color-dark-grey));
	font-weight: 200;
	font-size: 20px;
	text-transform: uppercase;
	margin-bottom: -1em;
}

form#form_contact label span {
	display: block;
	position: relative;
	transform-origin: left top;
	transition: transform var(--transition-duration-bt) var(--transition-timing-ease-in-out);
}

form#form_contact label:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	left: 0;
	top: 33px;
	background: rgb(var(--yellow-phase2));
	transform: scaleX(0);
	transition: var(--transition-duration-bt) var(--transition-timing-ease-in-out);
	z-index: 10;
}

form#form_contact label.focus span, 
form#form_contact label.filled span {
	transform: scale(0.7) translateY(calc(((-6/1600) * 100vw) - 22px));
}

form#form_contact label.focus:after {
	transform: scaleX(1);
}

form#form_contact label.top-margin {
	margin-top: 70px;
}

form#form_contact input, 
form#form_contact textarea {
	display: block;
	position: relative;
	width: 100%;
	background: none;
	border: none;
	border-bottom: 2px solid rgb(var(--color-light-grey));
	border-radius:0;
	color: rgb(var(--color-dark-grey));
	font-family: 'Muli', sans-serif;
	font-weight: 200;
	font-size: 20px;
	margin: 0 0 2em 0;
	padding: 0.1em;
	-webkit-appearance: none; 
	transition: border-color var(--transition-duration-bt);
}

form#form_contact input:focus {
	border-bottom-color: transparent;
}

form#form_contact textarea {
	height: 30px;
}

form input:-webkit-autofill,
form input:-webkit-autofill:hover, 
form input:-webkit-autofill:focus, 
form input:-webkit-autofill:active {
    -webkit-text-fill-color: rgb(var(--color-dark-grey));
	-webkit-box-shadow: 0 0 0 60px rgb(var(--color-white)) inset !important;
	box-shadow: 0 0 0 60px rgb(var(--color-white)) inset !important;
}

form#form_contact input[type="checkbox"] {
	display: none;
}

form#form_contact label.checkbox {
	margin: 0 0 40px 0;
	padding: 12px 0 0 120px;
}

form#form_contact label.checkbox span {
	font-weight: 200;
	font-size: clamp(16px, (16 / 1920) * 100vw, 20px);
	line-height: 1.7em;
	text-align: left;
	text-transform: none;
	vertical-align: middle;
}

form#form_contact label.checkbox span:before {
	content: "\2715";
	display: block;
	position: absolute;
	left: -120px;
	top: -12px;
	color: rgba(var(--color-dark-grey), 0);
	padding: 0;
	transition: color 0.4s;
}

form#form_contact label.checkbox span:after {
	top: 18px;
}

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

form#form_contact button[type="submit"] {
	margin: 0 0 0 auto;
}

form#form_contact button[type="submit"]:disabled {
	opacity: 0.25;
	pointer-events: none;
}

.error {
	color: #FF0000;
	border-color: #FF0000;
}

.select {
	width: 100%;
	background: none;
	color: rgb(var(--color-dark-grey));
	font-size: 20px;
	font-weight: 200;
	text-align: left;
	text-transform: uppercase;
	margin: 0 0 2em 0;
	padding: 0.1em 0;
}

.select > div.sel_ti {
	position: relative;
	width: 100%;
	border-bottom: 2px solid rgb(var(--color-light-grey));
	margin-top: -7px;
	padding-bottom: 7px;
	transition: border-color var(--transition-duration-bt);
}

.select.show > div.sel_ti {
	border-bottom-color: transparent;
}

.select > div.sel_ti:after {
	content: "";
	display: block;
	position: absolute;
	width: 13px;
	height: 13px;
	top: 50%;
	right: 0;
	background: transparent url(../images/icon-arrow-select-right.svg) right center no-repeat;
	background-size: 8px 16px;
	transform-origin: center;
	transform: translateY(-50%);
	transition: transform 0.4s;
}

.select.show > div.sel_ti:after {
	transform: rotate(90deg) translateX(-50%);
}

.select > div.list {
	position: absolute;
	width: calc(100% + 20px);
	overflow: hidden;
	margin: 2px 0 0 -10px;
	padding: 0 10px 10px 10px;
}

.select ul {
	display: block;
	position: relative;
	height: auto;
	min-height: 0px !important;
	background: rgb(var(--color-white));
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.16);
	transform: translateY(-110%);
	transition: transform var(--transition-duration-bt);
	z-index: 2000;
}

.select.show ul {
	transform: translateY(0);
}

.select li {
	display: list-item;
	cursor: pointer;
	padding: 8px 16px;	
	transition: background var(--transition-duration-bt);
}

.select li:before {
	content: none;
}

.select li:hover {
	background: rgba(var(--color-light-grey), 0.2);
}

.select li.disabled {
	display: none;
	cursor: default;
}

.select li.disabled:hover {
	background: none;
}

.takk {
	display: block;
	position: relative;
	animation: kf-takk 0.8s forwards;
}

footer .takk p {
    margin-top: 1.7em;
}

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


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


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

#lightbox {
	z-index: 2000;
}

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

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

#lightbox button.bt-close {
	position: absolute;
	width: max(30px, (60/1600) * 100vw);
	height: max(30px, (60/1600) * 100vw);
	right: max(10px, (20/1600) * 100vw);
	top: max(10px, (20/1600) * 100vw);
	background: url(../images/icon-close.svg) center center no-repeat;
	background-size: max(22px, (44/1600) * 100vw);
	z-index: 2010;
}

#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;
	background: rgb(var(--color-black));
	box-shadow: 0 0 30px rgba(var(--color-black), 0.9);
    pointer-events: auto;
}

#lightbox div.lightbox-content.gallery {
	width: 95vw;
    height: 95vh;
	padding: max(50px, (100/1600) * 100vw) max(10px, (20/1600) * 100vw);
}

#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: max(10px, (20/1600) * 100vw);
    bottom: max(10px, (20/1600) * 100vw);
}

#lightbox div.lightbox-content.gallery div.ctrl_arr button {
    display: inline-block;
	position: relative;
	width: max(30px, (60/1600) * 100vw);
	height: max(30px, (60/1600) * 100vw);
    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: max(10px, (18 / 1600) * 100vw);
    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;
}

#lightbox div.lightbox-content.lb-360 {
	width: 90vw;
    height: 90vh;
}

#lightbox div.lightbox-content.lb-360 .inner {
	display: grid;
	grid-gap: 20px;
	height: 100%;
}

#lightbox div.lightbox-content.lb-360 .inner a {
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#lightbox div.lightbox-content.lb-360 .inner a:nth-child(1) {
	background-image: url(../images/img-vr-515.jpg);
}

#lightbox div.lightbox-content.lb-360 .inner a:nth-child(2) {
	background-image: url(../images/img-vr-801.jpg);
}

#lightbox div.lightbox-content.lb-360 .inner a:nth-child(3) {
	background-image: url(../images/img-vr-819.jpg);
}


/****  Phase 2  ****/


#lightbox .wrap.lb-phase2 img {
	width: 980px;
	height: 520px;
	object-fit: cover;
}

#lightbox .wrap.lb-phase2 button.bt_close {
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));
}

@media screen and (max-width: 980px) {
    #lightbox .wrap.lb-phase2,
	#lightbox .wrap.lb-phase2 img {
		width: 490px;
		height: 980px;
	}
}

@media screen and (max-width: 640px) {
    #lightbox .wrap.lb-phase2,
	#lightbox .wrap.lb-phase2 img {
		width: calc((490 / 640) * 100vw);
		height: calc((980 / 640) * 100vw);
	}
}


/****  covid-19  ****/


#lightbox .wrap.lb-covid-19 {
	width: calc(100vw - 120px);
	max-width: 960px;
	max-height: calc(100vh - 120px);
	background: #FFFFFF;
	overflow: auto;
}

#lightbox .wrap.lb-covid-19 p, 
#lightbox .wrap.lb-covid-19 ul {
	color: #4c4c43;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	text-align: left;
	margin-bottom: 18px;
}

#lightbox .wrap.lb-covid-19 .inner {
	display: grid;
	grid-template-columns: auto 1fr;
}

#lightbox .wrap.lb-covid-19 .inner > div:nth-child(1) {
	padding: 30px;
}

#lightbox .wrap.lb-covid-19 .inner > div:nth-child(1) img {
	width: 185px;
	height: 83px;
}

#lightbox .wrap.lb-covid-19 .inner > div:nth-child(2) {
	padding: 94px 180px 60px 0;
}

#lightbox .wrap.lb-covid-19 li {
    position: relative;
	padding: 0 0 18px 18px;
}

#lightbox .wrap.lb-covid-19 li:before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
}


@media screen and (max-width: 960px) {
	#lightbox .wrap.lb-covid-19 {
		width: calc(100vw - 60px);
		max-height: calc(100vh - 60px);
	}

	#lightbox .wrap.lb-covid-19 p, 
    #lightbox .wrap.lb-covid-19 ul {
		font-size: 16px;
		line-height: 20px;
		margin-bottom: 20px;
	}

	#lightbox .wrap.lb-covid-19 .inner {
		display: grid;
		grid-template-columns: auto;
		padding: 30px;
	}

	#lightbox .wrap.lb-covid-19 .inner > div:nth-child(1) {
		padding: 0 0 30px 0;
	}

	#lightbox .wrap.lb-covid-19 .inner > div:nth-child(2) {
		padding: 0;
	}

	#lightbox .wrap.lb-covid-19 li {
		padding: 0 0 20px 20px;
	}
}


/****  Le meilleur des deux mondes  ****/


#lightbox .wrap.lb-meilleur {
    width: 90vw;
    max-width: 1470px;
    height: 90vh;
    max-height: 980px;
	background: transparent;
	overflow: auto;
}

#lightbox .wrap.lb-meilleur .inner picture img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#lightbox .wrap.lb-meilleur a.map-plans {
	display: block;
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    top: 0;
}

#lightbox .wrap.lb-meilleur a.map-contact {
	display: block;
    position: absolute;
    width: 40%;
    height: 100%;
    left: 60%;
    top: 0;
}

#lightbox .lightbox_bckg.lb-meilleur {
	display: block;
	background: rgba(76,76,67,0.9);
}

@media screen and (max-width: 768px) {
    #lightbox .wrap.lb-meilleur {
        width: 90vw;
        max-width: 330px;
        height: 90vh;
        max-height: 830px;
    }
    
    #lightbox .wrap.lb-meilleur a.map-plans {
        width: 100%;
        height: 65%;
    }

    #lightbox .wrap.lb-meilleur a.map-contact {
        width: 100%;
        height: 35%;
        left: 0;
        top: 65%;
    }
}


/****  LB - Carte-cadeau 500$  ****/


#lightbox .lightbox-content.lb-carte-cadeau-500 button.bt_close {
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));
}

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

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


/****  LB - 2 mois gratuits  ****/


#lightbox .lightbox-content.lb-2-mois-gratuits button.bt-close {
	background-image: url(../images/icon-close-white.svg);
}

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

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



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

.mobile {
	display: none;
}

.desktop {
	display: block;
}

span.desktop {
	display: inline-block;
}

.preload {
	display: none;
}

@keyframes kf-show-nav {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}

@media screen and (max-width: 1280px) {
	footer > div > div.office,
	footer > div > div.opening {
		grid-column-end: span 4;
	}

	footer > div > div.opening {
		grid-column-start: 4;
		grid-row-start: 2;
	}

	footer > div > div.contact {
		grid-column: 8 / -1;
		grid-row-end: span 2;
	}
	
	footer .logo {
		grid-row-end: span 4;
	}
}

@media screen and (max-width: 960px) {
	.desktop {
		display: none;
	}

	.mobile {
		display: block;
	}
	
	/*************************************
		Button
	 *************************************/


	.bt, 
	.ctrl-arr button, 
	button[type="submit"], 
	form label.checkbox span:before {
		min-width: 40px;
		min-height: 40px;
		font-size: 16px;
		line-height: 20px;
		padding: 8px 10px;
	}

	.bt span {
		display: none;
	}
	
	
	/*************************************
		Header
	 *************************************/

	
	header.fixed {
		position: absolute;
		transition: none;
	}

	header.fixed:before {
		content: none;
	}

	header.hide {
		transform: none;
	}
	
	header.fixed:before {
		opacity: 0;
	}
	
	header nav,
	header.fixed nav {
		padding: 0;
		transition: none;
	}
	
	header nav ul {
		flex-direction: column;
		row-gap: 18px;
		justify-content: flex-start;
		font-size: 16px;
		align-items: flex-start;
		/*padding: 18px 56px;*/
		padding: 18px calc((50 / 640) * 100vw);
	}
	
	header nav ul li {
		color: rgb(var(--color-white));
		transition: none;
	}
	
	header nav ul li:not(.home),
	header.fixed nav ul li:not(.home) {
		display: none;
		margin: 0;
		margin-left: calc(56px - ((50 / 640) * 100vw));
	}
	
	header nav ul li.home,
	header.fixed nav ul li.home {
		flex-grow: 0;
		transform: none;
	}
	
	header.fixed nav ul li.home div.logo {
		clip-path: none;
	}
	
	header nav ul li.home a {
		transform: none;
		transition: none;
	}
	
	header nav ul li.home img,
	header.fixed nav ul li.home img {
		transition: none;
	}
	
	header nav ul li.home + li {
		margin-top: 18px;
	}
	
	
	/*--  nav-open  --*/

	body.nav-open {
		overflow: hidden;
	}

	body.nav-open header {
		position: fixed;
		width: auto;
		left: auto;
		right: 0;
		min-height: 100vh;
		background: rgb(var(--color-medium-grey));
		animation: kf-show-nav 0.6s cubic-bezier(0.25,0.25,0.25,1) both;
		z-index: 1300;
	}
	
	body.nav-open header nav {
		height: 100vh;
		padding-bottom: 18px;
		overflow: auto;
	}
    
	body.nav-open header nav ul li:not(.home) {
		display: block;
	}
	
	body.nav-open header nav ul li.home a {
		height: 78px;
	}
	
	body.nav-open header nav ul li.promotion {
		margin-top: 12px;
	}
	
	body.nav-open header nav ul li.promotion a {
		margin-left: calc(-0.75em - 2px);
	}
	
	body.nav-open header div.alt {
		display: block;
		color: rgb(var(--color-white));
		font-size: 14px;
		padding: 0 56px;
	}
	
	body.nav-open header div.alt + div.alt {
		margin-top: 18px;
	}
	
	body.nav-open header div.alt span:first-child {
		color: rgb(var(--color-white));
		font-size: 16px;
		text-transform: uppercase;
	}

	
	/*--  nav ico  --*/

    header div.ico {
        display: block;
        position: fixed;
		right: 30px;
		top: 30px;
		background: rgba(var(--color-white),0.6);
		border: solid 2px rgba(var(--color-dark-grey), 0.6);
		padding: 12px 11px;
        cursor: pointer;
		transition: background-color 0.2s linear;
        z-index: 20;
    }

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

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

	body.nav-open header div.ico span {
		transition: width 0s 0.3s, 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% - 1px);
    }

    header div.ico span:nth-child(3) {
        top: calc(100% - 2px);
        right: 0;
    }
	
	body.nav-open header div.ico span:nth-child(1) {
        top: calc(50% - 1px);
        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% - 1px);
        width: 100%;
        transform: rotate(-45deg);
    }
	
	.widget {
		position: sticky;
		width: 100vw;
		left: 0;
		top: auto;
		bottom: 0;
		border-radius: 0;
		font-size: min(24px, (21 / 375) * 100vw);
		line-height: 1.25em;
	}
	
	
	/*************************************
		Sections
	 *************************************/


	.container {
		padding-top: calc(36px + 70px);
	}

	section p, 
	section ul.list li,
	section.privacy h3,
	section.privacy li {
		font-size: 16px;
		line-height: 24px;
		margin: 0 0 24px 0;
	}

	section ul {
		margin: 0 0 24px 0;
	}

	section ul.list li {
		margin-bottom: 12px;
		padding: 0 0 0 14px;
	}
	
	.mask-gradient:after {
		content: none;
	}
	
	section.header:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 110vw;
		left: 0;
		top: 0;
		background-image: linear-gradient(rgba(var(--color-white),0.9), rgba(var(--color-white),0.5) 30%, rgba(var(--color-white),0) 50%);
	}

	section.header .bt.contact {
		display: none;
	}

	section.header div.header-text h2 img {
		filter: none;
	}

	section.header div.header-text:not(.header-plan) {
		position: relative;
		left: auto;
		top: auto;
		padding: calc((50 / 640) * 100vw);
	}

	section.header div.header-text.header-plan {
		width: calc(100vw - ((600/1920) * 100vw));
	}
	
	section.header .bckg-video {
		height: 110vw;
	}

	section.header iframe {
		width: calc((16 / 9) * 110vw);
		height: 110vw;
		margin-left: calc((100vw - ((16 / 9) * 110vw)) / 2);
	}

	section.intro:before {
		right: auto;
		left: 0;
	}

	section.intro .text-block {
		padding: calc((50 / 640) * 100vw);
		margin: 0;
	}

	section.intro.w-7cols .text-block,
	section.intro.w-7cols.promo .text-block {
		width: 100vw;
		margin: 0;
	}

	section.intro.w-9cols:before,
	section.intro.w-10cols:before {
		width: 100%;
		max-height: none;
	}
	
	section.intro.w-9cols .text-block, 
	section.intro.w-10cols .text-block {
		width: 100%;
	}

	section.quote {
		display: none;
	}

	section.home-project {
		background-position: center top;
		background-size: calc((540 / 640) * 100vw) calc((265 / 640) * 100vw);
		margin-top: calc((50 / 640) * 100vw);
	}
	
	.spots.left,
	.spots.right {
		opacity: 0;
	}

	section.center > div {
		width: 100vw;
		padding: calc((50 / 640) * 100vw);
	}

	div.cta-container {
		display: none;
	}

	section.neighbourhood .text-block {
		margin: 0;
		padding: calc((50 / 640) * 100vw);
		z-index: auto;
	}

	section.home-plans > div {
		display: block;
		margin-left: calc((50 / 640) * 100vw);
		padding: calc((50 / 640) * 100vw);
	}

	section.home-plans > div > img {
		width: calc((390 / 640) * 100vw);
		margin: calc((50 / 640) * 100vw);
	}

	section.home-plans .text-block {
		width: 100%;
	}

	section.contact-form:before {
		content: none;
	}

	section.contact-form .bckg {
		display: none;
	}

	section.contact-form div.text-block.bckg-white {
		background: rgb(var(--color-dark-grey));
		padding: calc((100 / 640) * 100vw) 0 0 0;
	}

	section.contact-form div.text-block.bckg-white:before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: calc((80 / 640) * 100vw);
		background: url("../images/bckg-pattern-contact.svg") center bottom repeat-x;
		background-size: calc((50 / 640) * 100vw) auto;
	}

	section.contact-form h3, 
	section.contact-form h4, 
	section.contact-form p:not(.note) {
		color: rgb(var(--color-white));
		padding: 0 calc((50 / 640) * 100vw);
	}

	section.contact-form form {
		background: rgb(var(--color-white));
		padding: calc((50 / 640) * 100vw);
	}

	section.contact-form.promo p {
		/*background: rgb(var(--color-white));
		color: rgb(var(--color-dark-grey));*/
		margin: 0;
		padding: 8px calc((50 / 640) * 100vw);
	}

	section.contact-footer.bckg-dark-blue-grey {
		background: transparent;
		padding: calc((50 / 640) * 100vw);
	}

	section.contact-footer.bckg-dark-blue-grey:not(.header) h2, 
	section.contact-footer.bckg-dark-blue-grey h3, 
	section.contact-footer.bckg-dark-blue-grey p {
		color: rgb(var(--color-dark-grey));
	}

	.text-block-2-cols {
		grid-gap: calc((50 / 640) * 100vw);
		grid-template-columns: 100%;
		width: calc((540 / 640) * 100vw);
		margin: 0;
	}
	
	
	/*************************************
		Plans
	 *************************************/
	
	
	section.plans > div {
		padding: 0;
	}
	
	.plans-type-selector {
		flex-direction: column;
		justify-content: flex-start;
		row-gap: min(30px, calc((135/1920) * 100vw));
		position: relative !important;
		padding: calc((135/1920) * 100vw);
	}
	
	form[name="plan_selector"] div.bedrooms-selector label,
	form[name="plan_selector"] div.available-date-selector input {
		height: 1.75em;
		font-size: 16px;
		padding: 0.25em 0.5em;
	}
	
	form[name="plan_selector"] div.plans-type-selector div.bedrooms-selector > div {
		flex-flow: row wrap;
		column-gap: calc((67.5/1920) * 100vw);
		row-gap: calc((67.5/1920) * 100vw);
	}
	
	
	div.ui-slider {
		margin-left: 10%;
	}
	
	div.ui-slider,
	div.ui-slider-range {
		width: 80%;
	}
	
	
	/* -- Plans header -- */
	
	.plans-building {
		width: 100vw;
		height: calc((1898.5 / 3433) * 170vw);
		overflow: hidden;
	}
	
	.plans-building .building {
		width: 120vw;
		height: 100%;
		margin-left: -15vw;
	}

	
	/* -- Floor plan -- */

	
	.plans-unit-selector {
		width: 100%;
		padding: calc((135/1920) * 100vw);
	}
	
	
	/* -- Unit -- */

	div.plans-unit {
		padding: calc((135/1920) * 100vw);
	}
	
	div.plans-unit > div,
	section.plans div.unit-images {	
		grid-column: 1 / -1;
	}
	
	section.plans div.unit-images {
		grid-row: auto;
	}
	
	div.unit-cta,
	div.unit-tools {
		display: block;
		text-align: center;		
	}
	
	div.unit-cta {
		bottom: calc((min(24px, (21 / 375) * 100vw) * 3.05) + ((135/1920) * 100vw));
	}
	
	div.unit-tools div.share {
		display: block;
		margin-top: 1.5em;
	}
	
	
	/*************************************
		Google Maps info window
	 *************************************/


	.map-container {
		width: 100vw;
		height: calc((830 / 640) * 100vw);
		margin: 0 0 calc((50 / 640) * 100vw) 0;
	}

	#map-canvas {
		width: 100vw;
		height: calc((470 / 640) * 100vw);
		margin: 0;
	}

	#map-list {
		display: flex;
		flex-flow: row nowrap;
		column-gap: calc((20 / 640) * 100vw);
		width: 100vw;
		height: calc((360 / 640) * 100vw);
		top: auto;
		bottom: 0;
		padding: calc((20 / 640) * 100vw);
	}

	#map-list li > div {
		width: calc((290 / 640) * 100vw);
		height: calc((320 / 640) * 100vw);
		border: solid 1px #E6E6E6;
		padding: calc((20 / 640) * 100vw);
	}
	
	
	/*************************************
		Footer
	 *************************************/


	footer {
		background-position: calc((50 / 640) * 100vw) bottom;
		background-size: calc((244 / 640) * 100vw) auto;
		padding: calc((50 / 640) * 100vw);
		padding-bottom: 0;
	}

	footer > div {
		grid-gap: calc((20 / 375) * 100vw);
	}
	
	footer .spots {
		padding-top: calc(var(--footer-spot-size-mobile) * 0.7) !important;
	}

	footer .spots > div {
		margin-bottom: calc(var(--footer-spot-size-mobile) * -1);
	}

	footer .spots > div > span {
		font-size: var(--footer-spot-size-mobile);
		margin: -0.7em -0.1em 0 -0.1em;
	}

	footer .spots > div:nth-child(2),
	footer .spots > div:nth-child(3) {
		top: calc(var(--footer-spot-size-mobile) * 0.7);
	}
	
	footer .spots.btm {
		grid-row-start: 9 !important;
		position: relative;
		margin: 0 calc((-50 / 640) * 100vw) !important;
	}
	
	footer > div > div {
		grid-column: 1 / span 16 !important;
		grid-row: auto !important;
		font-size: 16px;
		line-height: 24px;
	}

	footer .phone {
		grid-column: 1 / span 8 !important;
	}

	footer .social {
		grid-column: 9 / span 8 !important;
	}

	footer .logo {
		grid-column: 1 / -1 !important;
		grid-row-start: 1 !important;
	}
	
	footer .contact {
		grid-row-start: 2 !important;
	}
	
	footer .logo img {
		width: calc((150 / 640) * 100vw);
		height: calc((237 / 640) * 100vw);
	}

	footer .partners {
		grid-column: 1 / -1 !important;
		text-align: left;
	}

	footer .copyright {
		font-size: 14px;
		line-height: 16px;
		text-align: left;
	}


	/*************************************
		Form
	 *************************************/


	form#form_contact {
		display: block;
		position: relative;
		font-size: 0px;
	}

	form#form_contact label, 
	form#form_contact input, 
	form#form_contact textarea, 
	form#form_contact label.checkbox span, 
	.select {
		font-size: 16px;
		margin-bottom: 40px;
	}

	form#form_contact label {
		margin-bottom: -16px;
	}

	form#form_contact label:after {
		top: 26px;
	}

	form#form_contact textarea {
		height: 24px;
	}

	form#form_contact label.checkbox span:before {
		padding: 0;
	}

	.select {
		width: calc((540 / 640) * 100vw);
	}

	.select > div.list {
		width: calc(((540 / 640) * 100vw) + 12px);
	}
}

@media screen and (max-width: 480px) {
	body.nav-open header {
		width: 100vw;
	}
}