@import 'mixins.less';

#read-more,
#read-less,
.read-more-item,
.read-less-item {
	color: @blue;
}

.readless-container {
	margin-bottom: 16px;
}

.read-less-item {
	display: none;
}
.small-font {
	font-size: 0.8em !important;
}

.smaller-font {
	font-size: 0.6em !important;
}

.reviews-page {
	.section.less {
		display: none;
	}
}

.hotel-page-title() {
	color: @blue;
    line-height: 17px;
    margin: 0 0 20px;
    padding: 15px 0 0 9px;
    .font(Medium, 19px);
}

@media only screen and (min-width : @max-mobile-resolution) {
	.mobile {
		display: none;
	}

	#room-select-form #select {
		margin-top: 4px;
		float: left;
	}
}


@media (pointer: coarse) {
	.fancybox-nav span {
	    visibility: visible;
	}
}

@media only screen and (max-width : @max-mobile-resolution) {

	.rsDefault .rsArrowIcn {
		background-color: rgba(0,0,0,0.3);
	}
	
	.rsDefault .rsArrowIcn:hover {
		background-color: rgba(0,0,0,0.5);
	}
	
	
	.homepage .mobile {
		.text-content.ellipsis {
			max-height: 190px;
		}
	}

	.hotel-listing {
		article p {
			margin-bottom: 0;
		}
		
		article p:last-child {
			margin-bottom: 16px;
		}
	}


	.hotel-listing {
		&> #book,
		&> .reviews-summary {
			display: none
		}
	}

	.blackblock {
		background-color: rgba(0, 0, 0, 0.7);
		margin-top: -14px;
		vertical-align: middle;
		height: 46px;
		line-height: 46px;

		.back-button,
		.hotel-name {
			display: inline-block;
		}

		.hotel-name {
			.font(Medium, 20px);
			color: white;
		}

		.back-button {
			padding: 0 6px 0 10px;
		}
	}

	.is-reviews-page {
		h1.name > a.name,
		h1.name > span.label-new {
			display: none;
		}
	}

	#name-overlay-top {
		font-size: 16px;
		width: 100%;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		padding: 10px 10px 10px 0;

		a, a:hover, a:visited {
			text-decoration: none;
		}

		#back-button-col {
			width: 30px;
			color: white;
			float: left;
			padding-top: 7px;
			text-align: center;
  		}

		#name-overlay-content {
			.font(Medium, 20px);
			color: white;
			float: left;
		}
	}


	.hotel-listing h1 {
		margin-bottom: 0px !important;
	}

	#search {
		display: none;
	}

	#select .input {
		background-color: #f8f8f8;
	}

	.mobile.map-preview {
		display: inline-block;
		float: left;
		margin-top: 20px;

		.map-box {
			display: inline-block;
			box-sizing: border-box;
			width: 320px;

			img {
				width: 300px;
			}
		}
	}

	div#book-banner {
	    background: white;
	    position: fixed;
	    bottom: 0;
	    z-index: 9999;
	    width: 100%;
	    left: 0;

	    #book {
	    	margin-right: 2px;
	    }

	    .reviews-summary {
	    	margin-top: -4px;
		padding: 12px;
    		margin-left: -12px;
		margin-right: 0;

	    	.small {
	    		font-size: 12px;
	    	}
	    }
	}

	#book-container {
		height: 42px;
	    width: 320px;
	    padding: 16px 0;
	    margin: 0 auto;
	    border-top: solid 1px #e1e1e1;
	}

	#new-review-list {
		text-align: center;
		float: left;
		padding-top: 10px;
		border-bottom: solid 1px #e1e1e1;
		border-top: solid 1px #e1e1e1;

		#readall {
			float: left;
			font-weight: bold;
			margin-bottom: 20px;
			.font(Medium, 18px);

			a {
				color: @blue !important;
			}
		}

		.reviews-summary {
			float: none;
			margin-right: 0;
			padding-bottom: 18px;
		}

		.date {
			color: #666;
		}

	}

	.new-review-ratings {
		display: inline-flex;
		margin-bottom: 10px;

		.rating-group {
			text-align: center;
			margin-right: 10px;
			font-weight: bold;
		}

		.rating-value {
			padding: 0 10px;
			background-color: @blue;
			color: white;
			line-height: 42px;
			height: 42px;
			display: inline-block;
			font-size: 24px;
		}

		.rating {
			margin-right: 10px;
			font-weight: bold;
			color: @blue;
			line-height: 42px;
		}

		.based-on {
			color: @blue;
			font-weight: bold;
		}
	}

	.review-item {
		margin-bottom: 10px;
		text-align: left;

		float: left;
		.font(Regular, 16px);
		line-height: 20px;
		width: 100%;

		.name {
			font-weight: bold;
		}

		.date {
		}

		.readmore-container,
		.readless-container {
			margin-top: -21px;
		}

		.text {
			display: inline-block;

			.more {
				max-height: 80px;
			}

			.section {
				float: left;
				clear: both;
				margin: 5px 0;

				.fa-comment {
					color: @blue;
				}

				.fa-plus-square {
					color: green;
				}

				.fa-minus-square {
					color: red;
				}

				.morecontent span {
				    display: none;
				}
				.morelink {
				    display: inline-block;
				    text-decoration: none;
				    color: @blue;
				}
			}
		}
	}

}


.villa-specs,
.villa-distances ul {
	list-style: none;
	clear: both;
	padding: 10px 13px;	
	color: #999;	
}


.villa-specs {
	background: #fafafa;
}


.villa-distances ul {
	padding: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;	
}

.villa-specs::after,
.villa-distances::after {
	content: '';
	display: block;
	clear: both;
}



.villa-specs li {
	height: 64px;
	float: left;
	width: 25%;
	box-sizing: border-box;
	border-right: 1px solid #e5e5e5;
	text-align: center;	
}

.villa-specs .icon {
	margin: 5px 0;
	height: 34px;
	vertical-align: middle;
}

.villa-specs .icon img {
	vertical-align: middle;
}

.villa-specs li:last-child {
	border-right: none;
}


.villa-specs .value {
	color: #333;
	font-size: 14px;
	display: block;
	height: 15px;
	line-height: 15px;
}


.villa-distances {
	padding-top: 2px;
	clear: both;	
}

.villa-distances li {
	height: 25px;	
	margin: 14px 0;
	vertical-align: middle;	
}


.villa-distances .icon {
	width: 40px;
	float: left;
}

.villa-distances .icon img {
	width: 26px;
}

.villa-distances .icon svg {
	width: 32px;
}

.villa-distances span {
	display: block;
}

.villa-distances .no-distance span {
	display: inline;
}

.villa-specs .title,
.villa-distances .title {
	font-size: 8px;
	min-height: 10px;
	line-height: 10px;
	text-transform: uppercase;
	vertical-align: middle;
}

.villa-distances .distance {
	color: #333;
	height: 15px;
	line-height: 15px;	
	font-size: 14px;
}


.villa-features {
	display: flex;
	clear: both;
}


.villa-features svg,
.villa-specs svg,
.villa-distances svg {
	height: auto;
}

.villa-features svg path {	
	/*fill: #999;*/
}



.villa-features .facilities {
	flex-grow: 3;
	flex-basis: 75%;
}

.villa-features .facilities li {
	flex-grow: 0;
	width: 33.3%;	
}


.villa-features .services {
	flex-grow: 0;
	flex-basis: 25%;
	padding-left: 3%;
}


.villa-features h2,
.villa-distances h2 {
	font-weight: normal;
	font-size: 18px;
	margin: 15px 0 8px;
}

.villa-features ul {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	list-style: none;
}


.villa-features li {
	height: 50px;
	overflow: hidden;
	box-sizing: border-box;
}




.villa-features li .title {
	display: block;
	line-height: 14px;
	font-size: 13px;
	color: #999;
	position: relative;
	top: 50%;
	transform: translate(0, -50%);
}

.villa-features .icon {
	float: left;
	width: 40px;
	margin-top: 8px;
}

.villa-features .icon img,
.villa-features .icon svg {
	width: 32px;
}

.hotel-listing .homepage .villa-specs ~ .article-wrap article {
	border-top: none;
}


.villa-distances ul {
	height: 100%;	
}



.fancybox-wrap .villa-features,
.fancybox-wrap .villa-distances {
	display: block;	
	min-width: 200px;
}


.fancybox-wrap .villa-features .services {
	padding: 0;
	width: auto;
}


.fancybox-wrap .villa-features ul,
.fancybox-wrap .villa-distances ul {
	height: auto !important;
	display: block;	
	max-height: none !important;	
}

.fancybox-wrap .villa-features li,
.fancybox-wrap .villa-distances li {
	width: auto;
}


