/* RESET CSS */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video 
	{ 
	margin: 0; 
	padding: 0; 
	border: 0; 
	outline: 0; 
	font-size: 100%; 
	vertical-align: baseline; 
	background: transparent; 
	}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display: block; 
	}



/* END RESET CSS */
body { 
	line-height: 1; 
	font-size: 100.01%; 
	}

a { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	font-size: 100%; 
	vertical-align: baseline; 
	background: transparent; 
	}

input, select { 
	vertical-align: middle; 
	}

h1, h2, h3 { 
	font-weight: normal; /* text-rendering: optimizeLegibility; */ 
	}

ul { 
	list-style-type: none; margin: 0 0 10px;
}

li {
	list-style-position: outside;
	margin-bottom: 10px;
}
/* ===========================================
	NON-SEMANTIC HELPER CLASSES
============================================== */
/* For image replacement */

/* Clearfix */
.clearfix:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
	}

.clearfix { 
	display: inline-block; 
	}

* html .clearfix { 
	height: 1%; 
	}

.clearfix { d
	isplay: block; 
	}

/* Selections */
::-moz-selection { 
	color: #eee; 
	background: rgba(71,81,96,0.3); 
	}

::selection { 
	color: #eee; 
	background: rgba(71,81,96, 0.3); 
	}

/* Tap highlights */
* { -webkit-tap-highlight-color: rgba(11, 140, 184, 0.6); }


/* ===========================================
	BASE STYLES
============================================== */
#skip { 
	display: none; 
	}

html { 
	height: 100%; 
	}

body { 
	background: #fffef7; 
	text-align: center; 
	font: normal 14px/22px Helvetica, Arial, sans-serif;	
	color: #747474; 
	}



#wrapper { 
	*position: relative; 
	margin: 0 auto; 
	width: 940px; 
	}
	
section { 
	text-align: left; 
	position: relative; 
	overflow: hidden; 
	width: 940px; 
	float: left; 
	_background: transparent none; 
	_border-top: 1px solid #444; 
	}

/* ===========================================
	NAVIGATION
============================================== */
#nav { 
	font: normal 16px/22px Times, serif;
	font-style: italic;
	width: 940px; 
	*width: 700px; 
	position: absolute; 
	z-index: 999; 
	top: 150px; 
	*left: 200px; 
	background-color:#fffef7;
	border-bottom: 1px solid #000;
}
	
#nav ul { 
	text-align: center; 
	display: inline-block; 
	/* added by viljami */ 
	*float: left; 
	margin: 0 auto; 
	height: 35px;
	padding-top: 6px;
}
#nav li { 
	float: left; 
	}
	
#nav a { 
	text-decoration: none; 
	color: #747474; 
	padding: 5px 22px 0; 
	height: 30px; 
	display: block; 
	-webkit-font-smoothing: antialiased; 
	}
#nav a:hover { 
	height: 30px;
	padding-bottom: 6px;
	color: #000; 
	border-bottom: 1px solid #d95d0b;
}
	
#nav a:active { 
	color: #999; 
	}
#nav a:focus { 
	outline: 0; 
	}
#nav a.selected { 
	color: #d95d0b;
	height: 30px; 
	-webkit-transition: none !important; 
	-moz-transition: none !important; 
	transition: none !important;
	padding: 5px 22px 6px;
	border-bottom: 1px solid #d95d0b;
}

#nav.active ul {  }

#nav.active { 
	*position: absolute !important; 
	*top: 150px !important; 
	}

/* ===========================================
	LINKS
============================================== */
a { 
	text-decoration: none; 
	position: relative; 
	color: #d95d0b; 
	}

a:hover { 
	color: #d95d0b; 
	border-bottom: 1px solid #d95d0b;
}
}


a:active { 
	opacity: 0.7; 
	filter: alpha(opacity=70); 
	-webkit-transition: none !important; 
	-moz-transition: none !important; 
	transition: none !important; 
	}

em { font-style: normal; }
.hidden { display: none; }


#banner {
	height: 401px; 
	width: 940px;
	margin-bottom: 10px;
	background: url(../imgs/s_banner1.png) no-repeat scroll 0 0;
}

	
h4 { 
	font: normal 14px/22px Times, serif;
	font-style: italic;
	color: #d95d0b;
	border-bottom: 1px solid #d95d0b;
	width: 40%;
	text-align: center;
	margin: 0 auto 22px;
}

h5 { 
	font: normal 26px/26px Times, serif; 
	font-style: italic;
	font-weight: normal;
	margin-bottom: 22px;
	color: #000;
}	

