body{padding:0px; margin:0px; background-image:url('images/topo.png'); background-repeat: repeat; font-family: 'Montserrat', sans-serif;}
#compassRose{float:right; width:200px;}

.topNavBar{position:absolute; z-index:3000; left:0px; right:0px; top:50px;}

.socialIcon{float:right; margin:10px 5px; width:30px;}
.heroBox{position: absolute; width:100%; top: 85px;}
.pageBox{position: absolute; width:100%; top: 140px;}
.heroBox:before{
	content: "";
	display: block;
	padding-top: 35%; 	/* initial ratio of 1:1*/
}

.heroContent{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background:#ffffff;
	background-image:url('images/crystalbeach.JPG');
	background-position: center;
	background-size: cover;
}

.lowerPage{position:absolute; width:100%;}

a{text-decoration:none; color:#1467c4; font-weight:700;}
a:hover{color:#5192dc;}
.lowerInner{background-color:#ffffff; box-shadow: 0px 2px 5px #888888;}

@media screen and (max-width: 768px) {
	#logo{position:absolute; z-index:3000; top:10px; left:10px; width:100px;}
	.midCol{width:94%; padding:3%;}
	.rightCol{width:94%; padding:3%;}
	.vidBoxVisbile{position:fixed; z-index:9000; bottom:20%; left:3%; right:3%; top:20%; transition-duration: .5s;}
	.vidThumbnailImg{float:left; width:48%; padding:1%;}
	.subBanner{display:none;}
}

@media screen and (min-width: 768px) {
	#logo{position:absolute; z-index:3000; top:10px; left:10px; width:150px;}
	.midCol{float:left; width:68%; padding:1%;}
	.rightCol{float:left; width:28%; padding:1%;}
	.vidBoxVisbile{position:fixed; z-index:9000; bottom:20%; left:20%; right:20%; top:20%; transition-duration: .5s;}
	.vidThumbnailImg{width:100%;}
	.subBanner{width:120px;}
}

.subBanner2{width:120px;}

.clear{clear:both; height:20px;}

.imgBox{
	position: relative;
	width: 100%;		/* desired width */
}
.imgBox:before{
	content: "";
	display: block;
	padding-top: 45.25%; 	/* initial ratio of 1:1*/
}

.imgContent{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-position: center;
	background-size: cover;
}

.vidContainer{position:relative; z-index:1000; max-width:100%; text-align:center;}

.videoWrapper {
	position: relative;
	z-index:1000;
	padding-bottom: 55.55%; /* 16:9 */
	padding-top: 10px;
	height: 0;
	background-color: #000000;
	border:10px solid #000000;
}
.videoWrapper iframe {
	position: absolute;
	z-index:1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
}


.vidLink{cursor:pointer;}

.vidPlayerHidden{position:fixed; bottom:0px; left:0px; width:0px; height:0px; overflow:hidden; transition-duration: .5s;}
.vidPlayerVisible{position:fixed; z-index:7000; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0, 0, 0, 0.75); transition-duration: .5s;}

.vidBoxHidden{position:fixed; z-index:8000; bottom:0px; left:0px; width:0px; height:0px; overflow:hidden; transition-duration: .5s;}


.closeButton{position:absolute; z-index:10000; right:-10px; top:-10px; background-color:#273037; color:#ffffff; border-radius: 50%; padding:5px 10px; font-weight:700; cursor:pointer;}

.articleBox{font-weight:300; padding:10px 10px 20px 10px; background-color:#fbfbfb; border:1px dotted #767b88;}
.articleMore{color:#1467c4; text-decoration:none;}