.fancybox-wrap .villa-distances li {
	margin-bottom: 20px;
}


.fancybox-wrap .villa-features .facilities,
.fancybox-wrap .villa-features .facilities h2 {
	margin-top: 0;
}


@media only screen and (max-width : @max-mobile-resolution) {	
	.villa-specs li:first-child,
	.villa-specs li:nth-child(n+5),		
	.villa-specs .title {
		display: none;
	}
	
	.villa-specs li:last-child {
		display: block;
	}

	
	.villa-specs img,
	.villa-specs svg {
		width: 34px;
		max-height: 34px;
	}
	
	
	.villa-specs .highlight .value {
		font-size: 11px;
	} 
	
	
	.villa-features-wrap {
		clear: both;
		padding-top: 10px;
		border-bottom: 1px solid #e1e1e1; 
	}
	
	.villa-features {
		display: block;
		margin-bottom: 15px;		
		border-top: solid 1px #e1e1e1;
	}
	
	
	.villa-features > div {
		width: 100%;		
	}
	
	.villa-features ul {
		display: flex;
		height: 100%;		
	}
	
	
	.villa-features .services {
		padding: 0;
	}
	
	.villa-features ul {
		flex-grow: 0;
		flex-basis: 100%;
		flex-direction: column;
		flex-wrap: wrap;

	}
	
	.villa-features .facilities li,
	.villa-features .services li {
		width: 50%;
		flex-grow: 0;
	}
		
		
	.villa-features .facilities ul {
		flex-direction: row;
	}
	
	
	
	.wrap-desktop {
		height: auto !important;
	}
	
	
	.villa-distances li {
		width: 50%;
	}
	
	
	.villa-distances .title {
		font-size: 9px;
		min-height: 11px;
		line-height: 11px;
	}
	
	
	.readmore-wrap > .expand,
	.readmore-wrap > .collapse {
		left: 5px;
	}
	
		
	.villa-features .services {
		margin-top: 20px;
	}

	
	.villa-distances-wrap {
		border-bottom: 1px solid #e1e1e1; 
		padding-bottom: 10px;
	}
	
	
	.fancybox-wrap #villa-distances .wrap-mobile {
		height: auto !important;
	}


	.villa-features-wrap ~ #new-review-list {
		border-top: none;
		padding-top: 13px;
	}
}


.villa-features-wrap .readmore-wrap,
.villa-distances-wrap .readmore-wrap {
	background: none;
}

.villa-distances-wrap .readmore-wrap:after,
.villa-features-wrap .readmore-wrap:after {
	background: #fff;
}



@media only screen and (min-width : @min-desktop-resolution) {
	
	
	.villa-specs li	{
		width: 16.666666%;
	}
	
	.villa-specs .icon {
		height: 54px; 
	}
	
	.villa-specs li {
		height: 111px;
	}
	
	.villa-distances .title {
		font-size: 9px;
		margin-top: 4px;
		
	}
	
	.villa-features h2,
	.villa-distances h2 {
		font-size: 17px;
	}

	
	
	.villa-specs img,
	.villa-specs svg {		
		width: 42px;
		max-height: 42px;
		margin-top: 6px;		
	}
	
	.villa-distances li {
		width: 25%;
	}
	
	.villa-specs .title {
		font-size: 11px;
	}
	
	.villa-specs .highlight .value {
		display: none;
	}
	
	.villa-distances {
		padding-top: 0.1px;		
	}
	
	.villa-distances .no-features {
		padding-bottom: 10px;
	}
		
	.villa-distances-wrap {
		clear: both;
		margin-top: 20px;
	}
	
		
	
	.villa-specs {
		padding-top: 25px;
	}
	
	.villa-distances li {
		margin: 4px 0 20px 0;
	}
	
	.villa-specs .title {
		text-transform: none;		
	}
		
	body.el .villa-specs .title,
	body.de .villa-specs .title,
	body.da .villa-specs .title,
	body.ru .villa-specs .title {
		font-size: 13px;
	}
	
	
	.villa-distances {
		margin-bottom: 16px;
	}
	
	.article-wrap .readmore-wrap > a,
	.villa-features-wrap .readmore-wrap > a, 
	.villa-distances-wrap .readmore-wrap > a {
		left: 5px;
	}
	
	
	.images-container {
		overflow: hidden;		
		margin: 12px 0;
		clear: both;		
	}
	
	.images-container.top-image-wrap {		
		overflow: visible;		
	}
	
	
	.images-container .image {
		display: block;
		float: left;		
	}
	
	.images-container .image img {
		display: block;
		width: 206px;
	}
	
	.images-container .image:nth-child(2) img {
		margin: 0 12px; 
	}
	
	
	.images-container .image img.portrait {		
		width: 151.5px;
		margin: 0;
	}
	
	
	.images-container .image:nth-child(1) img.portrait,
	.images-container .image:nth-child(2) img.portrait,
	.images-container .image:nth-child(3) img.portrait {
		margin-right: 12px; 
	}

	.wrap-mobile {
		height: 100% !important;
	}
	
	
	.readmore-wrap > .expand,
	.readmore-wrap > .collapse {

		left: 10px;
	}


	.villa-features h2,
	.villa-distances h2 {
		margin: 0;		
	}
	
	.villa-distances li {
		margin: 12px 0 12px 0;
	}
	
	.villa-features .icon {
		margin-top: 10px;
	}
	
	.villa-features .icon img,
	.villa-features .icon svg {
		width: 29px;
	}

	.villa-features .facilities ul {
		flex-direction: row;
	}
	
	.readmore-wrap article {
		padding: 0;
	}
	
	
	.article-wrap .readmore-wrap {
		margin-bottom: 20px;
		background: none;
	}
	
	.article-wrap .readmore-wrap::after {
		background: #fff;
	}
	
	
	.readmore-wrap article p:last-child{
		margin-bottom: 0;
	}
	
}


@media only screen and (min-width : @max-resolution) {
	.images-container .image img {		
		width: 270px;
	}
	
	.images-container .image img.portrait {		
		width: 199.5px;
		margin: 0;
	}
	
	
	.images-container .image:nth-child(1) img.portrait,
	.images-container .image:nth-child(2) img.portrait,
	.images-container .image:nth-child(3) img.portrait {
		margin-right: 12px; 
	}
	
}


.button.blue {
	background-color: @blue;
	color: white;
	display: inline-block;
	font-size: 18px;
	line-height: 60px;
	margin-bottom: 20px;
	padding-left: 18px;
	width: 272px;
	.medium-font;
	&:hover {
		background-color: @hover-blue;
	}
	&.availability {
		.sprite {
			height: 29px;
			width: 23px;
			.sprite(0, -200px);
		}
	}
	&.contact {
		.sprite {
			height: 29px;
			width: 21px;
			.sprite(-23px, -197px);
		}
	}
	&.similar {
		.sprite {
			height: 20px;
			width: 24px;
			.sprite(-50px, -200px);
		}
	}

	.sprite {
		display: inline-block;
		margin-right: 10px;
		vertical-align: middle;
	}

	i {
		float: right;
		line-height: 60px;
		margin-right: 10px;
	}
}

.button.grey {
	background-color: #f8f8f8;
	border: solid 1px #e1e1e1;
	color: @blue;
	display: inline-block;
	font-size: 18px;
	line-height: 68px;
	padding-left: 14px;
	width: 276px;
	.medium-font;
	&.hoverable:hover {
		background-color: @hover-blue;
		color: white;

		.sprite.best-price {
			.sprite(-156px, -240px);
		}
	}

	i {
		float: right;
		line-height: 68px;
		margin-right: 10px;
	}

	.sprite.eot {
		display: inline-block;
		height: 50px;
		margin-right: 15px;
		width: 46px;
		vertical-align: middle;
		.sprite(0, -300px);
	}

	.sprite.verisign {
		display: inline-block;
		height: 52px;
		margin-right: 15px;
		width: 46px;
		vertical-align: middle;
		.sprite(-50px, -300px);
	}

	.sprite.best-price {
		display: inline-block;
		height: 50px;
		margin-right: 15px;
		width: 46px;
		vertical-align: middle;
		.sprite(-110px, -240px);
	}

	.sprite.info {
		display: inline-block;
		height: 46px;
		margin-right: 15px;
		width: 46px;
		vertical-align: middle;
		.sprite(-100px, -300px);
	}
}

header .contact-details {
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    margin-top: 10px;
    margin-right: 0;
}


.page-covid-19 header .contact-details,
.page-concierge .contact-details,
.page-why-book-with-us .contact-details {
	font-size: 20px;
	height: 28px;
	line-height: 28px;
	margin-top: 17px 9px 0 0;
	margin-top: 17px;
	margin-right: 9px;
}


