/* */ 
/* Schriftarten-Import */ 

@font-face { font-family: 'IBMplex'; 
    src: url('ibmplexsans-regular-webfont.woff2'); } 

@font-face { font-family: 'IBMplex-Bold'; 
    src: url('ibmplexsans-bold-webfont.woff2'); } 
    
@font-face { font-family: 'Meta'; 
    src: url('MetaWeb-Normal.woff'); } 
    

/* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* */ 
/* 																		*/
/* 						betrained.eu/* Styleangaben						*/
/*																		*/
/*									/*									*/
/*									/*									*/
/*						*			/*			  						*/
/*						  /*		 			*/						*/
/*							*/*/*		   */*/* 						*/
/*								*/*/*/*/*/*								*/
/*																		*/
/* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* /* */


/* */ 
/* Achtung: Der mittlere, graue Bereich ist zurzeit 636px */
/* Um das zu ändern, ersetze einfach alle 636 mit einer anderen Zahl */ 
/* */ 


/* */ 
/* für Desktops */ 
/* */ 

html     { 
	height: 100%;
    }
    
body      { 
	background: url(x); 
	height: 100%; 
    }
   
a { text-decoration:none; }  
a:hover { text-decoration:none; }  
    
    /* fade in der Seiten */
@-webkit-keyframes fadeIn { from { opacity:0.4; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0.4; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0.4; } to { opacity:1; } }
#text, h1, #logo, #navibox {
	opacity:0.4;  /* kurze Durchsichtigkeit beim Start */
	-webkit-animation:fadeIn ease-in 1;  /* macht, dass es 1x reinfadet */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:0.4s;
	-moz-animation-duration:0.4s;
	animation-duration:0.4s;
}

#body { 
	z-index:1; 
	right:0px; 
	top:0px; 
	height:100%; 
	overflow-x: hidden;
	width: 100%;	
	}

/* */ 
/* Logo */
#logo 	{ /* Grundangaben für die betrained-logo-Schrift */ 
	position:fixed; 
	z-index:50;
	top:83px;
 	right: 50%; margin-right:calc(636px - 389px); /* mehr rückt Logo nach links */
 	width:auto; 
	height:120px;
    background-color: rgba(255, 255, 255, 0.0); 
    line-height:38px; 
    white-space:nowrap; 	
    padding-top:9px;
    }
@-moz-document url-prefix() { 
  #logo {
    padding-top:8px;
  }}
.graugroß { 
	font-family: 'Meta', sans-serif; 
	font-size:84px; 
	color: #8b8b8b;
	}
.rotgroß { 
	font-family: 'Meta', sans-serif; 
	font-size:84px; 
	color: #a41e24;
	}
.grauklein { 
	font-family: 'Meta', sans-serif; 
	font-size:18px; 
	color: #8b8b8b; 
	padding-left:5px; letter-spacing: 2px;
	}
.rotklein { 
	font-family: 'Meta', sans-serif; 
	font-size:18px; 
	color: #a41e24; 
	}
.rotkreuz { 
	position:absolute; 
	z-index:49; 
	right:-86px; 
	top:15px; 
	width:50px; 
	height:50px;
	border-left: 12px solid #a41e24; 
	border-bottom: 12px solid #a41e24; 
	}
.graukreuz {
	position:absolute; 
	z-index:48; 
	right:-24px;   /* mehr rückt kreuz innerhalb des logos nach rechts */
	top:77px;  /* mehr rückt kreuz innerhalb des logos nach unten */
	width:50px; 
	height:50px;
	border-right: 12px solid #8b8b8b; 
	border-top: 12px solid #8b8b8b; 
	}

  
#impressum { 	
	position:absolute; 
	top:0px; 
	right: 50%; 
	margin-right: -413px; 
	height:30px; 
	width:490px; 
	padding: 0px 20px 0px 20px; 
	text-align: right;
	line-height: 20px; 
	background-color: rgba(240, 240, 240, 0); 
	visibility: visible; 
	}	
#impressum a {	
    visibility: visible;
    color: #aaa; 
    font-family: "Meta", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:16px; 
    font-weight:400; 
    text-decoration:underline;
	list-style:none; 
    }
#impressum a:hover {
    visibility: visible;
    color:#ccc;
    text-decoration:none; 
    transition:all linear 0.15s; /* macht, dass Links bei Hover grau werden */
    }  
    
/* */
/* Haupt-Navigation */

