@charset "UTF-8";

:root {
	--teal-bright: #43ddb1;
	--teal: #3cbdc8;
	--teal-dark: #478EA0;
	--teal-darker: #17777f;
	--offblack: #343434;
}

nav { background-image:url('../images/nav-bg.webp'); }
.page { background-image:url('../images/white-seamless-texture.webp'); }
.page-bg { background-image:url('../images/bw-palm-trees.webp'); }
header #top-left { background-image:url('../images/bg-stars.jpg'); }
header { background-image:url('../images/main-header-bg.webp'); }

header, header *, nav, .page-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Fonts */
html, body {
    color: var(--offblack);
	font-family:'Raleway', sans-serif;
	font-size:16px;
	line-height:1.2rem;
	letter-spacing:1px;
    margin: 0;
    padding: 0; 
}

body * { box-sizing: border-box; }

.hidden { display:none; }
.page-bg {
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	background-size:cover;
	background-attachment:fixed; 
	background-position:bottom center; 
	margin:0; 
	padding:0;
	z-index:-1;
}
.content-wrapper { 
	width:1200px; 
	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.5;
	letter-spacing:1px;
	color:#343434;
}
header .tagline {
	color:white; 
	font-size:18px;
	line-height:16px;
	font-style:italic;
	font-family:serif;
	text-align:center;
}
#widgetHeaderLeft, #widgetHeaderRight { width:175px; }
#widgetHeaderLeft { 
	background-color:rgba(0,0,0,0.75); 
	color:white; 
	font-family:Raleway, sans-serif;
	padding:0;
}
#widgetHeaderRight { 
	background-color:rgba(255,255,255,0.75); 
	color:black; 
	font-family:Raleway, sans-serif;
}
.charts--combined { box-sizing: border-box; margin: 0 0 10px; padding:0; height: 780px; width: 100%; border: 1px solid #ccc; }

.ai-c { align-items: center; }
.bg-teal-dark { background-color: var(--teal-dark); }
.bg--dark { background-color:var(--offblack); }
.br-sm { border-radius: 7px; }
.db { display:block; }
.dib { display: inline-block; }
.dg { display: grid; }
.df { display: flex; }
.fd-c { flex-direction: column; }
.fd-r { flex-direction: row; }
.fd-rr { flex-direction: row-reverse; }
.fs-sm { font-size: 12px; line-height: 1.25; }
.fs-lg { font-size: 1.4em; }
.fs-xs { font-size: 10px; line-height: 1.25; }
.fw400 { font-weight: 400; }
.gap12 { gap: 12px; }
.gap24 { gap: 24px; }
.gap36 { gap: 36px; }
.gap48 { gap: 48px; }
.gap60 { gap: 60px; }
.gtc-1-4 { grid-template-columns: 1fr 4fr; }
.h-auto { height: auto; }
.jc-c { justify-content: center; }
.jc-se { justify-content: space-evenly; }
.jc-sb { justify-content: space-between; }
.jc-sa { justify-content: space-around; }
.lh1pt25 { line-height: 1.25; }
.lh1pt7 { line-height: 1.7; }
.mb0 { margin-bottom: 0; }
.mt12 { margin-top: 12px; }
.mt24 { margin-top: 24px; }
.mt36 { margin-top: 36px; }
.mt48 { margin-top: 48px; }
.mt60 { margin-top: 60px; }
.mlr-a { margin-left:auto; margin-right:auto; }
.mw100 { max-width: 100%; }
.p9 { padding: 9px; }
.p1r { padding: 1rem; }
.p2r { padding: 2rem; }
.p3r { padding: 3rem; }
.ptb1r { padding-top: 1rem; padding-bottom: 1rem; }
.ptb2r { padding-top: 2rem; padding-bottom: 2rem; }
.plr1r { padding-left: 1rem; padding-right: 1rem; }
.plr2r { padding-left: 2rem; padding-right: 2rem; }
.pos-abs { position: absolute; }
.pos-rel { position: relative; }
.pos-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.scrolling-box { border: 1px solid var(--offblack); max-height: 300px; overflow-y: scroll; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.white { color: white; }
.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
.z5 { z-index: 5; }

/* heading styles */
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, h3, h4, h5, h6, .villa-page h1, .two-villas h1 { font-family: Georgia,'Times New Roman', serif; }

.logo svg path, .logo svg stroke { fill:#fff; }

/* tabbed sections */
.tab { display: none; }
.tab.selected { display: block; }

.teal-links a { color:var(--teal); }
.teal-links a:hover { color:var(--teal-bright); }

/* hurricane text */
.last-hurricane {
	box-sizing:border-box;
	width:60%;
	position:absolute;
	left:20%;
	bottom:25%;
	padding:24px;
	color:yellow;
	background-color:#333;
}
.clean-font {
	font-family:arial,helvetica,sans-serif !important;
	font-size:16px;
}

/* buttons */
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;
} 
.panorama-button {
	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:black;
	color:white;
}
button.selected { 
background: var(--teal);
background: -moz-linear-gradient(top, var(--teal) 0%, var(--teal-dark) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, var(--teal)), color-stop(100%, var(--teal-dark)));
background: -webkit-linear-gradient(top, var(--teal) 0%, var(--teal-dark) 100%);
background: -o-linear-gradient(top, var(--teal) 0%, var(--teal-dark) 100%);
background: -ms-linear-gradient(top, var(--teal) 0%, var(--teal-dark) 100%);
background: linear-gradient(to bottom, var(--teal) 0%, var(--teal-dark) 100%);
color:white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3)
}
button:hover, .small-button:hover {  
	-webkit-box-shadow: 0px 3px 9px -6px var(--teal-bright);
	-moz-box-shadow: 0px 3px 9px -6px var(--teal-bright);
	box-shadow: 0px 3px 9px -6px var(--teal-bright);
	text-shadow: none;
}
select { font-size:14px; padding:5px; }

/* 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 {
    aspect-ratio: 768 / 496;
    border: none;
    height: auto;
    max-width:100%;
}
.source { font-family:arial, helvetica, sans-serif; font-size:9px !important; line-height:16px !important; text-align:right; }

/* 5 day forecast and coconuts ad */
#forecastWrapper {
    align-items:flex-start;
    box-sizing: border-box;
    display:flex;
    gap:30px;
    justify-content:center;
    max-width:100%;
    width: 900px;
}
#five-day {
    max-width:100%;
    width:650px;

}
#forecastWrapper { position: relative; }
#coconuts-villa {
    background-color: #fff;
    border-radius: 7px;
    line-height: 1.1;
    max-width: 100%;
    padding: 0 0 1em;
    position: relative;
    transition: all 0.3s ease;
    width: 270px;
}
#coconuts-villa .learn-more {
    display: inline-block;
    border: 1px solid #333;
    border-radius: 3px;
    line-height: 1;
    margin: auto;
    padding: 0.5em 0.75em;
    text-align:center;
    transition: all 0.3s ease;
} 
#coconuts-villa:hover  {
    box-shadow: 0 3px 15px rgba(0,0,0,0.15);
}
#coconuts-villa a { z-index:2; }

/* 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;
}

/* 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:13px; 
	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; }

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; }