body, html{
	margin: 0;
	height: 100%;
	position: relative;
	font-family: 'Brandon Grotesque med', serif;
}
body{
	background: url(../img/poster.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: #fff;
}

h1, h2{
	margin: 0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

a:link {color: #fff; text-decoration: none;}
a:visited {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: none;}
a:active {color: #fff; text-decoration: none;} 


#logo{
	position: fixed;
	width: 100%;
	text-align: center;
	top: 0;
}
#music{
	position: fixed;
	right: 2%;
	bottom: 3%;
	cursor: pointer;
}
#glasses{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#glass1{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/glass1.png) no-repeat left bottom fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 0;
}
#glass2{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/glass2.png) no-repeat left bottom fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 0;
}



#years{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#y1892{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/1892.svg) no-repeat left center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 0;
}
#y2016{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/2016.svg) no-repeat left center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 0;
}



#wrapper{
	position: relative;
	width: 100%;
	height: 100%;
}

#text_wrapper{
	position: absolute;
	height: 100%;
	width: 50%;
	right: 0;
	top: 0;
}

#text_wrapper .text{
	position: relative;
	width: 100%;
	height: 100%;
}
#text_wrapper .double{
	position: relative;
	width: 100%;
	height: 200%;
}
#text_wrapper .double .text{
	position: relative;
	width: 100%;
	height: 50%;
}

#text_wrapper .text h1{
	top: 35%;
	padding-left: 20%;
	padding-right: 20%;
	position: relative;
}
#franka{
	font-size: 0.8em
}
#franka h1{
	top: 15% !important;
}
#franka img{
	margin-top: 10%;
	width: 100%;
}

.scroll{
	position: absolute;
	bottom: 10%;
	text-align: center;
	width: 100%;
	cursor: pointer;
}












@media screen and (orientation:portrait) {
	#glass1{
		background: url(../img/glass1_v.png) no-repeat left bottom fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		display: none;
	}
	#glass2{
		background: url(../img/glass2_v.png) no-repeat left bottom fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		display: none;
	}
	
	#text_wrapper{
		width: 100%;
	}
	#text_wrapper .text{
		text-align: center;
	}
	#text_wrapper .text h1{
		top: 20%;
		padding-left: 0;
		padding-right: 0;
		position: relative;
	}
	
	#years{
		display: none;
	}
	
	#franka{
		font-size: 0.6em;
		width: 90% !important;
		margin: auto;
	}
	
	#franka img{
		width: 80% !important;
	}
	#logo img{
		width: 12%;
	}
}