﻿.gallery-container-pad {
    padding: 0px 25px;
}

.gallery-header {
    padding-top: 100px;
    background-color: black;
}

.gallery-item-col-4 {
    display: inline-block;
    background-color: white;
    max-height: 450px;
    max-width: 580px;
    min-height: 575px;
    min-width: 580px;
    text-align: center;
    margin: 140px 23px;
    padding: 0px;
    position: relative;
}

    .gallery-item-col-4 > a > img {
        display: block;
        max-height: 100%;
        max-width: 100%;
        height: -webkit-fill-available;
        margin: auto;
    }

.gallery-room-1 {
    background-image: url('../img/gallery-tour/gallery-room-1.jpg');
    background-size: 90%;
    background-position: top;
    background-repeat: no-repeat;
    background-color: black;
}

.gallery-room-2 {
    background-image: url('../img/gallery-tour/gallery-room-2.jpg');
    background-size: 90%;
    background-position: top;
    background-repeat: no-repeat;
    background-color: black;
}

.gallery-room-3 {
    background-image: url('../img/gallery-tour/gallery-room-3.jpg');
    background-size: 90%;
    background-position: top;
    background-repeat: no-repeat;
    background-color: black;
}

.gallery-room-4 {
    background-image: url('../img/gallery-tour/gallery-room-4.jpg');
    background-size: 90%;
    background-position: top;
    background-repeat: no-repeat;
    background-color: black;
}

.tour-landing-title-img {
    height: auto;
    width: 63%;
}


/*=======================================
    LAPTOP CSS
  =======================================
*/

/* ----------- Non-Retina Screens ----------- */
@media only screen and (min-width: 1250px) and (max-width: 1800px) {
    .gallery-item-col-4 {
        display: inline-block;
        background-color: white;
        max-height: 450px;
        max-width: 425px;
        min-height: 575px;
        min-width: 425px;
        text-align: center;
        margin: 140px auto;
        padding: 0px;
        position: relative;
    }
}


/*=======================================
    MOBILE WEB CSS
  =======================================
*/
@media only screen and (min-width : 320px) and (max-width: 767px) {
    .gallery-item-col-4 {
        background-color: white;
        max-height: 90%;
        max-width: 90%;
        margin: 50px auto;
        min-height: 90%;
        min-width: 90%;
        text-align: center;
        padding: 0px;
    }

        .gallery-item-col-4 > a > img {
            display: block;
            height: auto;
            margin: auto;
            width: 100%;
        }
}