@charset "UTF-8";
/* media CSS */


/*Medie Queries
############################################################################*/
@media only screen and (max-width: 1700px) {
    .index #wrapper {
        background-size: 68%;
    }
    .rueckbau #wrapper {
        background-size: 53.5%;
    }
}
@media only screen and (max-width: 1600px) {
    .index #wrapper {
        background-size: 72%;
    }
    .rueckbau #wrapper {
        background-size: 61%;
    }
}
@media only screen and (max-width: 1540px) {
    .index #wrapper {
        background-size: 74%;
    }
    .rueckbau #wrapper {
        background-size: 63.5%;
    }
}
@media only screen and (max-width: 1440px) {
    .index #wrapper {
        background-size: 79%;
    }
    .rueckbau #wrapper {
        background-size: 67.5%;
    }
}
@media only screen and (max-width: 1380px) {
    .index #wrapper {
        background-size: 84%;
    }
    .rueckbau #wrapper {
        background-size: 71.8%;
    }
}
@media only screen and (max-width: 1280px) {
    .index #wrapper {
        background-size: 89.5%;
    }
    .rueckbau #wrapper {
        background-size: 75.5%;
    }
}

@media only screen and (max-width: 1240px) { /* LAYOUT 20% */
    /* TYPO */
    h1 {
        font-size: 1.8em;
    }
    h2, h3, p, #main ul,
    #sub-nav ul > li > a,
    #sub-nav ul > li:before {
        font-size: 1.66em;
    }
    #nav ul > li > a {
        font-size: 1.5em;
    }
    
    /* PROPORTIONS */
    #wrapper .inside {
        width: 95em;
    }
    #footer .inside {
        width: 58.5em;
    }
    .index #wrapper {
        background-size: 80.5%;
    }
    .rueckbau #wrapper {
        background-size: 70%;
    }
    #content {
        padding-bottom: 5em;
    }
    #header {
        padding: 2.6em 0;
        margin-bottom: 1.6em;
    }
    #nav ul > li {
        margin-left: 1.8em;
    }
    #main {
        margin-top: 3.5em;
    }
    #main .logo {
        width: 59em;
        margin-left: -2.7em;
    }
    .referenz {
        margin-bottom: 2.5em;
    }
    .referenz .image-single,
    .referenz .image-group {
        margin-bottom: 2.2em !important;
    }
    #footer {
        padding: 5.4em 0;
    }
    form {
        margin: 1em 0 5.4em 0;
    }
}

@media only screen and (max-width: 1080px) {
    .index #wrapper {
        background-size: 87.5%;
    }
    .rueckbau #wrapper {
        background-size: 75%;
    }
}
@media only screen and (max-width: 1040px) {
    .index #wrapper {
        background-size: 92%;
    }
    .rueckbau #wrapper {
        background-size: 78%;
    }
}

@media only screen and (max-width: 1020px) { /* 1-SPALTER */ /* LAYOUT 10% */
    #content {
        flex-direction: column;
        justify-content: flex-start;
    }
    #main, #aside {
        width: 100%;
    }
    #aside {
        margin-top: 3em;
    }
    #aside img {
        margin: 0 auto;
        width: 65%;
    }
    
    /* TYPO */
    h1 {
        font-size: 1.6em;
    }
    h2, h3, p, #main ul,
    #sub-nav ul > li > a,
    #sub-nav ul > li:before {
        font-size: 1.5em;
    }
    #nav ul > li > a {
        font-size: 1.4em;
    }
    
    /* PROPORTIONS */
    #wrapper .inside,
    #footer .inside{
        width: 52em;
    }
    .index #wrapper,
    .rueckbau #wrapper {
        background: none;
    }
    #content {
        padding-bottom: 4.5em;
    }
    #header {
        padding: 2.4em 0;
        margin-bottom: 1.4em;
    }
    #nav ul > li {
        margin-left: 1.6em;
    }
    #main {
        margin-top: 3.2em;
    }
    #main .logo {
        width: 54.5em;
        margin-left: -2.5em;
    }
    .referenz {
        margin-bottom: 2.3em;
    }
    .referenz .image-single,
    .referenz .image-group {
        margin-bottom: 2em !important;
    }
    .referenz .image-group div {
        width: 47.5%;
    }
    #footer {
        padding: 5em 0;
    }
    form {
        margin: 1em 0 5em 0;
    }
}

@media only screen and (max-width: 680px) { /* FLUID */
    #wrapper .inside,
    #footer .inside {
        width: 100%;
        padding: 0 6em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #main .logo {
        width: 105%;
        margin-left: -5%;
    }
    #content {
        padding-bottom: 0;
        margin-bottom: 4.5em;
    }
}

@media only screen and (max-width: 600px) { /* RESPONSIVE NAV */
    #nav, #sub-nav {
		display: none;
	}
	.open-nav,
	#responsive-nav {
		display: block;
	}
    .footer-top {
        flex-direction: column;
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 480px) {
    #wrapper .inside,
    #footer .inside {
        padding: 0 4em;
    }
    #header {
        margin-bottom: 0;
    }
    h1 {
        margin-bottom: 2em;
    }
    h2, h3 {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    #content {
        margin-bottom: 3.5em;
    }
    #main {
        margin-top: 3em;
    }
    #aside {
        margin-top: 2em;
    }
    #aside img {
        width: 75%;
    }
    .referenz .image-single,
    .referenz .image-group {
        margin-bottom: 1.6em !important;
    }
}

@media only screen and (max-width: 380px) {
    #wrapper .inside,
    #footer .inside {
        padding: 0 3em;
    }
    .referenz .image-single,
    .referenz .image-group {
        margin-bottom: 1.4em !important;
    }
    #content {
        margin-bottom: 2.5em;
    }
    #main {
        margin-top: 2.5em;
    }
    #aside {
        margin-top: 2.5em;
    }
}

@media only screen and (max-width: 320px) {
    .referenz .image-group {
        flex-direction: column;
        justify-content: flex-start;
    }
    .referenz .image-group div {
        width: 100%;
    }
    .referenz .image-group div:first-child {
        margin-bottom: 1.4em !important;
    }
}