@media only screen and (max-width : @max-mobile-resolution) {
    header .contact-details {
        display: none;
    }
}

#left-col {

	@media only screen and (max-width : @max-mobile-resolution) {
		.button.grey {
			display: none;
		}
	}

	.hidden {
		display: none;
	}
}

@media only screen and (max-width : @max-mobile-resolution) {
	#filter-box {
		display: none;
	}
}

.map-col {

	.map-box {
		background-color: #f8f8f8;
		border: solid 1px #e1e1e1;
		padding-bottom: 10px;
		margin-bottom: 20px;

		h3 {
			border-bottom: solid 1px #e1e1e1;
			line-height: 39px;
			margin: 0;
			padding: 0 10px;

			a {
				color: @blue;
				display: inline-block;
				font-size: 18px;
				width: 100%;
				.medium-font;

				i {
					float: right;
					line-height: 39px;
				}
			}
		}

		img {
			margin: 10px;
		}
	}
}


@media only screen and (max-width : @max-mobile-resolution) {
	.map-col {
		display: none;
	}
}

.hotel-listing {
	margin-top: -55px;

	h1 {
		float: left;
		line-height: 22px;
		margin: 0 0 10px 0;

		a.name {
			color: @dark-blue;
			font-size: 28px;
			.medium-font;
		}

		.breadcrumbs {
			color: @blue;
			line-height: 26px;
			margin: 0;
			.font('Regular', 14px);

			a {
				color: @blue;
				.font('Regular', 14px);
				&:hover {
					color: black;
				}
			}
		}
	}



	@media only screen and (max-width : @max-resolution) {	
		h1 {
			max-width: 290px;
		}
	}
	

	@media only screen and (max-width : @max-mobile-resolution) {
	
		h1.mobile-book {
			display: none;
		}
	}

	.reviews-summary {
		color: @blue;
		float: right;
		font-size: 19px;
		line-height: 12px;
		margin: 12px 12px 0 0;
		text-align: right;
		.medium-font;

		a {
			color: @blue;
			&:hover {
				color: black;
			}

			.small {
				font-size: 12px;
			}
		}
	}

	@media only screen and (max-width : @max-mobile-resolution) {
		.reviews-summary {
			float: left;
			text-align: left;
		}
	}

	.wishlist-button {
		cursor: pointer;
		float: right;
		font-size: 20px;
		line-height: 30px;
		margin: 12px 12px 0 0;
		&.fa-heart-o {
			color: #007dc3;
		}
		&.fa-heart {
			color: #c60013;
		}
	}

	@media only screen and (max-width : @max-mobile-resolution) {
		.wishlist-button {
			margin: 0;
			font-size: 150%;
		}
	}

	#book {
		background-color: @blue;
		color: #fff;
		float: right;
		line-height: 30px;
		margin-top: 12px;
		padding: 0 10px;
		text-transform: uppercase;
		.font(Bold, 14px);
		&:hover {
			background-color: @hover-blue;
		}

		i {
			margin-left: 10px;
		}
	}

	@media only screen and (max-width : @max-mobile-resolution) {
		#book {
			clear: left;
			margin-top: 0px;
			padding: 6px 10px;
		}
	}

	.menu, .mobile-menu {
		clear: both;
  		line-height: 30px;
  		margin-bottom: 4px;
		width: 100%;
		z-index: 120;

		ul {
			display: table;
			list-style: none outside none;
			margin: 0 auto;
			text-align: center;
			text-decoration: none;
		  	width: 100%;
		  	border-spacing: 3px;

		  	li {

				display: table-cell;

				text-align: center;
				&:last-child {
					margin: 0;
				}


				a.top-link {
					color: @dark-blue;
					font-size: 14px;
					.medium-font;
				}

				ul {
					background-color: white;
					border: 1px solid #999;
					display: none;
					list-style: none outside none;
					margin: 2px 0 0 0;
					overflow: hidden;
					padding: 0;
					position: absolute;
					text-align: left;
					z-index: 120;

					li {
						border-top: 1px solid #e1e1e1;
						display: block;
						line-height: 14px;
						margin: 0;
						text-align: left;
						&:hover {
							background: #ebebeb;
						}
						&:first-child {
							border-top: none;
						}

						/* we want the whole cell to be clickable */
						a {
							color: @dark-blue;
							display: inline-block;
							height: 30px;
							line-height: 30px;
							margin-left: 8px;
							width: 100%;
							font-size: 14px;
							.medium-font;
						}
					}
				}
		  	}
		}

		.no-allotment-msg {
			clear: both;
			color: red;
			margin: 0;
			.font('Medium', 16px);

			a {
				color: @blue;
				&:hover {
					color: @dark-blue;
				}
			}
		}
	}

	@media only screen and (min-width: @max-resolution) {
		.menu {
			ul {
				li {
					background-color: #f8f8f8;
					&:hover {
						background-color: #035ebb;
						a.top-link {
							color: white;
							display: inline-block;
							width: 100%;
						}
					}

					a.top-link {
						&:hover {
							color: white;
						}
					}
				}
			}
		}
	}

	.mobile-menu {
		display: none;
	}

	@media only screen and (max-width : @max-mobile-resolution) {
		.menu {
			display: none;
		}

		.mobile-menu {
			display: block;

			.more {
				&.clicked {
					color: #ff9e00;
				}

				/*ul {
					display: none;
					position: absolute;
					width: 320px;


				}*/
			}
			ul {
				i.fa-chevron-right {
					float: right;
				    font-size: 12px;
				    line-height: 30px;
				    margin-right: 20px;
				}
			}
		}
	}

	.homepage {
		clear: both;

		#mobile-carousel {
			display: none;
		}

		@media only screen and (max-width : @max-mobile-resolution) {
			#carousel {
				display: none;
			}

			#mobile-carousel {
				display: block;
			}
		}

		@media only screen and (min-width : @max-mobile-resolution) and (max-width : @max-resolution) {
			#carousel {
				.rsContent{
					.rsImg{
						width: 640px;
					}
				}
			}
		}

		article {
			color: black;
			float: left;
			line-height: 20px;
			margin-bottom: 0px;
			width: 100%;
			.font(Regular, 16px);
			&.mobile {
				display: none;
			}


			a#read-less {
				display: none;
			}


			@media only screen and (max-width : @max-mobile-resolution) {
				.images-container {
					display: none;
				}
			}
		}

		@media only screen and (max-width : @max-mobile-resolution) {
			article {
				display: none;
				&.mobile {
					display: block;
				}
			}
		}
	}

	.article-page {

		h2 {
			.hotel-page-title;
		}

		article {
			color: black;
			.font(Regular, 16px);
			&.mobile {
				display: none;
			}

            img.top-image {
				float: left;
				margin: 0 15px 12px 0;
				width: 300px;
			}

			@media only screen and (min-width: @max-resolution) {
				img.top-image {
					margin: 0 15px 12px 0;
					width: 420px;
					
				}
			}

			@media only screen and (max-width : @max-mobile-resolution) {
				.images-container {
					margin: 0 25px;
					
					&.top-image-wrap {
						margin: 16px 0 0;
						
						img {
							margin: 0 15px 12px 0;
							width: 300px;
						}

					}

					img {
						margin: 12px 0 0;
						width: 270px;
						&.portrait {							
							width: 129px;							
							&:nth-child(2n+1) {
								margin-right: 12px;
							}
						}
					}
				}
			
			}
		}
	}

	/* Do not show nav bullets in mobile view */
	@media only screen and (max-width : @max-mobile-resolution) {
		.rsDefault .rsBullets {
			display: none;
		}
	}

	.reviews-page {

		.header, .footer {
			border-bottom: 1px solid #e1e1e1;
			clear: both;
			color: #007DC3;
			float: left;
			font-size: 16px;
			line-height: 50px;
			text-align: center;
			width: 100%;
			.medium-font;
		}

		.review {
			background: #f8f8f8;
			border-bottom: 1px solid #e1e1e1;
			clear: both;
			color: #000;
			float: left;
			font-size: 16px;
			line-height: 20px;
			width: 650px;
			.regular-font;

			.morelink {
			    display: inline-block;
			    text-decoration: none;
			    color: @blue;
			}

			.body {
			  	background: #fff;
			    border-right: 1px solid #E1E1E1;
			    float: left;
			    padding: 20px;
			    position: relative;
			    width: 509px;

				.info {
					color: #666;
					margin-bottom: 10px;
					.regular-font;

					.name {
						color: #222;
						.font(Regular, 16px);
					}

					.flag {
						margin-right: 5px;
					}

					.date {
						.font(Italic, 16px);
					}
				}

				.text {
					.section {
  						clear: both;
  						float: left;
  						margin: 5px 0px;

						.desc {
  							float: left;
  							padding-left: 10px;
  							width: 445px;
						}

						.fa-comment {
							color: @blue;
						}

						.fa-plus-square {
							color: green;
						}

						.fa-minus-square {
							color: red;
						}

					}
				}

				.average {
					color: #007DC3;
					position: absolute;
					right: -40px;
					text-align: center;
				    top: 50%;

				    span {
						position: absolute;
						top: -25%;
				    }
				}
			}
		}

		@media only screen and (min-width: @max-resolution) {
			.review {
				width: 840px;

				.body {
					width: 699px;
				}
			}
		}

		@media only screen and (max-width : @max-mobile-resolution) {
			.review {
				width: 100%;

				.body {
					width: 239px;

					.average {
						right: -10px;
					}
					.info {
						.name {
							font-weight: bold;
						}
					}
				}
			}

			nav#pagination {
				display: block;
			}
		}
	}

	.availability-page {

		h2 {
			.hotel-page-title;
			padding-left: 0;
			/*margin-bottom: 10px;*/ 
		}
		
		
		.clear-dates {
			display: inline-block;
			margin: 0 0 30px;
			.font(Regular, 16px);
			color: @blue;
			cursor: pointer;
		}
		

		.legend {
  			clear: both;
  			float: left;
			margin-bottom: 20px;

			span {
				color: white;
				margin: 5px;
				padding: 5px 10px;
				.medium-font;
			}

			.red {
				background-color: #b00;
			}

			.green {
				background-color: #458c02;
			}
		}

		.calendar {
			background-color: #e0e0e0;
			border: medium none;
			box-shadow: 1px 1px 5px 0 #555555;
			float: left;
			width: 210px;
			margin: 0 8px 15px 0;
			&.last-child {
				margin-right: 0;
			}
			&.first-child {
				clear: left;
			}

			.header {
				background-color: @blue;
				color: #e0e0e0;
				font-size: 18px;
				line-height: 18px;
				padding: 8px 0 10px;
				text-align: center;
				.medium-font;
			}

			table {
				border-collapse: collapse;
    			text-shadow: 0 1px #FFFFFF;
    			width: 100%;

    			th {
					background-color: #f7f7f7;
    				border-bottom: 1px solid #bbb;
    				color: #666;
    				font-size: 11px;
    				line-height: 19px;
    				text-transform: uppercase;
    				.regular-font;
				}

				td {
					background-color: #ededed;
					border-bottom: 1px solid #bbb;
    				border-right: 1px solid #bbb;
    				color: white;
    				font-size: 14px;
    				height: 29px;
    				line-height: 14px;
    				text-align: center;
    				vertical-align: middle;
    				width: 29px;
    				.regular-font;
    				&.green {
						background-color: #458c02;
					}
					&.red {
						background-color: #b00;
					}
					&.semi-out {
						background-image: url('/img/semi-out.png');
						color: #e0e0e0;
					}
					&.semi-in {
						background-image: url('/img/semi-in.png');
						color: #e0e0e0;
					}
				}
			}
		}

		@media only screen and (min-width: @max-resolution) {
			.calendar {
				margin: 0 15px 15px 0;
				width: 270px;

				table {
					td {
						height: 39px;
						width: 39px;
						&.semi-out {
							background-image: url('/img/semi-out-large.png');
						}
						&.semi-in {
							background-image: url('/img/semi-in-large.png');
						}
					}
				}
			}
		}

		@media only screen and (max-width : @max-mobile-resolution) {
			.calendar {
				float: none;
				margin: 9px auto;
				&.last-child {
					margin: 9px auto;
				}
			}
		}

		#tabs {
			clear: both;

			ul {
				margin: 10px 0;

				a {
					font-size: 16px;
					.regular-font;
				}
			}
		}
    }

    @media only screen and (min-width : @max-resolution) {
        .layout-mobile{
            display:none;
        }
        .pricetable{
            width: 140px;
            tr{
                td.name{
                    max-width: 100px;
                }
            }
        }
    }
    @media only screen and (min-width : @max-mobile-resolution) and (max-width : @max-resolution) {
        .layout-mobile{
            display:none;
        }
    }
    @media only screen and (max-width : @max-mobile-resolution) {
        .nav-table{
            display: flex;
            overflow:hidden;
        }

        .nav-header{
            min-width:140px;
            overflow: hidden;
            -webkit-box-shadow: 20px 40px 25px -21px rgba(0, 0, 0, 0.16);
            box-shadow: 20px 40px 25px -21px rgba(0, 0, 0, 0.16);
            z-index:2;
            .pricetable{
                width: 140px;
                tr{
                    td.name{
                        padding: 17px 0 17px 20px !important;
                        height: 44px;
                    }
                    th.label.VILLAS-PERIOD {
                        height: 31px !important;
                    }
                }
            }
        }
        .nav-content{
            overflow-x: auto;
            .pricetable tr{
                th:nth-child(1){
                    line-height: 31px;
                }
                td{
                    min-width: 55px;
                    padding-top: 24.5px !important;
                    padding-bottom: 24.5px !important;                
                }            
            } 
        }
        .layout-desktop{
            display:none;
        }
    }

	.prices-page {

		h2 {
            height: 24px;
            margin: 0 1px;
            font-family: 'Din Text Pro Bold';
            font-size: 18px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.1px;
            color: #007dc3;
            padding: 10px 20px;
		}
		
		.villa-specs {
			margin-bottom: 20px;
		}
		
		.pricetable {
			border-top: 2px solid #e5e5e5;
			width: 100%;

			tr {
				border-top: 1px solid #e5e5e5;
				&.odd {
					background-color: #f8f8f8;
				}
				&.even {
					background-color: #ffffff;
                }
                &.none_top_border{
                    border-top: none;
                }

				th {
					color: #333;
					text-align: center;
                    font-family: 'Din Text Pro Regular';
                    font-size: 16px;
                    font-weight: normal;
                    padding: 14px 0px;

                    &.label.VILLAS-PERIOD {
                        height: 22px;
                        font-family: 'Din Text Pro Regular';
                        font-size: 16px;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: normal;
                        letter-spacing: -0.3px;
                        color: #000000;
                        text-align: left;
                        padding: 14px 0px 14px 20px;
                    }
				}

				td {

                    &:first-child{
                        .text{
                            height: 19px;
                            font-family: 'Din Text Pro Regular';
                            font-size: 16px;
                            font-weight: normal;
                            font-stretch: normal;
                            font-style: normal;
                            line-height: normal;
                            letter-spacing: 0.01px;
                        }
                        .bedroom{
                            height: 16px;
                            font-size: 16px;
                            font-family: 'Din Text Pro Regular';
                            font-weight: normal;
                            font-stretch: normal;
                            font-style: normal;
                            line-height: normal;
                            letter-spacing: 0.01px;
                        }
                        padding-top: 20px;
                        padding-bottom: 20px;
                    }

                    color:#007dc3;
                    font-family: 'Din Text Pro Regular';
                    font-size: 16px;
                    text-align: center;
                    height: 29px;

                    &.name {
                        text-align: left;
                        padding: 20px 0px 20px 20px;
                    }
				}
			}
        }
        
        .offer-content{

            .none_top_border{
                border-top: none;
                .offer-icon{
                    visibility: hidden;
                }
                .offers{
                    padding: 0px 0px 15px 0px;
                }
            }
            .offers {
                display:flex;
                padding:15px 0px 10px 0px;
                .offer-icon{
                    width:18px;
                }
                .offer-text{
                    text-align:left;
                    margin: 0 5px;
                    font-family: 'Din Text Pro Regular';
                    font-size: 16px;
                    letter-spacing: 0.01px;
                    color:#007dc3;
                }
            }
			border-bottom: 2px solid #e5e5e5;
        }

		
		.on-request-price {
			.font(Regular, 16px);
		}

		ul.offers {

			li {
				color: red;
			}
		}
	}

	.booking-page {
		.steps {
			clear: both;
			list-style: none;
			margin: 25px 0;
			overflow: hidden;
  			width: 100%;

  			li {
  				background-color: #f8f8f8;
  				border-top: solid 1px #e1e1e1;
  				border-bottom: solid 1px #e1e1e1;
  				color: #999;
  				float: left;
  				font-size: 18px;
  				line-height: 48px;
  				margin: 0;
  				text-align: center;
  				width: 200px;
  				.medium-font;
  				&.active {
  					background-color: @blue;
  					color: white;
  				}
  				&.done {
					background-color: @dark-blue;
					color: white;
  				}
  				&.separator {
  					background-color: #f8f8f8;
					display: inline-block;
					height: 48px;
					width: 13px;
					.sprite(-290px, -286px);
  					&.active {
  						.sprite(-290px, -190px);
  					}
  					&.done {
  						.sprite(-290px, -238px);
  					}
  					&.last-child {
  						border: none;
  					}
  				}
  			}

  			@media only screen and (min-width: @max-resolution) {
  				li {
  					width: 265px;
  				}
  			}
		}

		@media only screen and (max-width : @max-mobile-resolution) {
			.steps {
				display: none;
			}
		}

		.first-step {

			.reservation-details {
				.font(Regular, 16px);

				.photo {
					float: left;
					margin-right: 20px;
					width: 160px;
				}

				@media only screen and (max-width : @max-mobile-resolution) {
					.photo {
						float: none;
						margin: 0 0 20px 0;
						width: 320px;
					}
				}

				@media only screen and (min-width: @max-resolution) {
					.photo {
						width: 200px;
					}
				}

				a {
					color: @dark-blue;
					font-size: 20px;
					line-height: 18px;
					.medium-font;
				}
				
				a.select2-choice {
					line-height: 26px;
				}				

				.region {
					color: @blue;
					font-size: 14px;
					line-height: 12px;
				}

				p {
					margin: 10px 0 0 0;
				}
			}

			.pricing-details{
				margin-top: 25px;

				h2 {
					color: @dark-blue;
					font-size: 22px;
					line-height: 30px;
					margin-bottom: 25px;
					position: relative;
					.medium-font;


					a {
						background-color: #f8f8f8;
						border: 1px solid #e7e7e7;
						color: @dark-blue;
						font-size: 18px;
						padding: 5px;
						position: absolute;
						right: 0;
						top: 0;
						.medium-font;
						&:hover {
							border-color: #b1b1b1;
						}

						i {
							font-size: 14px;
						}
					}
				}

				table {
					border: solid 1px #E1E1E1;
					border-collapse: collapse;
					font-size: 16px;
					text-align: center;
					width: 100%;
					vertical-align: middle;
					.regular-font;

					th {
						background-color: #f8f8f8;
		  				border: solid 1px #e1e1e1;
		  				height: 30px;
					}

					td {
						border: solid 1px #e1e1e1;
						height: 60px;
						text-align: center;
						width: 215px;
					}
				}
			}

			.reservation-form {
  				float: left;
				border-bottom: 1px solid #E1E1E1;
  				width: 100%;

  				h2 {
  					color: @dark-blue;
  					font-size: 22px;
  					margin: 25px 0;
  					.medium-font;
  				}

  				form {
  					background-color: #f7f7f7;
  					border-top: solid 1px #e1e1e1;
  					padding: 20px 25px;

	  				.row {
			            clear: both;
			            width: 540px;

			            label {
			                float: left;
			                margin-bottom: 20px;
			                width: 100px;
			                .font(Medium, 14px);
			                &.textarea {
			                	margin-bottom: 5px;
			                	width: 100%;
			                }
			            }

			            input, textarea {
			                border: solid 1px #e1e1e1;
			                float: left;
			                margin-bottom: 20px;
			                padding: 4px;
			                .font(Regular, 16px);
			            }

			            textarea {
			                width: 530px;
			                margin-bottom: 5px;
			            }

			            @media only screen and (max-width : @max-mobile-resolution) {
			            	textarea {
			            		float: none;
			            		width: 280px;
			            	}
			            }

			            select {
			                font-size: 16px;
			                .regular-font;
			            }

			            button {
			                background-color: @blue;
			                border: none;
			                color: white;
			                float: right;
			                height: 30px;
			                padding: 0 10px;
			                text-transform: uppercase;
							.font(Bold, 14px);
			                &:hover {
			                    background-color: @hover-blue;
			                }

			                i {
			                    margin-left: 10px;
			                }
			            }

			            .instructions {
			            	color: #656565;
			            	float: left;
			            	line-height: 26px;
			            	.font(Italic, 16px);
			            }

			            @media only screen and (max-width : @max-mobile-resolution) {
			            	.instructions {
				            	display: block;
				            	float: none;
				            }
			            }
			        }

			        @media only screen and (max-width : @max-mobile-resolution) {
			        	.row {
			        		margin-bottom: 20px;
			        		width: 100%;

			        		label {
			        			display: block;
			        			float: none;
			        			margin-bottom: 0;
			        		}

			        		input, textarea {
			        			float: none;
			        			margin-bottom: 0;
			        			width: 80%;
			        		}
			        	}
			        }

			        .actions {
						clear: both;
						text-align: right;
						width: 540px;

						button {
							background-color: @blue;
							border: none;
							color: white;
							display: inline;
							line-height: 14px;
							padding: 10px;
							text-transform: uppercase;
							.font(Bold, 14px);
							&:hover {
								background-color: @hover-blue;
							}

							i {
								margin-left: 10px;
							}
						}

						span {
							margin: 0 10px;
							.font(Italic, 16px);
						}
					}

					@media only screen and (max-width : @max-mobile-resolution) {
						.actions {
							text-align: left;
							width: auto;

							button {
								display: block;
							}
						}
					}
			    }

			    @media only screen and (max-width : @max-mobile-resolution) {
	            	form {
	            		padding: 20px 5px;
	            	}
	            }
			}
		}

		.second-step {
			font-size: 18px;
			text-align: center;

			h2 {
				color: @dark-blue;
				font-size: 22px;
				margin-bottom: 25px;
				width: 100%;
				.regular-font;

				a {
					color: @dark-blue;
					.medium-font;
				}
			}

			.reservation-details {
				font-size: 18px;
				text-align: center;
				.regular-font;

				.outline {
					background-color: #f8f8f8;
					border: 1px solid #e1e1e1;
					font-size: 16px;
					margin: 10px 50px 20px;
					padding: 15px;
					text-align: left;
					width: 520px;
				}
				
				.deposit {
					padding-left: 1em;
				}

				@media only screen and (min-width: @max-resolution) {
					.outline {
						width: 710px;
					}
				}

				@media only screen and (max-width : @max-mobile-resolution) {
					.outline {
						margin: 10px 0;
						width: 100%;
						box-sizing: border-box;
					}
					
					.deposit {
						padding-left: 0;
						display: block;
					}

				}
			}

			.credit-cards {

				p {
					color: @dark-blue;
					font-size: 18px;
					line-height: 18px;
					.medium-font;
				}
			}

			#PayformVisa, #PayformMC {
				display: inline;
			}

			#PayformVisa {
				margin-right: 10px;
			}

			.payment-instructions {
				border-top: solid 1px #e1e1e1;
				border-bottom: solid 1px #e1e1e1;
				padding: 15px;

				a {
					background-color: #f8f8f8;
					border: solid 1px #e1e1e1;
					color: @blue;
					float: left;
					padding: 8px;
					.font(Bold, 16px);
					&:hover {
						border-color: #b1b1b1;
						color: black;
					}

					i {
						font-size: 12px;
						margin-left: 10px;
					}
				}

				img {
					float: right;
				}
			}

			.sprite.info {
				display: inline-block;
				height: 46px;
				margin-right: 5px;
				width: 46px;
				vertical-align: middle;
				.sprite(-100px, -300px);
			}
		}

		.third-step {

			h2 {
				color: @blue;
				font-size: 22px;
				line-height: 22px;
				margin-bottom: 25px;
				text-align: center;
				.medium-font;
			}

			p {
				font-size: 16px;
				text-align: center;
				.regular-font;
			}

			a {
				color: @blue;
			}

			ul {
				font-size: 16px;
				list-style: none;
			}
		}
	}

	.concierge-page, .covid-19-page {
		color: black;
		.font(Regular, 16px);

		h3 {
	        border-bottom: solid 1px #e1e1e1;
	        color: @blue;
	        font-size: 22px;
	        margin-top: 25px;
	        padding-bottom: 5px;
	        text-align: center;
	        .medium-font;
	    }

	    a {
    		color: @blue;
    		&.visited {
    			color: @blue;
    		}
    	}

		form {
	        padding: 40px 55px;
	        position: relative;

	        .contact-details {
	            color: black;
	            font-size: 14px;
	            left: 345px;
	            line-height: 25px;
	            position: absolute;
	            text-align: center;
	            top: 40px;
	            width: 250px;
	            .regular-font;
	        }
	    }

	    @media only screen and (max-width : @max-mobile-resolution) {
	    	form {
	    		padding: 10px 0;
	    	}
	    }

	    .row {
	        clear: both;

	        label {
	            float: left;
	            margin-bottom: 20px;
	            width: 100px;
	            .font(Medium, 16px);
	        }

	        input, textarea {
	            border: solid 1px #e1e1e1;
	            float: left;
	            margin-bottom: 20px;
	            padding: 4px;
	            .font(Regular, 16px);
	        }

	        textarea {
	            width: 430px;
	        }

	        @media only screen and (max-width : @max-mobile-resolution) {
	        	textarea {
		            width: 310px;
		        }
	        }

	        select {
	            font-size: 16px;
	            .regular-font;
	        }

	        button {
	            background-color: @blue;
	            border: none;
	            color: white;
	            float: right;
	            height: 30px;
	            padding: 0 10px;
	            text-transform: uppercase;
	            .font(Bold, 14px);
	            &:hover {
	                background-color: @yellow;
	            }

	            i {
	                margin-left: 10px;
	            }
	        }
	    }
	}

	#select-title {
		background-color: #f8f8f8;
		border-top: 1px solid #e1e1e1;
		clear: both;
		color: @dark-blue;
		line-height: 25px;
		margin-top: 35px;
		padding: 20px 0 20px 5px;
		.font('Medium', 18px);
	}

	#select {
		background-color: #f8f8f8;
		border-top: solid 1px #e1e1e1;
		border-bottom: solid 1px #e1e1e1;
		clear: both;
		margin: 0 0 20px 0;
		width: 620px;

		.input {
			float: left;
			border-right: solid 1px #e1e1e1;
			padding: 10px 20px;
			width: 180px;

			label {
				color: #333;
				display: block;
				line-height: 14px;
				margin-bottom: 10px;
				.font(Regular, 15px);
			}
		}

		.submit {
			float: left;
			text-align: center;
			width: 178px;

			#show-prices {
				background-color: @blue;
				color: white;
				line-height: 14px;
				margin: 0  auto;
				padding: 8px;
				position: relative;
				text-transform: uppercase;
				top: 25px;
				.font(Bold, 14px);
				&:hover {
					background-color: @hover-blue;
				}

				i {
					margin-left: 8px;
				}
			}
		}
	}

	@media only screen and (max-width : @max-mobile-resolution) {
			#select {
				background-color: white;
				border-bottom: none;
				width: 100%;

				.input {
					background-color: #f8f8f8;
					border-bottom: solid 1px #e1e1e1;
					border-right: none;
					width: 280px;

					label {
						display: inline-block;
						width: 100px;
					}
				}

				.submit {
					width: 100%
				}
			}
	}

	@media only screen and (min-width: @max-resolution) {
		#select {
			width: 840px;

			.input {
				padding: 10px 75px;
				width: 170px;
			}

			.submit {
				width: 198px;
			}
		}
	}

	#room-prices {
  		float: left;
  		width: 620px;

		#room-list {
	  		margin-top: 19px;
	  		width: 620px;

			thead {
				tr {
					background-color: @blue;
					border-top: 1px solid #e1e1e1;
					color : #fff;
					font-size: 12px;
	  				line-height: 22px;
	  				.regular-font;

	  				th {
	  					padding: 5px 10px;
	  					&.first-child {
	  						text-align: left;
	  					}
	  				}
	  			}
	  		}

	  		td {
	  			border-bottom: 1px solid #E1E1E1;
	  			border-top: 1px solid #e1e1e1;
				padding: 10px;
				text-align: center;
				vertical-align: middle;
				&.first-child {
					text-align: left;
				}
				a {
					color: @blue;
					font-size: 16px;
					.medium-font;
				}
	  		}
	  	}

	  	@media only screen and (min-width: @max-resolution) {
	  		#room-list {
	  			width: 840px;
	  		}
	  	}

	  	@media only screen and (max-width : @max-mobile-resolution) {
			#room-list {
				width: 100%;
			}
		}

	  	.message {
			color: @blue;
			line-height: 20px;
			margin: 0 0 20px 0;
			text-align: center;
			width: 100%;
			.regular-font;

			.bold {
				.font(Bold, 16px);
			}
	  	}
	}

	@media only screen and (min-width: @max-resolution) {
		#room-prices {
			width: 840px;
		}
	}

	@media only screen and (max-width : @max-mobile-resolution) {
		#room-prices {
			margin-top: 39px;
			width: 100%;
		}
		
		#room-list {
			margin-top: 0 !important;
		}
	}

	#room-list-prices-images {
		border-bottom: 1px solid #e1e1e1;
		border-collapse: collapse;
		margin-top: 19px;
		width: 620px;
		text-align: center;
		vertical-align: middle;

  		thead {
  			tr {
	  			background-color: @blue;
				border-top: 1px solid #e1e1e1;
				color: white;
				font-size: 12px;
				line-height: 22px;
				z-index: 100;

				th {
					padding: 5px 10px;
					.regular-font;
				}
			}
		}

		tbody {

			tr {
				&.mobile {
					display: none;
				}
				&.more-images-row {
					display: none;

					.more-images-cell {
						border-top: none;
						text-align: left;
					}

					.room-image {
						margin-right: 10px;
						margin-top: 10px;
						width: 93px;
					}
				}

				td {
					border-top: 1px solid #e1e1e1;
					padding: 10px 5px;
					vertical-align: middle;
					&.first-child {
						text-align: left;
                        padding-right: 0
                        
					}
					&.quantity {
						border-right: 1px solid #e1e1e1;
					}
					&.price {
                        color: @blue;
                        font-size: 16px;
                        .medium-font;

                        .normal-price {
                            color: #666;
                            text-decoration: line-through;
                        }
                    }
					&.name {
						color: @blue;
						text-align: left;
						.font('Medium', 16px);
						&:hover {
							color: black;
						}
						&.images {
							text-align: center;
						}

						a {
							color: @blue;
							.font('Medium', 16px);
						}
					}
					&.persons {
						vertical-align: middle;
					}
					&.quantity {
						.font(Regular, 14px);
					}

					a.room-image-link {
						position: relative;

						.room-image {
							width: 120px;
						}

						.more-images-icon {
							left: 99px;
							position: absolute;
						  	top: 36px;
						}
					}
				}

				.button {
					background-color: @blue;
					border: none;
					color: white;
					display: inline-block;
					line-height: 14px;
					padding: 10px;
					text-transform: uppercase;
					.font(Bold, 14px);
					&:hover {
						background-color: @hover-blue;
					}
				}
			}

			@media only screen and (max-width : @max-mobile-resolution) {
				tr {
					&.normal {
						display: none;
					}
					&.mobile {
						display: table-row;
					}
				}
			}
		}
	}

	@media only screen and (min-width: @max-resolution) {
		#room-list-prices-images {
			width: 840px;


		}
	}

	@media only screen and (max-width : @max-mobile-resolution) {
		#room-list-prices-images {
			width: 100%;

			tbody {
				td.first-child {
					display:none;
				}
			}
		}
	}

	.mobile.map-col {
		display: none;
	}

	@media only screen and (max-width : @max-mobile-resolution) {
		.mobile.map-col {
			display: block;
			margin-top: 40px;

			.button.blue {
				width: 300px;
			}

			.button.grey {
				width: 300px;
			}

			.map-box {
				padding-bottom: 0px;

				img {
					margin: 25px;
				}
			}
		}
	}
}