#navibox { position: fixed; 
    	right: 50%; margin-right: -640px;
    	top: 160px;
    	z-index:50;   
    	width: 89px;  		
        overflow: hidden;
        background-color: rgba(164, 30, 36, 0.7); 
        border: 0px; border-radius: 20px 20px 20px 20px;}

.navibox-inner {
        width: calc(636px + 221px);
		z-index:52; 
   		/* IE */
    	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5aa41e24', endColorstr='#5aa41e24');}

.navibox-inner a, th, tr {	
    color: #dbdbdb;
    font-family: 'Meta', sans-serif; 
    font-size:17px; 
    line-height:26px;
    font-weight:400; 
    text-decoration:none;
	list-style:none; 
    text-align: left;
    }
.navibox-inner a { 
    color:#fff;
    }  
.navibox-inner a:hover {
    color:#ccc;
    text-decoration:none; 
    transition:all linear 0.15s; /* macht, dass Links bei Hover grau werden */
    }   
.navibox-inner .menu { width: 85px; padding: 100px 0px 20px 5px; } /* breite ist 85px - 5 padding - 100px=Position des Pfeils von oben */
.navibox-inner .menulinks { width: 120px; padding: 23px 0px 20px 5px; } /* 23px, damit die Höhe gleich der im Textkasten ist */
.navibox-inner .team { display:none; padding: 23px 0px 20px 40px; } .team th { width:170px; }
.navibox-inner .referenzen { display:none; padding: 23px 0px 20px 40px; } 
.referenzen th { width:170px; height:23px; text-align: center; }
.navibox-inner .leistungen { display:none; padding: 23px 0px 20px 40px;}
.navibox-inner .slide-left { display:block; font-size:34px; }
.navibox-inner .slide-right { display:none; font-size:34px; }

.navibox-referenzen-extra { 
	position:fixed; top: 160px; 
	right: 50%; margin-right: -470px;
	width: 25px; 
	padding: 15px 10px 15px 10px; 	 
	font-size:7px; 
	background-color: rgba(164, 30, 36, 0.7);	
	border: 0px solid #8b8b8b; border-radius: 20px 20px 20px 20px; 
	}		


/* */  	
/* text */

h1 /* Überschrift im flachen grauen Kasten*/ { 
	position:absolute; 
	top:30px; 
	right: 50%; margin-right: -413px; 
	height:63px; 
	width: calc(636px - 40px); padding: 20px 20px 20px 20px; 
	font-size:22px; 
	text-align: right; 
	font-weight:normal; 
	color:#a41e24; 
	font-family: 'Meta';
	border: 0px; border-radius: 20px 20px 20px 0px;
	background-color: rgba(240, 240, 240, 1); 
	/* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#51cfcfcf', endColorstr='#51ffffff');
    }

h2 {  /* Überschrift im Fließtext */ 
	font-size:18px; 
	color:#a41e24; 
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight:normal; 
    }
    

h3 {  /* Überschrift für Anker im Fließtext */ 
	position:relative; 
	font-size:18px; 
	color:#a41e24; 	font-weight:normal; 
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 0px;
    margin-bottom: 0px; }
h3 span { position:absolute; top:-180px; }

h4 {  /* Überschrift in Formularen */ 
	font-size:20px; 
	color:#a41e24; 
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight:normal; 
    }
		
#text { 
	position:absolute; 	
	float:right;
	right: 50%; margin-right: -413px;
	background-color: rgba(240, 240, 240, 1); 
	top:160px; 
	width: 636px; 
	height: calc(100% - 160px - 45px);	
	border: 0px solid #8b8b8b; border-radius: 0px 20px 20px 20px; 
	}			
.text-inner { overflow: auto;
	color:#000; 
	background-color: rgba(240, 240, 240, 1); 
	padding: 20px 20px 20px 20px;  	
	font-size: 17px; 
	line-height: 29px; 
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif; 
	border: 0px solid #cfcfcf; border-radius: 0px 20px 20px 20px;
	}	
.text-inner ul { 
	list-style-image:url(images/pfeil.gif); 
	list-style-position: outside; 
	padding-left: 10px; 
	color:#000; 
	}
.text-inner th, tr { 	
    width: calc(636px / 2); 
    color:#000; 
    text-decoration:none;
    text-align: center;
    vertical-align: top;
    }
.text-inner p { 
	position:absolute; 	
	bottom: -55px;
	right: 50%; margin-right: -85px;
	background-color: rgba(240, 240, 240, 0); 
	}
