html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
* { text-decoration: none; outline: none; }

/* Rates Grid */

#grid { width:100%; max-width:1300px; margin:0 auto 100px; padding: 0 50px; border-radius:6px; position: relative; box-sizing: border-box; }
#grid:after { content: ''; clear: both; display: block; }
#grid .rates-container { padding-top: 90px; }
#grid h3 { width:100%; margin: 0 0 1px; font:400 16px/70px 'Montserrat'; color:#C9AC7F; text-align: center; box-sizing:border-box; -moz-box-sizing:border-box; }
#grid .row { width:100%; }
#grid .row .rates { width:calc(100% - 250px); float: left; }
#grid .row .cell { box-sizing:border-box; -moz-box-sizing:border-box; color: #22292D; background:#C9AD7F; border-right:1px solid #A8936F; border-bottom:1px solid #A8936F; float: left; vertical-align:middle; position: relative; }
#grid .row .cell span { position: relative; z-index: 1; }
#grid .row .cell.room { width:250px; padding: 0 15px; font:400 10px/50px 'Montserrat'; letter-spacing: 1.5px; text-transform: uppercase; color: #FFF; background:#2D3438 !important; border-bottom:1px solid #22292D !important; border-right: 1px solid #181D20 !important; overflow: hidden; float: left; position: relative; }
#grid .row .cell.room .jacuzzi { font-size: 9px; font-family: 'Karla'; line-height: 22px; letter-spacing: .7px; position: absolute; top:14px; right: 12px; padding: 0 5px; background: rgba(255,255,255,.1); border-radius: 3px; color: #FFF !important; }
#grid .row .cell.rate, #grid .row.dates .cell { width:calc((100% - 1px) / 14); text-align:center; }
#grid .row .cell.rate { font:700 11px/50px 'Montserrat'; letter-spacing: .8px; position: relative; text-shadow: 1px 1px 0 rgba(255,255,255,.2); }
#grid .row .cell.rate.enquire { font-size: 11px; font-weight:400 !important; letter-spacing:.4px; text-shadow:none; }
#grid .row .cell.rate.sold { font-weight: 400; font-size: 11px; letter-spacing: .5px; text-shadow: none; color:rgba(0,0,0,.5); background: #A18A66; border-color: #8D795A; }
#grid .row .cell.rate.enquire:before { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,.2); position: absolute; top: 0; left: 0; opacity: .5; }
#grid .row .cell.rate.special:after { content: ''; width: 0; height: 0; border-top: 20px solid #FBBA00; border-right: 20px solid transparent; position: absolute; top: 0; left: 0; }
#grid .row .cell:last-child { border-right-color: #22292D; }
#grid .roomtype:last-child .row .cell { border-bottom-color: #22292D !important; }
#grid .row a.cell.rate:before { content: ''; width: 100%; height: 100%; background:url(images/button-back.jpg); background-size:120% 120%; position: absolute; top: 0; left: 0; opacity: .2; }

.property #grid { margin: 35px auto 50px; }
.property #grid h3 { display: none !important; }
.property #grid .row .cell.room, .property #grid .row.dates .cell.blank { display: none !important; }
.property #grid .row .rates { width: 100%; }
.property #grid .row .cell.rate { line-height: 60px; }
.property .book-hero { padding: 30px 0 0; }
.property .book-hero img { max-width: 400px; }

#grid .row.dates { width: calc(100% - 100px); margin-bottom: 1px; overflow:hidden; position: absolute; z-index: 99; background:#181D20 !important; }
#grid .row.dates.scroll { position: fixed; top: 0; }
#grid .row.dates .cell { height: 90px; padding:15px 0 13px; font:400 12px/15px 'Karla'; color:#FFF; letter-spacing: .3px; background:#181D20 !important; border-bottom:none; border-right:1px solid #22292D; }
#grid .row.dates .cell.blank { width:250px; }
#grid .row.dates .rates .cell:nth-child(2) { border-left:1px solid #22292D; }
#grid .row.dates .rates .cell:first-child { border-right:none; }
#grid .row.dates .rates .cell:last-child { border-right: none !important; }
#grid .row.dates .cell .number { font-weight: 400; font-size:20px; font-family:'Montserrat'; }
#grid .row.dates .cell .month { font-weight: 300; }
#grid .row.dates .cell .day { margin-top: 9px; padding: 2px 9px 3px; font-weight: 300; font-size:12px; color:rgba(255,255,255,.5); background: rgba(255,255,255,.05); display: inline-block; border-radius: 3px; }

