@media only screen and (max-width : 767px) {

    html, body {
        width: 100%;
    }

    body.mobileView .headerSpacer {
        height: 0;
    }

    body.mobileView #pageWrapper .headerOuterWrapper {
        position: relative;
        top: -4px;
    }

    #content .contentLeft, #content .contentRight, .teaserWrapper .rightSide,
    .teaserWrapper .assessment .rating, .teaserWrapper .assessment .comments,
    .contactTeaserWrapper .buttonWrapper, .teaserWrapper .leftSide,
    footer .leftSide, footer .rightSide, #mainMenu, #mainMenu > li,
    #mainMenu li .element, #mainMenu.elements-5 > li{
        width: 100%;
    }

    .teaserWrapper .leftSide, #mainMenu > li.active, #mainMenu > li:last-child, header .rightSide {
        margin: 0;
    }

    .mobileMenuBtn, #logo, header .rightSide{
        position: absolute;
    }

    .menuWrapper, #mainMenu, #mainMenu .element .label{
        position: relative;
    }


    #pageWrapper.toggle .headerOuterWrapper {
        top: -50px;
    }

    #pageWrapper header, .menuWrapper, #mainMenu, footer, #mainMenu > li, #mainMenu li .element,
    #mainMenu .element .label{
        height: auto !important;
    }

    /*.subMenuWrapper, .teaserWrapper .leftSide .categoryLabel,*/
    header .rightSide .searchBar, .printIcon{
        display: none;
    }

    .audioIcon {
        display: block;
        float: none;
        margin-bottom: 4px;
    }

    .bgHead {
        height: 9rem;
    }

    .bgHead .bgYellow, .footerElement {
        height: 4.5rem;
    }

    .bgHead .bgOrange {
        height: 3.45rem;
    }

    .bgHead .bgWhite {
        height: 1.1rem;
    }

    #pageWrapper.toggle {
        top: -2.95rem;
    }

    #headMenu > li{
        font-size: 0.8rem;
        height: 2.25rem;
        line-height: 1.5rem;
    }

    .root-4 #headMenu > li:first-of-type,.root-4 #headMenu > li:first-of-type .border,
    #headMenu > li.active, #headMenu li.active .border, #headMenu {
        height: 2.45rem;
        padding-top: 0.25rem;
    }

    .root-4 #headMenu > li a,
    #headMenu > li a {
        padding: 0.3rem;
    }

    .mobileMenuBtn {
        display: inline-block;
        height: 100px;
        left: 82%;
        top: 0.8rem;
        width: 18%;
    }

    #pageWrapper header {
        margin-bottom: 0.1rem;
        padding: 0;
        overflow: hidden;
    }

    .bgHeaderImage {
        height: 4.5rem;
        background-size: auto 100%;
    }

    .menuWrapper {
        padding-bottom: 0.2rem;
    }

    #logo {
        left: 5%;
        margin: 0.5rem 0 0;
        width: 6.3rem;
    }

    header .rightSide {
        left: 25%;
        text-align: right;
        width: 45%;
    }

    #mainMenu {
        -webkit-transition: max-height 0.4s ease-in-out;
        -moz-transition: max-height 0.4s ease-in-out;
        -ms-transition: max-height 0.4s ease-in-out;
        -o-transition: max-height 0.4s ease-in-out;
        transition: max-height 0.4s ease-in-out;

        padding-bottom: 0.5rem;
        left: 0;
        overflow: hidden;
        margin: 4rem 0 0;
    }

    #mainMenu.visible{
        max-height: 50rem;
        padding-bottom: 0;
    }

    .mainMenuBtn {
        display: inline-block;
        font-size: 0.7rem;
        width: 70%;
    }

    footer .centerPage {
        padding-bottom: 1rem;
    }

    footer .centerPage .csc-default {
        margin-bottom: 0;
    }

    footer .leftSide {
        margin-top: 2rem;
    }

    footer .menuLeft {
        margin-top: -1.3rem;
    }

    .footerElement {
        font-size: 80%;
        line-height: 5rem;
        margin-top: 2rem;
    }

    #mainMenu > li {
        float: left;
        margin: 0 0 0.1rem;
    }

    #mainMenu.visible > li {
        background-color: #ffdd6f;
    }
    .root-6 #mainMenu.visible > li {
        background-color: #CCF1CF;
    }
    .root-5 #mainMenu.visible > li {
        background-color: #F0DFE9;
    }

    #mainMenu .element .label {
        height: auto;
        left: 50%;
        margin-left: -25%;
    }

    #mainMenu .entry-165 .element .label {
        padding: 1.2rem 0 1.7rem;
    }

    #mainMenu .element > a > img {
        margin-left: 0.25rem;
        max-width: 100px;
    }

    #mainMenu.elements-5 .element > a > img {
        margin-top: 5px;
        max-width: 80px;
    }

    #mainMenu  > li{
        -webkit-transition: max-height 0.4s ease-in-out;
        -moz-transition: max-height 0.4s ease-in-out;
        -ms-transition: max-height 0.4s ease-in-out;
        -o-transition: max-height 0.4s ease-in-out;
        transition: max-height 0.4s ease-in-out;

        background-color: transparent;
        max-height: 0;
        overflow: hidden;
    }

    .subMenu {
        padding: 1rem 2rem 3rem;
        background-color: #f0f0f0;
        border-bottom: medium solid #ccd1d1;
    }

    .mobileView .headerOuterWrapper #mainMenu .subMenu .subEntry {
        display: none;
    }

    .mobileView .headerOuterWrapper #mainMenu .subMenu .subEntry:first-child,
    .mobileView .headerOuterWrapper #mainMenu .subMenu.active .subEntry{
        display: inline-block;
    }

    .subMenuToggleArrow {
        cursor: pointer;
        display: block;
        bottom: 1rem;
        font-size: 150%;
        height: 2rem;
        left: 50%;
        margin-left: -1rem;
        position: absolute;
        width: 2rem;
    }
    .subMenuToggleArrow.active::before{
        content: "t";
    }

    #mainMenu.visible li, #mainMenu > li.active {
        max-height: 2000px;
    }

    #mainMenu .subMenu {
        display: block;
    }

    #mainMenu li.active.entry-7{ background-color: #427eac; }
    #mainMenu li.active.entry-8{ background-color: #4ca452; }
    #mainMenu li.active.entry-9{ background-color: #eb4847; }
    #mainMenu li.active.entry-10{ background-color: #45ada8; }

    #mainMenu .element .label {
        display: block;
        font-size: 1.5rem;
        left: 55%;
        line-height: 1.5rem;
        margin-left: -35%;
        padding: 2.2rem 0;
        text-align: left;
    }
    #mainMenu.elements-5 .element .label{
        padding: 2.2rem 0;
    }
    #mainMenu li.entry-9 .element .label {
        padding: 2.2rem 0;
        width: 65%;
    }

    #mainMenu .entry-10 .element .label {
        padding: 2.2rem 0;
    }

    #mainMenu .searchBar {
        box-sizing: border-box;
        margin: 20px 0;
        padding: 0 7.5%;
    }

    .serachFieldWrapper {
        border-radius: 30px;
        height: 50px;
    }

    .serachFieldWrapper > input[type="text"] {
        height: 40px;
    }

    .searchBar input[type="submit"], .sendSearchForm {
        height: 40px;
        right: 6px;
        top: 5px;
        width: 40px;
    }

    .sendSearchForm {
        font-size: 1.5rem;
        line-height: 2.7rem;
    }

    .buttonWrapper .button {
        font-size: 1rem !important;
        padding: 0.2rem 1rem 0.3rem;
    }

    .teaserWrapper .title{
        margin-top: 0.5rem;
    }

    .teaserWrapper .assessment {
        padding: 0.4rem 0;
    }

    #mainMenu .subMenu li.active a {
        color: #fff;
    }

    .teaserImageGalleryWrapper .image.normalSizeImg, .teaserImageGalleryWrapper .galleryWrapper {
        height: 75px;
    }
    .teaserImageGalleryWrapper .arrow {
        font-size: 1.4rem;
        height: 2rem;
        line-height: 2.4rem;
        top: 60%;
        width: 2rem;
    }
    .teaserImageGalleryWrapper .arrow.icon-iabc-arrow-left { left: -0.5rem; }
    .teaserImageGalleryWrapper .arrow.icon-iabc-arrow-right { right: -0.5rem; }
    .teaserImageGalleryWrapper .image div.imageDesription { font-size: 0.6rem; }

    .akkordeonTabWrapper .entry .image{
        width: 100%;
        margin-bottom: 1rem;
    }
    .akkordeonTabWrapper .description, .akkordeonTabWrapper .assessments, .akkordeonTabWrapper .title{
        padding: 0;
    }
    #powerTip {
        left: 50% !important;
        margin-left: -170px;
        max-width: 320px;
    }
    #powerTip::after {
        content: inherit;
    }

    .bigTeaserWrapper .border {
        height: 4.4rem;
    }

    .bigTeaserWrapper .buttonWrapper {
        box-sizing: border-box;
        min-width: auto;
        padding: 0 1rem;
        right: 0;
        width: 100%;
    }

    .bigTeaserWrapper .button {
        font-size: 1.25rem !important;
        padding: 0.5rem 1rem 0.6rem;
    }

    .bigTeaserWrapper .imageWrapper {
        float: left;
        margin-right: 5%;
        position: relative;
        width: 45%;
    }

    .bigTeaserWrapper .contentWrapper {
        padding: 1rem;
    }

    .bigTeaserWrapper h2 {
        font-size: 1.25rem;
    }

    .root-5 #mainMenu li.active .element a .label,
    .root-6 #mainMenu li.active .element a .label{
        background-color: transparent;
        color: #fff;
    }

    .buttonCreator .buttonImageHolder, .buttonCreator .buttonImage {
        max-width: 10rem;
    }

    .slideshowEntriesWrapper .image > div {
        max-height: 200px;
    }

    .box100-768 {
        width: 100%;
    }

}