.text-inner a {	
    color: #333;
    font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:17px; 
    font-weight:400; 
    text-decoration:underline;
	list-style:none; 
    }
.text-inner a:hover {
    color:#ccc;
    text-decoration:none; 
    transition:all linear 0.15s; /* macht, dass Links bei Hover grau werden */
    } 
.text-inner .anfahrt .label {
	width: calc(636px - 40px);
	height: calc(636px / 1.779);
	border: 0;
	background-image: url(images/anfahrt_desktop.png);  
	background-size: 596px 335px; } 
	


/* */  		
/* Für die Overlay-Kästen, z.B. bei Logos auf Referenzen oder Vorträgen */	
.span-size { display: inline-block; height: 105px; width: 295px;
}
.span-size-vortraege { display: inline-block; height: 105px; width: 596px;
}
.over_box_referenzen { display: flex; justify-content: center; align-items: center; 
	width: 280px; height: 90px; float: left;  /* referenzen haben zwei boxen in einer spalte. man braucht also platz dazwischen (siehe unten) und float left */
	position: relative; 
	background-color: rgba(255, 255, 255); 
    border: 0px; border-radius: 20px 20px 20px 20px;
   }
.over_box_vortraege { display: flex; justify-content: center; align-items: center; 
	width: 596px; height: 90px; /* vorträge haben nur eine box in einer spalte. man braucht also ne längere box und keinen platz dazwischen */
	position: relative; background-repeat: space;
  	background-color: rgba(255, 255, 255); 
  	border: 0px; border-radius: 20px 20px 20px 20px; } 
.over_box_referenzen:hover .over_farbe, 
.over_box_vortraege:hover .over_farbe { 
    opacity: 1; }
.over_image { opacity: 1; background-color: rgba(240, 240, 240, 1); }
.over_farbe { position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  opacity: 0; transition: .5s ease;
  border: 0px; border-radius: 20px 20px 20px 20px;
  background-color: rgba(164, 30, 36, 1); }
.over_text1, .over_text2 { position: absolute; top: 50%; width: 90%; left: 50%;
	font-size: 17px; 
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center; }
.over_text1 a { color: #000; }
.over_text2 a { color: #fff; }
     
/* */  		
/* kasten mit foto im Text */	
.text-inner .foto { 
	width: calc(636px -40px); 
	height: calc((636px - 40px) / 1.877); 	
	background-size: calc(636px - 40px) calc((636px - 40px) / 1.877);
	border: 0px solid #cfcfcf; border-radius: 0px 20px 20px 20px; } 
	
.text-inner .foto_francesbeier { background-image: url(images/francesbeier.jpg); } 
.text-inner .foto_richardmeier { background-image: url(images/richardmeier.jpg); } 
.text-inner .foto_haraldhartwig { background-image: url(images/haraldhartwig.jpg); } 
.text-inner .foto_larahering { background-image: url(images/larahering.png); }  
.text-inner .foto_ellensaal { background-image: url(images/ellensaal.jpg); }     	
.text-inner .foto_martinalabonte { background-image: url(images/martinalabonte.jpg); }   
.text-inner .foto_timschueler { background-image: url(images/timschueler.jpg); }   
.text-inner .foto_jensjankowski { background-image: url(images/jensjankowski.jpg); }   
.text-inner .foto_noralucaciu { background-image: url(images/noralucaciu.jpg); }   
.text-inner .foto_saskiakuhnert { background-image: url(images/saskiakuhnert.jpg); }
.text-inner .foto_guenthersturmlechner { background-image: url(images/guenthersturmlechner.jpg); } 
.text-inner .foto_birgitwegner { background-image: url(images/birgitwegner.jpg); }  
.text-inner .foto_joergschneider { background-image: url(images/joergschneider.jpg); }  
.text-inner .foto_angiesonnemann { background-image: url(images/angiesonnemann.jpg); }   
.text-inner .foto_kathrinkoecher { background-image: url(images/kathrinkoecher.jpg); }   


/* */ 
/* Formulare */
input {
  	color: black;
  	font-size: 17px;
  	width: 95%;
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
	border: 2px solid #8b8b8b;
    border-radius: 7px;  
  	background-color: rgba(240, 240, 240, 1); 
  	}
date {
  	color: black;
  	font-size: 17px;
  	width: 40px;
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
	border: 2px solid #8b8b8b;
    border-radius: 7px;  
  	background-color: rgba(240, 240, 240, 1); 
  	}
  	
textarea {
  	color: black;
  	font-size: 17px;
  	width: 95%;
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
	border: 2px solid #8b8b8b; border-radius: 7px;}	
input[type="text"], textarea {
  		background-color: rgba(240, 240, 240, 1); 
  	}

/* */ 
/* Radiobuttons */
.radio-toolbar { margin-top: 10px;
}
.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;}
.radio-toolbar label {
 	margin-right: 5px; margin-top: 4px;    
 	display: inline-block;
    background-color: #eee;
    width: 100px; height: 30px;
    text-align: center; 
    font-family: sans-serif, Arial;
    font-size: 14px;
    border: 2px solid #8b8b8b;
    border-radius: 40px;
    font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.radio-toolbar label:hover { background-color: #fff;}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: #a41e24;
    border-color: #8b8b8b;
    color:#fff; 
	font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif; }


/* */ 
/* Sonderlayout für kleine Screens. Macht u.a., dass der Menükasten nach links ins Bild rutscht */
/* */

@media screen and (max-width : 1320px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:51%;}
	.graugroß, .rotgroß { font-size:82px; } 
	.grauklein, .rotklein { font-size:18px; letter-spacing: 1.5px;}  
	}

@media screen and (max-width : 1280px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:52%;}
	.graugroß, .rotgroß { font-size:80px; } 
	.grauklein, .rotklein { font-size:17px; letter-spacing: 1.7px; } 
	}

@media screen and (max-width : 1240px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:53%;}
	.graugroß, .rotgroß {font-size:78px;} 
	.grauklein, .rotklein {font-size:17px; letter-spacing: 1.4px;} 
	}

@media screen and (max-width : 1200px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:54%;}
	#logo {padding-top:11px;}
	.graugroß, .rotgroß {font-size:76px;} 
	.grauklein, .rotklein {font-size:17px; letter-spacing: 1.2px;} 
	}
	
