@use postcss-cssnext;

body {
  margin: 0;
  padding: 0;
/*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
  background: #333;
  background-attachment: fixed;
  background-size: cover;
  color:#fff;
  font-size:16px;
  font-family: 'Roboto', sans-serif;
}

h1 {font-size: 30px; font-weight:300;}

header { z-index:1;  }

.hleft {position: absolute; top:20px; left:30px; }
.hright {position: absolute; top:28px; right:30px; }

menu { text-align: center; padding: 40px; background: rgba(0,0,0,0); displaY:none;}
menu ul li { text-transform: uppercase; display: inline; margin: 20px; }

#main {position:absolute; width: 100%; height: 100%; overflow: hidden; }

#content1 {width:100%; height: 100%; position:absolute; text-align:center; z-index:1}

#button1 { display:none; width: 240px; height: 80px; line-height: 4.95; border: 1px solid white; position:absolute; left: 50%; margin-left: -240px; top:77%; opacity: 0; letter-spacing: 1px;}

#button2 { width: 240px; height: 80px; line-height: 4.95; position:absolute; left: 50%; /*margin-left: 20px;*/ top:80%; opacity: 0; letter-spacing: 1px; transform:translate(-50%,-20%);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e70b7+5,33b8bf+50,9ebc24+95 */
background: #0e70b7; /* Old browsers */
background: -moz-linear-gradient(45deg, #0e70b7 5%, #33b8bf 50%, #9ebc24 95%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #0e70b7 5%,#33b8bf 50%,#9ebc24 95%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #0e70b7 5%,#33b8bf 50%,#9ebc24 95%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e70b7', endColorstr='#9ebc24',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#button1:hover { cursor: pointer; color: #000; border: 0px solid #0e70b7; background: rgba(255,255,255,0.5); }
#button2:hover { cursor: pointer; color: #000; border: 0px solid #9ebc24; background: rgba(255,255,255,0.5); }



#box1{
    height: 100px;
    width: 596px;
    position: absolute;    
    overflow: hidden;
	left:50%;
	top: 33%;
	margin-left:-298px;
}

#box2{
    height: 100px;
    width: 466px;
    position: absolute;
	left: 50%;
	margin-left: -233px;
    top:41%;       
    overflow: hidden;
}

.colorLayer1{
    height: 100px;
    width: 596px;
    background-color:#0e70b7;
    position: absolute;
    left: -650px;
    z-index: 9;
}

.colorLayer4{
    height: 100px;
    width: 596px;
    background-color:#fff;
    position: absolute;
    left: 650px;
    z-index: 9;	
	
}

.colorLayer2{
    height: 100px;
    width: 466px;
    background-color:#9ebc24;
    position: absolute;
    left: -650px;
    z-index: 9;
}

.colorLayer3{
    height: 100px;
    width: 466px;
    background-color:#fff;
    position: absolute;
    left: 650px;
    z-index: 9;	
	
}

.image img, .image2 img, .image3 img, .image4 img{
    height: 60px;
    width: 596px;
    position: absolute;
    left: -596px;
    z-index: 1;
}

.title, .title2, .title3, .title4, .title5{    
    line-height: 40px;
    position: absolute;
    left: -650px;
    z-index: 1;	
}

.title4 {opacity:0;}


#bg1 {
	width:100%;	
	background: #fff;	
	position: absolute;
	bottom: -100px;
	opacity: 0.25;
	z-index:20;
}

#gc-logo {		
	position: absolute;
	top: 38%;
	left: 50%;
	margin-left: -161px;
	opacity: 0;
}

.gs-logo {position: absolute; left: 20px; margin-top:34px;}
.viho-logo {position: absolute; left: 20px;}

#darker { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; z-index: -1 }

#loginarea {opacity: 0; width: 600px; position:absolute; top:65%; left:50%; margin-left: -300px; background: #fff; text-align: center; z-index: 100; padding-bottom: 20px; }

.close { width: 100%; height: 80px; color: #fff; background: #000 }
.lock { float: left; }
.close img { float: right; margin: 25px; cursor: pointer; }

#error { margin: 0; background: #fed2d2; color: #F44747; padding: 0; opacity: 0; }

.namearea input, .pwarea input { width:550px; margin: 10px 25px; color: #1993D8; border: 1px solid #1993D8; padding: 20px; text-align: left; background: #f6f9fc; font-size:16px; }

#button3, #button4 { margin: 10px 25px; width: 550px; height: 80px; line-height: 4.95; color: #fff; letter-spacing: 1px; cursor: pointer; border:none; font-size:16px;}

#button3 { background: #b4bfc8;  }
#button4 { background: #1993D8}

#button3:hover { background: #ccd6dd; }
#button4:hover { background: #32B2EA; }

.pwvergessen, .register { margin: 25px; color: #1993D8; /*display: inline-block;*/ display:none;}
.pwvergessen {float: left;}
.register {float:right;}



@media only screen and (max-height: 780px) {
    h1 { font-size: 24px; }
	.colorlayer1, .colorlayer2, .colorlayer3, .colorlayer4, #box1, #box2 { height: 80px; }
	#box1 { top: 26%; }
	#box2 { top: 37%; }
}