body {
	font-family: 'GT-Eesti-Display', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	background-color: black;
	color: #fff;
	letter-spacing: 0.1em;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.inlineblock {
	display:inline-block;
}

.nowrap {
	white-space:nowrap;
}

.wrapper {
	min-height: 100%;
	margin: 0 auto;
}

.wrapper,
.mainHeader,
.mainContainer,
.mainFooter {
	position: relative;
}

.desktopHeader {
	display:none;
}

.mainContainer {
	margin-bottom: 3em;
	padding: calc(70px + 8%) 8% 8% 8%;
}

.mainFooter {
	padding: 8% 8% 180px 8%;
}

.mainContainer a,
.mainContainer a:hover,
.mainFooter a,
.mainFooter a:hover,
.slideDetails a,
.slideDetails a:hover {
	color: #00ffff;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.mainContainer p>a {
	padding-bottom: 0.05em;
}

.mainContainer a:hover,
.mainFooter a:hover,
.slideDetails a:hover {
	border-bottom: 1px solid white;
}

a.noUnderline:hover {
	border-color:transparent;
}

.mainContainer img,
.mainFooter img {
	max-width: 100%;
	width: auto;
}

p {
	margin: 0 0 1em 0;
}

.logoContainer {
	position: relative;
	padding-top: 7em;
}

.mobileLogo {
	position: relative;
	width: 100vw;
	height: 100vh;
	text-align: center;
}

.mobileLogo svg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 80vw;
	max-height: 50vh;
	height: auto;
	fill: white;
	padding-top: 30px;
}

.mobileHeader {
	position: fixed;
	z-index: 28;
	width: 100%;
	background-color: white;
	height: 3.2em;
	border-bottom: 4px solid black;
}

.mobileHeader.shadowBottom {
	box-shadow: 0 0 40px 20px black;
}

.rocketIcon {
	position: absolute;
	top: 0;
	right: 6%;
	padding: 8px 5px 0 10px;
}

.rocketIcon svg {
	height: 2.2em;
	width: 2.2em;
	fill: black;
}


/* page */


.pageTitle {
	font-weight: 600;
	font-size: 1.3333333em;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 2em;
}

input.pageTitle {
	margin-bottom: 0;
}

.home:not(.isAuth) h1.pageTitle {
	opacity: 0;
}

.sideTitle {
	font-size: 1.8em;
	line-height: 1.2;
}

.contentArea {
	position: relative;
	margin-bottom: 5em;
}

.contentArea img {
	display:block;
	max-width: 100%;
}

.vereinForm input[type=text],
.vereinForm input[type=email],
.vereinForm textarea {
	border: 0;
	border-radius: 4px;
	padding: 0.4em 0.5em;
	background-color: black;
	border: 1px solid white;
	color: white;
	width: 100%;
}

.vereinForm input.short {
	width: 50px;
	padding: 0.2em 0.5em;
}

.vereinForm textarea {
	margin-top: 0.3em;
	min-height: 4.2em;
}

.vereinForm label  {
	margin-top: 1em;
	margin-bottom: 0.3em;
}

.vereinForm .submitError,
.vereinForm .submitPending {
	margin-top: 1em;
}

.vereinForm button {
	background-color: #00ffff;
	color: black;
	cursor:pointer;
	padding: 0.5em 1em;
}

.vereinForm button:hover {
	background-color: white;
}

.videoOverlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 50;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.videoOverlay.open {
	opacity: 1;
}

.videoOverlay .videoContainer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: auto;

}

.overlayCloser {
	position: absolute;
	top: -56px;
	right: 11px;
	padding: 10px;
}

.overlayCloser svg {
	width: 22px;
	height: 22px;
	cursor:pointer;
}

.overlayCloser line {
	stroke: white;
	stroke-width: 2.2;
}



/* mobile only */
@media only screen and (max-width: 950px) {
	/* hackfix disable ios input zoom */
	.userForm input[type=text],
	.userForm input[type=email],
	.userForm textarea {
		font-size: 16px;
	}
}


