body { font: normal 16px/24px "Fira Sans", Arial, sans-serif; color: #808080; background: #f6f6f6; }
a { text-decoration: none; }
strong { font-weight: bold; }
* { box-sizing: border-box; }
img { vertical-align: bottom; max-width: 100%; }

span.green { color: #016567 !important; }

/* FULLPAGE SLIDER */
	@media (min-width: 980px ) {
		html,body { margin: 0; padding: 0; width: 100%; height: 100%; }
		body.fullpageslider { overflow: hidden; }
		body.fullpageslider main { position: relative; width: 100%; height: 100%; top: 0; padding: 0; transition: all 1s cubic-bezier(.07,.65,.18,1.16); }
		/* recht smooth: cubic-bezier(0.360, 1.295, 0.440, 1.005); */
		body.fullpageslider main > section { box-sizing: border-box; width: 100%; height: 100%; background: #f6f6f6; }
		body.fullpageslider main > section:not(:last-of-type)::after { content:""; display: block; position: absolute; width: 100%; height: 75px; bottom: 0; left: 0; cursor: pointer; background: url(../slide-down.svg) 50% 50% no-repeat; transition: transform 0.5s ease-in-out; }
		body.fullpageslider main > section.footer_visible::after { transform: rotate(180deg); }
		body.fullpageslider main > section > div { position: absolute; left: 50%; top: 50%; }
		body.fullpageslider main > section:last-child { height: auto; padding: 0; }
		.fullpageslider-pager { position: fixed; width: 20px; left: 2%; top: 50%; transform: translateY(-50%); transition: opacity .5s; }
		.fullpageslider-pager div { box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; margin: 10px; border: 3px solid #b0d400; transition: background-color .5s; cursor: pointer; }
		.fullpageslider-pager div.active { background-color: #b0d400; }

		body.fullpageslider .grid-shadow { position: absolute; box-shadow: 0 0 200px rgba(0,0,0,.25); overflow: hidden; }
		body.fullpageslider .grid { position: absolute; }
		body.fullpageslider .grid .component { width: 100%; height: 100%; }
	}

/* FULLPAGE */
	@media (min-width: 980px ) {
		body.fullpage { padding: 68px 0 0 0; }
		body.fullpage main > section:not(:last-child) { width: 1440px; margin: 80px auto; }
		body.fullpage .fullpage-main { position: relative; display: table; }
		body.fullpage .fullpage-main > div { display: table-cell; vertical-align: top; }
		body.fullpage .fullpage-main > .fullpage-main-content { width: 960px; }
		body.fullpage .fullpage-main > .fullpage-main-content > section { margin-top: 80px; box-shadow: 0 0 200px rgba(0,0,0,.25); overflow: auto; }
		body.fullpage .fullpage-main > .fullpage-main-sidebar { width: 480px; }
		body.fullpage .fullpage-main > .fullpage-main-sidebar > .fullpage-main-sidebar-shadow { box-shadow: 0 0 200px rgba(0,0,0,.25); position: relative; }
		body.fullpage .fullpage-main > .fullpage-main-sidebar > .fullpage-main-sidebar-shadow > div { position: relative; }
		body.fullpage .fullpage-main > .fullpage-main-sidebar .component { height: 100%; }
	}

/* LANDINGPAGE */
	body.landingpage { background: #fff; }
	body.landingpage main { padding: 68px 0 0 0; overflow: hidden; }

/* COMPONENT */
	.component > *:first-child { margin-top: 0; }
	.component > *:last-child { margin-bottom: 0; }

	/* At least have an offsetParent at component level - for the link catcher */
	.component { position: relative; }

/* GRID */
	/* w-3 = 3 parts of a sixth, so half the full width */
	@media (min-width: 980px ) {
		.width-1 { width: 240px; }
		.width-2 { width: 480px; }
		.width-3 { width: 720px; }
		.width-4 { width: 960px; }
		.width-5 { width: 1200px; }
		.width-6 { width: 1440px; }

		.height-1 { height: 135px; }
		.height-2 { height: 270px; }
		.height-3 { height: 405px; }
		.height-4 { height: 540px; }
		.height-5 { height: 675px; }
		.height-6 { height: 810px; }

		.left-0 { left: 0; }
		.left-1 { left: 240px; }
		.left-2 { left: 480px; }
		.left-3 { left: 720px; }
		.left-4 { left: 960px; }
		.left-5 { left: 1200px; }

		.top-0 { top: 0; }
		.top-1 { top: 135px; }
		.top-2 { top: 270px; }
		.top-3 { top: 405px; }
		.top-4 { top: 540px; }
		.top-5 { top: 675px; }
	}


/* ELEMENTS */
	/*buttonarea is for centering, small text underneath the button etc.*/
	.buttonarea {
		display:block;
		text-align:center;
		z-index:10;
		padding:20px 40px;
	}
	@media (min-width: 980px ) {
		/*.bot nails the buttonarea for desktop-grid-view to the bottom for "in line" alignment across parallel grid slots*/
	 	.buttonarea.bot {
			position:absolute;
			bottom:30px;
			left:0;
			width:100%;
		}
	}


	.button { -webkit-appearance: none;	-moz-appearance: none; appearance: none; display: inline-block; padding: 0 24px; background: #b0d400; background-image: linear-gradient(to bottom,#bde300 0,#b0d400 100%); border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0,0,0,.3); color: #333; font: 500 15px/40px "Fira Sans", Arial, sans-serif; border: 0; cursor: pointer; }
	.button.mid {font-size:18px; padding:5px 24px; margin:20px 0;}
	.button:hover { background: #accf00; color: #333 !important; }
	.button-dark { background: #007575; background-image: linear-gradient(to bottom,#008484 0,#007575 100%); color: #fff; }
	.button-dark:hover { background: #007070; color: #fff !important; }
	.button-secondary { background: #007575; background-image: linear-gradient(to bottom,#d9d9d9 0,#ccc 100%); color: #333; }
	.button-secondary:hover { background: #ccc; color: #333 !important; }
	.button-fullwidth { display: block; text-align: center; }
	.button[disabled] {
		pointer-events: none;
		opacity: 0.5;
	}
	.button.waiting {
		color: transparent;
		position: relative;
		background: url('data:image/svg+xml,%3csvg xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22 width%3d%2260%22 height%3d%2220%22%3e%3cstyle%3ecircle { animation%3a circleblend 1s infinite alternate ease-in-out%3b } circle%3anth-child%282%29 { animation-delay%3a 0.33s%3b } circle%3anth-child%283%29 { animation-delay%3a 0.66s%3b } %40keyframes circleblend { 0%25 { fill%3a %23000%3b } 100%25 { fill%3a %23fff%3b } }%3c%2fstyle%3e%3cg fill%3d%22%23999%22%3e%3ccircle cx%3d%2210%22 cy%3d%2210%22 r%3d%225%22%2f%3e%3ccircle cx%3d%2230%22 cy%3d%2210%22 r%3d%225%22%2f%3e%3ccircle cx%3d%2250%22 cy%3d%2210%22 r%3d%225%22%2f%3e%3c%2fg%3e%3c%2fsvg%3e') 50% 50% no-repeat, linear-gradient(to bottom,#bde300 0,#b0d400 100%);
	}

	.link { font-family: "Fira Sans", Arial, sans-serif; font-weight: 500; color: #009090; }
	.link:not([href^="mailto"]):before {
		content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxMicgd2lkdGg9JzE2JyBoZWlnaHQ9JzEyJz48cGF0aCBmaWxsPSdub25lJyBzdHJva2U9JyMwMDkwOTAnIGQ9J00xLjUsMS41IEw2LDYgTDEuNSwxMC41JyBzdHJva2Utd2lkdGg9JzMnLz48L3N2Zz4=");
	}
	.link.inline:before { content: none; }
	.link:hover { text-decoration: underline; }
	a.link:hover:before { text-decoration: none; }
	.link[data-type]:after { content: attr(data-type); display: inline-block; text-transform: uppercase; font: bold 10px/17px Arial; color: #fff; background: #006567; padding: 0 5px; border-radius: 3px; margin: 0 5px; vertical-align: middle; }
	.link.link-reverse:not([href^="mailto"]):before {
		content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxMicgd2lkdGg9JzE2JyBoZWlnaHQ9JzEyJz48cGF0aCBmaWxsPSdub25lJyBzdHJva2U9JyMwMDkwOTAnIGQ9J003LjUsMS41IEwzLDYgTDcuNSwxMC41JyBzdHJva2Utd2lkdGg9JzMnLz48L3N2Zz4=");
	}

	ul.downloads { display: inline-block; }
	ul.downloads li { padding-left: 45px; margin-bottom: 20px; }
	ul.downloads a { color: #009090; display: block; position: relative; }
	ul.downloads a::before { content: attr(data-type); position: absolute; left: -45px; top: calc(50% - 4px); width: 18px; height: 18px; font: normal 10px/10px "Fira Sans"; text-transform: uppercase; padding: 14.5px 0 0 12px; color: #fff; background: url('../icons/document_icon.svg') 0 0 / 30px auto no-repeat; }
	.pager div { box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; margin: 10px; border: 3px solid #b0d400; transition: background-color .5s; cursor: pointer; }
	.pager div.active { background-color: #b0d400; }


/* MAIN STYLES */
	.h1 { font: 700 32px/36px "Fira Sans", Arial, sans-serif; color: #006567; margin: 20px 0; }
	.h2 { font: 700 24px/28px "Fira Sans", Arial, sans-serif; color: #006567; margin: 20px 0; }
	.h3 { font: 700 18px/22px "Fira Sans", Arial, sans-serif; color: #006567; margin: 20px 0; }
	.h4 { font: normal 16px/20px "Fira Sans", Arial, sans-serif; color: #006567; margin: 20px 0; }
	p { margin: 20px 0; }
	@media (min-width: 1025px) {
		.h1 { font: 700 40px/44px "Fira Sans", Arial, sans-serif; }
		.h2 { font: 700 30px/36px "Fira Sans", Arial, sans-serif; }
		.h3 { font: 700 18px/20px "Fira Sans", Arial, sans-serif; }
		.h4 { font: normal 18px/22px "Fira Sans", Arial, sans-serif; }
	}


/* FORMS */
	input[type=text],
	input[type=email],
	input[type=date],
	input[type=tel],
	textarea,	select { font: normal 14px/20px Arial; color: #666; background: #fff; border: 1px solid #e5e5e5; border-radius: 3px; width: 100%; padding: 7px 10px; height: 34px; }
	input::placeholder { color: #b3b3b3; }
	input[type=text]:focus,
	input[type=email]:focus,
	input[type=date]:focus,
	input[type=tel]:focus,
	textarea:focus,
	select:focus {
		border: 2px solid #009090;
		outline: none;
	}

	/* Radio */
	.radio { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; }
	.radio:checked,
	.radio:not(checked) { background: transparent; position: relative; visibility: hidden; margin:0; padding:0; }
	.radio + label { cursor: pointer; }
	.radio:checked + label::before,
	.radio:not(:checked) + label::before { content:' '; display:inline-block; width: 17px; height:17px; position: relative; top:4px; border: 1px solid #bbb; background: white; margin-right: 0.5em; box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1); }
	.radio:checked + label::before,
	.radio:not(:checked) + label::before { border-radius: 30px; }
	.radio + label:hover::before { background:#ddd; box-shadow: inset 0 0 0 3px white; }
	.radio:checked  + label::before { background:#347374; box-shadow: inset 0 0 0 3px white; }

	/* Checkbox */
	.checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; }
	.checkbox:checked,
	.checkbox:not(checked) { background: transparent; position: relative; visibility: hidden; margin:0; padding:0; }
	.checkbox + label { cursor: pointer; }
	.checkbox:checked + label::before,
	.checkbox:not(:checked) + label::before { content:' '; display:inline-block; width: 17px; height:17px; position: relative; top:4px; border: 1px solid #bbb; background: white; margin-right: 0.5em; box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1); }
	.checkbox:checked + label::before,
	.checkbox:not(:checked) + label::before { border-radius: 3px; }
	.checkbox + label:hover::before { background:#ddd; box-shadow: inset 0 0 0 3px white; }
	.checkbox:checked  + label::before { background:#347374; box-shadow: inset 0 0 0 3px white; }


/* RESPONSIVE */
	.desktop { display: none; }
	@media (min-width: 980px) {
		.mobile { display: none; }
		.desktop { display: block; }
	}


/* COMMENTED HACKS */
	/* https://stackoverflow.com/questions/22204752/mac-safari-font-rendering-changes-thinner-when-any-element-on-the-page-gets-posi */
	body { -webkit-font-smoothing: subpixel-antialiased; }
	/* performance and stability hacks for the translate: scale functionality */
	body.fullpageslider main > section { backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; }


/* DEBUG */
	html.development .component:before { position: absolute; top: 0; left: 0; z-index: 999; content: attr(class); background: #ffe; box-shadow: 1px 1px 2px rgba(0,0,0,.25); color: #000; padding: 0 5px; font-size: 12px; opacity: .5; }
	html.development .component:hover:before { display: block; }
	html.development .component:before { display: none; }

	/* highlight external links without target=_blank */
	html.development a[href^="http"]:not([target="_blank"]):not(.logo),
	html.development a[href^="//"]:not([target="_blank"]):not(.logo) { background-color:red !important; }