* {
	margin:0px;
	outline:0px;
	padding:0px;
}

html, body {
	width:100%;
	height:100%;
	background-color:#311f25;
	font-family: 'Roboto Condensed', 'sans-serif';
	font-size:20px;
	font-weight:400;
	line-height:32px;
	color:#ffffff;
}

.abschnitt {
	position:relative;
	width:100%;
}

.abschnitt .content {
	position:relative;
	margin:0px auto;
	width:100%;
	max-width:960px;
	min-width:320px;
	height:auto;
	padding:0px 10px;
	box-sizing:border-box;		
}

.bg_leiste {
	position:absolute;
	width:100%;
	height:100%;
	background-color:transparent;
	background-image:url(../img/bg_abschnitt.png);
	background-repeat:repeat-x;
	background-size:100% 100%;
}

#featureslider .bg_leiste , #trailer .bg_leiste {
	margin-top:-60px;
}

#footer .bg_leiste {
	margin-top:-30px;
}

.langbutton {
	position:fixed;
	top:10px;
	right:10px;
	width:40px;
	height:40px;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	cursor:pointer;
	z-index:9999;
}

.langbutton2 {
	position:fixed;
	top:60px;
	right:10px;
	width:40px;
	height:40px;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	cursor:pointer;
	z-index:9999;
}

#de {
	background-image:url(../img/lang-de.png);
}

#en {
	background-image:url(../img/lang-en.png);
}

#fr {
	background-image:url(../img/lang-fr.png);
}

#header {
	background-image:url(../img/header-bg-1.jpg);
	background-position:center;
	background-size:cover;
	height:60%;
}

#header1 {
	position:absolute;
	height:100%;
	width:100%;
	background-image:url(../img/header-bg-1.png);
	background-repeat:no-repeat;
	background-position:left;
	background-size:contain;
}

#header2 {
	position:absolute;
	height:100%;
	width:100%;
	background-image:url(../img/header-bg-2.png);
	background-repeat:no-repeat;
	background-position:right;
	background-size:contain;
}

#header3 {
	position:absolute;
	height:100%;
	width:100%;
	background-image:url(../img/header-bg-3.png);
	background-repeat:no-repeat;
	background-position:left;
	background-size:contain;	
}

.animation {
	-webkit-transition: all 4s ease-in-out;
	-moz-transition: all 4s ease-in-out;
	-ms-transition: all 4s ease-in-out;
	-o-transition: all 4s ease-in-out;
	transition: all 4s ease-in-out;
}

.animationactive {
	-moz-transform: scale(0.98) translateX(2px) translateY(-2px) skewX(-2deg) skewY(-2deg);
	-webkit-transform: scale(0.98) translateX(2px) translateY(-2px) skewX(-2deg) skewY(-2deg);
	-o-transform: scale(0.98) translateX(2px) translateY(-2px) skewX(-2deg) skewY(-2deg);
	-ms-transform: scale(0.98) translateX(2px) translateY(-2px) skewX(-2deg) skewY(-2deg);
	transform: scale(0.98) translateX(2px) translateY(-2px) skewX(-2deg) skewY(-2deg);
	-webkit-transition: all 4s ease-in-out;
	-moz-transition: all 4s ease-in-out;
	-ms-transition: all 4s ease-in-out;
	-o-transition: all 4s ease-in-out;
	transition: all 4s ease-in-out;
}

.animation1 {
	-webkit-transition: all 4s ease-in-out;
	-moz-transition: all 4s ease-in-out;
	-ms-transition: all 4s ease-in-out;
	-o-transition: all 4s ease-in-out;
	transition: all 4s ease-in-out;
}

.animation1active {
	-moz-transform: scale(0.99) translateX(1px) translateY(-1px) skewX(-1deg) skewY(-1deg);
	-webkit-transform: scale(0.99) translateX(1px) translateY(-1px) skewX(-1deg) skewY(-1deg);
	-o-transform: scale(0.99) translateX(1px) translateY(-1px) skewX(-1deg) skewY(-1deg);
	-ms-transform: scale(0.99) translateX(1px) translateY(-1px) skewX(-1deg) skewY(-1deg);
	transform: scale(0.99) translateX(1px) translateY(-1px) skewX(-1deg) skewY(-1deg);
	-webkit-transition: all 4s ease-in-out;
	-moz-transition: all 4s ease-in-out;
	-ms-transition: all 4s ease-in-out;
	-o-transition: all 4s ease-in-out;
	transition: all 4s ease-in-out;
}

.animation2 {
	-webkit-transition: all 5s ease-in-out;
	-moz-transition: all 5s ease-in-out;
	-ms-transition: all 5s ease-in-out;
	-o-transition: all 5s ease-in-out;
	transition: all 5s ease-in-out;
}

.animation2active {
	-moz-transform: scale(0.98) rotate(2deg) translateX(-30px) translateY(10px) skewX(2deg) skewY(2deg);
	-webkit-transform: scale(0.98) rotate(2deg) translateX(-30px) translateY(10px) skewX(2deg) skewY(2deg);
	-o-transform: scale(0.98) rotate(2deg) translateX(-30px) translateY(10px) skewX(2deg) skewY(2deg);
	-ms-transform: scale(0.98) rotate(2deg) translateX(-30px) translateY(10px) skewX(2deg) skewY(2deg);
	transform: scale(0.98) rotate(2deg) translateX(-30px) translateY(10px) skewX(2deg) skewY(2deg);
	-webkit-transition: all 5s ease-in-out;
	-moz-transition: all 5s ease-in-out;
	-ms-transition: all 5s ease-in-out;
	-o-transition: all 5s ease-in-out;
	transition: all 5s ease-in-out;
}

