@font-face{font-family:'Nunito Sans';font-weight:400;font-style:normal;src:url(../fonts/nunitosans400.woff2) format(woff2),url(../fonts/nunitosans400.woff) format(woff);}
@font-face{font-family:'Nunito Sans';font-weight:700;font-style:normal;src:url(../fonts/nunitosans700.woff2) format(woff2),url(../fonts/nunitosans700.woff) format(woff);}
@font-face{font-family:'Nunito Sans';font-weight:900;font-style:normal;src:url(../fonts/nunitosans900.woff2) format(woff2),url(../fonts/nunitosans900.woff) format(woff);}

/* CSS Reset, adjustments ........................................................................................... */

html,body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd,blockquote,cite,figure,fieldset,legend,textarea,pre,iframe,button,input,select,textarea{margin:0;padding:0;border:0;font:inherit}ul{list-style:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
img,svg,embed,iframe,object,audio{display:block;height:auto;max-width:100%}
html{overflow-y:scroll !important;height:100%;}main{display:block;}


/* Webfonts ..........................................................................................................*/

@font-face { font-family: 'Icons'; font-style: normal; font-weight: 400; src: url('../fonts/fa-solid-900.woff2') format('woff2'), url('../fonts/fa-solid-900.woff') format('woff'); }


/* Main ..............................................................................................................*/

html { 
	font-size: 15px;
}
@media screen and ( min-width: 1024px ) {
	html { 
		font-size: calc( 0.457vw + 10.317px );
	}
}
@media screen and ( min-width: 1680px ) {
	html { 
		font-size: 18px;
	}
}
body {
	line-height: 1.4; font-family: 'Nunito Sans',sans-serif;
}
.page {
	max-width: 1680px; margin: 0 auto;
	background: #22222a url(../img/mainbg.jpg) no-repeat; background-position: 0 -3rem; background-size: 100% auto;
}
.front-page .page {
	background-position: 0 0;
}

.page > header, section, .page > footer, .project-intro--text {
	padding-left: 5vw; padding-right: 5vw;
}
@media screen and (min-width: 1680px) {
	body {
		background: linear-gradient(180deg, #666672 0%, #40404f 100%); background-attachment: fixed;		
	}
	.page {
		box-shadow: 0 0 2rem rgba(0,0,0,0.5);
	}
	.page > header, section, .page > footer, .project-intro--text {	
		padding-left: 84px; padding-right: 84px;
	}
}

/* Generic .......................................................................................................... */

h1, h2 {
	font-weight: 700; font-size: 1.22rem; letter-spacing: 0.05em; text-transform: uppercase;
}
h2 {
	margin-bottom: 1.5em;
}
section > header {
	margin-bottom: 1.5em;
}


p+*, * + p {
	margin-top: 0.7rem;
}
a {
	color: #333;
}
em {
	font-style: italic;
}

.more, a .more {
	display: inline-block;
	padding: 0.25em 0.5em; border-radius: 0.33em;
	background-color: #fff;
	color: #000;
}
.more:hover, a:hover .more {
	background-color: #eee;
}

/* Icons */

.icon::before {
	font-weight: 400; font-family: 'Icons';
}
.icon--restricted::before {
	content: '\f3c1';
}


/* Aspect-ratio elements */

.aspectratio-container {
	position: relative;
	width: 100%; height: 0;
}
.aspectratio-element {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
}
.aspectratio-element img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
}


/* Data "tables" */

.data-item {
	display: flex;
	border-bottom: 1px dotted #9c9; padding-bottom: 0.5rem;
}
.data-item + .data-item {
	padding-top: 0.5rem;
}
.data-item > * {
	flex: 1;
}


/* Header ........................................................................................................... */

.page > header {
	position: relative; z-index: 2;
}
.page > header  a {
	text-decoration: none;
}
.page > header nav .nav-drop-sensor {
	display: none;
}

.page-header nav a {
	width: 100%;
	color: #fff; font-weight: 700; font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.1em;
}


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

	.page {
		padding-top: 4rem;
		background-position: 0 -17rem;
	}

	.page > header {
		position: fixed; top: 0; left: 0;
		width: 100%; height: 4rem; padding: 0 5% 0;
		background: #22222a url(../img/mainbg.jpg) no-repeat; background-position: 0 0; background-size: 100% auto;
	}
	.logo {
		position: absolute; top: 1rem; left: 5%;
	}
	.logo a {
		display: block;
		width: 6rem; height: 2rem;
	}

	.page > header nav {
		position: fixed; top: 4rem; right: -100vw; bottom: 0; z-index: 10000;
		width: 100%; overflow: auto;
		background: #22222a;
		transition: right 0.33s;
	}
	.nav-open .page > header nav {
		right: 0;
	}
	.page > header nav li {
		position: relative;
		max-width: none !important;
	}
	.page > header nav>ul>li {
		border-bottom: 1px solid rgba(255,255,255,0.15);
	}
	.page > header nav a {
		display: block;
		padding: 1rem 5.75rem 1rem 1.25rem;
		color: #fff; line-height: 1;
	}

	.page > header nav ul ul {
		display: none;
		padding-left: 2rem;
	}

	.nav-drop-trigger {
		display: block; position: absolute; top: 0; right: 0;
		width: 3.75rem; height: 3rem;
		cursor: pointer;
	}
	.page > header nav .nav-drop-sensor:checked + ul {
		display: block;
	}
	.page > header nav .nav-drop-trigger::before {
		position: absolute; top: 0.8rem; right: 0; z-index: 1;
		content: '\f150'; display: block;
		width: 3.75rem;
		color: #fff; font-family: 'Icons'; text-align: center;
	}
	.page > header nav .nav-drop-sensor:checked + ul + .nav-drop-trigger {
		background-color: rgba(255,255,255,0.15);
	}
	.page > header nav .nav-drop-sensor:checked + ul + .nav-drop-trigger::before {
		content: '\f151';
	}

	.page > header nav .active > a {
		font-weight: 700;
	}

	.nav-toggle {
		position: fixed; top: 0; right: 0; z-index: 10010;
		width: 4rem; height: 4rem;
		cursor: pointer;
		transition: background-color 0.33s;
	}
	.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {
		display: block; content: '';
		position: absolute;
		width: 1.5rem; height: 0.13rem;
		background-color: #fff;
		transition: background-color 0.25s, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
	.nav-open .nav-toggle-icon, .nav-open .nav-toggle-icon::before, .nav-open .nav-toggle-icon::after {
		transition: background-color 0.125s, transform 0.375s;
	}
	.nav-toggle-icon::before, .nav-toggle-icon::after {
		left: 0;
	}
	.nav-toggle-icon {
		top: 50%; left: 50%;
		transform: translate3D(-50%,-50%,0);
	}
	.nav-toggle-icon::before {
		top: -0.4rem;
	}
	.nav-toggle-icon::after {
		top: 0.4rem;
	}
	.nav-open .nav-toggle .nav-toggle-icon {
		background-color: transparent;
	}
	.nav-open .nav-toggle-icon::before {
		transform: translate3d(0, 0.4rem, 0) rotate(45deg);
	}
	.nav-open .nav-toggle-icon::after {
		transform: translate3d(0, -0.4rem, 0) rotate(-45deg);
	}

}


@media screen and (min-width: 1024px) {

	.page-header {
		display: flex;
		padding: 0 5% 2rem;
	}

	.logo {
		position: relative; z-index: 2;
		width: 33%; padding-top: 2rem;
	}
	.front-page .logo {
		padding-top: 4rem; 
	}

	.logo a {
		display: block;
		width: 12rem; height: 4rem;
	}
	.front-page .logo a {
		width: 16.5rem; height: 5.5rem;
	}

	.page-header nav {
		position: relative; z-index: 10;
		width: 67%;
		line-height: 1.5;
	}
	.page-header nav > ul {
		display: flex;
		width: 100%; height: 100%;
		list-style: none;
	}
	.page-header nav > ul > li {
		margin-left: 0.5rem;
		position: relative;
		display: flex; flex-grow: 1; flex-basis: 0;
	}
	.page-header nav > ul > li > a {
		display: flex; align-items: flex-end;
		border-left: 1px solid rgba(64,64,78,0.95);
		width: 100%; height: 100%; padding: 1rem;
	}

	header > nav li.active > a {
		color: #fff; background: linear-gradient(180deg, rgba(64,64,78,0) 25%, rgba(64,64,78,0.95) 100%);
	}
	header > nav li a:hover,
	header > nav ul ul li.active a {
		background: rgba(140,140,149,0.95);
	}
	header > nav > ul > li > a:hover {
		background: linear-gradient(180deg, rgba(140,140,149,0) 25%, rgba(140,140,149,0.95) 100%);
	}
	header > nav ul ul {
		position: absolute; top: 100%; left: 0;
		white-space: nowrap;
		display: none;
	}
	header > nav li:hover ul {
		display: block;
	}
	header > nav ul ul a {
		display: block;
		padding: 0.5rem 1rem;
		background-color: rgba(64,64,78,0.95);
	}

}

/* Footer ........................................................................................................... */

.page > footer {
	padding-top: 1rem; padding-bottom: 1rem;
	color: #ccc; font-size: 0.75rem;
}
.page > footer a {
	color: #fff; text-decoration: underline;
}


/* Regular pages .................................................................................................... */

main > header {
	margin-bottom: 2rem;
}
main > header h1 {
	display: inline-block;
	padding: 1rem 2rem;
	background: #9c9;
	color: #fff;
	border-bottom: 2px solid #9c9;
	font-size: 2rem;
}

section {
	padding-top: 3rem; padding-bottom: 3rem;
}

/* Sections */

.section--frontpage {
	color: #fff;
}
.section--message {
	padding-top: 1rem; padding-bottom: 1rem;
	background-color: #ffd;
	font-size: 0.83rem;
}
.content-container {
	max-width: 50rem; margin: 0 auto;
}



/* Project */

.section--project-intro {
	padding: 0;
	background-size: cover; background-position: center;
}
.project-intro--text {
	padding-top: 3rem; padding-bottom: 3rem;
	background-color: rgba(255,255,255,0.85);
	background: linear-gradient(160deg, rgba(255,255,255,0.7) 0%, #fff 100%);
}

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

	.project-intro--logo {
		padding: 4rem 0;
	}
	.project-intro--logo h1 {
		font-size: 2.5rem;
		color: #fff; text-align: center;
	}
	.project-intro--logo h1 img {
		display: inline-block;
		width: 70%; max-width: 20rem; height: auto;
	}
	
}

@media screen and (min-width: 1024px) {

	.section--project-intro {
		display: flex; align-items: center; justify-content: center;
		min-height: min( 24rem, 60vh);
	}
	.project-intro--text {
		display: flex; flex-direction: column; justify-content: center;
		width: 33%; height: 100%;
	}
	.project-intro--logo {
		width: 67%;
	}
	.project-intro--logo h1 {
		font-size: 2.5rem;
		color: #fff; text-align: center;
	}
	.project-intro--logo h1 img {
		display: inline-block;
		height: 13rem; width: auto;
	}

}

.project-status {
	display: inline-block;
	padding: 0.15rem 0.5rem; border-radius: 0.25rem;
	background-color: #404049;
	color: #fff; font-size: 0.84rem;
}

.section--project-details, .section--regular, .section--frontpage-news {
	background: linear-gradient(200deg, #cacacc 0%, #fff 100%);
}
.section--project-details:nth-child(2n), .section--regular:nth-child(2n) {
	background: linear-gradient(160deg, #cacacc 0%, #fff 100%);
}


/* News & Events */

.event-data {
	background: #eee;
}
.event header h2 {
	margin-bottom: 0;
}
.event header {
	margin-bottom: 1.5rem;
}
.event {
	display: flex;
}
.event-image {
	width: 20%;
}
.event-main {
	padding-left: 2.5rem; width: 40%;
}
.event-content {
	font-size: 0.8rem;
}
.event-gallery {
	padding-left: 2.5rem; width: 40%;
}
.section--news article + article {
	margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #999;
}

/* Grids ............................................................................................................ */


.teasers {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.75rem;
}
.teaser {
	padding: 0.75rem;
}
.teaser--intro, .teaser--header {
	width: 100%;
}
.teaser--movie, .teaser--more {
	width: 50%;
}

@media screen and (min-width: 640px) {
	.teaser--header {
		width: 33.333%;
	}
	.teaser--intro {
		width: 100%;
	}
	.teaser--movie, .teaser--more {
		width: 33.333%;
	}
}
@media screen and (min-width: 1024px) {
	.teaser--header {
		width: 25%;
	}
	.teaser--intro {
		width: 50%;
	}
	.teaser--movie, .teaser--more {
		width: 25%;
	}
}
@media screen and (min-width: 1366px) {
	.teaser--header {
		width: 20%;
	}
	.teaser--intro {
		width: 40%;
	}
	.teaser--movie, .teaser--more {
		width: 20%;
	}
}


/* Teasers .......................................................................................................... */

.teaser--header .teaser-content {
}

.movieteaser {
	position: relative;
	overflow: hidden;
	width: 100%; height: 0; padding-bottom: 141.3%; /* 460:650 */
}

.movieteaser > a,
.movieteaser-image,
.movieteaser-image img {
	position: absolute; top: 0; left: 0; z-index: 1;
	width: 100%; height: 100%;
}
.movieteaser-image img {
	object-fit: cover;
	transition: transform 0.25s;
}
.movieteaser-title {
	position: absolute; bottom: 1rem; left: 0; z-index: 3;
	max-width: 80%; padding: 0.25rem 2rem;
	background: rgba(87,85,85,0.8);
	color: #fff;
	transition: background-color 0.25s, color 0.25s;
}
.movieteaser:hover .movieteaser-image img {
	transition: transform 2.5s;
	transform: scale(1.2);
}
.movieteaser-title {
	background-color: #fff;
	color: #000;
}


/* Columns .......................................................................................................... */

@media screen and (min-width: 640px) {

	.cols {
		display: flex;
	}
	.col {
		flex: 1;
	}
	.col:not(:last-child) {
		padding-right: 1.5rem;
	}
	.col + col {
		padding-left: 1.5rem;
	}
	.col--25 {
		flex: 2;
	}
	.col--35 {
		flex: 3;
	}

}
@media screen and (max-width: 639px) {

	.col + .col {
		margin-top: 2rem;
	}

}


/* Thumbs */

.thumbs {
	margin: -0.5rem;
}
.thumbs::after,
.thumbs figure::after {
	display: table; content: ''; clear: both;
}
.thumbs li {
	display: block;
	float: left;
	padding: 0.5rem;
}
.thumbs a {
	display: block;
	color: #000;
}
.thumbs figure {
	position: relative;
	max-height: 12rem;
}
.thumbs img, .thumbs video {
	float: left;
}
figcaption {
	margin-top: 0.25rem;
	font-size: 0.83rem;
}
.thumb a {
	text-decoration: none;
}

.thumb figure{
	position: relative;
}
.thumb figure::before, .thumb figure::after {
	display: block; position: absolute; z-index: 20;
	font: 400 1rem 'Icons';
	color: #eee; text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

.thumb--video figure::after {
	content: '\f144'; top: 50%; left: 50%; transform: translate3D(-50%,-50%,0);
	font-size: 3rem;
}
.thumb--image figure::after, .thumb--file figure::after {
	content: '\f00e'; bottom: 1rem; left: 1rem;
}

.thumb--restricted figure::before {
	content: '\f3c1'; top: 1rem; right: 1rem;
}


/* Forms */

* + form {
	margin-top: 2rem;
}
form {
	padding: 1.5rem;
	background-color: rgba(0,0,0,0.05);
}
label {
	display: block;
}
input[type=password] {
	width: 100%; padding: 0.25rem; border: 1px solid rgba(0,0,0,0.2);
}
input[type=submit] {
	margin-top: 1rem;
	padding: 0.5em 1em;
	background-color: rgba(0,0,0,0.2);
	cursor: pointer;
}
input[type=submit]:hover {
	background-color: rgba(0,0,0,0.5);
	color: #fff;
}
.aup-error {
	padding: 1rem; margin-bottom: 1rem;
	background: #ffc;
}


/*! Lity - v2.4.0 - 2019-08-10
* http://sorgalla.com/lity/
* Copyright (c) 2015-2019 Jan Sorgalla; Licensed MIT */.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.9);outline:none !important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important}.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease}.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}.lity-content:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:0;top:0;-webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close::-moz-focus-inner{border:0;padding:0}.lity-close:hover,.lity-close:focus,.lity-close:active,.lity-close:visited{text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close:active{top:1px}.lity-image img{max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container,.lity-youtube .lity-container,.lity-vimeo .lity-container,.lity-facebookvideo .lity-container,.lity-googlemaps .lity-container{width:100%;max-width:964px}.lity-iframe-container{width:100%;height:0;padding-top:56.25%;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none}