@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700&display=swap');

:root {
	--font:'Poppins', Helvetica, Arial, serif;
	--fast:all 0.3s ease-out;
	--slow:all 0.6s ease-out;
	--primary:#0B3954;
	--grey:#444;
	--link:#4f46e5;
	--border:1px solid #ddd;
	--shadow:0px 4px 8px rgba(0,0,0,0.05);
	--radius:12px;
	--heavy:700;
	--bold:500;
	--basic:400;

}

* { 
	font-family:var(--font);
	margin:0;
	padding:0;
	outline:none;
	box-sizing:border-box;
}
html 	{-webkit-text-size-adjust:100%; overflow:-moz-scrollbars-vertical; overflow-y:scroll}
body	{font-family:var(--font); font-size:16px; line-height:24px; font-weight:var(--basic); background-color:#fff}
a		{text-decoration:none; color:var(--link)}

h1 {font-size:2em; line-height:1.2em; margin-bottom:16px; font-weight:var(--heavy); letter-spacing:-0.5px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
h2 {font-size:1.0em; line-height:1.2em; font-weight:var(--bold);}
h3 {font-size: 0.875em; line-height: 1.2em; margin-bottom: 32px; font-weight: var(--heavy); letter-spacing: 0.5px; text-transform: uppercase;}
h4 {font-size:1.0em; line-height:1.2em; margin-bottom:16px; font-weight:var(--heavy)}

.icon {height:18px; width:auto; position:relative; top:3px; margin-right:8px}
img[src$=".svg"].icon {filter: brightness(0%)}

header {width:100%; height:480px; background-size:cover; background-position:center; margin-bottom:64px;}
header .shadow {width:100%; height:100%; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.5));}
header .details {width:1380px; height:100%; color:#fff; text-shadow:1px 2px 8px rgba(0,0,0,0.8); position: relative; padding-bottom:64px; margin:0 auto; display: flex; flex-direction: row; justify-content: space-between; align-items:flex-end}
header .details > div {width:60%}
header .details img[src$=".svg"] {filter: brightness(0%) invert(100%);}
header ul {list-style-type:none; font-weight:var(--bold); margin: 0 0 12px 0;}
header ul li {display: inline; margin:0 24px 0 0}
header h2 a {color:#a7a2ff}

header .logo {background:#fff; padding:24px; border-radius:156px; position: absolute; top: 36px; left:0; box-shadow: 0 0 24px rgba(0,0,0,0.2);}
header .logo img {max-height:72px; max-width:96px; height:auto; width:auto; display: block;}
header .logo img[src$=".svg"] {filter: invert(0%); height:56px;}

header .share {background:var(--link); padding:4px 8px; border-radius:36px; display: flex; flex-direction: row; flex-wrap: nowrap; position: absolute; top: 36px; right:0;}
header .share div {padding:8px}
header .share div a {color:#fff; text-shadow:none}

.content {width:1380px; margin:0 auto 64px; display: flex; flex-direction: row; justify-content: space-between; align-items:stretch}
.left {width:660px;}
.right {width:660px;}
.left .sticky {position: sticky; top: 32px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.right .sticky {position: sticky; top: 32px;}

.section {margin:0 0 72px 0}

iframe {width:660px; height:371px}

.slider .slides {display: flex; flex-wrap: wrap; justify-content: space-between;}
.slider .slides a div {width:320px; height:240px; margin-top:20px; position:relative; background-position:center; background-size:cover; border-radius:var(--radius); transition: all 1s; filter:brightness(100%)}
.slider .slides a div:after {transition: all 1s; opacity:0; content:''; position:absolute; top:calc(50% - 16px); left:calc(50% - 16px); background-image:url(files/plus.svg); height:32px; width:32px; background-size:32px 32px;}
.slider .slides a:hover div {transition: all 1s; filter:brightness(80%)}
.slider .slides a:hover div:after {transition: all 1s; opacity:1;}

.slider .slides a:nth-child(1) div {width:660px; height:500px; margin-top:0;}

.summary {display: flex; flex-direction: row; justify-content: space-between; padding:24px 28px; background:#f4f4f4; border-radius:var(--radius); margin-bottom:12px}
.summary > div > div:nth-child(1) {font-size:14px; line-height:18px; color:var(--grey); margin-bottom:8px}
.summary > div > div:nth-child(2) {font-size:15px; line-height:19px; font-weight:var(--heavy); white-space:nowrap}

.asterix {font-size:0.9375em; font-style: italic; color:#666}

.description {margin-top:32px}
.description p {margin:0 0 8px;}

.facts {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-bottom:48px}
.facts > div {width:45%; display: flex; flex-direction: row; justify-content: space-between; margin:0 0 16px}
.facts > div > div:nth-child(1) {font-size:14px; line-height:18px; color:var(--grey); padding-right:16px}
.facts > div > div:nth-child(2) {font-size:15px; line-height:19px; font-weight:var(--heavy); white-space:nowrap}

.spaces {display: flex; flex-direction: row; gap:11%; flex-wrap: wrap; justify-content: flex-start; margin-bottom:48px}
.spaces > div {width:26%; display: flex; flex-direction: row; justify-content: space-between; margin:0 0 12px}
.spaces > div > div:nth-child(1) {font-size:14px; line-height:18px; color:var(--grey); padding-right:16px}
.spaces > div > div:nth-child(2) {font-size:15px; line-height:19px; font-weight:var(--heavy); white-space:nowrap}

.download {}
.download > div {margin-bottom:12px}
.download > div:last-child {margin-bottom:0;}
.download > div a {font-size:15px; line-height:19px; font-weight:var(--heavy)}
.download > div p {margin-left:26px; font-size:13px; line-height:18px; color:var(--grey);}

.area {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:32px 0 48px}
.area > div {width:45%; margin-bottom:24px}
.area > div > div {display: flex; flex-direction: row; justify-content: space-between; margin:0 0 12px}
.area > div > div > div:nth-child(1) {font-size:14px; line-height:18px; color:var(--grey); padding-right:16px}
.area > div > div > div:nth-child(2) {font-size:15px; line-height:19px; font-weight:var(--heavy); white-space:nowrap}

.features {display: flex; flex-direction:row; gap:11%; flex-wrap: wrap; justify-content: space-between; margin-bottom:40px}
.features > div {width:26%; margin:0 0 24px;}
.features > div > div {font-size:14px; line-height:18px; margin:0 0 12px; color:var(--grey);}

.contact {padding:24px 28px; background:#f4f4f4; border-radius:var(--radius); margin-bottom:32px}
.contact > div {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;}
.contact > div p {margin: 0 0 8px; font-size:15px; line-height:18px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: nowrap;}
.contact > div h2 {margin: 0 0 12px; font-size: 1.125em;}
.contact > div:nth-child(2) {font-size:15px; line-height:22px; color:#666; margin-top:16px}
.contact > div .image {height: 96px; width:96px; margin-right:24px; border-radius:48px; background-size:cover; background-position:center;}

footer {padding:64px 10%; font-size:0.875em; text-align:center; margin-top:96px; background:#f4f4f4}
footer img[src$=".svg"].icon {height:20px; top:5px; margin-right:4px; filter: brightness(100%)}


@media only screen and (max-width:1440px) {
	header .details {width:1140px;}
	.content {width:1140px;}
	.left {width:540px}
	.right {width:540px;}
	
	.slider .slides a div {width:260px; height:200px;}
	.slider .slides a:nth-child(1) div {width:540px; height:380px;}
	
	.spaces {gap:10%}
	.spaces > div {width:45%}
	
	iframe {width:540px; height:303px;}
}

@media only screen and (max-width:1280px) {
	header .details {width:980px;}
	.content {width:980px;}
	.left {width:470px}
	.right {width:470px;}
	
	.slider .slides a div {width:225px; height:160px;}
	.slider .slides a:nth-child(1) div {width:470px; height:320px;}
	
	header .details > div {width:75%}
	
	.features {gap:10%}
	.features > div {width:45%}
	
	iframe {width:470px; height:264px;}	
	
	.contact > div {flex-direction:column;}
	.contact > div .image {margin-bottom:16px;}

}

@media only screen and (max-width:1024px) {
	
	h1 {font-size:1.5em; line-height:1.2em; margin-bottom:12px; font-weight:var(--heavy); letter-spacing:-0.2px}
	
	header {width:100%; height:360px; background-size:cover; background-position:center; margin-bottom:64px;}
	header .details {width:90%; padding-bottom:48px;}
	header .details > div {width:80%}
	header ul {margin: 0 0 6px 0;}
	header ul li {margin:0 18px 0 0}
	
	header .logo {padding:18px; top: 36px;}
	header .logo img {max-height:42px; max-width:84px; height:auto; width:auto; display: block;}
	header .logo img[src$=".svg"] {height:42px;}
	
	.slider {width:100%; text-align: center; overflow: hidden}
	.slider .slides {display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;}
	.slider .slides a div, .slider .slides a:nth-child(1) div {width:280px; height:190px; margin:0 16px 8px 0}
	.slides::-webkit-scrollbar {width:6px; height:6px;}
	.slides::-webkit-scrollbar-thumb {background:var(--link); border-radius:3px;}
	.slides::-webkit-scrollbar-track {background: transparent;}
	.slides > div {scroll-snap-align: start; flex-shrink: 0; width: 300px; height: 300px; margin-right: 50px; border-radius: 10px; background: #eee; transform-origin: center center; transform: scale(1);
	transition: transform 0.5s; position: relative; display: flex; justify-content: center; align-items: center; font-size: 100px;}
	
	.content {width:90%; flex-wrap: wrap; align-items:stretch}
	.left {width: 100%; margin-bottom:48px}
	.right {width: 100%;}
	
	.left {position: relative; display: flex; align-items: center; /**overflow-y: hidden;**/ box-sizing: content-box;}		
	.left .sticky {overflow-y:hidden}
		
	.spaces {gap:11%}
	.spaces > div {width:26%}
	
	iframe {width:100%; height:480px;}
	
	.features {gap:11%}
	.features > div {width:26%}
	
	.contact > div {flex-direction:row;}
	.contact > div .image {margin-bottom:0;}

}
@media only screen and (max-width:860px) {
	
	.slider .slides a div, .slider .slides a:nth-child(1) div  {width:260px; height:180px; margin:0 16px 8px 0}
	
	header .details > div {width:100%}
	
	.spaces {gap:5%}
	.spaces > div {width:30%}
	
	iframe {height:420px;}

}
@media only screen and (max-width:768px) {
	
	header .details {padding-bottom:36px;}
	
	.slider .slides a div, .slider .slides a:nth-child(1) div {width:240px; height:160px;}
	
	.spaces {gap:10%}
	.spaces > div {width:45%}

	iframe {height:360px;}
	
	.area > div {width: 45%;}
	
	.features {gap:10%}
	.features > div {width:45%}
	
	.contact > div {flex-direction:column;}
	.contact > div .image {margin-bottom:16px;}
	
}
@media only screen and (max-width:640px) {
	
	h1 {font-size:1.375em; letter-spacing:0}
	
	header .logo {padding:16px; top:24px;}
	header .logo img {max-height:36px; max-width:64px; height:auto; width:auto; display: block;}
	header .logo img[src$=".svg"] {height:36px;}
	
	header .share {top:24px;}
	header .share div span {display:none}
	
	header .shadow {background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6));}
	header .details {padding-bottom:24px;}
	header ul {list-style-type:none; font-weight:var(--bold); margin: 0 0 8px 0;}
	header ul li {display: block; margin:0 0 4px 0}
	
	.summary {flex-wrap: wrap; padding:24px 28px 8px;}
	.summary > div {width:50%; margin-bottom:16px;}
	.summary > div:nth-child(2n) {text-align:right}
	.summary > div > div:nth-child(1) {margin-bottom:2px}
	
	.facts > div {width: 45%;}
	
	iframe {height:320px;}
	
	.area > div {width:100%;}
	
}
@media only screen and (max-width:480px) {
		
	.summary {padding:18px 20px 2px;}
	
	.facts > div {width: 100%;}
	
	.spaces {gap:0}
	.spaces > div {width:100%}
	
	.features {gap:0}
	.features > div {width:100%}
	
	iframe {height:240px;}
	
	.contact {padding:18px 20px;}
	
}