/* Phone */

@media(max-width: 1200px) {
    .shape {
        width: 200px;
        height: 200px;
    }
}

@media(min-width: 1200px ) and (max-width: 1400px) {
    .shape {
        width: 250px;
        height: 250px;
    }
}

@media(max-height: 1280px) and (max-width: 1980) {
    .left {
        background: url(../img/Philharmonie_fullHD.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }
}

@media (max-width: 1024px) {
    .left {
        display: none;
    }
}

@media (max-width: 600px) {
    .right {
        height: 100%;
        width: 100%;
    }

    .logo {
        padding-top: 0px;
    }

    .logo-img {
        width: 16rem;
    }

    .card {
        max-width: 720px;
    }

    .bid-invisible-phone {
        display: none;
    }

    .phone-w-100 {
        width: 100%;
    }

    .phone-mw-100 {
        min-width: 100%;
    }

    .phone-flex-grow {
        flex-grow: 1;
    }
}


/* Desktop + Tablet */
@media (min-width: 600px) {

    .bid-fullscreen-bg {
        webkit-animation: changewidth 0.6s ease-in-out;
        -moz-animation: changewidth 0.6s ease-in-out;
        -o-animation: changewidth 0.6s ease-in-out;
        animation: changewidth 0.6s ease-in-out;
    }

    @keyframes changewidth {
        0% {
            width: 50%;
        }

        25% {
            width: 62.5%;
        }

        50% {
            width: 75%;
        }

        75% {
            width: 87.5%;
        }

        100% {
            width: 100%;
        }
    }

    .bid-visible-phone-only {
        display: none;
    }
}

/* Tablet */
@media (max-width: 839px) and (min-width: 600px) {
    .bid-main-cell {
        grid-column-start: 1;
    }
}

/* Desktop */
@media (min-width: 840px) {
    .bid-main-cell {
        grid-column-start: 2;
    }
}


@media (max-height: 599px) {
    .baloise-headerlogo {
        top: 10%;
    }
}

@media (min-height: 700px) {
    .baloise-headerlogo {
        top: 12%;
    }
}

@media (min-height: 800px) {
    .baloise-headerlogo {
        top: 14%;
    }
}

@media (min-height: 800px) {
    .baloise-headerlogo {
        top: 16%;
    }
}