nav.mobile { display: none; }

@media screen and (min-width: 1440px){
    * p,
    article p, article li,
    #Introduction p,
    #TeaserSlider p {
        font-size: 20px;
    }

    #OfficePage .gridElement.one-one {
        padding-bottom: 33.3333333333333333%;
    }

    .gridElement.one-one {
        padding-bottom: 33.3333333333333333%;
    }
}

@media screen and (min-width: 1281px){
    #TeaserSlider, #TeaserSlider .slides,
    #TeaserSlider div.slides .slide,
    #TeaserSlider > div > div,
    #TeaserSlider .teaserContentWrapper,
    #TeaserSlider .teaserImage
    {
        height: 0;
        padding-bottom: 45%;
    }

}

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

    nav li ul.subnav,
    nav li, nav a {
        width: 150px;
    }

    nav li ul.subnav,
    nav li, nav a { width: 120px; }
    nav.desktop ul {
        position: absolute;
        margin: 0;
        right: 0;
    }

    #ContentPage article header { overflow: hidden; }

    #ContentPage article header p.shortInfo,
    #ContentPage article header a.button {
        position: relative;
        float: left;
        clear: both;
    }

    #ContentPage article header a.button { margin-top: 0; }

    #ContentPage h1 { font-size: 42px; }


    #TeaserSlider, #TeaserSlider .slides,
    #TeaserSlider div.slides .slide,
    #TeaserSlider > div > div,
    #TeaserSlider .teaserContentWrapper,
    #TeaserSlider .teaserImage
    {
        height: 0;
        padding-bottom: 45%;
    }


    #ContentPage article { padding: 80px 5% 95px 5%; }

}


@media screen and (min-width: 1024px){
    #ContentPage .detailImage {
        /*max-width: 50%;*/
        /*background-size: 500px auto;*/
    }
}

@media screen and (max-width: 1024px){
    #OfficePage #ProductSlider {
        width: 50%;
    }

    #ProductSlider .bxslider,
    #ProductSlider .bx-wrapper,
    #ProductSlider .bx-viewport,
    #ProductSlider .bxslider li
    {
        /*height: 1px;*/
        height: calc((100vw - 15vw) / 100 * 50);
    }

    #SideBar ul { margin: 55px 15% 0 15%; }

    #ContentPage article, #ContentPage form {
        background: #f3f3f3;
        top: 0;
        bottom: 0;
        height: auto;
    }
    #ContentPage article { padding: 60px 6% 95px 5%; }
    form { padding: 0; }

    #ContentPage article header a.button {
        margin-top: 0;
    }

    #ContentPage section {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
    }

    #ContentPage article, #ContentPage form { order: 2;-webkit-order: 2; }
    #ContentPage .detailImage { order: 1; -webkit-order: 1;}

    #ContentPage article, #ContentPage form {
        width: 100%;
        position: relative;
        margin: auto;
        top: 0;
        bottom: auto;
        order: 2;
        -webkit-order: 2;

    }

    form span, form input {
        height: 40px;
        line-height: 40px;
    }

    form textarea { padding-top: 40px; }

    #ContentPage article { padding: 40px 5% 40px 5%; }
    #ContentPage form { padding: 40px 0 0 0; }

    #ContentPage .detailImage{
        background-image: url('/img/detail-preview.jpg');
        position: relative;
        width: 100%;
        height: 0;
        left: 0;
        padding-bottom: 50%;
        order: 1;
        -webkit-order: 1;
    }

    #ContentPage h2, #ContentPage h2::after { margin: 20px 0 20px 0; }
    #ContentPage p { margin-bottom: 40px; }

    /*main#ContentPage ~ footer { position: fixed; }*/

    #ImageSlider h3, #ContentPage h1 { font-size: 46px; }
    /*h1 { font-size: 40px; }*/

    #TeaserSlider .teaserContent { width: 80%; }

    #Index .gridElement[data-id="01"] { order: 1; -webkit-order: 1; }
    #Index .gridElement[data-id="02"] { order: 2; -webkit-order: 2; }
    #Index .gridElement[data-id="03"] { order: 4; -webkit-order: 4; }
    #Index .gridElement[data-id="04"] { order: 3; -webkit-order: 3; }
    #Index .gridElement[data-id="05"] { order: 5; -webkit-order: 5; }
}