/* mobile landscape only */
@media screen and (orientation:landscape)
and (min-width: 450px) 
and (max-width: 950px) {
	.videoOverlay .videoContainer {
		width: 85%;
	}
	
	.videoOverlay .overlayCloser {
		top: 0;
		right: -45px;
	}
	
	.mobileHeader.shadowBottom {
		box-shadow: none;
	}
	
}




/* desktop */
@media only screen and (min-width: 950px) {
	.mobileHeader,
	.mobileLogo {
		display:none;
	}
	
	.desktopHeader {
		position: fixed;
		display: block;
		width: 100%;
		height: 182px;
		background-color: black;
		z-index: 10;
	}
	
	body:not(.inEditMode) .desktopHeader.shadowBottom {
		box-shadow: 0 0 80px 60px black;
	}
	
	.desktopHeader svg {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		fill: white;
	}
	
	.mainHeader,
	.mainContainer,
	.mainFooter {
		padding: 0;
		margin: 0;
	}
	
	.mainHeader {
		height: 270px;
	}
	
	.mainContainer {
		padding-bottom: 4em;
	}
	
	.desktopLogo {
		position: absolute;
		top: 0;
		padding: 0;
		width: 100%;
	}
	
	.desktopLogo {
		top: 57px;
	}
	
	.contentArea {
		padding: 5%;
		width: 70%;
	}
	
	body:not(.isAuth) .pageTitle {
		position: fixed;
		top: 162px;
		left: 5%;
		z-index: 11;
	}
	
	.vereinForm {
		width: 70%;
	}
	
	
	.videoOverlay .videoContainer {
		width: 90%;
		height: auto;
	}
	
	.videoOverlay .overlayCloser {
		right: -10px;
		top: -60px;
	}

}

/* desktop */
@media only screen and (min-width: 950px) {

	.mainArea {
		position: relative;
		padding: 0;
		left: 5%;
		width: 40%;
		max-width: 560px;
	}
	
	.planetariumArea {
		position: absolute;
		top: 0;
		padding: 0;
	}
	
	.desktopLogo,
	.planetariumArea {
		left: 42%;
		width: 40%;
	}
	
	.videoOverlay .videoContainer {
		max-width: 1420px;
		width: 85%;
		height: auto;
	}
	
	.videoOverlay .overlayCloser {
		position:absolute;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		text-align: right;
		padding-top: 0;
		padding-bottom: 0;
		pointer-events: none;
	}
	
	.videoOverlay .overlayCloser svg {
		margin-right: calc(-20px - 4%);
		width: 4%;
		max-width: 2.2em;
		height: 4%;
		pointer-events:auto;
	}
	
	.videoOverlay .overlayCloser line {
		stroke: white;
		stroke-width: 1.6;
	}

}




/* images / gallery */

.imageFieldHalf {
	display:inline-block;
}

.imageField,
.gallery {
	position: relative;
	overflow:hidden;
	width: 100%;
	padding-bottom: 60%;
	height: 0;
	-ms-touch-action: none;
}


.imageField.portrait,
.gallery.portrait {
	width: 100%;
	padding-bottom: 160%;
}

.imageFieldHalf.portrait {
	width: 100%;
	padding-bottom: 130%;
}


.imageField>img {
	position:absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	transition: opacity ease 0.3s;
}

.gallery>img[data-orientation="portrait"] {
	height: 100%;
	width: auto;
}

.gallery>img.active {
	opacity: 1;
}

.slidesButtons {
	display:none;
}

/* slide indicators */

.gallery .slideIndicatorContainer {
	position: absolute;
	bottom: 0;
	text-align: center;
	margin: 0.4em auto;
	width: 100%;
}

.gallery .slideIndicator {
	position: relative;
	display:inline-block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	margin-right: 6px;
	background-color: #666;
}

.gallery .slideIndicator:not(.active) {
	background-color: #ddd;
}