@media only screen and (max-width : @max-mobile-resolution) {
	.hotel-listing {
		margin-top: 0;
	}
}

.policy {
	color: #000;
  	font-size: 16px;
  	line-height: 24px;
	margin-top: 20px;
	font-family:'Din Text Pro Regular';

	h5 {
		font-size: 18px;
		line-height: 24px;
		margin: 0;
        font-family: 'Din Text Pro Bold';
        color: #007dc3;
	}
}

.pricecontent {
	color: #000;
	font-size: 14px;
	line-height: 20px;
	margin: 10px 0 20px 0;

	ul {
  		margin: 0;
  		padding: 0 0 0 22px;

  		li {
            // list-style: disc inside none;
            font-family: 'Din Text Pro Regular';
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0.018px;
        }
	}
}


@media only screen and (max-width : @max-mobile-resolution) {
	
	body.gallery-active {
		height: 100%;
		overflow: hidden;
	}
	
	body.gallery-active:after {
		content: '';
		display: block;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 50%;
		background: black;
		z-index: 100000;
	}
	
}

#gallery-iframe {
    background: black url(/img/preloader-white.gif) center no-repeat;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100003;
    height: 100%;
}


#large-thumbnail {
    border: 2px solid #E1E1E1;
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}

#active-offers {
  clear: both;
  float: left;
  list-style: disc outside none;
  margin-top: 10px;
}

