@charset "UTF-8";

/* imagess */
nav { background-image:url('../images/nav-bg.png'); }
.page { 	background-image:url('../images/white-seamless-texture.jpg'); }
.page-bg { background-image:url('../images/bw-palm-trees.jpg'); }
header #top-left { background-image:url('../images/bg-stars.jpg'); }
header { background-image:url('../images/main-header-bg.png'); }
header { background-image:url('../images/coconuts-daytime-panorama.png'); }
header.sunset { background-image:url('../images/coconuts-sunset-panorama.png'); }

/* Fonts */
html, body {
	font-family:'Raleway', sans-serif;
	font-size:16px;
	line-height:1.2em;
	letter-spacing:1px;
}

.clean-font {
	font-family:arial,helvetica,sans-serif !important;
	font-size:16px;
}

.mlr-auto { margin-left: auto; margin-right: auto; }
.white-box {
	background-color:rgba(255,255,255,.8);
	box-sizing:border-box; 
	border: 1px solid #bebebe; 
	padding: 2em; 
}
@media (min-width: 768px) {
  .mdu-mw600 { max-width: 600px; }
  .mdu-mw700 { max-width: 700px; }
  .mdu-2c {
	display:grid; 
	gap: 50px; 
	justify-content: space-evenly; 
	grid-template-columns: 1fr 1fr;
  }
} 
@media (max-width: 767px) {
	.sm-mt2 {
		margin-top: 2rem;
	}
}

/* Structure */
.hidden { display:none; }
.page-bg {
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	background-size:cover;
	background-attachement:fixed; 
	background-position:bottom center; 
	margin:0; 
	padding:0;
	z-index:-1;
}
.content-wrapper { 
	width:1400px; 
	max-width:96%;
	background-color:white; 
	padding:0; 
	margin:24px auto; 
	-webkit-box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
}
.page { 
	padding:50px 5% 5%;
	font-family:Raleway, sans-serif;
	font-weight:400;
	font-size:14px;
	line-height:1.7em;
	letter-spacing:1px;
	color:#000;
}
input[type='text'], input[type='email'], input[type='tel'], textarea { width:90%; box-sizing:border-box; padding:5px; margin-bottom:7px; font-size:1em; }
.block-wrapper { display:table; margin:0; padding:0; width:100%; }
.w80, .w75, .w70, .w60, .w48, .w50, .w40, .w33, .w30, .w25, .w20, .wframe { display:block; box-sizing:border-box; margin:0; width:100%; }

@media screen and (min-width:1600px) {
	.wframe {
		display:table-cell;
		width:50%;  
	}
}

@media screen and (min-width:769px) {
	.w80, .w75, .w70, .w60, .w50, .w40, .w33, .w30, .w25, .w20 { display:table-cell; }
	.w80 { width:80%; }
	.w75 { width:75%; }
	.w70 { width:70% }
	.w60 { width:60%; }
	.w50 { width:50%; }
	.w48 { width:48%; }
	.w40 { width:40%; }
	.w33 { width:33.3%; }
	.w30 { width:30%; }
	.w25 { width:25%; }
	.w20 { width:20%; }
}

.pT { padding-top:24px; }
.pB { padding-bottom:24px; }
.pTB { padding-top:24px; padding-bottom:24px; }
.pL { padding-left:24px; }
.pR { padding-right:24px; }
.pLR { padding-left:24px; padding-right:24px; }
.pAll { padding:24px; }
.pNone { padding:0; }

.mT { margin-top:24px; }
.mB { margin-bottom:24px; }
.mTB { margin-top:24px; margin-bottom:24px; }
.mL { margin-left:24px; }
.mR { margin-right:24px; }
.mLR { margin-left:24px; margin-right:24px; }
.mAll { margin:24px; }
.mNone { margin:0; }
.spBNone { margin-bottom:0; padding-bottom:0; }

/* page styles */
.textC { text-align:center; }
.textL { text-align:left; }
.textR { text-align:right; } 
img { max-width:100%; }
#panorama { width:100%; overflow-x:scroll; }
#panorama img { max-width:250% !important; }

/* headings */
.logo { width: 275px; height:auto; margin: 24px auto 5px; }
.logo svg path, .logo svg .stroke { fill: white; }

