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

    html, body { height: auto; overflow: auto; overflow-x: hidden; }

    /*#header { background-color: white; }*/

    #header { position: fixed; top: 0px; z-index: 4000; }
    #header #logo { z-index: 4100; }

    body,
    body.page-fullpage div.item-page div.section,
    #header,
    div.item-page { min-width: 100px; }

    #menu { float: right; min-width: 100%; height: auto; min-height: 85px; background-image: url('../images/layout/mobile-menu-icon.png'); background-repeat: no-repeat; background-position: right top; padding-left: 0px; right: 0px; top: 0px; cursor: pointer; z-index: 4050; }
    #menu ul.nav.menu { overflow: hidden; display: block; width: 100%; float: none; background-color: #ffffff; opacity: 0.9; margin-top: 85px; position: absolute; }
    #menu ul.nav.menu li { float: none; margin-left: 0px; padding: 10px 0px 10px 22px; }

    #menu ul.nav.menu,
    div#page-state,
    #slogan,
    div.section.impressionen,
    div.ideen-state-outside { display: none; }

    body.page-fullpage div.item-page div.section { width: 100%; min-height: 100%; position: relative; }
    body.page-fullpage div.item-page div.section div.item-page { padding: 4% 4%; position: relative; min-height: 100%; height: 100%; width: 100%; overflow: hidden; box-sizing: border-box; }
    body.page-fullpage div.item-page div.section div.item-page #intro-bg-1,
    body.page-fullpage div.item-page div.section div.item-page #intro-bg-2 { position: absolute; top: 0px; left: 0px; }

    /* Slogan */
    #slogan-mobile { display: block; position: fixed; bottom: -2px; left: 50%; margin-left: -107px; }

    div.button-contact { padding: 0px 0px 20px 0px; }
    div.button-contact img { padding: 0px 0px 20px 0px; }

    /* Intro */
    div#intro-bg-2 { display: block; opacity: 0.5; }
    div#intro-text { top: 25%; left: 0px; padding: 0px 20px; position: absolute; }
    div#intro-text1,
    div#intro-text2,
    div#intro-text3 { width: 100%; }
    div#intro-text3 { padding-top: 10%; }

    div#intro-text1 p { font-size: 32px; line-height: 38px; }
    div#intro-text2 p { font-size: 26px; line-height: 32px; }

    /* Ideen */
    body.page-fullpage div.item-page div.section.ideen,
    body.page-ideen { background-image: url('../images/layout/bg-impressionen.jpg'); background-size: cover; }

    div.ideen h1 { display: block; }
    div.ideen.slide { width: 100%; margin: 20px 0px 40px 0px; }

    div.ideen .infobox { bottom: -20px; height: auto; width: 100%; left: 0px; padding: 0px; }
    div.ideen .infobox h3 { padding: 5px 10px 5px 10px; margin-bottom: 0px; }
    div.ideen .infobox p { padding: 0px 10px 5px 10px; }

    body.page-fullpage div.item-page div.section.ueber-uns div.item-page { float: none; clear: both; padding-top: 4%; max-width: 100%; width: 100%; right: 0%; }
    body #person-peter { position: relative; bottom: -20px; }
    body #person-peter img { display: block; }

    div.contact-address { width: 100%; float: none; }
    div.contact-form { display: none; }
    div.contact-form { width: 100%; float: none; margin-top: 50px; }

    .formResponsive .formHorizontal .formControls input.rsform-input-box,
    .formResponsive .formHorizontal .formControls textarea { width: 100% !important; box-sizing: border-box; }

    .formResponsive .formHorizontal .formControls input.rsform-submit-button { margin-right: 0px; }
}


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

    div#intro-text1 p { font-size: 26px; line-height: 32px; }
    div#intro-text2 p { font-size: 20px; line-height: 26px; }

    div.ideen .infobox h3,
    div.ideen .infobox p { font-size: 15px; line-height: 15px; }
}