/* BOOKING */
.topSpacer {
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
}

.booking-container {
    position: absolute;
    top: 100px !important;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    width: 95%;
    height: auto;
    z-index: 2;
    /*background-color: rgb(0,0,0,0.3);*/
}

    .booking-container .booking-logo {
        flex: 1;
        width: 250px;
        height: 450px;
        padding: 20px 100px 20px 20px;
        align-content: center;
        text-align: right;
    }

        .booking-container .booking-logo img {
            width: 250px;
            height: auto;
        }

    .booking-container .booking-form {
        flex: 1;
        width: 400px;
        height: 450px;
        flex: 1;
        padding: 20px;
    }

.booking-form-inner {
    width: 400px;
    height: 450px;
}

/* Tablet - Landscape (992px to 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

/* Tablet - Portrait (768px to 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .booking-container {
        top: 10px !important;
        flex-direction: row;
        flex-wrap: nowrap;
    }

        .booking-container .booking-logo {
            flex: 1;
            width: 200px;
            height: 450px;
            padding: 20px;
            align-content: center;
            text-align: center;
        }

            .booking-container .booking-logo img {
                width: 200px;
                height: auto;
            }

        .booking-container .booking-form {
            flex: 1;
            width: 300px;
            height: 450px;
            flex: 1;
            padding: 10px 0;
        }

    .booking-form-inner {
        width: 300px;
        height: 450px;
    }
}

/* Mobile - Landscape (576px to 932px) */
@media only screen and (min-width: 576px) and (max-width: 932px) {
    .booking-container {
        top: 10px !important;
        flex-direction: row;
        flex-wrap: nowrap;
    }

        .booking-container .booking-logo {
            flex: 1;
            width: 180px;
            height: 340px;
            padding: 20px;
            align-content: center;
            text-align: center;
        }

            .booking-container .booking-logo img {
                width: 180px;
                height: auto;
            }

        .booking-container .booking-form {
            flex: 1;
            width: 300px;
            height: 340px;
            flex: 1;
            padding: 10px 0;
        }

    .booking-form-inner {
        width: 300px;
        height: 340px;
    }
}

/* Mobile - Portrait (375px to 575px) */
@media only screen and (min-width: 375px) and (max-width: 575px) {
    .booking-container {
        top: 40px !important;
        flex-direction: column;
        flex-wrap: wrap;
    }

        .booking-container .booking-logo {
            flex: 1;
            width: 200px;
            height: 450px;
            padding: 20px;
            align-content: center;
            text-align: center;
        }

            .booking-container .booking-logo img {
                width: 200px;
                height: auto;
            }
        .booking-container .booking-form {
            flex: 1;
            width: 300px;
            height: 450px;
            flex: 1;
            padding: 10px 0;
        }

    .booking-form-inner {
        width: 300px;
        height: 450px;
    }
}

/* Small Screens (below 375px) */
@media only screen and (max-width: 374px) {
    .booking-container {
        top: 10px !important;
        flex-direction: column;
        flex-wrap: wrap;
    }

        .booking-container .booking-logo {
            flex: 1;
            width: 150px;
            height: 450px;
            padding: 10px;
            align-content: center;
            text-align: center;
        }

            .booking-container .booking-logo img {
                width: 150px;
                height: auto;
            }

        .booking-container .booking-form {
            flex: 1;
            width: 300px;
            height: 450px;
            flex: 1;
            padding: 10px 0;
        }

    .booking-form-inner {
        width: 300px;
        height: 450px;
    }
}