/*
=====================================================================================
::Table Of Content
1.) Media query for large Screen
2.) Media query for below 1024px(Tablet landscape)
3.) Media query for only for (Tablet landscape)
4.) Media query for below 950px(Tablet Portrate) 
5.) Media query for only for (Tablet Portrate)
6.) Media query for below 767px(Mobile landscape)
7.) Media query for only for 767px(Mobile landscape) 
8.) Media query for below 450px(Mobile Portrate)
9.) Media query for only for 767px(Mobile Portrate) 

=======================================================================================
*/
/*
-------------------------------------------
1- Media query for large Screen
-------------------------------------------
*/
@media(min-width:1050px) {
#banner{
	height:800px;
}
}


@media(max-width:1400px) {
    #logo {
        transform: translateX(0%);
    }
    
    #navigation li {
        margin-left: 0;
    }
    
    .flex-prev, .flex-next {
        left: -70px;
    }
    
    .flex-next {
        left: auto;
        right: -70px;
    }
}

@media(max-width:1300px) {
    .flex-direction-nav {
        position: absolute;
        width: 104px;
        left: 50%;
        bottom: 20%;
        transform: translateX(-50%);
    }
    
    .flex-prev, .flex-next {
        left: 0;
        top: 0;
        transform: translateY(0%);
    }
    
    .flex-next {
        left: auto;
        right: 0;
    }
}

@media all and (-webkit-min-device-pixel-ratio : 1.5),
 all and (-o-min-device-pixel-ratio: 3/2),
 all and (min--moz-device-pixel-ratio: 1.5),
 all and (min-device-pixel-ratio: 1.5) {
    .icon, 
    .icon-after:after, 
    .icon-before:before,
    .flex-prev:after, 
    .flex-next:after,
    .fp-controlArrow:after{
        background-image: url(../images/sprite@2x.png);
        background-repeat: no-repeat;
        background-size: 300px 600px;
    }
     
    #header.fixed #logo {
        background: url(../images/fixed-logo@2x.png) 0 0 no-repeat;
        background-size: 53px 51px;
    }
}

@media(max-width:1200px) {
    h1,
    h2{
        font-size: 4em;
        margin-bottom: 25px;
    }
    
    .main,
    .appointment-section{
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #header .main {
        padding: 30px 20px;
    }
    
    #navigation {
        right: 20px;
    }
    
    #navigation li:hover a {
        color: inherit;
    }
    
    #navigation li:hover:after,
    #header.fixed #navigation li:hover:after {
        display: none;
    }
    
    #header.fixed #logo {
        transform: translateX(0);
        margin-left: 20px;
    }
    
    .banner-content,
    .absolute-content .text{
        left: 20px;
        top: 48%;
    }
    
    .section .section-text {
        padding: 0 20px 15px 0;
    }
    
    .section figure.float-r.image {
        margin-right: 10px;
    }
    
    .appointment-section .float-r {
        margin-right: 0;
    }
    
    .go-back {
        margin-left: 15px;
    }
    
    .impressum-cta {
        margin-right: 20px;
    }
    .datenschutz-cta {
        margin-right: 20px;
    }
    
    .yellow-part {
        width: 300px;
    }
    
    .yellow-part .small-text {
        left: 15px;
    }
    
    .red-part {
        width: 475px;
        margin-left: -150px;
    }
    
    .red-part .line1 {
        left: 149px;
    }
    
    .red-part .line2 {
        left: 275px;
    }
    
    .red-part span.title, 
    .red-part .small-text {
        left: 220px;
    }
    
    .pink-part {
        width: 225px;
    }
    
    .grey-part {
        width: 153px;
    }
    
    .treatment-line {
        width: 700px;
    }
    
}

/*
-------------------------------------------
2-Media query for below 1024px(Tablet landscape)
-------------------------------------------
*/

@media(max-width:1024px) {

}
/*
-------------------------------------------
3-Media query for only (Tablet landscape)
-------------------------------------------
*/

