body{
	font-family: "Ubuntu";
	background-color:#f9f9f9;
	height:100vh;
	margin:0;
	}

/* footer*/

.footer{
	position: absolute;
bottom: 0;
height: 2vh;
text-align: center;
border-top: 1px solid black;
width: 100%;
	}

/* Datenschutz */

.datenschutz{
	transition: ease-out 0.5s;
	position: fixed;
	top:0;
	left:0;
	height: 100%;
	width:100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
  visibility: hidden;
  display:none;
	}

.datenschutzWrapper{
	transition: ease-out 0.5s;
	background: rgba(255, 255, 255, 1);
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width:30vw;
	}

.datenschutzText{
	transition: ease-out 0.5s;
	margin:1%;
	height: 18%;
	font-size:0.8vw;
	}

.datenschutz a{
 cursor: pointer;
	color: blue;
	}

.datenschutzContent{
	border-top:1px solid black;
	margin:1%;
	overflow-x: hidden;
	overflow-y:auto;
	visibility: hidden;
	height: 0;
	width:0;
	max-height:78%;
	max-width:100%;
	}

.datenschutz-open{
	top:10%;
	left:10%;
	height:80%;
	width:80%;
	transform: translate(0, 0);
	}

.datenschutz-open .datenschutzContent{
	visibility:visible;
	height: auto;
	width: auto;
	}

#outerFrame{
	width:100vw;
	height:100%;
	perspective-origin:50% 50%;
	perspective: 20000px;
	
	overflow:hidden;
	}

#s1 div {
	background-color: #bababa;
	transform: translateZ(-100px);
	}
#s2 div {
	background-color: #c6c6c6;
	transform: translateZ(-200px);
	}
#s3 div {
	background-color: #d3d3d3;
	transform: translateZ(-300px);
	}
#s4 div {
	background-color: #e0e0e0;
	transform: translateZ(-400px);
	}
#s5 div {
	background-color: #ededed;
	transform: translateZ(-500px);
	}

.Kachel .content{
		display:none;
				transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.shadow{
	pointer-events: none;
	}

.Kachel, .shadow div{
	margin:0.5%;
	width: 22.4vw;
	height:22.4vw;
	float:left;
	
			transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	
	}
.Kachel:hover .kContent img{
	margin-top:0;
	}
.Kachel:hover .kContent p{
	opacity:1;
	}

.hidden{
	opacity:0;
	}

.show{
	opacity=1;
	}

#KachelContainer, .shadow{
	position: absolute;
	width:70%;
	padding-right:15%;
	padding-left: 15%;
	padding-top:2%;
	padding-bottom:2%;
	
	transform-style: preserve-3d;
	
			transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.kContent{
	position: relative;
	vertical-align:middle;
	text-align:center;
	height:100%;
	width:100%;
}
.kContent img{
	position:relative;
	margin-top:15%;
	height:auto;
	width:70%;
		transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}
.kContent p{
	top:70%;
	font-size:1.2vw;
	margin:0;
	color: white;
	opacity:0;
	transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.menuLeft{
	padding-left: 5% !important;
	width: 80%;
	
		transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.menuLeft .Kachel, .menuLeft .sElement{
	float: none;
	
		transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.hoverWrapperInactive{
	width: 8vw;
	margin:0.5%;
	}

.shadowInactive div{
	width: 8vw;
	height:8vw;
	}

.visible{
	display: inline !important;
			transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.invisible{
	display: none;
			transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.inactive {
	width: 8vw;
	height:8vw;
	}
.inactive .kContent p{
	font-size: 0.5vw;
	}

.active {
	left:20%;
	top: 5%;
	height:90%;
	position: absolute;
	width: 70%;
	transform:none !important;
		transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.active .content{
	display: block;
	width:90%;
	padding-left:5%;
	padding-right:5%;
	padding-top:0%;
	overflow-y: auto;
	text-align: center;
	
		
			transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}




.active .kContent img{
	left:0;
	margin-top:0;
	width:20%;
	}


.back{
	position: absolute;
	right:0;
	top:0;
	
	right:5%;
	top:5%;
	width:5%;
	left:auto;
	
	display: none;
	
			transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.active .kContent p{
	display: none;
	}

 .active .content p{
		 display: inline;
	 opacity:1;
		}

.active .kContent{
	text-align: left;
	overflow-y: auto;
	}

#background, #backgroundL2, #backgroundL3{
	display: none;
	}

#background {
    background-image: url("/2016/images/background.png");
    background-repeat: repeat;
    height: 200%;
    left: -50%;
    opacity: 0.3;
    overflow: hidden;
    position: absolute;
    top: -10%;
    transform: translateZ(-1500px);
    width: 200%;
    z-index: -5;
}
#backgroundL2 {
    background-image: url("/2016/images/backgroundL2.png");
    background-repeat: repeat;
    height: 200%;
    left: -10%;
    opacity: 0.3;
    overflow: hidden;
    position: absolute;
    top: -20%;
    transform: translateZ(-900px);
    width: 200%;
    z-index: -5;
}
#backgroundL3 {
    background-image: url("/2016/images/backgroundL3.png");
    background-repeat: repeat;
    height: 200%;
    left: -10%;
    opacity: 0.3;
    overflow: hidden;
    position: absolute;
    top: -30%;
    transform: translateZ(-600px);
    width: 200%;
    z-index: -5;
}

#K1 .kContent p{
	color:#062f5d;
	}
#K1{
	background-color:white;
	}
#K2{
	background-color:#e25907;
	}
#K3{
	background-color:#de0a7d;
	}
#K4{
	background-color:#d40f0e;
	}
#K5{
	background-color:#5fbbb8;
	}
#K6{
	background-color:#55ad31;
	}

@media (max-width:900px){
	
	#outerFrame{
		width:90vw;
		overflow:visible;
		}
	
	.Kachel, .shadow div{
	margin:1%;
	width: 70vw;
	height:70vw;
	float:left;
	}
	
	.shadow{
		display: none;
		}
	.Kachel{
		
	transform: none !important;
		}
	
	.Kachel .kContent img{
	margin-top:0;
	}
.Kachel .kContent p{
	opacity:1;
	}
	
	
	.kContent p{
	top:70%;
	font-size:5vw;
	margin:0;
	color: white;
	opacity:0;
	transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

	#outerFrame{
		perspective-origin:150% 50% !important;
		}
	
	
.menuLeft{
	padding: 0 !important;
	width: 100%;
	
		transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

.menuLeft .Kachel, .menuLeft .sElement{
	float: left;
	
		transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}
	
	.hoverWrapper{
		width:0;
		}

.hoverWrapperInactive{
	width: 10%;
	margin:0.5%;
	float:left;
	}

.shadowInactive div{
	width: 8vw;
	height:8vw;
	}

.inactive {
	float:left;
	width: 8vw;
	height:8vw;
	}
.inactive .kContent p{
	opacity:0;
	}
	.inactive .kContent img{
	margin-top:15%;
	}

.active {
	left:5%;
	top: 10vh;
	position: absolute;
	width: 96%;
	height:auto;
		transition: all 0.5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
	}

	.back{
		width:10%;
		}
	
.active .kContent img{
	left:0;
	margin-top:0;
	width:20%;
	}
	
	.inactive:hover .kContent p{
		opacity:0;
		}
	
	.active:hover .content p{
		opacity:1;
		}

	#KachelContainer{
		width:100%;
		margin:0%;
		}

	#background, #backgroundL2, #backgroundL3{
		display: none;
		}
	
	}