h1 { font-family: Georgia,'Times New Roman', serif; color:#242222; font-style:italic; font-size:42px; line-height:46px; margin-top:0; font-weight:100; }
h2 { font-size:28px; line-height:1.2em; margin-top:0; }
h2 span { }
h3 { }
h2, h3, h4, h5, h6, .villa-page h1, .two-villas h1 { font-family: Georgia,'Times New Roman', serif; }
.villa-page h1, .two-villas h1 { font-size:32px; line-height:36px; padding:36px 0 0; font-style:normal; } 
.villa-page .big-text { font-size:24px; }

.intro { font-size:1.4em; font-weight:400; color:#343434; margin:0; }
.dark-label { color:#343434; font-weight:600; font-size:1.2em;  }

/* fancy headers */
.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  top: 0;
  width: 36px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

.shadow {
	-webkit-box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
}

/* links */
a, input[type="submit"] { transition:all 0.3s ease; color:#1387ae; }
a, a:visited { color:#5FAFB8; }
a:hover { }
a.arrow-up {
	color:white;
	background-color:rgba(0,0,0,0.7);
	display:block;
	bottom:24px;
	right:24px;
	padding:12px;
	position:fixed;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	text-decoration:none;
}
a.mobile-button {
	color:white;
	background-color:rgba(0,0,0,0.8);
	display:block;
	top:5px;
	left:5px;
	right:5px;
	padding:12px;
	position:fixed;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	text-decoration:none;
}
a.arrow-up:hover, a.mobile-button { background-color:rgba(0,0,0,1); }
a#top { position:absolute; top:0; left:0; }

/* header */
header { 
	position:relative; 
	padding:24px 0 0 24px; 
	min-height:220px;  
	background-position:center center;
	background-size:cover; 
}

.station { font-size:20px; line-height:22px; font-weight:100; letter-spacing:1px; }
.location { font-size:14px; line-height:16px; margin-bottom:12px; font-weight:100; letter-spacing:1px; }
.moon-wrapper { width:175px; }
.basic-wrapper { width:175px; }
.moon-location, .block-title { text-align:center; font-weight:bold; padding:3px; font-size:12px; }
.moon-location { background-color:black; }
.block-title { background-color:white; }
.moon-left, .moon-right { display:inline-block; vertical-align:middle; width:50%; }
.sun-moon { padding:0 9px; font-size:10.5px; line-height:12px; }
.moon-photo {
	-webkit-border-radius: 50px;
	   -moz-border-radius: 50px;
            border-radius: 50px;
	max-width:50% !important;
}
.sun-moon { background-color:rgba(0,0,0,0.8); color:white; }
.moon-left { text-align:center; padding:3px 0; }
.moon-phase, .basic-wrapper .condition { font-weight:bold; letter-spacing:2px; padding-bottom:5px; }
.moon-phase { text-shadow:0px 0px 5px black; }
.weather-day { background-color:#57B1BC; color:white; padding:3px; }
.day-condition { vertical-align:top; text-align:left; padding:12px 12px 12px 0; line-height:1.2em !important; }
.day-wrapper:last-child { border-bottom:2px solid #57B1BC; }
.weather-icon { padding:12px 0; }
.basic-wrapper .condition { text-align:center; }
.basic-wrapper .station { padding:7px 7px 0px; background-color:white; }
.basic-wrapper .location { padding:0px 7px 7px; background-color:white; }
.basic-content { padding:0 9px 9px; }
.feels-like { padding:0 9px; padding-bottom:24px; }
.pull-right { float:right; }
#current-time { color:white; font-family:Raleway, sans-serif; font-size:13px;  padding:3px; width:100%; margin:0; position:absolute; bottom:0;  }

header .tagline {
	color:white; 
	font-size:18px;
	line-height:16px;
	font-style:italic;
	font-family:serif;
	text-align:center;
}

/* navigation */
nav { 
	text-align:center;  
	position: -webkit-sticky;
  	position: -moz-sticky;
  	position: -ms-sticky;
  	position: -o-sticky;
	position:sticky; 
	top:0;
	left:0;
	right:0;
	opacity:0.95;
	-webkit-box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 16px -3px rgba(0,0,0,0.75);
	z-index:10;
}
nav a, nav a:visited { 
	color:#ABABAB; 
	text-decoration:none; 
	font-size:16px; 
	font-family:Raleway, sans-serif; 
	font-weight:400; 
	letter-spacing:1px;
	padding:16px 10px; 
	display:inline-block;
	opacity:1; 
}
nav a:hover { color:white; background-color:black; }

@media screen and (min-width:1106px) {
	a.mobile-button { display:none !important; }
	nav { display:block !important; }
	.dropdown-parent { display:inline-block; position:relative; }
	.dropdown { display:none; position:absolute; left:0; }
	.dropdown a { display:block; width:225px; text-align:left; background-color:#444; }
	.dropdown-parent:hover .dropdown { display:block; }
}

@media screen and (max-width:1105px) {
	body { padding-top:60px; }
	a.mobile-button { display:block; position:fixed; background-color:rgba(0,0,0,0.8); color:white; font-family:Raleway, sans-serif; }
	nav { 
		display:none; 
		position:fixed; 
		top:50px; 
		left:0; 
		width:100%; 
		text-align:left !important; 
		margin:0 !important; 
		padding:0 !important; 
		background-image:none;
	}
	nav.on {
		display: block;
	}
	nav a { 
		display:block !important; 
		border:none; 
		left:5px;
		right:5px;
		margin:5px !important;
		background-color:rgba(0,0,0,0.8);
		color:white !important;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		box-sizing:border-box;
	}
	header .logo { width: 220px; height:auto; margin: auto; }
	.dropdown { display:none; }
}

/* charts */
.weather-chart { display:none; }
.weather-chart.selected { display:block; }

/* island views */
.view-tab, .hurricane-tab { display:none; }
.view-tab.selected, .hurricane-tab.selected { display:block; }
.hurricane-box {
	padding:24px;
	border:1px solid #1E1E1B;
	margin:48px 0;
	max-height:300px;
	overflow:scroll;
}
.hurricane-box pre {
	font-family: Raleway, sans-serif;
	text-align:left;
}
.smaller { font-size:11px; line-height:13px; }
h3.dark-bar { margin:0; padding:5px; background-color:#3E3129; color:white; }

/* footer */
footer { background-color:#333; color:white; }
footer a { color:white; text-decoration:none; }
.credit { font-size:10px; line-height:16px; font-family:Raleway, sans-serif; letter-spacing:1px; }

/* ad styles */
a.ad { 
	display:block; 
	box-sizing:border-box; 
	width:100%; 
	color:#333; 
	line-height:1.1em; 
	background-color:white; 
	margin:48px 0;
	text-decoration:none;
	padding:0;
}
a.ad div {
	padding:0 0 12px;
	margin:0;
}
a.ad h4 { line-height:normal; font-size:20px; line-height:20px; margin:7px 0; }
a.ad h5 { margin:0; padding:0; line-height:normal; }
a.ad ul { text-align:left; padding:12px; margin:12px; }
#five-day { vertical-align:top; padding-left:12px; padding-right:12px; } 

/* form styles */
form { }
input { }
button { font-size:15px; padding:7px; border:none; color:#444; border-radius:.25em; text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.9);
background: rgba(209,209,209,1);
background: -moz-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(209,209,209,1)), color-stop(100%, rgba(180,180,180,1)));
background: -webkit-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
background: -o-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
background: -ms-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
background: linear-gradient(to bottom, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#b4b4b4', GradientType=0 );
-webkit-box-shadow: 0px 3px 9px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 3px 9px -6px rgba(0,0,0,0.75);
	box-shadow: 0px 3px 9px -6px rgba(0,0,0,0.75);
	margin-bottom:7px;
}
.small-button {
	display:inline-block;
	font-size:14px; 
	padding:5px 10px; border:none; color:#444 !important; border-radius:.25em; text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.9);
	background: rgba(209,209,209,1);
    background: -moz-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(209,209,209,1)), color-stop(100%, rgba(180,180,180,1)));
    background: -webkit-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
    background: -o-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
    background: -ms-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
    background: linear-gradient(to bottom, rgba(209,209,209,1) 0%, rgba(180,180,180,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#b4b4b4', GradientType=0 );
    -webkit-box-shadow: 0px 3px 9px -6px rgba(0,0,0,0.75);
	   -moz-box-shadow: 0px 3px 9px -6px rgba(0,0,0,0.75);
	        box-shadow: 0px 3px 9px -6px rgba(0,0,0,0.75);
	margin-bottom:7px;
	text-decoration:none;
} 
.hspace-button { margin-left:12px; margin-right:12px; }
.panorama-button, .panorama-button:visited, .panorama-button:active {
	font-size:12px;
	background-color:white;
	padding:7px 14px;
	color:black;
	font-family: Raleway, sans-serif;
	letter-spacing:1px;
	display:inline-block;
	position:absolute;
	right:24px;
	bottom:12px;
	-webkit-border-radius:2em;
	-moz-border-radius:2em;
	border-radius:2em;
	transition:all 0.3s ease;
}
.panorama-text {
	color:white;
	font-size:12px;
	font-family: Raleway, sans-serif;
	letter-spacing:1px;
	display:inline-block;
	position:absolute;
	left:24px;
	bottom:12px;
}
.panorama-button:hover {
	background-color:#1A4F7E;
	color:white;
}
button.selected { 
background: rgba(60,189,200,1);
background: -moz-linear-gradient(top, rgba(60,189,200,1) 0%, rgba(23,119,127,1.00) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(60,189,200,1)), color-stop(100%, rgba(23,119,127,1.00)));
background: -webkit-linear-gradient(top, rgba(60,189,200,1) 0%, rgba(23,119,127,1.00) 100%);
background: -o-linear-gradient(top, rgba(60,189,200,1) 0%, rgba(23,119,127,1.00) 100%);
background: -ms-linear-gradient(top, rgba(60,189,200,1) 0%, rgba(23,119,127,1.00) 100%);
background: linear-gradient(to bottom, rgba(60,189,200,1) 0%, rgba(23,119,127,1.00) 100%);
color:white !important;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3)
}
button:hover, .small-button:hover {  
	-webkit-box-shadow: 0px 3px 9px -6px rgba(67, 221, 177, 1);
	-moz-box-shadow: 0px 3px 9px -6px rgba(67, 221, 177, 1);
	box-shadow: 0px 3px 9px -6px rgba(67, 221, 177, 1);
	text-shadow: none;
}
select { font-size:14px; padding:5px; }
textarea { }

/* list styles */
ul li { margin-bottom:15px; }
dt { font-weight:bold; width:90px; float:left; clear:left; }
dd { margin-bottom:18px; margin-left:90px; } 

#satZoom {
	max-width:100%;
	box-sizing:border-box;
	border:none;
	margin:auto;
	overflow:hidden;
	background-color:#3A3A3A;
}

#plumeriaSlideshow { display:none; }

@media screen and (max-width:1200px) {
	.content-wrapper { max-width:100%; margin:0; box-sizing:border-box; }
	header .highlight {
		max-width:100% !important; 
		box-sizing:border-box;
	}
	img { max-width:100% !important; }
}

@media screen and (max-width:768px) {
	h1 { font-size:32px; }
	h2 { font-size:28px; }
	h3 { font-size:20px; }
	.fancy { line-height:1.0; }
	.fancy span:before, .fancy span:after { display:none; }
	header { min-height:220px; text-align:center; }
	header .highlight { display:none; }
}

@media screen and (min-width:651px) {
	.mini-pic { max-width:150px !important; margin-left:24px; }
}

@media screen and (max-width:650px) {
	.mini-pic { margin-bottom:24px; }
	.panorama-text { position:static; }
	header { padding:24px; }
}

@media screen and (max-width:480px) {
	h2 { font-size:20px; }
	h3 { font-size:16px; }
}

/* BROWSER SPECIFIC HACKS : firefox only */
@-moz-document url-prefix() {
	h2 { padding-top:48px; }
}

/* BROWSER SPECIFIC HACKS : safari only */
@supports (-webkit-appearance:none) {
  	h2 { padding-top:72px; }
}

/* HIDE ELEMENTS FROM PRINT */
@media print {
	
}

/* MS EDGE SPECIFIC STYLES */
@supports (-ms-accelerator:true) {
 	h2 { padding-top:48px; }
}
/* IE10+ SPECIFIC STYLES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  	h2 { padding-top:72px; }
}

/* site specific */
.photo-with-caption { border:1px solid #eee; padding:18px; margin:36px auto; text-align: center; -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); max-width:80%; }
.photo-with-caption .caption { padding-bottom:12px; }	
.fa { color:#333 !important; }
#prev, #next { position:absolute; top:50%; z-index:999; opacity:0.7; transform:translateY(-21px); }
#prev:hover, #next:hover { opacity:1; }
#prev { left:5%; }
#next { right:5%; }
.slideshow div img { margin:auto; }
.slick-dots li button { box-shadow:none; }
/* style arrows */
button.slick-arrow { box-shadow:none !important; color:#333; }
	.message-from-owners { padding:0 24px 24px; background-color:white; -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); width:1200px; max-width:90%; height:800px; max-height:80%; overflow-y:scroll; }
	.message-from-owners p { font-style:italic; }
	@media screen and (min-width:768px) {
		.photo-with-caption { width:67%; }
	}
.alert-wrapper {
    padding-top:2.5rem;
}
.alert { font-size:1.5em; font-weight:bold; margin:0; padding:0.3em; text-align:center; background-color:#FFFFCC; border:1px solid black; }
@media screen and (max-width:899px) {
    #coconutsSlideshow img { max-width:70% !important; }
    #prev, #next { top:40%; }
    #prev { left:0; }
    #next { right:0; }
}
/* youtube lazyload */
.youtube {
    aspect-ratio: 16 / 9;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    left: 0;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #ff0000;
    /* box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); */
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
    border: 3px solid #fff;
    -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
	-webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
	transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}
.youtube:hover .play-button {
	background-color: #ff0000;
    border-color: transparent;
	opacity: 1;
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
    cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.calendar-ad { opacity: 0 !important; visibility:hidden !important; }