@media only screen and (max-width: 700px) {

    * {
        font-family: "Lato", sans-serif;
        color: #ffffff;
    }

    body {
        margin: 0px;
    }

    /* ------------- Background ------------- */

    .contentBackground {
        background-color: #060606;

        transform: rotateZ(6deg);
        height: 140%;
        width: 200%;
        position: fixed;
        top: 35%;
        left: -50%;
        padding: 40px;
    }

    .leftBackground {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(assets/left-background.jpg);

        height: 50%;
        width: 100%;
        position: absolute;
    }

    /* ------------- Left Content ------------- */

    .innerLeftBackground {
        width: 100vw;
    }

    .innerLeftBackground h2 {
        text-align: center;
        font-weight: 300;
        font-size: 4vw;
        margin-top: 6vw;
    }

    .mainImage {
        display: block;
        width: 40%;
        margin: 0 auto 10%;
    }

    /* ------------- Right Content ------------- */

    .contentContainer {
        width: 100vw;
        height: 100vh;
        position: absolute;
    }

    .logo {
        display: block;
        width: 40%;
        margin: 37vh auto 2vh auto;

    }

    /* ------------- Concert ------------- */

    #concert {
        padding: 5%;
        background-color: rgba(255, 255, 255, 0.1);
        width: 88vw;
        margin: 0vw auto 10vw;
        box-sizing: border-box;
        cursor: pointer;
    }

    #concert div {
        margin: auto;
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 0 2vw;
        width: fit-content;
    }

    #concert h1 {
        /* DATE */
        font-size: 8vw;
        font-weight: 900;
        width: fit-content;
        grid-row-start: 1;
        grid-row-end: 3;
        margin: auto 0;
        line-height: 0;
    }

    p.concert {
        /* LOCATION */
        color: #935459;
        font-size: 4.7vw;
        font-weight: 700;
        width: fit-content;
        height: fit-content;
        margin: auto 0;
        white-space: nowrap;
    }

    #concert h2 {
        /* TIME */
        color: #935459;
        font-size: 2.4vw;
        font-weight: 700;
        width: fit-content;
        grid-column-start: 3;
        margin: auto 0;
    }

    .horizontalLine {
        border-left: 0.15vw solid #ffffff;
        height: 6.4vw;
        transform: translateY(0.1vw);
        width: fit-content;
        grid-column-start: 2;
        grid-row-start: 1;
        grid-row-end: 3;
        margin: auto 0;
    }

    /* ------------- Concert Details ------------- */

    p.concertDetails {
        display: none;
        font-size: 3vw;
        font-weight: 300;
        margin: 0;
        height: fit-content;
    }

    #concertDetails1 {
        grid-column-start: 1;
        grid-row-start: 3;
        margin-top: 2vw;
        text-align: right;
    }

    #concertDetails2 {
        grid-column-start: 1;
        grid-row-start: 4;
        text-align: right;
    }

    #concertDetails3 {
        grid-column-start: 1;
        grid-row-start: 5;
        text-align: right;
    }

    #concertDetails4 {
        grid-column-start: 3;
        font-size: 3vw;
        font-weight: 700;
        margin: 2vw 0 1vw 0;
    }

    #concertDetails5 {
        grid-column-start: 3;
        font-size: 3vw;
        margin: 0 0 1vw 0;
    }

    #concert a {
        font-size: 3vw;
        font-weight: 700;
        text-decoration: underline;
    }

    #concertDetails6 {
        grid-column-start: 3;
        font-size: 2vw;
    }

    #arrow {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 6;
        transform: translateY(9px);
    }

    #arrow i {

        width: 2vw;
        height: 2vw;
        border: solid #ffffff;
        border-width: 0 0.15vw 0.15vw 0;
        display: inline-block;
        transform: rotate(45deg);
    }

    /* ------------- Pressekit ------------- */

    button {
        margin: auto;
        font-size: 3vw;
        font-weight: 400;
        background-color: rgba(0, 0, 0, 0);
        padding: 1vw 6vw;
        border: 0.15vw solid #ffffff;
        display: block;
    }

    button:hover {
        background-color: #ffffff;
        color: #060606;
        cursor: pointer;
    }

    #presseKitPopUp {
        display: none;
        top: 3vw;
        left: 0;
        position: fixed;
        height: 100vh;
        width: 100vw;
    }

    #presseKitPopUp div {
        display: grid;
        width: 90%;
        background-color: #555;
        font-size: 1.6vw;
        padding: 1% 4% 4%;
        margin: auto;
        box-sizing: border-box;
        transform: translateZ(40px);
        grid-template-columns: auto auto;
    }

    #presseKitPopUp h1 {
        grid-column-start: 1;
        grid-column-end: 3;
        font-size: 4vw;
    }

    #presseKitPopUp img {
        height: 50vw;
        margin: 0 auto 6%;
    }

    #presseKitPopUp p {
        grid-column-start: 1;
        grid-column-end: 3;
        padding: 0 1vw;
        text-align: justify;
    }

    .close {
        width: 50px;
        height: 50px;
        cursor: pointer;
        position: absolute;
        right: 0px;
    }

    .close::before {
        background-color: #ffffff;
        border-radius: 1px;
        border-width: 2px;
        width: 3vw;
        height: 2px;
        position: absolute;
        display: block;
        content: '';
        transform: rotate(45deg);
        top: 25px;
        right: 20px;
    }

    .close::after {
        background-color: #ffffff;
        border-radius: 1px;
        border-width: 2px;
        width: 3vw;
        height: 2px;
        position: absolute;
        display: block;
        content: '';
        transform: rotate(-45deg);
        top: 25px;
        right: 20px;
    }

    /* ------------- Footer ------------- */

    hr {
        background-color: #ffffff;
        height: 1px;
        border: none;
    }

    footer {
        width: 100%;
        padding: 0% 5%;
        text-align: right;
        position: absolute;
        box-sizing: border-box;
        bottom: 20px;
    }

    a {
        text-decoration: none;
    }

    .socials {
        height: 9vw;
        margin: 1vw 2vw;
    }

    footer a.datenschutz {
        color: #3E3E3E;
        font-size: 2.5vw;
        margin: 2.8vw 2vw;
        text-align: left;
        float: left;
        text-decoration: none;
    }

}