.rsImg {
  cursor : pointer ;
}










.floating-header {
  position: fixed;
  top: 0;
  visibility: hidden;
}

.floating-button {
  position: fixed;
  top: 69px;
}

ul.book-room-list {
  padding : 0;
}

ul.book-room-list li {
  margin : 10px 0;
}

ul.book-room-list li.offset {
  margin-left : 110px;
}

ul.book-room-list img {
  margin-right : 20px;
}

.h-review-box-rp {
  border-top: 1px solid #E1E1E1;
  border-bottom: 1px solid #E1E1E1;
  float: left;
  width: 100%;
  color: #007DC3;
  font-size: 16px;
  line-height: 20px;
  background: #f8f8f8;
}

@media only screen and (max-width : @max-mobile-resolution) {
	.h-review-box-rp {
		border: solid 1px #e1e1e1;
	}
}

.h-review-box-rp .h-reviews-avg {
    float: left;
    font-family: 'Din Text Pro Medium','Din Display Cyrillic Medium',sans-serif;
    height: 88px;
    padding-top: 60px;
    text-align: center;
    width: 240px;
}

@media only screen and (min-width: @max-resolution) {
	.h-review-box-rp .h-reviews-avg {
		width: 420px;
	}
}

@media only screen and (max-width : @max-mobile-resolution) {
	.h-review-box-rp .h-reviews-avg {
		border-bottom: 1px solid #e1e1e1;
		width: 320px;
		height: 73px;
		padding-top: 45px;
	}
}

