/* Andere CSS-Dateien laden */

@import url(../fonts/PTsans/stylesheet.css);
@import url(../fonts/robotoslab_light_macroman/stylesheet.css);
@import url(../fonts/robotoslab_regular_macroman/stylesheet.css);
@import url(../fonts/robotoslab_bold_macroman/stylesheet.css);





body {
	margin: 0;
	padding: 0;
	background-color: #00556e;
}

.maske {
	margin: 0 auto 0 auto;
	position: relative;
	top: 40px;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 1;
	text-align: center;
}

/* - - - - - - - - - - - - - - - - - LEISTE - - - - - - - - - - - - - - - - - */

.leiste {
	height: 40px;
	width: 100%;
	background-color: #00051e;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	text-align: center;
}

.leiste_center {
	width: 853px;
	top: 0;
	background: ;
	margin-left: auto;
	margin-right: auto;
}

	.telescope_logo_space {		
		width: 26px;
		height: 26px;
		margin-left: -2px;
		margin-top: 7px;
		display: block;
		position: relative;	
		background-position: center;
		background-size: cover;
	}

	.telescope_logo {
		background-image: url(../imgs/logos/telescope_logo.svg);
		background-repeat: no-repeat;
		top: 0;
		left: 0;
		height: 26px;
		width: 26px;
		background-size: cover;
	}

		/*.telescope_logo:hover {
			background-position: center;
 			cursor: pointer; 
 		}*/

.download {
	position: relative;
	float: right;
	top: -20px;
	color: #ff4b41;
	text-decoration: none;
	font-size: 10pt;
	font-family: Verdana;
	cursor: pointer;
}
	.download:hover {
		color: #fff;
	}

.bt_back {
	background-image: url(../../imgs/buttons/bt_back_to_telescope2.svg);	
	left: 20px;
	top: 2px;
	position: relative;
	height: 36px;
	width: 36px;
	background-repeat: no-repeat;
	display: block;
	overflow: hidden;
	position: fixed;	
	background-position: top center;
	background-size: cover;
}

	.bt_back:hover {
		cursor: pointer;
		background-position: bottom center;
	}
	.bt_back a {
		width: 36px;
		height: 36px;
		display: block;
	}
 /* - - - - - - - - - - - - - - - - - BIG PICTURE - - - - - - - - - - - - - - - - - */

.big_pic {
	height: 100%;
	width: 100%;
	background: #00556e;
	position: relative;
	top: 0px;
	left: 0;
	z-index: 2;
}
	.logo_stage {
		width: 853px;
		margin-left: auto;
		margin-right: auto;
	}
		.space_crasher_logo {
			height: 363px;
			width: 300px;
			top: 0;
			left: 40px;
			margin-top: 8%;
			position: relative;	
			background-color: ;
			z-index: 5;
			background-size: contain;
			background-image: url(../imgs/logos/sc_logoanimation_02.gif);
			background-repeat: no-repeat;
		}

	.pic_stage {
		height: 100%;
		width: 100%;
		padding-bottom: 40%;
		background-size: cover;
		position: relative;
		top: -40px;
		left: 0;
		background-image: url(../imgs/pictures/spacecrasher_bigpic_2000px.png);
		background-repeat: no-repeat;		
		display: inline-block;
		vertical-align: bottom;
		background-position: bottom center;
		z-index: 4;
	/*	background:-moz-linear-gradient(bottom,#ebd7a0,#00556e); /* Firefox */
	/*	background:-webkit-gradient(linear,left top,left bottom,from(#ebd7a0),to(#00556e)); /* Chrome, Safari */
	/*	filter: progid:DXImageTransform.Microsoft.gradient(start
		Colorstr='#ebd7a0',endColorstr='#00556e'); /* Internet Explorer */ 
} 
	

/* - - - - - - - - - - - - - - - - - BUTTONS - - - - - - - - - - - - - - - - - */

