/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

h2 {
	margin: 10px 0; font-size: 20px;
}

/*MAIN*/
body { 
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Helvetica Neue, Helvetica, Arial;
	background: #000;
	color: #555;
	min-height: 100vh;
}

.middle {
	color: #000;
}

* {
	box-sizing: border-box;
}
a {

	color: #4C9CF1;
	text-decoration: none;
/*	font-weight: bold;*/

}

a:hover {

	color: #444;

}

hr {
	height: 1px;
	border: 0;
	border-top: 1px solid #e0e0e0;
}
img {

	width: 100%;

}

header {

	background: #fff;
	width: 100%;
	min-height: 50px;
/*	position: fixed;*/
	top: 0;
	left: 0;
/*	border-bottom: 4px solid #4C9CF1;*/
	border-bottom: 1px solid #ddd;
	z-index: 100;

}

#logo{

	margin: 10px;
	float: left;
	width: 200px;
	height: 30px;
	background: url(../vektiva.png) no-repeat center;
	display: block;
	background-size: contain;

}


nav#sitenav {
	padding: 20px;
	height: auto;
	display: block;
	height: 48px;
}
nav#sitenav ul li {
  display: block;
}

 
#sitenav > input {
  display: none;
}

#sitenav > label  {
	display: block;
	position: absolute; top:0; right:0; padding-top: 0px;
	width: 50px; height: 50px; color: #000;
}
#sitenav > label .icon {
  display: block;
  box-sizing: border-box;
  padding: 10px 10px;
  font-size: 36px;
  position: absolute;
  right: 0px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#sitenav > label .icon:hover {
	background: #eee;
}
.main-menu {
  padding: 0px;
  width: 100%;
  max-width: 700px;
  position: absolute; z-index:1;
  background: #fff;
  color: #000;
  width: 0px;
  min-width:0px;
  overflow: hidden;
  right: 0px;
  top:50px;
  clear: both;
  display: block;
  opacity:0;
  transition: width 0.2s ease-in-out;
}
 
#sitenav > input:checked ~ label .main-menu {
	opacity: 1;
	width: 100%;
}
#sitenav > input:checked + label {
	width: 100%; height: 100%; color: #888;
	background-color: rgba(0,0,0,0.1);
	z-index:1;
}

 
#sitenav ul li {
  display: block;
}
#sitenav a {
  text-decoration: none;
  color: #000;
  padding: 12px 20px;
  width: 100%; height: 100%; display: block;
}
#sitenav a:hover {
	background: black; color: white;
}

section.main {
}

div.middle{
	max-width: 400px;
	margin: 10px auto;
	padding: 20px;
	background: #fff;
	line-height: 25px;
}


.result {
	display: none;
	background: #e0f694;
/*	border: 1px solid #999;*/
	padding: 5px 10px;
	border-radius: 5px;
}
.result.warn, .result.error {
	background: ##ffddc7;
}


form {
	position: relative;
}
form input[type=submit], input[type=button], a.button {
	cursor: pointer;
	color: white;
	padding: 10px 20px; 
	border: 0;
	box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
	background: #33acee;;
	border-radius: 4px; margin: 10px 0px ;
	display: inline-block;
}


form label {
	position:relative;  
	padding-top: 20px;
	min-height: 30px;
	display: block;
	margin: 10px 0;
}
form label span {
	display: block;
	opacity: 0.7;
	position: absolute; left: 0px; top: 20px;
	width: 100%;
	transition: font-size 0.1s ease-in, top 0.1s ease-in;
}
form label input+span {
	cursor: text;
}

form input[type=text], form input[type=password], form input[type=email] {
	width: 100%;
	border: 0;
	padding-bottom: 5px;
}

form input ~ .border {
	position: absolute; left: 0px; bottom: 0px;
	width: 100%;
	border-bottom: 1px solid #558;
}

form input ~ .border:after {
	content:'';
	width: 0%;
	display: block;
	position: absolute;
	bottom: 0px;left: 0px;
	transition: width 0s, margin-left 0s;
	margin-left: 50%;
	padding-bottom: 5px;
	border-bottom: 1px solid #559;
	height:2px;
}
form input[type=text]:focus span, form input[type=password]:focus span, form input[type=email]:focus span{
/*	border-bottom: 2px solid #005;*/
}


form input.filled ~ span {
	top: 0px; left: 0px;
	font-size: 60%;
	opacity: 1;
}

form label input[type=checkbox]+span {
	left: 30px; cursor: default;
}



form input:invalid {
 border: 0;box-shadow: none;
}
form input:invalid ~ .border {
	border-bottom: 1px solid red;
}

form input:focus ~ .border:after {
	width: 100%;
	transition: width 0.3s, margin-left 0.3s;
	margin-left: 0%;
}
form input:invalid:focus ~ .border:after {
	border-color: red;
}


.iflogged {
	display: none;
}
body.logged .iflogged {
	display: block;
}
body.logged .ifnotlogged {
	display: none;
}

span.pre {
	display: inline-block;
	padding: 3px 10px;
	background: #ddd;
	font-style: normal;
	margin-left: 10px;

}

.spinner {
	position: absolute; right: 10%; bottom: 20px;
}
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border-top: 2px solid #07d;
  border-right: 2px solid transparent;
  animation: spinner .6s linear infinite;
}