@media (max-width: 960px) {

    h1.desktop-headline {
        display: none;
    }

    .top-bar {
        background-color: #ffffff;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        padding: 1.5em 2em;
    }

    .top-bar > .logo {
        background: white url(../svg/PieperKarsch_Logo.svg) no-repeat;
        min-height: 20vw;
    }

    .top-bar-active {
        background-color: #2B333A;
        color: white;
        padding: 1.5em 2em;
    }

    .top-bar-active > a > .logo {
        background: #2B333A url(../svg/PieperKarsch_Logo_white.svg) no-repeat;
        min-height: 20vw;
    }

    .top-bar-active > .top-menu > .hide {
        display: none;
    }

    .top-bar-active > .top-menu {
        width: 100%;
        margin: auto 0 auto 0;
    }

    .top-bar-active > .top-menu > ul {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding-left: 0;
        transition: all 1s ease-in-out;
    }

    i.active {
        transform: rotate(90deg);
    }

    .top-bar-active > .top-menu > ul > li {
        margin-left: 0;
        padding: 1em 0;
        border-bottom: 2px solid white;
    }

    .top-bar-active > .top-menu > ul > li:first-child {
        display: none;
    }

    .top-bar-active > .top-menu > ul > li > a {
        font-size: 22px;
        color: white;
    }

    .top-bar > .mobile-menu-button {
        margin: auto 0 auto 0;
        font-size: 38px;
        display: block;
        cursor: pointer;
    }

    .top-bar > .mobile-menu-button > i {
        transition: all 0.2s linear;
    }

    .start {
        background-color: #2B333A;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .start > .start-column-left {
        order: 2;
        margin: auto 2em 4em 2em;
    }

    .start h1 {
        font-size: 40px;
    }

    .start h2 {
        font-size: 25px;
    }

    .start > .start-column-right {
        overflow: unset;
    }

    .start > .start-column-right > img {
        width: 100%;
        height: auto;
    }

    .content-row {
        display: flex;
        flex-direction: column;
    }

    .content-values-column-left {
        overflow: hidden;
        width: auto;
        margin:  auto 2em 2em 2em;
    }

    .content-values-column-left > h1,
    .content-about-us > .content-about-us-column-right > h1,
    .content-slider > .content-slider-column-left > h1 {
        display: block;
        font-size: 35px;
        font-family: 'Roboto Bold', Arial, serif;
        color: black;
        font-weight: 100;
        padding: 0;
        margin-bottom: 0;
    }

    .content-values-column-left > .content-values-image {
        margin: 1em auto auto auto;
    }

    .content-values-column-left > .content-values-image > img {
        width: 130%;
        height: auto;
    }

    .content-values-column-right > .card-box {
        padding: 0 2em 1em 2em;
    }

    .content-values-column-right > .card-box > .card {
        margin: 0;
        width: 100%;
    }

    .content-about-us > .content-about-us-column-left {
        margin: 0 2em 2em 2em;
        padding-top: 1em;
        order: 2;
    }

    .content-about-us > .content-about-us-column-right {
        margin: auto 2em;
    }

    .content-about-us > .content-about-us-column-right > .content-about-us-image {
        margin: 1em 0;
    }

    .content-slider {
        padding-top: 3em;
    }

    .content-slider > .slick-list > .slick-track > .slick-slide > .content-slider-column-left {
        margin: auto 2em;
    }

    .content-slider > .slick-list > .slick-track > .slick-slide > .content-slider-column-left > .content-slider-image {
        margin: 1em 0;
    }

    .content-slider > .content-slider-column-left > .content-slider-dots {
        margin: 0 auto;
        justify-content: center;
    }

    .content-slider > .content-slider-column-left > .content-slider-dots > a:first-child {
        margin-left: 0;
    }

    .content-slider > .slick-list > .slick-track > .slick-slide > .content-slider-column-right {
        margin-right: 2em;
        padding-top: 0;
        padding-left: 2em;
        margin-bottom: 2em;
    }

    .content-slider > .slick-list > .slick-track > .slick-slide > .content-slider-column-right > .slider-box {
        padding-top: 0;
    }

    .content-slider > .slick-list > .slick-track > .slick-slide > .content-slider-column-right > .slider-box > h2 {
        margin-top: 0;
        font-size: 24px;
    }

    .content-slider-column-right > .slider-box > p {
        font-size: 18px;
    }

    .slide {
        /* display: grid !important; */
        /* grid-template-columns: [start] auto [middle] 55% [end]; */
        display: flex!important;
        flex-direction: column;
        /* width: 100%;*/
    }


.services-start > .start-column-left > p {
    padding-right: 0;
}

.content-services > .card-box {
    display: flex;
    flex-direction: column;
    padding: 2.5em 2em 2.5em 2em;
}

.content-services > .card-box > .card {
    width: 100%;
}

.content-team > .card-box {
    padding: 1.5em 2em 2.5em 2em;
}

.content-team > .card-box > .card {
    width: 100%;
}

.content-team > h1 {
    font-size: 40px;
}

.content-contact > .content-contact-row {
    display: flex;
    flex-direction: column;
    margin-left: 2em;
    margin-right: 2em;
}
.phone > a {
    text-decoration: none;
    color: white;
}

.content-contact > .content-contact-row h1,
.content-contact > .content-contact-row > p {
    text-align: center;
}

.content-contact > .content-contact-row >.content-contact-image {
    order: 3;
    overflow: hidden;
}

.content-contact > .content-contact-row > .content-contact-image > img {
    margin-top: 0;
    width: 250%;
}

.content-contact > .content-contact-row > .contact-box {
    width: 100%;
    position: static;
    padding-bottom: 2em;
    margin: 6em auto 0 auto;
    order: 2;
    padding-top: 2em;
}

.content-contact > .content-contact-row > .contact-box > .contact-box-row {
    padding: 0 1em 1em 2em;
}

.content-contact > .content-contact-row > .contact-box > .contact-box-row > div {
    margin-left: 2em;
}

.content-contact > .content-contact-row > .contact-box > .contact-box-row > div > p {
    font-size: 17px;
}

.content-contact > .content-contact-row > .contact-box > .contact-box-row img {
    width: 9%;
}

.content-imprint, .content-privacy-policies {
    padding: 0 2em;
}

.content-imprint > h1, .content-privacy-policies > h1 {
    font-size: 30px
}

.content-imprint > h2, .content-privacy-policies > h2 {
    font-size: 24px;
}

footer {
    padding-left: 2em;
    padding-right: 2em;
}

footer > .footer-head {
    display: flex;
    flex-direction: column;
    margin: 2em 0;
}

footer > .footer-head > .footer-contact-right {
    align-self: start;
    margin-left: 0;
}

footer > .footer-foot > .copyright {
    display: none;
}

footer > .footer-foot > .footer-menu > ul {
    padding-left: 0;
}
}

@media (max-width: 768px) {
.top-bar > .mobile-menu {
    font-size: 35px;
}

.start h1 {
    font-size: 35px;
}
}