.bt {
	height: 45px;
	width: 45px;
	background-repeat: no-repeat;
	display: block;
	overflow: hidden;
	position: fixed;	
	background-position: top center;
	background-size: cover;
}
	.bt:hover {
		cursor: pointer;
		background-position: bottom center;
	}

	.up_button_mask {
		bottom: 72px;
		left: 20px;
		z-index: 7;	
		height: 45px;
		width: 45px;
		position: fixed;
		overflow: hidden;	
	}

		.up_button {
			background-image: url(../imgs/buttons/bt_up.svg);		
			background-color: #00051e;
			left: 0;
			bottom: -70px;
			position: relative;
		}

	 .share_button {
	 	background-image: url(../imgs/buttons/bt_share.svg);
		background-color: #00051e;
		bottom: 20px;
		left: 20px;
		z-index: 6;	
	 }
	 	
	 .close_button {
	 	background-image: url(../imgs/buttons/bt_close.svg);		
		background-color: #00051e;
		bottom: 20px;
		left: 20px;
		display: none;
		z-index: 10;	
	 }


/* - - - - - - - - - - - - - - - - - TEASER - - - - - - - - - - - - - - - - - */

.teaser {
	height: 840px;
	width: 100%;
	position: relative;
	top: 0;
	margin-top: 0;
	opacity: 1;
	z-index: 3;
}

	.video {
		height: 480px;
		width: 853px;
		background: #ebd7a0;
		position: relative;
		top: 50px;
		margin: 0 auto;
			/*background-image: url(../imgs/pictures/teaser_pic.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;*/
		overflow: hidden;
	}

		.video iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}

		.video_text {
			top: 46%;
			height: 50px;
			width: 100%;
			font-size: 13pt;
			color: #00051e;
			text-align: center;
			position: absolute;
			margin: auto auto;
		}


	.teaser_text {
		width: 100%;
		right: 0;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		font-size: 35pt;
		text-align: center;
		color: #fff;
		text-decoration: none;
		top: 100px;
		position: relative;
		background: ;
		letter-spacing: 1pt;
	}

/* - - - - - - - - - - - - - - - - - GAME PREVIEW - - - - - - - - - - - - - - - - - */

.gamepreview {
	height: 350px;
	width: 853px;
	position: relative;
	top: -10px;
	background-color: ;
	margin-bottom: 50px;
	text-align: center;
	display: inline-block;
	z-index: 6;
}

	.levelpic {
		width: 263px;
		height: 350px;
		display: inline-block;
		background-color: #ff6600;
		overflow: hidden;
		z-index: 8;
		cursor: pointer;
	}

		.levelpic_01 {
			background-image: url(../imgs/pictures/game_pic_smal_01.jpg);
			background-repeat: no-repeat;
			background-position: center right;
			background-size: cover; 			
		}

		.levelpic_02 {
			margin: 0 28px;
			background-image: url(../imgs/pictures/game_pic_smal_02.jpg);
			background-repeat: no-repeat;
			background-position: center right;
			background-size: cover; 			
		}

		.levelpic_03 {
			background-image: url(../imgs/pictures/game_pic_smal_03.jpg);
			background-repeat: no-repeat;
			background-position: center right;
			background-size: cover; 			
		}



/* - - - - - - - - - - - - - - - - - APP STORES - - - - - - - - - - - - - - - - - */

.app_stores_list {
	height: 150px;
	width: 100%;
	background: ;
	position: relative;
	top: 0;
	left: 0;
	margin: 0 auto;
	text-align: center;
	z-index: 5;
}

	.type {
		font-size: 18pt;
		color: #eee;
		letter-spacing: 0.3pt;
		font-family: 'roboto_slablight';
	}

	.store {
		height: 60px;
		width: 203px;
		background: ;
		bottom: 0;
		left: 0;
		margin: 55px 20px 0 20px;
		display: inline-block;
		cursor: pointer;
	}

		.app_stores_list a {
			height: 60px;
			width: 203px;
			display: block;
		}

		.app_store {			
		 	background-image: url(../imgs/badges/App_Store_Badge.svg);
			background-repeat: no-repeat;
			background-position: top right;
			background-size: cover; 
		}

		.play_store {		
			background-image: url(../imgs/badges/Play_Store_Badge.svg);
			background-repeat: no-repeat;
			background-position: center left;
			background-size: cover;
		}


/* - - - - - - - - - - - - - - - - - SOCIAL MEDIA - - - - - - - - - - - - - - - - - */

