/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* SET GLOBAL VALUES - Required_field is in main_top.css */

:root {
	--blue-rgb: 25,140,149;
	--blue: #198C95;
	--red-rgb: 235,42,51;
	--red: #EB2A33;
}

/* Padding/margin resets and width/height 100% are in main_top.css */
html, body { font: normal normal 400 18px/28px "Roboto", Arial, Helvetica, sans-serif; color: #424242; }

/* Everything but footer. Put background here if need full-height background. Min-height and position in main_top.css */
.main_wrapper { background: #FFF url("/css/images/bkg_paper_trans.png") repeat center top; }
.main_wrapper.dark { background-color: #252525; }

/* Default link styles for entire site */
a:link { color: ; text-decoration: ; }
a:visited { text-decoration: none; }
a:link, a:hover, a:active, a:visited { __text-decoration: none !important; }

/* Form Error Styles - MOVEME this needs to move to form styles */
/* "IS REQUIRED" type of form messages */
.errmsg { color: #F00; font-size: 11px; line-height: 11px; font-style: italic; font-weight: bold; padding-top: .6em; } 
/* Regex fail form messages */
.invalid { outline: 2px solid #F00; font-weight: bold; }

/* Set defaults for primary text containers and headers */
p { padding: 0px; margin-top: 1em; }
h1,h2,h3,h4,h5,h6 { font-family: "Medula One",Arial,Helvetica,sans-serif; font-weight: 400; margin: 0px; padding: 0px; font-feature-settings: "kern"; text-rendering: optimizelegibility; }
h1 { font-size: 2.625em; line-height: .95em; }
h2 { font-size: 2.0625em; line-height: 1em; }
h3 { font-size: 1.5em; line-height: 1.25em; }
h4 { font-size: 1.333em; line-height: 1.1em; }
h5 { font-size: 1em; line-height: 1.3em; }

/* Make it impossible for an image to blow up its container */
img { max-width: 100%; }

/* NOTE - CONTENT and CONTENT_WRAPPER below are simply for microdata and adding a pad for sticky footer. SECTION will be used for most segments/areas */
.masthead, .banner, .banner_content, .content, .section, .footer, .footer_extra { width: 100%; margin: 0px auto; position: relative; }
.masthead_wrapper, .banner_wrapper, .content_wrapper, .section_wrapper, .footer_wrapper { position: relative; clear: both; }
.banner_content { 
	height: 100%; 
	display: flex;
	justify-content: center;
	align-items: center; 
	}

/* MASTHEAD */

.masthead_wrapper, .masthead { overflow: visible; height: 132px; }
.masthead_wrapper { 
	background: #FFF url("/css/images/m_bkg_masthead.jpg") no-repeat center top;
	background-size: cover;  
	z-index: 9997; /* Not necessary, but makes certain modifications easier */
	}
.masthead {  }

.menubar {
	width: 100%;
	height: 42px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: #198c95 url() no-repeat center 0px;
	background-size: cover;
	transition: 0.4s; 
	}

.masthead_logo {
	position: absolute;
	background: transparent url("/css/images/masthead_logo.png") no-repeat center bottom;
	background-size: contain;
	z-index: 9998; /* Not necessary, but makes certain modifications easier */
	width: 242px;
	height: 152px;
	left: 50%;
	margin-left: -126px;
	top: 13px;
	transition: 0.4s;
	}
.masthead_logo h2 { display: none; } /* Hacky way to add some additional keywords inside the site logo */

.masthead_scuba, .masthead_call {
	position: absolute;
	width: 320px;
	__height: 46px;
	top: 30px;
	left: 20px;
	display: none;
	transition: 0.4s;
	}
.masthead_call {
	width: auto;
	left: auto;
	right: 20px;
	text-align: right;
	height: auto;
	}
.scuba_flag {
	float: left;
	margin-right: 10px;
	}
.scuba_text, .call_text {
	font: 700 20px/21px "Roboto Condensed", Arial, Helvetica, sans-serif;
	color: #7F7F7F;
	}
.call_text { text-align: right; }

/* MAKE MASTHEAD STICKY/FIXED */
.main_wrapper { padding-top: 132px; /* padding matches masthead height */ transition: 0.4s; }
.masthead_wrapper { position: fixed; top: 0px; left: 0px; width: 100%; transition: 0.4s; outline: 10px solid rgba(255,255,255,1.0); }

.masthead_wrapper.scroll { top: -40px; outline: 10px solid rgba(255,255,255,1.0); }
.masthead_wrapper.scroll .masthead_logo { width: 80px; height: 87px; margin-left: -40px; top: 54px; transition: 0.4s; background: transparent url("/css/images/m_masthead_logo.png") no-repeat center bottom; background-size: contain; }
.masthead_wrapper.scroll .menubar { __background-color: #af1f1f; transition: 0.4s;  }
.masthead_wrapper.scroll .masthead_logo:hover {  }
.masthead_wrapper.scroll .masthead_scuba {
	top: -120px;
	transition: 0.4s;
	}
.masthead_wrapper.scroll .masthead_call {
	top: 51px;
	transition: 0.4s;
	}

/* MENU */

.mobile_icon { 
	position: absolute; 
	bottom: 0px; 
	right: 10px; 
	width: 71px; 
	height: 42px; 
	background: transparent url("/css/images/icon_menu.svg") no-repeat center center;
	background-size: contain; 
	cursor: pointer;
	z-index: 9999; /* Not necessary, but makes certain modifications easier */
	}
.mobile_menu_icon {  }
.mobile_phone_icon { background-image: url("/css/images/icon_phone.svg"); right: 60px; }
.mobile_text_icon { background-image: url("/css/images/icon_text.svg"); right: 120px; }

.contact_icons { background: #FFF url() no-repeat center top; background-size: cover; }
.mobile_menu { display: none; width: 100%; height: 100%; background: #198c95 url() no-repeat center center; background-size: cover; position: fixed; top: 0px; left: 0px; z-index: 9999; }
.mmb { /* Pop-up Menu Contact Buttons */
	font-size: 34px; 
	line-height: 34px; 
	background: #198c95 url() no-repeat center center;
	background-size: cover; 
	color: #FFF; 
	} 
.mmb_close { background-color: #eb2a33; }

.menu_icons a { text-decoration: none !important; color: inherit !important; }
.mmi { /* Pop-up Menu Item */
	font: normal normal 700 30px/30px "Roboto Condensed", Arial, Helvetica, sans-serif; 
	color: #FFF; 
	text-transform: uppercase;
	} 

.sitenav { display: none; }

	/* DROP-DOWN */
	
	.sitelinks {
		margin: 0px;
		padding: 0px 0px 0px 0px;
		list-style: none;
		position: absolute; 
		left: 0px; 
		top: 150px;
		width: 100%;
		z-index: 9000;
		}
	.sitelinks li { 
		display: block; 
		margin: 0px;
		padding: 0px; 
		position: relative;
		}
	.sitelinks li a { 
		background-color: rgba(255,255,255,0.8); /* Sets the color for the entire menu when it first drops down */
		border-bottom: 1px solid rgba(255,255,255,0.3);
		font: normal normal 400 16px/16px "Medula One", Arial, Helvetica, sans-serif;
		letter-spacing: 0px;
		text-align: center;
		text-decoration: none; 
		color: #FFF; /* Sets the font color for the menu items. Inherit to use base font color for the site. */
		display: block;  /* This (and the two below it) makes the whole thing clickable ... who knew?!? */ 
		padding: 13px 0px 17px 0px;
		width: 100%; 
		}
	.sitelinks li a:hover { color: #FFF; background-color: #afbd21; } /* Sets the highlight color for the menu items */
	.sitelinks li.menu_last a { border-bottom: none; }

/* BANNER */

.banner_wrapper { background-color: #299ca3; background-image: url("/css/images/bkg_banner.jpg"); background-size: cover; background-position: center center; }
.banner { background-color: #FFF; }

.banpic {
	background: transparent url(/css/images/temp_banner.jpg) no-repeat left center; 
	background-size: cover; 
	width: 66.66%; 
	height: 100%; 
	position: absolute; 
	left: 0px; 
	top: 0px;
	/* Just for mobile */
	width: 100%;
	opacity: 15%;
	}
.banfull { background-size: cover !important; background-repeat: no-repeat !important; }
.bangrad {
	position: absolute; 
	top: 0px; 
	right: 0px; 
	width: 66%; 
	height: 100%; 
	background: linear-gradient(90deg, rgba(41,85,96,0) 0%, rgba(41,85,96,1) 100%);
	}

.bantext {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #FFF;
	font: 700 26px/26px "Roboto Condensed", Arial, Helvetica, sans-serif;
	__font: normal normal 400 34px/34px "Medula One", Arial, Helvetica, sans-serif;
	padding: 100px 20px;
	}
.bantext_small { color: rgba(255,255,255,0.6); }
.bantext_large { font-size: 60px; line-height: 54px; font-family: "Medula One", Arial, Helvetica, sans-serif; font-weight: 400; }
.banbutton { 
	background-color: #eb2a33;
	padding: 15px 15px 17px 15px;
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 100%;
	}

/* FEATURED MULTI-BOX - PROBABLY 3-UP */

.feat .mb { background-color: #CCC; }
.feat .mbc {  }
.feat a { text-decoration: none !important; color: inherit !important; }
.feat .text {
	position: absolute;
	left: 0px;
	bottom: 20px;
	background-color: rgba(255,255,255,0.85);
	min-width: 10%;
	text-align: center;
	font: normal normal 400 48px/48px "Medula One", Arial, Helvetica, sans-serif;
	color: rgba(var(--blue-rgb),1);
	text-transform: uppercase;
	padding: 15px 25px 18px 20px;
	transition: 0.4s;
	}
.feat .mb:hover {  }
.feat .mb:hover .text {
	min-width: 100%;
	background-color: rgba(var(--red-rgb),0.9);
	color: rgba(255,255,255,1);
	transition: 0.4s;
	}

/* UPCOMING */

h2.upcoming_header {
	text-align: center;
	margin: 40px 0px 20px 0px;
	color: var(--blue);
	}
.upcoming .mb { background-color: #CCC; }
.upcoming_info {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 10px 18px 12px 15px;
	background-color: rgba(var(--blue-rgb),0.85);
	color: #FFF;
	text-align: left;
	min-width: 10%;
	transition: 0.4s;
	}
.upcoming .mb:hover .upcoming_info {
	min-width: 100%;
	background-color: rgba(var(--red-rgb),0.9);
	text-align: center;
	transition: 0.4s;
	}
h4.upcoming_title { font: normal normal 700 34px/34px "Roboto Condensed", Arial, Helvetica, sans-serif; }
.upcoming_date { margin-top: 2px; }
.upcoming_more {  
	position: absolute;
	right: 0px;
	bottom: 20px;
	background-color: rgba(255,255,255,0.85);
	min-width: 10%;
	text-align: right;
	font: normal normal 400 34px/34px "Medula One", Arial, Helvetica, sans-serif;
	color: rgba(var(--blue-rgb),1);
	text-transform: uppercase;
	padding: 10px 15px 12px 15px;
	transition: 0.4s;
	}
.upcoming_arrow { font-size: .8em; padding-left: 5px; }
.upcoming .mb:hover .upcoming_more {
	min-width: 100%;
	background-color: rgba(var(--red-rgb),0.9);
	color: rgba(255,255,255,1);
	transition: 0.4s;
	}

/* CONTENT */

.col { display: block; }
.nomargin { margin: 0px; }
.col_full, .col_half, .col_third, .col_twothirds, .col_quarter, .col_threequarters {  }
.col_full.nomargin, .col_half.nomargin, .col_third.nomargin, .col_twothirds.nomargin, .col_quarter.nomargin, .col_threequarters.nomargin {  }

.overview {
	padding: 40px;
	}
#page_home .overview { text-align: center; }
.title { font-size: 60px; line-height: 52px; color: var(--red); }
.subtitle { font-size: 28px; line-height: 28px; color: var(--blue); }

/* OVERVIEW */

.overview {  } /* in case we need to clear something or add a margin */
.title {  }
.subtitle {  }
.description {  }
.description h1, .description h2, .description h3, .description h4, .description h5, .description h6 { margin-top: .85em; }
.pic_full, .pic_half { display: block; width: 100%; clear: both; }
.pic_full { margin: 10px 0px; }

/* OVERVIEW PICS */

.pic_box {
	width: 100%;
	display: block;
	margin: 10px 0px 0px 0px;
	overflow: hidden;
	position: relative;
	}
.youtube {
	width: 100%;
	height: calc((100vw - 80px) * .6667);
	}
.pic {
	max-width: 100%;
	}
.caption {
	text-align: center;
	padding: 8px 0px 4px 0px;
	font-style: italic;
	color: #a0a0a0;
	}

/* OVERVIEW MULTI-PIC GALLERY */

.gallery {
	margin: 15px 0px 15px 0px;
	overflow: auto;
	}
.gallery_main {
	width: 100%;
	height: calc((100vw - 80px) * .6667);
	background-size: cover;
	background-position: center center;
	position: relative;
	clear: both;
	}
.gallery_thumb {
	width: 50%;
	height: calc(((100vw - 80px) / 2) * .6667);
	background-size: cover;
	background-position: center center;
	float: left;
	position: relative;
	}
.gallery_main img, .gallery_thumb img { display: none; }
.gallery_count {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: rgba(var(--red-rgb),0.75);
	font: normal normal 700 28px/28px "Roboto", Arial, Helvetica, sans-serif;
	color: #FFF;
	transition: 0.4s;
	}
.gallery_count:hover { background-color: rgba(var(--blue-rgb),0.75); transition: 0.4s; }

.video { margin-bottom: 10px; }

.zoom { width: 40px; height: 40px; position: absolute; right: 15px; bottom: 15px; z-index: 8888; background: transparent url("/css/images/icon_zoom.svg") no-repeat center center; background-size: contain; opacity: 0%; transition: 0.4s; }
.gallery_thumb .zoom { width: 20px; height: 20px; }
.gallery_main:hover .zoom, .gallery_thumb:hover .zoom { opacity: 50%; transition: 0.4s; }

/* BROWSE RECORDS */

.browse_records {  }
.browse_records a { text-decoration: none !important; color: inherit !important; }
.browse_text { padding: 10px 20px 20px 20px; clear: both; }

/* BROWSE EVENTS */

.events_wrapper { background-color: #EEE; padding: 0px 0px 20px 0px; }
.browse_events { padding: 0px 20px; }
.browse_event {
	background-color: #FFF;
	margin-top: 20px;
	border-radius: 4px;
	}
.browse_event .mbc {
	border-radius: 4px 4px 0px 0px;
	}

.browse_date {
	color: #999;
	}
.browse_description {
	font-size: 16px;
	line-height: 24px;
	margin-top: 6px;
	}

.includes { font-size: 16px; line-height: 20px; margin-top: .75em; }
.inc_label { display: block; color: var(--blue); }
.include {
	display: inline-block;
	width: 50%;
	padding-left: 26px;
	background: transparent url() no-repeat left center;
	background-size: contain;
	margin-top: 5px;
	}

.browse_price { 
	padding: 13px 20px 10px 20px; 
	clear: both;  
	background-color: rgba(var(--blue-rgb),0.25); 
	transition: 0.4s; 
	text-align: center;
	}
.price_label {
	font-size: 12px;
	}
.price {
	font-size: 28px;
	line-height: 28px;
	}
.price2 {
	margin-top: 4px;
	}
.browse_more { 
	padding: 13px 20px 10px 20px; 
	clear: both; 
	border-radius: 0px 0px 4px 4px; 
	background-color: rgba(var(--blue-rgb),0.75);  
	text-align: center;
	color: #FFF;
	transition: 0.4s;
	letter-spacing: 0px;
	}
.browse_event:hover .browse_more {
	background-color: rgba(var(--blue-rgb),1);
	transition: 0.4s;
	letter-spacing: 5px;
	}

/* BREADCRUMBS */

.breadcrumbs a { color: var(--blue); text-decoration: none; }
.breadcrumbs .divider { color: rgba(var(--blue-rgb),0.3); padding: 0px 10px; }
.breadcrumbs { margin-bottom: 10px; }

/* SUBCAT BUTTONS FOR SCUBA PAGE */

.subcat {
	padding: 0px 20px 20px 20px;
	}
.scr {
	background-color: rgba(var(--blue-rgb),0.75);
	border-radius: 4px;
	color: #FFF;
	transition: 0.4s;
	line-height: 20px;
	}
.scr:hover {
	background-color: rgba(var(--blue-rgb),1);
	transition: 0.4s;
	}
.scr .mbc {
	text-align: center;
	padding: 0px 20px;
	}
.nbp {
	padding-bottom: 0px;
	}

/* RECORDS */

h3.includes_header {
	font: normal normal 700 22px/34px "Roboto", Arial, Helvetica, sans-serif; 
	color: var(--blue);
	}

/* NEW INCLUDES */

.test {
	text-align: center;
	}
.icon_set {
	display: inline-block;
	margin: 10px 15px;
	text-align: center;
	}
.icon {
	width: 40px;
	display: block;
	margin: 0px auto;
	opacity: 35%;
	}
.icon_label {
	color: rgba(0,0,0,0.35);
	text-align: center;
	font-size: 14px;
	}

/* FOOTER */

/* Padding matches footer height. This container JUST makes room for footer. */
.content_wrapper { padding-bottom: 264px; }
.footer_wrapper, .footer { height: 264px; } 
.footer_wrapper { margin-top: -264px; background: #00465d url() no-repeat center top; z-index: 8888; }
.footer {  
	color: #FFF;
	}
.footer_text {
	position: absolute;
	width: 100%;
	top: 0px;
	text-align: center;
	font-size: 16px;
	line-height: 28px;
	}
.footer_text .company {
	font-family: "Medula One",Arial,Helvetica,sans-serif;
	font-size: 38px;
	line-height: 38px;
	font-weight: 400;
	}
.footer_text .address { padding-top: 3px; }
.footer_text .contact {  }
.footer_text .contact .divider { padding: 0px 10px; }
.footer a, .footer_social a { text-decoration: none !important; color: inherit !important; }

.fineprint {
	position: absolute;
	width: 100%;
	bottom: 15px;
	text-align: center;
	font-size: 10px;
	line-height: 16px;
	}
.legal_links {
	text-transform: uppercase;
	}
.legal_links .divider {
	padding: 0px 10px;
	}
	
/* ICONS */

.footer_social { text-align: center; margin: 30px 0px; }
.fa_icon, .fa_social {  }
.fa_icon::before, .fa_social::before { /* For all Font Awesome icons */
	font-family: "Font Awesome 5 Free";
	font-weight: 900; /* 900 is solid, 400 is outline/regular */
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	margin-left: 8px;
	margin-right: 8px;
	transition: 0.4s;
	}
.fa_social::before {
	font-family: "Font Awesome 5 Brands";
	font-size: 28px;
	line-height: 28px;
	color: rgba(255,255,255,0.5);
	margin-left: 1em;
	}
.fa_social:hover::before { color: rgba(255,255,255,1); transition: 0.4s; }
.facebook::before { content: "\f39e"; } /* normal: f39e, square: f082, circle: f09a */
.twitter::before { content: "\f099"; } /* normal: f099, square: f081 */
.youtube::before { content: "\f167"; } /* normal: f167, square: f431 */
.instagram::before { content: "\f16d"; } /* normal: f16d, square: e055 */
.pinterest::before { content: "\f231"; } /* normal: f231, square: f0d3, circle: f0d2 */
.linkedin::before { content: "\f0e1"; } /* normal: f0e1, square: f08c */
.call_text::before { content: "\f3cd"; margin-right: 10px; } /* left: f095, right: f879, square left: f098, square right: f87b, mobile: f3cd, mob solid: f10b */

/* CALENDAR */
    
.google_calendar { border: 0px none transparent; width: calc(100% * 1); min-height: 320px; }

/* GLOBAL OVERRIDES - MOVEME consider moving to main_bottom.css */

.nobreak { white-space: nowrap; }
.hideme { visibility: hidden; display: none; }
.tp { padding-top: 10px; }
.tm { margin-top: 10px; }
.l_only { display: none; }

@media only screen and (max-width: 375px) { /* Handle old iPhones */

.masthead_wrapper, .masthead { height: 122px; }
.masthead_logo {
	width: 218px;
	height: 137px;
	left: 50%;
	margin-left: -109px;
	margin-left: -145px;
	top: 8px;
	}

}

/* HIDE ON MOBILE @ 719px OR LESS */

@media only screen and (max-width: 719px) { 
	.m_hide { display: none !important; visibility: hidden !important; }
	.telephone { display: block; }
	.contact .divider { display: none; }
	.feat.m10 .mb { width: calc(100% - 20px) !important; padding-bottom: calc((100% - 20px) * .5625) !important; }
	.upcoming.m10 .mb { width: calc(100% - 20px) !important; padding-bottom: calc((100% - 20px) * .5625) !important; }
	.banner.m10 .mban { padding-bottom: calc(100% - 20px) !important; }
	.browse_event .mb { width: 100% !important; padding-bottom: calc(100% * .5) !important; }
	.scr { width: calc(100% - 40px) !important; padding-bottom: calc(calc(100% - 40px) * .1667) !important; }
	}