.animation3 {
	-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-ms-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}

.animation3active {
	-moz-transform: scale(0.95) rotate(-3deg) translateX(30px) translateY(-20px) skewX(-4deg) skewY(2deg);
	-webkit-transform: scale(0.95) rotate(-3deg) translateX(30px) translateY(-20px) skewX(-4deg) skewY(2deg);
	-o-transform: scale(0.95) rotate(-3deg) translateX(30px) translateY(-20px) skewX(-4deg) skewY(2deg);
	-ms-transform: scale(0.95) rotate(-3deg) translateX(30px) translateY(-20px) skewX(-4deg) skewY(2deg);
	transform: scale(0.95) rotate(-3deg) translateX(30px) translateY(-20px) skewX(-4deg) skewY(2deg);
	-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-ms-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}

#logo {
	position:absolute;
	height:100%;
	width:100%;
	background-image:url(../img/gravity-island-logo.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
}

#buy, #shorttext, #features, #imprint {
	padding:30px 0px;
}

#trailer {
	background-image:url(../img/trailer-bg.jpg);
	background-position:left center;
	background-size:cover;
	height:auto;
	padding:60px 0px;
}

#featureslider {
	background-image:url(../img/feature-bg.jpg);
	background-position:center;
	background-size:cover;
	height:auto;
	padding:60px 0px;
}

#featurescreen{
	padding:30px 0px;
}

.featurescreenshot {
	width:100%;
	height:auto;
}

#footer {
	background-image:url(../img/bg-textur.png);
	background-size:auto 100%;
	padding:30px 0px;
}

#imprint {
	text-align:center;
}

#imprint .textlink {
	font-size:18px;
	line-height:36px;
	color:#c5db3b;
	text-decoration:none;
}

#imprint .textlink:hover {
	font-size:18px;
	line-height:36px;
	color:#fff;
	border-bottom:2px dotted #c5db3b;
	text-decoration:none;
}

#imprint .imglink {
	position:relative;
	font-size:85px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	cursor:pointer;
	margin:0px 15px;
}

#imprint a img {
	height:80px;
}

#astragon-link {
	background-image:url(../img/astragon-logo.png);
}

#ilikescifi-link {
	background-image:url(../img/ilikescifi-logo.png);
}

#eagle-link {
	background-image:url(../img/eagle-logo.png);
}

#fb-link {
	background-image:url(../img/fb-kanal.png);
}

.bold {
	font-weight:600;
}

h1 {
	font-family: 'Luckiest Guy', cursive;
	font-size:72px;
	font-weight:200;
	line-height:72px;
	color:#ffffff;
	text-align:center;
	text-transform:uppercase;
	text-shadow: 	0 3px 5px #000000,
					0 3px 5px #000000,
					0 3px 5px #000000;
}

h2 {
	font-family: 'Luckiest Guy', cursive;
	font-size:48px;
	font-weight:400;
	line-height:48px;
	color:#c5db3b;
	margin-bottom:10px;
	text-transform:uppercase;
	text-align:center;
	text-shadow: 	0 3px 5px #000000,
					0 3px 5px #000000,
					0 3px 5px #000000;
}

h3 {
	font-family: 'Roboto Condensed', 'sans-serif';
	font-size:48px;
	font-weight:600;
	line-height:32px;
	color:#ffffff;
	text-shadow: 0 2px 4px #092735;
	text-transform:uppercase;
	margin-top:10px;
	padding-bottom:10px;
	margin-bottom:10px;
}

p {
	font-family: 'Roboto Condensed', 'sans-serif';
	font-size:18px;
	font-weight:400;
	line-height:24px;
	margin-bottom:10px;
	text-align:justify;
}

ul {
	margin-left:20px;
}

li {
	margin-bottom:10px;
}

.video-container {
    position: relative;
    padding-bottom: 56.23%;
    height: 0; 
	overflow: hidden;
	margin-top:-1px;
	margin-bottom:-1px;
	-webkit-box-shadow: 0 0 20px 5px #000000;
	box-shadow: 0 0 20px 5px #000000;
	background-color:#000000;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: -1;
    left: 0;
    width: 100%;
    height: 100%;
}

.centerbox {
	width:100%;
	text-align:center;
	background-image:url(../img/glow.png);
	background-position:center;
	background-size:100% 100%;
	background-repeat:no-repeat;
}

#buylink-ios img {
	width:300px;
	margin:0px auto;
	-moz-transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	transition: all 300ms linear;
}

#buylink-ios:hover img {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	transition: all 300ms linear;
}



@media screen and (max-width:1080px) {
	.langbutton, .langbutton2 {
		position:absolute;
	}
}

@media screen and (max-width: 799px) {

	#header1, #header2 {
		display:none;
	}
}

@media screen and (max-width: 559px) {
	h1 {
		font-size:42px;
		line-height:42px;
	}
	
	h2 {
		font-size:28px;
		line-height:36px;
	}
	
	#header1 {
		background-size:cover;
	}
}