* {box-sizing:border-box; font-family:"Roboto",sans-serif; text-size-adjust:none; -moz-text-size-adjust:none; -webkit-text-size-adjust:none; ms-text-size-adjust:none;}

a {color:inherit; text-decoration:none;}
a:hover {text-decoration:underline;}
span, label {display:block; margin:0.5em 0; font-size:1rem; font-weight:bold; color:#C33;}
h2 {font-size:2rem; line-height:1em; margin:0 0 1.5em;}
html, body {font-size: 16px; margin:0; padding:0;}

@keyframes bottom-popup-in {from {margin-bottom: -6em;} to {margin-bottom: 0.5em;}}
@keyframes bottom-popup-out {from {margin-bottom: 0.5;} to {margin-bottom: -6em;}}

.wrapper {width:100%; background-color:#FFF; z-index:-10;}
.highlight {background-color:#f2f2f0!important;}
.spacer-vertical {padding-top:10lvh; padding-bottom:10lvh;}
.margin-vertical {margin-top:10lvh; margin-bottom:10lvh;}
.spacer-horizontal {padding-left:15vw; padding-right:15vw}
.align-right {text-align:right}
.button-fill, .button-fill-blackbg {padding:0.75em 2rem; border:1px solid #030; background-color:#393; color:#FFF!important; transition-property: color, background-color; transition-duration: 0.25s;}
.button-fill:hover {color:#393!important; border:1px solid #393!important; background-color:transparent!important; text-decoration:none;}
.button-fill-blackbg:hover {color:#FFF!important; background-color:rgba(0,255,0,0.25)!important; border:1px solid #FFF!important; text-decoration:none;}
.button-transparent {padding:0.5em 2rem; background-color:transparent; font-weight:bold; color:#393!important; border:2px solid#393; transition-property: color, background-color; transition-duration: 0.25s;}
.button-transparent:hover {color:#FFF!important; background-color:#393!important; text-decoration:none;}
.round5px {border-radius:5px;}

.showcase-header {max-width:100vw; height:75lvh; position:relative; overflow:hidden; color:#FFF;z-index:1;}
.showcase-header > div:nth-child(1) {position:absolute; left:0px; top:0px; right:0px; bottom:0px; z-index:-2; background-size:cover; background-position:center center;}
.showcase-header > div:nth-child(2) {position:absolute; left:0px; top:0px; right:0px; bottom:0px; z-index:-1; background-color:rgba(0,0,0,0.5);}
.showcase-header > div:nth-child(3) {position:absolute; left:15vw; top:0; width:43vw; height:100%; z-index: 1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-top:20lvh;}
.showcase-header .button-fill:hover {color:#FFF!important;}
.showcase-header h1 {font-size:4rem; font-weight:600; line-height:1em; margin:0 0 2rem;}
.showcase-header p {font-size:1.25rem; font-weight:300; margin:0 0 2rem;}
.showcase-header video {width:100%; height:75lvh; object-fit:cover;}
.showcase-header-small {height:25lvh;}
.showcase-header-small > div:nth-child(3) {width:70vw;}
.showcase-header-small h1 {font-size:2rem;}
.big-padding {padding-top:10rem; padding-bottom:10rem;}

.columns-three {display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); column-gap:2rem; row-gap: 2rem;}
.columns-three > a {display:grid; box-shadow:0px 0px 0px rgba(0,0,0,0.5); transition-property:box-shadow; transition-duration: 0.25s; text-decoration:none;}
.columns-three-element {background-color:#FFF; padding-bottom:2rem;}
.columns-three-element span, .columns-three-element h3, .columns-three-element p {padding:0 5%;}
.column-pic {position:relative; height:12rem; overflow:hidden;}
.column-pic > div {background:url(), #DBD2BD; background-repeat: no-repeat; background-origin: content-box; background-position:center; position:absolute; left:0px; top:0px; width:100%; height:100%; transition-property: left, top, width, height; transition-duration: 0.25s;}
.column-pic-cover > div {background-size:cover;}
.column-pic-contain > div {background-size:contain; padding:2rem;}
.column-pic-animate:hover > div > div {left:-10%; top:-10%; width:120%; height:120%;}
.columns-three > a:hover {box-shadow:0px 0px 30px rgba(0,0,0,0.15);}

.columns-two {display:grid; grid-template-columns: 15vw 34vw 2vw auto;}
.columns-two div {background-size:cover; background-position:center center; background-repeat: no-repeat;}
.columns-two-reverse {grid-template-columns: auto 2vw 34vw 15vw;}
.columns-two p, .columns-three p, .columns-two ul, .columns-three ul {color:#666; font-size:1.25rem; font-weight:300; line-height:1.5em; margin-bottom:2em;}
.columns-two a {margin:0;}

.columns-one {display:grid; grid-template-columns: 15vw auto 15vw;}
.columns-one p, ul, ol {color:#333; font-size:1.2rem; font-weight:300; line-height:1.5em; margin-bottom:2em;}
.columns-one a {color:#990000; border-bottom:1px #990000 dashed;}

.block-bigpic div {padding:15vw; background-size:cover; background-repeat:no-repeat; background-position: center;}
.block-bigpic h2 {color:#FFF; text-align: center; font-size:3.5rem; font-weight:bold; margin-bottom:2rem;}
.block-bigpic p {text-align:center;}

.block-home-video {background-color:#4a648c;}
.block-home-video * {color:#FFF;}
.block-home-video div {background-size:contain; box-shadow:none;}
.block-home-video div:last-child > a {display:grid; width:100%; height:100%;}

.footer {background-color:#343434; background-image: url('/assets/pictures/etc/footer-bg.jpg'); background-position:center center; background-repeat:no-repeat;}
.footer div {background-color:transparent;}
.footer h3, .footer span, .footer p {color:#FFF!important;}
.footer h3 {margin-top:2rem;}
.footer span {font-weight:300; margin:1em 0px;}
.footer > p {color:#666!important;}
.footer img {height:2rem; margin-right:1rem;}

.contact-form {border:0;}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {width:100%; font-size:1.5rem; background-color:#f2f2f0; border:none; border-bottom:1px solid #cc3333; padding:0.5em; margin-bottom:0.5em; font-family:Roboto,sans-serif; font-weight:300; color:#666666; outline:none;}
.contact-form input[type="checkbox"] {margin-right:1em;}
.contact-form textarea {height:6em; resize:vertical;}
.contact-form label[for="privacy"] {font-weight:normal; display:inline-block; color:#666; margin-bottom:2em;}
.contact-form a {cursor:pointer; background-position:center center; background-repeat:no-repeat; background-size:contain;}
.contact-form-idle {background-image: none;}
.contact-form-processing {cursor:default; background-image:url('/assets/pictures/etc/loading.gif'); background-color:#393; color:transparent!important;}
.contact-form-processing:hover {color:transparent!important;}
.bottom-popup {position:fixed; left:0; bottom:0; margin:0.5em; border-radius:0.5em; padding:1em; color:white; font-size:1.5rem; text-align:center; z-index:10000000000000000000; border:5px solid; animation: bottom-popup-in 0.35s ease-out forwards;}
.bottom-popup-red {background-color:rgba(32,0,0,0.75); border-color: rgba(255,0,0,0.5);}
.bottom-popup-green {background-color:rgba(0,32,0,0.75); border-color: rgba(0,32,0,0.5);}

#main-header {position:fixed; top:0; left:0; width:100vw; height:20lvh; background-color:rgba(0,0,0,0.75); color:#FFFFFF; z-index:1000; transition:all 0.3s ease-in-out;}
#main-header.scrolled {height:10lvh; background-color:#FFFFFF; box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); color:#333333;}
#main-header.scrolled a {color:#333333;}

.header-content {display:flex; justify-content:space-between; align-items:center; height:100%; padding:0 15lvh;}
.logo-container img {transition:font-size 0.3s ease-in-out; height:5em}
#main-header.scrolled {font-size:1.5em;}
#main-header.scrolled .logo-container img {height:2.5em;}
#main-header.scrolled .mobile-menu-toggle {color:#333333;}

.nav-container {display:flex; align-items:center; gap:20px;}
.nav-container a {font-family: "Exo", sans-serif; font-size:0.75rem;}
.header-certificates {padding:0.75em 2rem; background:linear-gradient(180deg,#444 0%, #666 100%); border:1px solid #666; color:#FFF!important;}
.main-menu {list-style:none; display:flex; gap:30px; padding:0; margin:0;}

.main-menu a {text-decoration:none; color:#FFFFFF; font-weight:500; transition:color 0.3s ease-in-out; font-weight:bold;}
.main-menu a:hover {color:#007bff;}
.language-selector {position:relative;}
.lang-toggle {background:none; border:none; cursor:pointer; font-size:1.5rem; padding:0; display:flex; align-items:center; gap:5px;}
.lang-dropdown {display:none; top:100%; background-color:#FFFFFF; box-shadow:0 4px 8px rgba(0, 0, 0, 0.1); z-index:10; padding:5px 0;}
.lang-dropdown.active {display:block;}
.lang-dropdown a {display:block; padding:8px 15px; text-decoration:none; color:#333333; white-space:nowrap;}
.lang-dropdown a:hover {background-color:#F0F0F0;}
.desktop-lang-selector {display:block;}
.desktop-lang-selector .lang-dropdown {position:absolute; right:0; border:1px solid #CCCCCC; min-width:120px;}

.mobile-menu-toggle {display:none; background:none; border:none; font-size:2rem; cursor:pointer; color:#FFFFFF;}
.mobile-menu-dropdown {display:none; width:100%; background-color:#DEDEDE; position:absolute; top:10lvh; left:0; box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);}
.mobile-menu-dropdown.active {display:block;}
.mobile-menu-dropdown ul {list-style:none; padding:0; margin:0;}
.mobile-menu-dropdown li a {display:block; padding:15px 15lvh; text-decoration:none; color:#333333; border-bottom:1px solid #EEEEEE;}
.mobile-menu-dropdown li:last-child a {border-bottom:none;}

.mobile-lang-container {padding:0 15lvh; border-bottom:1px solid #EEEEEE; background-color:#CCCCCC;}
.mobile-lang-selector .lang-toggle {font-size:1.1rem; padding:15px 0; width:100%; justify-content:flex-start;}
.mobile-lang-selector .lang-dropdown {position:static; border:none; box-shadow:none; background-color:transparent; min-width:100%;}
.mobile-lang-selector .lang-dropdown a {padding:8px 0 8px 15px; border-top:1px solid #EEEEEE;}

/* Medium resolution on desktop */
@media ((min-width: 720px) and (max-width: 1399px)) and (max-resolution:1x)
{
.columns-two {grid-template-columns: 5vw 39vw 2vw auto;}
.columns-two-reverse {grid-template-columns: auto 2vw 39vw 5vw;}
.spacer-horizontal {padding-left:5vw; padding-right:5vw}
.showcase-header > div:nth-child(3) {left:5vw; width:90vw; align-items:center;}
.showcase-header > div:nth-child(3) > * {text-align: center;}
}

/* Low resolution on desktop, mobile devices */
@media ((max-width:719px) and (max-resolution:1x)), (min-resolution: 1.1x) 
{
html {font-size:13px;}
.logo-container img {max-width:50vw; height:auto!important;}
.button-transparent, .button-fill {display:block; text-align:center; width:100%;}
.big-padding, .spacer-vertical {padding-top:1rem; padding-bottom:2em}
.columns-two > div:nth-child(1) {order:1;} .columns-two > div:nth-child(2) {order:3;} .columns-two > div:nth-child(3) {order:2;} .columns-two > div:nth-child(4) {order:4;}
.columns-two-reverse > div:nth-child(1){order:4;} .columns-two-reverse > div:nth-child(2){order:1;} .columns-two-reverse > div:nth-child(3){order:3;} .columns-two-reverse > div:nth-child(4){order:2;}
.columns-two, .columns-two-reverse {grid-template-columns: auto; grid-template-rows:0 0 auto 40lvh;}
.columns-two > div {padding-left:5vw; padding-right:5vw; box-shadow: none;}
.columns-three {display:grid; grid-template-columns:auto}
.columns-three > a {display:grid;}
.columns-one {grid-template-columns: auto; grid-template-rows:0 auto 0; padding:0 2rem;}
.spacer-horizontal {padding-left:5vw; padding-right:5vw}
.showcase-header > div:nth-child(3) {left:5vw; width:90vw; align-items:center;}
.showcase-header > div:nth-child(3) > h1 {font-size:2.5rem;}
.showcase-header > div:nth-child(3) > * {text-align: center;}
.footer {text-align:center;}
.footer .columns-three > div:not(:first-child) {display:none;}
.block-bigpic h2 {font-size:2rem;}

.main-menu {display:none;}
.desktop-lang-selector {display:none;}
.mobile-menu-toggle {display:block; margin-left:15px;}
.header-content {padding:0 5vw;}
.mobile-menu-dropdown li a, .mobile-lang-container {padding-left:5vw; padding-right:5vw;}
}