@media (max-width: 1440px){
    .flex-content > div{
        padding-right: 5vw;
    }
    .location .location-img .zoom{
        bottom: initial;
    }
}
@media (max-width: 1199px){
    .flex-content > div{
        padding-right: 20px;
        padding-left: 20px;
    }
}
@media (min-width: 1025px){
    .read-more .button{
        display: none;
    }
    .read-more .more-content{
        max-height: 1000px;
    }
}
@media (max-width: 1024px){
    .read-more .button{
        font-weight: 900;
        font-style: italic;
    }
    .read-more .more-content p:nth-of-type(1){
        margin-top: 0;
    }
    .read-more .more-content{
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s ease;
    }
    .read-more.open .more-content{
        max-height: 1000px;
    }
    section{
        min-height: auto;
    }
    /* --- general --- */
    body:after{
        z-index: 10;
        width: 70px;
    }
    .flex-container{
        flex-direction: column;
    }
    .green-headline{
        padding-left: 35px;
    }
    .green_bg{
        padding-left: 0;
    }
    section .inside{
        width: 100%;
    }
    .flex-content{
        padding-left: 20px;
        padding-right: 20px;
    }
    .flex-content > div{
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 0px;
    }
    /* --- header --- */
    #header:after{
        width: 70px;
        content: '';
        display: block;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(163, 91, 90, 0.8);
    }
    #header{
        width: 100%;
        height: auto;
        background-color: rgba(255, 255, 255, 1);
        padding: 20px 0px;
        margin-left: 0;
        z-index: 15;
        box-sizing: border-box;
        height: 100px;
    }
    #header nav{
        position: fixed;
        top: 0;
        background-color: rgba(241, 227, 215, 0.8);
        padding: 100px 20px;
        height: 100vh;
        width: 50%;
        transform: translateX(-100%);
        margin-top: 0;
        z-index: 1;
        top: 0;
        box-sizing: border-box;
        transition: all 0.3s ease;
    }
    #nav-icon{
        display: block;
        width: 30px;
        height: 26px;
        position: fixed;
        z-index: 20;
        top: 35px;
        left: 20px;
    }
    #nav-icon span{
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: rgba(255, 255, 255, 1);
        transition: all 0.3s ease;
    }
    #nav-icon span:nth-of-type(1){
        top: 0
    }
    #nav-icon span:nth-of-type(2), 
    #nav-icon span:nth-of-type(3){
        top: 11px
    }
    #nav-icon span:nth-of-type(4){
        top: 22px
    }
    body.open-nav #nav-icon span:nth-of-type(1),
    body.open-nav #nav-icon span:nth-of-type(4){
        opacity: 0;
    } 
    body.open-nav #nav-icon span:nth-of-type(2){
        transform: rotate(45deg);
    }
    body.open-nav #nav-icon span:nth-of-type(3){
        transform: rotate(-45deg);
    }
    body.open-nav #header nav{
        transform: translateX(0);
    }
    #header #logo{
        max-width: 200px;
        margin: 0 auto;
        padding-top: 10px;
    }
    body.open-nav #footer-nav{
        transform: translateX(0);
    }
    #footer-nav{
        z-index: 1;
        left: 20px;
        position: fixed;
        transform: translateX(-100%);
        width: 50%;
        transition: all 0.3s ease;
    }
    /* --- Home --- */
    section#home{
        padding-top: 120px;
    }
    section#home .visual{
        min-height: 55vh;
    }
    #home .inside .claim{
        position: relative;
        left: 0;
        padding-left: 90px;
        margin-top: 20px;
    }
    #home .content {
        width: 100%;
        margin: 0 auto;
        padding: 20px 20px 60px 90px;
        position: relative;
        left: 0;
        box-sizing: border-box;
    }
    #home .inside:after{
        background: rgba(255, 255, 255, 0);
    }
    #home .visual .bg-wrap{
        min-height: 75vh;
        background-position: 75% center;
    }
    /* --- Daten und Fakren --- */
    #facts-figures .highlights, 
    #facts-figures .facts{
        padding-bottom: 20px;
    }
    .highlights h2{
        margin-bottom: 60px;
    }
    .highlights-facts .facts{
        padding-left: 90px;
        padding-top: 20px;
    }
    #facts-figures .visual{
        background-attachment: scroll;
        background-size: cover;
    }
    #facts-figures .visual_03 {
        background-image: url(../images/birdview.jpg);
        min-height: 60vh;
        background-size: 200% ;
        background-position: bottom;
    }
    .modal-inside{
        padding: 0;
        width: 100%;
        height: auto;
    }
    .location .location-img .zoom{
        bottom: 20px;
    }
    /* --- Galerie --- */
    #gallery{
        padding-top: 130px;
        margin-bottom: 0;
        padding-left: 0;
    }
    #gallery .owl-nav button{
            width: 40px;
            height: 40px;
            top: 28vh;
            margin-top: -80px;
    }
    #gallery .owl-nav button.owl-prev{
        left: 20px;
    }
    .owl-dots{
        padding-left: 80px;
    }
    #gallery .owl-dots{
        width: auto;
        text-align: auto;
        padding-left: 0;
    }
    .slide .img-meta{
        position: relative;
        float: right;
        text-align: left;
        padding-left: 90px;
    }
    .slide:after{
        display: block;
        content: "";
        clear: both;
    }
    /* --- contact --- */
    #contact{
        padding-top: 120px;
    }
    #contact h2{
        padding-top: 20px;
        height: auto;
    }
    #contact .flex-content > div:nth-of-type(1),
    #contact .flex-content > div:nth-of-type(2){
        flex: 0 100%;
        width: 100%;
    }
    #contact .companies{
        padding-top: 20px;
    }
    .companies img.logo{
        height: 35px;
        width: auto;
    }
    .companies div {
        margin-bottom: 50px;
    }
    /* --- imprint & data-privacy --- */
    .imprint section, 
    .data-privacy section{
        padding-top: 130px;
        hyphens: auto;
    }
    .imprint h2, 
    .data-privacy h2{
        padding-top: 0;
        font-size: 22px;
    }
    #imprint .flex-content > div:nth-of-type(1),
    #imprint .flex-content > div:nth-of-type(2){
        flex: 0 100%;
        width: 100%;
    }
    .data-privacy .flex-content > div:nth-of-type(1),
    .data-privacy .flex-content > div:nth-of-type(2){
        flex: 0 100%;
        width: 100%;
    }

    .data-privacy .flex-content a{
        word-break: break-word;
    }
    .imprint .flex-content > div:nth-of-type(1),
    .data-privacy .flex-content > div:nth-of-type(1){
        order: 2;
    }
    .data-privacy .back, 
    .imprint .back{
        order: 1;
        top: 0;
    }


    /* === Kontorhaus === */

    .highlights h2{
        height: auto;
        margin-bottom: 40px;
    }
    .offices-slider .rendering{
        width: 75%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .offices-slider .rendering,
    .offices-slider .belegung{
        padding: 20px;
    }
    .offices-slider .zoom-img figure{
        padding: 0;
    }

    .offices-slider .custom-nav.owl-nav{
        top: 100px;
    }
    .offices-slider .owl-nav .owl-prev{
        left: 20px;
    }
    .owl-carousel.owl-drag .owl-item{
        overflow: hidden;
    }
    #gallery .gallery-item img{
        max-height:30vh;
    }
    #wrapper .visual{
        background-attachment: initial !important;
        background-size: cover;
        background-position: center;
    }
}