@charset "utf-8";
/* CSS Document */

/* ---------------------------------------------- */
#startboxcontainer{
	position:relative;
	left:10px;
	/*overflow:visible;*/
	width:75%;
	height:auto;
	margin:18px auto;
	
	/*background-color:rgba(8,0,0,0.1);*/
}
@media only screen and (max-width:650px){
#startboxcontainer{
	display:none;
}
}
#centerblender{
	margin:auto;
	left: 0;
  	right: 0;
	top:0;
	bottom:0;
	width:100%;
}
#centerblender img{
	width:100%;
	max-width:100%;
}
/* ---------------------------------------------- */
.startbox{
	position:absolute;
	width:50%;
	height:50%;
		
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	
	transition: all 250ms ease 750ms;
    -webkit-transition: all 250ms ease 750ms;
    -moz-transition: all 250ms ease 750ms;
    -o-transition: all 250ms ease 750ms
}
.startbox div{
	opacity: 0;
    filter: alpha(opacity=0);
	
	transition: all 500ms ease 500ms;
    -webkit-transition: all 500ms ease 500ms;
    -moz-transition: all 500ms ease 500ms;
    -o-transition: all 500ms ease 500ms;
}
.startbox img{
	transition: all 500ms ease 500ms;
    -webkit-transition: all 500ms ease 500ms;
    -moz-transition: all 500ms ease 500ms;
    -o-transition: all 500ms ease 500ms;
}
.startbox:hover img{
	opacity: 0.2;
    filter: alpha(opacity=20);
	
	transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
.startbox:hover div{
	opacity: 1;
    filter: alpha(opacity=100);
	
	transition: all 1000ms ease;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
}
#lo:hover, #ro:hover, #lu:hover, #ru:hover{
	width:70%;
	height:55%;
}
/* ---------------------------------------------- */
#lo{
	right:50%;
	bottom:50%;
}
#lo:hover{
	background-color:#cbf770;
	
	transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
#lo img{
	position:absolute;
	right:0;
	bottom:0;
	float:right;
	max-height:100%;
}
#lo div{
	position:absolute;
	top:0;
	left:0;
	width:180px;
	height:180px;
	text-align:left;
	padding:20px 0 0 20px;
	
	/*background-color:rgba(8,0,0,0.1);*/;
}
/* ---------------------------------------------- */
#ro{
	left:50%;
	bottom:50%;
}
#ro:hover{
	background-color:#e866b3;
	
	transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
#ro img{
	position:absolute;
	left:0;
	bottom:0;
	float:left;
	max-height:100%;
}
#ro div{
	position:absolute;
	top:0;
	right:0;
	width:180px;
	height:180px;
	text-align:right;
	padding:20px 20px 0 0;
	color:#fff;
}
/* ---------------------------------------------- */
#lu{
	top:50%;
	right:50%;
}
#lu:hover{
	background-color:#6e6ea1;
	
	transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
#lu img{
	position:absolute;
	right:0;
	top:0;
	float:right;
	max-height:100%;
}
#lu div{
	position:absolute;
	bottom:0;
	left:0;
	width:180px;
	height:180px;
	text-align:left;
	padding:0 0 20px 20px;
	color:#fff;
}
/* ---------------------------------------------- */
#ru{
	top:50%;
	left:50%;
}
#ru:hover{
	background-color:#ffd46e;
	
	transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
#ru img{
	position:absolute;
	left:0;
	top:0;
	float:left;
	max-height:100%;
}
#ru div{
	position:absolute;
	bottom:0;
	right:0;
	width:180px;
	height:180px;
	text-align:right;
	padding:0 20px 20px 0;
}
/* ---------------------------------------------- */
#center{
	position:absolute;
	margin:auto;
	left: 0;
  	right: 0;
	top:15%;
	bottom:15%;
	width:70%;
	height:70%;
	overflow:hidden;
	
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
}
#center img{
	width:100%;
	max-with:100%;
}
/* ---------------------------------------------- */
#map{
	position:relative;
	width:50%;
	margin:20px auto;
}
#map img{
	width:100%;
	max-width:100%;
}
/*@media only screen and (min-width:650px){*/
#mapcontainer{
	display:none;
}
/*}*/
.kleinbox{
	position:absolute;
	width:49%;
	height:49%;
}
#klo{
	left:0;
	top:0;
}
#kro{
	right:0;
	top:0;
}
#klu{
	left:0;
	bottom:0;
}
#kru{
	right:0;
	bottom:0;
}