/* stylesheet paedmed.com/  - created 10/2018 - by KEY22goodkingWORK http://king22.com */

/*--------------------
the main selectors
----------------------*/
html { /* Force Vertical Scrollbar */
	/* IE */
	overflow-y: scroll;
	/* Moz */
	height: 100%;
	margin-bottom: 0.1em;
}

* { margin: 0; padding: 0; border: 0; font-size: 1em; }
body { margin: 0 auto; padding: 0; 
			font-family:  Arial, Helvetica, sans-serif; 
			color: #0f3876; background: #fff; }
@media screen and (max-width: 1024px) { body { padding: 0; } }
@media screen and (max-width: 760px) { body { padding: 0; } }

h1, h2, h3, h4, h5 { font-weight: bold; text-decoration: none; }
h1 { font-size: 1.6em; line-height: 96%; margin: 0; padding: 0 0 0.6em; }
h2 { font-size: 1.4em; margin: 0; padding: 0 0 0.6em; }
h3 { font-size: 1.2em; margin: 0; padding: 0; }
h4 { font-size: 1em; margin: 0; padding: 0.6em 0 0; }
h5 { font-size: 0.8em; margin: 0; padding: 0.6em 0 0; }
h6 { font-size: 0.8em; font-style: italic; margin: 0; padding: 0.6em 0 0; }
@media screen and (max-width: 480px) { h1 { font-size: 1.2em; line-height: 110%; } }
@media screen and (max-width: 480px) { h2 { font-size: 1.2em; } }

p, ul { font-weight: 200; }
ul { list-style: disc inside; }

p { margin: 0.2em 0 1em; }

a { outline: none !important; border: none; }
a { color: #4f7cc1; text-decoration: underline; }
a:hover { color: #ec2121; }

input::-moz-focus-inner { border: 0; }

#container { margin: 0 auto; padding: 0; background: #fff; width: 100%; max-width: 960px; }
#canvas { width: 90%; padding: 0; margin: 0 auto 1em; text-align: center; 
			font-size: 1em; /* box-shadow: 0.025em 0.025em 0.5em #666; */ }
@media screen and (max-width: 760px) { #canvas { font-size: 0.9em; } }
@media screen and (max-width: 480px) { #canvas { font-size: 0.8em; } }

/*--------------------
the top section
----------------------*/

#accessibility { position: absolute; top: -10000px; }
#top { clear: both; height: 0; line-height: 0; margin: 0; padding: 0; }

header { width: 84%; clear: both; margin: 0 auto; padding: 0; border: 0; background: transparent; }

img.logo { margin: 2em auto 2em; }
@media screen and (max-width: 960px) { img.logo { margin: 4em auto 1em; } }
@media screen and (max-width: 760px) { img.logo { margin: 4em auto 1em; } }
@media screen and (max-width: 480px) { img.logo { margin: 4em auto 0; width: 70%; } }

/*--------------------
the navigation
----------------------*/

#nav p.menu { display: none; cursor: pointer; }
#nav { width: 100%; padding: 0; text-align: center; }
#nav ul { list-style: none outside; width: 90%; margin: 0 auto; padding: 0; }
#nav ul li, #nav ul li.active { display: inline; margin: 0 1.36em 0; padding: 0; }
#nav ul li a { color: #0f3876; text-decoration: none; text-transform: uppercase; }
#nav ul li a.active, ul li a.hilite { color: #c00; text-decoration: none; }
#nav ul li a:hover { color: #ec2121; }

@media screen and (max-width: 960px) { 
#nav { padding: 7% 0 0; }
#nav { position: fixed; top: 0 !important; left: 0; z-index: 11; margin: 0; width: 100%; padding: 0; }
#nav p.menu { display: block; width: 100%; text-align: center; margin: 0; padding: 6px 0;
			 font-size: 1.4em; line-height: 150%; cursor: pointer; background: #333; color: #fff; opacity: 0.9; }
#nav ul { width: 100%; padding: 4px 0 0; background: #666 url(/bg_grey.jpg) repeat top center; 
color: #fff; position: absolute;
opacity: 0.9;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
-ms-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;}
#nav ul li { width: 100% !important; display: block; margin: 2px auto; padding: 8px 0 !important; text-align: center; }
#nav ul li a { width: 100%; text-transform: uppercase; margin: 2% auto; color: #eae4d2; line-height: 100%; }
#nav ul li a:hover  { text-transform: uppercase; margin: 2% auto; color: #fff; font-weight: bold; }
#nav ul li a.active, #nav ul li a.hilite { color: #c00; }
#nav ul li:hover  { background: #666; opacity: 0.8; }
}
@media screen and (max-width: 480px) {#nav ul li { font-size: 120%; padding: 12px 0 !important; } }


/*--------------------
the main content area
----------------------*/

#content { clear: both; width: 80%; position: relative; margin: 1em auto 0.6em; 
			padding: 2em 0; min-height: 400px; text-align: left; border-top: 1px solid #4f7cc1; border-bottom: 1px solid #4f7cc1; }
@media screen and (max-width: 960px) { #content {  width: 92%; margin: 0.6em auto 0.6em; padding: 0.6em 0; } }

img.contimg { display: block; width: 100%; margin: 0.2em auto 1.2em; }
img.contimgright { display: inline; float: right; width: 30%; margin: 0 0 2em 2em; }

@media screen and (max-width: 760px) { 
img.contimg { margin: 0.5em 0; }
img.contimgright { float: right; width: 30%; margin: 0 0 1em 1em; }
h1.hide { display: none; }
}
ul.aktuell, ul.infos { list-style: none outside; margin: 1em 0;}
ul.aktuell li, ul.infos li { margin: 0.5em 0; }
ul.aktuell li:before, ul.infos li:before { content: "»»» "; }
ul.leistung {  }

a.show { display: block; margin: 1em 0; }
a.show:before { content: "▾ "; }
div.item { padding: 6px; margin: 0.1em 0 1em; border: 1px solid #4f7cc1; border-radius: 0.5em; background: #f7faff; }

a.adress {}
div#phone { margin: 1em 0 0; }
p.phone { margin: 0.1em 0 0.1em; }
@media screen and (max-width: 760px) { div#phone { margin: 0.2em 0 0; } }

.maintext { width: 60%; margin: 2em auto 0; padding: 0 0 1em; text-align: left; }
@media screen and (max-width: 1024px) { .maintext { width: 75%; font-size: 80%; } }
@media screen and (max-width: 760px) { .maintext { width: 90%; padding-top: 1em; margin-left: 3%; font-size: 90%; } }
@media screen and (max-width: 480px) { .maintext { padding-top: 1em; margin-left: 3%; font-size: 85%; } }

/*--------------------
the slider section
----------------------*/

#slider { width: 100%; height: 33%;  margin: 0.2em auto 1.2em; overflow: hidden; }
#slider ul { position: relative; margin: 0 0 0 -100%; padding: 0; list-style: none; width: 800%;}
#slider ul li { position: relative; display: block; float: left; width: 12.5%; margin: 0; padding: 0;}
#slider ul li img { position: relative; width: 100%;}

.button{ border:none; display:inline-block; padding:4px 8px; vertical-align:middle; overflow:hidden;
			text-decoration:none; color:inherit; background-color:transparent; text-align:center; cursor:pointer;
			font-size: 150%; border-radius: 0.1em; outline: none !important; white-space:nowrap}
.display-left{position:absolute;top:30%;left:0%;}
.display-right{position:absolute;top:30%;right:0%;}
@media screen and (max-width: 760px) { .display-left, .display-right { top:16%; } }
@media screen and (max-width: 480px) { .display-left, .display-right { top:12%; } }

.members { display:none; float: right; width: 30%; margin: 0 0 2em 2em; }

/*--------------------
the zoom section
----------------------*/

.lightbox {display: none;position: fixed;	z-index: 999;	width: 100%;height: 100%;text-align: center;	top: 0;	left: 0;	background: rgba(0,0,0,0.8);}
.lightbox img {max-width: 96%;max-height: 95%;margin-top: 2%;}
.lightbox:target {outline: none;	display: block;}

/*--------------------
the footer section
----------------------*/

#footer { width: 90%; clear: both; margin: 1em auto; padding: 0; text-align: center }

@media screen and (max-width: 480px) { #footer { width: 100%; } }

#footer ul { list-style: none outside; width: 90%; margin: 0 auto; padding: 0; }
#footer ul li { display: inline; margin: 0 0.8em 0; padding: 0; }
#footer ul li a { color: #0f3876; text-decoration: none; text-transform: none; }
#footer ul li a.active, ul li a.hilite { color: #c00; text-decoration: none; }
#footer ul li a:hover { color: #ec2121; }

@media screen and (max-width: 480px) { #footer ul { width: 100%; } }
@media screen and (max-width: 480px) { #footer ul li { margin: 0 0.4em 0; } }

/*--------------------
the general settings
----------------------*/

hr { margin: 1em auto 1.2em; width: 100%; height: 1px; color: #4f7cc1; background-color: transparent; border-top: 1px dotted #666; }

acronym { padding: 0 2px; background: #eee; border-bottom: 1px solid #999; }

.c { text-align: center; }
.l { text-align: left; }
.r { text-align: right; }
.j { text-align: justify; }