/**
* SIMPLE Responsive
* Vereinfachte Responsive Breakpoints
* Violution GbR - 2020
*
**/

/* Groß - maximale Breite - Widescreen */
@media only screen and (min-width: 1701px) {

    body{
        /*border: 5px solid #989898 !important;*/
    }
}

/* Mittel - Breite unter 1700px - Laptop quer */
@media only screen and (max-width: 1700px) {

    body{
        /*border: 5px dashed #f00 !important;*/
    }
}

/* Zwischengröße - Breite unter 1380px - Galaxy Tab quer, Widescreen hoch */
@media only screen and (max-width: 1380px) {

    body{
        /*border: 5px dotted #6769b5 !important;*/
    }
}

/* Klein - Breite unter 1095px - Laptop hoch /Galaxy Tab hoch / iPad */
@media only screen and (max-width: 1095px) {

    body{
        /*border: 5px solid #000000 !important;*/
    }

    .only-mobile{
        display: inline !important;
    }

    .no-mobile{
        display: none !important;
    }

    #authentification.default-content-container .form-container {
        min-height: 280px;
    }

    footer .inside .left,
    footer .inside .right {
        float: none;
        text-align: center;
    }

    footer .inside p, footer .inside a {
        padding: 8px;
    }

    .form-container#login {
        width: 360px;
    }

    #main p, #main ul, #main ol, #main pre, #main dl {
        padding: 0 0 2em;
    }

    .default-content-container .form-container {
        margin-left: 0;
        margin-right: 0;
    }

    .default-content-container {
        width: 100%;
        padding-top: 40px;
    }

    body.v-project-static .logo_static {
        background-size: 60%;
    }

    body.v-project-static #wrapper #main,
    body.v-project-static header .inside{
        width: 100%;
        padding: 0 20px 0 20px;
    }

    body.v-project-static #wrapper #main{
        padding-bottom: 120px;
    }

    body.v-project-static header .inside {
        margin: 20px auto 0 auto;
    }

    #main h1 {
        font-size: 3.4em;
        margin-bottom: 35px;
    }

    #main h2 {
        font-size: 2.3em;
    }

    #main h3 {
        font-size: 1.8em;
    }

    .subcr{
        padding-left: 20px !important;
    }

    .subcl{
        padding-right: 20px !important;
    }
}

/* Ganz klein - Breite unter 767px - Smartphones quer */
@media only screen and (max-width: 767px) {

    body{
        /*border: 5px solid #37dd1d !important;*/
    }

    #wrapper, #wrapper #main {
        padding: 0;
    }

    body.v-project-static .logo_static {
        background-size: 45%;
    }

    #authentification.default-content-container .form-container {
        min-height: 180px;
    }

    .form-container#login {
        width: 400px;
    }

    #main p, #main ul, #main ol, #main pre, #main dl {
        padding: 0 0 1.8em;
    }

    .logo_login {
        margin: 0 auto 0 auto;
        transform: scale(0.6);
    }

    .default-content-container {
        padding-top: 10px;
    }

    #main h1 {
        font-size: 2.9em;
        margin-bottom: 28px;
    }

    #main h2 {
        font-size: 2.1em;
    }

    .form-container {
        padding: 25px 35px;
        margin: 0 auto 25px;
    }

    body.v-project-static #wrapper #main {
        margin: 10px auto 0 auto;
    }

    .c50l,
    .c50r {
        width: 100%;
        float: none;
        margin: 0;
    }

    .subcr{
        padding-left: 0 !important;
    }

    .subcl{
        padding-right: 0 !important;
    }
}

/* Ganz klein hochkant - Breite unter 560px - Smartphones hoch */
@media only screen and (max-width: 560px) {

    body{
        /*border: 5px dotted #03d6dd !important;*/
    }

    footer .inside {
        font-size: 1.4em;
        padding: 0 15px;
    }

    footer .inside p{
        padding: 0;
        line-height: 1.7em;
        margin-bottom: 10px;
    }

    .form-container#login {
        width: 85%;
    }

    .logo_login {
        transform: scale(0.5);
    }

    #wrapper{
        padding: 10px 0 0;
    }

    .default-content-container {
        padding-top: 0;
    }

    #main h1 {
        font-size: 2.5em;
    }

    #main h2 {
        font-size: 2em;
    }

}