@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);         
@import url(http://fonts.googleapis.com/css?family=Cinzel); 
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,900italic,900,700italic,700,400italic,300italic,300);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Raleway:400,500,600,700,800|Open+Sans:400,600,700,800);

@font-face { font-family: "opensans_reg";
	     src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
             font-weight: normal;
             font-style: normal; }

@font-face { font-family: "entypo";
	     src: url("../fonts/entypo.ttf") format("truetype");
             font-weight: normal;
             font-style: normal; }        

@font-face { font-family: "helvetica-light";
	     src: url("../fonts/HelveticaNeue-Light.otf") format("opentype");
             font-weight: normal;
             font-style: normal; }

@font-face { font-family: "helvetica-medium";
	     src: url("../fonts/HelveticaNeue-Medium.otf") format("opentype");
             font-weight: normal;
             font-style: normal; }

@font-face { font-family: "helvetica-condensed";
	     src: url("../fonts/HelveticaNeueLTPro-LtCn.otf") format("opentype");
             font-weight: normal;
             font-style: normal; }



/****** Weinrot dunkel:       #9f0123
        Weinrot hell:         #b4082d
        Nav hover hell:       #cd0a34
	Grau:    
        Body Text:            #786166  
        Heading Text Weinrot: #b3042a 
        Orange:               #f03e1c;       *****/





/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { 
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: '';
                                                         content: none; }
table { border-collapse: collapse;
        border-spacing: 0; }


/* END CSS RESET */


/* device width guides */

#px320, #px480, #px768, #px1024, #px1280, #px1366, #px1670 { position: absolute;
         top: 0;
         width: 1px;
         height: 100%;
         z-index: 9999; }

#px320 { left: 320px; background: green;  }
#px480 { left: 480px; background: orange;  } 
#px768 { left: 768px; background: yellow;  }
#px1024 { left: 1024px; background: red;  }
#px1280 { left: 1280px; background: cyan;  }  
#px1366 { left: 1366px; background: white;  } 
#px1670 { left: 1660px; background: blue;  } 

#px320h { position: absolute;
         top: 320px;
         left: 0;
         height: 1px;
         width: 100%;
         z-index: 9999;
         background: cyan;   } 

#px768h { position: absolute;
         top: 768px;
         left: 0;
         height: 1px;
         width: 100%;
         z-index: 9999;
         background: red;   } 





body, html { width: 100%; 
             height: 100%;
	     min-height: 100%;  }

body{ overflow: auto;
      overflow-x: hidden;
      width: 100%; 
      height: 100%;
      min-height: 100%; 
      margin: 0 auto;
      text-align: center; 
      font-weight: 300; 
      font-size: 13px; 
      font-size: 14px; 
      line-height: 18px;
      color: #786166;
      color: #323232;  
      letter-spacing: 1px;
      font-family: 'Source Sans Pro', helvetica-light, 'trebuchet ms', sans-serif; 
     -webkit-font-smoothing: antialiased;
     -webkit-backface-visibility:hidden;
      background: #fff;
      background: #f2f2f2;
      background-image: url(../images/bg_body4.jpg);
      background-repeat:  no-repeat;
      background-position:  center 100px; 
      background-position:  center 240px; }




h1, h2, h3, h4, h5 { 
		     font-weight: 300; 
                     letter-spacing: 1px;
                       padding: 0;
      		     margin: 0; 
		     color: #fff; }


h1 { font-size: 33px;
     line-height: 36px; 
     letter-spacing: 0; 
     text-transform: none; }


h2 { font-size: 26px;
          line-height: 40px; 
          font-weight: 300;
          font-family: merriweather, sans-serif; } 


#address h2,
div.content h2 { width: 62%; 
              margin: 0 19%;
            
             font-size: 33px; 
             line-height: 33px; 
             color: #b3042a;
             text-transform: uppercase;
             font-family: merriweather, sans-serif; }


div.content h2 { width: 100%; 
                 margin: 0 auto; }

#address h2:after,
#address h2:before,
div.content h2:after,
div.content h2:before { width: 40%;
                     content: "-";
                     color: transparent;
                     display: inline-block;
		     margin: 0 0 0 25px;	
		     height: 14px;
		     border-width: 2px;
			border-style: dotted;
			border-image-slice: 5 25 5 25; 
			border-image-width: 0px 0px 2px 0px; 
			border-image-outset: 0px 0px 0px 0px; 
			border-image-repeat: repeat repeat; 
			border-image-source: url(../images/dotted-border-single-red.png);  }



#address h2:before,
div.content h2:before { margin: 0 25px 0 0 ;}


#address h2.tel { margin: 0 auto;
                  margin-top: 15px;
                  margin-bottom: 10px;
                  text-transform: none; }


#address h2.tel:after,
#address h2.tel:before { width: auto;
                     content: " ";
                     color: transparent;
                     display: inline-block;
		     margin: 0 0 0 25px;	
		     height: 14px;
		     border-width: 0; 
                     }


div.content h2.w37:after,
div.content h2.w37:before { width: 37%;}

