.top-bar{
	position: fixed;
    width: 100%;
    background-color: #000000;
    z-index: 99;
}

.hotel-logo{
	padding-top:15px;
	padding-bottom:15px;
}

.hotel-logo img{
	max-width: 180px;
}

.right-menu{
	color:#ffffff;
	text-align:right;
	padding-top:2px;
}

.right-menu > div > span:hover{
	color:#dddddd;
}

.dropdown {
    position: relative;
    display: inline-block;
	padding:15px 15px 17px 15px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-list{
	list-style:none;
	padding:0px;
	color:#000000;
	margin-bottom:0px;
}

.dropdown-list li{
	word-break:keep-all;
	cursor:pointer;
}

.dropdown-list li:hover{
	background-color:#ececec;
}

.flag-list li{
	display:flex;
	padding:10px;
}

.language-list li{
	padding:6px;
	text-align:center;
}

.flag-list .flag-icon{
	margin-right:5px;
	box-shadow:1px 1px 1px rgba(0,0,0,0.5);
}

.flag-list .currency-text, .language-list .language-text{
	font-size:13px;
	line-height:15px;
}

.calendar-bar{
	background-color:#dddddd;
	padding-top:15px;
	padding-bottom:15px;
}

.booking-sidebar{
	position:fixed;
	width:25%;
}

.content{
	background-color:#f0f0f0;
}

.booking-sidebar-bg{
	background-color:#ffffff;
	/*box-shadow:0px 0px 1px #aaaaaa;*/
	border-left:1px solid #e3e4e8;
}

@media only screen and (max-width:500px) { 
	.booking-sidebar-bg { 
		margin-top:20px !important;
		margin-bottom:20px !important;
		background-color:#ffffff !important;
		border:1px solid #e3e4e8 !important;
		display:flex !important;
		flex-wrap:wrap;
		margin-right:15px;
		margin-left:15px;
	}
	 
	.booking-sidebar {
		position:initial;
		width:100% !important;
	}
}

@media (min-width:768px) and (max-width:1023px) {
	.booking-sidebar-bg { 
		margin-top:20px !important;
		margin-bottom:20px !important;
		background-color:#ffffff !important;
		border:1px solid #e3e4e8 !important;
		display:flex !important;
		flex-wrap:wrap;
		margin-right:15px;
		margin-left:15px;
	}
	
	.col-md-12{
		flex:initial !important;
		max-width:initial !important; 
	}
	 
	.booking-sidebar {
		position:initial;
		width:100% !important;
	}
	
	.hotel-info {
		height:auto !important;
	}
	
	.hotel-image {
		/* height:500px !important; */
		display:none;
	}
	
	.hotel-gallery {
		top:458px !important;
	}
}

@media only screen and (max-width:576px) { 
	.col-md-12{
		flex:initial !important;
		max-width:initial !important; 
	}
	
	.hotel-image { 
		display:none;
	}
}

.hotel-image{
	width:100%;
	height:250px;
	background-image:url(https://semantic-ui.com/images/wireframe/image.png);
	background-size:cover;
}

.hotel-image-2{
	width:100%;
	height:250px;
	background-image:url(https://semantic-ui.com/images/wireframe/image.png);
	background-size:cover;
}

.hotel-room-list{
	padding-left:15px;
	padding-right:15px;
	margin-left:15px;
	margin-right:15px;
}

.hotel-room{
	margin-top:20px;
	background-color:#ffffff;
	border:1px solid #e3e4e8;
}

.hotel-room-list .hotel-room:nth-last-child(1){
	margin-bottom:20px;
}

.room-image{
	width:100%;
	height:250px;
	background-image:url(https://semantic-ui.com/images/wireframe/image.png);
	background-size:cover;
	background-position:center center;
}

.room-gallery{
	position:relative;
	top:208px;
	padding:10px;
	text-align:right;
	margin-bottom:0px;
	cursor:pointer;
	color:white;
	background: -webkit-linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%) repeat-x;
    background: -moz-linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%) repeat-x;
    background: -o-linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%) repeat-x;
    background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%) repeat-x;
}

.room-details{
	padding:15px;
	height:250px;
}

.room-facilities .room-icon:before{
	margin-left:0px;
}

.room-facilities .room-icon{
	padding-left:5px;
	padding-right:5px;
}

[class*="flaticon-"]{
	color:#666666;
}

.room-facilities-wrap{
	position:absolute;
	bottom:-5px;
	padding-left:10px;
}

.room-content{
	position: absolute;
    width: 100%;
    bottom: 20px;
}

.room-price-wrap, .room-input{
	display:flex;
}