.h-review-box-rp .h-reviews-avg .h-reviews-avg-num {
    background: none repeat scroll 0 0 #007DC3;
    color: #FFFFFF;
    font-size: 28px;
    padding: 10px 7px 10px 5px;
    float: left;
    text-align: left;
    margin: 0 10px 0 65px;

}

@media only screen and (min-width: @max-resolution) {
	.h-review-box-rp .h-reviews-avg .h-reviews-avg-num {
		margin-left: 165px;
	}
}

@media only screen and (max-width : @max-mobile-resolution) {
	.h-review-box-rp .h-reviews-avg .h-reviews-avg-num {
		margin-left: 92px;
	}
}

.h-review-box-rp .h-reviews-avg .h-reviews-avg-txt {
  float: left;
}

.h-review-box-rp .h-review-details {
  font-family: 'Din Text Pro Regular','Din Display Cyrillic Regular',sans-serif;
  float: left;
  padding: 20px 0 20px 39px;
  border-left: 1px solid #E1E1E1;
}

@media only screen and (max-width : @max-mobile-resolution) {
	.h-review-box-rp .h-review-details {
		border-left: none;
		padding: 10px;
	}
}

.h-review-box-rp .h-review-details div {
  float: left;
}

.h-review-box-rp .h-review-details .h-review-detail {
  clear: both;
  width: 100%;
  margin: 2px 0px;
}