@media screen and (max-width : 1160px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:56%;}
	#logo {padding-top:11px;}
	.graugroß, .rotgroß {font-size:73px;} 
	.grauklein, .rotklein {font-size:16px; letter-spacing: 1.2px;} 
	}
	
@media screen and (max-width : 1120px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:58%;}
	}

@media screen and (max-width : 1080px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:60%;}
	}
	
@media screen and (max-width : 1040px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:62%;}
	}

@media screen and (max-width : 1000px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:64%;}
		/* die graue mitte wird um 40px schmaler */
	/* #logo { margin-right: calc(636px - 389px - 40px); }
	.navibox-inner { width: calc(636px + 221px - 40px); }
	h1 { width: calc(636px - 40px - 40px); }
	#text { width: calc(636px - 40px); }
	.text-inner th, tr {  width: calc((636px - 40px) / 2); }
	.text-inner .anfahrt { width: calc(636px - 40px - 40px); height: calc((636px - 40px) / 1.779); }
	.text-inner .foto { width: calc(636px - 40px - 40px); height: calc((636px - 40px - 40px) / 1.877); 
	background-size: calc(636px - 40px - 40px) calc((636px - 40px - 40px) / 1.877); }} */

@media screen and (max-width : 960px) { 
	#logo, #navibox, h1, #text, #impressum, .navibox-referenzen-extra  { right:66%;}
	/* die graue mitte wird um 80px schmaler */
	/* #logo { margin-right: calc(636px - 389px - 80px); }
	.navibox-inner { width: calc(636px + 221px - 80px); }
	h1 { width: calc(636px - 40px - 80px); }
	#text { width: calc(636px - 80px); }
	.text-inner th, tr {  width: calc((636px - 80px) / 2); }
	.text-inner .anfahrt { width: calc(636px - 40px - 80px); height: calc((636px - 80px) / 1.779); }
	.text-inner .foto { width: calc(636px - 40px - 80px); height: calc((636px - 40px - 80px) / 1.877); 
	background-size: calc(636px - 40px - 80px) calc((636px - 40px - 80px) / 1.877); }
	} */






/* */ 
/* für iPads */ 
/* */ 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {

#logo 	{ /* Grundangaben für die betrained-logo-Schrift */ 
	position:absolute; 
	z-index:50;
	top:106px;
 	right: 50%; margin-right:277px; 
	height:120px;
	line-height:28px;
    }
.graugroß { 
	font-size:56px;
	}
.rotgroß { 
	font-size:56px;
	}
.grauklein { 
	font-size:14px;
	padding-left:2px; letter-spacing: 0px;
	}
.rotklein { 
	font-size:14px; 
	}
.rotkreuz { 
	left:247px; 
	top:11px; 
	width:35px; 
	height:35px;
	border-left: 8px solid #a41e24; 
	border-bottom: 8px solid #a41e24; 
	}
.graukreuz {
	left:204px; 
	top:54px; 
	width:35px; 
	height:35px;
	border-right: 8px solid #8b8b8b; 
	border-top: 8px solid #8b8b8b; 
	}

h1 /* textüberschrift */ { 
	top:4px; 
	right: 50%; margin-right: -270px; 
	height:95px; 
	width:490px; padding: 20px; 
	font-size:20px; }
		
#text { 
	right: 50%; margin-right: -270px;
	top:160px; 
	width:530px; height: calc(100% - 160px);
	}
	
