/*
    for:
    ProductDetails_Auditorium.html
    ProductDetails_UpperBarok.html
    ProductDetails_LowerBarok.html
*/

.facility-div{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: 3px;
    column-gap: 10px;

    .facility-div-left{
        padding-right: 20px;
    }

    .facility-div-right{
        padding: 20px;

        span {
            display: block;
        }

        .facility-name {
            color: #012970;
            font-size: 24px;
            margin-bottom: 22px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .facility-description {
            color: #012970;
            font-size: 16px;
            line-height: 1.6;
            font-weight: 300;
            margin-top: 22px;
        }

        .layout-title {
            color: #012970;
        }

        button.active {
            background-color: #012970;
            transition: all .3s ease-in-out;
            color: white !important;
        }

        button {
            border: none;
            background-color: #899bbd;
            color: #000000 !important;
            transition: all .3s ease-in-out;

            &:hover {
                background-color: #012970;
                color: white !important;
            }
        }

        a {
            background-color: #012970;
            transition: all .3s ease-in-out;
            color: white !important;

            &:hover {
                background-color: rgba(1, 41, 112, 0.5);
                color: #032f48 !important;
            }
        }
    }

    .layout-button {
        margin-bottom: .5rem;
    }
}

.image-container {
    min-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 100%;
        margin: 0 auto;
    }
}

.hover-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 10px;

    div {
        background-color: rgba(1, 41, 112, 0.3);
        border: #51678f;
        min-height: 80px;
        padding: .1rem;
        border-radius: 3px;
        margin: 0 2px 2px 2px;
        display: flex;
        align-items: center;
        justify-content: center;

        .active {
            border-color: rgba(1, 41, 112, 0.5);
            background-color: #012970;
        }

        &:hover {
            border-color: #51678f;
            background-color: rgba(1, 41, 112, 0.5);
        }

        img {
            width: 100px;
            cursor: pointer;
        }
    }
}

@media screen and (max-width: 992px) {
    .facility-div{
        grid-template-columns: 100%;
    }
    .facility-div-right{
        text-align: center;
    }
    .facility-description{
        max-width: 400px;
        margin-right: auto;
        margin-left: auto;
    }

    .main-wrapper .container {
        margin: 5rem auto !important;
    }

    .image-container {
        min-height: 600px;
    }
}

@media screen and (max-width: 600px) {
    .image-container {
        min-height: 400px;
    }
}

@media screen and (max-width: 400px) {
    .image-container {
        min-height: 300px;
    }
}