@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    src: url("/layout/fonts/Merriweather-Regular.ttf")
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 300;
    src: url("/layout/fonts/Merriweather-Light.ttf")
}
@font-face {
    font-family: 'Abel';
    font-style: normal;
    font-weight: 400;
    src: url("/layout/fonts/Abel-Regular.ttf")
}

/* # basics ########## */
/* # basics ########## */
* {
	margin:0;
	padding:0;
}
BODY {
	text-align: center;
	color: #000;
	font: 22px  'Merriweather', Arial, Verdana, sans-serif;
  font-weight:300;
	background-color: #000;
}

#container {
  position:relative;
	text-align: center;
	width:100%;
	background-color: #fff;
}

TABLE, TR, TD, TH {
	font: 22px  'Merriweather', Arial, Verdana, sans-serif;
	vertical-align:top;
	border-spacing: 0px;
	border-style: none;
	border-collapse: collapse;
}

A:link,
A:active,
A:visited,
A:hover {
  color:#000;
}

A IMG,
IMG {
	border:0;
}

H1 {
  font: 30px  'Merriweather', Arial, sans-serif;
	color:#000;
	font-weight:400;
	line-height:1.7em;
}

H2 {
	font: 25px  'Merriweather', Arial, sans-serif;
	color:#000;
	line-height:1.7em;
} 
H3 {background: url(../bg_h3.gif) center bottom no-repeat;margin-bottom:18px;}
H3,H4,H5,H6 {
	color:#000;
	font-size:22px;
	line-height:1.7em;
}

P	{
	margin-bottom:30px;
	line-height:1.7em;
}

B,STRONG {font-weight:400}

.merry {font-family: 'Merriweather', Arial, Verdana, sans-serif;}

.clearer {clear: both;
	height:0px;
	line-height:0;
	font-size:0px;}
 /* Clearing mit overflow */
.floatbox { overflow: hidden; }


/* # header area ############### */
#header {
	width: 100%;
  background: #fff url(../bg_header.gif) repeat-x;
  height: 175px;
  border-bottom:3px solid #fff;    
}
#header .inside {
  position:relative;
	margin:0 auto;
	text-align: center;
	width: 960px;
  height: 175px;    
}

#top {
  display:block;
  background: url(../logo.gif) no-repeat;
  width: 228px;
  height: 126px;
  text-indent:-999em;
  margin:0 auto;
} 

#navi-area {
  position:relative;
	height:49px;
	color:#fff;
}

#toggleMenu {	display:none;}
  

/* # navigation ############### */
#mainnavi {text-align:center;}
#navi-area UL {
 list-style:none;
 font-size:15px; 
 position: relative;
 float: left;
 left: 30%;
}
#navi-area LI {
 position: relative;
 float: left;
 right: 15%;
}

A.mainnavi:link,
A.mainnavi:active,
A.mainnavi:visited,
A.mainnavi:hover {
 font: 18px  'Abel', Arial, sans-serif;
 text-transform:uppercase;
 text-decoration:none;
 color: #fff;
 padding:0 20px;
 height:49px;
 line-height:49px;
}
#mainnavi A.current,
A.mainnavi:hover,#mainnavi LI.current A {text-decoration:underline;}


#slider {
  position:relative;
	width:100%;
	height:397px;
	margin:0; 
	background-color: #fff;
}

/* # CYCLE  #####*/
/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow .item { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
    height: auto;
}

#slider .item {
	height:397px;
	width:100%;
	background-position: center 0;
	background-repeat: no-repeat;
}

/* in case script does not load */
.cycle-slideshow .item:first-child {
    position: static; z-index: 100;
}
.cycle-prev { position: absolute; top: 40%;left: 0;  background: url(../prev.png) no-repeat;width:42px;height:72px; cursor: pointer;z-index: 800;}
.cycle-next { position: absolute; top: 40%;right: 0; background: url(../next.png) no-repeat;width:42px;height:72px; cursor: pointer;z-index: 800;}  
.cycle-prev:hover,.cycle-next:hover {opacity:0.5;filter:alpha(opacity=50);}

