html, body { width:100%; height:100%; background-color:#f5f5f5; }

.res-main { background-color:#F5F5F5; width:100%; height:100%; }
 
.res-header { width:100%; background-color: #FFFFFF; }
 
.res-logo { padding: 15px 0px; }
.res-logo img { height:100%; max-height: 50px; }
 
.res-banner { background-image: url(../img/room-banner.jpg); background-repeat: no-repeat; background-size: cover; padding: 50px 0px; text-align: center; color: white; } 
 
.res-banner-detail { background: rgba(0, 0, 0, 0.5); padding: 15px 30px; max-width: 820px; margin: 0px auto; }
.res-banner-detail h2 { margin-top: 0px; font-size: 45px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
 
.res-list { font-family: 'Montserrat', sans-serif; margin-top:15px; }
 
.res-room-box { width:100%; background-color:#FFFFFF; padding:0px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); margin-bottom:15px; }

.res-room-box-wrapper { padding:0px 15px; }
 
.res-room-image { padding:0px; }
.res-room-image img { width:100%; }
 
.res-room-detail { padding:25px 20px; }
 
.res-room-head {  }
.res-room-head h1 { font-size:17px; padding:0px; margin:0px; }
.res-room-head h3 { font-size:13px; padding:0px; margin:0px; font-weight: 300; margin-top:2px; opacity:.7; }
 
.res-room-price { position:absolute; right:20px; top:20px; font-family: 'Playfair Display', serif; color: #f4322d;  }
.res-room-price h3 { font-size:30px; font-weight: 700; }
.res-room-price h3 i { font-size:15px; }
 
.res-room-desc p { font-size:14px; opacity:.7; }
 
.res-room-feature { margin-top:15px; }
.res-room-feature ul { list-style: none; padding:0px; margin:0px; }
.res-room-feature ul li { display: inline-block; width:120px; height:30px; font-size:14px; }
 
.res-room-feature ul li i { margin-right:8px; }
 
.res-room-res { text-align: right; margin-top:10px; }
.res-room-res a { text-decoration: none; background-color:transparent; border:solid 1px #f4322d; padding:4px 15px; color:#f4322d; font-size:14px; }
.res-room-res a i { margin-right:8px; }
 
.res-room-res a:hover { background-color:#f4322d; color:#FFFFFF; cursor:pointer; }
 
.res-sidebar { background-color:#FFFFFF; padding:0px; }
 
.res-sidebar-detail { padding:20px; }
 
.res-sidebar-detail h3 { font-size:16px; padding:0px; margin:0px; padding:10px 0px; color:#f4322d; }
 
.res-sidebar-detail ul { list-style: none; padding:0px; margin:0px; }
.res-sidebar-detail ul li { margin-bottom:10px; }
 
.res-sidebar-detail ul li p { padding:0px; margin:0px; font-size: 13px; }
.res-sidebar-detail ul li span { font-size:15px; }
 
.res-sidebar button { background-color:transparent; border:solid 1px #f4322d; padding:4px 15px; color: #f4322d; font-size:14px; }
.res-sidebar button i { margin-right:8px; }
 
.res-sidebar button:hover { background-color:#f4322d; color:#FFFFFF; cursor:pointer; }
 

.person-form hr { width: 100%; }

.res-rooms { display:block; }
.res-process { display:none; }
 
.res-process-detail { background-color:#FFFFFF; padding:20px; }
.res-process-detail h3 { font-size:16px; padding:0px; margin:0px; padding:10px 0px; }

.res-process-detail hr { margin-bottom:0px; }
 
.person-form {  padding: 25px 0px; }
.card-form { padding:25px 0px; }

#reservation-person { padding:15px 25px; border-left: solid 1px #dee2e6; border-right:solid 1px #dee2e6; border-bottom:solid 1px #dee2e6;  }
#reservation-person label { font-size:14px; font-weight: 500; }

#reservation-card { padding:15px 25px; border-left: solid 1px #dee2e6; border-right:solid 1px #dee2e6; border-bottom:solid 1px #dee2e6; }

/** NAV LINK **/

.nav-tabs .nav-link { border-top-left-radius: 0px; border-top-right-radius: 0px; }

.nav-item .active { font-weight: 500; }

.nav-link { padding:15px 25px; font-size:14px; }

.NextButton a { background-color:transparent; color:#f4322d !important; cursor:pointer; border:solid 1px #f4322d; padding:4px 15px;  font-size:14px; }
.NextButton a i { margin-right:8px; }
.NextButton a:hover { background-color:#f4322d; color:#FFFFFF !important; cursor:pointer; }

#PrevButton { background-color:transparent; border:solid 1px #f4322d; padding:4px 15px; color:#f4322d; font-size:14px; }
#PrevButton i { margin-right:8px; }
#PrevButton:hover { background-color:#f4322d; color:#FFFFFF; cursor:pointer; }

#ResButton { background-color:transparent; border:solid 1px #f4322d; padding:4px 15px; color:#f4322d; font-size:14px; }
#ResButton i { margin-right:8px; }
#ResButton:hover { background-color:#f4322d; color:#FFFFFF; cursor:pointer; }


/** CARD **/

.card-month { float:left; width:48%; }
.card-year { float:right; width:48%; }

.card-date::after { content: ''; clear: both; display: block; }

.card-price { background-color: #ebebeb; padding: 20px; text-align: right; }
.card-price p { padding:0px; margin:0px; }
.card-price h2 { padding:0px; margin:0px; }

.card-pricing { text-align: right; }
.card-pricing input { text-align: right; }

.card-back { text-align: right; }
.card-back input { text-align: right; }
 

/** MODAL**/

.modal-body { padding:0px; }

/** RESPONSIVE **/
@media screen and (max-width: 768px) {
    
    
    .res-sidebar { padding:0px; margin-bottom:15px; }
    
    
}