h6 { 
	font: normal 16px/22px Helvetica, Arial, sans-serif;
	color: #7f7f7f;
}	
	
h7 { 
	color: #000; 
	font: normal 20px/34px Helvetica, Arial, sans-serif; 
	}



.abbinder {
	color: #000; 
	font: normal 60px/30px "TeXGyreBonumRegular", Helvetica, Arial, sans-serif; 
	margin-top: 60px;
	text-align: center;
}

.col1 em { 
	width: 100%;
	float: left; 
	color: #555; 
	font: normal 28px/30px "CantarellRegular", Helvetica, Arial, sans-serif; 
	margin-bottom: 30px;
	}	

.col1 p {
	font: normal 14px/20px Helvetica, Arial, sans-serif; 
	color: #747474; 
}

#uebermich .col1 p, #homoeopathie .col1 p  { 
	width: 80%;
	font: normal 18px/20px "Times", serif; 
	font-style: italic;
}
	
#informationen .col1 p, #kontakt .col1 p { 
	width: 280px;
	margin-bottom: 20px;
	}


/* ===========================================
	HOME
============================================== */
#home { 
	padding: 0; 
	width: 940px; 
	height: 206px; 
	text-align: center; 
	}

#container { 
	padding: 0; 
	width: 940px; 
	}	


#homoeopathie h2, #informationen h2, #uebermich h2, #aktuelles h2, #kontakt h2 { 
	margin: 30px auto 0; 
	letter-spacing: 0; 
	font: 40px/40px Times, serif; 
	color: #000;
	font-style: italic;
	text-align: center;
	padding-bottom: 45px;
	border-bottom: 1px solid #000;
	width: 360px;
}




/* ===========================================
	HOMÖOPATHIE
============================================== */
#homoeopathie {
	border-top: 1px solid #000;
	padding-top: 145px;
	padding-bottom: 145px;
}
	
#homoeopathie .col { 
	width: 280px;
	margin-right: 10px;
	margin-top: 45px;
	float: left;
	}	


#homoeopathie .col2 { 
	width: 360px; 
	margin-top: 45px;
	float: left;
}

#homoeopathie .col2 p { 
	margin-bottom: 30px;
}


#homoeopathie div .img {
	margin-top: 30px;
}


#homoeopathie div .bu {
	margin-bottom: 30px;
	color: #555; 
	font: normal 14px/16px "Times", serif; 
	font-style: italic;
	text-align: center;
	padding-right: 10px;
	padding-left: 10px;
}



/* ===========================================
	INFORMATIONEN
============================================== */
#informationen {
	border-top: 1px solid #000;
	padding-top: 145px;
	padding-bottom: 145px;
}
	
#informationen .col { 
	width: 280px;
	margin-right: 10px;
	margin-top: 75px;
	float: left;
	}	

#informationen .col2 { 
	width: 360px; 
	margin-top: 45px;
}

#informationen div .img {
	margin-top: 30px;
	margin-bottom: 60px;
}

#informationen div .bu {
	margin-bottom: 30px;
	color: #555; 
	font: normal 14px/16px "TeXGyreScholaItalic", Time, serif; 
	text-align: center;
	padding-right: 10px;
	padding-left: 10px;
}


/* ===========================================
	ÜBER MICH
============================================== */
#uebermich {
	border-top: 1px solid #000;
	padding-top: 145px;
	padding-bottom: 145px;
}
	
#uebermich .col { 
	width: 280px;
	margin-right: 10px;
	margin-top: 90px;
	float: left;
	}		

#uebermich .col2 { 
	width: 360px; 
	margin-top: 45px;
}	


#uebermich .col2 li { 
	font: normal 16px/22px Helvetica, Arial, sans-serif;
	margin-bottom: 10px;
}



#uebermich div .img {
	margin-top: 30px;
	margin-bottom: 60px;
}

#uebermich div .bu {
	margin-bottom: 30px;
	color: #555; 
	font: normal 14px/16px "TeXGyreScholaItalic", Time, serif; 
	text-align: center;
	padding-right: 10px;
	padding-left: 10px;
}




/* ===========================================
	AKTUELLES
============================================== */
#aktuelles {
	border-top: 1px solid #000;
	padding-top: 145px;
	padding-bottom: 45px;
}

#aktuelles h3 {
	font: normal 18px/22px Times, serif;
	font-style: italic;
	margin-top: 30px;
	margin-bottom: 45px;
	text-align: center; 
}
	
