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

*{margin:0;
padding:0; 
}

html{font-size:10px;
font-family: 'Arya', sans-serif;
}

.br { clear:both;}

p {font-size:1.4em;}
h1 {font-size:1.6em;
	color:#FFF;
	padding:1rem 0rem;}
#headline h1 { color:#666;}	
.headline h1 { color:#666;}	

.left3 { padding-left:3rem;}

h2 {font-size:1.4em;
	font-weight:300;
	color:#FFF;
	padding:0.5rem 0rem;}

h3 {font-size:1.4em;
	font-weight:300;
	color:#c00b1d;
	padding:0.5rem 0rem;}

.orange {color: #f8b334;}
.blau {color: #39a9dc;}
.gruen {color: #97bf0d;}
.rot {color: #c00b1d;}

a {	color: rgba(146,146,146,1.00);}
a:visited {	color: rgba(146,146,146,1.00);}
a:hover { color: rgba(96,96,96,1.50);}
.linkStyle {
	color: rgba(146,146,146,1.00);
	font-family: 'Arya', sans-serif;
	font-style: normal;
	font-weight: 100;
	text-decoration: none;
	}

.extern {font-size:1.4em;
	text-decoration:none;}

body {
	background-color: #fff;
	font-family: font-family: 'Arya', sans-serif;
	font-size:12px;
	font-weight: 400;
	word-spacing: 0.1em;
	line-height: 1.8em;
	color: #333;
	}

header { width: 100%;
	max-width: 1200px;
	}
#slogan { width:48%;
	height:	15rem;
	float: right;
	background-image: url(pics/slogan.jpg);
	background-repeat: no-repeat;
	background-position:right top;
	background-size: contain;
	}
#logo { width:43%;
	height:15rem;
	min-height:12rem;
	float: left;
	background-image: url(pics/logo.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;}

#baust { width:48%;
	height:	15rem;
	float: right;
	text-align:center;
	background-image: url(pics/aufsteller_sm.png);
	background-repeat: no-repeat;
	background-position:right top;
	background-size: 90% contain;
	}

.headimage { width:100%;
	max-width: 1200px;
	height:12rem;
	margin:2px;
	background-repeat: no-repeat;
	background-position:left top;
	background-size: cover;
	}
#homeimage {background-image:url(pics/head1.jpg);}
#vitaimage {background-image:url(pics/vita.jpg);}
#entspannungimage {background-image:url(pics/entspannung.jpg);}
#stressimage {background-image:url(pics/stress.jpg);}
#gesundheitimage {background-image:url(pics/gesundheit.jpg);}
#entspannungimage {background-image:url(pics/entspannung.jpg);}
#impressumimage {background-image:url(pics/impressum.jpg);}
#preiseimage {background-image:url(pics/preise.jpg);}
#kontaktimage {background-image:url(pics/kontakt.jpg);}
#praxisimage {background-image:url(pics/praxen.jpg)}

#bildnis_kg { width:48%;
	height:25rem;
	max-width: 500px;
	max-height:333px;
	background-image:url(pics/kg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	float:left;
	}
/* Navigation styles*/
nav {}

.navi {
	position: static;
    /*padding-top:20px;
    padding-bottom: 20px;*/
	margin-right: -4px;
	}
.navili{ width: auto;
	height:2em;
	margin: 4px;
	padding: 0 0.5em 0 0.5em;
	text-align: center;
	border:solid 1px #CCC;
	list-style:none;
	float:right;
}
#orange {border-color: #f8b334;}
#blau {border-color: #97bf0d;}
#gruen {border-color: #39a9dc;}
#rot {border-color: #c00b1d;}
.line { width:100%;
	height:1px;
	background-color:#FFF;}

.greenline { width:100%;
	height:1px;
	max-width:1200px;
	margin: 2px;
	background-color:#97bf0d;}

.redline { width:100%;
	height: 1px;
	max-width:1200px;
	margin: 2px;
	background-color:#c00b1d;}

#leuben { width:35%;
	max-width:40rem;
	min-width:10rem;
	background-color:#FFF;
	border:solid 2px #c00b1d;
	transform: rotate(-3deg);
	padding: 1rem;
	position:fixed;
	margin-top:2.8rem;
	margin-left:2rem;
	opacity: 0.95;}

#leuben h1, h2{color: #c00b1d;}
#leuben h1, h2, p{font-size:1.2em;
	font-weight:300;}
	
section {width:100%;
	max-width: 1200px;
	margin: 2px;
	padding:0 5% 10px 5%;
	box-sizing: border-box;}

.twocolleft {width:48%;
	float:left;
	}
.twocolright {width:48%;
	float:right;
	}
.colimage{width: 100%;
	height: auto;}

#first { background-color: #fff;
	 margin: 10px 2px 2px 2px;}
#next1 { background-color: #f8b334;}
#next2 { background-color: #39a9dc;}
#next3, #next2_2, #next2_3{ background-color: #97bf0d;}
#nextlast {background-color: #000;}

table { width:100%;
	height:40px;
	font-size:1.2em;}

td { min-width:15.5rem; 
	padding: 0.4rem 0.2rem; 
	border-bottom: 
	solid 1px #eeeeee;}


footer { width: 100%;
	max-width: 1200px;
	}

form{ width:100%;}

label {font-size:1.4em;}

#contactform{ width:100%;
max-width:1200px;
margin:0 auto;
background:#fff;
padding:4rem 10%;}


input, textarea { box-sizing: border-box;
background:#eee;
padding:1rem;
width:100%;
min-height:6rem;
border: 0px none;
font-size:1.8rem;
color:#000;}

input:focus { background:#39a9dc;
opacity: 0.7;
color:#fff;
transition:all ease 0.4s;}

textarea:focus { background:#f8b334;
opacity: 0.8;
color:#fff;
transition:all ease 0.4s;}
/*textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus { border-color: rgba (0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0) inset, 0 15px 15px rgba(0,0,0,0.1);
outline:0 none;}*/

textarea{ width:100%; min-height:12rem;}

.contactbutton{ width:100%;
margin-top:2.5rem;
background:#64b357;
color:#fff;
font-family:Arya;
font-weight:100;
font-size:1.8rem;
box-shadow:0 15px 15px rgba(0,0,0,0.1);
cursor:pointer;
-webkit-transition:all ease-out 0.2s;
-moz-transition:all ease-out 0.2s;
-o-transition:all ease-out 0.2s;
-ms-transition:all ease-out 0.2s;
transition:all ease-out 0.2s;}

.contactbutton:hover{ background:#fff;
color:#000;}

.wichtig { background-color: #FFC;}

#urlaub {width: 400px;
	height: auto;
	margin: 1rem auto 1rem auto;
	border: solid medium #FF0004;
	background-color: #FFC;
	text-align: center;}	


@media screen and (min-width:599px){
	
#slogan { width:48%;
	mim-height:	22rem; !important;
	float: right;
	background-image: url(pics/slogan.jpg);
	background-repeat: no-repeat;
	background-position:right top;
	background-size: contain;
	}
#logo { width:43%;
	mim-height:22rem; !important;
	float: left;
	background-image: url(pics/logo.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;}

}

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

.twocolleft {width:96%;}
.twocolright {width:96%;}

p {font-size:1.2em;}
h1 {font-size:1.4em;
	color:#FFF;}
	
#logo { width:24rem;}
#slogan { width:26rem;}

#bildnis_kg { width:96%;
	height:25rem;
	max-width: 500px;
	max-height:333px;
	background-image:url(pics/kg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	float:left;
	}
.wichtig { background-color: #FFC;}
@media screen and (max-width:499px){

#slogan { width:70%;
	height:	12rem;
	margin:0 auto;
	float: none;}

#logo { width:70%;
	height: 12rem;
	margin:0 auto;
	float: none;
	}
#leuben { width:85%;
	
	min-width:10rem;
	background-color:#FFF;
	border:solid 2px #c00b1d;
	transform: rotate(-3deg);
	padding: 1rem;
	position:fixed;
	margin-top: -0.8rem;
	margin-left:1rem;
	opacity: 0.95;}

#leuben h1, h2{color: #c00b1d;}
#leuben h1, h2, p{font-size:1.2em;
	font-weight:300;}	
.wichtig { background-color: #FFC;}
	
#urlaub {width: 400px;
	height: auto;
	margin: 1rem auto 1rem auto;
	border: solid medium #FF0004;
	background-color: #FFC;
	text-align: center;}	
}

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

#slogan { width:70%;
	height:	12rem;
	margin:0 auto;
	float: none;}
	
#logo { width:70%;
	height: 12rem;
	margin:0 auto;
	float: none;
	}
#leuben { width:85%;
	
	min-width:10rem;
	background-color:#FFF;
	border:solid 2px #c00b1d;
	transform: rotate(-3deg);
	padding: 1rem;
	position:fixed;
	margin-top:-0.8rem;
	margin-left:1rem;
	opacity: 0.95;}

#leuben h1, h2{color: #c00b1d;}
#leuben h1, h2, p{font-size:1.2em;
	font-weight:300;}

.twocolleft {width:96%;}
.twocolright {width:96%;}

#bildnis_kg { width:96%;
	height:20rem;
	max-width: 500px;
	max-height:333px;
	background-image:url(pics/kg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	float:left;
	}
p {font-size:1.2em;}
h1 {font-size:1.6em;
	color:#FFF;
	padding:0.5rem 0rem;}
.wichtig { background-color: #FFC;}
	
#urlaub {width: 360px;
	height: auto;
	margin: 1rem auto 1rem auto;
	border: solid medium #FF0004;
	background-color: #FFC;
	text-align: center;}	
}