@media(min-width:950px) and (max-width:1200px) {
    #navigation {
        padding-top: 26px;
    }
    
    #header.new-header #navigation {
        padding-top: 17px;
    }
    
    #navigation li {
        padding: 0 14px;
    }
    
    #header.new-header #navigation li {
        padding: 0 18px;
    }
    
    #navigation li a {
        font-size: 1.5em;
    }
    
    #navigation li.active:after, 
    #header.new-header #navigation li.active:after{
        top: 49px;
    }
    
    .outer-image {
        width: 40%;
    }
    
}
/*
-------------------------------------------
4-Media query for below 950px(Tablet Portrate) 
-------------------------------------------
*/

@media(max-width:950px) {
    .dash {
        display: inline;
    }
    
    .white-space {
        display: inline;
        white-space: normal;
    }
    
    .time-line {
        padding-bottom: 30px;
        margin-bottom: 70px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .time-line-wrap:after {
        width: 1024px;
    }
    
    .sos-head .main {
        padding-left: 65px;
        padding-right: 65px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .sos-head .main br {
        display: none;
    }
}
/*
-------------------------------------------
5-Media query for only (Tablet Portrate)
-------------------------------------------
*/

@media(min-width:768px) and (max-width:950px) {
    #logo {
        width: 125px;
        height: auto;
    }
    
    #navigation {
        padding: 10px 0 20px;
    }
    
    #navigation li {
        padding: 0 8px;
    }
    
    #navigation li:first-child {
        padding-left: 8px;
    }
    
    #navigation li a {
        font-size: 1.3em;
    }
    
    #navigation li.active:after {
        top: 35px;
    }
    
    #header.new-header .main {
        padding: 14px 0;
    }
    
    #header.new-header #logo {
        background-size: 45px 43px;
        width: 45px;
        height: 43px;
    }
    
    #header.new-header #navigation li.active:after {
        top: 43px;
    }
    
    #header.new-header #navigation li {
        padding: 0 12px;
    }
    
    .banner-content {
        width: 50%;
    }
    
    .tab-triger li {
        font-size: 1.5em;
    }
}
/*
-------------------------------------------
6-Media query for below 767px(Tablet landscape) 
-------------------------------------------
*/

