html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	/*overflow: hidden;*/
}

/*
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
*/

#splash-container {
	height: 100%;
	position: relative;
}
#splash-container .left {
	float:left;
	width: 50%;
	height: 100%;
	position: relative;
	background-color: #EF776E;
}

/*TODO: this probably needs an optical fix once we have the correct font as the logo text is not in the middle of the logo.*/
/*its not centered really in the template as well... its about 24 pixel off (=> 12px to high)*/
/*...we position the elements at top: 48%; to handle this.*/
#splash-container .left .text {
	position: absolute;
	top: 48%;
	right: 0;
	
	height: 210px;
	width: 210px;
	line-height: 210px;
	margin-top: -105px;
	
	background-color: transparent;
	text-align: right;
	color: white;
}
#splash-container .right {
	float:left;
	width: 50%;
	height: 100%;
	position: relative;
	background-color: #f0f1f1;
}
#splash-container .right .text {
	position: absolute;
	top: 48%;
	left: 0;
	height: 40px;
	line-height: 40px;
	margin-top: -20px;
	
	background-color: transparent;
	/*display: none;
	*/
}

#splash-container .right .asdf {
	position: absolute;
	top: 48%;
	left: 0;
	height: 46px;
	line-height: 46px;
	margin-top: -27px; /*adding 4px as position fix => -23px - 4px = -27px*/
	
	background-color: transparent;
	display: none;
	
	padding-left:35px; /*same as 1/4 of the logo which is the same as the spacing around the img (if they made the img according to their guidelines)*/
	padding-left:29px; /*it seems to be wrong in the layout, so we align the value a little in order to match the logo definitions (layout: 25px; 5px off compared to the logo =>)*/
	font-size: 46px;
	font-family: Verdana, Arial, sans-serif;
	
	/*border: 1px solid red;
	*/
}
#splash-container .right .asdf1,
#splash-container .right .asdf1-preload {
	color: #EF776E;
}

#splash-container .right .asdf0 {
	color: #EF776E;
	display: block;
}

#splash-container .right .asdf1 {
	/*display: block;
	*/
}
#splash-container .right .asdf2-preload,
#splash-container .right .asdf2 {
	color: #aab7b8;
}
#splash-container .right .asdf3-preload,
#splash-container .right .asdf3 {
	color: #f0f1f1; /*not in use*/
}
#splash-container .right .asdf4-preload,
#splash-container .right .asdf4 {
	color: #212f3d;
}
#splash-container .right .asdf5-preload,
#splash-container .right .asdf5 {
	color: #aab7b8; /*not in use*/
}
#splash-container .right .asdf6-preload,
#splash-container .right .asdf6 {
	color: #f0f1f1;
}
#splash-container .right .asdf7-preload,
#splash-container .right .asdf7 {
	color: #212f3d; /*not in use*/
}
#splash-container .right .asdf8-preload,
#splash-container .right .asdf8 {
	color: #EF776E;
}

#bg-box {
	position: relative;
	height: 100%;
	width: 100%;
}
/*different BG colors
EF776E => green
212f3d => darkblue => BOX
aab7b8 => greyblue => ENJOY
f0f1f1 => whiteish => USE + CIRCLE

*/

.bg {
	display:none;
	position: absolute;
	height: 100%;
	width: 100%;
	/*background-color: #cdcdcd;*/
	/*overflow: hidden;*/
}
#bg1 {
	background-color: #aab7b8;
}
#bg2 {
	background-color: #f0f1f1;
}
#bg3 {
	background-color: #212f3d;
}
#bg4 {
	background-color: #aab7b8;
}
#bg5 {
	background-color: #f0f1f1;
}
#bg6 {
	background-color: #212f3d;
}
#bg7 {
	background-color: #EF776E;
}
#bg8 {
	background-color: #f0f1f1;
}
.splash-clearfix {
	height: 0;
	line-height: 0;
	float: none;
	clear: both;
}

.z-index-fix {
	z-index: 100;
}

.text-bottom {
	position: absolute;
	bottom: 55px;
	
	z-index: 200;
}
.text-bottom,
.text-bottom a {
	color: #FFFFFF;
	font-family: Verdana, Arial, sans-serif;
	font-size:19px;
}
/*in case there will be a link there instead*/
.text-bottom a {
	text-decoration: none;
	outline: 0;
}
#splash-container .left .text-bottom {
	right: 0;
	padding-right: 3px;
	
	background-color: transparent;
	text-align: right;
	color: white;
}
#splash-container .right .text-bottom {
	left: 0;
	padding-left: 3px;
	
	background-color: transparent;
	text-align: right;
	color: white;
}


@media (max-width: 570px) {
	#splash-container .left .text {
		height: 110px;
		width: 110px;
		line-height: 110px;
		margin-top: -55px;
	}
	.text-bottom {
		/*bottom: 5px;
		*/
	}
	#splash-container .right .asdf {
		height: 23px;
		line-height: 23px;
		margin-top: -13px; /*adding half of 4px as position fix => -11px - 2px = -13px*/
		font-size: 23px;
		
		padding-left:17px;
	}
	#splash-container .right .asdf img {
		height: 23px; /*original: 46px*/
	}
}


@media (max-height: 300px) {
	.text-bottom {
		bottom: 15px;
	}
}