/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px),
only screen 
and (min-width : 320px) 
and (max-width : 767px){
    html {
        background: none;
    }

    body {
        font-size: 90%;
    }

    #nav {
        height: 61px;
        opacity: 1;
        background-color: #3e3e42;
        position: relative;
        z-index: 0;
    }

    #nav nav {
        width: 100%;
        margin: 0;
    }


    /* Navi */
    #navicon {
        display: initial;
        float: right;
        position: relative;
        margin: 10px 15px;
        padding: 5px 6px 3px 6px;
        z-index: 9; 
        background-color: rgba(0, 0, 0, 0.3);
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

    #navicon.open { color: white; }


    #nav nav ul {
        position: fixed;
        width: 100%;
        max-width: 100%;
        top: -220px;
        background: #222;
        height: auto;
        z-index: 12;
        text-align: center;
        border: none;
        margin: 0;
    }

    #nav nav ul li {
        display: block;
        padding: 0;
    }

    #main-nav a {
        color: white;
        border-top: 1px solid #555;
        text-decoration: none;
        display: block;
        padding: 10px 0;
    }

    #nav nav ul li#end {
        padding-bottom: 5px;
    }

    .active{
        border-bottom: none;
        background: #3c3c3c;
    }


    #main {
        width: 100%;
        opacity: 1;
        min-height: calc(100% - 20px);
    }

    header h1 {
        font-size: 19px;
        font-size: 1.2rem;
        margin: -50px auto auto 10px;
        color: #bababa;
        font-weight: normal;
        position: absolute;
        z-index: 1;
    }

    header h2 {
        font-size: 12px;
        font-size: 0.75rem;
        margin: -25px auto auto 10px;
        color: #bababa;
        font-weight: normal;
        position: absolute;
    }

    header img {
        width: calc(100% - 6px);
        border: 1px solid #90c01d;
        border-width: 0px 3px 2px 3px;

    }

    header div {
        height: 4px;
    }

    #headerinfo {
        background-color: rgba(230, 230, 230, 0.9);
        float: none;
        width: auto;
        position: relative;
        margin: 0 0 20px 0;
        padding: 5px 4% 0 4%;
        border-bottom: 2px solid #90c01d;
    }

    #content {
        margin: 4%;
    }

    #content h1 {
        font-size: 19px;
        font-size: 1.2rem;
    }
    
    .textpage {
        margin: 4% 4% 0;
    }
    .textpage h1 {
        font-size: 21px;
        font-size: 1.3rem;
    }
    .textpage h2 {
        font-size: 19px;
        font-size: 1.2rem;
    }

    .textpage h3 {
        font-size: 18px;
        font-size: 1.125rem;
    }
    .textpage h4 {
        font-size: 16px;
        font-size: 1rem;
    }
    .unterteillinie {
        margin: 20px 0 30px
    }

    #link1, #link2 {
        float: left;
        width: 100%;
        margin-bottom: 30px;
    }

    #link1 {
        margin-right: 0;
    }

    #link2 {
        margin-left: 0;
    }

    .imgLink {
        display: none;
    }

    #link1 h1, #link2 h1 {
        padding: 8px;
        font-size: 16px;
        font-size: 1rem;
        position: relative;
        display: inline-block;
    }

    #link1:hover img, #link2:hover img {
        transition: none;
        transform: none;
    }


    #content hr {
        margin: 0 0 20px 0;
        width: 100%;
        border: 1px solid #90c01d;
        background-color: #90c01d;
    }

    footer {
        height: 20px;
    }

    footer nav {
        width: 100%;
    }

    footer nav ul {
        display: none;
    }



    footer p {
        font-size: 9px;
        font-size: 0.55rem;
        margin: 4px 5% auto auto;
    }

    /* Unterseiten */

    #subpageLogo {
        margin: -170px auto auto 10px;
        position: absolute;
        width: auto;
        padding: 0;
        background-color: #3e3e42;
        background-color: rgba(0, 0, 0, 0);
    }

    #subpageLogo h1 {
        font-size: 19px;
        font-size: 1.2rem;
        margin: 0;
        color: #bababa;
        font-weight: normal;
        z-index: 1;
    }

    #subpageLogo h2 {
        font-size: 12px;
        font-size: 0.75rem;
        margin-top: 3px;
        color: #bababa;
        font-weight: normal;
    }

    #subhead {
        height: 120px;
        width: 100%;
        position: relative;
    }

    #subpageLogo + div {
        margin-top: 0px;
        height: 2px;
    }

    #subpageLogo + div + hr {
        margin-top: 4px;
        border: 2px solid #90c01d;
    }


    /*Startseite */
    #startPortrait {
        width: 100%;
        margin-left: 0;
    }

    #startBrukerhaus {
        width: 48%;
        margin: 10px 5% 0 0;
    }

    #startBrukerhaus + p {
        margin-top: 25px;
    }

    /* Kurse */
    .kursangebot {
        padding: 0 8px 8px;
    }
    .kinderprojekt {
        width: 90%;
        padding: 5px 10px 10px;
    }
    #seminarbericht {
        width: 90%;
        padding: 5px 10px 10px;
    }

    /* Gesundheit */


    /* Impressionen */
    #impressNav {
        margin-top: 10px;
        width: 94%;
        padding: 0;
        font-size: 16px;
        font-size: 1rem;
    }

    #impressNav ul {
        margin: 10px 0;
    }

    #impressNav li {
        padding: 6px 0px;
    }

    #impressImgHeadline {
        margin-left: 3%;
        margin-top: 15px;
        font-size: 19px;
        font-size: 1.2rem;
    }

    #impressImg {
        width: 100%;
        padding-top: 0;
    }

    #impressImg a {
        margin-left: 3%;
        margin-right: 3%;
        width: 42%;
    }

    
}