.original-price{
	color:#bebebe;
	text-decoration:line-through;
	font-size:75%;
}

.occupancy-wrap{
	display: inline-grid;
    position: absolute;
    right: 0px;
    text-align: left;
}

.room-book-button{
	background-color: #666666;
    border: solid 1px #666666;
	color: white;
    height: 35px;
    width: 100%;
}

.room-number{
	background-color: #666666;
    border: solid 1px #666666;
	color: white;
	border-left: 1px solid #909090 !important;
    padding: 0 6px;
}

.bed-type-icon:before{
	margin-left:0px !important;
}

.room-view-more{
	font-style: italic;
    font-weight: bold;
    font-size: 80%;
}

.best-selling{
	border:3px solid #000;
}

.best-selling:after{
	content:'Best Selling';
	position: absolute;
    right: 0px;
    margin-right: 15px;
    background-color: #000;
    padding: 3px 10px 5px;
    color: white;
    border-radius: 0 5px;
    box-shadow: -1px 1px 1px #878787;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
	z-index:9;
}

.sold-out{
	border:3px solid #666666;
}

.sold-out:after{
	content:'Sold Out';
	position: absolute;
    right: 0px;
    margin-right: 15px;
    background-color: #666666;
    padding: 3px 10px 5px;
    color: white;
    border-radius: 0 5px;
    box-shadow: -1px 1px 1px #878787;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
	z-index:9;
}

.selected {
	border:3px solid #666666;
}

.selected:after { 
	content:'Selected';
	position: absolute;
    right: 0px;
    margin-right: 15px;
    background-color: #666666;
    padding: 3px 10px 5px;
    color: white;
    border-radius: 0 5px;
    box-shadow: -1px 1px 1px #878787;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
	z-index:9;
}

.sold-out div{
	opacity:0.8;
}

.no-padding.tablet-padding-left{
		padding-left:15px !important;
	}

.hotel-gallery{
	position:relative;
	top:208px;
	padding:10px;
	text-align:right;
	margin-bottom:0px;
	cursor:pointer;
	color:white;
	background: -webkit-linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%) repeat-x;
    background: -moz-linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%) repeat-x;
    background: -o-linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%) repeat-x;
    background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%) repeat-x;
}

.hotel-gallery:hover{
	text-decoration:none;
}

.hotel-info{
	padding-top:15px;
	overflow-y: scroll;
    height: calc(100vh - 308px);
	padding-bottom:15px;
}

.hotel-info p{
	text-align:justify;
}

@media only screen and (max-width:500px) {
	.hotel-info {
		overflow-y:initial;
		height:auto !important;
	}
}

.contact-table td:nth-child(1){
	width:30px;
	text-align:center;
}

.contact-table td:nth-child(2){
	font-size:14px;
}

.fa-map-marker-alt{
	font-size:20px;
}

.fa-phone, .fa-envelop{
	font-size:16px;
}

.fa-phone{
	transform: rotate(100deg);
}

/* .hotel-website p{
	text-align:center;
	margin-top:15px;
	background-color:#000000;
	padding:5px;
}

.hotel-website a p{
	color:#ffffff;
}

.hotel-website a:hover p{
	text-decoration:none;
} */

@font-face {
	font-family:'Qanelas', sans-serif !important;
}

.hotel-website {  
	background-color:#000000; 
	cursor:pointer;
	border:solid 1px #666666;
	color:#ffffff; 
	height:35px; 
	width:100%;
}

/* Reusable Css */
p{
	font-size:14px;
}

a{
	color:inherit !important;
}

h5{
	font-family: 'Alegreya Sans', sans-serif !important;
}

.no-padding{
	padding:0px !important;
}

.align-right{
	text-align:right;
}

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

a:focus, button:focus {
	outline: none !important;
}
/* End of Reusable Css */

/* Model Css */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 0px;
    border: 1px solid #888;
    width: 60% !important;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
	text-align:right;
	position:absolute;
	right:0px;
	z-index:99;
	top:-28px;
	color:#ffffff !important;
	opacity:1 !important;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.pop-up-image{
	width:100%;
	height:250px;
	background-size:cover;
	background-position:center center;
}

.modal .room-details{
	height:250px;
	overflow-y:scroll;
	background-color:#f1f1f1;
}

.modal .room-content{
	padding:15px;
}

.modal .room-description{
	text-align:justify;
	margin-bottom:0px;
}

.modal .room-facilities-wrap{
	position:relative;
	bottom:0px;
	padding-left:15px;
	padding-right:15px;
}

.modal .room-content{
	position:unset;
	width:unset;
}

