/* FONTS (via fonts.com)


    font-family: 'GT-Walsheim-Pro-Light';
    font-family: 'GT-Walsheim-Pro-Bold';
    font-family: 'GT-Walsheim-Pro-Regular';
    font-family: 'GT-Walsheim-Pro-Medium';



*/

@font-face {
    font-family: 'GT-Walsheim-Pro-Light';
	    src: url('fonts/GT-Walsheim-Pro-Light.woff2') format('woff2'),
         url('fonts/GT-Walsheim-Pro-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GT-Walsheim-Pro-Bold';
	    src: url('fonts/GT-Walsheim-Pro-Bold.woff2') format('woff2'),
         url('fonts/GT-Walsheim-Pro-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GT-Walsheim-Pro-Regular';
	    src: url('fonts/GT-Walsheim-Pro-Regular.woff2') format('woff2'),
         url('fonts/GT-Walsheim-Pro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GT-Walsheim-Pro-Medium';
	    src: url('fonts/GT-Walsheim-Pro-Medium.woff2') format('woff2'),
         url('fonts/GT-Walsheim-Pro-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* VARIABLES */

:root { 
		
	--default-font: GT-Walsheim-Pro-Light;
	--default-font-size: 22px;
	--default-input-font-size: 22px;

	--col-primary: #000;
	--col-primary-rgb: 29,79,145;

	--col-accent: #000;
	--col-accent-rgb: 0,0,0;
	
	--col-text: #000;
	--col-input: #1D4F91;

	--col-button: #fff;
	--col-button-rgb: 255, 255, 255;

	--col-link: #1D4F91;
	--col-link-rgb: 29,79,145;

	--col-link-hover: #000000;
	--col-link-hover-rgb: 0,0,0;

	--col-error: #ff6633;
	--col-error-rgb: 255,51,0;
	
	--col-attention: #ff6633;
	--col-attention-rgb: 255,51,0;

	--col-warning: #f5b00e;
	--col-warning-rgb: 245,176,14;

	--col-missing: #ff6633;
	--col-missing-rgb: 255,51,0;

	--col-burger: #fff;

	--col-border: #6D859B;
	--col-border-rgb: 215,215,215;

	--dim-site-width: 1440px;
	--dim-default-space: 50px;
	--dim-input-height: 58px;

	--col-orange: #d45e44;
	--col-orange-rgb: 212,94,68;
}

/* theme */

body { }
html.overlay-active body { max-height: 100vh; overflow: hidden;}

/*CORE HTML*/
p { line-height: 1.5; color: #000;}
p.shorter  { max-width: 880px; margin-left: auto; margin-right: auto;}
p.large { font-size: 24px;}
b,strong { font-weight: 700; }
p.larger { font-size: 24px;}

h1 { font-size: 40px; font-weight: 700; color: var(--col-primary); text-transform: uppercase; line-height: 1; margin-bottom: 30px;}
h2 { font-size: 40px; font-weight: 700; color: var(--col-primary); text-transform: uppercase; line-height: 1; margin-bottom: 30px;}
h3 { font-size: 36px; font-weight: 700; color: var(--col-primary); text-transform: uppercase; line-height: 1; margin-bottom: 20px;}
h4 { font-size: 24px; font-weight: 400; color: var(--col-primary); text-transform: uppercase; line-height: 1; margin-bottom: 50px;}
h5 { font-size: 24px; color: #000; font-weight: 500; line-height: 1.66; margin-bottom: 15px;}
h6 { font-size: 30px; color: #fff; font-weight: 700; line-height: 1.25; margin-bottom: 40px;}

h3 + p { margin-top: 15px}

/*CONTAINERS*/
article { background: url(/img/siteplan.jpg) no-repeat center center; background-size: cover; width: 100vw; min-height: 100vh;}
article.alt { background-image: url(/img/siteplan3.jpg);}
article > section {max-width: 1300px; padding: 0 10px; margin: 50px auto;}
article > section.full {max-width: 1440px; padding: 0px; margin: 50px auto;}
article > section.masthead {margin: 0px auto; max-width: 100%;; padding: 0}
section.content { max-width: 1440px; padding: 0; }
section.masthead  { max-width: 1440px;}
div.masthead img  { display: block;}
div.masthead > img  { display: block; width: 100%;}
article { padding-top: 0px;}
section.old-scma { max-width: 1000px; padding: 0 15px;}

div.content { display: block; max-width: 980px; margin: 0 auto;}
body.content { display: block; max-width: 980px; margin: 0 auto;}

/* ALIGNMENTS */


/*BUTTONS*/
a.btn { background-color: #1C4869; color: #fff; font-size: 20px; font-weight: 700; line-height: 50px; border-radius: 0px; padding: 0 22px; letter-spacing: 3px}
a.btn:hover { background-color: #ACCAE3; color: var(--col-primary)}

/*COLOURS*/
.white { color: #fff !important}
.red { color: var(--col-primary) !important}
.black { color: #000 !important}
.bg-red { background-color: var(--col-primary) !important}
/* CONTENT BLOCKS */

/*CAPTIONS*/
div.caption.white * { color:#fff;}

/*FORMS*/

/*HEADER*/
header { height: 140px; background-color: transparent;  width: 100%; left: 0; max-width: 100%;  position: absolute; top: 0}
header div.logo { display: block; position: absolute; left: 50px; top: 40px; padding-top: 0px; z-index: 2;}
header div.logo img { display: block; width: 174px; margin: 0 auto}

header nav { display: inline-block; background: var(--col-primary); right: 0; top: 0; padding: 0 0px; text-align: center; position: absolute}
header nav ul { display: block; width: 100%; text-align: center; font-size: 0}
header nav ul > li { display: inline-block; vertical-align: middle; text-align: center; position: relative; padding: 0px; width: 50%; }
header nav ul > li.mobile { display: none}
header nav ul > li > a { display: block; width: 100%; text-align: center; line-height: 75px; color: #fff; font-size: 18px; font-weight: 700; padding: 0 50px; text-transform: uppercase;}
header nav ul > li > a.active { background-color: #fff; color: var(--col-primary); }
header nav ul > li:hover > a { color: var(--col-primary); background-color: rgba(255,255,255,0.3);}
header nav ul > li:first-child { border-right:1px solid #FAEBDA;}
header nav ul > li:last-child { display: block; width: 360px; background-color: #FAEBDA;}
header nav ul > li:last-child > a { font-size: 24px; color: var(--col-primary); letter-spacing: 3px;}


/*FOOTER*/

footer { display: block; width: 1440px; max-width: 100%; margin: 0 auto; background: var(--col-primary); font-size: 0}

footer > div {width: 50%; display: inline-block; vertical-align: top; font-size: var(--default-font-size); }
div.map  img { width: 100%; display: block;}
div.footer-content { padding-right: 40px; position: absolute; top: 0; right: 0; height: 100%;}
div.footer-content > div { width: 100%; display: block; text-align: left; position: absolute}
div.footer-content > div.address { top: 70px; left: 0}
div.footer-content > div.disclaimer { bottom: 60px; left: 0}
h6 span {display: block; font-weight: 400}
p.links { display: block; font-size: 0;  text-align: left;}
p.links a { display: inline-block; vertical-align: top; padding: 0 30px; line-height: 22px; font-size: 22px; color: #fff; font-weight: 700}
p.links a:first-child { padding-left: 0; border-right: 1px solid #fff;}

footer div.logo { display: block; width: 100%; }
footer div.disclaimer { color: var(--col-text); font-size: 12px; font-weight: 400; display: block; width: 100%; text-align: left; padding-bottom: 0px;}
footer div.disclaimer img { display: block; width: 200px; margin: 0 auto 15px 0}
footer div.disclaimer p { color: #fff; font-size: 16px; font-weight: 400; display: block; width: 100%; text-align: left; margin: 0 auto}
footer div.disclaimer a { color: #fff; font-size: 16px; font-weight: 400;}
footer div.disclaimer a:hover { color: #000}



/*CONTENT*/

#welcome { font-size: 24px; text-align: center; padding: 100px 20px; width: 100%; display: block}


div.masthead > img { display: block; width: 100%; }

div.images { display: block; width: calc(100% + 12px); margin-left: -6px; font-size: 0}
div.images > div { display: inline-block; width: 33.33%; padding: 6px;}
div.images > div > img { display: block; width: 100%;}
div.images > div:first-child { display: block; width: 100%; padding: 6px;}

div.text-image { display: block; width: 100%; position: relative}
div.text-image > div { display: block; width: 50%; }
div.text-image > div img { display: block; width: 100%; }
div.text-image > div.text { position: absolute; top: 50%; transform: translateY(-50%); right: 0; padding: 10px 40px 10px 100px}
div.text-image > div.image { margin: 0 auto 0 0}
div.text-image.right-image > div.image { margin: 0 0 0 auto}
div.text-image.right-image > div.text { right: auto; left: 0; padding: 10px 130px 10px 0px }

div.fram-slokker { width: 300px; display: block; margin: 50px auto 0}

#surveryStart { cursor: pointer;}
#registration  { display: none;}
#registration  > h3 { text-align: center;}
#registration.active  { display: block;}
div.registration { display: block; width: 100%; max-width: 900px; margin: 0 auto}

div.form-tab-nav { display: block; width: calc(100% + 10px); font-size: 0; margin-left: -5px;}
div.form-tab-nav > div { display: inline-block; width: calc(11.1% - 10px); margin: 0 5px; height: 10px; background-color: #3E82A4; opacity: 0.3;}
div.form-tab-nav > div.completed { background-color: var(--col-primary); opacity: 1;}
div.form-tab-nav > div.active { background-color: #1C4869; opacity: 1;}
div.form-tab-title { font-size: 28px; color: var(--col-primary); text-align: center; padding: 50px 0 30px; line-height: 34px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
div.form-tab-title small { display: block; font-weight: 600; font-size: 1em;}
div.form-tab { display: none; max-width: 800px; margin: 0 auto; }
div.form-tab.active { display: block; margin-bottom: 40px;}
div.form-tab-summary  { display: block;  font-size: 24px; color: var(--col-primary); text-align: center; padding: 0px 0 30px; line-height: 34px; letter-spacing: 0px; font-weight: 500; }
div.form-tab-summary:empty { display: none;}
div.form-tab-summary a { color: #000; text-decoration: underline; cursor: pointer; }
div.form-tab textarea { min-height: 150px;}

/*section.survey-holder { position:relative; top: 50%; transform: translateY(-50%); display: block}*/
div.survey { padding: 20px;     }
div.survey.alt { background: #ffffffb3;}
div.survey div.logo { display: block; width: 600px; margin: 0 auto 60px;}
div.survey-intro { display: block; width: 100%; text-align: center;}
div.survey-intro h4 { color: #000; margin-bottom: 30px}
div.survey-intro p { max-width: 800px; margin: 0 auto 50px;}

button[type="button"], button[type="submit"] { background-color: var(--col-primary); color: #fff; display: inline-block; margin: 0 0 0 10px}
select.for-ranking { width: 100px;}
select.for-ranking + span { width: 100px !important; text-align: center;}
legend { width: calc(100% - 100px); position: absolute; right: 0; top: 0; line-height: 58px; font-size: 22px; color: #000; padding: 0 15px; border: 1px solid var(--col-border); border-left: 0; background: #fff}
.select2-selection__rendered { text-transform: none;}
div.checkbox label:before { border-color: var(--col-border); top: 4px;}

div.radios.two-line { font-size: 0}
div.radios div.radio { padding-right: 30px}
div.radios.two-line div.radio { display: inline-block; width: 50%; vertical-align: top; margin-bottom: 20px; margin-right: 0}
div.radios.one-line { max-width: 800px; margin: 0 auto 20px; text-align: left;}
div.radios.one-line div.radio { display: inline-block; width: auto; margin-bottom: 0px; margin-right: 0; }
div.radios div.radio label { font-size: 20px; color: #000; padding-left: 45px; line-height: 34px; padding-top: 0px}
div.radio label:before { width: 28px; height: 28px; border: 1px solid var(--col-primary); background: #fff; }
div.radio label:after { width: 20px; height: 20px; background: #000; top: 4px; left: 4px; border-radius: 20px; opacity: 0; border: none;}
div.radio input[type=radio]:checked + label:after { border: none; background-color: #000; opacity: 1;}

div.radio.missing label {color: var(--col-missing) !important;}
div.radio.missing label:before { border-color: var(--col-missing) !important;}

span.radio-group-label { display: block; width: 100%; text-align: left; color: #000; font-size: 24px; margin-bottom: 15px; margin-top: 30px;}

div.grecaptcha-badge { position: absolute; right: -500px !important}

div.reveal-response { display: block; padding: 50px 10px; text-align: center;}
div.registration.form-done > h3 { display: none;}
div.registration.form-done div.form-tab-nav { display: none;}


div.checkbox label:before { width: 28px; height: 28px; border: 1px solid var(--col-primary); background: #fff; }
div.checkbox label { font-size: 20px; color: #000; padding-left: 40px; line-height: 28px; padding-top: 6px}
div.checkbox { margin-bottom: 5px;}

div.question-section { display: none; margin-bottom: 0px; }
div.question-section.active { display: block}
div.question{ display: block; margin-bottom: 40px; }
div.question-label { display: block; margin-bottom: 20px; font-size: 24px; line-height: 1.5; font-weight: 600; letter-spacing: 0px}
button.button-return, button.button-advance { margin: 10px auto 0; display: inline-block;}

div.field.show-label > label  { display: block; width: 100%; margin-bottom: 5px}

	*::-webkit-input-placeholder {  color: #999}
	*::-moz-placeholder {  color: #999}
	*:-ms-input-placeholder {  color: #999}

img.floating { float: right; display: block; width: 40%; margin: 0 0 20px 20px; }

@media only screen and (max-width: 1440px) {
	div.text-image { width: calc(100% - 20px); }
}

@media only screen and (max-width: 1280px) {
	div.text-image p { font-size: 18px;}
	div.text-image > div.text { padding: 10px 20px 10px 40px}
	div.text-image.right-image > div.text { padding: 10px 40px 10px 0px }
	h2 { font-size: 26px; margin-bottom: 25px}
	h6 { font-size: 24px; margin-bottom: 30px}
	p.links a { font-size: 18px}
	footer div.disclaimer p { font-size: 14px;}
	footer div.disclaimer a { font-size: 14px;}
div.footer-content > div.address { top: 30px; }
div.footer-content > div.disclaimer { bottom: 20px; }

}


@media only screen and (max-width: 1080px) {

header { height: 60px; }
header div.logo { left: 40px; top: 30px; }
header div.logo img { width: 120px; }

header nav { padding: 0; }
header nav ul > li > a { line-height: 60px; font-size: 16px; padding: 0 40px; }

h1 { font-size: 36px; }
h2 { font-size: 36px; }
h3 { font-size: 32px; }
h4 { font-size: 20px; }
h5 { font-size: 20px; }
h6 { font-size: 24px; }

div.content { padding: 0 10px;}

}


@media only screen and (max-height: 760px), (max-width: 880px) {
	div.survey div.logo { width: 400px; margin-bottom: 20px}
	div.survey-intro p { margin-bottom: 30px;}

	h1 { font-size: 24px; }
	h2 { font-size: 24px; }
	h3 { font-size: 18px; }
	h4 { font-size: 16px; }
	h5 { font-size: 16px; }
	h6 { font-size: 18px; }

	p { font-size: 16px;}


	div.text-image { font-size: 0}
	div.text-image > div.text { display: inline-block; width: 60%; position: relative; transform: translateY(0%); top: 0; min-height: 33.5vw; padding: 0px 20px 40px 40px !important; margin: 0 auto !important; vertical-align: top; }
	div.text-image > div.image { display: inline-block; width: 40%; margin: 0 auto !important; vertical-align: top}
	
	div.survey div.logo { max-width: 80vw;}

	footer > div {width: 100%; display: block; }
	div.footer-content { position: relative; top: 0; padding: 80px 20px 20px; text-align: center;}
	div.footer-content > div { position: relative; top: 0 !important; bottom: 0 !important; text-align: center;}
	div.footer-content h6 { margin-bottom: 50px;}
	p.links {text-align: center;}
	footer div.disclaimer img { margin: 90px auto 10px; width: 180px}
	footer div.disclaimer p, footer div.disclaimer { text-align: center;}
	div.form-row.form-row-footer div.splitter.split-2 > div { display: block; width: 100%}

	div.form-tab-title { text-align: left;}
	div.radios div.radio { padding-right: 20px}
	div.radios div.radio label { font-size: 18px; padding-left: 40px; line-height: 30px; }
	div.radio label:before { width: 25px; height: 25px; }
	div.radio label:after { width: 19px; height: 19px; top: 3px; left: 3px; border-radius: 19px; }
	div.form-tab-title { font-size: 18px; line-height: 30px; letter-spacing: 1px; padding: 30px 0 16px; text-align: center;}
	span.radio-group-label { font-size: 18px; letter-spacing: 0}


	div.checkbox label:before { width: 25px; height: 25px; }
	div.checkbox label { font-size: 18px; padding-left: 36px; line-height: 25px; padding-top: 5px}
	div.question{ margin-bottom: 30px; }
	div.question-label { font-size: 20px; }

/*}*/
/**/
/**/
/**/
/*@media only screen and (max-width: 700px) {*/
	
	header { height: 300px; overflow: hidden; background: transparent;}
	header div.logo { left: 35px}
	header div.logo img { width: 120px;}
	header.attached { top: 0}
	header.active {  overflow: visible;  top: 0; left: 0}
	article { padding-top: 0px;}
	header div.burger { display: block; height: 60px; left: auto; right: 0; background: var(--col-primary); width: 60px; position: absolute;}
	header.visible div.burger { position: fixed;}
	div.burger ul { top: 22px; left: 15px; width: 30px}

	header nav { display: block; width: 100%; max-width: 280px; right: -120vw; top: 0px; position: fixed; padding: 60px 0px 0px; }
	header.active nav { left: auto; right: 0; }
	header nav ul li { display: block; width: 100% !important; text-align: right; background-color: var(--col-primary); ; }
	header nav ul > li.mobile { display: block}
	header nav ul li a { display: block; width: 100%; text-align: left; line-height: 40px; font-size: 18px !important; color: #fff; letter-spacing: 0px !important}

	header nav ul > li > ul { display: block; opacity: 0; position: relative; left: 0; top: 0px; transition: opacity .3s ease-out; background: #fff; width: 100%; padding-left: 20px; }
	header nav ul > li { max-height: 40px; overflow: hidden; border: 0 !important}
	header nav ul > li > a { position: relative; padding-right: 25px; text-align: right; }
	header nav ul > li:hover { background: #fff !important; color: var(--col-primary) !important}
	header nav ul > li:hover > a { background: #fff !important; color: var(--col-primary) !important; }

	div.masthead { width: 100vw; height: 100vh; position: relative; overflow: hidden;}
	div.masthead > img { display: block; max-width: 9999px; position: absolute; top: 0; left: 0}
	div.masthead.taller > img { height: 100vh; width: auto; top: 0 !important; }
	div.masthead.wider > img { width: 100vw; height: auto; left: 0 !important}
	div.masthead img  { display: block; }

/*	article > section {padding: 0 5px; }*/
/*	article > section.full {max-width: 1440px; padding: 0px; margin: 50px auto;}*/
/*	article > section.masthead {margin: 0px auto; max-width: 100%;; padding: 0}*/
	div.text-image { display: block; width: 100%; }



div.images > div { width: 50%; }
div.images > div > img { width: 100%;}
div.images > div:nth-child(2) { display: none}

	div.text-image > div.text { display: block; width: 100%; padding: 0 20px 0px !important; text-align: center; min-height: 0}
	div.text-image > div.image { display: block; width: 100%; margin-bottom: 40px !important;}
	#slokker { margin-bottom: 40px !important}
	#slokker h2:before {content: "+"; display: block; text-align: center; line-height: 140px; font-size: 98px; font-weight: 400}

	button[type="submit"], button[type="button"] { line-height: 40px; font-size: 16px; padding: 0 25px;}
	input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] { line-height: 40px; font-size: 16px; min-height: 40px}
	*::-webkit-input-placeholder {  color: var(--col-text); ; font-family: var(--default-font); line-height: 40px; font-size: 16px;}
	*::-moz-placeholder {  color: var(--col-text); font-family: var(--default-font); line-height: 40px; font-size: 16px;}
	*:-ms-input-placeholder {  color: var(--col-text); font-family: var(--default-font); line-height: 40px; font-size: 16px;}
	textarea::-webkit-input-placeholder {  color: #999}
	textarea::-moz-placeholder {  color: #999}
	textarea:-ms-input-placeholder {  color: #999}

	div.checkbox label { font-size: 16px; padding-top: 5px;}
}

@media only screen and (max-width: 600px) {
	div.radios.two-line div.radio { display: block; width: 100%; margin-bottom: 20px; }

	div.radios div.radio { padding-right: 20px}
	div.radios div.radio label { font-size: 16px; padding-left: 20px; line-height: 24px; padding-top: 1px;}
	div.radio label:before { width: 16px; height: 16px; border-radius: 16px; top: 5px}
	div.radio label:after { width: 12px; height: 12px; top: 7px; left: 2px; border-radius: 12px; }
	div.form-tab-title { font-size: 14px; line-height: 24px; letter-spacing: 0px; padding-bottom: 20px}
	div.form-tab-title small { font-weight: 300}
	span.radio-group-label { font-size: 16px; letter-spacing: 0; margin-bottom: 6px}
	div.radios.one-line { margin-bottom: 20px}

	button[type="submit"], button[type="button"] { line-height: 40px; font-size: 16px; padding: 0 25px;}
	input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] { line-height: 40px; font-size: 16px; min-height: 40px}
	*::-webkit-input-placeholder {  color: var(--col-text); ; font-family: var(--default-font); line-height: 40px; font-size: 16px;}
	*::-moz-placeholder {  color: var(--col-text); font-family: var(--default-font); line-height: 40px; font-size: 16px;}
	*:-ms-input-placeholder {  color: var(--col-text); font-family: var(--default-font); line-height: 40px; font-size: 16px;}
	textarea::-webkit-input-placeholder {  color: #999}
	textarea::-moz-placeholder {  color: #999}
	textarea:-ms-input-placeholder {  color: #999}

	div.checkbox label { font-size: 16px; padding-top: 5px;}
	h4 { line-height: 1.5}
	div.reveal-response h4 { margin-bottom: 0}
	div.survey { padding: 50px 0}
	#registration { padding: 0 10px}

	div.checkbox label:before { width: 25px; height: 25px; }
	div.checkbox label { font-size: 16px; padding-left: 32px; }
	div.question-label { font-size: 18px; }

	img.floating { float: none; display: block; width: 100%; margin: 0 auto 20px;}
}


@media only screen and (max-width: 380px) {
	div.radios div.radio { padding-right: 15px}
}