///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.hotel {
    background-color: $color-grey;
    border-bottom: 6px solid $color-golden;
    position: relative;
    height: 498px;
    overflow: hidden;

    .mobile-only {
        display: none;
    }
    .desktop-only {
        display: block;
    }

    .hotel-header {
        display: table;
        position: relative;
        width: 100%;
        height: 100%;
        img {
            width: 100%;
        }
    }

    .hotel-header-title {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: $color-white;
        font-size: 1.6rem;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
        left: 0;
    }

    .hotel-content {
        text-align: center;
    }

    .hotel-button {
        margin: 50px auto 40px auto;
        display: inline-block;
        /*margin-top: 140px;*/
        width: auto;

        white-space: nowrap;
        position: absolute;
        bottom: 0;
        left: 50%;

        &.button-grey {
            background-color: #454344;
            color: $color-white;
            font-family: "lucien-light";
            display: inline-block;
            height: 40px;
            padding: 0 20px 0 20px;
            line-height: 40px;
            margin: 0;
            margin-left: 1.5%;
        }
    }

    /*.hotel-btn-container {
        display: table;
        height: 100%;
    }

    .hotel-btn-wrapper {
        display: table-cell;
        vertical-align: middle;
    }*/

}

///////////////////////////////////////////////////////////////
// Device: Desktop XL
///////////////////////////////////////////////////////////////

@include desktop-xl {
    .hotel {
        /*height: 575px!important;*/
    }

}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .hotel {
        /*height: auto!important;*/
    }
    .hotel-button {
        /*position: relative!important;
        left: 0!important;*/
    }
}

@include tablet-portrait-and-below {
    .hotel {
        height: auto !important;
    }
    .hotel-button {
        position: relative !important;
        left: 0 !important;
        margin-left: 0 !important;
    }
}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .hotel {
        height: auto !important;
        background-color: $color-grey-darker;

        .mobile-only {
            display: block;
        }
        .desktop-only {
            display: none;
        }

    }
}

