@charset "UTF-8";
/* media CSS */


@media only screen and (max-width: 1640px) { /*________________________________________________________________________ : 1.2 */
    /* TYPO */
    h1 {
        font-size: 3.5em;
    }
    h2,
    #main #welcome p {
        font-size: 2.7em;
    }
    h3 {
        font-size: 2.3em;
    }
    h4,
    #header p,
    #footer p,
    #main p, 
    #main ul,
    #sub-nav ul > li > a {
        font-size: 2em;
    }
    #menu ul > li > a {
        font-size: 1.6em;
    }
    
    /* PROPORTIONS */
    /* container */
    .inside.narrow {
        width: 88.5em;
    }
    .inside.wide {
        width: 125.25em;
    }
    #main section {
        padding-top: 8.3em;
        padding-bottom: 13.3em;
    }
    section#welcome,
    section#praxis {
        padding-bottom: 5em;
    }
    section#news-start {
        padding-top: 11.3em;
    }
    
    /* header */
    #header {}
    #header-top {
        height: 19.2em;
    }
    #header-top.nav-up {
        top: -21.7em;
    }
    #header-top .logo {
        width: 34.2em;
        margin-left: 7em;
        margin-top: 0.7em;
    }
    #header-top .header-right {
        margin-right: 8.2em;
    }
    #header-slider {
        height: 70.8em;
    }
    #header-banner {
        height: 51.6em;
    }
    #slideshow,
    #header-banner {
        margin-top: 19.2em !important;
    }
    #header-slider .header-info {
        top: 19.2em;
    }
    #menu ul {
        margin-top: 2.7em;
        margin-bottom: 3em;
    }
    #menu ul > li {
        margin-left: 5.2em;
    }
    
    /* main */
    /* leistungen accordeon */
    #accordeon div.trigger {
        min-height: 10em;
        padding-top: 1.7em;
        padding-bottom: 1.7em;
    }
    #accordeon div.trigger span {
        top: 3.3em;
        width: 3.3em;
        height: 3.3em;
    }
    /* praxis team */
    #team-list .item {
        padding: 6.3em 0;
    }
    /* termine */
    #appointment-list {
        margin-top: 8em;
    }
    #appointment-list .item {
        margin-bottom: 5.5em;
    }
    #appointment-list .item .icon {
        height: 8.3em;
        margin-bottom: 2.2em;
    }
    #appointment-list .item .icon.large img {
        height: 8em;
    }
    #appointment-list .item .icon.medium img {
        height: 6.7em;
    }
    #appointment-list .item .icon.small img {
        height: 5em;
    }
    /* aktuelles */
    .news-item {
        margin-top: 10em;
    }
    /* kontakt */
    .responsive-maps {
        height: 27.5em;
        margin-top: 10em;
        margin-bottom: 6.7em;
    }
    
    /* footer */
    #footer-top {
        height: 6.5em;
    }
    #footer-bottom {
        height: 22.1em;
        padding-bottom: 6.8em;
        padding-left: 12.5em;
        padding-right: 8.2em;
    }
    #sub-nav ul > li {
        margin-left: 2.7em;
    }
}



