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

    .preview-gutter li {
        width: 24%;
    }

}


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


    section {
        padding: 60px 0;
    }


    .preview-gutter li {
        width: 32.3%;
    }

}


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

    #banner {
        background-position: center;
        background-attachment: scroll;
    }

    .marken .marke {
        width: 32.3%;
    }
}


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

    .preview-gutter li
    {
        width: 49%;
    }

}


@media screen and (min-width: 700px) {

    header {
        left: 0 !important;
    }

}


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

    #frame-top, #frame-bottom {
        height: 15px;
    }
    #frame-right, #frame-left {
        width: 15px;
    }
    #frame-left {
        display: block;
    }


    header {
        left: -220px;
    }

    #page-wrapper {
        padding: 15px;
    }

    #impressum-wrapper {
        padding: 15px;
    }

    #open-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        padding: 22px 18px 18px 22px;
        line-height: 1;
        text-align: center;
        font-size: 1.2em;
        background: #fff;
        color: #565656;
        z-index: 9999;
    }


}


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

    #frame-top, #frame-bottom {
        height: 10px;
    }
    #frame-right, #frame-left {
        width: 10px;
    }

    #page-wrapper {
        padding: 10px;
    }

    #impressum-wrapper {
        padding: 10px;
    }


    .preview-gutter li {
        width: 99%;
    }

    .marken .marke {
        width: 49%;
    }


}