/*
''template details start''
'name:Page
'primary:true
'serial:1000
'cssFile:template_page.css
'aspFile:template_page.asp
''template details end''
*/

/*========================= 01 ==========================*/	
/*=======================================================*/
/*================== RESPONSIVE STARTS ==================*/
/*=======================================================*/
/*=======================================================*/	

		/*------ Global Reset & Standards ------*/
			html, body, div, span, applet, object, iframe,
			h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			a, abbr, acronym, address, big, cite, code,
			del, dfn, em, img, ins, kbd, q, s, samp,
			small, strike, strong, sub, sup, tt, var,
			b, u, i, center,
			dl, dt, dd, ol, ul, li,
			fieldset, form, label, legend,
			table, caption, tbody, tfoot, thead, tr, th, td,
			article, aside, canvas, details, embed, 
			figure, figcaption, footer, header, hgroup, 
			menu, nav, output, ruby, section, summary,
			time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; vertical-align:top; }
			table { border-collapse:collapse; border-spacing:0; }
			.left, .columns.left { float:left; }
			.right, .columns.right { float:right; }
			.hide { display:none; }
		
		/*------ Responsive Grid ------*/
			.row { width:100%; max-width:980px; min-width:980px; margin:0 auto; }	/* To fix the grid into a different size, set max-width to your desired width */
			.row .row { min-width:0px; }
			.column, .columns { margin-left:2.127663%; float:left; min-height:1px; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
			.column:first-child, .columns:first-child, .alpha { margin-left:0px; }
			.column.omega, .columns.omega { float: right; }
			.row .one.columns 		{ width: 6.382989%; }
			.row .two.columns 		{ width: 14.893641%; }
			.row .three.columns 	{ width: 23.404293%; }
			.row .four.columns 		{ width: 31.914945%; }
			.row .five.columns 		{ width: 40.425597%; }
			.row .six.columns 		{ width: 48.936249%; }
			.row .seven.columns 	{ width: 57.446901%; }
			.row .eight.columns 	{ width: 65.957553%; }
			.row .nine.columns 		{ width: 74.468205%; }
			.row .ten.columns 		{ width: 82.978857%; }
			.row .eleven.columns	{ width: 91.489509%; }
			.row .twelve.columns	{ width: 100%; }
			img, object, embed 		{ max-width: 100%; height: auto; }
			img { -ms-interpolation-mode: bicubic; }
			#map_canvas img, .map_canvas img { max-width: none!important; }
			.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
			.row:after, .clearfix:after { clear: both; }
			.row, .clearfix { zoom: 1; }
		
		/*------ Mobile Grid ------*/
			@media only screen and (max-width:980px) 
			{
				body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
				.row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
				.row .row .column, .row .row .columns { padding: 0; }
				.column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; }
				.column:last-child, .columns:last-child { margin-right: 0; float: none; }
				.row .row .column, .row .row .columns { padding: 0; }
				.column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; }
				.column:last-child, .columns:last-child { margin-right: 0; float: none; }
				[class*="column"] + [class*="column"]:last-child { float: none; }
				[class*="column"]:before, [class*="column"]:after { display: table; }
				[class*="column"]:after { clear: both; }
				#webroomsBookingEngine iframe { width:1px; min-width:100%; *width:100%; }
			}
			
			
/*========================= 02 ==========================*/	
/*=======================================================*/	
/*=================== WEBSITE STYLING ===================*/
/*=======================================================*/
/*=======================================================*/	


html, body {
	margin:0;
	padding:0;
	font-family: 'Montserrat', sans-serif;
	font-size:15px;
	line-height: 1.42857143;
	color:#333;
	background:#fff;
}