div.content h2.w32:after,
div.content h2.w32:before { width: 33%;}

div.content h2.w30:after,
div.content h2.w30:before { width: 32%;}

div.content h2.w27:after,
div.content h2.w27:before { width: 27%;}



a h2 { cursor: default;}


h3, h3 a { font-size: 21px; 
           line-height: 28px; 
     letter-spacing: 0;
     text-transform: none;
     font-weight: 300;
     font-style: italic;
     font-family: merriweather, sans-serif; 
     color: #fff; 
     border-bottom: 1px solid transparent; }

h3 a:hover { background: url(../images/black10.png) repeat;
             border-bottom: 1px solid #fff }




h4 { color: #fff;
     font-size: 16px; 
     line-height: 20px; 
     text-transform: none; 
     font-weight: 400; }

p { font-size: 14px;
    font-size: 16px;   } 



p b { font-weight: bold;
      font-weight: normal;
      color: #b3042a; } 


a:focus { outline: none; }
a.active { cursor: default; }


a,
form td input.button,
nav li,
.button { 
     color: #fff; 
     font-weight: 300;
     text-decoration: none; 
    -webkit-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -ms-transition: 0.4s ease-out;
    -o-transition: 0.4s ease-out;
     transition: 0.4s ease-out;
     white-space: nowrap;
     cursor: pointer;  }

p a { padding: 0; }

p a:hover,
p a:active,
p a.active { text-decoration: none; 
             color: #fff; 
             padding: 2px 6px;}


p a.red { padding: 0; 
                  color: #9f0123;
                  border-bottom: 1px solid transparent;}

p a.red:hover,
p a.red:active { text-decoration: none; 
                         color: #9f0123;
                         padding: 0;
                         border-bottom: 1px solid #b3042a; }



.sup { font-size: 10px;
       line-height: 10px;
       vertical-align: top; }


div.logo { margin-top: 0; 
  	   width: 100%;
           height: 240px;
	   text-align: center;
           background-color: #b3042a;
    	   background-image: url(../images/bg_header.jpg);
           background-position:  top center;
	   background-repeat:  no-repeat; 
           z-index: 9000;  }


div.logo h1 img { width: 355px;
                  height: 136px;
                  margin: 0 auto;
                  text-align: center; 
                  margin-top: 39px;   }

div.logo h2 {  font-size: 15px;
               letter-spacing: 1px;
               line-height: 18px; 
               margin-top: 7px; 
               font-family: merriweather, serif;
               text-transform: none;
               color:  #010000; 
               color: #b3042a;
               color: #fff;
               font-weight: 400; }


div.logo h2:after,
div.logo h2:before { width: 70px;
                     content: "-";
                     color: transparent;
                     display: inline-block;
		     margin: 0 0 0 10px;	
		     height: 8px;
		     border-bottom: 1px solid #fff; }

div.logo h2:before { margin: 0 10px 0 0 ;}



div.stripe { width: 100%;
             height: 3px;
             background: #9f0123;
             border-top: 1px solid  #fff;
             z-index: 9002;
             position: relative; }

div.stripe2 { width: 100%;
              height: 13px;
            
             background: transparent;
             border-top: 6px solid #cd0a34;
             z-index: 9002;
             position: relative; 
         background-image: url(../images/shadow_top.png);
         background-size: 100% auto;
	 background-position: center bottom;
	 background-repeat: no-repeat; }


nav { width: 100%;
      height: 40px;
      text-align: center;
      margin: 0 auto; 
      margin-top: 0; 
      background: #9f0123;
      background: #b4072d;
      background: #a30b2c;
      padding: 0; 
         position: relative;
         z-index: 9999; 
	border-width: 2px;
	border-style: dotted;
	border-image-slice: 5 25 5 25; 
	border-image-width: 2px 0px 0px 0px; 
	border-image-outset: 0px 0px 0px 0px; 
	border-image-repeat: repeat repeat; 
	border-image-source: url(../images/dotted-border-single-white.png); }

nav ul { width: 62%;
         height: 53px;   
         padding: 0; 
         margin: 0 auto; 
         text-align: justify; }


nav li { display: inline-block; 
	 list-style: none;
	 margin: 0;
         padding: 0;
         width: 12%;
         text-align: center;
         height: 20px;  }

nav li a,
nav li a:hover,
nav li a:active,
nav li a.active  { display: inline-block;
         font-size: 16px;
         font-weight: 300; 
         line-height: 39px;
         letter-spacing: 1px;
 	 width: 100%;
         text-align: center;
         height: 20px;  }


nav li a:hover,
nav li a:active,
nav li a.active { 
                background: #cd0a34;
                color: #fff;
                height: 42px; 
                cursor: pointer; }


nav li#line { padding-left: 100%; 
	      background: none;  }



img.tel-img { position: fixed;
              left: 0;
               top: 380px;
              z-index: 9999;
              width: 49px;
              height: 268px; }


#main { position: absolute;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100%; 
  max-width: 2400px;
  min-width: 320px; 
  min-height: 100%;  }


.home #wrap { width: 100%;
        height: auto; 
        min-height: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 0 0 20px 0;
        background-image: url(../images/shadow.png), url(../images/half-tone-dots.png), url(../images/large_dot.png);
	background-position: center bottom, center 260px, center 820px;
	background-repeat: no-repeat, no-repeat, repeat-x;  }



#top-content {  width: 100%;
            height: 325px;
            z-index: 9997;
            margin: 0 auto; 
            margin-top: 40px; 
            padding: 0;
            text-align: center;
            position: relative; 
            background: url(../images/white60.png) repeat;
            z-index: 100;
            border-bottom: 1px solid #fff }


#top-content img {  width: 661px;
                    width: 605px;
                     height: 622px;
           position: absolute;
           top: -80px;
           top: -90px;
           left: 18%;
             z-index: 9003;  }