/* desktop */
@media only screen and (min-width: 950px) {

	.imageField.portrait,
	.gallery.portrait {
		width: 100%;
		padding-bottom: 60%;
	}
	
	.imageFieldHalf.portrait,
	.imageFieldHalf {
		width: 50%;
		padding-bottom: 66%;
	}

	.slidesButtons {
		display:block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.slidesButtons>div {
		position: absolute;
		display:block;
		width: 3em;
		height: 100%;
		cursor: pointer;
	}

	.slidesArrow {
		width: 60%;
		position: absolute;
		top: 50%;
		margin-top: -20px;
		transition: margin-left ease 0.1s;
	}

	.slideLeftButton .slidesArrow,
	.slideLeftButton {
		left: 0.5em;
	}

	.slideRightButton .slidesArrow,
	.slideRightButton {
		right: 0.5em;
	}
}



/* footer */
.mainFooter {
	text-align: left;
}

.footerText {
	font-size: 0.7333333em;
	line-height: 1.6;
}

.footerText img {
	max-width: 120px;
}

/* desktop */
@media only screen and (min-width: 950px) {
	
	.mainFooter {
		padding-top: 2em;
	}
	
	.mainFooter.relative {
		left: 0;
		right: auto;
		padding-left: 5%;
		padding-bottom: 3%;
		max-width: 400px;
	}
	
	.mainFooter.relative .footerText {
		text-align:  left;
	}
	
	.mainFooter.fixed {
		position: fixed;
		bottom: 3%;
		right: 5%;
		text-align: right;
		z-index: 15;
	}
	
}




/* rocket anim */

/* desktop */
@media only screen and (min-width: 950px) {
	.pageFader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0;
		transition: opacity 1s ease;
		z-index: 20;

	}

	.pageFader.active {
		opacity: 1;
	}
	
	.rocketAnimContainer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
	}
	
	@keyframes rocketFlight {
		0% {
			opacity: 0;
			top: 100vh;
		}
		10% {
			opacity: 0;
		}
		40% {
			opacity: 1;
		}
		100% {
			top:59px;
		}
	}

	@keyframes trailFire {
		0% {
			height: 70px;
		}
		80% {
			height: 70px;
		}
		100% {
			height: 30px;
		}
	}

	.rocketAnimIcon {
		position: absolute;
		top: 100vh;
		animation: rocketFlight 2s cubic-bezier(0.240, 0.450, 0.430, 1.0);
		left: 42%;
		right: auto;
		width: 40%;
		margin: auto;
		animation-fill-mode: forwards;
		will-change: opacity,top;
	}

	.rocketBody {
		position: relative;
		height: 32px;
	}

	.rocketTrail {
		position: relative;
		height: 40px;
	}

	.rocketAnimIcon svg {
		fill: white;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}

	.rocketTrail svg {
		top: 0;
		height: 30px;
		animation: trailFire 2s ease-out;
		animation-fill-mode: forwards;
		will-change: height;
	}
}


/* partner logos */

body.partner .contentArea .mainText img {
	max-width: 200px;
	max-height: 40px;
}

body.partner .contentArea .mainText img.logowir {
	max-width: 260px;
	max-height: none;
}

body.partner .contentArea .mainText img.logoswisslos {
	max-width: 370px;
	max-height: none;
}

body.partner .contentArea .mainText img.logostadtsg {
	max-height: 50px;
	max-height: none;
}

body.partner .contentArea .mainText img.logodrosos {
	max-width: 240px;
	max-height: none;
}

body.partner .contentArea .mainText img.logowitzig {
	max-height: 70px;
	max-height: none;
}

body.partner .contentArea .mainText img.logobak {
	max-width: 340px;
	max-height: none;
}

body.partner .contentArea .mainText img.logobeisheim {
	max-width: 280px;
	max-height: none;
}

body.partner .contentArea .mainText img.logoegs {
	max-width: 360px;
	max-height: none;
}

body.partner .contentArea .mainText img.logoknechtli {
	max-width: 360px;
	max-height: none;
}

body.partner .contentArea .mainText img.logostjs {
	max-width: 180px;
	max-height: none;
}

/* desktop */
@media only screen and (min-width: 950px) {
	
	body.partner .contentArea .mainText img.logoknechtli {
		max-width: 460px;
		max-height: none;
	}
}