:root {
	--textColour:#0F172A;
	--mainColour:#0284C7;
	--mainColourH:#005B8A;
	--mainColourRGB:rgb(2, 132, 199);
	--mainColourRGBA25:rgba(2, 132, 199, 0.25);
	--mainColourRGBA7:rgba(2, 132, 199, 0.75);
	--mainColourRGBA8:rgba(2, 132, 199, 0.85);
	--mainColourHRGBA5:rgba(0, 91, 138, 0.5);
	--secondColourRGBA5:rgba(2, 132, 199, 0.5);
	--secondColour:#F59E0B;
	--secondColourH:#B8770A;
	--bgColour:#F8FAFC;
}
body {background:var(--bgColour); top:0 !important; margin:0 auto; font-family:"Open Sans", Arial, Verdana, Helvetica; font-size:16px; color:var(--textColour); overflow-x:hidden;}

*, *::before, *::after {box-sizing:border-box;}

header, main, footer, .container, .btn, a {transition-duration:0.5s;}
header, main {float:left; width:100%;}

#header {display:flex; flex-direction:row; position:relative; z-index:2;}

#logoL {width:100%; display:flex; justify-content:center; align-items:center; position:relative;}
#logo {display:flex; flex-direction:column; justify-content:center; align-items:center; margin:5px 0; position:relative;}
#logo img {width:100%; height:auto; max-width:202px}
#logoL h1 {position:absolute; top:48px; right:0;}
#logo h1 {color:#FFF; font-size:10px; margin:0; white-space:nowrap;}

.languages {height:100%; display:flex; justify-content:center; align-items:center; margin-right:20px; z-index:2; cursor:pointer; position:relative;}
.languages i {color:#FFF; margin-left:5px; transition-duration:0.5s;}
.slidingHeader .languages, .languages.is-active {border-left:1px solid rgba(136, 125, 125, 0.25);}
.languages.is-active i, .slidingHeader .languages i {color:var(--textColour);}
.languages:hover i {color:var(--secondColour);}
.languageMenu {position:absolute; background:rgba(255,255,255,0.9); top:100%; right:0; width:110px; display:none; padding:5px 8px; box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5); z-index:1045;}
.languageHolder {float:left; width:24px; height:24px; overflow:hidden; position:relative; z-index:2;}
.languageRow {float:left; width:100%; font-size:12px; margin-bottom:5px;}
.languageRow:last-child {margin-bottom:0;}
.languageMenu .languageHolder {margin:4px 5px 6px 0;}
.languageMenu .languageHolder img {opacity:0.6;}
.languageMenu .languageHolder img:hover, .langSelected {opacity:1;}
.languageRow a {float:left; display:flex; align-items:center; width:100%; margin:0 !important;}
.languageHolder img {position:absolute; top:0; cursor:pointer; transition-duration:0.5s;}
.enLang, .Lang, .gTransImg {left:0;}
.esLang {left:-25px;}
.deLang {left:-50px;}
.frLang {left:-75px;}
.nlLang {left:-100px;}
.itLang {left:-125px;}

h1, h2, h3, h4, h5, h6 {color:var(--textColour); font-size:26px; font-family:"Plus Jakarta Sans"; font-weight:800; margin:5px 0 10px; text-decoration:none;}
.welcomeTitle {font-size:2.5em; margin:15px 0 25px;}

main {display:flex; width:100%; height:calc(100vh - 107px); justify-content:center; align-items:center; padding-bottom:107px;}