.modal .pop-up-book-button{
	position:absolute;
	bottom:0px;
	padding:15px !important;
}

.modal .occupancy-wrap{
	right:15px;
}

/* End of Model Css */

@media screen and (min-width:768px) and (max-width:1024px){
	
}

@media screen and (min-width:992px) and (max-width:1024px){
	.room-content .col-lg-5, .room-content .col-lg-7{
		flex:50%;
		max-width:50%;
		width:50%;
	}
}

@media screen and (max-width:1024px){
	.modal-content{
		width:80% !important;
	}
	
	.modal .pop-up-book-button{
		position:unset;
	}
	
	.pop-up-image{
		height:200px;
	}
	
	.modal .room-content{
		padding:15px 15px 0;
	}
}

@media screen and (max-width:767px){
	.room-details{
		height:auto;
	}
	
	.room-content{
		position:relative;
		bottom:0px;
		margin-left:0px !important;
		margin-right:0px !important;
	}
	
	.margin-val{
		margin-bottom:10px;
	}
	
	.no-padding.tablet-padding-left{
		padding-left:0px !important;
	}
	
	.room-facilities-wrap{
		position:unset;
		padding-left:0px;
		margin-bottom:15px;
	}
	
	.modal .room-details{
		height:150px;
	}
	
	.modal .room-facilities-wrap{
		padding-left:0px;
		padding-right:0px;
	}
	
	.modal .pop-up-book-button{
		padding:0px 0px 15px !important;
	}
	
	.hidden-sm{
		display:none;
	}
	
	.mobile-menu{
		position:absolute;
		right:15px;
	}
	
	.slide-left{
		position:absolute;
		right:280px;
	}
	
	.mobile-menu-container{
		position:fixed;
		right:-280px;
		top:0px;
		width:280px;
		height:100vh;
		background-color:#dddddd;
		padding:15px;
		display:none;
	}
	
	.mobile-menu-container.active{
		right:0px !important;
		display:block !important;
	}
	
	.mobile-menu-close{
		text-align:right;
		font-size:20px;
		font-weight:bold;
		line-height:12px;
		padding-bottom: 20px;
		border-bottom: 1px solid #d4d4d4;
	}
	
	.overlay.active{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0px;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 999;
	}
	
	.mobile-menu-list{
		padding:0px;
		list-style:none;
	}
	
	.mobile-menu-list li{
		padding:10px 0;
		border-bottom: 1px solid #d4d4d4;
	}
	
	.mobile-submenu{
		display:none;
	}
}

@media screen and (min-width:768px){
	.hidden-lg{
		display:none;
	}
}

.default-color {
	color:#f0f0f0;
}

.default-background-color {
	background-color:#f0f0f0;
}

/* --- BEGIN loading --- */
 
.loader {
	height:20px;
	width:250px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.dot{
	animation-name:loader;
	animation-timing-function: ease-in-out;
	animation-duration:3s;
	animation-iteration-count: infinite;
	height:20px;
	width:20px;
	border-radius:100%;
	background-color: black;
	position:absolute;
	border:2px solid white;
}

.dot:first-child {
	background-color:#8cc759;
	animation-delay:0.5s;
}

.dot:nth-child(2) {
	background-color: #8c6daf;
	animation-delay:0.4s;
}

.dot:nth-child(3) {
	background-color: #ef5d74;
	animation-delay:0.3s;
}

.dot:nth-child(4) {
	background-color: #f9a74b;
	animation-delay:0.2s;
}

.dot:nth-child(5) {
	background-color: #06beeb;
	animation-delay:0.1s;
}

.dot:nth-child(6) {
	background-color: #fbef5a;
	animation-delay:0s;
}

.loader-text {
	position:absolute;
	top:200%;
	left:0;
	right:0;
	width:4rem;
	margin:auto;
}

.loader-text:after {
	content: "Loading";
	font-weight:600;
	animation-name: loading-text;
	animation-duration:3s;
	animation-iteration-count:infinite;
}

@keyframes loader {
	15% {
		transform: translateX(0);
	}
	
	45% {
		transform: translateX(230px);
	}
	
	65% {
		transform: translateX(230px);
	}
	
	95% {
		transform: translateX(0);
	}
}

@keyframes loading-text {
	0% {
		content: "Loading";
	}
	
	25% {
		content: "Loading.";
	}
	
	50% {
		content: "Loading..";
	}
	
	75% {
		content: "Loading...";
	}
}

/* --- END loading --- */

.square {
	top:-.5em; 
	position:relative; 
	vertical-align:baseline;
}

.hotel-description > .description > p {
	font-size:14px !important;
}