#top-content h2 {  width: 30%;
                   margin: 0 0 0 50%; 
                   padding: 40px 0 0 0;
            text-align: left;
            font-size: 24px; 
            line-height: 34px;  
            text-transform: none;
            font-weight: 300;
            font-family: helvetica-light;
            color: #786166;  }



#top-content p { width: 19%;
                 margin: 0 0 0 52.5%; 
                 padding: 20px 0 0 0;
                 text-align: left; 
                 line-height: 20px; }


#content {  width: auto;
            height: auto;
            min-height: 200px;
            z-index: 9997;
            margin: 0 19%; 
            margin-top: 80px; 
            padding: 0;
            text-align: center;
            position: relative; }


div.box { width: 32%; 
          min-width: 180px;
          max-width: 410px;
          height: auto;
          height: 156px;
      
          padding: 0;
          margin: 0;
          text-align: center;   
          display: inline-block;          
          border: 2px solid #fff; 
        background-image: url(../images/half-tone-dots-top.png);
        background-position:  bottom right;
        background-repeat: no-repeat;
         -webkit-box-shadow: 0px -10px 10px -10px rgba(20,5,3,0.65);
	-moz-box-shadow: 0px -10px 10px -10px rgba(20,5,3,0.65);
	box-shadow: 0px -10px 10px -10px rgba(20,5,3,0.65); 
         position: relative;}


div.box:after { width: 100%;
                content: "";
		height: 20px;
		display: block;
		position: absolute;
		left: 0;
                margin: -15px 0 0  0;
		bottom: 0;
		background: #fff;
		background: #000;
                opacity: 0.15;  }


#content div.box1 { left: 0;
                    top: 0;  
                    background:  #b4082d; }


#content div.box2 { left: 34%;
                    top: 0;
                    background: #4a4a4a;  }

#content div.box3 { right: 0;
                    top: 0; 
                    background: #f03e1c;  }


#content div.box1,
#content div.box2,
#content div.box3 { position: absolute;
                    background-image: url(../images/half-tone-dots-top.png);
                    background-position:  bottom center;
                    background-repeat: no-repeat;           }



div.box h3 { width: 100%;
             min-width: 200px;
             max-width: 410px;
             text-align: left; 
              padding: 0;
             margin: 20px 10px 0 6px; 
             padding: 0 0 0 46px; 
             font-size: 21px; 
             line-height: 28px; 
             letter-spacing: 0;
            text-transform: none;
            font-weight: 300;
            font-style: italic;  }

div.box h3 a { border-bottom: 1px solid transparent; }

div.box h3 a:hover { background: none; }


div.box h3:before { width: 18px;
		    content: url(../images/large_dot.png) ;
		    height: 18px;
		    display: block;
		    position: absolute;
		    top: 22px;
                    left: 20px    }


div.box p { text-align: left;  
            padding: 10px 35px 10px 52px;
            color: #fff;
            font-size: 14px;  }


div.box p a { white-space: no-wrap;
              color: #fff;
              font-weight: 400 }


div.box p a:hover { 
                    border: 1px solid #fff }

div.box p a:after { content: url(../images/arrow_right3.png); 
                    width: 15px;
                    height: 15px;
                    position: relative;
                    top: 3px;
                    left: 2px;
                    padding: 0 4px;  }




/*********************** END HOMEPAGE ****************/


.banner,
.banner:hover { position: absolute;
                display: block;
                top: 75px;
                font-style: italic;
                font-family: merriweather, sans-serif; 
                left: -45px;
                width: 500px;
                height: 40px;
                background: #84031e;
                font-size: 15px;
                line-height: 42px;
                font-weight: 300;
                letter-spacing: 1px; 
                text-align: center; 
                padding: 0 65px 3px 0; 
             z-index: 9000;
             border: 1px solid #db1c47;
             -ms-transform: rotate(-32deg);
             -webkit-transform: rotate(-32deg);
             -khtml-transform: rotate(-32deg);
             -moz-transform: rotate(-32deg);
             transform: rotate(-32deg);
             -webkit-box-shadow: 0px -10px 10px -10px rgba(20,5,3,0.65);
	     -moz-box-shadow: 0px -10px 10px -10px rgba(20,5,3,0.65);
	      box-shadow: 0px -10px 10px -10px rgba(20,5,3,0.65);  }

.banner a {  color: #fff;
             border-bottom: none; }
.banner:hover a { color: #fff; }


.preise #wrap,
.leistungen #wrap,
.tipps #wrap,
.aktionen #wrap { width: 100%;
        height: auto; 
        min-height: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 0 0 20px 0;
       	background-position: center bottom, center 260px, center bottom;
	background-repeat: no-repeat, no-repeat, no-repeat; } 

.preise #wrap { background-image: url(../images/shadow.png), url(../images/half-tone-dots2.png), url(../images/dog-large-top.png); } 
.leistungen #wrap { background-image: url(../images/shadow.png), url(../images/half-tone-dots2.png), url(../images/dog-and-cat-large.png);} 
.tipps #wrap { background-image: url(../images/shadow.png), url(../images/half-tone-dots2.png), url(../images/welpen_01.png); } 
.aktionen #wrap {  background-image: url(../images/shadow.png), url(../images/half-tone-dots2.png), url(../images/fellissimo-welpe-und-katze_01.png); } 


.unter #content {  margin-top: 50px; 
                   margin-bottom: 310px;  }