#memLoginContainer, #memForgotContainer {background:rgba(248, 250, 252, 0.5); width:90%; max-width:500px; padding:15px; margin:0 auto; backdrop-filter:blur(15px); box-shadow:0 0 40px 0px rgba(0, 0, 0, 0.6); border:1px solid rgba(248, 250, 252, 0.8); border-radius:14px; position:relative; overflow:hidden; z-index:1;}
#memForgotContainer {display:none;}
#memLoginContainer h2, #memForgotContainer h2 {margin:5px 0 25px;}
#errorMessage {font-weight:700; color:#BB0003;}
#memLoginAC {background:var(--textColour); color:#FFF; border:1px solid rgba(0,0,0,0.25);}
#memLoginAC:hover {background:#EEE; color:var(--textColour);}
#memForgotAC {background:#EEE; color:var(--textColour); border:1px solid rgba(0,0,0,0.25);}
#memForgotAC:hover {background:var(--textColour); color:#FFF;}
.forgotSwitchLinks {text-decoration:none; font-size:14px; cursor:pointer;}
.forgotSwitchLinks:hover {color:#FFF;}

.formInput, .formSelect, .formRadio, .formRow {float:left; width:100%; position:relative; margin:15px 0;}
.formInput {background:rgba(255,255,255,0.75); border:1px solid #909090; padding:10px 0; border-radius:6px;}
.formInput input, .formInput textarea, .formRadio input {width:100%; font-size:18px; color:#333; background:transparent; border:none; padding:0 10px; margin:0;}
.formInput input, .formRadio input {height:35px; line-height:35px;}
.formInput label, .formSelect label {position:absolute; color:#909090; text-transform:uppercase; font-weight:700; left:5px; text-align:left; padding:0 5px; pointer-events:none; transition-duration:0.5s;}
.formInput label, .formSelect.emptyVal label {top:16px; font-size:16px;}
.formInput input:focus ~ label, .formInput textarea:focus ~ label, .formInput input:not(:placeholder-shown) ~ label, .formInput textarea:valid ~ label, .formSelect select ~ label, #captchaVerification .formInput input:focus ~ label, #captchaVerification .formInput input:not(:placeholder-shown) ~ label {top:-18px; color:var(--textColour); font-size:12px;}
.formLabel label {position:relative; top:-8px; color:#909090; padding:0 5px;}
.formLabel label span {color:#BB0003; margin-left:5px;}
.formInput input:focus, .formInput textarea:focus, #subEmail:focus, .selectInput:focus {outline:none !important;}

.pFormRow {float:left; background:#FFF; width:100%; margin-bottom:12px; padding:7px 15px; border:1px solid #D9DDE4;}

.pFormBtns {width:100%; display:flex; align-items:center; padding:10px 0; justify-content:space-evenly;}

.btn {height:40px; font-family:"Open Sans", Arial, Verdana; font-weight:600; text-align:center; padding:0 10px; border-radius:4px; border:1px solid rgba(0, 0, 0, 0.5); cursor:pointer;}
.btn:disabled {opacity:0.4;}

#videoBG {position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; overflow:hidden;}
.bg-video {position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-2; transform:translate(-50%, -50%); object-fit:cover;}
.video-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); z-index:-1;}

footer {position:fixed; left:0; bottom:0; width:100%; color:#FFF; font-size:10px; text-align:center; padding:10px 0;}

.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}
.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}

#loginWaitingBG {position:absolute; background:rgba(255, 255, 255, 0.8); top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; display:none; z-index:1043;}
#loginWaitingBG svg {position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; stroke:var(--mainColour); animation:spinner_MN 5s ease-in-out infinite}

@keyframes spinner_zKoa{
	100%{transform:rotate(360deg)}
}
@keyframes spinner_YpZS{
	0%{stroke-dasharray:0 150;stroke-dashoffset:0}
	47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}
	95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}
}
@keyframes spinner_MN {
	0% {stroke:var(--mainColour);}
	33.3333% {stroke:var(--secondColour);}
	66.6666% {stroke:var(--textColour);}
}

@media screen and (min-width:1600px) {
	#header, #footer, .container {width:75%;}
	#header {margin:0 12.5% 20px;}
	#footer, .container {margin:0 12.5%;}
}
@media only screen and (min-width:1000px) and (max-width:1599px) {
	#header, #footer, .container {width:90%;}
	#header {margin:0 5% 20px;}
	#footer, .container {margin:0 5%;}
}
@media only screen and (max-width:999px) {
	#header {width:96%; margin:0 2% 20px;}
	#footer, .container {width:96%; margin:0 2%;}
}

a {color:var(--textColour); text-decoration:none;}
a:hover {color:var(--secondColour); text-decoration:none;}