@media only screen and (max-width: 1360px) { /*________________________________________________________________________ : 1.2 */
    /* TYPO */
    h1 {
        font-size: 3em;
    }
    h2,
    #main #welcome p {
        font-size: 2.4em;
    }
    h3 {
        font-size: 2em;
    }
    h4,
    #header p,
    #footer p,
    #main p, 
    #main ul,
    #sub-nav ul > li > a {
        font-size: 1.8em;
    }
    #menu ul > li > a {
        font-size: 1.4em;
    }
    #main ul li:before {
        font-size: 1em;
    }
    
    /* PROPORTIONS */
    /* container */
    .inside.narrow {
        width: 73.8em;
    }
    .inside.wide {
        width: 104.4em;
    }
    #main section {
        padding-top: 6.9em;
        padding-bottom: 11.1em;
    }
    section#welcome,
    section#praxis {
        padding-bottom: 4.2em;
    }
    section#news-start {
        padding-top: 9.4em;
    }
    
    /* header */
    #header {}
    #header-top {
        height: 16em;
    }
    #header-top.nav-up {
        top: -18em;
    }
    #header-top .logo {
        width: 28.5em;
        margin-left: 5.8em;
        margin-top: 0.6em;
    }
    #header-top .header-right {
        margin-right: 6.8em;
    }
    #header-slider {
        height: 59em;
    }
    #header-banner {
        height: 43em;
    }
    #slideshow,
    #header-banner {
        margin-top: 16em !important;
    }
    #header-slider .header-info {
        top: 16em;
    }
    #menu ul {
        margin-top: 2.3em;
        margin-bottom: 2.5em;
    }
    #menu ul > li {
        margin-left: 4.3em;
    }
    
    /* main */
    /* leistungen accordeon */
    #accordeon div.trigger {
        min-height: 8.3em;
        padding-top: 1.4em;
        padding-bottom: 1.4em;
    }
    #accordeon div.trigger span {
        top: 2.8em;
        width: 2.8em;
        height: 2.8em;
    }
    /* praxis team */
    #team-list .item {
        padding: 5.3em 0;
    }
    /* termine */
    #appointment-list {
        margin-top: 6.7em;
    }
    #appointment-list .item {
        margin-bottom: 4.6em;
    }
    #appointment-list .item .icon {
        height: 6.9em;
        margin-bottom: 1.8em;
    }
    #appointment-list .item .icon.large img {
        height: 6.7em;
    }
    #appointment-list .item .icon.medium img {
        height: 5.6em;
    }
    #appointment-list .item .icon.small img {
        height: 4.2em;
    }
    /* aktuelles */
    .news-item {
        margin-top: 8.3em;
    }
    /* kontakt */
    .responsive-maps {
        height: 22.9em;
        margin-top: 8.3em;
        margin-bottom: 5.6em;
    }
    
    /* footer */
    #footer-top {
        height: 5.4em;
    }
    #footer-bottom {
        height: 18.4em;
        padding-bottom: 5.7em;
        padding-left: 10.4em;
        padding-right: 6.8em;
    }
    #sub-nav ul > li {
        margin-left: 2.3em;
    }
}



@media only screen and (max-width: 1180px) { /*________________________________________________________________________ FLUID */
    /* container */
    .inside.narrow,
    .inside.wide {
        width: 100%;
        box-sizing: border-box;
    }
    .inside.wide {
        padding-left: 8%;
        padding-right: 8%
    }
    .inside.narrow {
        padding-left: 14%;
        padding-right: 14%
    }
    /* header */
    #header-top .logo {
        margin-left: 5.2em;
    }
    #header-top .header-right {
        margin-right: 6em;
    }
    #menu ul > li {
        margin-left: 2.8em;
    }
    /* footer */
    #footer-bottom {
        padding-left: 8%;
        padding-right: 8%;
    }
    #sub-nav ul > li {
        display: block;
        margin-left: 0;
        text-align: right;
    }
    #sub-nav ul > li > a {
        position: relative;
    }
}



@media only screen and (max-width: 980px) { /*________________________________________________________________________ RESP. MENU / TABLET */
    /* menu responsive */
    .open-nav,
    .close-nav {
	    display: block;
    }
    #menu.toggle {
        width: 80%;
    }
    #menu {
        position: fixed;
        width: 0em;
        height: 100%;
        top: 0;
        left: 0;
        overflow-x: hidden;
        background: rgba(0,165,188,1);
        transition:0.5s ease;
        z-index: 999;
    }
    #menu ul {
        width: 100%;
        margin-top: 10em;
        padding: 2em;
        box-sizing: border-box;
    }
    #menu ul > li {
        display: block;
        margin-left: 0;
        margin-bottom: 3em;
    }
    #menu ul > li:first-child {
        display: block !important;
    }
    #menu ul > li > a {
        position: relative;
        font-size: 1.8em;
        color: rgb(255,255,255);
    }
    #menu ul > li > a:after {
        background-color: rgb(255,255,255);
    }

    #menu ul > li > a:hover,
    #menu ul > li > a:active,
    #menu ul > li > a:focus,
    #menuul > li.current-menu-item > a,
    #menu ul > li.current-page-ancestor > a {
    }
    
    /* TYPO */
    #main #welcome p {
        font-size: 1.8em;
    }
    
    /* header */
    #header-top {
        height: 18em;
        flex-direction: column;
        justify-content: flex-end;
    }
    #header-top.nav-up {
        top: -20em;
    }
    #header-top .logo {
        margin-left: 0;
        margin-top: 0;
    }
    #header-top .header-right {
        text-align: center;
        margin-right: 0;
        margin-bottom: 2em;
        margin-top: 2em;
    }
    #header-slider {
        height: 58em;
    }
    #header-banner {
        height: 40em;
    }
    #slideshow,
    #header-banner {
        margin-top: 18em !important;
    }
    #header-slider .header-info {
        top: 18em;
    }
    
    /* container main */
    #main section {
        padding-top: 6em;
        padding-bottom: 9em;
    }
    section#welcome,
    section#praxis,
    section#team {
        padding-bottom: 4em;
    }
    section#news-start {
        padding-top: 6em;
    }
    #accordeon div.trigger,
    .toggle-content {
        padding-right: 8%;
    }
    #team-list .item:nth-child(odd) .team-data {
        padding-right: 0;
    }
    #team-list .item:nth-child(even) .team-data {
        padding-left: 0;
    }
    #appointment-list .item {
        width: 46.10778443113773%; /* 693/1503 */
    }
    .news-item {
        margin-top: 6em;
    }
    
    /* footer */
    #footer-top {
        text-align: center;
        height: auto;
        padding: 1.8em 2em;
    }
    #footer-top br {
        display: block;
    }
    #footer-top .contact a.fon,
    #footer-top .contact a.mail {
        background-position: 0 0.1em;
        padding-left: 2em;
    }
    #footer-bottom {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: auto;
        padding-bottom: 3em;
        padding-top: 6em;
    }
    #sub-nav ul {
        margin-top: 2em;
    }
    #sub-nav ul > li {
        display: inline-block;
        margin-right: 2.3em;
        text-align: left;
    }
}