@media screen and (max-width: 1024px){
    /*.slideContent.teaserImage:nth-of-type(2) {display:none;}*/

    #ProductSlider .bxslider,
    #ProductSlider .bx-wrapper,
    #ProductSlider .bx-viewport,
    #ProductSlider .bxslider li,
    #OfficePage #ProductSlider {
        height: 50vw;
    }

    #TeaserSlider, #TeaserSlider .slides,
    #TeaserSlider div.slides .slide,
    #TeaserSlider > div > div
    {
        height: 0;
        padding-bottom: 66.6666666666666666%;
    }

    #TeaserSlider div.slides .slide {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        -webkit-flex-direction: row;
    }

    #TeaserSlider .teaserContentWrapper,
    #TeaserSlider .teaserImage {
        position: relative;
        width: 50%;
        padding-bottom: 66.6666666666666666%;
    }

    #TeaserSlider .teaserContentWrapper { order: 1; -webkit-order: 1; }
    #TeaserSlider .teaserImage { order: 2; -webkit-order: 2; }


    #OfficePage #ProductSlider {
        width: 50%;
        height: 50vw;
    }

    /*#ProductSlider, #ProductSlider .slides,*/
    /*#ProductSlider div.slides .slide,*/
    /*#ProductSlider > div > div,*/
    /*#ProductSlider .teaserContentWrapper,*/
    /*#ProductSlider .teaserImage*/
    /*{*/
        /*height: 1px;*/
        /*padding-bottom: 33.33%;*/
    /*}*/

    /*#ProductSlider div.slides .slide { width: 33.33% }*/

    aside { display: none; }
    #OfficePage section,
    section#grid.officePage,
    section#grid.officeDetailPage {
        width: 100%;
        margin-left: 0;
    }

    #ContentPage article { padding: 30px 6% 45px; }
    #ContentPage h2::after { margin: 20px 0; }
    #ContentPage p { margin-bottom: 50px; }




}