/* common */
a { color:#28B0B8; text-decoration:none; }
p { margin:1em 0; }
h1 { font-size:30px; font-weight:400; color:#2db4d2; padding:10px 0 0; }
h2 { font-size:20px; font-weight:400; color:#2db4d2; }
h3 { font-size:18px; font-weight:700; }
h4 { font-size:16px; font-weight:400; }
hr { height:0; border:none; border-top:#ddd solid 1px; margin:20px 0; }
ul { margin:1em 0; }
ul li { margin:0 0 0 30px; }
b, strong { font-weight:700; }
div#preload { display:none; }
.xlink { background:url(/~images/template/icon_external.png) center left no-repeat; padding-left:16px; }
.mobile { display:none; !important; }
.clear { clear:both; }

/* host */
.hostBanner { background:#ffcf23; }
.hostBanner .row { position:relative; background:url(/~images/template/host_banner-right.jpg) right center no-repeat; }
.hostBanner a.aboutHost { color:#333; font-style:italic; font-family:'Trebuchet MS', Helvetica, sans-serif; font-size:12px; position:absolute; top:20px; right:150px; }

/* header bar */
#headerBar { padding:5px 0; height:30px; background:#333; color:#fff; }
#headerBar a { color:inherit; }
#headerBar .contact { display:inline-block; float:left; font-size:0.9em; }
#headerBar .searchSite { float:right; display:inline-block; margin-top:2px; }
#headerBar .social { float:right; display:inline-block; font-size:0.9em; line-height:30px; margin-left:10px; }
.searchSite { width:150px; height:24px; border:1px solid #ccc; background:none; position:relative; border-radius:3px; }
.searchField::-webkit-input-placeholder { color:#ccc; }
.searchField::-moz-placeholder { color:#ccc; }
.searchField:-moz-placeholder { color:#ccc; }
.searchField:-ms-input-placeholder { color:#ccc; }
.searchField { float:left; border:none; color:#ccc; background:none; width:120px; line-height:24px; margin:0; text-indent:5px; outline:none; }
.searchField:focus { color:#fff; }
.searchSite .fa-search { float:right; height:24px; line-height:24px; width:20px; color:#fff; }
.searchBtn { width:30px; height:24px; background:none; cursor:pointer; border:none; position:absolute; top:0; right:0; outline:none; }
.search b { background:#eee; }

/* font awesome */
.contact div { display:inline-block; line-height:30px; margin-right:10px; }
.contact span.fa-stack { height:22px; line-height:22px; width:22px; }
.contact .fa-stack-2x { font-size:22px; color:#2db4d2; }
.contact .fa-stack-1x { font-size:12px; }
.social span.fa-stack { height:30px; line-height:30px; width:30px; }
.social .fa-stack-2x { font-size:30px; color:#2db4d2; }
.social .fa-stack-1x { font-size:16px; }

/* header block */
.headerBlock { padding:5px 0; background:#eee; }
.headerBlock .logo { display:inline-block; margin-right:20px; padding:10px 0; }
.headerBlock .logo img { height:70px; }
.headerBlock .headerNav { display:inline-block; }
.headerBlock .property { margin:15px 0 5px 15px; }
.headerBlock .property h3 { font-size:17px; font-weight:400; color:#2db4d2; }

/* scroll to fixed */
.scroll-to-fixed-fixed { box-shadow:0 3px 7px rgba(0,0,0,0.1); }
.scroll-to-fixed-fixed .logo { margin:10px; }
.scroll-to-fixed-fixed .logo img { height:50px; }
.scroll-to-fixed-fixed .property { display:none; }
.scroll-to-fixed-fixed .headerNav { margin-top:25px; }

/* book */
.bookingBox { background:#eee; padding:20px; margin-top:20px; text-align:center; }
.datepickerOuter { display:inline-block; text-align:left; position:relative; }
.bookingBox .datepicker-label { text-indent:10px; width:280px; line-height:32px; border-radius:3px; }
.bookingBox .datepicker-label:before { display:none; }
.bookingBox .datepicker-input { left:115px; width:200px; }
.bookingBox .datepicker-button { text-transform:uppercase; border-radius:3px; }
.bookingBox i.fa { position:static; width:auto; color:#2db4d2; }

/* page */
#pageOuter { margin:20px auto; }
#pageContent { margin:20px 0; }
#pageContent .revDiv { width:700px; }
.halfL { display:inline-block; width:49%; clear:left; }
.halfR { display:inline-block; width:49%; float:right; }
.fLeft { display:inline-block; width:74%; clear:left; }
.fRight { display:inline-block; width:23%; float:right; }
.fRight .cmsGallery li, 
.fRight .cmsGallery li a img { height:auto; width:auto; margin:0; }
.fRight .cmsGallery li { margin-bottom:20px; }
.note { padding:20px; background:#FFFACD; font-style:italic; }
#pageOuter .error404 { font-size:7em; }
.frameSize { margin:-20px -10%; }
.frameSize .iframe { height:100%; }

/* footer */
#footerBadges { background:#f5f5f5; border-top:1px solid #ddd; padding:30px 0; text-align:center; }
#footerBadges img { display:inline-block; margin:0 5px; }
#footerBlock { background:#333; padding:45px 0; color:#fff; }
#footerBlock a { color:inherit; }
#footerBlock .logo { margin:10px 0 20px; }
#footerBlock h3 { font-size:20px; color:#2db4d2; }
#footerBlock h4 { font-size:15px; font-weight:400; }
#footerBlock .contact div { display:block; }
#footerBlock span { color:#2db4d2; font-weight:700; }
#footerBlock .map { box-shadow:rgba(0,0,0,0.3) 0 1px 5px; background:rgba(0,0,0,0.1); }
#footerBlock .map iframe { display:block; }
#footerBlock .map .viewMap { display:block; position:absolute; top:0; left:0; right:0; opacity:0; width:100%; height:300px; line-height:300px; text-align:center; text-decoration:none; color:#fff; transition-duration:1s; }
#footerBlock .map .viewMap:hover { background:rgba(0,0,0,0.7); transition-duration:1s; font-size:30px; opacity:1; }
#footerCopy { font-size:12px; color:#bbb; padding:20px 0; text-align:center; }
#footerCopy a { color:inherit; }
#footerCopy a:hover { color:#999; }
.sep { opacity:0.3; margin:0 5px; }

/* roomtypes */
#pageContent .rwrRoomtype,
#pageContent .newsBlock { background:#f7f7f7; border:none; padding:30px; margin:20px 0; }
#pageContent .categoryDiv h2 { font-size:30px; color:#333; padding-top:20px; }
#pageContent .categoryDiv .rwrRoomtype h2 { font-size:20px; color:#2db4d2; padding-top:0; }
#pageContent .rwrRoomtype .desc-photos-thumbs { right:30px; }
#pageContent .newsBlock h3.newsDate { font-size:16px; font-weight:400; }


/*========================= 03 ==========================*/	
/*=======================================================*/
/*==================== MOBILE STARTS ====================*/
/*=======================================================*/
/*=======================================================*/	

@media only screen and (max-width: 980px) {
body,html { font-size:90%; }
h1 { font-size:150%; padding:0; }
h2 { font-size:130%; }
h3 { font-size:100%; }
.mobile { display:block !important; margin:auto; }
.remove { display:none !important; }
.headerBlock { padding:0; }
#pageOuter { padding:1em; padding-top:0; margin:0; }
#pageContent { padding:0; margin:0; }
#footerCopy { max-width:90%; margin:auto; }
.halfL,
.halfR { display:block; width:100%; float:none; }
.fLeft,
.fRight { display:block; width:100%; float:none; }
#pageContent .revDiv { width:auto; }

#headerHost,
#headerBar { display:none; }
.scroll-to-fixed-fixed .headerNav { margin-top:0; }
.headerBlock { height:50px; }
.headerBlock .logo { margin:0; padding:5px; }
.headerBlock .logo img { height:40px; }
.headerBlock .property { display:none; }
.headerBlock .headerNav { display:block; position:fixed; top:0; left:0; right:0; height:50px; width:100%; }
.frameSize { margin:0; }

.bookingBox { margin:1em; }
.datepickerOuter { display:block; }
.bookingBox .datepicker-label { border:none; background:none; text-indent:0; width:auto; color:#fff; }
.bookingBox .datepicker-input { position:static; background:#fff; border-bottom:2px solid rgba(0,0,0,0.2); width:100%; text-indent:10px; display:block; margin:5px 0; }
.bookingBox .datepicker-button { margin:0; width:100%; }

#footerBadges { padding:2em; }
#footerBadges img { height:60px; }
#footerBlock { padding:2em; }
#footerBlock .logo { text-align:center; }
#footerBlock h3, #footerBlock h4 { text-align:center; }
#footerBlock .map { margin-top:1em; }

/* roomtypes */
#pageContent .rwrRoomtype { padding:1em; margin:1em 0; }
#pageContent .categoryDiv h2 { font-size:150%; padding-top:1em; }
#pageContent .categoryDiv .rwrRoomtype h2 { font-size:130%; }
.desc-photos-outer { margin:0; }

/* host */
.hostBanner .row { background:none; }
.hostBanner .logo { display:block; text-align:center; }
.hostBanner a.aboutHost { display:none; }

}


/*========================= 04 ==========================*/	
/*=======================================================*/
/*====================== NAVIGATION =====================*/
/*=======================================================*/
/*=======================================================*/	

.navBar { position:relative; margin:auto; }
.scroll-to-fixed-fixed { max-width:100%; width:100% !important; left:0 !important; }
.flexnav { overflow:hidden; margin:0 auto; }
.flexnav.flexnav-show { max-height:none; background:#111; opacity:1; }
.flexnav ul { background:#222; }
.flexnav li { font-size:100%; position:relative; overflow:hidden; padding:0; margin:0; display:inline-block; }
.flexnav li a { position:relative; z-index:101; overflow:hidden; text-decoration:none; display:block; color:#666; padding:10px 15px; border-right:1px solid rgba(255,255,255,0.3);
	text-transform:uppercase; font-size:16px; font-weight:700; }
.flexnav li.last a { border-right:none; }	
.flexnav li ul { width:300px; text-align:left; margin:0; }
.flexnav li ul li { font-size:100%; position:relative; overflow:hidden; float:left; display:block; }
.flexnav li ul.flexnav-show li { overflow:visible; }
.flexnav li ul li a { display:block; border:none; font-weight:400; border-bottom:1px solid rgba(0,0,0,0.3); color:#fff; padding:10px 15px; background:#222; }
.flexnav li ul li a:hover { color:#fff; background:#111; }
.flexnav li a:hover,
.flexnav li:hover > a { background-color:rgba(255,255,255,0.2); }
.flexnav .touch-button { position:absolute; z-index:9999; top:1px; right:0; display:inline-block; background:rgba(0,0,0,0.075); text-align:center; width:40px; height:40px; display:none; }
.flexnav .touch-button:hover { cursor:pointer; }
.flexnav .touch-button .navicon { position:relative; top:1.4em; font-size:12px; color:#666; }
.flexnav li > ul {
//  display: block;
display: none;
} /* fixes nav flashing on page load */

/* screen */
@media all and (min-width:980px) {
.flexnav { overflow:visible; }
.flexnav.opacity { opacity:1; }
.flexnav li { position:relative; list-style:none; display:inline-block; overflow:visible; width:auto; }
.flexnav li > ul { position:absolute; top:auto; left:0; }
.flexnav li > ul li { width:100%; }
.flexnav li ul li > ul { margin-left:100%; top:0; }
.flexnav li ul li a { }
.flexnav li ul.open { display:block; opacity:1; visibility:visible; z-index:1; }
.flexnav li ul.open li { overflow:visible; max-height:100px; }
.flexnav li ul.open ul.open { margin-left:100%; top:0; }
.menu-button { display:none; } 
}

/* mobile */
@media screen and (max-width:980px) {
.headerBlock { background-color:#2db4d2; }
.navBar .mobile { font-size:100%; line-height:50px; max-width:75%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; position:absolute; top:0; left:0; right:0; z-index:1; display:none !important; }
.navigation { width:100%; height:auto; padding:0; margin:0; position:absolute; top:0; left:0; right:0; }
.menu-button { position:relative; display:block; line-height:50px; padding:0; background:#111; height:50px; color:#000; cursor:pointer; text-align:center; font-size:125%; overflow:hidden; width:40px; float:right; }
.menu-button .touch-button { background:#000; position:absolute; z-index:9999; top:0; right:0; width:40px; height:50px; display:inline-block; text-align:center; }
.menu-button .touch-button .navicon { font-size:12px; position:relative; color:#fff; width:40px; height:40px; color:#000; display:block; }
.menu-button .touch-button .navicon:before { content:"\2261"; position:absolute; top:0; right:0; color:#fff; width:40px; height:40px; font-weight:bold; font-size:16px; }
.navigation .flexnav { text-align:left; max-height:0; margin-top:50px; }
.navigation .flexnav-show { max-height:none; }
.navigation .flexnav .touch-button { display:inline-block; background:#222; }
.navigation .flexnav .touch-button .navicon { top:12px; color:#fff; }
.navigation .flexnav li { display:block; width:100%; z-index:101; }
.navigation .flexnav li.item-with-ul {  }
.navigation .flexnav li ul { width:100%; }
.navigation .flexnav li ul li { float:none; }
.navigation .flexnav li a { color:#fff; padding:0 1em; border:none; border-top:1px solid #222; border-bottom:1px solid #000; background:#111; font-size:90%; line-height:40px; }
.navigation .flexnav li ul li a { background:#333; border-bottom:1px solid #222; border-top:1px solid #444; font-size:90%; color:#fff; padding:0 1em; }
.navigation .flexnav.flexnav-show { background:#000; }
}




/*========================= 05 ==========================*/	
/*=======================================================*/
/*======================== COLOURS ======================*/
/*=======================================================*/
/*=======================================================*/	

/* custom colours */
.bookingBox i.fa,
.contact .fa-stack-1x { color:#fff; }
.contact .fa-stack-2x { color:#44b28f; }
.headerBlock .property h3,
#footerBlock h3,
#footerBlock span,
#pageOuter .error404,
#pageContent .categoryDiv .rwrRoomtype h2 { color:#44b28f; }

.bookingBox .datepicker-button,
.descLink, .desc-book-button { background-color:#44b28f !important; }
.headerBlock { background:#eee; }
#headerBar,
.bookingBox,
#footerBlock { background:#124676; }

.flexnav li a,
h1, h2 { color:#124676; }

/* custom colours mobile */
@media screen and (max-width:980px) {
.headerBlock { background-color:#eee; }
}