#schere {
  position:absolute;
  left:47%;
  bottom:-19px;
  background: url(../bg_schere.png) no-repeat;
  width: 91px;
  height: 60px;
  z-index:1001;
}


/* # main area ############### */
#content {
  position:relative;
	margin:0 auto;
  padding-top:60px;
  width:960px;
  
}

.big {font-size:35px;font-weight:400;}

.sep {
  float:left;
  width:100%;
  padding-bottom:18px;
  background: url(../bg_block.gif) center bottom no-repeat; 
  margin-bottom:45px;    
} 

.block {float:left;text-align:center;margin-bottom:0;padding:0 5%;width:90%;clear:both;}

.block TABLE {
	margin:0 auto;
	width:auto;
}

.block TD {
	padding-right:10px;
	padding-bottom:15px;
	vertical-align:middle;
	text-align:left;
}

#content UL { list-style:none;	margin:0 0 25px 0;font-weight:300;
 position: relative;   text-align:center;  display:inline-block;
 }
#content LI {padding:0 0 0 66px;line-height:1.7em;background: url(../bg_li.gif) 0 12px no-repeat;text-align:left;}

#teaser P{ font: 18px  'Abel', Arial, sans-serif;}
#teaser H3 A{ text-decoration:none;}
.teaser1 {float:left;width:340px;margin-left:60px;}
.teaser2 {float:right;width:340px;margin-right:60px;}
.teaser-centered {float:left;width:100%;}
#teaser .pic {height:155px;width:100%;padding-top:60px;}

.pics {float:left;text-align:left;margin-left:-13px;margin-bottom:20px;width:972px;}
.pics IMG {display:block;float:left;margin:0 0 13px 13px;}

.pics_sub {float:left;text-align:left;margin-left:-13px;margin-bottom:20px;width:972px;}
/*.pics_sub IMG {display:block;float:left;margin:0 0 13px 13px;} */
.pics_sub .pics_box {display:block;float:left;margin:0 0 13px 13px;text-align:center}

.googlemap {width:100%;text-align:left;margin-bottom:20px;}
.googlemap IFRAME {width:100%;}

#kontakt {float:left;width:100%;text-align:left;margin-bottom:20px; font-family: 'Abel', Arial, sans-serif;}
#kontakt TD {font-family: 'Abel', Arial, sans-serif;}
#kontakt P {line-height:1.4em;margin-bottom:10px;} 

.inhaber {float:left;width:230px;border-right:1px solid #000;height:100%;margin-right:60px;}
.address {float:left;width:330px;border-right:1px solid #000;margin-right:40px;}
.open{float:left;width:297px;}

#preise {float:left;font-size:28px;font-family: 'Abel', Arial, sans-serif;border-top:1px solid #000;margin-bottom:20px;}
#preise .item {float:left;border-bottom:1px solid #000;}
#preise DIV {display:table-cell;text-align:left;vertical-align:middle;height:106px;}            
.icons {width:360px;padding-left:10px;}               
.text {width:420px;}            
.preis {width:160px;padding-right:10px;text-align:right !important;}


/*# footer #########*/
#footer{
	border-bottom:1px solid #fff;
}
#footer .inside {
  position:relative;
	margin:0 auto;
	width: 980px;
	height: 58px;
  padding-top:36px;
} 

#logo {float:left;background: url(../logo_footer.png) no-repeat;
  width: 114px;
  height: 45px;
  margin-right:32px;
  background-size:100% auto;
}
#bglogo {
  position:absolute;
  left:0;
  bottom:-2px;
  background: url(../bg_logo.gif) no-repeat;
  width: 114px;
  height: 3px;
  
}