#aktuelles .col { 
	width: 280px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 10px;
	margin-bottom: 60px;
	float: left;
	text-align: center;
	height: 360px;
	}	
	
#aktuelles .col p { 
	font: normal 13px/20px Helvetica, Arial, sans-serif;
	color: #5e5e5e;
}	

#aktuelles div .link {
	margin-top: 20px;
	font: normal 12px/14px Helvetica, Arial, sans-serif;
}

#aktuelles div .date {
	margin-top: 20px;
	font: normal 14px/16px Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #000;
}
#aktuelles div .newdate {
	margin-top: 10px;
	font: normal 12px/14px Helvetica, Arial, sans-serif;
	color: #7f7f7f; 
}


/* ===========================================
	KONTAKT
============================================== */
#kontakt {
	border-top: 1px solid #000;
	padding-top: 145px;
	padding-bottom: 145px;
}
	
#kontakt .col { 
	width: 280px;
	margin-top: 45px;
	float: left;
	}	
	
#kontakt .col2 { 
	width: 600px; 
	margin-top: 45px;
}	

#kontakt .abbinder {
	text-align: left;
	padding-left: 180px;
}

#map_canvas_custom_4515 {
	width: 660px;
	height: 360px;
}


/* ===========================================
	FOOTER
============================================== */
#footer { 
	font: 11px/20px Helvetica, Arial, sans-serif; 
	width: 100%; 
	color: #666; 
	padding: 0 0 100px; 
	margin: 0 auto; 
	text-align: center;
	-webkit-font-smoothing: antialiased; }




/* ===========================================
	DEVICE ADAPTATION
============================================== */
/* 1000px and under */
@media screen and (max-width: 1000px) {

#banner{
	width: 100%;
	margin-bottom: 10px; 
	height: 401px; 
}

#nav {width: 100%;}
#wrapper section {width: 100%;}

}


/* 970px and under */
@media screen and (max-width: 970px) { 




#aktuelles .col { 
	margin-left: 22%;
	margin-right: 25%;
	height: auto;
	}

#homoeopathie h2, #informationen h2, #uebermich h2, #kontakt h2 { 
	margin-left: 290px; }
	
#aktuelles .col { 
	width: 50%;
	height: auto;
	}
	
#container { 
	padding: 0; 
	padding-left: 20px;
	width: 840px; 
	}	
	
} 


 
/* 840px and under */
@media screen and (max-width: 840px) { 

#aktuelles .col { 
	margin-left: 20%;
	margin-right: 25%;
	height: auto;
	}

#container { 
	padding: 0; 
	padding-left: 20px;
	width: 740px;
}	


}

/* 740px and under */
@media screen and (max-width: 740px) {

#wrapper {width: 600px; }	
section { width: 600px; }

#aktuelles .col { 
	width: 50%;
	height: auto;
	}

#banner {
	height: 401px; 
	width: 740px;
	margin-bottom: 10px;
	background: url(../imgs/s_banner1.png) no-repeat scroll 0 0;
}

#home { 
	padding: 0; 
	width: 740px; 
	height: 60px; 
	text-align: center; 
	}

#container { 
	padding: 0; 
	padding-left: 10px;
	width: 600px; 
	}	

#homoeopathie h2, #informationen h2, #uebermich h2, #aktuelles h2, #kontakt h2 { 
	margin-left: auto; margin-right: auto; padding-left: -10px;
	width: 60%; }

#homoeopathie .col, #informationen .col, #uebermich .col, #kontakt .col { 
	width: 220px;
	margin-left: 10px;
}	
#homoeopathie .col2, #informationen .col2, #uebermich .col2, #kontakt .col2 { 
	width: 87%; 
	margin-left: 10px;
	float: left;}

#skip { 
	display: block; 
	margin-top: 20px;
	background: url(../imgs/button.svg) no-repeat scroll 0 0;
	height: 39px;
	width: 146px;
	margin-left: 20px;
}



body { min-width: 320px; }
  
  
#nav, #nav.active { 
  	position: relative !important; 
  	top: auto !important; 
  	left: auto; 
  	float: left; 
  	right: auto; 
  	text-align: left; 
  	width: 71%;
	margin: 0 7% 10% 0;
  	border-bottom: 0px ; 
}
  #nav ul { background: transparent none; }
  #nav li { float: left; width: 100%; min-width: 260px; text-align: left; margin: 0 !important; }
  
  #nav li a, #nav li a.selected { 
  	-webkit-transition: none !important; 
  	-moz-transition: none !important; 
  	transition: none !important; 
  	background: transparent url('../imgs/arrow.png') no-repeat right top; 
  	border-bottom: 1px solid rgba(0, 0, 0, 0.3); 
  	border-top: 1px solid rgba(255, 255, 255, 0.1); 
  	padding-left: 20px !important; 
  	padding-bottom: 0 !important; 
  	height: 28px !important; }
  	
  	
  #nav li a:hover { 
  	background: rgba(128, 128, 128, 0.1) url('../imgs/arrow.png') no-repeat right top; 
  	}

	
}



