@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');

:root{
	--Tred:#DC4C3C;
	--Tblue:#039BE5;
	--Tgreen:#7EB142;
	--footcolor:#929292;
}
*{
	margin:0;
	padding:0;
	border:0;
}
body{
	font-family:'Roboto Slab', serif;
	background:url(images/bg.jpg) center 10px no-repeat, #222222;
	color:#fff;
	text-align:center;
}
ul{
	list-style:none;
}
a{
	text-decoration:none;
}
img{
	max-width:100%;
}
.lp-container{
	min-width:320px;
	padding:0px 20px 20px;
	margin:0 auto;
}
.lp-header{
	padding:10px 0;
}
.lp-header h1{
	font-size:1.2rem;
	font-weight:700;
}
.Tred{
	color:var(--Tred);
}
.Tgreen{
	color:var(--Tgreen);
}
.Tblue{
	color:var(--Tblue);
}
.lp-details{
	padding-bottom:10px;
}
.lp-details span{
	display:block;
}
.lp-details span, .lp-details p{
	font-size:1rem;
	font-weight:400;
	padding-bottom:10px;
}
.lp-details .btn{
	background:rgb(126,177,66); /* Old browsers */
	background: -moz-linear-gradient(top,  #00b7b2 0%,#00b7b2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #00b7b2 0%,#00b7b2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #00b7b2 0%,#00b7b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7b2', endColorstr='#00b7b2',GradientType=0 ); /* IE6-9 */
	padding:10px 20px;
	border-radius:5px;
	border:3px solid #fff;
	font-size:1.8rem;
	font-family:'Roboto Slab', serif;
	font-weight:700;
	color:#fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.27);
	margin-bottom:10px;
	cursor:pointer;
}
.lp-details .btn:hover{
	background:rgb(126,177,66); /* Old browsers */
	background: -moz-linear-gradient(top,#11e2dc 0%,#11e2dc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #11e2dc 0%,#11e2dc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #11e2dc 0%,#11e2dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71d200', endColorstr='#7eb142',GradientType=0 ); /* IE6-9 */
}
.lp-details p span{
	display:inline-block;
	font-size:3.8rem;
	font-weight:700;
	line-height:.9;
	letter-spacing:3px;
}
.lp-details p span:nth-child(odd){
	color:var(--Tred);
	text-shadow:-1px -1px 5px rgba(220, 76, 60, .5), 1px -1px 5px rgba(220, 76, 60, .5), -1px 1px 5px rgba(220, 76, 60, .5), 1px 1px 5px rgba(220, 76, 60, .5);
	padding-right:10px;
	animation:changeColorodd 5s linear 0s infinite;
}
@keyframes changeColorodd{
	0%{color:var(--Tred); text-shadow:-1px -1px 5px rgba(220, 76, 60, .5), 1px -1px 5px rgba(220, 76, 60, .5), -1px 1px 5px rgba(220, 76, 60, .5), 1px 1px 5px rgba(220, 76, 60, .5);}
	12%{text-shadow:-1px -1px 2px rgba(220, 76, 60, .1), 1px -1px 2px rgba(220, 76, 60, .1), -1px 1px 2px rgba(220, 76, 60, .1), 1px 1px 2px rgba(220, 76, 60, .1);}
	25%{color:var(--Tblue); text-shadow:-1px -1px 5px rgba(3, 155, 229, .5), 1px -1px 5px rgba(3, 155, 229, .5), -1px 1px 5px rgba(3, 155, 229, .5), 1px 1px 5px rgba(3, 155, 229, .5);}
	35%{color:var(--Tblue); text-shadow:-1px -1px 5px rgba(3, 155, 229, .5), 1px -1px 5px rgba(3, 155, 229, .5), -1px 1px 5px rgba(3, 155, 229, .5), 1px 1px 5px rgba(3, 155, 229, .5);}
	47%{text-shadow:-1px -1px 2px rgba(3, 155, 229, .1), 1px -1px 2px rgba(3, 155, 229, .1), -1px 1px 2px rgba(3, 155, 229, .1), 1px 1px 2px rgba(3, 155, 229, .1);}
	60%{color:var(--Tgreen); text-shadow:-1px -1px 5px rgba(126, 177, 66, .5), 1px -1px 5px rgba(126, 177, 66, .5), -1px 1px 5px rgba(126, 177, 66, .5), 1px 1px 5px rgba(126, 177, 66, .5);}
	70%{color:var(--Tgreen); text-shadow:-1px -1px 5px rgba(126, 177, 66, .5), 1px -1px 5px rgba(126, 177, 66, .5), -1px 1px 5px rgba(126, 177, 66, .5), 1px 1px 5px rgba(126, 177, 66, .5);}
	80%{text-shadow:-1px -1px 2px rgba(126, 177, 66, .1), 1px -1px 2px rgba(126, 177, 66, .1), -1px 1px 2px rgba(126, 177, 66, .1), 1px 1px 2px rgba(126, 177, 66, .1);}
	90%{color:var(--Tred); text-shadow:-1px -1px 5px rgba(220, 76, 60, .5), 1px -1px 5px rgba(220, 76, 60, .5), -1px 1px 5px rgba(220, 76, 60, .5), 1px 1px 5px rgba(220, 76, 60, .5);}
	100%{color:var(--Tred); text-shadow:-1px -1px 5px rgba(220, 76, 60, .5), 1px -1px 5px rgba(220, 76, 60, .5), -1px 1px 5px rgba(220, 76, 60, .5), 1px 1px 5px rgba(220, 76, 60, .5);}
}
.lp-details p span:nth-child(even){
	color:var(--Tblue);
	text-shadow:-1px -1px 5px rgba(3, 155, 229, .5), 1px -1px 5px rgba(3, 155, 229, .5), -1px 1px 5px rgba(3, 155, 229, .5), 1px 1px 5px rgba(3, 155, 229, .5);
	padding-left:10px;
	animation:changeColoreven 5s linear 0s infinite;
}
@keyframes changeColoreven{
	0%{color:var(--Tblue); text-shadow:-1px -1px 5px rgba(3, 155, 229, .5), 1px -1px 5px rgba(3, 155, 229, .5), -1px 1px 5px rgba(3, 155, 229, .5), 1px 1px 5px rgba(3, 155, 229, .5);}
	12%{text-shadow:-1px -1px 2px rgba(3, 155, 229, .1), 1px -1px 2px rgba(3, 155, 229, .1), -1px 1px 2px rgba(3, 155, 229, .1), 1px 1px 2px rgba(3, 155, 229, .1);}
	25%{color:var(--Tgreen); text-shadow:-1px -1px 5px rgba(126, 177, 66, .5), 1px -1px 5px rgba(126, 177, 66, .5), -1px 1px 5px rgba(126, 177, 66, .5), 1px 1px 5px rgba(126, 177, 66, .5);}
	35%{color:var(--Tgreen); text-shadow:-1px -1px 5px rgba(126, 177, 66, .5), 1px -1px 5px rgba(126, 177, 66, .5), -1px 1px 5px rgba(126, 177, 66, .5), 1px 1px 5px rgba(126, 177, 66, .5);}
	47%{text-shadow:-1px -1px 2px rgba(126, 177, 66, .1), 1px -1px 2px rgba(126, 177, 66, .1), -1px 1px 2px rgba(126, 177, 66, .1), 1px 1px 2px rgba(126, 177, 66, .1);}
	60%{color:var(--Tred); text-shadow:-1px -1px 5px rgba(220, 76, 60, .5), 1px -1px 5px rgba(220, 76, 60, .5), -1px 1px 5px rgba(220, 76, 60, .5), 1px 1px 5px rgba(220, 76, 60, .5);}
	70%{color:var(--Tred); text-shadow:-1px -1px 5px rgba(220, 76, 60, .5), 1px -1px 5px rgba(220, 76, 60, .5), -1px 1px 5px rgba(220, 76, 60, .5), 1px 1px 5px rgba(220, 76, 60, .5);}
	80%{text-shadow:-1px -1px 2px rgba(220, 76, 60, .1), 1px -1px 2px rgba(220, 76, 60, .1), -1px 1px 2px rgba(220, 76, 60, .1), 1px 1px 2px rgba(220, 76, 60, .1);}
	90%{color:var(--Tblue); text-shadow:-1px -1px 5px rgba(3, 155, 229, .5), 1px -1px 5px rgba(3, 155, 229, .5), -1px 1px 5px rgba(3, 155, 229, .5), 1px 1px 5px rgba(3, 155, 229, .5);}
	100%{color:var(--Tblue); text-shadow:-1px -1px 5px rgba(3, 155, 229, .5), 1px -1px 5px rgba(3, 155, 229, .5), -1px 1px 5px rgba(3, 155, 229, .5), 1px 1px 5px rgba(3, 155, 229, .5);}
	
}
.lp-gamesicon, .lp-compatibility{
	padding-bottom:10px;
}
.lp-gamesicon span, .lp-compatibility span{
	font-size:1rem;
}
.lp-gamesicon ul, .lp-compatibility ul{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	grid-column-gap:5px;
	padding-top:10px;
	text-align:center;
}
.lp-footer p{
	font-size:.7rem;
	color:var(--footcolor);
	text-align:justify;
}
.lp-footer a {
	font-size: .7rem;
	color: white;
	text-decoration: underline;
}

.lp-footer ul{
	text-align:center;
	padding-top:10px;
}
.lp-footer ul li{
	display:inline-block;
	padding:0 5px 5px;
	border-right:1px solid var(--footcolor);
}
.lp-footer ul li:first-child{
	padding-left:0;
}
.lp-footer ul li:last-child{
	padding-right:0;
	border-right:none;
}
.lp-footer ul li a{
	color:var(--footcolor);
	font-size:.7rem;
}
.lp-footer ul li a:hover{
	color:#fff;
}
/*External Pages Styles*/
.contact, .help, .support, .tnc{
	padding:10px 20px;
	background:#000;
	height:100vh;
}
.contact-header h4, .help h4, .support h4, .tnc h4{
	font-size:1rem;
}
.contact p, .help p, .tnc p{
	font-size:.9rem;
	color:var(--footcolor);
	text-align:justify;
}
.help .p2, .support p, .tnc .p2{
	color:#fff;
	text-align:center;
}
.tnc .p1{
	color:#fff;
	text-align:left;	
}

@media only screen and (min-width:450px){
	.lp-header h1{
		font-size:1.5rem;
	}
}
@media only screen and (min-width:500px){
	.lp-container{
		min-width:500px;
	}
	.lp-gamesicon, .lp-compatibility{
		max-width:500px;
		margin:0 auto;
	}
}
@media only screen and (min-width:600px){
	.lp-container{
		min-width:600px;
	}
	.lp-header h1{
		font-size:1.8rem;
	}
	.lp-details{
		padding-bottom:15px;
	}
	.lp-details span, .lp-details p{
		font-size:1.25rem;
		padding-bottom:15px;
	}
	.lp-details .btn{
		font-size:2rem;
		margin-bottom:15px;
	}
	.lp-details p span{
		font-size:4.2rem;
	}
	.lp-gamesicon, .lp-compatibility{
		padding-bottom:15px;
	}
	.lp-footer p{
		font-size:.8rem;
	}
	.lp-footer ul li a{
		font-size:.8rem;
	}
}

#msisdn {
	width: 100%;
	font-size: 16px;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
	border: #002a4f 1px solid;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#msisdn, #pin{
	padding: 10px;
	font-size: 17px;
	margin-top: 5px;
	margin-bottom: 10px;
	width: 310px;
	color:#333333;
}

#msisdn_part{
	color:#333333;
}