#meta {float:right;}
#extralogos {float:left;background: url(../logos_footer.png) no-repeat;
width: 142px;
height: 47px;
margin-top:0px;
background-size:100% auto;
}
#icons {float:left;margin-right:23px;} 
#icons A {padding-left:10px;}
#links{float:left;padding-top:5px;}    
#links A {float:left;color:#fff; font: 14px  'Abel', Arial, sans-serif;padding-right:20px;text-decoration:none;}


/* # END ############### */

            
/* TABLET portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { */
@media only screen and (min-width : 768px) and (max-width: 959px) {
/* Styles */    

  #header {/*! width:768px; */ }

  #header .inside{width:768px; }

  #navi-area UL {left: 23%;} 

  #slider { height:245px;/*! width:768px; */ }
  #slider .item {
  	height:245px;
    background-size: auto 245px;
  }
  .cycle-prev,.cycle-next { width:27px;height:47px;background-size:contain;}
  #schere {
    background-size:contain;
    width: 77px;
    height: 50px;
    bottom:-16px;
  }

  #container {/*! width:768px; */}  
  #content {width:720px;}
  
  .teaser1 {float:left;width:320px;margin-left:10px;}
  .teaser2 {float:right;width:320px;margin-right:10px;}
  
  .pics {text-align:left;margin-left:-15px;width:735px;}
  .pics IMG {margin:0 0 15px 15px;}
  
  .pics_sub {text-align:left;margin-left:-15px;width:735px;}
  .pics_sub .pics_box {margin:0 0 15px 15px;} 
  
  .googlemap IFRAME {width:100%;height:350px;}  

  .inhaber {float:left;width:330px;height:100%;margin-right:30px;margin-left:30px;}
  .address {float:left;width:320px;margin-right:0;border:0;}
  .open{float:left;width:330px;clear:both;border-right:1px solid #000;margin-left:30px;}
              
  .icons {width:240px;}               
  .text {width:310px;}            
  .preis {width:160px;}

  #footer .inside {
  	width: 768px;
  	height: 58px;
    padding-top:36px;
  }
  #logo { margin-left:20px; }
  #bglogo { left:15px;} 

}