.aktionen #content { margin-bottom: 370px;  }

.tipps #content { margin-bottom: 260px;  }

.fotos #content { margin-bottom: 50px;  }



div.content { width: 100%;
              min-width: 200px;
              height: auto;
              padding: 30px 0 30px 0;
              margin: 0 0 50px 0;
              text-align: center;
              background-image:  url(../images/white60.png); } 


.leistungen div.content { padding: 30px 0 5px 0; } 


div.content h3 { font-size: 21px; 
                 color: #b3042a;
                 font-style: normal;
                 font-family: 'Source Sans Pro', sans-serif; 
                 padding: 7px 0 12px 0;  }


div.content .rahmen h3 { padding: 7px 0 12px 55px;
                         position: relative; }


div.content .rahmen h3:before  {  height: 45px;
				width: 45px;	                
				display: block;
				position: absolute;
				top: 0; 
	                        left: 0;} 

div.content h3.foen:before { content: url(../images/foen.png);} 
div.content h3.wanne:before { content: url(../images/wanne.png);} 
div.content h3.schere:before { content: url(../images/schere.png);} 
div.content h3.car:before { content: url(../images/car.png);}
div.content h3.schnupper:before { content: url(../images/schnupper.png);}
div.content h3.kamm:before { content: url(../images/kamm.png);}
div.content h3.euro:before { content: url(../images/euro.png);}
div.content h3.ausruf:before { content: url(../images/ausruf.png);}
div.content h3.katze:before { content: url(../images/heading-icon-katze.png);}





div.content h4 { color: #b3042a; }



div.content .content-all {  width: 50%;
                            height: 100%;
                            height: auto;
                            min-height: 100%;
                            text-align: left; 
                            margin: 32px 70px 0 70px;
                            padding: 0 0 5px 0;  }


.fotos div.content .content-all { 
                            width: 90%;
                            height: 100%;
                            height: auto;
                            min-height: 100%;
                            text-align: center; 
                            margin: 0 5%;
                            margin-top: 32px;
                            padding: 0; }



.leistungen div.content .content-all { 
                            width: 90%;
                            height: 100%;
                            height: auto;
                            min-height: 100%;
                            text-align: left; 

                            margin: 32px 70px 0 70px;
                            padding: 0 0 5px 0; 

 			    -webkit-columns: 2 200px;
     			    -moz-columns: 2 200px;
          		     columns: 2 200px;
			    -webkit-column-gap: 3em;
     			    -moz-column-gap: 3em;
          		    column-gap: 3em; 
                            position: relative; }


div.content .content-all .rahmen { 
                                padding: 5px 30px 10px 10px; 
                                margin: 0 0 20px 0; 
                                margin: 0 0 7px 0; 
                                position: relative;
                 -webkit-column-break-inside:avoid; 
                 -moz-column-break-inside:avoid; 
                 -o-column-break-inside:avoid; 
                 -ms-column-break-inside:avoid; 
                 column-break-inside:avoid;  
                 display: inline-block;  }




div.content .content-all p { height: 100%;
              		       text-align: left; 
			       /*font-size: 16px*/
                              padding: 12px 20px 0 57px; }



div.content b,
div.content li b { font-weight: normal; 
                   color: #b3042a;
                   color: #9f0123;
                   white-space: nowrap }


div.content ul { font-size: 16px;
                 line-height: 18px;
                 padding: 0 0 12px 80px; }

div.content li { list-style-type: none;  
                 padding: 2px 0; 
                 padding-left: -25px; 
                 padding-left: 1px; 
                 position: relative;
                 -webkit-column-break-inside:avoid; 
                 -moz-column-break-inside:avoid; 
                 -o-column-break-inside:avoid; 
                 -ms-column-break-inside:avoid; 
                 column-break-inside:avoid;  
                 display: inline-block;
                 width: 100%; }



div.content li:before { content: url(../images/bullet3.png);
                   	  position: absolute; 
			  left: -26px;
                          top: 3px;
                          padding: 0; }


div.content li ul.sub-ul { font-size: 16px;
                           line-height: 18px;
                           padding: 5px 15px 10px 25px;  }

div.content li ul.sub-ul li { list-style-type: none;
                 padding-left: -25px; 
                 position: relative;
                 border-bottom: none; }

div.content li ul.sub-ul li:before {  content: url(../images/bullet-small2.png);
                   	  position: absolute; 
			  left: -20px;
                          top: 1px;
                          padding: 0; }



.content-all .content-right { float: right;
		      width: 60%; 
                      margin: 2px 0 0 0;
                      height: auto;
                      min-height: 450px;
                      padding: 20px 10px;
                      position: absolute;
                      top: 144px;
                      left: 61%; }


#content .content-right div.box { width: 100%; 
          min-width: 180px;
          max-width: 380px;
          height: auto;
          height: 140px;
          padding: 0;
          margin: 0;
          text-align: center;   
          display: inline-block;   }