@media screen and (max-width: 768px){
    main { margin-top: 40px; }


    /*.gridElement.one-one,*/
    /*.gridElement.one-two,*/
    /*.gridElement.two-one {*/
        /*width: 100%;*/
    /*}*/

    /*#ImageSlider h3,*/
    /*h3, h1,*/
    /*.gridContent h2,*/
    /*#ContentPage h1 {*/
        /*font-size: 40px;*/
    /*}*/

    /*#ImageSlider p, p,*/
    /*.gridContent p {*/
        /*font-size: 22px;*/
        /*line-height: 30px;*/
    /*}*/

    /*.home #ImageSlider, .home #ImageSlider .slides,*/
    /*.home #ImageSlider div.slides .slide,*/
    /*.home #ImageSlider > div > div,*/
    /*.home #ImageSlider .slideContent {*/
        /*width: 100% !important;*/
    /*}*/

    /*.home #ImageSlider .slideContent {*/
        /*height: 50vw !important;*/
    /*}*/

    #ImageSlider { height: 100vw; }

    .home #ImageSlider .slideContent {
        height: 50vw !important;
        width: 100vw;
    }

    #TeaserSlider, #TeaserSlider .slides,
    #TeaserSlider div.slides .slide,
    #TeaserSlider > div > div
    {
        height: 0;
        padding-bottom: 140%;
    }

    #TeaserSlider .teaserContentWrapper,
    #TeaserSlider .teaserImage {
        height: 0;
        padding-bottom: 70%;
    }

    #ImageSlider .teaserContent {
        width: 100%;
        /*margin-left: -50%;*/

        position: absolute;
        margin: auto;
        left: 0;
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    #ImageSlider .teaserContent h3,
    #ImageSlider .teaserContent p {
        text-align: center;
    }

    #ImageSlider .teaserContent h3 {
        padding: 0 0 20px 0;
    }

    #ImageSlider .teaserContent p {
        padding: 0 0 10px 0;
    }

    #ImageSlider .teaserContent .button {
        position: relative;
        height: 40px;
        line-height: 40px;
    }

    #ImageSlider, #ImageSlider .slides,
    #ImageSlider div.slides .slide
    /*#ImageSlider > div > div*/
    {
        /*height: 0;*/
        /*height: 100vw !important;*/
        width: 100%;
        padding-bottom: 100vw;
    }

    #ImageSlider,
    #ImageSlider .slides,
    #ImageSlider div.slides .slide,
    /*#ImageSlider > div > div,*/
    #ImageSlider .teaserContentWrapper,
    #ImageSlider .teaserImage {
        height: 100vw !important;
    }

    #OfficePage h1 {
        font-size: 28px;
    }

    #TeaserSlider p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 24px;
        max-height: 70px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 80%;
        margin: 0 auto 20px auto;
        padding: 0;
    }

    #ProductSlider .slide .overlay .button { opacity: 1; }

    main#ContentPage { margin-bottom: 40px; }

    nav.desktop { display: none; }

    nav.mobile {
        position: fixed;
        display: block;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        /*right: 0;*/
        /*bottom: 0;*/

        -webkit-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);

        z-index: 999;

        overflow: scroll;
        overflow-x: hidden;

        background: #ffffff;
    }

    nav.mobile, main.mobile {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;

        /*transform: translate3d(0,0,0);*/
        /*-ms-transform: translate3d(0,0,0);*/
        /*-o-transform: translate3d(0,0,0);*/
        /*-webkit-transform: translate3d(0,0,0);*/
    }

    nav.mobile.active{
        -webkit-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
    }
    main.mobile.active {
        position: absolute;
        margin-left: 30%;
        /*transform: translate3d(0,0,0);*/
        /*transform: translateX(100%);*/
        /*-webkit-transform: translateX(100%);*/
    }

    /*nav li:hover ul { display: none; }*/

    nav.mobile li {
        background: transparent;
        height: 50px;
        line-height: 50px;

        -webkit-transition: height 0.3s ease;
        -moz-transition: height 0.3s ease;
        -ms-transition: height 0.3s ease;
        -o-transition: height 0.3s ease;
        transition: height 0.3s ease;
    }

    nav.mobile li.active {
        height: 200px;
    }

    nav.mobile li ul {
        position: relative;
        top: 70px;
        display: block;
        height: 0;
        overflow: hidden;
        z-index: 999;
    }

    nav.mobile li.active ul {
        height: 150px;
    }

    ul.sub-menu li {
        position: relative;
        width: 100%;
        height: 50px;
        display: block;
        background: #4c4c4c;
    }

    ul.sub-menu li:hover {
        background: #4c4c4c;

    }


    .navOverlay, .navLevelOverlay {
        position: fixed;
        top: 0;
        right:0;
        bottom: 0;
        left: 0;
        display: none;
        background: rgba(0,0,0,0.5);

        z-index: 888;
        /*opacity: 0;*/
    }

    #navBurger, #navBurgerClose {
        position: absolute;
        top: 15px;
        right: 15px;

        width: 45px;
        height: 45px;

        cursor: pointer;
        z-index: 999;
    }

    #navBurgerClose { z-index: 777; }

    /*#navBurger span, #navBurgerClose span {*/
        /*position: absolute;*/

        /*left: 5px;*/
        /*width: 35px;*/
        /*height: 3px;*/
        /*background: #000000;*/
    /*}*/

    #navBurger span:first-child,
    #navBurgerClose span:first-child { top: 10px; }
    #navBurger span:nth-child(2),
    #navBurgerClose span:nth-child(2) { top: 20px; }
    #navBurger span:last-child,
    #navBurgerClose span:last-child { top: 30px; }


    nav.mobile li {
        position: relative;
        display: block;
        width: 100%;
        height: 80px;
        line-height: 80px;
    }

    nav.mobile ul.firstLevelMenu {
        top: 0;
        left: 0;

        list-style: none;
        width: 100%;
        margin: auto;
        position: absolute;
        display: block;
        z-index: 1;
    }

    nav.mobile ul.secondLevelMenu {
        position: absolute;
        display: block;
        margin-left: -100%;
        background: #ffffff;
        z-index: 999;
        width: 70%;
        height: 100vh;

        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;

        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);

    }


    nav.mobile ul.secondLevelMenu.active {
        transform: translate3d(130%,0,0);
        -ms-transform: translate3d(130%,0,0);
        -o-transform: translate3d(130%,0,0);
        -webkit-transform: translate3d(130%,0,0);
    }

    nav.mobile #navBurgerClose span:first-child {
        transform: translateY(10px) rotate(45deg);
        -webkit-transform: translateY(10px) rotate(45deg);
        -ms-transform: translateY(10px) rotate(45deg);
        -o-transform: translateY(10px) rotate(45deg);
    }

    nav.mobile #navBurgerClose span:nth-child(2) { display: none; }

    nav.mobile #navBurgerClose span:last-child {
        transform: translateY(-9px) rotate(-45deg);
        -webkit-transform: translateY(-9px) rotate(-45deg);
        -ms-transform: translateY(-9px) rotate(-45deg);
        -o-transform: translateY(-9px) rotate(-45deg);
    }

    #ContentPage article,
    #ContentPage form {
        height: auto;
    }

    #TeaserSlider, #TeaserSlider .slides,
    #TeaserSlider div.slides .slide,
    #TeaserSlider > div > div
    {
        height: 0;
        padding-bottom: 66.6666666666666666%;
    }

    #TeaserSlider div.slides .slide {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        -webkit-flex-direction: row;
    }

    #TeaserSlider .teaserContentWrapper,
    #TeaserSlider .teaserImage {
        position: relative;
        width: 50%;
        padding-bottom: 66.6666666666666666%;
    }

    #TeaserSlider .teaserContentWrapper { order: 1; -webkit-order: 1; }
    #TeaserSlider .teaserImage { order: 2; -webkit-order: 2; }


    #ImageSlider, #ImageSlider .slides,
    #ImageSlider div.slides .slide,
    /*#ImageSlider > div > div*/
    {
        height: 100vw;
    }

    /*#ProductSlider, #ProductSlider .slides,*/
    /*#ProductSlider div.slides .slide,*/
    /*#ProductSlider > div > div,*/
    /*#ProductSlider .teaserContentWrapper,*/
    /*#ProductSlider .teaserImage {*/
        /*height: 50vw;*/
        /*padding-bottom: 0;*/
    /*}*/

    /*#OfficePage #ProductSlider {*/
        /*width: 100%;*/
    /*}*/

    #ProductSlider .bxslider,
    #ProductSlider .bx-wrapper,
    #ProductSlider .bx-viewport,
    #ProductSlider .bxslider li,
    #OfficePage #ProductSlider {
        height: 50vw;
    }

    /*h1 { font-size: 2.5vw; }*/


    h3, #ContentPage h1 { font-size: 64px; }
    #ContentPage p.shortInfo { font-size: 16px; }

    #Introduction { padding: 40px; }
    #Introduction h1::after { margin:20px 0; }

    #ProductSlider .slide .overlay .button {
        width: 100px;
        height: 30px;
        margin-top: -15px;
        margin-left: -50px;
        line-height: 30px;
    }

    #ContentPage section {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
    }

    #ContentPage article, #ContentPage form { order: 2;-webkit-order: 2; }
    #ContentPage .detailImage { order: 1; -webkit-order: 1;}

    #ContentPage article, #ContentPage form {
        width: 100%;
        position: relative;
        margin: auto;
        top: 0;
        bottom: auto;
        order: 2;
        -webkit-order: 2;

    }

    form span, form input {
        height: 40px;
        line-height: 40px;
    }

    form textarea { padding-top: 40px; }

    #ContentPage article { padding: 40px 5% 40px 5%; }
    #ContentPage form { padding: 40px 0 0 0; }

    #ContentPage .detailImage{
        background-image: url('/img/detail-preview.jpg');
        position: relative;
        width: 100%;
        height: 0;
        left: 0;
        padding-bottom: 50%;
        order: 1;
        -webkit-order: 1;
    }

    #ContentPage h2, #ContentPage h2::after { margin: 20px 0 20px 0; }
    #ContentPage p { margin-bottom: 40px; }


    #TeaserSlider .teaserContent {
        width: 80%;
        left: 50%;
        margin-left: -40%;
        right: auto;
        bottom: 40px;
    }

    #TeaserSlider .teaserContent h3,
    #TeaserSlider .teaserContent p { text-align: right; }
    #TeaserSlider .teaserContent .button {
        position: relative;
        left: 100%;
        margin-left: -185px;
        margin-top: 20px;
    }

    #ProductSlider .slide .overlay .button {
        position: absolute;
        opacity: 1;
        display: block;

        width: 100%;
        left: 0;
        bottom: 0;
        top: auto;
        right: 0;
        margin-left: 0;
        height: 60px;
        line-height: 60px;
        border-left: 1px solid #AF2121;
        border-right: 1px solid #AF2121;
        background: #e13a3a;
    }

    header#mainHeader {
        height: 50px;

        -webkit-transition: top 0.5s ease;
        -moz-transition: top 0.5s ease;
        -ms-transition: top 0.5s ease;
        -o-transition: top 0.5s ease;
        transition: top 0.5s ease;
    }

    nav.mobile li {
        height: 50px;
        line-height: 50px;
    }

    footer {
        -webkit-transition: bottom 0.5s ease;
        -moz-transition: bottom 0.5s ease;
        -ms-transition: bottom 0.5s ease;
        -o-transition: bottom 0.5s ease;
        transition: bottom 0.5s ease;
    }

    header#mainHeader.scrollDown { top: -40px !important; }
    footer.scrollDown { bottom: -40px !important; }

    main { padding-bottom: 0px; }

    /*#logo {*/
        /*top: 5px;*/
        /*left: 5px;*/
        /*width: 120px;*/
        /*height: 30px;*/
    /*}*/


    #navBurger, #navBurgerClose {
        top: 7px;
        right: 15px;
        width: 40px;
        height: 30px;
    }

    #navBurger span, #navBurgerClose span {
        position: absolute;
        background: #000000;
        
        left: 5px;
        width: 30px;
        height: 3px;
    }

    #navBurger span:first-child, #navBurgerClose span:first-child { top: 5px; }
    #navBurger span:nth-child(2), #navBurgerClose span:nth-child(2) { top: 14px; }
    #navBurger span:last-child, #navBurgerClose span:last-child { top: 23px; }

}