.social_media {
	height: 40px;	
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
	margin-top: 60px;
	margin-bottom: 60px;
	z-index: 6;
}

.social_media a {
	height: 40px;
	width: 40px;
	display: block;
}

	.smi {
		width: 40px;
		height: 40px;
		display: inline-block;
		background-color: #ff6600;
		margin: 25px 12px 0 12px;
		border-radius: 40px;
		overflow: hidden;
		position: relative;	
		background-position: top center;
		background-size: cover;
	}

		.smi:hover {
			cursor: pointer;
			background-position: bottom center;
		}
			.fb {
				background-image: url(../imgs/buttons/bt_fb.svg);
			}
			.gp {
				background-image: url(../imgs/buttons/bt_gp.svg);
			}
			.yt {
				background-image: url(../imgs/buttons/bt_yt.svg);
			}
			.tw {
				background-image: url(../imgs/buttons/bt_tw.svg);
			}
			.be {
				background-image: url(../imgs/buttons/bt_be.svg);
			}

/* - - - - - - - - - - - - - - - - - GRADIANT - - - - - - - - - - - - - - - - - */

.gradiant {
	width: 100%;
	background: ;
	position: relative;
	top: 0;
	left: 0;
	margin: 0 auto;
	text-align: center;
}

.gradiant_blue {
	height: 800px;
	width: 100%;
	position: absolute;
	z-index: -5;
	top: 0;
	left: 0;
	margin-top: -645px;
	background: url(../imgs/bg/gradiant_blue.png);
}


/* - - - - - - - - - - - - - - - - - BIG LEVEL - - - - - - - - - - - - - - - - - */

.big_level {
	height: 700px;
	width: 100%;
	top: 0;
	left: 0;
	position: relative;
}

	.main_rock {
		height: 250px;
		width: 500px;
		background-color:;
		right: 0;
		margin-right: 220px;
		margin-top: 230px;
		position: absolute;
		background-size: contain;
		background-image: url(../imgs/pictures/main_rock.png);
		background-repeat: no-repeat;
	}

	.rock {
		background-color:;
		right: 0;
		position: absolute;
		background-repeat: no-repeat;		
		background-size: contain;
	}

		.rock_1 {
			height: 145px;
			width: 165px;			
			margin-right: 140px;
			margin-top: 490px;
			background-image: url(../imgs/pictures/rock01.png);
		
		}

		.rock_2 {
			height: 94px;
			width: 140px;			
			margin-right: 40px;
			margin-top: 130px;
			background-image: url(../imgs/pictures/rock02.png);
		}

		.rock_3 {
			height: 43px;
			width: 45px;			
			margin-right: 350px;
			margin-top: 500px;
			background-image: url(../imgs/pictures/rock03.png);
		}

		.rock_4 {
			height: 11px;
			width: 11px;			
			margin-right: 755px;
			margin-top: 553px;
			background-image: url(../imgs/pictures/rock04.png);
		}

		.rock_5 {
			height: 15px;
			width: 15px;			
			margin-right: 160px;
			margin-top: 130px;
			background-image: url(../imgs/pictures/rock05.png);
		}

		.rock_6 {
			height: 8px;
			width: 9px;			
			margin-right: 290px;
			margin-top: 470px;
			background-image: url(../imgs/pictures/rock06.png);
		}

		.rock_7 {
			height: 7px;
			width: 6px;			
			margin-right: 600px;
			margin-top: 520px;
			background-image: url(../imgs/pictures/rock07.png);
		}

		.rock_8 {
			height: 20px;
			width: 24px;			
			margin-right: 620px;
			margin-top: 520px;
			background-image: url(../imgs/pictures/rock08.png);
		}

		.rock_9 {
			height: 14px;
			width: 14px;			
			margin-right: 320px;
			margin-top: 610px;
			background-image: url(../imgs/pictures/rock09.png);
		}

		.rock_10 {
			height: 94px;
			width: 110px;			
			margin-right: 600px;
			margin-top: 630px;
			background-image: url(../imgs/pictures/rock10.png);
		}

	.rocket {
		height: 85px;
		width: 40px;
		background-color: ;
		right: 270px;
		margin-right: 15%;
		margin-top: 90px;
		position: absolute;
		background-image: url(../imgs/pictures/rocket.png);		
		background-repeat: no-repeat;		
		background-size: contain;
	}