#content .content-right div.box2 { top: 0;
                                   left: 10px;  }

#content .content-right div.box3 { top: 160px;
                                   left: 10px; }




#content .content-right div.box h3 { 
             margin: 20px 0 0 0; 
             padding: 0 0 0 52px; 
             font-size: 21px; 
             line-height: 28px; 
             font-family: merriweather, sans-serif; 
             font-style: italic;
             color: #fff; }


#content .content-right div.box p { padding: 7px 20px 15px 52px; }





/********************* FOOTER *****************/

#footer { margin: 0;
          width: 100%;
          z-index: 10; 
         
          height: 500px;
          height: auto;  
          padding: 0;
          position: relative;
          text-align: center;
          letter-spacing: 0;
           background-image: none; }


.preise #footer {  background-image: url(../images/dog-large-bottom.png);
                    background-position:  center top;
                    background-repeat: no-repeat;  }


.leistungen #footer {  background-image: url(../images/dog-and-cat-large-bottom.png);
                    background-position:  center top;
                    background-repeat: no-repeat; }


.tipps #footer {  background-image: url(../images/welpen_02.png);
                    background-position:  center top;
                    background-repeat: no-repeat; }

.aktionen #footer {  background-image: url(../images/labrador_02.png);
                    background-image: url(../images/fellissimo-welpe-und-katze_02.png);
                    background-position:  center top;
                    background-repeat: no-repeat; }


#footer a.active { cursor: default; }



#address { width: 100%;
           height: auto;
           padding: 40px 0 35px 0; 
	background-image: url(../images/shadow.png), url(../images/bg_light-spot2.png), url(../images/white75.png);
	background-position: bottom center, top center, top center;
	background-repeat: no-repeat, no-repeat, repeat; }



#address h3 { font-family: 'Source Sans Pro', sans-serif;
              color: #786166; 
              font-size: 20px; 
              line-height: 18px; 
              padding: 12px 0;
              text-transform: none;
              font-style: normal; 
              color: #786166; }


#address p { font-size: 16px; 
            line-height: 24px;
            color: #786166; 
            font-family: 'Source Sans Pro', 'Open Sans', 'trebuchet ms', sans-serif;  }

       

#address #icons { width: 90px;
                  height: 40px;
                  margin: 0 auto;
                  text-align: center; }



#icons a.icon { border-bottom: none;
                text-decoration: none;
		padding: 0;
                background: #b4082d;
                border-radius: 50%;
                margin: 0;
                display: block;
                width: 40px;
                height: 40px; 
float: left;}



#icons a.icon:first-child { margin: 0 10px 0 0; }


#icons a.icon:hover {  background: #cd0a34; }


/************************ FORM ******************/


#form { width: 100%;
        min-width: 700px;
        height: auto;
        margin: 0;
        padding: 25px 0 35px 0;
        background-color: #b4082d;
border-width: 2px;
border-style: dotted;
border-image-slice: 5 25 5 25; 
border-image-width: 2px 0px 0px 0px; 
border-image-outset: 0px 0px 0px 0px; 
border-image-repeat: repeat repeat; 
border-image-source: url(../images/dotted-border-single-white.png); }






form { width: 700px;
       padding: 0;
       margin: 0 auto;
       margin-top: 20px;
       text-align: center; }

form table { width: 700px;
             margin: 0 auto;
             text-align: center; }

form td { padding: 0;
          color: #fff;
          font-family: 'trebuchet ms', sans-serif;
     	  font-size: 13px;  
	  line-height: 16px;
          text-align: left;
          vertical-align: middle;  }

