@charset "UTF-8";
div, input, p{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	}
	a img{
	border:0;
	outline:none;
	}
html{
	width:100%;
	height:100%;
}
body{
	background-color:#000000;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	font-family: 'Lato', sans-serif;
	overflow-x:hidden;
}
.container-fluid{
	width:100%;
	min-height:100%;
	position:relative;
	/*background-image:url(images/bg.jpg);
	background-size:cover;
	background-position:center top;*/
}
.bg{
	width:100%;
	position:absolute;
	top:0px;
	left:0;
	overflow: hidden;
}
.bg img{
	width:100%;
	height:auto/9;
	display:block;
}
.bg .penkit{
	width:100%;
	position:absolute;
	bottom:0px;
	left:0;
	z-index:20;
}
.bg .penkit img{
	width:100%;
	height:auto/9;
	display:block;
}
#verhoV{
	height:100%;
	width:50%;
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	overflow:hidden;
}
#verhoO{
	height:100%;
	position:absolute;
	left:50%;
	width:50%;
	top:0;
	z-index:10;
	overflow:hidden;
}

#verhoV img, #verhoO img{
height:100%;
width:auto;
}
#verhoV img{
	float:right;
}
.form{
}
.col{
	float:left;
}
.fleft{
	width:35%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.fright{
	width:65%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
-moz-box-sizing:border-box;
}
.fright h1{
color:#70a6c2;
}
.fright p{
	font-size: 1.3em;
}
.fright p .error{
	font-size: 0.8em;
 }
 p#status-message.ac{
	 margin: 0;
padding: 0;
margin-top: -1em;
font-size: 0.9em;
 }
.fright input{
	font-size: 1em;
	border:0;
	outline:solid 2px #949494; 
}
.fright p, .fright h1{
	text-align:left;
}
.fleft img{
width:100%;
max-width:428px;
display:block;
margin:0 auto;
}
#sp{
	width:100%;
padding:5px;
}
#subm{
	/*background-color:#4c306a;
	color:#ffffff;
	padding:5px 15px;
	text-decoration:none;
	border-radius: 10px;
	line-height:1em;
	display:block;
	float:right;*/
	display: block;
float: right;
margin-right: -4px;
}
.spacer{
	clear:both;
	height:1px;
	line-height:1px;
	visibility:hidden;
}
#vlayer{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}
#player, #selection{
position: absolute;
left: 25.5%;
top: 20.5%;
padding:1.5%;
z-index: 10;
}
#player{
min-width: 320px !important;
}
#selection{
	background-color: #ffffff;
width: 45%;
height: 39%;
margin: 2%;
}
#selection a{
	color: #48a3da;
	text-decoration: none;
}
#selection a:hover{
	color: #48a3da;
	text-decoration: underline;
}
.half{
width:50%;
float:left;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding:2%;
}
#playerImg{
position: absolute;
left: 27%;
top: 22%;
/* padding:1.5%; */
z-index:20;
/* padding: 1.5%; */
}
#playerImg img{
width:100%;
height:auto/9;
}
#darkness{
	background-image:url(images/bg_dark.png);
	width:100%;
	height:100%;
	z-index:21;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}
div.remodal-overlay.xtradark-theme.remodal-is-opened{
	opacity: 0.8;
}
#arvontamodaali{
	background-color:#ffffff;
	z-index:12500;
} 
#arvontamodaali h3, #rules h3{
	color: #4c306a;
}
#arvontaform input{
	padding: 4px 8px;
}
#arvontaform label{
	margin-left: 8px;
}
#arvontaform2 input{
	padding: 4px 8px;
}
#arvontaform2 label{
	margin-left: 8px;
}
#mod2{
display:none;
}
#mod3{
display:none;
}
#mod4{
display:none;
}
#mod5{
display:none;
}
#mod6{
display:none;
}
#rules{
	display: none;
background-color: #ffffff;
position: absolute;
left: 2%;
bottom: 2%;
width: 96%;
padding: 2%;
z-index: 25000;
box-sizing: border-box;
width: 96%;
margin-bottom: 10px;
padding: 3%;
transform: translate3d(0, 0, 0);
color: #2b2e38;
background: #fff;
border-radius: 12px;
border: solid 6px #4c306a;
border-radius: 12px;
}
#ruleslink{
	position: absolute;
left: 0;
bottom: 0;
z-index: 25000;
padding: 15px;
text-align: right;
width: 100%;
color: #70a6c2;
cursor: pointer;
	display:none;
}
#rules #closelink{
	display:block;
	cursor:pointer;
	position:absolute;
	right:2%;
	top:2%;
	color: #70a6c2;
}
.ans, .ans:hover{
	cursor:pointer;
}
.ans.ansv{
	color:#9E0002;
}
.ans.anr.ansv{
	color:#169321;
}
#afsubm, #afsubm2{
background-color: #4c306a;
color: #ffffff;
padding: 5px 15px;
text-decoration: none;
border-radius: 10px;
line-height: 1em;
display: block;
float: right;
}
#afsubm2{
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: center;
float: none;
}
#arvontaform ::-webkit-input-placeholder {
  color: #515e65;
}

#arvontaform :-moz-placeholder { /* Firefox 18- */
   color: #515e65;
}

#arvontaform ::-moz-placeholder {  /* Firefox 19+ */
  color: #515e65;
}

#arvontaform :-ms-input-placeholder {  
   color: #515e65;
}
@media screen and (max-width:640px){
.container-fluid{
min-width: 640px;
}
}
@media screen and (max-width:400px){
	body{
		font-size:0.8em;
	}
	.fleft, .fright{
	float:none;
	width:94%;
	clear:both;
	margin:0px auto;
	}
	.fleft img{
		max-width:150px;
	}
	.fright h1{
		margin-bottom:0;

margin-top:0;
}
.fright p{
margin-bottom:8px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 8px;
margin-left: auto;
}
.fright input{
	    margin-bottom: 15px;
margin-top:5px;
}

}