/* - - - - - - - - - - - - - - - - - MORE ABOUT PROJECT - - - - - - - - - - - - - - - - - */

.the_project {
	height: 150px;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	background: #00051e;
	margin-top: 60px;
	text-align: center;
}

	.about_project {
		width: 100%;
		height: 150px;
		position: relative;
		margin-right: auto;
		margin-left: auto;
	}

		.project_text {
			height: 150px;
			font-size: 30pt;
			color: #ff4b41;
			text-decoration: none;
			vertical-align: middle;
			display: table-cell;
		}

/* - - - - - - - - - - - - - - - - - SHARE - - - - - - - - - - - - - - - - - */

.share_mask {
	overflow: hidden;
	left: 85px;
	position: fixed;
	bottom: 20px;
}

	.share {
		height: 45px;
		width: auto;
		background: #00051e;
		text-decoration: none;
		left: -600px;
		bottom: 0;
		position: relative;
		z-index: 9;
	}
		.share_with {
			position: relative;
			background: ;
			display: inline-block;
			margin: 12px 0 auto 20px;
		}

/* - - - - - - - - - - - - - - - - - POPUP - - - - - - - - - - - - - - - - - */

.popup {
	margin: 0 0 0 0;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;	
	z-index: 9;
	text-align: center;
	display: none;
}
	.overlay {
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: fixed;
		background-color: #00051e;
		opacity: 0.92;
		filter:alpha(opacity=90); /* IE */
		-moz-opacity:0.9;
		z-index: 9;
	}	

.noscroll {
	overflow: hidden;
}

.view_pic {
	position: relative;
	top: 10%;
	height: 80%;
	background: ;
	margin: 0 auto;
	z-index: 10;	
	background-repeat: no-repeat; 
	background-position: top center;
	background-size: contain;	
}


/* - - - - - - - - - - - - - - - - - FONTS - - - - - - - - - - - - - - - - - */

.text {
	font-family: roboto_slablight;
}

.footer_text {
	font-family: roboto_slablight;
	font-size: 10pt;
	letter-spacing: 0.2pt;
}

a {
	text-decoration: none;
	color: #ff4b41;
}

/* - - - - - - - - - - - - - - - - - INFO BOX - - - - - - - - - - - - - - - - - */

.telescope_info_box {
	bottom: 0;
	left: 0;
	right: 0;
	height: 65px;
	width: 100%;
    position: relative;
    padding-top: 100px;
}
.inhalt {
 	width: 853px;
	top: 20px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: center;
	z-index: 6;
}

.impressum {	
	color: #ff4b41;
	right: 0;
	position: relative;
	letter-spacing: 0.1pt;
	text-decoration: none;
	display: inline-block;
}

.rights {
	color: #fff;
	right: 0;
	position: relative;
	margin-right: 30px;
	letter-spacing: 0.1pt;
	display: inline-block;
}


/* - - - - - - - - - - - - - - - - - STARS - - - - - - - - - - - - - - - - - */

.stars_top_01 {
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	z-index: 2;
	position: absolute;
}

	.stars_top_02 {
	width: 100%;
	height: 15%;
	top: 50%;
	left: 0;
	z-index: 2;
	position: absolute;
}

.bg_stars {
	width: 100%;
	bottom: 0;
	opacity: 1;
	position: absolute;
	z-index: -4;
}

.stars {
	background-color: ;
	height: 1350px;
}


.starbox {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden;
}

.starbox span {
	background-color: #fff;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	width: 5px;
	height: 5px;
	position: absolute;
	display: block;
}

.bg_color_bottom {
	width: 100%;
	top: 0;
	left: 0;
	position: relative;
}
	.bg_color_bottom_01 {
	height: 870px;
	width: 100%;
	position: absolute;
	z-index: -5;
	top: 0;
	left: 0;
	margin-top: -870px;
	background: #00051e;
}


/* - - - - - - - - - - - - - - - - - MEDIA QUERIES - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - MEDIA QUERIES - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - MEDIA QUERIES - - - - - - - - - - - - - - - - - */