form td input, form td textarea
                        { background: none;
                          height: 17px;
                          padding: 7px 11px; 
                          border: 1px solid #fff;
                        margin: 5px 0 5px 0;
     			font-family: 'trebuchet ms', sans-serif;
     			font-size: 13px;
                        font-weight: 300; 
	                line-height: 19px;
        		line-height: 10px;
     			letter-spacing: 1px;
                          color: #fff; }


::-webkit-input-placeholder {  color: #fff;line-height: 19px; }
input:-moz-placeholder {  color: #fff; line-height: 19px;}
input::-moz-placeholder {  color: #fff; line-height: 19px;}
input:-ms-input-placeholder {  color: #fff; line-height: 19px; }
input[placeholder], [placeholder], *[placeholder] {color: #fff; line-height: 19px;}


form td input { width: 190px; }

form td textarea { width: 680px;
		   height: 120px;
                   padding: 9px 10px; 
                   overflow: scroll; 
                   overflow-y: hidden; 
                   overflow-x: hidden;
                   margin-bottom: 5px;
                   line-height: 16px; }


form td input.button { width: 482px;
		       height: 32px; 
                       border: 1px solid #fff;
                       color: #fff; 
                       cursor: pointer; 
                       padding: 7px 0;  
		       text-align: center;	
                       text-transform: uppercase;
                       letter-spacing: 1px;
                       font-weight: bold; 
			background: #870622; }

form td input.button:hover,
form td input.button:active { background: #a62e0c; 
                              background: none;
                              padding: 7px 0;  }


form span.error { padding: 0 0 3px 0; 
                  padding: 3px;
                  color: #000;
                  color: #870622;
                  font-size: 13px;
                  white-space: nowrap;
                  display: none; 
                  font-weight: 400;
                  background: #fff    }


form td.checkbox { width: 223px }

form td.checkbox span { height: 20px; 
                        line-height: 14px;
                        width: 140px;
                        padding: 0;
                        display: inline-block;
                        float: right; }

form td p { font-size: 14px; }


input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
	cursor: pointer;
	font-size: 14px; }


[id^="checkbox-9-"] + label {
	background: none;
    	padding: 9px;
	display: inline-block;
	position: relative;
	margin-right: 10px;
	width: 45px;
	/*box-shadow: 0 2px 1px rgba(0,0,0,0.6);*/
	height: 10px; 
        border: 1px solid #fff}

[id^="checkbox-9-"] + label:before {
	content: ' ';
	position: absolute;
        background: #870622;
	top: 0;
	z-index: 99999;
	left: -1px;
	width: 21px;
	height: 30px;
	/*box-shadow: 0 0 1px rgba(0,0,0,0.6), inset 0 -18px 15px -10px rgba(0,0,0,0.05); */}

[id^="checkbox-9-"]+ label:after {
	content: 'nein';
	position: absolute;
	top: 5px;
	left: 30px;
	font-size: 14px;
        color: #6f3820; 
 color: #fff;}

[id^="checkbox-9-"]:checked + label:after {
	content: 'ja';
        top: 0;
	left: 0;
	padding-top: 5px;
	padding-left: 12px;
        color: #e74111;
        color: #fff;

        /*background: #fff;*/
	height: 23px; 
        width: 32px; }

[id^="checkbox-9-"]:checked + label:before {
	content: ' ';
	position: absolute;
	z-index: 99999;
	left: 44px; }

#checkbox-9-3 + label:before {
	width: 23px;
	height: 28px;
	top: 2px;
	left: 2px; 
	top: 0;
	left: 0;}

#checkbox-9-3:checked + label:before { 	left: 40px; }


#checkbox-9-3 + label:after, #checkbox-9-3 + label:before, #checkbox label {
	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in; }

/************************ END FORM ******************/


#post-footer { margin: 0;
               width: 100%;
               border-top: 1px solid #cdcac3;
               border-top: 1px solid #fff;
	       background: #fff;
	       background: #fdfdfd;
	       background-image:  url(../images/shadow_top.png) ;
	       background-position: top center;
	       background-repeat:  no-repeat; 
           
               height: auto; 
               padding: 30px 0 30px 0; 
               font-size: 12px; }

#post-footer .address { word-spacing: 2px; }

#post-footer a {  color: #494949;
                  border-bottom: none;   }

#post-footer a:hover {  color: #494949;
                  border-bottom: 1px solid #494949;   }

#post-footer img { width: 186px;
                   height: 71px;
                   padding: 0 0 10px 0;  }


.tooltipsy { padding: 6px 10px;
             width: 190px;
             height: 20px;
             background-color: #b4082d;
             text-shadow: none; 
             font-size: 14px;
             line-height: 20px;
             color: #fff;
             white-space: nowrap;  }





/*Opera Fix thanks to Maleika (Kohoutec)*/
body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;/* thank you Erik J - negate effect of float*/ }



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.ui-page { -webkit-backface-visibility: hidden; }


.clear { clear: both; } 
.large-only { display: none; }
.no-large { display: none; }
.mobile-only { display: none; }


@media all and (max-width: 1670px) {


.small { display: inline; }

nav ul { width: 72%; }


#top-content img { left: 13%; }


#top-content h2 {  width: 40%;
                   margin: 0 0 0 50%;  }

#top-content p { width: 25%;
                 margin: 0 0 0 54%;  }

#content { margin: 0 15%; 
           margin-top: 70px; }


}




