@import url('https://fonts.googleapis.com/css?family=Roboto|Kaushan+Script');
html,body{
	margin:0;
	padding:0;
	border:none;
	font-family: 'Roboto', sans-serif;
	background-color:#000000;
	color:#FFFFFF;
	letter-spacing:-0.03em;
}
nav{
	position:fixed;
	top:0; left:0;
	width:100%;
	height:4.7em;
	background-color:rgba(0,0,0,0.7);
	box-shadow:0 0 3em rgba(0,0,0,0.7);
	z-index:999;
	text-align:center;
	transition:top 0.2s;
	/*border-bottom:0.2em solid rgba(128,80,80,0.6);*/
}
nav li{
	display:inline-block;
	line-height:4.7em;
	vertical-align:top;
	padding:0 0.75em;
	background-color:rgba(255,240,192,0);
	transition:background 0.2s;
}
nav li:hover{
	border-bottom:0.2em solid #FF4020;
	background-color:rgba(255,240,192,0.1);
	transition:background 0.2s;
	cursor:pointer;
}
nav li:active{
	background-color:rgba(128,120,96,0.1);
	transition:background 0.2s;
}
nav li > *{
	display:block;
}
nav a{
	color:#FFFFFF;
	text-decoration:none;
	font-size:1.3em;	
}
nav.hidden{
	top:-8em;
	transition:top 0.35s;
}
#navFiller{
	height:4.7em;
}
#logo_small{
	height:4.7em; width:auto;
}
div.slide{
	width:100%;
	height:100vh;
	min-height:45em;
	background-size:cover;
	background-position:50% 50%;
	position:relative;
	overflow:hidden;
	padding:0;
	margin:0;
	background-attachment:fixed;
	box-shadow:0 0 40em rgba(0,0,0,0.6);
}
div.slide.stripe{
	height:auto;
	box-shadow:none;
	background-attachment:scroll;
}
div.stripeImg{
	background-size:cover;
	background-position:0% 0%;
}
div.credits{
	width:100%;
	background-color:#303030;
	color:#808080;
	text-shadow:0.02em 0.05em 0 #101010;
	position:relative;
	overflow:hidden;
	padding:1.75em 0.75em;
	box-sizing:border-box;
	box-shadow:inset 0 2em 2em -2em rgba(0,0,0,1);
	text-align:center;
	letter-spacing:0;
}
div.credits a{
	color:#A0A0A0;
}
div.dotty{
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	background:url('dotty.png');
}
div.slide.stripe div.dotty{
	background:url('dotty-darker.png');
}
div.centerContainerOuter{
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	display:table;
}
div.centerContainerInner{
	display:table-cell;
	vertical-align:middle;
}
p{
	display:block;
	text-align:center;
	font-size:1.8em;
	font-weight:300;
	text-shadow:0 0 2em rgba(0,0,0,1), 0 0 1em rgba(0,0,0,1);
	margin-left: 1em;
    margin-right: 1em;
	box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6{
	text-shadow:0 0 2em rgba(0,0,0,1);
	font-family: 'Kaushan Script', cursive, serif;
	border:none; padding:0;
	line-height:1em;
	margin:0 1em 0.2em 1em;
}
.slideTitle{
	font-size:7em;
	text-align:center;
}
div.stripe .slideTitle{
	font-size:5em;
}
div.leftHalf{
	position:absolute;
	top:0;left:0;
	width:50%; height:100%;
}
div.rightHalf{
	position:absolute;
	top:0;left:50%;
	width:50%; height:100%;
}
#logo_big{
	display:block;
	width:100%;
	max-width:55em;
	height:auto;
	margin:0 auto;
	animation:logo 0.8s ease-out;
}
@keyframes logo{
	0%{max-width:50em; opacity:0.2;}
	100%{max-width:55em; opacity:0.99;}
}
#down{
	position:absolute;
	bottom:1em; left:0; right:0;
	display:block;
	margin:0 auto;
	height:1.5em; width:auto;
	opacity:1;
	transition: opacity 0.3s;
}
#down.hidden{
	opacity:0;
}
a.button{
	border:0.14em solid #FFFFFF;
	color:#FFFFFF;
	font-size:1.5em;
	display:block;
	max-width:6.8em;
	margin:0 auto;
	padding:0.5em 2em;
	border-radius:0.2em;
	transition:background-color 0.2s, color 0.2s;
	text-decoration:none;
	text-align:center;
	text-shadow:0 0 2em rgba(0,0,0,1);
}
a.button:hover{
	background-color:#FFFFFF;
	color:#000000;
	text-shadow:0 0 2em rgba(0,0,0,0);
	transition:background-color 0.2s, color 0.2s;
}
a.button.slideAction{
	margin-top:2em;
}
#social{
	text-align:center;
}
img.socialIcon{
	width:2em; height:auto;
	margin:0.5em;
	box-shadow:0 0 2em rgba(255,255,255,0);
	transition: box-shadow 0.2s;
}
img.socialIcon:hover{
	box-shadow:0 0 2em rgba(255,255,255,0.6);
	transition: box-shadow 0.2s;
}
@media all and (min-width:100em){
	p{
		display: block;
		max-width: 50em;
		width: 100%;
		margin: 0 auto;
		padding:0 1em;
	}
}
@media all and (max-width:100em){
	div.stripeImg{
		display:none;
	}
	div.stripeImg + div.leftHalf, div.stripeImg + div.rightHalf{
		top:0; left:0;
		width:100%; height:100%;
	}
	div.slide.stripe div.dotty{
		background:url('dotty.png');
	}
}
@media all and (max-width:70em){
	div.leftHalf{
		width:100%; height:50%;
	}
	div.rightHalf{
		width:100%; height:50%;
		left:0; top:50%;
	}
	.slideTitle{
		font-size:5em;
	}
}
@media all and (max-width:40em){
	body{
		font-size:0.8em;
	}
	nav.hidden{
		top:0;
	}
}
@media all and (max-width:30em){
	body{
		font-size:0.7em;
	}
	.slideTitle{
		font-size:4em;
	}
}
@media all and (max-width:25em){
	body{
		font-size:0.65em;
	}
}
@media all and (max-width:20em){
	body{
		font-size:0.65em;
	}
	nav{
		display:none;
	}
}
@media all and (max-height:50em) and (min-width:70em){
	body{
		font-size:2vh;
	}
}
@media all and (max-height:25em){
	body{
		font-size:0.5em;
	}
}
@media print{
	*{
		background:none !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	body{
		color:#000000;
	}
	a{
		color:#202080;
	}
	nav{
		display:none;
	}
	#social{
		display:none;
	}
}