.date-nav { width: 100%; padding: 30px; box-sizing: border-box; background:#181D20; border-bottom:1px solid #22292D; }
.date-nav .date-nav { padding: 0; border: none; width: auto; }
.date-nav .skip { padding: 0 12px; font:400 13px/36px 'Karla'; color: #FFF; background: #2D3438; border-radius: 3px; }
.date-nav .skip.prev { float: left; }
.date-nav .skip.next { margin-right: 1px; float: right; }
.date-nav .skip.prev i { margin-right: 10px; float: left; }
.date-nav .skip.next i { margin-left: 10px; float: right; }
.date-nav .selectors { margin: auto; display: table; }
.selectors select { width: 180px; height: 36px; margin-left: 30px; padding: 0 10px; font:400 13px/36px 'Karla'; color: #FFF; float: right; border-radius: 3px; cursor: pointer; box-sizing: border-box; background: #2D3438; -webkit-appearance:none; }
.date-calendar { float: right; position: relative; }
.date-calendar input { width: 180px; height: 36px; padding: 0 0 0 40px; font:400 13px/36px 'Karla'; color: #FFF; border-radius: 3px; cursor: pointer; box-sizing: border-box; background: #2D3438; }
.date-calendar:before { content: '\f3f3'; font-family: 'IonIcons'; font-size: 18px; color: #FFF; position: absolute; top: 3px; left: 15px; }
.date-nav:after { content: ''; clear: both; display: block; }

#grid .row a.cell.rate:not(.sold):hover { font-weight: 700; color: #22292D; }
#grid .row a.cell.rate:not(.sold):hover:before { opacity: 1; }
#grid .row a.cell.rate.enquire:hover:before { opacity: .2; }
#grid .row .cell.room:hover { color: #C9AD7F !important; }

#pr { position: absolute; top: -26px; left: 50%; margin-left: -1px; padding: 15px; transform: translateX(-50%); z-index: 10; border-radius: 100px; background: #181D20; }
.loader { width: 20px; height: 20px; margin: 0 auto; border: 3px solid #C9AD7F; border-radius: 50%; border-left-color: transparent; border-right-color: transparent; animation: cssload-spin 1025ms infinite linear; -o-animation: cssload-spin 1025ms infinite linear; -ms-animation: cssload-spin 1025ms infinite linear; -webkit-animation: cssload-spin 1025ms infinite linear; -moz-animation: cssload-spin 1025ms infinite linear; }

@keyframes cssload-spin {
	100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin {
	100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin {
	100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
	100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin {
	100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

/* Transitions */

.date-nav a, #grid .row .cell.room, #grid .row .cell.enquire, #grid .row a.cell.rate:before, input, select { transition:.2s ease; }

/* Responsive */

@media only screen and (max-width:1200px) {
#grid { padding: 0; }
#grid .row.dates { width: 100%; }
}
@media only screen and (max-width:900px) {
#grid .row .rates .cell:nth-child(14) { display:none !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc((100% - 1px) / 13); }
.date-nav { padding: 10px; }
.date-nav .selectors { width: calc(100% - 176px); }
.date-calendar, .selectors select { width: calc(50% - 7px); }
.selectors select { margin-left: 10px; }
.date-calendar input { width: 100%; }
#pr { top: -22px; }
.loader { width: 14px; height: 14px; border-width: 2px; }
}
@media only screen and (max-width:850px) {
#grid .row .rates .cell:nth-child(13) { display:none !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc((100% - 1px) / 12); }
}
@media only screen and (max-width:800px) {
#grid .row .rates .cell:nth-child(12) { display:none !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc((100% - 1px) / 11); }
}
@media only screen and (max-width:750px) {
#grid .row .rates .cell:nth-child(11) { display:none !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc((100% - 1px) / 10); }
}
@media only screen and (max-width:700px) {
#grid .row .rates .cell:nth-child(10) { display:none !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc((100% - 1px) / 9); }
}
@media only screen and (max-width:650px) {
#grid .row .rates .cell:nth-child(9) { display:none !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc((100% - 1px) / 8); }
.date-nav .selectors { width: calc(100% - 96px); }
.skip { padding: 0 16px !important; }
.skip span { display: none; }
.skip i { margin: 0 !important; }
}
@media only screen and (max-width:600px) {
#grid .row .rates .cell:nth-child(8) { display:none !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc((100% - 1px) / 7); }
}
@media only screen and (max-width:550px) {
#grid { margin-top: -30px; }
#grid .row .cell.room { width: 100%; text-align: center; border: none !important; }
#grid .rates { width:100% !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc(100% / 7); border-bottom: none !important; }
#grid .row.dates .cell .day { padding: 2px 7px 3px; font-size:10px; }
#grid .row.dates .cell.blank { display: none; }
#sortoptions { display: none; }
.date-calendar, .selectors select { width: calc(50% - 5px); }
}
@media only screen and (max-width:320px) {
#grid .row .rates .cell:nth-child(7) { display:none !important; }
#grid .row .rates .cell.rate, #grid .row.dates .rates .cell { width:calc(100% / 6); }
.date-nav .selectors { width: 100%; }
.skip { display: none; }
}