@media all and (max-width: 1366px) {

.small { display: inline; }



nav ul { width: 80%; }


#top-content img { left: 10%; }

#top-content h2 {  width: 40%;
                   margin: 0 0 0 51%; }

#top-content p { width: 25%;
                 margin: 0 0 0 55%;   }


#content { margin: 0 7%; 
           margin-top: 70px; }


div.box p { padding: 15px 25px; }


#address h2 { width: 80%; 
              margin: 0 10%; }


#address h2:after,
#address h2:before { width: 40%; }


div.content h2 { width: 90%; 
                 margin: 0 5%; }

div.content h2.w37:after,
div.content h2.w37:before { width: 37%;}

div.content h2.w32:after,
div.content h2.w32:before { width: 35%;}

div.content h2.w30:after,
div.content h2.w30:before { width: 32%;}

div.content h2.w27:after,
div.content h2.w27:before { width: 27%;}


.leistungen div.content .content-all {  -webkit-column-gap: 1em;
 	     		    	        -moz-column-gap: 1em;
        	         		column-gap: 1em;  }



}




@media all and (max-width: 1281px) {


img.tel-img { top: 330px; }


#address h2 { width: 80%; 
              margin: 0 10%; }

#address h2:after,
#address h2:before { width: 37%; }


div.content h2 { font-size: 28px; }

#content { margin: 0 3%; 
           margin-top: 70px; }


#top-content img {  left: 5%; }

#top-content h2 {  width: 50%;
                   margin: 0 0 0 51%; }

#top-content p { width: 36%;
                 margin: 0 0 0 55%; }

div.content { width: 90%;
              padding: 30px 0 30px 0;
              margin: 0 5%; 
              margin-bottom: 50px;} 


div.content .content-all {  width: 45%;
                            margin: 46px 70px 0 70px;
                            padding: 0 0 5px 0;  }

.content-all .content-right { 
		      width: 40%; 
                      top: 158px;
                      left: 56%; }


#content .content-right div.box { max-width: 350px;
                                  height: 140px;  }

div.box h3,
h3 a {  font-size: 19px; }

#content .content-right div.box p {  padding: 7px 20px 15px 52px; }


}



@media all and (max-width: 1150px) {


#content { margin: 0 3%; 
           margin-top: 50px; }

#top-content img {  left: 0; }

#top-content h2 {  width: 50%;
                   margin: 0 0 0 51%; 
                   padding: 50px 0 0 0;
                   font-size: 22px; 
                   line-height: 34px;   }

#top-content p { width: 36%;
                 margin: 0 0 0 55%; 
                 line-height: 20px; }


div.content h2.w37:after,
div.content h2.w37:before { width: 32%;}

div.content h2.w32:after,
div.content h2.w32:before { width: 30%;}

div.content h2.w30:after,
div.content h2.w30:before { width: 30%;}

div.content h2.w27:after,
div.content h2.w27:before { width: 25%;}


}





@media all and (max-width: 1024px)  {

.no-small,
.banner { display: none; }

body {  background-position:  center 180px; }

div.logo { height: 180px; }

div.logo h1 img { width: 268px;
                  height: 105px;
                  margin-top: 25px;  }

div.logo h2 {  font-size: 14px; }

div.logo h2:after,
div.logo h2:before { width: 35px; }

nav ul { width: 90%; }

div.stripe2 { height: 7px; }

.home #wrap,
.preise #wrap,
.leistungen #wrap,
.tipps #wrap,
.aktionen #wrap { background-position: center bottom, center 210px, center bottom; } 


#top-content img {  left: 0; }

#top-content h2 {  width: 70%;
                   margin: 0 0 0 60%; 
                   padding: 50px 0 0 0;
                   font-size: 20px;  
                   line-height: 26px;   }

#top-content p { width: 32%;
                 margin: 0 0 0 62%;
                 font-size: 12px; 
                 line-height: 18px; }

#content { margin: 0 1%; 
           margin-top: 40px; }

.unter #content {  margin-top: 20px; }


div.content .content-all {  width: 45%;
                            margin: 46px 70px 0 70px;
                            padding: 0 0 5px 0;  }

.content-all .content-right { width: 35%; 
                              top: 158px;
                              left: 54%; }


#content .content-right div.box { max-width: 350px;
                                  height: 140px;  }


div.box h3,
#content .content-right div.box h3,
h3 a {  font-size: 18px; }

#content .content-right div.box p {  padding: 7px 10px 15px 52px; }


form { width: 700px;
       padding: 0;
       margin: 0 auto;
       margin-top: 10px;
       text-align: center; }
     


}



@media all and (max-width: 768px)  {

.no-mobile, 
div.logo h2,
.unter #content div.box { display: none; }


body {  background-position:  center 150px; }


div.logo { height: 140px; }

div.logo h1 img { width: 230px;
                  height: 90px;
                  margin-top: 25px;  }

img.tel-img { top: 210px; }

nav ul { width: 98%; }

nav ul li a { font-size: 12px ; }


div.content h2,
#address h2 {  font-size: 22px;  
                  line-height: 26px; }