@media only screen and (max-width: 768px) and (orientation: landscape){

    main { padding-bottom: 80px;}

    h1 { font-size: 2.5vw; }

    footer { position: fixed; }

    header#mainHeader {
        height: 40px;

        -webkit-transition: top 0.5s ease;
        -moz-transition: top 0.5s ease;
        -ms-transition: top 0.5s ease;
        -o-transition: top 0.5s ease;
        transition: top 0.5s ease;
    }

    nav.mobile li {
        height: 50px;
        line-height: 50px;
    }

    footer {
        -webkit-transition: bottom 0.5s ease;
        -moz-transition: bottom 0.5s ease;
        -ms-transition: bottom 0.5s ease;
        -o-transition: bottom 0.5s ease;
        transition: bottom 0.5s ease;
    }

    header#mainHeader.scrollDown { top: -40px !important; }
    footer.scrollDown { bottom: -40px !important; }

    #logo {
        top: 5px;
        left: 5px;
        width: 120px;
        height: 30px;
    }


    #navBurger, #navBurgerClose {
        top: 2px;
        right: 15px;
        width: 40px;
        height: 35px;
    }

    #navBurger span, #navBurgerClose span {
        left: 5px;
        width: 30px;
        height: 5px;
    }

    #navBurger span:first-child, #navBurgerClose span:first-child { top: 5px; }
    #navBurger span:nth-child(2), #navBurgerClose span:nth-child(2) { top: 15px; }
    #navBurger span:last-child, #navBurgerClose span:last-child { top: 25px; }

    footer { height: 40px; }

    footer a, footer span { line-height: 40px; }

}