.h-review-box-rp .h-review-details .h-review-detail .h-review-detail-label {
  width: 145px;
}

.h-review-box-rp .h-review-details .h-review-detail .h-review-detail-bar {
    border: 2px solid #007DC3;
    height: 10px;
    width: 151px;
    margin-top: 3px;
    overflow: hidden;

}

@media only screen and (max-width : @max-mobile-resolution) {
	.h-review-box-rp .h-review-details .h-review-detail .h-review-detail-bar {
		width: 120px;
	}
}

.h-review-detail-bar-percent {
    background: none repeat scroll 0 0 #007DC3;
    height: 16px;
    width: 155px;
}


footer.mobile {
	background-color: #004C89;
	color: #fff;
	display: none;
	margin-top: 40px;
	min-width: 960px;
	padding: 15px 0;

	.inner {
		margin: 0 auto;
		width: 960px;

		a, a:visited, .telephone-cell {
			color: #fff;
			.font(Regular, 16px);
		}

		a:hover {
			color: #00b2ff;
		}



		.contact {
			float: right;
			font-size: 16px;
			line-height: 44px;
			.regular-font;

			a {
				color: #fff;
				line-height: 18px;
				margin-left: 20px;
				&:hover {
					color: #00b2ff;
				}

				&.telephone {
					margin: 0;
					padding: 0;
				}
			}

			.sprite {
				display: inline-block;
				height: 18px;
				margin-right: 4px;
				vertical-align: middle;
				width: 18px;
				&.email {
                    .sprite(-290px, -139px);
                }
                &.telephone {
                    .sprite(-290px, -121px);
                }
			}
		}

		.mobile {
			display: none;
		}
	}
}

@media only screen and (max-width : @max-mobile-resolution) {
		footer.mobile {
			display:block;
			min-width: 320px;
			text-align: center;

			.inner {

				width: 320px;

				a {
					padding: 10px;
				}

				.copyright {
					display: block;
					font-size: 10px;
					line-height: 60px;
				}

				.eot {
					width: 35px;
					margin-left: 20px;
				}

				.trust-seal {
					margin-left: 20px;
				}

				.contact {
					float: none;
				}

				.mobile {
					display: block;
				}
			}
		}

		footer.desktop {
			display: none;
		}
}

footer.desktop {
	background-color: #004C89;
	color: #fff;
	margin-top: 40px;
	min-width: 960px;
	padding: 15px 0;

	.inner {
		display: table;
		margin: 0 auto;
		text-align: center;
		position: relative;

		a, a:visited, .telephone-cell {
			color: #fff;
			.font(Regular, 16px);
		}

		a:hover {
			color: #00b2ff;
		}

		div.col {
			border-right: solid 1px #4079a7;
			display: table-cell;
			padding: 0 28px;
			text-align: center;
			vertical-align: middle;
			.font(Regular, 14px);

			&.first {
				.eot {
					width: 50px;
					margin-left: 20px;
				}

				.trust-seal {
					margin-left: 19px;
				}
			}

			&.third {
				line-height: 30px;

				a.telephone {
					font-size: 14px;
				}
				.sprite {
					display: inline-block;
					height: 18px;
					margin-right: 4px;
					vertical-align: middle;
					width: 18px;
					&.email {
	                    .sprite(-290px, -139px);
	                }
	                &.telephone {
	                    .sprite(-290px, -121px);
	                }
				}
			}

			&.fourth {
				border-right: none;
				line-height: 30px;

				p {
					margin: 0;
					text-align: left;
				}

				input {
		  			border: none;
		  			color: #999;
		  			float: left;
		  			height: 16px;
		  			padding: 6px 10px;
		  			width: 130px;
		  			.font(Regular, 14px);
		  		}

		  		button {
		  			background-color: @dark-blue;
		  			border: none;
		  			color: #fff;
		  			float: left;
		  			height: 28px;
		  			padding: 0;
		  			width: 39px;
		  			.font(Bold, 14px);
		  			&:hover {
		  				background-color: @yellow;
		  				color: @dark-blue;
		  			}
		  		}
			}
		}
	}
}

.about-page {
	.font(Regular, 16px);

	h2 {
        border-bottom: solid 1px #e1e1e1;
        color: @blue;
        font-size: 22px;
        margin-top: 25px;
        padding-bottom: 5px;
        text-align: center;
        .font(Medium, 22px);
    }
}

// custom media css for adjusting footer padding issue
@media only screen and (max-width : 1025px) {
	footer.desktop {
		.inner {
			div.col {
				padding: 0 20px;
			}
		}
	}
}


@media only screen and (max-width : @max-mobile-resolution) {
	.calendar-test .hotel-listing #room-prices {
		/*margin-top: 0;*/
	}

}

.availability-calendar-tablet {
	padding-left: 10px;	
}


.contact-page  {
       h2 {
           border-bottom: solid 1px #e1e1e1;
           color: @blue;
           font-size: 22px;
           margin-top: 25px;
           padding-bottom: 5px;
           text-align: center;
           .medium-font;
       }

    form {
        padding: 40px 55px;
        position: relative;
    
        .contact-details {
            color: black;
            font-size: 14px;
            left: 345px;
            line-height: 25px;
            position: absolute;
            text-align: center;
            top: 40px;
            width: 250px;
            .regular-font;
        }
    }

    @media only screen and (max-width : @max-mobile-resolution) {
    	form {
    		padding: 10px 0;
    	}
    }

    .row {
        clear: both;

        label {
            float: left;
            margin-bottom: 20px;
            width: 100px;
            .font(Medium, 16px);
        }

        input, textarea {
            border: solid 1px #e1e1e1;
            float: left;
            margin-bottom: 20px;
            padding: 4px;
            .font(Regular, 16px);
            box-sizing: border-box;
            width: 220px;
        }

        textarea {
            width: 430px;            
        }

        @media only screen and (max-width : @max-mobile-resolution) {
        	textarea {
        		box-sizing: border-box;
	            width: 320px;
	        }
        }

        select {
            font-size: 16px;
            .regular-font;
        }

        button {
            background-color: @blue;
            border: none;
            color: white;
            float: right;
            height: 30px;
            padding: 0 10px;
            text-transform: uppercase;
            .font(Bold, 14px);
            &:hover {
                background-color: @yellow;
            }

            i {
                margin-left: 10px;
            }
        }
    }

    .status-message {
        font-size: 16px;
        margin-top: 25px;
        text-align: center;
        .regular-font;
    }
}




