div {
	background-repeat: no-repeat;
	background-position: 0% 100%;
	background-attachment: fixed;
	background-size: 100%;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

#more {
	position: absolute;
	right: 10;
	bottom: 10;
	color: white;
	font-size: 3em;
	cursor: pointer;
	z-index: 5;
}

p {			
	height: 1.5em;
	margin: 0 0 0 5%;
	position: fixed;
	z-index: 5;

	font-family:'Roboto-Light', 'Roboto';
	font-weight:300;
	color: white;
	letter-spacing: 1px;

	cursor: pointer;
}

span {
	font-size: 1.5em;
}

#sport { 
	bottom: 32.5vmin; 
	font-size: 5em;
}

#city {
	bottom: 26.5vmin; 
	font-size: 1em;
	
	background: url("city.jpg") no-repeat -9999px -9999px;
}

#landscape { 
	bottom: 21.5vmin; 
	font-size: 1em;
	
	background: url("landscape.jpg") no-repeat -9999px -9999px;
}

#other {
	bottom: 16.5vmin; 
	font-size: 1em;
	
	background: url("other.jpg") no-repeat -9999px -9999px;
}

#sport_bg {
	background-image: url("sport.jpg");
	background-position: 0% 100%;
}

#city_bg {
	background-image: url("city.jpg");
	background-position: 0% 70%;
	display: none;
}

#landscape_bg {
	background-image: url("landscape.jpg");
	background-position: 0% 100%;
	display: none;
}

#other_bg {
	background-image: url("other.jpg");
	background-position: 0% 100%;
	display: none;
}

@media only screen and (orientation: portrait) {
	#city {
		background: url("city-p.jpg") no-repeat -9999px -9999px;
	}
	
	#landscape {
		background: url("landscape-p.jpg") no-repeat -9999px -9999px;
	}
	
	#other {
		background: url("other-p.jpg") no-repeat -9999px -9999px;
	}

	#sport_bg {
		background-image: url("sport-p.jpg");
		background-position: 0% 100%;
	}
	
	#city_bg {
		background-image: url("city-p.jpg");
		background-position: 0% 100%;
		display: none;
	}
	
	#landscape_bg {
		background-image: url("landscape-p.jpg");
		background-position: 0% 100%;
		display: none;
	}
	
	#other_bg {
		background-image: url("other-p.jpg");
		background-position: 0% 100%;
		display: none;
	}
}