@media screen and (max-width: 660px) and (orientation: portrait) {
    footer { position: relative; height: 80px !important; z-index: 998; text-align: center; }
    footer a, footer span { line-height: 40px; text-align: center; font-size: 12px; float: none; padding: 0 10px; display: inline-block; }
    footer span { width: 100%; }
    footer a::after, footer span::after { display: none; }
}

@media screen and (max-width: 660px){
    .gridElement.one-one,
    .gridElement.one-two,
    .gridElement.two-one {
        width: 100%;
    }

    #grid.sectionAnsprechpartner .gridElement.divider h2 { font-size: 31px; }

    #ImageSlider h3,
    h3, h1,
    .gridContent h2,
    #ContentPage h1 {
        font-size: 24px;
    }

    #ImageSlider .teaserContent h3 { padding-bottom: 0 !important; }

    p,
    .gridContent p {
        font-size: 18px;
        line-height: 24px;
    }

    #ImageSlider p {
        position: relative;
        margin: auto;
        width: 90%;
        font-size: 14px;
        line-height: 18px;
    }

    .home #ImageSlider, .home #ImageSlider .slides,
    .home #ImageSlider div.slides .slide,
        /*.home #ImageSlider > div > div,*/
    .home #ImageSlider .slideContent {
        width: 100% !important;
    }

    .home #ImageSlider .slideContent {
        height: 50vw !important;
    }

    #OfficePage #ProductSlider {
        width: 100%;
    }

    /*------------*/

    main { padding-bottom: 0px; }

    #TeaserSlider, #TeaserSlider .slides,
    #TeaserSlider div.slides .slide,
    #TeaserSlider > div > div
    {
        height: 0;
        padding-bottom: 66.6666666666666666%;
    }

    #TeaserSlider div.slides .slide {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
    }

    #TeaserSlider .teaserContentWrapper,
    #TeaserSlider .teaserImage {
        position: relative;
        width: 100%;
        /*padding-bottom: 66.66%;*/
    }

    #TeaserSlider .teaserContentWrapper { order: 2; -webkit-order: 2; }
    #TeaserSlider .teaserImage { order: 1; -webkit-order: 1; }


    #TeaserSlider .teaserContent h3,
    #TeaserSlider .teaserContent p { text-align: center; }
    #TeaserSlider .teaserContent .button {
        position: relative;
        left: 0;
        margin: auto;
    }
}