.availability-calendar .cell {	
	font-size: 14px;
	line-height: 24px;
}



.availability-calendar.multi .calendars {
	top: -56px;
	position: relative;
	z-index: 100;
	margin-bottom: -56px;	
}


.availability-calendar.multi > .controls {
	position: relative;
	z-index: 110;
	clear: both;
}



.availability-calendar .cell,
.availability-calendar .month-name {
	margin: 1px;
}




@media only screen and (min-width : @min-desktop-resolution) {
	
	.availability-calendar .cell {
		width: 42px;
	}
	
	
	.availability-calendar .controls .month-name {
		width: 556px;
	}
	
	
	
	.availability-calendar.multi .calendars > div {
		width: 48%;
		margin-top: 32px;
	}
	
	
	.availability-calendar.multi .calendars > div:nth-child(-n+2) {		
		margin-top: 20px;
	}
	
	.availability-calendar.multi .calendars > div:nth-child(3n+2) {
		margin-left: 0;
		margin-right: 0;
	}
	
	.availability-calendar.multi .calendars > div:nth-child(3n+4) {
		clear: none;
	}
	
	.availability-calendar.multi .calendars > div:nth-child(2n-1) {
		margin-right: 4%;
		clear: both;
	}

	
	
	.availability-calendar-rooms .persons {
		display: none;
	}
	
	
	.availability-calendar-rooms:after {
		content: '';
		display: block;
		clear: both;
	}
	
	
	.availability-calendar-rooms {
		max-width: 100%;
	}
	
	.availability-calendar-rooms li {
		float: left;
		width: auto;
		border: 1px solid #ccc;
	}
	
	
	.availability-calendar-rooms a {
		margin: 0;
		padding: 5px 10px;
	}
	
	
	
	.availability-calendar-rooms a.active {
		color: #fff;
		background: #007dc3;
	}
	
	
	.availability-calendar-rooms li:last-child {
		margin-right: 0;
	}
	
	
	.availability-calendar-rooms .name {
		float: none;
		width: auto;
		font-size: 15px;
		font-weight: normal;
	}
	
	
	.availability-calendar .calendars .month-name {
		background: #007dc3;
		color: #fff;
		font-weight: normal;
		border-radius: 3px;
		
	}
	
	.availability-calendar.multi .calendars .controls span {
		width: 305px;
	}
	
}



@media only screen and (min-width : @max-resolution) {	
	
	.availability-calendar.multi .calendars > div,
	.availability-calendar.multi .calendars > div:nth-child(2n+2),
	.availability-calendar.multi .calendars > div:nth-child(2n-1) {
		width: 31%;
		margin-right: 3%;
	}	
	
	.availability-calendar.multi .calendars > div:nth-child(3n+3) {
		margin-right: 0;
	}
	
	.availability-calendar.multi .calendars > div:nth-child(-n+3) {
		margin-top: 20px;
	}
	
	.availability-calendar.multi .calendars > div:nth-child(2n+3) {
		clear: none;		
	}
	
	.availability-calendar.multi .calendars > div:nth-child(3n+4) {
		clear: both;
	}
	
	
	.availability-calendar .cell {
		width: 35px;
	}
	
	
	.availability-calendar .controls .month-name {
		width: 758px;
	}
	
	
	.availability-calendar.multi .calendars .controls span {
		width: 260px;
	}
	
}



@media only screen and (max-width : @max-mobile-resolution) {
	.contact-page {
		margin-bottom: 25px;
	}
	
	.availability-calendar.multi .calendars > div {
		width: 100%;
		float: none;
	}
	
	
	.availability-calendar .cell {
		width: 44px;
	}
	
	
	.availability-calendar .controls .month-name {
		width: 228px;
	}
	
}


.ui-tooltip.calendar {
	height: 15px;
	line-height: 15px;
}


.enhanced-clean {
    position: relative;
	width: 613px;
	margin: 24px auto 6px;
	padding: 10px;
	border-radius: 4px;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
    background-color: #f8f8f8;
    .enhanced-clean-icon{
        position:absolute;
        left: 10px;
        top: 10px;
        svg {
            width: 24px;
            display: block;
            float: left;
        }
    }

    p {
        margin: 0;
        font-size: 14px;
        font-family: "PFEncoreSansPro-Book";
        line-height: 20px;
        color: #333;
    }

    h2 {
        font-family: "PFEncoreSansPro-Medium";
        font-size: 16px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #017dc3;
    }
	
	.more {
        color: #007dc3;
        text-decoration: underline;
    }
	
	p, h2 {
		padding-left: 44px;
	}
	
	
	@media only screen and (max-width : @max-mobile-resolution) {
		width: 300px;
		padding: 20px 10px;

        .enhanced-clean-icon{
            top: 20px;
        }
    

        h2 {
			margin-bottom: 6px;
		}
		
		p, h2 {
			padding-left: 34px;
		}

	}
}


#enhanced-clean-popup {
	
	display: none;
    width: 800px;
    padding: 25px 25px 12px;
    color: #333;
    line-height: 1.38;
    border-radius: 0px;
    position: relative;
    overflow: visible;	
	h2 {
		margin-bottom: 22px;
        font-family: "PFEncoreSansPro-Medium";
        font-size: 26px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        height: 27px;
        color: #017dc3;

		svg {
			width: 34px;
			display: block;
			float: left;
			margin-right: 10px;
		}
	}

    p {
        margin: 0;
        font-family: "PFEncoreSansPro-Book";
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.38;
        letter-spacing: normal;
        color: #333333;
	}

	.measures {
	
		margin-top: 16px;
	
		&:after {
			content: '';
			display: block;
			clear: both;
		}
	
		li {
			float: left;
			width: 50%;
			list-style: none;
			margin: 14px 0;
			
			&:nth-child(2n) {
				padding-left: 32px;
			}
			
			&:nth-child(2n+1) {
				clear: both;
			}


			svg {
				width: 18px;
				display: block;
				float: left;
			}
			
						
			&>span {
				display: block;
				padding-left: 28px;
				
				&.measure-name {
                    margin-bottom: 5px;
                    font-family: "PFEncoreSansPro-Medium";
                    font-size: 16px;
                    font-weight: 500;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 1.38;
                    letter-spacing: normal;
                    color: #017dc3;
				}
				
				&.measure-description {
                    font-family: "PFEncoreSansPro-Book";
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 1.38;
                    letter-spacing: normal;
                    color: #333333;
                    max-width:328px;
				}
			}
			
		}
	}
	
    @media only screen and (min-width: @max-resolution) {

        .fancybox-button.fancybox-close-small {
            color: currentColor;
            padding: 7px;
            right: -56px;
            top: -27px;
            position: absolute;
            color: white;
        }    
    
    }

    @media only screen and (max-width : @max-mobile-resolution) {

        max-width:335px;
        padding: 20px 18px 12px 20px;
        .fancybox-button.fancybox-close-small {
            padding: 8px;
            color: #017dc3;
            width:40px;
            height:40px;
        }    
        
		font-size: 13px;
		line-height: 19.75px;
	
		h2 {
			font-size: 16px;
            font-family: "PFEncoreSansPro-Medium";
            font-weight: 500;
            font-stretch: normal;
            font-style: normal;
            line-height: 34px;
            letter-spacing: normal;
            color: #017dc3;
			margin-bottom: 12px;

            svg {
				margin-right: 15px;
			}
        }

        p {
            font-size: 14px;
        }
		
		.measures {
		
			margin-top: 4px;
		
			li {
				margin: 9px 0;
			
				&:nth-child(2n) {
					padding-left: 0;
				}
				
				&:nth-child(2n+1) {
					padding-right: 10px;
				}

				svg {
					transform: rotate(90deg);
                    width: 16px;
                    margin-left: -2px;
				}
				
				&>span {
					padding-left: 0;
					clear: both;
					
					&.measure-name {
						font-size: 14px;
					}
					
					&.measure-description {
						font-size: 14px;
					}
					
				}		
			
			}
		
		}
	
	}	
	
	
}

#carousel,
#mobile-carousel {
	&.royalSlider {
		height: auto;
	}
	
	
}