/* BASIC ELEMENTS */

html, body{
padding:0;
margin:0;
}

body{
background:#f5f4f3 url(images/sandpaper.jpg);
font-family:'Source Sans Pro', Helvetica, Arial, sans-serif;
font-weight:300;
font-size:15px;
line-height:24px;
color:#4c4c4c;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: none;
border-top:10px solid #003f8a;
}

a{
color:#4c4c4c;
}

.content a{
font-weight:400;
}

a img{
border:none;
}

.wrapper{
width:1000px;
margin:0 auto;
}

::selection, ::-moz-selection {
background:#e8e8e2;
}

h1{
font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
font-size:17px;
line-height:27px;
font-weight:100;
color:#003f8a;
font-style:italic;
padding:3% 0 3% 0;
margin:0 20%;
text-align:center;
display:none;
}

h1 .claim{
font-size:19px;
}

.claim{
font-weight:800;
color:red;
}

h2{
font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
font-size:19px;
line-height:25px;
font-style:italic;
font-weight:200;
}

h3 span{
font-size:13px;
display:block;
}


.mobile{
display:none;
}

.width0{
width:95%;
margin:0;
}

.width1{
width:95%;
margin:0 2.5%;
}

.width1 h2{
font-size:27px;
line-height:40px;
}

.width2{
width:43%;
display:inline-block;
vertical-align:top;
margin:1% 2.5%;
}

.width2 ul{
margin:0;
padding:0;
}

.width2 li{
padding-left:20px;
list-style-type:none;
background:url(images/bullet-point.png) no-repeat left 7px;
}

.teaserbild{
float:left;
margin: 5px 15px 5px 0;
border:3px solid #fff;
}

.width3{
width:29%;
padding:0 4% 0 0;
vertical-align:top;
display:inline-block;
margin-top:40px;
}

.width3 p{
margin:0;
}

.width3 h3{
margin-bottom:0;
}

.width4{
width:23%;
vertical-align:bottom;
display:inline-block;
font-size:14px;
border-bottom:2px solid rgba(255,255,255,0.2);
margin-right:1%;
}

img.width1{
width:100%;
padding:0;
margin:0;
margin-top:5%;
}

img.width3{
margin:1% 2% 0 0;
display:inline-block;
width:31.3333%;
padding:0;
}

#footer{
background:#003f8a;
color:#fff;
height:auto;
margin-top:5%;
padding:4% 0;
}

#footer a, #footer h2{
color:#fff;
}

#footer span{
display:inline-block;
width:65px;
}

#footer .wrapper{
}

#logo{
margin:0 auto;
display:block;
overflow:hidden;
width:410px;
height:260px;
text-indent:-999px;
text-align:left;
background:url(images/logo-uwe-froehlich.png) no-repeat center 15px;
z-index:100;
}

.content{
margin:0;
display:inline-block;
}

.tel{
color:#fff;
position:absolute;
padding:8px 10px 5px 10px;
font-weight:100;
font-size:24px;
line-height:23px;
background:#003f8a;
top:-14px;
border-radius: 0 0 5px 5px;
}

.tel span{
display:block; 
font-size:13px;
font-weight:300;
}

.tel a{
text-decoration:none;
color:#fff;
}

#stoerer-wrapper{
position:relative;
float:right;
margin-top:-210px;
}

.untersuchung{
max-width:80%;
text-align: center;
margin-right:auto;
	margin-left:auto;
}

.nopadding{
margin:-25px auto 25px auto;
padding-top:0;
}

#stoerer{
position:absolute;
width:130px;
height:130px;
float:right;
background:url(images/stoerer.png);
top:0;
right:10px;
}

.teaser-big, .teaser-medicalwellness{
clear:none;
width:100%;
height:auto;
margin-bottom:5%;
box-shadow:0 0 10px rgba(50,50,50,0.3);
}

.teaser-medicalwellness{
border: 3px solid #fff;
margin-bottom:0;
}

.elastic-video {
position:relative;
padding-bottom:55%;
padding-top:15px;
height:0;
overflow:hidden;
}

.elastic-video iframe {
position:absolute;
top:0;
left 0;
width:100%;
height:100%;
}

/* MENUE */

.mainnav{
position:absolute;
z-index:800;
display:inline-block;
float:left;
background:#fff;
height:400px;
overflow:hidden;
box-shadow:5px 0 5px rgba(0,0,0,0.1);
}

.mainnav, .mainnav li{
list-style:none;
margin:0;
padding:0;
font-weight:400;
line-height: 23px;
font-size:19px;
}

.mainnav{
width:220px;
padding:35px 25px 5px 25px;
}

.mainnav li{
}

.mainnav a{
text-decoration:none;
display:inline-block;
padding-bottom:0px;
color:#777;
padding:12px 0;
}

.mainnav #aktiv{
color:#a08143;
}

.mobilenav, #menue-icon{
display:none;
}

/* ACCORDION */

.accordion {
width: 99%;
padding:20px 0 0 0;
}

.accordion h3{
padding:10px 5%;
margin:0;
cursor:pointer;
background:#e8e8e2 url(images/accordeon2.gif) no-repeat 5px 7px;
margin:2px 0;
font-weight:600;
}


.accordion h3:hover {
background:#a08143 url(images/accordeon3.gif) no-repeat 5px 7px;
}

.accordion h3.active {
background:#a08143 url(images/accordeon1.gif) no-repeat 5px 7px;
}