@media only screen and (max-width: 660px) and (orientation: landscape){
    #TeaserSlider, #TeaserSlider .slides,
    #TeaserSlider div.slides .slide,
    #TeaserSlider > div > div
    {
        height: 0;
        padding-bottom: 66.6666666666666666%;
    }

    #TeaserSlider div.slides .slide {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        -webkit-flex-direction: row;
    }

    #TeaserSlider .teaserContentWrapper,
    #TeaserSlider .teaserImage {
        position: relative;
        width: 50%;
        padding-bottom: 66.6666666666666666%;
    }

    #TeaserSlider .teaserContentWrapper { order: 1; -webkit-order: 1; }
    #TeaserSlider .teaserImage { order: 2; -webkit-order: 2; }

    h1 { font-size: 2.5vw; }

    header#mainHeader {
        height: 40px;

        -webkit-transition: top 0.5s ease;
        -moz-transition: top 0.5s ease;
        -ms-transition: top 0.5s ease;
        -o-transition: top 0.5s ease;
        transition: top 0.5s ease;
    }

    nav.mobile li {
        height: 50px;
        line-height: 50px;
    }

    footer {
        -webkit-transition: bottom 0.5s ease;
        -moz-transition: bottom 0.5s ease;
        -ms-transition: bottom 0.5s ease;
        -o-transition: bottom 0.5s ease;
        transition: bottom 0.5s ease;
    }

    header#mainHeader.scrollDown { top: -40px !important; }
    footer.scrollDown { bottom: -40px !important; }


    #logo {
        top: 5px;
        left: 5px;
        width: 120px;
        height: 30px;
    }


    #navBurger, #navBurgerClose {
        top: 2px;
        right: 15px;
        width: 40px;
        height: 35px;
    }

    #navBurger span, #navBurgerClose span {
        left: 5px;
        width: 30px;
        height: 5px;
    }

    #navBurger span:first-child, #navBurgerClose span:first-child { top: 5px; }
    #navBurger span:nth-child(2), #navBurgerClose span:nth-child(2) { top: 15px; }
    #navBurger span:last-child, #navBurgerClose span:last-child { top: 25px; }

    footer { height: 40px; }

    footer a, footer span { line-height: 40px; }

}

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

    main { padding-bottom: 0px; }

}

/* iPhone landscape */
@media only screen and (max-height : 480px) { 
    
    nav.mobile ul {
        top: 0 !important;
        -webkit-transform: none;
        transform: none;
    }
    nav.mobile a {
        font-size: 1em;
    }
}