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


 header {
}
#navwrapper {
	background-color: #A20A0D;
	width: 100%;
	padding: 0px;
	margin: 0px;
}
#main,  #footer-inner, .jcarousel-wrapper {
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1.875em;
	line-height: 1.7em;
}
header h1 {
	text-align: center;
	margin: 0 auto;
}
header img {
	margin: 5px;
}
h2 { margin-top: 10px;}

.colgroup {margin: 30px 0 ; padding: 10px;}
ul.colgroup  {text-align: left;}


.dreicol {
	width: 30%;
	float: left;
	padding: 10px;
	margin: 1%;
}
.zweicol {
	width: 46%;
	margin:2%;
	float: left;
	padding: 10px;
	
}

.linkstext {text-align: left;}
.rechtstext {text-align: left;}

.h250 {height: 250px;}
.h300 {height: 300px;}
.h350 {height: 350px;}
.h400 {height: 400px;}
.h450 {height: 450px;}	
.h500 {height: 500px;}	
.subcol 
.eincol { width: 100%; margin: 0 auto;    }

#main .eincol, #main .zweicol, #main .dreicol {background :#fafafa inherit!; padding: 20px;  border: 1px dashed #ccc;}

#main .eincol p{max-width: 600px; width: auto;}


.links {
	text-align: left;
}
.mitte {
	text-align: left;
}
.rechts {
	text-align: left;
}

#autopic {height:100%; width: 100%; max-height:574px; max-width: 1920px;}


#callus { clear: left;  border-top: 1px solid #ddd; background: #fafafa ;  color: #ccc; margin-top: 50px;  text-align: center;  padding: 70px; }
 
#callus p {width: 400px; font-size: 2em; color: #666;  margin:0 auto;}
#callus a {  color: #5e0000; }

body > header nav {
    float: right;
    text-align: center;
}
nav {}/*margin: 10px 20% 0px 10px;*/
nav a{color: #247cb0;}

.homebt{background: url('../images/home.png') center no-repeat;}
.kontaktbt{background: url('../images/kontakt.png') center no-repeat;}

body > header nav a {
    display: inline-block;
    position: relative;
    text-align: left;
    width: 2.5em;
    height: 2.5em;
    background: #fff;
    border-radius: 50%;
    margin: 0 0.1em;
    border: 4px solid #5e0000;/*47a3da*/
}
body > header nav .bp-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 2;
    text-indent: 0;
}
.bp-icon-next::after {
    content: "\e000";
}
.bp-icon::after {
    font-family: 'bpicons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    color: #247cb0;
    -webkit-font-smoothing: antialiased;
}


div figure {
    height: 100% !important;
    margin: 0;
    position: relative;
}

figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
	position: absolute;
	top: 0;
	left: 0;
	padding: 15px;
}


/*animation*/
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
 opacity:0;  /* make things invisible upon start */
 -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
 -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:1s;
 -moz-animation-duration:1s;
 animation-duration:1s;
}
 




/*navigation*/ 

.menubutton { background: #A20A0D; padding: 2px;}
.menubutton:hover {background: #A20A0D;color: #000;}
#navwrapper {
	margin: 0 auto;
	padding: 2px;
	background:  #A20A0D url('../images/tabbg.png') bottom left repeat-x;
}
/* Add a black background color to the top navigation */

#cbp-hrmenu{
	margin: 0 auto;
	max-width: 60em;
}
#cbp-hrmenu ul {
	max-width: 70em;
	list-style-type: none;
	margin: 0 auto;
	padding: 0px;
	overflow: hidden;
}
#cbp-hrmenu li {
	float: left;
	display: inline-block;
	text-align: left;
	color: white;
}
#cbp-hrmenu li a, .dropbtn {
	/*display: inline-block;*/
    color: white;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	width: 100%;
	font-size: 1em;
}

#cbp-hrmenu li a:hover, .dropdown:hover .dropbtn {
	background-color: #247cb0;
}

	 
/*test*/
#cbp-hrmenu li a:hover > .cbp-hropen{display: block;}
 
/*#nav #cbp-hrmenu ul  li a:hover > .cbp-hropen  {display: block;}*/

li.dropdown {
	display: inline-block;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f2f2f2;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);/*z-index: 1;*/
}
.dropdown-content a {
	color: black;
	padding: 10px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
}
.dropdown-content a:hover {
	background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
	display: block;
}



.secondflip {margin-top : 50px;  }
.secondflip a { color: #5e0000;  }


.zentrieren{text-align: center; }

footer {

	background: #500000;
	margin: 0 auto;
	width: 100%;
	padding: 0 1.875em;
	height: auto;
}

footer  div div {float: left; width: 30%;  margin: 1%; height: 100%;font-size: 0.9em ;}
footer h2 {font-size: 0.9em;}
footer ul {
	margin: 0px;
	padding: 0px;
}
footer ul li {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	
}

footer .rights { text-align:  right;}

.bg1, .bg2 {-webkit-box-shadow: 0px 0px 17px -10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 17px -10px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 17px -10px rgba(0, 0, 0, 0.75);}

.bg1 {background:#247cb0   ;  color: #fff;  }
.bg2 {background:#CDE11F url('../images/bgruen.jpg') bottom right no-repeat ; color: #247cb0; }
.bg1 h3 {color: #fff;text-shadow: -1px -1px 0 #247cb0, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}

.bg2 a{color:#5e0000;}
 


@media screen and (max-width: 900px) { 
#cbp-hrmenu ul  {width: 100%;     }

#callus { clear: left;  border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; background: #fff;  color: #ccc; margin-top: 50px;  text-align: center;  padding: 20px;   }
#callus p {width: 300px; font-size: 1em; color: #666;  margin:0 auto;}
#callus a {  color: #5e0000; }


}
@media screen and (max-width: 767px) {  
 h1 {
font-size: 1.2em;
  
}
 ul {
 list-style-type: none;
 margin: 0 10px 0 10px;
 padding: 0;
 overflow: hidden;
 
 width: 100%;
}
 li {
 float: left;
 display: inline-block;
 width: 100%;
}
#cbp-hrmenu .hrsub-inner  a {
 display: inline;
 color: white;
 text-align: center;
 padding: 9px 9px;
 text-decoration: none;
 width: 100%;
 font-size: 0.6em;
}
#cbp-hrmenu li a {font-size: 0.8em;}
 
 #cbp-hrmenu  .hrsub-inner  a  img   {
float: left; display: inline; padding: 2px;
}
 #cbp-hrmenu li a, .dropbtn li a img {
/*float: left;*/
}
 .dropdown-content {
 width: 100%;
 position: relative;
}
 .dreicol, .zweicol {
	width: 100%;
 	float: none;
	 margin: 5px auto; 
}

.h250, .h300, .h350, .h400, .h450, .h500 {height: auto;}
 
footer div div { float: none; width: 100%; display:  block}

	
}


.autosizepic {
	width: 100%;
}