#navibox{ position: absolute; 
    	right: 50%; margin-right: -505px;
    	top: 160px;   
    	width: 90px; 		}

#impressum { 
	position:fixed; 	
	bottom: 0;
	line-height: 20px; 
	text-align: center; 
	background-color: rgba(240, 240, 240, 0); 
	}
	
#impressum a {	
    color: #333;
    font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:15px; 
    font-weight:400; 
    text-decoration:underline;
	list-style:none; 
    }
#impressum a:hover {
    color:#ccc;
    text-decoration:none; 
    transition:all linear 0.15s; /* macht, dass Links bei Hover grau werden */
    }  
}  






/* */ 
/* für Handys */ 
/* */ 

@media only screen 
and (max-device-width : 490px) {
	
body { 
	background-color: rgba(240, 240, 240, 1);
	height: 100%; 
	}

#body { 	
	z-index:10;   
	overflow-x: hidden;
	width:100%; 
	left:0;
		}
		
#logo 	{ z-index: 50;
	position:fixed;
	left:50%; 
	width: 290x;  /* eigentlich -286, sieht aber besser aus */
	height: 70px;
	margin-left:-145px;  /* eigentlich -143, sieht aber besser aus */
	top:10px; 
    background-color: rgba(240, 240, 240, 0.9); 
    line-height:19px;
    }      
.graugroß { 
	font-size:42px;
	}
.rotgroß { 
	font-size:42px;
	}
.grauklein { 
	font-size:11px;
	padding-left:2px; letter-spacing: 0px;
	}
.rotklein { 
	font-size:11px; 
	}
.rotkreuz { 
	left:189px; 
	top:24px; 
	width:17px; 
	height:17px;
	border-left: 5px solid #a41e24; 
	border-bottom: 5px solid #a41e24; 
	}
.graukreuz {
	left:167px; 
	top:47px; 
	width:17px; 
	height:17px;
	border-right: 5px solid #8b8b8b; 
	border-top: 5px solid #8b8b8b; 
	}

    	
#navibox{ position: fixed; 
    	top: 100px;
    	left:50%; margin-left:-150px; /* soll ein bissl Li und re überstehen */
    	z-index:10;   
		width: 300px;		
        overflow: hidden; 
        background-color: rgba(164, 30, 36, 0.7); 
        border: 0px; border-radius: 10px;}
 
.navibox-inner{
        height: 35px;
		z-index:52; 
		border: 0px; border-radius: 10px;}

.navibox-inner a, th, tr {	
    color: #dbdbdb;
    font-family: 'Meta', sans-serif; 
    font-size:15px; 
    line-height:23px;
    font-weight:400; 
    text-decoration:none;
	list-style:none; 
    text-align: left;
    vertical-align: top;
    }
