@font-face {
    font-family: 'Cardo';
    src: url('fonts/cardo-regular.woff');
	font-weight: 400;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-200.woff');
	font-weight: 200;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-300.woff');
	font-weight: 300;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-regular.woff');
	font-weight: 400;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-200italic.woff');
	font-weight: 200;
	font-style: italic; 
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-300italic.woff');
	font-weight: 300;
	font-style: italic; 
}

* {
   margin: 0;
   padding: 0;
     }
html {overflow-y: scroll;	scrollbar-color: #ccc #eee;  scroll-behavior: smooth !important;}
body {font: 200 1.1rem/1.5 Poppins; background-color:#111; color: #333;}
.team-content p {font-size:0.9rem;}
h1 {font: 400 2.8rem/1.2 Cardo; text-transform:uppercase; color:hsl(0, 0%, 20%); margin-bottom:2rem;}
h2 {font: 400 2rem/1.2 Cardo; color:hsl(0, 0%, 20%);margin: 0 0 1rem 0;}
.praxisseite h2 {font: 300 1.1rem/1.5 Poppins; margin: -1.5rem 0 6rem 0;}
h3 {font: 400 1.8rem/1.2 Cardo; color:hsl(0, 0%, 20%); margin: 0rem 0 1rem 0;}
h4 {font: 300 1.4rem/1.2 Poppins; margin: 0 0 1rem 0;}

a {font-weight:400; color: hsl(75, 65%, 45%); text-decoration:none; transition: all 0.3s ease-in-out 0s; outline: 0;}
a:hover {color:#000; transition: all 0.3s ease-in-out 0s;}
a.fax {font-weight: 200; color: #333;}
.infobox a {color:#fff;transition: all 0.3s ease-in-out 0s;}
.infobox a:hover {color:#000;transition: all 0.3s ease-in-out 0s;}
b, strong {font-weight:300;}
.drittel b, .drittel strong {font-weight:400;}
p {margin-bottom:2rem;}
ul, ol {margin: 0 0 3rem 3rem;}
li {margin: 0 0 0.3rem 0;}
img {max-width:100%; height:auto;}

.main {width:100%; background-color:#fff; padding-bottom: 4rem;}

.header-img, #jssor_1, .content {animation: fadeInAnimation 1s ease-in-out;}
.top {margin-bottom: 2rem;}
.home .top {margin-bottom: 3rem;}

/*########################### Animationen ##############################*/	

.grid-item {animation: fadeInAnimationPraxis 2s ease-in-out;}
@keyframes fadeInAnimationPraxis {  0% {opacity: 0;}   50% { opacity:0; }  100% {opacity: 1;} }
.grid-item:nth-child(2) {animation-duration:0.4s; ease-in-out}
.grid-item:nth-child(3) {animation-duration:0.8s;ease-in-out}
.grid-item:nth-child(4) {animation-duration:1.2s;ease-in-out}
.grid-item:nth-child(5) {animation-duration:1.6s;ease-in-out}
.grid-item:nth-child(6) {animation-duration:2s;ease-in-out}
.grid-item:nth-child(7) {animation-duration:2.4s;ease-in-out}
.grid-item:nth-child(8) {animation-duration:2.8s;ease-in-out}
.grid-item:nth-child(9) {animation-duration:3.2s;ease-in-out}
.grid-item:nth-child(10) {animation-duration:3.6s;ease-in-out}

@keyframes fadeInAnimation {  0% {opacity: 0;}    100% {opacity: 1;} }

.ltr {animation: fadeInLTR 1s ease-in-out;}
@keyframes fadeInLTR {   0% {transform: translate(-300px, 0); opacity:0; } 100% { transform: translate(0, 0); opacity:1;}  }

.rtl {animation: fadeInRTL 1s ease-in-out;}
@keyframes fadeInRTL {   0% {transform: translate(300px, 0); opacity:0; }  100% { transform: translate(0, 0); opacity:1;}  }

.btt {animation: fadeInBTT 1s ease-in-out;}
@keyframes fadeInBTT {   0% {transform: translate(0, 300px); opacity:0; }  100% { transform: translate(0, 0); opacity:1;}  }


/*########################### KOPF & NAVI ##############################*/	
.head {position:absolute; top:0px; padding-top: 20px; z-index:10; display:flex; width: 100%; justify-content: space-evenly; margin: 0 auto; 
background-image: linear-gradient(0deg, #00000000 0%, #000000ff 600%); height:400px;}

.logo {text-transform:uppercase; text-shadow: 0px 0px 100px #000; text-align:right; margin-top:20px;}
.logo span {display:block;}
.logo a {font: 2.5rem/1.1 Cardo; color:#fff; }
.logo a:hover {color:#000;}
.claim {font-size: 1.5rem;margin-top:5px; text-transform:none; word-spacing:2px;}

nav {  color: #ccc;}
nav ul {padding: 0;}
nav li {display:inline;	list-style-type: none; margin: 0 10px; padding:0;}
nav a { font-weight:200; display: inline-block; padding: 60px 0; width: 160px; text-transform: uppercase; white-space: nowrap; background-color: hsla(0, 0%, 0%, 0.15);color:#fff; text-align:center; font-size:1.5rem; border-radius:50%; transition: all 0.5s ease-in-out 0s;}
nav a:hover, nav a.select  {color: #fff; text-decoration:none; background-color:hsla(75, 65%, 50%, 0.7); transition: all 0.5s ease-in-out 0s;}

#jssor_1 {filter: brightness(1); z-index:5; font-size:2rem;}
.header-img{text-align:center;}
.header-img img{width:4000px; max-width:100%;}

/*########################### INHALT ##############################*/	
.content {max-width: 1200px; margin: 0 auto; display:flex; z-index:10; padding: 0 2rem 2rem 2rem;}
.titel {padding:0 2rem;}
.teamseite .content {max-width:1600px;}
.praxisseite .content {max-width:2400px; padding:0;}
.voll {width:100%;}
.zweidrittel {width: 65%;}
.drittel {width: 35%; margin:0 0 0 3rem;}
.links {margin:0 3rem 0 0;}
.drittel ul {margin:0;}
.drittel li {list-style-type: none; }
.zweidrittel .infobox ul {margin: 0 0 1.4rem 3rem;}

.infobox {
    padding: 1.5rem;
    background-image: radial-gradient(circle at bottom right, hsl(75, 55%, 60%) 50%, hsl(75, 55%, 45%));
    border-radius: 2px;
	font-weight:300;
	color: #fff;
	margin: 2rem 0;
}
.infobox table {width: 100%;}
.infobox td {width:33%; padding: 0 20px 0 0; vertical-align: top;}
.infobox h2 {font: 400 1.6rem/1.3 Poppins; color: #fff; text-transform:uppercase;}
.infobox h3 {font: 400 1.4rem/1.3 Poppins; color: #fff; margin-bottom:5px;}
img.icon {width: 30px; vertical-align: middle; margin-bottom:5px;}
.urlaub img.icon {filter: invert(1);}

.grid {margin: 0 auto 4rem auto; }
.grid:after {  content: '';  display: block;  clear: both;}
.grid-sizer,.grid-item {  width: 33.333%;}
.grid-item {  float: right; padding: 0;}
.grid-item img {  display: block;  }

.team-content {  display: flex; flex-wrap: wrap; justify-content: center; }
.team {margin: 0 2rem 2rem 2rem;max-width: 300px; text-align:center; line-height:120%;}
.team img {border-radius: 50%; width:300px; height: auto;}
.team h2 {margin:0; font: 400 1.1rem/1.3 Poppins;}
.team .platz {filter: brightness(1);}

.light {background-image:radial-gradient(circle at top left, hsl(75, 40%, 92%) 50%, hsl(75, 40%, 87%)); color: #333; font-weight:200;}
.light h2, .light h3 {color: hsl(0, 0%, 20%);}
.light img.icon {filter: brightness(0.3);}
.light a {color: hsl(75, 55%, 40%);}
.light a:hover {color: hsl(0, 0%, 0%);}

.doctolib {font-size:90%;}
.doctolib a {display:block;text-align:center; background-color:#0596DE;color:#ffffff;overflow:hidden; border-radius:3px; padding:5px;}
.doctolib a:hover {background-color: #035C87 !important;}
.doctolib img {height:30px;margin:1px;vertical-align:middle;width:auto;}

.footer {color: #fff; display:flex; padding: 5rem 2rem 12rem 2rem; font-size:90%; max-width: 1200px; margin: 0 auto; }
.footer-bg {width: 100%; background-image: linear-gradient(#222, #111); height: 300px;}
.footer p.margin {width: 450px; }
.footer p:nth-child(2) {width: 350px; }
.footer p:nth-child(3) {width: 300px;}
.footer a {color: #fff;transition: all 0.3s ease-in-out 0s; font-weight:100;}
.footer a:hover {color:hsl(75, 55%, 50%);transition: all 0.3s ease-in-out 0s;}
.footer h3 {color:#fff; text-transform:uppercase; font: 300 1.1rem/1.5 Poppins; }
.up { text-align: right; display:block; }
.up img {width: 30px; height: auto; filter: invert(1) brightness(0.5); transition: all 0.3s ease-in-out 0s; }
.up img:hover {filter: invert(1) brightness(1);transition: all 0.3s ease-in-out 0s;}

img.icon_small {height: 20px; padding:2px; margin:1px 0; background-color: hsla(75, 55%, 45%, 0); border-radius:50%; vertical-align: middle; transition: all 0.3s ease-in-out 0s;}
a img.icon_small:hover {background-color:hsla(75, 55%, 45%,0); transition: all 0.3s ease-in-out 0s;}

#burger {display: none;}

/*########################### MOBIL ##############################*/	


@media  (max-width: 1200px) {
.logo {margin-top:5px;}
.logo a {font-size: 1.8rem;}
.claim {font-size: 1rem;}
nav a {padding: 37px 0; width: 100px; font-size: 1rem;}

}

@media  (max-width: 830px) {
.head {height:200px;}
.logo {text-align:left;}
.logo span {display:inline;}
.claim {margin-top: 0;}
nav li {margin:0;}
#jssor_1 .name {display:none;}
.content {display:block; padding: 0 1rem;}
.drittel, .zweidrittel {width:100%; margin:0;}
.home .zweidrittel, .leistungsseite .zweidrittel, .kontaktseite .zweidrittel {display: table-footer-group; margin-top: 2rem;}
.home .drittel, .leistungsseite .drittel, .kontaktseite .drittel {display: table-header-group;}
.footer {display: block;}
.content p, .infobox {-webkit-hyphens: auto; hyphens: auto; font-size:1rem;}
h1, h2, h3, td {-webkit-hyphens: none;hyphens:none;}
h1 {font-size: 1.6rem; -webkit-hyphens: auto; hyphens: auto;}
h2 {font-size: 1.4rem; }
h3 {font-size: 1.2rem; }
h4 {font-size: 1.2rem;}
.home h1 {margin-top:2rem;}
.infobox h2 {font-size:1.3rem;}
.infobox h3 {font-size:1.2rem;}

.top {margin-bottom:1rem !important;}
.footer p {width: auto !important;}
.grid-sizer, .grid-item {    width: 100%;}
.zweidrittel .infobox ul {    margin: 0 0 1rem 1rem;}
.footer {padding-bottom: 3rem;}
/*########################### HAMBURGER 
Copyright (c) 2017 by Julien Lejeune (https://codepen.io/jlnljn/pen/LkXoBb)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
##############################*/
.logo {
  z-index: 1;
  margin-top: 0;
  position:absolute;
  left:1rem;
}
body input + label {
  position: fixed;
  top: 20px;
  right: 20px;
  height: 20px;
  width: 25px;
  z-index: 5;
 
}
body input + label span {
  position: absolute;
  width: 120%;
  height: 3px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  display: block;
  transition: .5s;
  background: #000;
}
body input + label span:first-child {
  top: 3px;
}
body input + label span:last-child {
  top: 17px;
}
body label:hover {
  cursor: pointer;
}
body input:checked + label span {
  opacity: 0;
  top: 50%;
}
body input:checked + label span:first-child {
  opacity: 1;
  transform: rotate(135deg);
}
body input:checked + label span:last-child {
  opacity: 1;
  transform: rotate(-135deg);
}
body input ~ nav {
  position: fixed;
  top: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: 3;
  transition: .5s;
  transition-delay: .5s;
  overflow: hidden;
}
body input ~ nav > ul {
  text-align: center;
  position: absolute;
  top: 10px;
  right: 40px;
} 
body input ~ nav > ul > li {
  opacity: 0;
  transition: 0s;
  transition-delay: 0s;
}
body input ~ nav > ul > li > a {
  text-decoration: none;
  display: block; 
}
nav a {margin-bottom: 5px;  background-color: hsla(0, 0%, 90%, 1);  color: #000; }
nav a:hover, nav a.select {background-color: hsla(75, 65%, 50%, 1); color: #fff; }
nav a.select {border: 1px solid #fff;}
body input:checked ~ nav {
  height: 110%;
  transition-delay: 0s;
}
body input:checked ~ nav > ul > li {
  opacity: 1;
  transition-delay: .5s;
  margin: 0;
}

}

@media (max-width: 450px) {
.logo {line-height:1;}
.logo a {font-size: 1.1rem; }
.claim {font-size: 1rem; max-width:70%;}
.head {height:90px; background-image:linear-gradient(0deg, #00000000 0%, #000000ff 200%);padding-top:10px;}
body input + label {top: 10px;}
}