/*
------------------------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------------------------
*/

@media only screen and (max-height: 500px) {

    .overlay-active .navigation-overlay {
        bottom:0;
        overflow-y:scroll;
    }
}

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

    .alignleft, img.alignleft {
        float:none;
        margin-right:0;
        margin-top:0;
        display:block;
    }

    .alignright, img.alignright {
        float:none;
        margin-left:0;
        margin-top:0;
        display:block;
    }


    #main img.list-post-image.left {
        float: none;
    }

    #main img.list-post-image.right {
        float: none;
    }

    div.list-post-margin.left {
        margin-left: 0px;
    }

    div.list-post-margin.right {
        margin-right: 0px;
    }

    .wrapper
    {
        width: 400px;
        width:100%;
    }

    h2,
    .content-element-facts h2
    {
        font-size: 24px;
        line-height: 30px;
    }

    h3
    {
        font-size:20px;
        line-height: 28px;
    }

    .content-element-keyvisual.big h1
    {
        font-size:45px;
        line-height: 55px;
    }
    .content-element-keyvisual.small h1,
    .content-element-start-slideshow .slideshow-element .info h1,
    .content-element-start-slideshow .slideshow-element .info h2
    {
        font-size:24px;
        line-height: 30px;
    }

    .content-element-video.width-66 p
    {
        font-family:"Proxima soft regular";
        font-size: 16px;
        line-height: 24px;
    }

    .content-element-start-slideshow .slideshow-element .info .text
    {
        font-family:"Proxima soft regular";
        font-size:18px;
        line-height: 26px;
    }

    .content-element-teaser .headline
    {
        font-family: "Proxima bold";
        font-size: 30px;
        line-height: 36px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }



    /*
    ------------------------------------------------------------------------------
    header.pageHeader
    ------------------------------------------------------------------------------
    */

    header.pageHeader
    {
        height: 90px;
    }
    header.pageHeader .wrapper
    {
        height: inherit;
    }

    header.pageHeader .logo
    {
        top: 10px;
        margin-left: -130px;
    }

    header.pageHeader .navigation-button
    {
        top: 32px;
        left: 15px;
    }

    header.pageHeader nav.meta
    {
        position: absolute;
        z-index: 10;
        right: 0px;
        top: 25px;
    }

    .navigation-overlay
    {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        padding: 40px 20px;
    }

    .overlay-active .navigation-overlay
    {
        top: 60px;
        bottom:0;
    }
    .navigation-overlay
    {
        top: -1000px;
    }

    .navigation-overlay .main
    {
        position: relative;

        width: 360px;
        margin-top: 20px;
        margin-left: 0px;
    }

    .navigation-overlay .sub
    {
        width: 330px;
        max-height: 0px;
        position: relative;

        left: 0px;
        opacity: 0;
        visibility:hidden;

        margin: 0px 10px 0px 20px;
        overflow: hidden;
    }
    .navigation-overlay .main.open .sub
    {
        max-height: 400px;
        opacity: 1;
        visibility:visible;

        margin: 10px 10px 20px 20px;
    }

    .navigation-background
    {
        display: none;
    }

    .navigation-additional
    {
        display: none;
    }

    .navigation-overlay .main .hitarea
    {
        display: block;
        position: absolute;
        right:0px;
        top:0px;

        height: 20px;
        width: 20px;

        background: url(lkj-assets/image/sprite-sheet.svg);
        background-size: 260px 530px;
        background-position: -130px -115px;

        transition: transform 150ms ease;
        -webkit-transition: -webkit-transform 150ms ease;
    }

    .navigation-overlay .main.open .hitarea
    {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }




    /*
    ------------------------------------------------------------------------------
    Footer
    ------------------------------------------------------------------------------
    */

    footer.pageFooter
    {
        height: auto;
    }

    footer.pageFooter .wrapper
    {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        padding: 0px 15px;
    }

    footer.pageFooter .info
    {
        width: 320px;
    }

    footer.pageFooter .info p
    {
        margin-top: 10px;
    }
    footer.pageFooter .info img
    {
        width: 340px;
    }

    footer.pageFooter .service
    {
        margin: 40px 0px 0px 15px;
    }

    footer.pageFooter .social
    {
        margin: 40px 0px 0px 40px;
    }

    footer.pageFooter .social strong
    {
        margin-bottom: 10px;
    }

    footer.pageFooter .social a
    {
        display: inline-block;
    }

    footer.pageFooter .social a p
    {
        display: none;
    }




    /*
    ------------------------------------------------------------------------------
    MAIN
    ------------------------------------------------------------------------------
    */

    main
    {
        padding-top: 61px;
    }

    



}

@media only screen and (max-width: 360px) {
    footer.pageFooter .info {
        margin-left:0;
        max-width: 100%;
    }

    footer.pageFooter .info img {
        max-width:100%;
    }

    header.pageHeader .logo img {
        width: 175px;
    }

    header.pageHeader .logo {
        top:22px;
        margin-left: -105px;
    }
}