@media all and (max-width: 768px) {

    nav {
        padding: 10px;
    }

    nav img.logo {
        width: 30%;
    }

    nav .divider {
        margin: 0 10px;
    }

    nav a .icon {
        width: 15px;
        height: 15px;
    }

    nav .header_links .call {
        width: 115px;
    }

    .banner .play {
        width: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .banner .play span {
        font-size: 14px;
    }

    .banner .play .divider {
        margin: 0 10px;
    }

    .banner .play input[type="range"] {
        width: 30%;
    }

    .banner .play .icon {
        width: 15px;
        height: 15px;
    }

    .info p {
        width: 100%;
    }

    .map img {
        width: 100%;
    }

    .hero_1 img {
        width: 85vw;
    }

    .hero_2 .shows {
        width: 90%;
        grid-template-columns: 1fr;
    }

    .hero_2 .shows img {
        width: 90vw;
    }

    .modal .content {
        width: 100%;
        padding: 10px 10px 100px 10px;
    }

    h3.bordered::before,
    h3.bordered::after {
        width: 30%;
    }

    h4.bordered::before,
    h4.bordered::after {
        width: 25%;
    }




    .presenter {
        justify-content: center;
        flex-wrap: wrap;
        margin: 40px auto;
    }

    .presenter .information {
        text-align: center;
        margin-top: 10px;
    }

    .iframe-soundcloud {
        width: 90%;
    }


}

h4.bordered.xs-bordered::before,
h4.bordered.xs-bordered::after {
    width: 38%;
}


@media all and (max-width: 1100px) {
    h4.bordered::before,
    h4.bordered::after {
        width: 39%;
    }

    h4.bordered.xs-bordered::before,
h4.bordered.xs-bordered::after {
    width: 36%;
}
}

@media all and (max-width: 880px) {
    h4.bordered::before,
    h4.bordered::after {
        width: 32%;
    }

    h4.bordered.xs-bordered::before,
    h4.bordered.xs-bordered::after {
        width: 28%;
    }

}

@media all and (max-width: 450px) {
    nav .header_links a {
        margin: 0 5px;
    }
}

@media all and (max-width: 580px) {

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    nav .phoneWrapper {
        flex-direction: column;
    }

    nav .phoneWrapper a img {
        width: 15px;
    }

    nav .phoneWrapper a {
        margin: -4px 0;
    }

    nav .phoneWrapper a:first-child img {
        width: 50px;
    }

    nav .phoneWrapper a:last-child {
        order: -1;
    }

    nav .header_links {
        margin-left: 30px;
    }

    h4.bordered::before, h4.bordered::after {
        width: 23%;
    }

    h4.bordered.xs-bordered::before, h4.bordered.xs-bordered::after {
        width: 14%;
    }

}