/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px), 
only screen 
and (min-width : 768px) 
and (max-width : 1024px) {

    body {
        font-size: 90%;
    }

    html {
        background: none;
    }

    #nav nav {
        width: 100%;
        margin: 0;
    }

    #nav nav ul {
        margin: 20px auto 0 4%;
        max-width: 92%;
        width: 687px;
        border-bottom: 2px solid #90c01d;
    }

    #nav nav ul li {
        padding: 0 6px;
    }


    #main {
        width: 100%;
        opacity: 1;
        min-height: calc(100% - 80px);
    }

    header h1 {
        font-size: 32px;
        font-size: 2rem;
        margin: 90px auto auto 60px;
    }

    header h2 {
        font-size: 19px;
        font-size: 1.2rem;
        margin: 130px auto auto 60px;
    }

    #headerinfo {
        width: 35%;
        margin: -30% 4% auto auto;
        padding: 5px 10px 0 20px;
    }

    #headerinfo p {
        font-size: 13px;
        font-size: 0.8rem;
        margin: 10px 0 15px 0;
    }

    #content {
        margin: 4%;
    }

    #content h1 {
        font-size: 26px;
        font-size: 1.6rem;
    }

    #link1, #link2 {
        float: left;
        width: 47%;
    }

    #link1 {
        margin-right: 3%;
    }

    #link2 {
        margin-left: 3%;
    }

    #link1 h1, #link2 h1 {
        padding: 10px;
        font-size: 19px;
        font-size: 1.2rem;
    }

    footer {
        height: 80px;
    }

    footer nav {
        width: 100%;
    }

    footer nav ul {
        margin: 10px 20px auto 4%;
    }

    footer nav ul li a {
        font-size: 12px;
        font-size: 0.75rem;
    }

    footer p {
        font-size: 12px;
        font-size: 0.75rem;
        margin: 60px 3% auto auto;
    }
    /* Unterseiten */

    #subpageLogo {
        margin: 60px 0 0 0;
        padding: 20px 30px 15px 4%;
    }

    #subpageLogo h1 {
        font-size: 29px;
        font-size: 1.8rem;
    }

    #subpageLogo h2 {
        font-size: 16px;
        font-size: 1rem;
        margin-top: 15px;
    }

    #subhead {
        height: 187px;
        width: 100%;
    }

    /* Impressionen */
    #impressNav {
        margin-top: 30px;
        width: 25%;
        padding: 0;
        font-size: 16px;
        font-size: 1rem;
    }

    #impressNav ul {
        margin: 15px 0;
        padding-left: 30px;
    }

    #impressNav li {
        padding: 8px 0px;
    }

    #impressImgHeadline {
        margin-left: 3%;
        margin-top: 20px;
        font-size: 22px;
        font-size: 1.4rem;
    }

    #impressImg {
        width: 70%;
        padding-top: 0;
    }

    #impressImg a {
        margin-left: 3%;
        margin-right: 3%;
        width: 42%;
    }


}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    /* Styles */
}

/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
    /* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
    /* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
    /* YOUR STYLE GOES HERE */
}