/* 600px and under */
@media screen and (max-width: 600px) { 

#wrapper {width: 480px; }	
section { width: 480px; }

#banner {
	height: 401px; 
	width: 600px;
	margin-bottom: 10px;
	background: url(../imgs/s_banner2.png) no-repeat scroll 0 0;
}

#aktuelles .col { 
	width: 50%;
	height: auto;
	}

#home { 
	padding: 0; 
	width: 600px; 
	height: 60px; 
	text-align: center; 
	}


#map_canvas_custom_4515 {
	width: 480px;
	height: 360px;
}



#skip { 
	display: block; 
	margin-top: 20px;
	background: url(../imgs/button.svg) no-repeat scroll 0 0;
	height: 39px;
	width: 146px;
	margin-left: 20px;
}



body { min-width: 320px; }
 
#nav, #nav.active { 
  position: relative !important; 
  top: auto !important; 
  left: auto; 
  float: left; 
  right: auto; 
  text-align: left; 
  width: 100%;
	margin: 0 7% 10% 0;
  	border-bottom: 0px ; 
}
#nav ul { background: transparent none; }
#nav li { float: left; width: 100%; min-width: 260px; text-align: left; margin: 0 !important; }
  
#nav li a, #nav li a.selected { 
  	-webkit-transition: none !important; 
  	-moz-transition: none !important; 
  	transition: none !important; 
  	background: transparent url('../imgs/arrow.png') no-repeat right top; 
  	border-bottom: 1px solid rgba(0, 0, 0, 0.3); 
  	border-top: 1px solid rgba(255, 255, 255, 0.1); 
  	padding-left: 20px !important; 
  	padding-bottom: 0 !important; 
  	height: 28px !important; }
  	
  	
#nav li a:hover { 
  	background: rgba(128, 128, 128, 0.1) url('../imgs/arrow.png') no-repeat right top; 
  	}
  	
#container { 
	padding: 0; 
	padding-left: 20px;
	width: 480px; 
	}
	  
}  
  

/* 480px and under */
@media screen and (max-width: 480px) { 
	* { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }

#wrapper {width: 400px; }	
section { width: 400px; }

#homoeopathie h2, #informationen h2, #uebermich h2, #aktuelles h2, #kontakt h2 { 
	width: 86%;}
	
#map_canvas_custom_4515 {
	width: 400px;
	height: 360px;
}

#container { 
	padding: 0; 
	padding-left: 20px;
	width: 400px; 
	}
#homoeopathie .col, #informationen .col, #uebermich .col, #kontakt .col { 
	width: 280px;
	margin-left: 10px;
}
	
}



  
/* 400px and under */
@media screen and (max-width: 400px) { 

#map_canvas_custom_4515 {
	width: 330px;
	height: 360px;
}


/* 320px and under */
@media screen and (max-width: 320px) { body { width: 320px !important; /* Opera Mini fix */ }
#banner { height: 401px; width: 320px; margin-bottom: 10px;background: url(../imgs/s_banner3.png) no-repeat scroll 0 0;}
#wrapper {width: 320px; }	
section { width: 320px; overflow: hidden; }
#map_canvas_custom_4515 { width: 300px; height: 360px;}
#container { padding: 0; padding-left: 10px; width: 320px; }
#homoeopathie .col, #informationen .col, #uebermich .col, #kontakt .col { width: 300px; margin-left: 0px; }
#homoeopathie h2, #informationen h2, #uebermich h2, #aktuelles h2, #kontakt h2 { width: 300px; margin-left: 0;}
#aktuelles .col { width: 90%; height: auto; margin-left: auto; margin-right: auto;}
#footer { width: 90%; }
#homoeopathie, #informationen, #uebermich, #aktuelles, #kontakt { border-top: 0px; padding-top: 25px; padding-bottom: 25px;
}
  }

/* iPads (portrait and landscape) */
@media screen and (device-width: 768px) { body { -webkit-background-size: 2000px 1314px; }
   }