.home #wrap { background-position: center bottom, center 180px, center 820px; }

.preise #wrap,
.leistungen #wrap,
.tipps #wrap,
.aktionen #wrap { 
background-image: url(../images/shadow.png), url(../images/half-tone-dots2.png); 
background-position: center bottom, center 180px; } 

#top-content {  height: 270px; }

#top-content img {  left: 5%;
                    top: -50px;
                     width: 450px;
                     height: 463px; 
                     width: 50%;
                     height: auto; }

#top-content h2 {  width: 70%;
                   margin: 0 0 0 50%; 
                   padding: 20px 0 0 0;
                   font-size: 20px;  
                   line-height: 26px;   }

#top-content p { width: 38%;
                 margin: 0 0 0 54%;
                 font-size: 12px; 
                 line-height: 18px; }


div.content {  background-image:  none;
               padding-bottom: 0;
               margin-bottom: 0 } 

#content { margin: 0 2%; 
           margin-top: 30px; }


.unter #content { margin-bottom: 10px;  }


div.content .content-all {  width: 85%;
                            margin: 30px 70px 0 50px;
                            padding: 0;  }

.leistungen div.content .content-all { margin: 30px 70px 0 50px;
          			    -webkit-columns: 1;
     	 			    -moz-columns: 1;
          			     columns: 1; }





div.box p { text-align: left;  
            padding: 10px 10px;
            font-size: 11px; }


.preise #footer,
.leistungen #footer,
.tipps #footer,
.aktionen #footer {  background-image: none; }


#address h2 { width: 80%; 
              margin: 0 10%; }

#address h2:after,
#address h2:before { width: 30%; }


#form { display: none }


}


@media all and (max-width: 768px) and (orientation: portrait) {


img.tel-img { display: none; }

.mobile-only { display: block;
               height: 12px;
               padding: 0; }

div.logo h1 img { margin-top: 25px;  }

nav { width: 100%;
      height: 210px;
      padding: 2px 0 0 0; }

nav ul { width: 100%;
         height: 210px;   
         padding: 0; 
	 text-align: center;
         margin: 0 auto; }

nav li { display: block; 
          width: 100%;
	 list-style: none;
	 margin: 0;
	 padding: 0;
   
         font-size: 12px;
         line-height: 18px;
         text-align: center; 
         border-bottom: 1px solid #fff; 
         padding: 4px 0; 
         width: 100%;
         height: 20px; }

nav li:last-child  { border-bottom: 1px solid transparent;
                     padding-bottom: 8px;  }



nav li a,
nav li a:hover,
nav li a:active,
nav li a.active  { display: block;
         font-size: 12px;
         font-weight: 300; 
         line-height: 16px;
         letter-spacing: 1px;
 	 width: 100%;
         text-align: center;
         height: 18px; 
         padding: 3px 0;  }


nav li a:hover,
nav li a:active,
nav li a.active { 
                background: #cd0a34;
                color: #fff;
                height: 18px; 
                padding: 3px 0; 
                cursor: pointer; }



nav #line { display: none; }


#content { margin: 0 2%; 
           margin-top: 20px; }


#content div.box { width: 80%; 
          min-width: 200px;
          max-width: 700px;
          height: auto;
          min-height: 80px;
          padding: 0 0 15px 0;
          margin: 0 10% 1% 10%;
          text-align: center; 
          background-position: right bottom;}

#content div.box1,
#content div.box2,
#content div.box3 { position: relative;
                    left: 0;
                    top: 0; }

div.box p { text-align: left;  
            padding: 8px 30px 8px 52px; }



div.content .content-left,
div.content div.box {       float: none; 
                            width: 88%;
                            margin: 0 6%; }


div.content .content-left { margin-top: 20px;}


}


@media all and (max-width: 650px){



}


@media all and (max-width: 480px)  {

#top-content img,
.stripe2,
.no-480   {  display: none; }


div.logo { height: 100px;  }

div.logo h1 img { width: 179px;
                  height: 70px;
                  margin-top: 15px; }

#top-content { height: 170px;
               margin-top: 20px; }

#top-content h2 {  width: 90%;
                   margin: 0 0 0 13%; 
                   padding: 0 0 0 0;
                   font-size: 20px;  
                   line-height: 22px;   }

#top-content p { width: 80%;
                 margin: 0 0 0 12%;
                 font-size: 12px; 
                 line-height: 16px; }



div.content h2:after,
div.content h2:before {  content: none;  }


}



@media all and (max-width: 480px) and (orientation: portrait)  {

#top-content img,
.no-480  {  display: none; }



#top-content h2 {  width: 90%;
                   margin: 0 5%; 
                   text-align: center;
                   font-size: 18px;  
                   line-height: 20px;   }

#top-content p {  width: 80%;
                   margin: 0 10%; 
                   text-align: center;  }


#content { margin: 0 2%; 
           margin-top: 40px; }


}









@media all and (min-width: 1600px) {

.no-small { display: inline; }

}



@media all and (min-width: 1919px) {

.large-only { display: inherit; }

}