@media(max-width:767px) {
    h1,h2 {
        font-size: 3.22em;
    }
    
    h1 small,
    h2 small{
        font-size: 0.5em;
        padding-bottom: 13px;
    }
    
    h2 small:last-child {
        padding: 8px 0 0;
    }
    
    p {
        font-size: 1.4em;
        line-height: 1.5;
        margin-bottom: 23px;
    }
    
    .float-l,
    .float-r {
        float: none!important;
    }
    
    .xs-show {
        display: block !important;
    }
    
    .xs-hidden {
        display: none !important;
    }
    
    .m-dash {
        display: inline;
    }
    
    .link {
        font-size: 1.4em;
        padding-bottom: 2px;
    }
    
    .navigation-open,
    .navigation-open body{
        overflow: hidden;
        height: 100%;
    }
    
     #wrapper {
        transition: all .5s ease;
        position: relative;
        left: 0;
    }
    
    .navigation-open #wrapper {
        left: -275px;
    }
    
    .main {
        padding-left: 25px;
        padding-right: 25px;
    }
    
    #logo {
        width: 176px;
        height: auto;
        margin-top: 9px;
        transition: all .5s ease;
    }
    
    .navigation-open #logo {
        transition: all 0s ease;
    }
    
    #logo img {
        width: 100%;
        display: block;
    }
    
    #header .main {
        padding: 19px 25px;
    }
    
    .navigation-open #header {
        position: fixed;
    }
    
    .navigation-open #header .main {
        padding-bottom: 0;
    }
    
    #header.new-header .main {
        padding: 12px 25px;
    }
    
    .navigation-open #header.new-header,
    .navigation-open #header{
        background: none !important;
    }
    
    .navigation-open #header.new-header .main {
        padding: 19px 25px;
        border: none;
        margin-bottom: 0;
    }
    
    #header.new-header #logo {
        background-size: 58px 56px;
        width: 58px;
        height: 56px;
        margin-left: 0;
        margin-top: 0;
    }
    
    .mobile-tab {
        float: right;
        margin-right: -3px;
        transition: all .5s ease;
    }
    
    #header.new-header .mobile-tab {
        padding-top: 8px;
    }
    
    .navigation-open #header.new-header .mobile-tab {
        padding-top: 0;
    }
    
    .mobile-tab li {
        float: left;
        padding-left: 7px;
    }
    
    .mobile-tab a {
        display: block;
        width: 40px;
        height: 40px;
        position: relative;
    }
    
    .menu-tab {
        padding: 10px 6px 9px;
    }
    
    .menu-tab span {
        position: relative;
        display: block;
        width: 28px;
        height: 21px;
    }
    
    .menu-icon:before,
    .menu-icon:after {
        content: '';
    }
    
    .menu-icon i,
    .menu-icon:before,
    .menu-icon:after{
        background: #554b4f;
        border-radius: 3px;
        position: absolute;
        width: 100%;
        height: 3px;
        left: 0;
        transition: all .5s ease;
    }
    
    .menu-icon i {
        opacity: 1;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .menu-icon:before {
        top: 0;
    }
    
    .menu-icon:after {
        bottom: 0;
        width: 50%;
    }
    
    .navigation-open .menu-icon:before,
    .navigation-open .menu-icon:after {
        background: #fff;
    }
    
    .navigation-open .menu-icon i {
        opacity: 0;
    }
    
    .navigation-open .menu-icon:before {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }
    
    .navigation-open .menu-icon:after {
        bottom: 50%;
        transform: translateY(50%) rotate(45deg);
        width: 100%;
    }
    
    .tel-tab:after {
        background-position: 0 -150px;
        width: 30px;
        height: 30px;
        position: absolute;
        left: 5px;
        top: 5px;
        transform: scale(1.1);
    }
    
    .navigation-open .tel-tab:after {
        background-position: -32px -150px;
    }
    
    #navigation {
        background: #554b4f;
        position: fixed;
        width: 275px;
        height: 100%;
        padding: 65px 0 10px;
        right: 0;
        top: 0;
        z-index: 99;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(275px);
    }
    
    .navigation-open #navigation {
        transform: translateX(0);
    }
    
    #navigation li {
        float: none;
        padding: 13px 0;
    }
    
    #navigation li:first-child {
        padding-left: 0;
    }
    
    #navigation li a {
        border-left: 2px transparent solid;
        display: block;
        font-size: 2.1em;
        line-height: 1.334;
        position: relative;
        color: #fff;
        padding: 0 46px;
    }
    
    #navigation li.active a {
        border-color: #dfc08d;
        color: #dfc08d;
    }
    
    #navigation li.active:after, 
    #navigation li:hover:after {
        display: none;
    }
    
    #navigation .impressum-tab {
        padding-top: 50px;
    }
    #navigation .datenschutz-tab {
        padding-top: 50px;
    }
    
    #navigation .impressum-tab:before {
        content: '';
        border-top: 2px rgba(255,255,255,0.5) solid;
        position: absolute;
        width: 28px;
        left: 48px;
        top: 30px;
    }
    #navigation .datenschutz-tab:before {
        content: '';
        border-top: 2px rgba(255,255,255,0.5) solid;
        position: absolute;
        width: 28px;
        left: 48px;
        top: 30px;
    }
    
    #navigation .impressum-tab a {
        font-size: 1.7em;
        color: rgba(255,255,255,0.5);
    }
    #navigation .datenschutz-tab a {
        font-size: 1.7em;
        color: rgba(255,255,255,0.5);
    }
    
    #navigation .impressum-tab.active a {
        border-color: transparent;
    }
    #navigation .datenschutz-tab.active a {
        border-color: transparent;
    }
    
    .flex-direction-nav {
        height: 45px;
        bottom: 30px;
        z-index: 2;
    }
    
    .banner-content {
        width: 100%;
        padding: 0 25px;
        left: 0;
        top: 158px;
        transform: translateY(0%);
    }
    
    .section {
        padding: 40px 0 55px;
    }
    
    .section figure.image {
        background: #fff;
        float: none;
        width: 100%;
    }
    
    .section .section-text {
        float: none;
        width: 100%;
        padding: 37px 0 85px;
    }
    
    .section .section-text.float-l {
        padding-right: 0;
    }
    
    .absolute-content .text {
        width: 100%;
        padding: 0 25px;
        left: 0;
        top: 32px;
        transform: translateY(0%);
    }
    
    .outer-image {
        position: static;
        width: 100%;
        top: 0;
        transform: translateY(0%);
    }
    
    .section .absolute-content {
        position: static;
        height: auto;
    }
    
    .section .absolute-content .section-text {
        position: static;
        transform: translateY(0%);
    }
    
    .two-col .block {
        width: 100%;
        float: none;
        padding-right: 0;
    }
    
    .with-icon.two-col .block:nth-child(2n+2) {
        padding-left: 0;
    }
    
    .with-icon.two-col .block {
        padding: 0;
        margin-bottom: 50px;
    }
    
    .two-col.with-icon {
        padding-top: 15px;
    }
    
    #footer {
        padding: 60px 0 6px;
    }
    
    .appointment-section {
        padding: 3px 25px 25px;
        padding-left: 25px;
        padding-right: 25px;
        margin-bottom: 6px;
    }
    
    #footer h4 {
        font-size: 2.1em;
        float: none;
        padding: 25px 0;
    }
    
    .btn {
        font-size: 1.4em;
        display: block;
        text-align: center;
    }
    
    .btn-container li:first-child {
        width: 42%;
    }
    
    .btn-container li {
        width: 55%;
    }
    
    .call-label {
        font-size: 1.4em;
        padding-right: 24px;
    }
    
    .call-detail a {
        font-size: 2.7em;
        padding-left: 19px;
    }
    
    .go-back {
        margin-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .go-back:after {
        top: 20px;
    }
    
    .impressum-cta {
        margin-right: 25px;
        padding: 10px 0;
    }
    .datenschutz-cta {
        margin-right: 25px;
        padding: 10px 0;
    }
    
    .float-image {
        float: none;
        width: 100%;
        padding-right: 0;
    }
    
    .two-col .block:nth-child(2n+2) {
        padding-left: 0;
        padding-top: 23px;
    }
    
    .tab-area {
        padding-top: 8px;
    }
    
    .tab-area .main {
        padding: 0;
    }
    
    .tab-triger {
        position: static;
        transform: translateY(0%);
        margin-top: 0;
    }
    
    .tab-triger li {
        font-size: 1.6em;
        line-height: 71px;
        width: 100%;
        float: none;
        border: none;
        border-top: 1px #fff solid;
    }
    
    .tab-target .main {
        padding: 42px 25px 0;
    }
    
    .tab-area h3 {
        font-size: 2.8em;
        margin-bottom: 25px;
    }
    
    .tab-area h3 br {
        display: none;
    }
    
    .tab-area p {
        margin-bottom: 23px;
    }
    
    .tab-area p:last-child {
        margin-bottom: 0;
    }
    
    .yellow-part:after {
        height: 12px;
    }
    
    .time-line-container > div,
    .red-part:after, 
    .pink-part:after, 
    .grey-part:after{
        height: 6px;
    }
    
    .line-divide {
        height: 20px;
        top: -7px;
    }
    
    .time-line-wrap:after {
        top: 6px;
    }
    
    .time-line-container .bullet {
        width: 27px;
        height: 27px;
        top: -11px;
    }
    
    span.title {
        font-size: 1.7em;
        top: -45px;
    }
    
    .small-text {
        font-size: 1.2em;
        top: 32px;
    }
    
    .medium-text {
        font-size: 1.35em;
        top: -60px;
        left: -14px;
    }
    
    .yellow-part {
        width: 292px;
    }
    
    .red-part {
        width: 488px;
        margin-left: -160px;
    }
    
    .yellow-part .small-text {
        left: 30px;
    }
    
    .red-part .line1 {
        left: 158px;
    }
    
    .grey-part .medium-text {
        top: -44px;
    }
    
    .treatment-line {
        width: 714px;
        padding-top: 35px;
        margin-top: 70px;
        margin-left: 130px;
        height: 47px;
    }
    
    .default li {
        font-size: 1.4em;
        padding-left: 17px;
        margin-bottom: 4px;
    }
    
    .default li:after {
        top: 8px;
    }
}
/*
-------------------------------------------
7-Media query for only (Mobile Landscape)
-------------------------------------------
*/

@media(min-width:450px) and (max-width:767px) {}
/*
-------------------------------------------
8-Media query for below 450px(Mobile Portrate) 
-------------------------------------------
*/

@media(max-width:767px) {}
/*

-------------------------------------------
9-Media query for only (Mobile Portrate)
-------------------------------------------
*/

@media (min-width: 320px) and (max-width: 450px) {}