/***** Phones  *****/
@media only screen and (max-width: 767px) {
/* Styles */     
  BODY {font-size: 15px; }
  
  #header {
  	width: 100%;
    background: #fff url(../bg_header2.gif) 0 -10px repeat-x;
    height: auto;
    border-bottom:3px solid #fff;    
  }
  #header .inside {
  	width: 100%;
    height: auto;    
  }
  #top {background: url(../logo2.png) no-repeat; width: 240px;height: 94px; background-size:80% auto; background-position: center center} 
  #timi {height:100px;width:auto;} 

  #navi-area {height:auto;background-color:#000;}
  #toggleMenu {display:block; height:39px; width:100%;text-align:center;}   
  #toggleMenu.active {  }
  .select{display:none;}
  
  #mainnavi {display:none}
  #navi-area UL {
   float: left;
   left: 0;
   width:100%;
   background-color:#000;
   margin-bottom:3px;
  }
  #navi-area LI {
   float: none;
   right: 0;
   width:100%;
   text-align:left;
   border-top:1px solid #5d5d5d;
  }   
  #navi-area A.mainnavi {
   display:block;
   text-align:left;
   border-top:1px solid #5d5d5d;
  } 
  #navi-area LI:first-child {border-top:1px solid #fff;}
  
  A.mainnavi:link,
  A.mainnavi:active,
  A.mainnavi:visited,
  A.mainnavi:hover {
   float:none;
   font: 18px  'Abel', Arial, sans-serif;
   height:38px;
   line-height:38px;
  }
  
  A.mainnavi:hover,#mainnavi LI.current A {text-decoration:underline;}  


  #slider { float:left;height:115px;width:100%; }
  #slider .item {	height:115px; background-size: cover;}
  .cycle-prev,.cycle-next  { top:25%;width:24px;height:48px;background-size:cover;}
  #schere {
    background-size:contain;
    width: 55px;
    height: 30px;
    left:45%; 
    bottom:-10px;
  }

  #container {float:left;width:100%;}  
  #content {float:left;width:100%;padding-top:23px;}   
  #content LI {padding:0 0 0 66px;line-height:1.5em;background-position: 0 6px;}
  
  H1 {font-size:25px;}
  H2 {font-size:21px;}
  H3,H4,H5,H6 {font-size:18px;}
  
  .big {font-size:24px;}
  .sep { background-image: url(../bg_block2.gif);}
                              
  #teaser P{ font-size: 15px;}
  #teaser H3 {font-size:18px; }
  .teaser1 {float:left;width:90%;margin-left:0;padding:0 5%;}
  .teaser2 {float:left;width:90%;margin-right:0;padding:0 5%;}
  .teaser-centered {float:left;width:100%;}
  #teaser .pic {height:auto;width:100%;padding-top:20px;}    
  #teaser .pic IMG {height:auto;width:230px;margin-bottom:10px;}  
  
  .pics {float:left;text-align:left;margin-left:3%;width:97%;}
  .pics IMG {margin:0 0 5px 5px;width:145px;height:100px;} 
        
  .pics_sub {float:left;text-align:left;margin-left:3%;width:97%;}
  .pics_sub IMG {width:145px;height:100px;} 
  .pics_sub .pics_box {margin:0 0 5px 5px;width:145px;height:120px;} 
		
  .googlemap {width:96%;padding:0 2%;}
  .googlemap IFRAME {width:100%;height:300px;} 

  #kontakt {float:left;width:90%;padding:0 5%;font-size:20px;} 
  #kontakt TD {font-size:20px;}
  .inhaber {float:left;width:100%;margin-right:0;border:0;}
  .address {float:left;width:100%;margin-right:0;border:0;}
  .open{float:left;width:100%;border:0;margin-top:25px;} 

  #preise {width:100%;}
  #preise .item {width:100%;clear:both;padding:10px 0;}
  #preise DIV {display:block;text-align:center;height:auto;font-size:22px;}            
  .icons {width:100%;padding-left:0;}               
  .text {width:100%;}            
  .preis {width:100%;padding-right:0;text-align:center !important;}

  #footer{float:left;border-bottom:0;width:100%; } 
  #logo { margin-left:10px; }
  #bglogo{display:none; } 
  #footer .inside {
  	margin:0;
  	text-align: left;
  	width: 100%;
    padding-top:22px;
     background: url(../bg_footer.gif) 0 77px no-repeat;
  } 
  #extralogos {float:right;background: url(../logos_footer.png) no-repeat;
  background-size:100% auto;
  width: 142px;
  height: 49px;
  /* margin:-7px 10px 35px 0; */
  margin:0px 10px 35px 0; 
  }     
  #meta {float:left;width:100%;}
  #icons {float:left;margin-right:23px;} 
  #icons A {padding-left:10px;}
  #links {float:right;padding-top:5px;}    
  #links A {padding-right:10px;}
  
  .block TD {
	font-size:15px;
	}
  
}


/* Stripe */
.stripe {
  clear: both;
  height: 300px;
  width: 100%;
  max-width: 1500px;
  overflow: visible;
  margin-bottom: 100px;
  margin: 0 auto !important;
  background-size: cover;
  background-position: left;
  display: flex;
  justify-content: center;
  
}

.stripe__textbox {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  

}

.stripe__heading {
  
}

.stripe__text {
  margin-top: 20px;
  margin-bottom: 20px;
}

.stripe__button {
  border-style: solid;
  border-width: 4px;
  background-color: transparent;
  font-size: inherit;
  font-family: inherit;
  border-color: #000;
  display: block;
  width: auto;
  padding: 10px 20px;
  cursor: pointer;
}

.nounderline {
  text-decoration: none ;

}

@media only screen and (max-width: 1000px) {


  .stripe__textbox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  
  }
}