html, head, body {
	margin: 0;
	padding: 0;
}

body {
	position: relative;
	width: 100%;
	height: 100%;
	color: #fff;
	font-family: arial;

	background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
}

.page {
	background-image: url("/images/asfalt-dark.png");
	height: 100%;
	overflow-x: hidden;
}

.bg-alt {
	background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
}
.bg-black {
	background-image: none;
	background-color: #000;
}



.landing-container {
	height: 100vh;
	max-height: 100vh;
	overflow-y: hidden;
	position: relative;
}



#planet {
	width: 100%;
	position: absolute;
	bottom: -100%;
	text-align: center;
	opacity: 0;
	z-index: 9;
}

#planet img {
	max-width: 100%;
	width: 100%;
	opacity: 1;
}

#logo {
	position: relative;
	top: 50px;
	width: 100%;
	text-align: center;
	opacity: 0;
	z-index: 14;
}
#logo img {
	max-width: 800px;
	width: 100%;
}

#char-left {
	position: absolute;
	left: 5%;
	bottom: 0;
	opacity: 0;
	z-index: 11;

	animation: bounce 2s infinite ease-in-out;
	animation-delay: 1000ms;
}

#char-right {
	position: absolute;
	right: 15%;
	bottom: 15%;
	opacity: 0;
	z-index: 11;

	animation: bounce 2s infinite ease-in-out;
	animation-delay: 500ms;
}

#char-left img,
#char-right img {
	scale: 0.75;
}

@media only screen and (max-device-width: 1536px) {
	#char-left img, 
	#char-right img {
		scale:  0.5;
	}
	#char-left {
		left: -5%;
		bottom: -10%;
	}
	#char-right {
		right: 10%;
		bottom: 5%;
	}
}
@media only screen and (max-device-width: 1200px) {
	#char-left img, 
	#char-right img {
		scale:  0.4;
	}
	#char-left {
		left: -5%;
		bottom: -15%;
	}
	#char-right {
		right: 5%;
		bottom: 0%;
	}
}

@media only screen and (max-device-width: 1000px) {
	#char-left img, 
	#char-right img {
		scale:  0.3;
	}
	#char-left {
		left: -25%;
		bottom: -30%;
	}
	#char-right {
		right: -10%;
		bottom: -15%;
	}
}

@media only screen and (max-device-width: 700px) {
	#char-left {
		left: -35%;
		bottom: -30%;
	}
	#char-right {
		right: -10%;
		bottom: -15%;
	}
}



#gameinfo,
#playtopartner {
	z-index: 12;
}


h1 {
	font-size: 7rem;
}
p {
	font-size: 1.5rem;
}

#playtopartner .title {
	text-align: center;
}

.hide {
	opacity: 0;
}


.t2 {
	color: #9300ff;
}

.btn {
	padding: 10px 20px;
	border-radius: 10px;
	text-decoration: none;
	color: #fff;
	background-color: #333;
	font-size: 18px;
	text-transform: uppercase;
  	transition: 0.25s all ease;
  	border: 1px solid transparent;
}
.btn:hover {
}

.btn-main-cta {
	display: inline-block;
	transition: 0.25s all ease;
}
.btn-main-cta:hover,
.btn-main-cta:focus {
	background-color: #222;
	border: 1px solid #fff;
}

.btn-lg {
	font-size: 30px;
	padding: 15px 30px;
	border-radius: 15px;
}

#cta {
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 50px;
	z-index: 15;
	opacity: 0;
}

@keyframes bounce {
	0% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(15px);
	}
	100% {
		transform: translateY(-10px);
	}
}

/* Temporary Hide */
.docSlider-pager {
	display: none;
}