.acc_content {
background:#e8e8e2;
padding:10px 5% 20px 5%;
}


/* POPUP */

#popup{
position:absolute;
z-index:100;
left: 50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
box-sizing:border-box;
max-width:600px;
height:auto;
border:0.2em solid #fff;
z-index:999;
-moz-border-radius:1em;
border-radius:0.5em;
text-align:center;
box-shadow:rgba(100,100,100,0.3) 0 0 0.2em 0.2em;
background:#eee;
background:rgba(230,230,230,0.95);
color:#000;
text-align:center;
overflow:hidden;
}

#popup img{
width:auto;
max-width:400px;
height:auto;
max-height:90vh;
float:center;
}


#popup h1{
font-size:1.5em;
font-weight:300;
padding-top:0;
margin-top:1em;
line-height:1;
color:#ff8e04;
}

#closepopup{
font-weight:800;
position:absolute;
top:0.5em;
right:0.5em;
line-height:1;
margin:0;
padding:0;
cursor:pointer;
font-size:2em;
}


/* FORMULAR */

#FormMobile{
display:none;
}

.kontakt {
float:left;
text-align:left;
}

.width2.links{
width:48%;
margin: 0 0 0 2%;
}

.width2.rechts{
width:48%;
margin: 0 2% 0 0;
}

.ok, .not_ok, textarea{
font-style:italic;
font-size:15px;
color:#475258;
border-radius: 0px;
}

.ok, textarea { 
border:1px solid #ccc;
background:#e8e8e2;
}

.ok, .not_ok { 
height:35px;
margin-bottom:10px;
width:100%;
}

.not_ok{
border:1px solid #990000;
background:#e8e8e2;
}

#warning{
color:#990000;
}

.formspace{
height:46px;
padding-top:5px;
display:block;
overflow:hidden;
margin-bottom:10px;
}

textarea{
width:100%;
}

.impressum{
font-size:9px;
line-height:14px;
}

.submit{
margin:30px 0;
padding:12px 20px 9px 20px;
background:#333;
width:180px;
border-radius: 0px;
}

.submit:hover{
background:#555;
}

/* LEISTUNGSTABELLE */

.leistungstabelle{
width:100%;
border:0;
padding:0;
text-align:left;
margin-top:5%;
}

.leistungstabelle td {
padding: 3px 7px;
height:10px;
vertical-align:bottom;
}

.leistungstabelle tr {
background-color:#eee;
padding:0;
margin:0;
border:0;
}

.leistungstabelle strong{
text-transform:uppercase;
font-size:13px;
}

.preis{
text-align:right;
width:20%;
}

.small{
display:block;
font-size:11px;
line-height:11px;
}

/* GOOGLE MAPS */

#map-canvas{
width:100%;
height:280px;
position:relative;
}

#map-canvas img {
max-width: none;
}

#map-canvas label { 
width: auto; display:inline; 
} 


@media screen and (max-width: 1050px) {
.wrapper{
width:97%;
}
	
.untersuchung{
font-size:18px;
}

.nopadding{
margin:-15px auto 25px auto;
}

/* MENUE */

.mainnav, .subnav, #logo2{
display:none;
}

.mobilenav{
display:block;
box-shadow:0 3px 3px #ccc;
background:#f5f4f3 url(images/sandpaper.jpg);
}

.mobilenav, .mobilenav li{
list-style-type:none;
padding:0;
margin:0;
text-align:left;
}

.mobilenav a{
display:inline-block;
text-decoration:none;
padding:5px 5%;
width:90%;
border-bottom:1px solid #aaa;
}

.mobilenav .inaktiv{
background:#eee;
color:#333;
}


.mobilenav #aktiv{
font-weight:800;
}

#menue-icon{
position:relative;
display:block;
width:80px;
height:30px;
background:url(images/icon-menu.png) no-repeat bottom center;
overflow:hidden;
text-indent:-999px;
margin:0 auto 20px  auto;
}
}


@media screen and (max-width: 750px) {
	
.untersuchung{
font-size:15px;
}

.nopadding{
margin:-0 auto 25px auto;
}

.wrapper{
width:100%;
}

.tel, #stoerer-wrapper{
display:none;
}

.content, .width0, .width2, .width3 {
width:90%;
margin-left:10%;
float:none;
}

.width1{
width:90%;
margin:0;
}

.width4{
margin:0 0 0 10%;
width:80%;
}

.width3{
width:90%;
margin:50px 0 0 0;
}

.width0{
display:none;
}

.width2{
margin:5% 0;
}

h1{
width:90%;
margin:3% 5%;
}

#logo{
width:100%;
height:200px;
margin:20px 0;
background:url(images/logo-uwe-froehlich.png) no-repeat center center;
z-index:100;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

/* FORMULAR */

#FormDesktop{
display:none;
}

#FormMobile{
display:block;
}

.width2.links, .width2.rechts{
width:100%;
margin:0;
padding:0;
}

.width2.links{
margin-bottom:25px;
}

.width2.links p, .width2.rechts p{
width:100%;
margin:0;
padding:0;
display:inline;
}

img.width3{
width:99%;
padding:0 1% 0 0;
margin-top:1%;
display:inline;
text-align:left;
}

.ok, .not_ok, textarea { 
width:100%;
margin:0;
padding:0;
}

textarea { 
margin-top:25px;
}

}