.navibox-inner a { 
    color:#fff; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }  
.navibox-inner a:hover {
    color:#ccc;
    text-decoration:none; 
    transition:all linear 0.15s; /* macht, dass Links bei Hover grau werden */
    } 
  
.navibox-inner .menu { width: 286px; padding: 5px; text-align: center; vertical-align: top;} /* Höhe ist 35px - 5 padding */
.navibox-inner .menulinks { width: 150px; padding: 0px 7px 5px 7px; text-align: left; }
.navibox-inner .team { width: 286px; padding: 5px; text-align: left; display:none; } 
.navibox-inner .leistungen {  height: 10px; width: 286px; padding: 5px; text-align: left; display:none; }
.navibox-inner .referenzen {  height: 10px; width: 286px; padding: 5px; text-align: left; display:none; } .referenzen th { width:150px; text-align: center; }
.navibox-inner .slide-down { display:block; font-size:36px; transform: rotate(270deg); text-align: center; vertical-align: top;}
.navibox-inner .slide-up { display:none; font-size:36px; transform: rotate(270deg); text-align: center; vertical-align: top; }


h1 { 
	position:absolute; 
	top:160px; 
	left:50%; 
	margin-left:-152px; /* eigentlich -143, aber zum ausgleich für -10 padding */
	min-height:17px; 
	width:304px; 
	padding: 5px 10px 5px 10px; 
	font-size:19px; 
	text-align: left; 
	line-height:26px; 
	background-color: rgba(240, 240, 240, 0.7); 
	/* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#51cfcfcf', endColorstr='#51ffffff');
    }

h2 {
	font-size:18px; 
	}

h3 span { position:absolute; top:-160px; }

#text { 
	position:absolute; 
	top:260px;
	left:50%; 
	margin-left:-152px; /* eigentlich -143, aber zum ausgleich für -10 padding */
	width: 304px;
	margin-top: 5px; 
	border: 0px; border-radius: 10px;
	}
.text-inner { 
	font-size: 16px; line-height: 23px; 
	padding: 10px; 
	border: 0px; border-radius: 10px; 
	}
.text-inner p { 
	position:absolute; 	
	bottom: -55px;
	line-height: 20px; 
	left:50%; 
	margin-left:-152px; 
	background-color: rgba(240, 240, 240, 0); 
	}
.text-inner a {	
    color: #333;
    font-family: "IBMPlex", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:15px; 
    font-weight:400; 
    text-decoration:underline;
	list-style:none; 
    }
.text-inner a:hover {
    color:#ccc;
    text-decoration:none; 
    transition:all linear 0.15s; /* macht, dass Links bei Hover grau werden */
    }  
.text-inner .anfahrt {
	width: 276px;
	height: 266px;
	border: 0;
	background-image: url(images/anfahrt_mobil.png); 
	background-size: 276px 266px; }  

/* */  		
/* Für die Overlay-Kästen, z.B. bei Logos auf Referenzen oder Vorträgen */	
.span-size { display: inline-block; height: 100px; width: 280px;
}
.span-size-vortraege { display: inline-block; height: 140px; width: 280px;
}
.over_box_referenzen { height: 90px; width: 280px; /* referenzen haben aufm handy nur eine box pro spalte, genau wie vorträge. man braucht also keinen platz dazwischen kein float left */
	outline:none;
	cursor:pointer;
	position: relative; 
  	background-repeat: space;
  	background-color: rgba(255, 255, 255); 
    border: 0px; border-radius: 20px 20px 20px 20px; }
.over_box_referenzen:focus + .over_farbe { opacity: 1;
}
.over_box_vortraege { height: 130px; width: 280px; /* vorträge haben nur eine box in einer spalte. */
	position: relative; 
  	background-repeat: space;
  	background-color: rgba(255, 255, 255); 
    border: 0px; border-radius: 20px 20px 20px 20px; } 

	    
/* größe des kastens mit foto */	
.text-inner .foto { 
	width:284px; 
	height:151px; 
	margin-bottom: 10px; 
	border: 0px solid #cfcfcf; border-radius: 20px 20px 20px 20px; } 
	 
/* größe des fotos im kasten (-10px padding) */	
.text-inner .foto_kathrinkoecher,
.text-inner .foto_francesbeier,
.text-inner .foto_richardmeier,
.text-inner .foto_haraldhartwig,
.text-inner .foto_larahering, 
.text-inner .foto_timschueler,
.text-inner .foto_ellensaal, 	
.text-inner .foto_jensjankowski,   
.text-inner .foto_noralucaciu, 
.text-inner .foto_martinalabonte,
.text-inner .foto_joergschneider,
.text-inner .foto_angiesonnemann,
.text-inner .foto_saskiakuhnert, 
.text-inner .foto_guenthersturmlechner, 
.text-inner .foto_birgitwegner { background-size: 284px 151px; }   		

#impressum { /* !ausgeblendet! impressum ist aufm handy im menü */
	display: none;
	position:absolute; 
	top:0px; 
	right: 50%; 
	margin-right: 0px; 
	height:0px; 
	width:0px; 
	padding: 0px 20px 0px 20px; 
	font-size:0px;
	text-align: right;
	line-height: 0px; 
	}	    
}