@media only screen 
and (min-device-width : 1025px) 
and (max-device-width : 1124px), 
only screen
and (min-width : 1025px) 
and (max-width : 1124px) {
    body {
        font-size: 80%;
    }

    header h1 {
        margin: 100px auto auto 60px;
    }

    header h2 {
        margin: 150px auto auto 60px;
    }

    #nav nav ul {
        max-width: 94%;
        width: 644px;
    }

    #nav nav ul li {
        padding: 0 10px;
    }

    #nav nav ul li a{
        font-size: 17px;
        font-size: 1.05rem;
    }

    #headerinfo {
        width: 30%;
        margin: -30% 3% auto auto;
        padding: 5px 10px 0 20px;
    }

    #headerinfo p {
        font-size: 13px;
        font-size: 0.8rem;
        margin: 10px 0 15px 0;
    }

    /* Unterseiten */

    #subpageLogo {
        margin: 60px 0 0 0;
        padding: 20px 30px 15px 3%;
    }

    #subhead {
        height: 200px;
    }

      /* Impressionen */
    #impressNav {
        margin-top: 25px;
        width: 27%;
        padding: 10px 0px 10px 0px;
        font-size: 19px;
        font-size: 1.2rem;
    }

    #impressNav ul {
        margin: 15px 0;
        padding-left: 15px;
    }

    
    #impressImgHeadline {
        margin-left: 3%;
        font-size: 26px;
        font-size: 1.6rem;
    }

    #impressImg {
        width: 70%;
        padding-top: 0;
    }

    #impressImg a {
        margin-left: 4%;
        margin-right: 4%;
        width: 40%;
    }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {

    body{
        font-size: 120%;
    }
    #main {
        min-height: calc(100% - 150px);
    }

    #nav {
        height: 80px;
    }

    #nav nav ul li {
        padding: 0 15px;
    }

    #nav nav ul {
        margin: 30px auto 0 5%;
        max-width: 90%;
        width: 979px;
    }

    #nav nav ul li a{
        font-size: 26px;
        font-size: 1.6rem;
    }

    header h1 {
        font-size: 21px;
        font-size: 2.75rem;
        margin: 130px auto auto 90px;
    }

    header h2 {
        font-size: 35px;
        font-size: 1.8rem;
        margin: 180px auto auto 90px;
    }

    header img {
        width: calc(100% - 18px);
        border: 5px solid #90c01d;
        border-width: 0px 9px 5px 9px;
        opacity: 1;
    }

    header div {
        height: 9px;
        background-color: #90c01d;
    }

    #headerinfo {
        margin: -30% 3% auto auto;
        padding: 10px 15px 0 30px;
    }

    #headerinfo h3 {
        font-size: 19px;
        font-size: 1.2rem;
        margin: 10px 0 0 0;
    }
    #headerinfo h2 {
        font-size: 22px;
        font-size: 1.4rem;
        margin: 20px 0 0 0;
    }

    #headerinfo p {
        font-size: 13px;
        font-size: 1rem;
        margin: 10px 0 25px 0;
    }

    #headerinfo hr {
        border-bottom: 3px dotted #bababa;
        width: 50%;
    }

    #content {
        margin: 5%;
        margin-bottom: 0;
        padding-bottom: 5%;
    }

    #content h1 {
        font-size: 35px;
        font-size: 2.2rem;
    }

    #link1, #link2 {
        width: 47%;
    }

    #link1 {
        margin-right: 3%;
    }

    #link2 {
        margin-left: 3%;
    }

    #link1 h1, #link2 h1 {
        font-size: 35px;
        font-size: 2.2rem;
        padding: 10px 15px;
    }

    #content hr {
        margin: 50px 0;
        border: 2px solid #90c01d;
        background-color: #90c01d;
    }

    footer {
        height: 150px;
    }


    footer nav ul {
        margin: 30px 20px auto 5%;
    }

    footer nav ul li a {
        font-size: 16px;
        font-size: 1rem;
    }

    footer p {
        font-size: 16px;
        font-size: 1rem;
        color: #90c01d;
        margin: 110px 5% auto auto;
    }

    /* Unterseiten */

    #subpageLogo {
        margin: 80px 0 0 0;
        padding: 30px 40px 25px 5%;
    }

    #subhead {
        height: 240px;
    }

    /* Impressionen */

    #impressNav {
        margin-top: 25px;
        width: 26%;
        padding: 20px 0px 20px 0px;
        font-size: 22px;
        font-size: 1.4rem;
    }

    
    #impressNav ul {
        padding: 0 0 0 40px;
    }

 
    #impressImgHeadline {
        margin-left: 4%;
        font-size: 35px;
        font-size: 2.2rem;
    }



    #impressImg {
        width: 70%;
    }

    #impressImg a {
        margin-left: 4%;
        margin-right: 4%;
        margin-bottom: 5%;
        width: 25%;
    }


}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}


/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
    /* STYLES GO HERE */
}

/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
    /* STYLES GO HERE */
}

/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (-webkit-device-pixel-ratio: 2)
and (orientation : portrait) {
    /* STYLES GO HERE */
}