/*

font-family: 'Yantramanav', sans-serif;

*/

@font-face{
font-family:"Strada-L";
src:url("../fonts/STRADA-L/STRADA-L.eot") format("eot"),url("../fonts/STRADA-L/STRADA-L.woff") format("woff"),url("../fonts/STRADA-L/STRADA-L.ttf") format("truetype"),url("../fonts/STRADA-L/STRADA-L.svg") format("svg");
}
@font-face{
font-family:"Strada-R";
src:url("../fonts/STRADA-R/STRADA-R.eot") format("eot"),url("../fonts/STRADA-R/STRADA-R.woff") format("woff"),url("../fonts/STRADA-R/STRADA-R.ttf") format("truetype"),url("../fonts/STRADA-R/STRADA-R.svg") format("svg");
}
@font-face{
font-family:"Strada-SB";
src:url("../fonts/STRADASB/STRADASB.eot") format("eot"),url("../fonts/STRADASB/STRADASB.woff") format("woff"),url("../fonts/STRADASB/STRADASB.ttf") format("truetype"),url("../fonts/STRADASB/STRADASB.svg") format("svg");
}

/*
    Global
*/
body {font-family: 'Yantramanav', sans-serif; font-weight: 400; overflow-x: hidden; color: #333;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {font-family: 'Yantramanav', sans-serif; font-weight: 400; margin: 0; color: #0B719C; margin: 0 0 20px;}

h1, .h1 {font-size: 48px; margin: 0 0 20px;}
h2, .h2 {font-size: 24px;}
h3, .h3 {font-size: 18px;}

body.datenschutz h2 {margin-top: 40px;}

i {font-style: italic; color: #0f0;}

p {font-size: 18px; margin-bottom: 20px;}
p.small {font-size: 14px;}

a, a:hover, a:active, a:visited, a:focus {color: #0B719C; text-decoration: none; font-size: 18px; font-weight: 400;}

table, ul li {font-size: 18px; color: #333;}
ul {margin: 0 0 20px;}
ul li {line-height: 34px;}
table tr td {width: 33%; text-align: left;}

.modal table {margin-bottom: 30px;}
.modal table tr td {width: 70px; text-align: left; font-weight: bold;}
.modal table tr td.modalFirstTD {width: 200px;}

.img100 {width:100%;}

.ptop0 {padding-top: 0;}
.ptop10 {padding-top: 10px;}
.ptop20 {padding-top: 20px;}
.ptop30 {padding-top: 50px;}
.ptop40 {padding-top: 40px;}
.ptop50 {padding-top: 50px;}
.ptop60 {padding-top: 60px;}
.ptop65 {padding-top: 65px;}
.ptop70 {padding-top: 70px;}
.ptop80 {padding-top: 80px;}
.ptop90 {padding-top: 90px;}
.ptop100 {padding-top: 100px;}
.ptop210 {padding-top: 210px;}

.pbottom0 {padding-bottom: 0;}
.pbottom10 {padding-bottom: 10px;}
.pbottom20 {padding-bottom: 20px;}
.pbottom30 {padding-bottom: 30px;}
.pbottom40 {padding-bottom: 40px;}
.pbottom50 {padding-bottom: 50px;}
.pbottom60 {padding-bottom: 60px;}
.pbottom70 {padding-bottom: 70px;}
.pbottom80 {padding-bottom: 80px;}
.pbottom90 {padding-bottom: 90px;}
.pbottom100 {padding-bottom: 100px;}

.mtop0 {margin-top: 0;}
.mtop10 {margin-top: 10px;}
.mtop20 {margin-top: 20px;}
.mtop30 {margin-top: 30px;}
.mtop35 {margin-top: 35px;}
.mtop40 {margin-top: 40px;}
.mtop50 {margin-top: 50px;}
.mtop60 {margin-top: 60px;}
.mtop70 {margin-top: 70px;}
.mtop80 {margin-top: 80px;}
.mtop90 {margin-top: 90px;}
.mtop100 {margin-top: 100px;}

.mbottom0 {margin-bottom: 0;}
.mbottom5 {margin-bottom: 5px;}
.mbottom10 {margin-bottom: 10px;}
.mbottom20 {margin-bottom: 20px;}
.mbottom24 {margin-bottom: 24px;}
.mbottom25 {margin-bottom: 25px;}
.mbottom30 {margin-bottom: 30px;}
.mbottom35 {margin-bottom: 35px;}
.mbottom40 {margin-bottom: 40px;}
.mbottom50 {margin-bottom: 50px;}
.mbottom60 {margin-bottom: 60px;}
.mbottom70 {margin-bottom: 70px;}
.mbottom80 {margin-bottom: 80px;}
.mbottom90 {margin-bottom: 90px;}
.mbottom100 {margin-bottom: 100px;}
.mbottom110 {margin-bottom: 110px;}
.mbottom120 {margin-bottom: 120px;}

.mh10 {min-height: 10vh;}
.mh20 {min-height: 20vh;}
.mh30 {min-height: 30vh;}
.mh40 {min-height: 40vh;}
.mh50 {min-height: 50vh;}
.mh60 {min-height: 60vh;}
.mh70 {min-height: 70vh;}
.mh80 {min-height: 80vh;}
.mh90 {min-height: 90vh;}
.mh100 {min-height: 100vh;}


* {
  scrollbar-width: thin;
  scrollbar-color: #0B719C #fff;
}

*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #fff;
}

*::-webkit-scrollbar-thumb {
  background-color: #0B719C;
  border-radius: 20px;
  border: 3px solid #fff;
}

/*
    Main
*/

#main {background: #fff;}

/*
    Navigation
*/

section {z-index: 1;}

header {background-color: #fff; width: 100%; height: 159px; position: fixed; top: 0; z-index: 10;}

nav {padding: 40px 50px; transition: padding .5s;}
nav #logo {float: left;}
nav #logo img {width: 210px; transition: width .5s;}
nav #navigation {float: right; margin-top: 25px;}
nav #navigation ul {padding: 0; margin: 0;}
nav #navigation ul li {float: left; margin-left: 48px; position: relative; transition: margin-left .5s;}
nav #navigation ul li:first-child {margin-left: 0;}
nav #navigation ul li a, nav #navigation ul li a:active, nav #navigation ul li a:focus, nav #navigation ul li a:visited, nav #mobileNavigation ul li a, nav #mobileNavigation ul li a:active, nav #mobileNavigation ul li a:focus, nav #mobileNavigation ul li a:visited {color: #333; text-decoration: none; font-family: 'Yantramanav', sans-serif; font-size: 18px; font-weight: 500; transition: color .5s; line-height: 40px;}
nav #navigation ul li a:hover {color: #0B719C;}
nav #navigation ul li a.language {display: none;}
nav #navigation ul li ul#leistungen-flyout {display: none; position: absolute; top: 40px; right: -20px; width: 310px; padding: 0px 20px 10px; background-color: transparent;  transition: background-color .5s, top .5s;}
nav #navigation ul li ul#leistungen-flyout li {float: none; text-align: right; padding: 5px 0;}
nav #navigation ul li ul#leistungen-flyout li a {font-size: 16px;}

header.sticky {-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5); testbox-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);}
/*header.sticky nav {padding: 20px 50px;}*/
/*header.sticky nav #aerzte {font-size: 18px; width: 190px;}*/

#mobileNavButton {width: 36px; height: 28px; display: none; border: 1px solid #333; padding: 0px 7px; transition: border 0.5s; background: transparent; border-radius: 3px; margin: 21px auto 0;; transition: margin-top .5s, border-color .5s;;}
#mobileNavButton:hover, #mobileNavButton.active {cursor: pointer; border-color: #0B719C;}
#mobileNavButton span.icon-bar {border: 1px solid #333; width: 20px; display: block; margin: 4px 0; transition: border 0.5s, border-color .5s;}
#mobileNavButton:hover span.icon-bar, #mobileNavButton.active span.icon-bar {border-color: #0B719C;}

#mobileNavigation {display: none;}

#header {position: relative; width: 100%; height: 36vw; background: url(../img/einstieg_abstrakt_neu.jpg) no-repeat right bottom; background-size: cover; margin: 159px 0 0; transition: margin 0.5s}
body.impressum #header, body.datenschutz #header {background: none; height: auto;}
#header.sticky {margin: 99px 0 0;}
#header #header_news {width: 240px; height: 240px; position: absolute; right: 13%; bottom: 20%;}

.box5050-text {width: 50%; padding: 20px 0 0 50px; transition: width .5s, padding .5s;}
.box5050-pic {width: 50%; padding: 0 50px 0 0; transition: width .5s;}
.box5050-text.pull-right {width: 50%; padding: 20px 50px 0 0; transition: width .5s, padding .5s;}
.box5050-pic.pull-right {width: 50%; padding: 0 0 0 50px; transition: width .5s;}

.box5050-text ul {list-style-type: disc; padding: 0 0 0 20px;}
.box5050-text li {margin-bottom: 20px;}

#ueber-mich {background: #bdd2e5; padding: 90px 0;}

#referenzen {position: relative;}
#referenzen .container {z-index: 10; position: relative;}

#referenzen .referenzen-box {width: 100%; float: left; padding: 0 30px 0 0; text-align: center;}
#referenzen .referenzen-box h4 {margin: 24px 0 0; color: #2c1f8c;}
#referenzen .referenzen-box span.small {font-size: 14px; color: #000;}

#referenzen .flex-viewport, #referenzen .flex-direction-nav {padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
#referenzen a.flex-prev, #referenzen a.flex-next {position: absolute; width: 40px; height: 40px; line-height: 40px; font-size: 20px; background: none; top: 62%/*50%*/; /*margin-top: -20px;*/ text-align: center; border-radius: 0; padding: 6px 13px;}
#referenzen a.flex-prev {left: 20px;}
#referenzen a.flex-next {right: 20px;}
#referenzen .flex-control-paging {display: none;}

#teilnehmerstimmen {background: #bdd2e5; position: relative;}
#teilnehmerstimmen li p {text-align: center;}
#teilnehmerstimmen li p.teilnehmer {font-style: italic;}
#teilnehmerstimmen li p span.quot {font-size: 24px}
#teilnehmerstimmen li p span.quot.lquot {margin-right: 5px;}
#teilnehmerstimmen li p span.quot.rquot {margin-left: 5px;}
#teilnehmerstimmen a.flex-prev, #teilnehmerstimmen a.flex-next {position: absolute; width: 40px; height: 40px; line-height: 40px; font-size: 20px; top: 50%; margin-top: -20px; text-align: center;}
#teilnehmerstimmen a.flex-prev {left: 20px;}
#teilnehmerstimmen a.flex-next {right: 20px;}

/*#kontakt {}
#kontakt #kontakt_text {width: 50%; float: left; padding: 0 50px 0 0; transition: width .5s;}
#kontakt #kontakt_text img {margin: 0 0 50px;}
#kontakt_karte {height: 400px; width: 50%; float: left; padding: 0 0 0 50px; transition: width .5s, padding .5s;}
#kontakt a, #kontakt a:hover, #kontakt a:visited, #kontakt a:active, #kontakt a:focus {color: #333;}*/

footer {height: 60px; overflow: hidden;}
footer a, footer a:hover, footer a:visited, footer a:focus, footer a:active {font-weight: 400; font-size: 14px;}
footer #footer_copy {line-height: 60px;}
footer #footer_links {margin: 10px 0 0;}
footer #footer_links ul li {float: left; margin: 0 0 0 30px; }

#team .flex-viewport, #team .flex-direction-nav {padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
#team .flex-control-paging {display: none;}
#team a.flex-prev, #team a.flex-next {position: absolute; width: 40px; height: 40px; line-height: 40px; font-size: 20px; top: 50%; margin-top: -20px; text-align: center;}
#team a.flex-prev {left: 20px;}
#team a.flex-next {right: 20px;}

#CovGriPopupButton:hover {cursor: pointer;}

.modal-header {
    border-bottom: none;
    padding: 15px 30px;
}
.modal-body {
    padding: 15px 30px;
}
.modal-footer {
    border-top: none;
    padding: 15px 30px;
}
#MeldungModal button.btn {display: block; margin: 0 auto;}




/**
             * (optional) define here the style definitions which should be applied on the slider container
             * e.g. width including further controls like arrows etc.
             */
            .slider {}

            .frame {
                width: 80%;
                position: relative;
                font-size: 0;
                line-height: 0;
                overflow: hidden;
                white-space: nowrap;
                margin: 0 auto;
            }

            .slides {
                display: inline-block; width: 100%;
            }
            
            .slides li {
                position: relative;
                display: inline-block;
                vertical-align: top;
                width: 360px;
            }
            
            .prev, .next {
                position: absolute;
                top: 50%;
                margin-top: -25px;
                display: block;
                cursor: pointer;
                background: #0B719C;
                width: 40px;
                height: 40px;
                border-radius: 20px;
            }

            .next {
                right: 20px;
            }

            .prev {
                left: 20px;
            }

            .next svg, .prev svg {
                    width: 40px;
                    height: 40px;
            }

            /*.prev, .next {
                position: absolute;
                top: 50%;
                margin-top: -25px;
                display: block;
                cursor: pointer;
                font-size: 30px;
                color: #fff;
                background: #0B719C;
                width: 40px;
                height: 40px;
                text-align: center;
                padding: 2px 4px 0 0;
                border-radius: 20px;
                z-index: 1000000000000;
            }

            .next {
                right: 30px;
                padding: 2px 0 0 4px;
            }

            .prev {
                left: 30px;
            }

            .next svg, .prev svg {
                width: 25px;
            }*/




/*

    RESPONSIVE

*/

@media (max-width: 1500px){
    nav #logo img {width: 250px;}
    nav #aerzte {font-size: 18px;}
}

@media (max-width: 1440px){
    #oeffnungszeiten-tabelle table tr td {font-size: 20px;}
}

@media (max-width: 1480px){
    header {height: 175px;}    
    nav {padding: 30px;}
    nav #logo {float: none; width: 200px; margin: 0 auto;}
    nav #logo img {width: 200px;}
    nav #aerzte {font-size: 18px; float: none; width: 390px; margin: 10px auto 0; text-align: center;}
    nav #aerzte #aerzte-sep {display: inline-block; padding: 0 10px;}
    nav #navigation {float: none; margin: 20px auto 0; width: 820px;}
}

@media (max-width: 1260px){
    #sprechzeiten-text {padding: 0 0 0 15px;}
}

@media (max-width: 1200px){
    #header {height: 42vw;}
    
    #kontakt #kontakt_text .kontakt_text_body a, #kontakt #kontakt_text .kontakt_text_body span {font-size: 20px;}
    
    #top h1, #top p {text-align: center;}
}

@media (max-width: 1100px){
    .slides li {width: 300px;}
    
    #team .team-box {width: 33%; float: left; padding: 0 20px;}
    #team .team-box.docs {width: 50%; float: left; padding: 0 50px; margin-bottom: 30px}
}

@media (max-width: 1040px){
    #sprechzeiten-text {padding: 0 0 0 15px;}
}

@media (max-width: 1000px){
    #oeffnungszeiten-tabelle {padding: 0 0 0 30px;}
    #header {height: 50vw;}
    #leistungen .leistungen-box {width: 100%; margin: 0 0 20px; min-height: 0;}
    #geriatrie-image, #geriatrie-text, #e-rezept-image, #e-rezept-text, #rezept-telefon-image, #rezept-telefon-text, #kontakt #kontakt_text, #kontakt #kontakt_karte {width: 100%; padding: 0 30px;}
    #geriatrie-image, #e-rezept-image, #rezept-telefon-image, #kontakt #kontakt_text {margin: 0 0 60px;}
    
    
    
    .box5050-pic.pull-right, .box5050-pic.pull-left, .box5050-text.pull-right, .box5050-text.pull-left {width: 100%; float: none !important; padding: 0;}
    .box5050-pic {margin-bottom: 60px;}
}

@media (max-width: 992px){
    #sprechzeiten-text {width: 100%; padding: 0; margin: 0 0 30px;}
    #sprechzeiten-illu {display: block; width:30%;}
    #sprechzeiten-tabelle {width: 70%;}
    
    #leistung-jugendmedizin .leistung-jugendmedizin-illu {width: 40%;}
    #leistung-jugendmedizin .leistung-jugendmedizin-text {width: 60%;}
    
    #kontakt #kontakt_text, #kontakt #kontakt_illu {width: 100%;}
    #kontakt #kontakt_illu {margin-top: 50px;}
    
    nav #navigation {width: 710px;}
    nav #navigation ul li {margin-left: 30px;}
}

@media (max-width: 900px){
    nav.container {padding: 5px 15px; width: 100%;}
    .slides li {width: 290px;}
}

@media (max-width: 768px){
    #header {height: 60vw;}
    
    #oeffnungszeiten-text, #oeffnungszeiten-tabelle {width: 100%; padding: 0 30px;}
    #oeffnungszeiten-tabelle {margin-top: 50px;}
    
    #leistung-jugendmedizin .leistung-jugendmedizin-illu {width: 100%; padding: 0 20%; margin-bottom: 50px;}
    #leistung-jugendmedizin .leistung-jugendmedizin-text {width: 100%; padding: 0px 15px;}
    #leistung-kinderkardiologie .leistung-kinderkardiologie-text {width: 100%; padding: 0 15px; margin-bottom: 50px;}
    #leistung-kinderkardiologie .leistung-kinderkardiologie-illu {width: 100%; padding: 0 30%;}
    
    /*#team .team-box {width: 50%; padding: 0 35px 0 15px; margin: 0 0 30px;}*/
    
    #downloads h2 {padding: 0 15px;}
    
    footer {height: 140px;}
    #footer_links, #footer_copy {width: 100%; text-align: center;}
    #footer_links {margin-bottom: 50px;}
    footer #footer_links ul li {width: 100%; text-align: center; margin: 0; padding: 0;}
    
    nav #navigation {display: none;}
    nav #mobileNavigation {margin-top: 0; position: absolute; width: 100%; right: 0; top: 163px; background: #fff; transition: top .5s;}
    nav #mobileNavigation ul li {float: none; margin: 15px 0 10px 0; position: relative; text-align: center;}
    #mobileNavButton {display: block;}
    
    header.sticky nav #mobileNavigation {top: 163px;}
    
    .box5050 {padding: 0 50px;}
}



@media (max-width: 700px){
    
    
    #sprechzeiten-illu {width:35%;}
    #sprechzeiten-tabelle {width: 65%;}
    
    #team .team-box {width: 33%; float: left; padding: 0 10px;}
    #team .team-box.docs {width: 50%; float: left; padding: 0 20px; margin-bottom: 30px}
}

@media (max-width: 680px){
    #downloads #downloads_illu, #downloads #downloads_text {width: 100%; padding: 0 15px;}
    #downloads #downloads_text {margin: 0 0 30px;}
    #downloads #downloads_illu {padding: 0 15%;}
}

@media (max-width: 660px){
    #sprechzeiten-illu {display: none;}
    #sprechzeiten-tabelle, #sprechzeiten-tabelle table {width: 100%;}
    #sprechzeiten-tabelle {padding: 0 15px;}
}

@media (max-width: 500px){
    #header {height: 80vw;}
    header {height: 155px;}
    nav {padding: 20px 0;}
    header.sticky nav {padding: 20px 0;}
    nav #aerzte {font-size: 16px;}
    nav #aerzte #aerzte-sep {padding: 0px 5px;}
    
    #team .team-box {padding: 0 15px 0 15px;}
    
    #header #header_news {width: 160px; height: 160px;}
    
    #team .team-box {width: 33%; float: left; padding: 0 5px;}
    #team .team-box.docs {width: 50%; float: left; padding: 0 10px; margin-bottom: 30px}
    
    .box5050 {padding: 0 20px;}
    h1, h2.h1 {font-size: 38px;}
}

@media (min-width: 768px){
    .container {width: 90%; transition: width .5s;}
}

@media (min-width: 1200px){
    .container {width: 1200px;}
}

@media (min-width: 1440px){
    .container, #referenzen .flex-viewport, #referenzen .flex-direction-nav, .slider, .frame {
        width: 1440px;
    }
}