@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 300; src: url('fonts/inter-v13-latin-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('fonts/inter-v13-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('fonts/inter-v13-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family:"loos"; font-style: normal; font-weight: 400; font-stretch: normal; src: url("fonts/loos.woff2") format("woff2"),url("fonts/loos.woff") format("woff"),url("fonts/loos.otf") format("opentype"); }
:root {
	--font: "Inter", sans-serif;
	--heading: "loos", sans-serif;
    --color: #36414b;
	--accent: #43978d;
	--accent-c: #fff;
	--hover: #429285;
	--accent-border: #429285;
	--accent-light: #b9dfd1;
	--nav-hgt: 4rem;
	--nav-transition: 0.2s;
	--zoom: 10%;
	--transition: 1.5s;
	--card: 30%;
	--compare: 23%;
	--column: 50%;
	--content-width: 1600px;
}
/* Reduce motion */
@media (prefers-reduced-motion) {
	:root {
		--zoom: 0%;
		--nav-transition: 0s;
		--transition: 0s;
	}
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-font-smoothing: antialiased; }
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
header, main, footer { width: 100%; clear: both; }
html, body { width: 100%; height: 100%; padding: 0; margin: 0; font-family: var(--font); font-size: 16px; color: var(--color); background-color: #FFF; }
body { min-height: 100%; }
a.skip { background-color: var(--accent); color: var(--accent-c); position: absolute; height: 3rem; line-height: 3rem; font-size: 1rem; top: -3rem; left: 0; padding: 0 0.5rem; border-radius: 0 0 1rem 0; transition: .3s; z-index: 950;}
a.skip:focus { top: 0; }
h1, h2, h3 { display: inline-block; text-align: left; font-family: var(--heading); text-transform: uppercase; padding: 0 0 0.5em 0; margin: 0 auto; }
h1 { font-size: 3.875rem; }
h2 { font-size: 2rem; padding-top: 0.5em; }
h3 { font-size: 1.5rem; padding-top: 0.5em; }
i, em { font-style: italic; }
b, strong { font-weight: bold; }
sub { vertical-align: sub; }
sup { vertical-align: super; }
p, ul, ol { margin: 0 auto 1.5em auto; line-height: 1.5em; }
p.small { font-size: 0.8em; }
ul, ol { list-style-position: inside; list-style-type: none; }
a:HOVER { color: var(--hover); }
a { text-underline-offset: 0.1em; }
img { max-width: 100%; }
main, footer > div { width: 100%; margin: 0 auto; }
main { min-height: calc(100% - var(--nav-hgt)); margin-top: var(--nav-hgt); padding: 0 0 2rem; }
main a, main a:VISITED { color: var(--accent); }
main > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; width: 96%; margin: 0 auto; }
main > div:not(:has(div.slide_container)) { margin: 2rem auto; justify-content: center; }
.columns { width: 90%; row-gap: 2rem; }
.columns:first-child { width: 100%; background-color: var(--accent); color: var(--accent-c); }
.columns:first-child a, .columns:first-child a:visited { color: var(--accent-c); }
.columns > div { flex: 0 0 var(--column); padding: 4rem 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.columns > div:only-child > div { width: 66.67%; max-width: 1020px; }
.columns > div:not(.video, .background, :only-child) > div, .columns:not(:first-child) > div { width: 100%; /*width: 66.67%;*/ max-width: 640px; box-sizing: content-box; }
.columns > div { border-radius: 0.125rem; }
.columns > div:nth-child(odd) { align-items: flex-end; padding-right: 4rem; }
.columns > div:nth-child(even) { padding-left: 4rem; }
.columns > div:only-child { padding-inline: 0; align-items: center; }
.columns > div.video, .columns > div.background { position: relative; padding: 0; min-height: 50vh; }
.columns:not(:first-child) > div.video, .columns:not(:first-child) > div.background { border-radius: 1rem; }
.columns > div.video > div { position: absolute; inset: 0; }
.columns video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cards { gap: 2rem; }
.cards > div { flex: 0 0 var(--card); margin: 0.5rem 0; }
.columns > div:only-child h1, .columns > div:only-child h2, .columns > div:only-child h3 { display: block; text-align: center; }
.cards .title { position: absolute; bottom: 1rem; right: 1rem; background-color: var(--accent); color: var(--accent-c); font-weight: bold; padding: 0.5rem; margin: 0; z-index: 5; }
.cards .text { position: absolute; left: 1rem; top: 100%; transition: top var(--transition); background-color: rgba(255,255,255,0.75); color: var(--accent); padding: 0.5rem; margin: 0; }
.cards > div:hover .text, .cards > div:focus-within .text { top: 1rem; }
.cards .text:empty { display: none; }
.columns ul li::before, li.pro::before, li.con::before { content: ""; background-image: url('images/check.svg'); background-size: contain; display: inline-block; width: 1em; height: 1em; position: relative; left: -1.4rem; margin-right: -1rem; }
ul li.con::before { background-image: url('images/fail.svg'); }
main > div > div:only-child, main > div > div.wide:nth-child(odd), main > div > div.wide:nth-child(even) { flex: 0 0 100%; padding: 2rem 0; }
.columns > div.background { padding: 2rem 2rem; }
.cta > div:last-child { width: fit-content; min-width: 50%; margin: 0 auto; }
.cta p, .cta ul, .cta ol { margin-bottom: 0; }

.background, .right { position: relative; display: flex; align-items: center; overflow: hidden; }
.background > div:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; transition: var(--transition); z-index: 5; }
.background:hover > div:first-child { top: calc(var(--zoom) / -2); left: calc(var(--zoom) / -2); right: calc(var(--zoom) / -2); bottom: calc(var(--zoom) / -2); }
.background > div:last-child { margin: 0 2rem; padding: 1rem; z-index: 10; }

.columns .background > div:last-child:not(:empty) { background-color: rgba(255,255,255,0.6); border-radius: 0.125rem;}

.background-image { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 27vw; }
.background-image > div:first-child { position: relative; display: flex; align-items: center; overflow: hidden; }
.background-image > div:first-child > img { object-fit: contain; border-radius: 1rem; }
.columns:first-child .background-image > div:first-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; }
.columns:first-child .background-image > div:first-child > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

div.carousel { position: relative; padding: 4rem 0; overflow: hidden; text-align: center; }
div.carousel div.scroll { width: 100%; max-width: 100%; overflow: hidden; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
div.carousel div.controls { position: absolute; top: calc(50% - 1.5rem); left: 0; width: 100%; height: 3rem; }
div.carousel div.controls button { position: absolute; left: 2rem; width: 3rem; height: 3rem; background-color: var(--accent); border-radius: 50%; border: 0; box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16); padding: 0; margin: 0; z-index: 100; }
div.carousel div.controls button:last-of-type { left: unset; right: 2rem; }
div.carousel div.controls button > svg { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; color: #FFF; }
div.carousel div.controls button:first-of-type > svg { transform: rotate(180deg); }
div.carousel div.controls button:disabled { opacity: 0.25; }
div.carousel ul { display: flex; gap: 2rem; align-items: stretch; padding: 0 0 0 5%; margin: 0 auto; list-style: none; }
/*div.carousel div.scroll.center ul { justify-content: center; }*/
div.carousel ul li { position: relative; flex: 0 0 25vw; min-width: 16rem; max-width: 30rem; /*overflow: hidden;*/ scroll-snap-align: center; z-index: 10; box-sizing: border-box; /*display: flex; align-items: flex-end; padding: 2rem;*/ text-align: left; background-color: var(--accent); }
div.carousel ul li img { /*position: absolute; top: 0; left: 0;*/ width: 100%; /*height: 100%;*/ aspect-ratio: 4/5; padding: 0; margin: 0; object-fit: cover; object-position: center; -webkit-transform: translate3d(0, 0, 0); /* Fix for Safari bug */ z-index: -1; }
div.carousel ul li h3 { position: absolute; top: clamp(16.5rem, calc(30vw - 2.5rem), 33.5rem); left: 1rem; background-color: var(--accent); color: var(--accent-c); font-weight: bold; padding: 0.5rem; margin: 0; }
/*.cards .text { position: absolute; left: 1rem; top: 100%; transition: top var(--transition); background-color: rgba(255,255,255,0.75); color: var(--accent); padding: 0.5rem; margin: 0; }
.cards > div:hover .text, .cards > div:focus-within .text { top: 1rem; }*/
div.carousel ul li div { padding: 1rem 1.5rem; color: #FFF; }
div.carousel ul li div * { color: #FFF; }

main a.cta_btn { display: block; width: fit-content; text-decoration: none; line-height: 2.5rem; padding: 0 1rem; margin: 1em auto; }
div.slide { opacity: 0; transition: opacity var(--transition); background-size: contain; background-position: center; background-repeat: no-repeat; }
div.slide:first-child { opacity: 1; }
div.album { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-evenly; }
a.album { position: relative; display: inline-block; vertical-align: top; width: 10rem; height: 10rem; text-align: center; border: 0.25rem solid #FFF; margin: 0; overflow: hidden; transition: border-color var(--transition); }
a.album:hover { border-color: var(--hover); }
a.album img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: var(--transition); }
a.album:hover img { width: calc(100% + var(--zoom)); max-width: calc(100% + var(--zoom)); height: calc(100% + var(--zoom)); top: calc(var(--zoom) / -2); left: calc(var(--zoom) / -2); }
/* Form */
label { display: block; width: calc(100% - 1rem); line-height: 1.5rem; font-family: var(--font); font-size: 1rem; margin: 0 0 0.5rem 0.5rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea, button { appearance: none; box-sizing: border-box; width: calc(100% - 1rem); max-width: 30rem; height: 2rem; line-height: 1.5rem; font-family: var(--font); font-size: 1rem; padding: 0.25rem 0.5rem; margin: 0 0 1rem 0; border-radius: 0.25rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea { border: 1px solid #000; padding-right: 2rem; background-position: center right 0.5rem; background-size: 1rem; background-repeat: no-repeat; }
textarea { height: 6rem; }
select{ background-image: url('images/select.svg'); }
input:invalid, textarea:invalid { background-image: url('images/fail.svg'); }
input:valid, textarea:valid { background-image: url('images/pass.svg'); }
input { accent-color: var(--accent); }
input[type="file"] { background: unset; }
label input { margin: 0 0.5rem 0 0; }
fieldset { width: calc(100% - 1rem); max-width: 20rem; box-sizing: border-box; background-color: var(--accent-light); color: var(--color); border-radius: 0.5rem; padding: 1rem 0.5rem 0; margin: 0 0 1rem 0; }
fieldset label { margin-left: 0; }
label.file { height: auto; width: calc(100% - 1rem); max-width: 30rem; box-sizing: border-box; background-color: var(--accent-light); color: var(--color); border-radius: 0.5rem; padding: 0.5rem; margin: 0 0 1rem 0; }
legend { position: relative; top: 1.25rem; margin: 0 0 0.75rem 0; }
button, main a.cta_btn, main a.cta_btn:visited { font-weight: bold; border: 0; height: 2.5rem; background-color: var(--accent); color: var(--accent-c); border-radius: 0.5rem; }
button:hover, button:focus, main a.cta_btn:hover, main a.cta_btn:focus { background-color: var(--hover); }
.columns:first-child button, main .columns:first-child a.cta_btn, main .columns:first-child a.cta_btn:visited { background-color: var(--accent-c); color: var(--accent); }
form.steps { overflow: hidden; display: flex; background: linear-gradient(0deg, var(--accent), var(--accent)) no-repeat left 0% top; background-size: 50% 0.5rem; padding: 1rem 0 0 0; transition: background-position 0.2s; }
form.stepped { background-position: left 100% top; }
.form_step_1, .form_step_2 { flex: 0 0 100%; position: relative; left: 0; transition: left 0.2s; padding: 0 0.5rem; }
.stepped .form_step_1, .stepped .form_step_2 { left: calc(-100% - 0.5rem); }
/* Header */
header { position: fixed; top:0; left: 0 ; margin: 0; height: var(--nav-hgt); width: 100%; padding: 0; background-color: #FFF; font-family: var(--heading); font-size: 0.875rem; z-index: 900; transition: height var(--nav-transition), background-color var(--nav-transition), color var(--nav-transition); }
header div.menu_container { text-align: right; height: var(--nav-hgt); width: var(--content-width); max-width: 100%; margin: 0 auto; padding: 0; transition: height var(--nav-transition); }
header a#logo { float: left; max-width: 80%; height: calc(var(--nav-hgt) - 1rem); margin: 0.5rem 2.5%; transition: height var(--nav-transition); color: inherit; }
header a#logo svg { max-width: 100%; height: calc(var(--nav-hgt) - 1rem); vertical-align: middle; transition: height var(--nav-transition); }
header a#logo svg path { fill: var(--accent); }
header li a, header li span { color: inherit; margin: 0; padding: 0; }
#menu_toggle { appearance: none; position: relative; display: none; width: auto; height: 100%; line-height: 2rem; padding: 1rem 0; margin: 0 0 0 1.25rem; cursor: pointer; letter-spacing: 0.06rem; border: 0; background: #FFF; color: #000; transition: background-color var(--nav-transition), color var(--nav-transition); }
#menu_toggle svg { display: inline-block; width: 2rem; height: 2rem; margin: 0 0.5rem 0 0; vertical-align: middle; }
#menu_toggle .line { transform-origin: center; }
#menu_toggle[aria-expanded="true"] .line:not(.middle) { y: 45; rotate: -45deg; }
#menu_toggle[aria-expanded="true"] .line.bottom { rotate: 45deg; }
#menu_toggle[aria-expanded="true"] .line.middle { opacity: 0; }
nav { display: inline-block; width: 100%; height: var(--nav-hgt); margin: 0 auto; z-index: 2; transition: height var(--nav-transition); }
nav ul { width: auto; padding: 0; margin: 0 auto; list-style: none; height: var(--nav-hgt); transition: height var(--nav-transition); }
nav li { position: relative; padding: 0 1em 0 0; display: inline-block; color: var(--nav-c); height: var(--nav-hgt); line-height: var(--nav-hgt); margin: 0; transition: var(--nav-transition); }
nav li a { text-decoration: none; }
nav li svg { height: 1rem; width: 1rem; vertical-align: middle; transform: rotateZ(90deg); transition: transform 0.2s; margin: 0 0 0 0.5rem; }
nav li ul { height: 0; overflow: hidden; list-style: none; position: absolute; top: var(--nav-hgt); left: 0;  line-height: 1.5rem; background: rgba(255,255,255,0.95);  transition: var(--nav-transition); } 
nav li:focus ul, nav li:focus-within ul, nav li:hover ul { height: auto; width: auto; min-width: 100%; border: 1px solid #EBE9E7; border-width: 0 1px 1px 1px; transition: all 0.2s ease-in-out; }
nav li:focus svg, nav li:focus-within svg, nav li:hover svg { transform: rotateZ(0deg); }
nav li ul li { display: block; white-space: nowrap; height: auto; line-height: 2.5rem; margin: 0; padding: 0 1em; text-align: left; }
nav li:focus a, nav li:focus-within > a, nav li:hover > a, nav li a.active { color: var(--acc-nav); text-decoration: underline; }
.scrolled header { background-color: var(--accent); color: var(--accent-c); }
.scrolled header #menu_toggle { background: var(--accent); color: #FFF; }
.scrolled header a#logo svg path { fill: var(--accent-c); }
@media screen and (min-width: 801px) {
.scrolled header nav li ul { background: var(--accent); border: 0; }
}
/* Footer */
footer > div.column { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; width: 100%; margin: 0 auto; padding: 2rem 0; }
footer div { max-width: var(--content-width); }
footer > div > div { width: auto; flex: 1 1 50%; max-width: 420px; padding: 0 5% 2rem; box-sizing: border-box; }
footer div.social { text-align: center; }
footer div.social h2 { display: block; text-align: center; }
footer a { display: block; color: inherit; text-decoration: none; }
footer div.social a { display: inline-block; margin: 0 1em 1em; }
footer p { margin: 0; padding-inline: 0; }
a#to_top { position: fixed; right: 2rem; bottom: -3rem; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; color: var(--accent); transition: bottom var(--transition); }
a#to_top:hover { color: var(--hover); }
a#to_top svg { width: 2.5rem; height: 2.5rem; }
.aspect-ratio-container { display: block !important; width: 100% !important; max-width: 100%; margin: 0 auto !important; padding: 0 !important; border:0 !important; overflow: hidden; }
.aspect-ratio { display: block !important; position: relative !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 0 56.35% 0 !important; border:0 !important; }
.aspect-ratio iframe, .aspect-ratio div, .aspect-ratio a { position: absolute !important; width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; margin: 0 !important; padding: 0 !important; border:0 !important; }
main a[href^="mailto:"], main a[href^="tel:"], main a[href*="facebook.com"], main a[href*="instagram.com"], main a[href*="twitter.com"], main a[href*="linkedin.com"], footer a[href^="mailto:"], footer a[href^="tel:"], footer div.social a, footer address { padding-left: 1.5em; background-image: url('images/mail.svg'); background-position: center left; background-repeat: no-repeat; background-size: 1em; }
footer address { background-image: url('images/pin.svg'); margin-bottom: 1em; }
main a[href^="tel:"] { background-image: url('images/phone.svg'); }
main a[href*="facebook.com"] { background-image: url('images/facebook.svg'); }
main a[href*="instagram.com"] { background-image: url('images/instagram.svg'); }
main a[href*="twitter.com"] { background-image: url('images/twitter.svg'); }
main a[href*="linkedin.com"] { background-image: url('images/linkedin.svg'); }
.columns:first-child a[href^="mailto:"], div.carousel ul li a[href^="mailto:"] { background-image: url('images/mail_light.svg'); }
.columns:first-child a[href^="tel:"], div.carousel ul li a[href^="tel:"] { background-image: url('images/phone_light.svg'); }
.columns:first-child a[href*="facebook.com"], div.carousel ul li a[href*="facebook.com"] { background-image: url('images/facebook_light.svg'); }
.columns:first-child a[href*="instagram.com"], div.carousel ul li a[href*="instagram.com"] { background-image: url('images/instagram_light.svg'); }
.columns:first-child a[href*="twitter.com"], div.carousel ul li a[href*="twitter.com"] { background-image: url('images/twitter_light.svg'); }
.columns:first-child a[href*="linkedin.com"], div.carousel ul li a[href*="linkedin.com"] { background-image: url('images/linkedin_light.svg'); }

footer a[href^="mailto:"] { background-image: url('images/mail.svg'); }
footer a[href^="tel:"] { background-image: url('images/phone.svg'); }
footer div.social a.facebook { background-image: url('images/facebook.svg'); }
footer div.social a.instagram { background-image: url('images/instagram.svg'); }
footer div.social a.linkedin { background-image: url('images/linkedin.svg'); }
footer div.social a.youtube { background-image: url('images/youtube.svg'); }
.copyright { text-align: center; font-size: 0.8em; padding: 2rem 0; }
.copyright a { text-decoration: none; }
/* Responsive */
@media screen and (max-width: 800px) {
	header div.menu_container { text-align: left; }
	nav { width: 100%; text-align: left; }
	header a#logo { float: right; width: 50%; margin-right: 5%; text-align: right; }
	nav button#menu_toggle { display: inline-block; }
	nav > ul { display: none; width: 100%; height: auto; max-height: 66vh; overflow-y: auto; overflow-x: hidden; position: relative; padding: 1em 0; margin: 0; float: left; z-index: 999; background: rgba(255,255,255,0.95); box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.25); }
	nav > ul.open { display: block; }
    nav li { width: 100%; height: 1.5em; line-height: 1.5em; text-align: left; color: var(--color); padding: 0 0 0 1.5em; }
	nav li.open, nav li:focus, nav li:focus-within, nav li:hover { height: auto; }
	nav li.open ul, nav li:focus ul, nav li:focus-within ul, nav li:hover ul { position: relative; top: 0; background: transparent; border: 0; transition: none; }
	nav li:focus a, nav li:focus-within > a, nav li:hover > a, nav li a.active { color: var(--color); }
	main > div { width: 90%; }
	.columns > div > div { margin-inline: auto; }
	.columns > div { flex-basis: 100%; }
	.columns > div:only-child > div { width: 100%; }
	.columns > div:nth-child(odd) { padding-right: 0; }
	.columns > div:nth-child(even) { padding-left: 0; }

	.columns:first-child { padding: 2rem 5%; box-sizing: border-box; }
	.columns:first-child > div { padding: 0; }
	.columns:first-child .background-image > div:first-child { position: relative; right: unset; bottom: unset; }
	.columns:first-child .background-image > div:first-child > img { position:relative; height: auto; border-radius: 1rem; }

	.compare > div, .cards > div { flex-basis: 48%; }
	.cta > div { width: 100%; }
	footer > div > div:last-child { justify-content: center; }
	footer > div > div:only-child { text-align: center; }
}
@media screen and (max-width: 600px) {
	.cards > div { flex-basis: 100%; }
	footer > div > div { flex-basis: 100%; }
	footer div.social { padding: 0 5% 2rem; text-align: left; box-sizing: border-box; }
	footer div.social h2 { text-align: left; }
	footer div.social a { margin: 0 1em 1em 0; }
}
.grecaptcha-badge { visibility: hidden; }