@media only screen and (max-width: 560px) { /*________________________________________________________________________ SMARTPHONE */
    /* TYPO */
    h1 {
        font-size: 2.8em;
    }
    h2 {
        font-size: 2.3em;
    }
    h3 {
        font-size: 1.9em;
    }
    h4,
    #header p,
    #footer p,
    #main p, 
    #main ul,
    #main #welcome p,
    #sub-nav ul > li > a {
        font-size: 1.7em;
    }
    #main p, #main ul {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    
    /* header */
    #header-top {
        height: 21em;
    }
    #header-top.nav-up {
        top: -22em;
    }
    #header-top .logo {
        width: 26em;
    }
    #header-slider {
        height: 49em;
    }
    #header-banner {
        height: 28em;
    }
    #slideshow,
    #header-banner {
        margin-top: 21em !important;
    }
    #header-slider .header-info {
        top: 21em;
    }
    #header-top .header-right .contact br {
        display: block;
    }
    #header-top .header-right .contact a.fon {
        background-position: 0 0.1em;
        padding-left: 2em;
    }
    .open-nav {
        top: 2em;
        left: 2em;
    }
    .close-nav {
        top: 2em;
        right: 2em;
    }
    
    /* container main */
    .inside.narrow {
        padding-left: 8%;
        padding-right: 8%
    }
    #main section {
        padding-bottom: 8em;
    }
    section#welcome,
    section#praxis,
    section#team {
        padding-bottom: 3em;
    }
    #accordeon div.trigger,
    .toggle-content {
        padding-right: 4.8em;
    }
    #accordeon div.trigger span {
        top: 1.6em;
        width: 2.4em;
        height: 2.4em;
    }
    #praxis-collage .col-01 {
        width: 45.410628019323674%; /* 564/1242 */
    }
    #praxis-collage .col-02 {
        width: 53.3011272141707%; /* 662/1242 */
    }
    #praxis-collage .col-03 {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }
    #praxis-collage div .col-flex .item {
        width: 49.355877616747186%; /* 613/1242 */
    }
    #praxis-collage .col-03 img.margin {
        margin-top: 1.288244766505636%; /* 16/1242 */
        margin-bottom: 1.288244766505636%; /* 16/1242 */
    }
    #team-list .item:nth-child(odd) .inside,
    #team-list .item:nth-child(even) .inside {
        flex-direction: column;
    }
    #team-list .item:first-child {
        padding-top: 0;
    }
    #team-list .item .team-image {
        width: 49.355877616747186%;
        margin-bottom: 4em;
    }
    #team-list .item .team-data {
        width: 100%;
    }
    #team-list h3 {
        padding-top: 1em;
    }
    #appointment-list .item {
        width: 100%;
    }
    
    /* footer */
    #footer-bottom {
        text-align: center;
        align-items: center;
    }
    #footer-bottom span.separator {
        display: none;
    }
    #footer-bottom span.nowrap {
        display: block;
    }
    #sub-nav ul > li {
        display: block;
        text-align: center;
        margin-right: 0;
        margin-bottom: 0.8em;
    }
}



@media only screen and (max-width: 380px) {
    /* TYPO */
    h1 {
        font-size: 2.7em;
    }
    h2 {
        font-size: 2.2em;
    }
    h3 {
        font-size: 1.8em;
    }
    h4,
    #header p,
    #footer p,
    #main p, 
    #main ul,
    #main #welcome p,
    #sub-nav ul > li > a {
        font-size: 1.6em;
    }
    
    /* header */
    #header-slider {
        height: 45em;
    }
    #header-banner {
        height: 24em;
    }
}