.outerframe{
	font-size:13px;
	background-color:white;
	width:800px;
	margin:0px auto;
	}
.hidden{
	display:none;
	}	
	
.pageheader{
	top:0px;
	left:0px;
	margin:10px 10px 0px 10px;
	padding:0px;
	border:0px; 
	height:55px;
	width:100%;
	display:none;
	}
	
.pagefooter{
	top:0px;
	left:0px;
	margin:10px auto;
	padding:0px;
	border:0px;
	height:55px;
	width:100%;
	text-align: center;
	}
	
.pagebody{
	top:0px;
	left:0px;
	margin:0px 10px 0px 10px;
	padding:0px 0px 0px 0px;
	border:0px;
	width:100%;
	}
	
.content{
	width: 95%;
	top: -55px;
    z-index:100;
	}

/*CSS für Hauptseite: hier Flipcards*/
.outer{
	width:700px; /*685*/
	margin-left:auto;
	margin-right:auto;
	clear:both;
}
	
.shadow {
	-webkit-box-shadow: 10px 10px 10px 5px #a0a0a0; /* horiz offset, vert off, blur, spread(opt), color */
	   -moz-box-shadow: 10px 10px 10px 5px #a0a0a0;
	    -ms-box-shadow: 10px 10px 10px 5px #a0a0a0;
	     -o-box-shadow: 10px 10px 10px 5px #a0a0a0;
		    box-shadow: 10px 10px 10px 5px #a0a0a0;
	}

                               
.flipcontainer {
	position: relative;
	margin: 5px;
	width: 161px;
	height: 191px;
	-webkit-perspective: 500px;
	   -moz-perspective: 500px;
	    -ms-perspective: 500px;
	     -o-perspective: 500px;
	        perspective: 500px;
	float:left;
	z-index: 1;
}

                               
.flipcards {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	   	-ms-transform-style: preserve-3d;
		 -o-transform-style: preserve-3d;
		    transform-style: preserve-3d;
	-webkit-transition: all 0.8s ease-out; /*abgebremmste Transition*/
	   -moz-transition: all 0.8s ease-out;
	    -ms-transition: all 0.8s ease-out;
	     -o-transition: all 0.8s ease-out;
	        transition: all 0.8s ease-out;	
	z-index:1000; /*für IE*/		
}

.flipcontainer:hover .flipcards, .flipcontainer.hover_effect .flipcards {
	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-180deg);
	    -ms-transform: rotateY(-180deg);
	     -o-transform: rotateY(-180deg);
	        transform: rotateY(-180deg);
	-webkit-box-shadow: -10px 10px 5px #a0a0a0; /*Das ist der Schatten der rotierten Elemente - deshalb negativer Wert, sonst auf falscher Seite*/
	   -moz-box-shadow: -10px 10px 5px #a0a0a0;
	    -ms-box-shadow: -10px 10px 5px #a0a0a0;
	        box-shadow: -10px 10px 5px #a0a0a0;	
}

.flipcontainer:hover .card.back, .flipcontainer.hover_effect .card.back{
		z-index:950; /*für IE: Rückseite wird durch Anheben des z-Index sichtbar*/
    }		
                           
.card {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	vertical-align: middle;
	overflow: hidden;
	padding:6px;
	-webkit-backface-visibility: hidden; /*Rückseite von Front- und Rückbild wird jeweils ausgeblendet*/
	   -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	     -o-backface-visibility: hidden;
		    backface-visibility: hidden;
	/* box model like old IE*/    
	-webkit-box-sizing: border-box;     /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;		/* Firefox, other Gecko */
	    -ms-box-sizing: border-box;		/* IE ?*/
	     -o-box-sizing: border-box;
		    box-sizing: border-box;		/* Opera/IE 8+ */
}
                              
.card.front {
	background-color: #ffffff;
	color: white;
	-webkit-backface-visibility: hidden; /*Rückseite von Front- und Rückbild wird jeweils ausgeblendet*/
       -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	     -o-backface-visibility: hidden;
		    backface-visibility: hidden;
	z-index:900; /*für IE*/
}
                            
.card.back {
	display: block;
	-webkit-transform: rotateY(180deg); /*Rückbild um 180grad drehen, so dass es bei der Rotation zu sehen ist*/
	   -moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
	     -o-transform: rotateY(180deg);
	        transform: rotateY(180deg);
	background-color: #effbef;
	z-index:800;  /*für IE*/
}	

/*CSS für Hauptseite: hier kader elements*/

 .kader, .kaderNN {
	font-size: 1.2em;
	font-weight: bold;
	color: #295529;
	text-align: left;
	background-color: #effbef;
	vertical-align:bottom;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	float: left;
	}
		
.kaderpict {
	/*background-position: upper left ;*/
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	display: table;
}
   
.kaderinfo{
	background-size: cover;
	width: 100%;
	height: 100%;
	white-space: normal;
}
	
.kaderinfo span {
	padding:2em 0 0 0;
	font-weight:normal;
	font-size:0.8em;
	}
		
.kader img {
	margin-left: auto;
	margin-right: auto;
	float: left;
	/* width: 150px; */
	}
	
.kaderlightbox {
      position:fixed;
      top:10;
      left:10;
      width:80%;
      height:80%;
      background:rgba(0, 0, 0, .5);
	  z-index:2000;  /*für IE*/
   }