@viewport {
   width: 200px;
}

body
{
	margin: 0;
	font-family: Avenir, Helvetica, Verdana;
	background-color: #222222;
	color: #ffffff;
}

#support
{
	height: auto;
	width: 100%;
	background-repeat: no-repeat;
	background-color: #171C26;
	display: block;
	z-index: 99999;
}

#supporttab
{
	height: 80px;
	width: 70px;
	background-image: url("img/support.png");
	background-repeat: no-repeat;
	margin-top: -2px;
	display: inline-block;
	z-index: 999 !important;
}


#navbar
{
	height: 50px;
	width: 100%;
	background-repeat: no-repeat;
	background-color: #171C26;
	display: block;
	z-index: 99999;
}

#aboutbox{
		background-image: url("img/bg.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index:0;
	position: relative;
}

.textglow
{
    text-shadow: 0 0 8px #89b9fb;
}

#logo
{
	position: absolute;
	width: 100%;
	height: 155px;
	background-image: url("img/logo.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 280px;
	display: block;
	z-index: 999;
}

#downloadbox
{
	position: relative;
	z-index: 999;
	left: auto;
	right: auto;
	display: block;
	width: 100%;
	height: 100px;
	font-size: 18px;
	top: 390px;
}

#iOS
{
	margin: 0px 10px 50px 10px;
	background-image: url("img/ios.png");
	width: 190px;
	height: 98px;
	display: inline-block;
	-webkit-animation: downloadshrink 0.5s;
    animation: downloadshrink 0.5s;
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

#Android
{
	margin: 0px 10px 50px 10px;
	background-image: url("img/play.png");
	width: 190px;
	height: 98px;
	display: inline-block;
	-webkit-animation: downloadshrink 0.5s;
    animation: downloadshrink 0.5s;
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

#PC
{
	margin: 0px 10px 50px 10px;
	background-image: url("img/pc.png");
	width: 190px;
	height: 98px;
	display: inline-block;
	-webkit-animation: downloadshrink 0.5s;
    animation: downloadshrink 0.5s;
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes downloadshrink
{
    0%   {transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);}
	50%   {transform: scale(.9,.9); -ms-transform: scale(.9,.9); -webkit-transform: scale(.9,.9);}
	100%   {transform: scale(1,1); -ms-transform: scale(1,1); -webkit-transform: scale(1,1);}
}

/* Standard syntax */
@keyframes downloadshrink 
{
    0%   {transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);}
	50%   {transform: scale(.9,.9); -ms-transform: scale(.9,.9); -webkit-transform: scale(.9,.9);}
	100%   {transform: scale(1,1); -ms-transform: scale(1,1); -webkit-transform: scale(1,1);}
}

#iOS:hover
{
	background-position: 0 98px;	
	-webkit-animation: downloadgrow 0.4s;
    animation: downloadgrow 0.4s;
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

#Android:hover
{
	background-position: 0 98px;	
	-webkit-animation: downloadgrow 0.4s;
    animation: downloadgrow 0.4s;
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

#PC:hover
{
	background-position: 0 98px;	
	-webkit-animation: downloadgrow 0.4s;
    animation: downloadgrow 0.4s;
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes downloadgrow
{
    0%   {transform: scale(1.0,1.0); -ms-transform: scale(1.0,1.0); -webkit-transform: scale(1.0,1.0);}
	60%   {transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);}
	100%   {transform: scale(1.15,1.15); -ms-transform: scale(1.15,1.1); -webkit-transform: scale(1.15,1.15);}
}

/* Standard syntax */
@keyframes downloadgrow 
{
	0%   {transform: scale(1.0,1.0); -ms-transform: scale(1.0,1.0); -webkit-transform: scale(1.0,1.0);}
	60%   {transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);}
	100%   {transform: scale(1.15,1.15); -ms-transform: scale(1.15,1.1); -webkit-transform: scale(1.15,1.15);}
}

#header
{
	padding-bottom: 40px;
	height: 500px;
	background-color: #0c1B33;
	background-image: url("img/screenshotbg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left top;
	overflow: hidden;
	position: relative;
	z-index: 50;
}

#kawgirl
{
	width: 500px;
	height: 963px;
	background-image: url("img/kawgirl.png");
	background-size: 500px 963px;
	background-repeat: no-repeat;
	background-position: bottom center;
	margin-left: -25px;
	margin-top: -180px;
	margin-bottom: 140px;
	float: left;
	overflow: hidden;
	z-index: 4 !important;
}

#kawgirl.animate
{
	-webkit-animation: kawgirl 1.5s;
    animation: kawgirl 1.5s;
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes kawgirl
{
	0%   {-ms-transform: translate(-100px,600px); -webkit-transform: translate(-100px,600px); transform: translate(-100px,600px);}
	100%   {-ms-transform: translate(0px,0px); -webkit-transform: translate(0px,0px); transform: translate(0px,0px);}
}

/* Standard syntax */
@keyframes kawgirl 
{
	0%   {-ms-transform: translate(-100px,600px); -webkit-transform: translate(-100px,600px); transform: translate(-100px,600px);}
	100%   {-ms-transform: translate(0px,0px); -webkit-transform: translate(0px,0px); transform: translate(0px,0px);}
}
	
#kawenemy
{
	width: 660px;
	height: 768px;
	background-image: url("img/kawenemy.png");
	background-size: 650px 576px;
	background-repeat: no-repeat;
	background-position: top right;
	float: right;
	margin-left: -350px;
	margin-top: -100px;
	display: inline;
	z-index: 5 !important;
}

#kawenemy.animate
{
	-webkit-animation: kawenemy 2s;
    animation: kawenemy 2s;
	-webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes kawenemy
{
	0%   {-ms-transform: translate(660px,0px); -webkit-transform: translate(660px,0px); transform: translate(660px,0px);}
	60%   {-ms-transform: translate(660px,0px); -webkit-transform: translate(660px,0px); transform: translate(660px,0px);}
}

/* Standard syntax */
@keyframes kawenemy 
{
	0%   {-ms-transform: translate(660px,0px); -webkit-transform: translate(660px,0px); transform: translate(660px,0px);}
	60%   {-ms-transform: translate(660px,0px); -webkit-transform: translate(660px,0px); transform: translate(660px,0px);}
}

#characters
{
	zoom: 0.85;
	height: 450px;
	background-image: url("img/characters.png");
	background-size: 711px 450px;
	background-repeat: no-repeat;
	background-position: bottom center;
	padding: 10px 10px 10px 0;
	margin-top: -30px;
	z-index: 999;
}

#characters2
{
	zoom: 0.85;
	height: 170px;
	background-image: url("img/social.png");
	background-size: 711px 148px;
	background-repeat: no-repeat;
	background-position: top center;
	padding: 10px 10px 10px 0;
	z-index: 999;
	position: relative;
	margin-top: -40px;
}

#legalcharacters
{
	height: 480px;
	background-image: url("img/characters.png");
	background-size: 711px 354px;
	background-repeat: no-repeat;
	background-position: bottom center;
	padding: 10px 10px 10px 0;
	z-index: 50;
}

#about
{
	padding: 40px 10px 0px 10px;
	display: block;
	height: auto;
	max-width: 800px;
		margin-left: auto;
	margin-right: auto;
text-shadow: 1px 1px #000000;
}

#screenshots
{
	padding: 20px 0 0 0;
	background-image: url("img/screenshotchars.png");
	background-size: fill;
	background-position: center bottom;
	background-repeat: no-repeat;
	z-index: 999;
}

#social
{
	padding: 60px 0 0px 0;
	width: 100%;
	height: 150px;
	color: #ffffff;
}

#insider
{
	margin-top: -30px;
	margin-bottom: -40px;
	padding: 10px 0px 10px 0px;
	color: #ffffff;
	position: relative;
	z-index: 51;
}

#legal
{
	padding: 0 10% 0 10% ;
		background-image: url("img/bg.jpg");
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index:0;
text-shadow: 1px 1px #000000;
	    background-attachment: fixed;
	background-color: #000000;
	height: 100%;
	overflow: scroll;

}

.facebook
{
	margin: 10px 0 5px 5px;
	background-image: url("img/facebook.png");
	width: 63px;
	height: 62px;
	display: inline-block;
}

.facebook:hover
{
	background-position: 0 62px;	
}


.twitter
{
	margin: 0px 0 5px 5px;
	background-image: url("img/twitter.png");
	width: 63px;
	height: 62px;
	display: inline-block;
}

.twitter:hover
{
	background-position: 0 62px;	
}

.forum
{
	margin: 0px 0 5px 5px;
	background-image: url("img/forum.png");
	width: 63px;
	height: 62px;
	display: inline-block;
}

.forum:hover
{
	background-position: 0 62px;	
}


.copyright
{
	float: left;
	padding-left: 10px;
	color: #ffffff;
}

.links
{
	float: right;
	padding-right: 10px;
}

.footer
{
	width: 100%;
	background-color: #171C26;
	padding: 15px 0 35px 0;
	z-index: 999;
	font-size: 12px;
	color: #ffffff;
}

.legalfooter
{
	width: 100%;
	background-color: #171C26;
	padding: 15px 0 15px 0;
	z-index: 999;
	font-size: 12px;
	color: #ffffff;
	position: fixed;
	bottom: 0px;
}

.footer a
{
	color:#ffffff;
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	transition:.3s;
	text-decoration: none;
}

.footer a:hover
{
	color:#4F94CD;
}

.legalfooter a
{
	color:#ffffff;
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	transition:.3s;
	text-decoration: none;
}

.legalfooter a:hover
{
	color:#4F94CD;
}


/*SCREENSHOT SLIDER*/

#slidermain 
{
  	position: relative;
	width: 400px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#slider 
{
  	position: relative;
  	overflow: hidden;
  	margin: 20px auto 0 auto;
	border-radius: 15px 15px 0 0;
	z-index: 1;
}

#slider ul 
{
	position: relative;
  	margin: 0;
  	padding: 0;
  	height: 200px;
  	list-style: none;
}

#slider ul li 
{
 	position: relative;
 	float: left;
	margin: 0;
 	padding: 0;
 	width: 320px;
 	height: 568px;
 	text-align: center;
 	line-height: 300px;
	z-index: -1;
}

a.control_prev, a.control_next 
{
  	position: absolute;
  	top: 45%;
  	z-index: 999;
  	display: block;
width: 64px;
height: 60px;
  	background-image: url("img/button.png");
  	cursor: pointer;
}

a.control_next{
	  	background-image: url("img/button2.png") !important; 
}

a.control_prev:hover, a.control_next:hover 
{
	background-position: 0 62px;
}

a.control_next:hover{
	background-position: 0 62px;
}

a.control_prev 
{
  	border-radius: 0 2px 2px 0;
}

a.control_next 
{
  	right: 0;
  	border-radius: 2px 0 0 2px;
}

.slider_option 
{
  	position: relative;
  	margin: 10px auto;
  	width: 160px;
  	font-size: 18px;
}

/* TRANSFER PAGES */
.content
{
background-color: #b8cad2;
color: #000000;	
padding-bottom: 40px;
}

.content_inner
{
	padding: 25px 25px;
box-shadow: 0 -2px 2px #000;	
}

h1
{
	margin-bottom: 0.5em !important;
  	font-weight: bold !important;
  	color: #cc1432;
	font-size: 22px !important;
	line-height: 1.2;
}

b, strong 
{ 
	font-weight: bold !important; 
}

ul li
{
	margin-left: 20px;
list-style-type: disc;

}

#submit_bn
{
	background-image: url("img/button_small_glow.png") !important; 
	border: 2px solid #15600B !important; 
	background-color: #3AA11A !important; 
	background-repeat: repeat-x;
	border-radius: 0 0 7px 7px  !important;
	width: 250px;
	padding-top: 10px;
	margin-top: 0px !important;
	margin-left: 0px !important;
}

.field
{
	margin: 0px !important;
}

#submit_bn:hover
{
	background-image: url("img/button_small.png") !important;
}

#username
{
	border-top: 2px solid #15600B !important; 
	border-right: 2px solid #15600B !important; 
	border-left: 2px solid #15600B !important;
	border-radius: 7px 7px 0 0  !important;
	padding: 8px 0;
	font-size: 12px;
	width: 246px;
	margin: 0px !important;
}

#new_password
{
	border-top: 2px solid #15600B !important; 
	border-right: 2px solid #15600B !important; 
	border-left: 2px solid #15600B !important;
	border-radius: 7px 7px 0 0  !important;
	padding: 8px 0;
	font-size: 12px;
	width: 246px;
	margin: 0px !important;
}

#repeat_new_password
{
	border: 2px solid #15600B !important; 
	padding: 8px 0;
	font-size: 12px;
	width: 246px;
	margin: 0px !important;
}

#email
{
color: #000000;	
}