/* note: #007295 is logo blue */

a { 					/* disable green hyperlinks, was #1ABC9C; */
	color: black;
}

a:link {
  /* text-decoration: underline !important; */ /* give all hyperlinks an underline. this is disbled below for menus */

}

a:hover {
  color: 1ABC9C; 
}

body {
	font-size: 16px;	  	/* override default font size */
	
	color: black;		  	/* override default font color */
	
	font-family: verdana;	/* override default font */
	
}

p {
	font-size: 16px;		/* override default font size */
	color: black;		 	/* override default font color */
	font-family: verdana;	/* override default font */
}





#primary-menu-trigger { 	/* set hamburger size. Works for pop down menu, not pop-from-the-left menu because pop-from-the-left does not use primary-menu-trigger */
		left: auto;
		
		right: 0;			/* make hamburger appear on right side instead of default left */
		
		font-size: 30px;	/* hamburger size */
		
		top: 25px;			/* hamburger vertical centering, pixels from top */
		
		color: #666;		/* make hamburger gray */
}

#primary-menu ul {

	margin: 19px; 	/* default 0; this is the padding above the top menu. 0 actually means about 30 pixel padding */
					/* 19px makes it vertically centered when the header is 120 pixels high */
}

#primary-menu ul li > a {
	

	line-height: 7px;   	/* default: 22px, this is the vertical spacing of the dropdown menu items. It obnoxiously too tall */

	padding: 39px 25px ; 	  	/* default: 39px 15px, 39  is vertical width of the menu, 15 is horizontal spacing between top line menu items */
							/* FYI: This overrides auto verical centering. If top menu white space is increased, menu won't be vertically centered */

	xxxxxxxfont-size: 18px;		/* default: 13px; this is the font size of the top horizontal menu, not the dropdown menu */
								/* xxxx disabled when switching to green background */

}

#primary-menu ul ul:not(.mega-menu-column),
#primary-menu ul li .mega-menu-content {
	width: 425px; 								/* default: 220px; This is width of all sub-menus. I increased the value to stop them from wrapping text */
	/* sb museum of nat history was the biggest problem, needed at least 425 */
	border-top: 2px solid #1ABC9C  !important; 	/* default: white. color and thickness of line at top of dropdown menu */
												/* you need the "!important;" or top line won't appear */
	padding-bottom: 8px;
}

#primary-menu ul ul li:hover > a {
	background-color: #f9f9f9 !important;	/* very-light-gray background hover in dropdown menus. "!important;" is required for this to overide interior-design.css */
	padding-left: 8px;						/* default 18px, removed weird big shift to the right when hovering over dropdown menu items, passing value of 7 removes all shift */
											/* that weird shift is created by the second padding value in "primary-menu ul li > a" */
											/* this padding number must match above padding number exactly to correct it */
}

#primary-menu ul li:hover > a,		/* this section is the top menu and dropdown menu hover color, without it the hover defaults to green */
#primary-menu ul ul li:hover > a,
#primary-menu ul li.current > a {
	color: #1ABC9C;					/* default #1ABC9C */
	font-weight: 500;				/* this line did not exist, added it so that hover bolden menu items, can't go above 500 or it shifts menu on hover because bold is so thick */
} 

#primary-menu ul ul li > a {
	font-size: 18px !important;			/* default 12px; this is the font size of the dropdown menu itself, not the top line menu */
	text-decoration: none !important;	/* turn off underlines for dropdown menus because I turned underlines on for hyperlinks */
	color: #666; 						/* default: #666, this is the color of the text in the dropdown menu, not the top menu */
}

/* required for long dropdown menus to scroll if they go below browser */
/* must be disabled for megamenu style to make scroll bars go away */
#xxxxxxxxxprimary-menu ul ul { 
    overflow-y: scroll;
    max-height: 80vh; /* recommended was 90vh, 80 seemed better */
}

.feature-box.media-box.fbox-bg,
.fbox-media-four-corners-rounded img {	/* created new class fbox-media-four-corners-rounded for photos (like panos) that need all corners rounded not just the top corners) */
	border-radius: 6px; 
} 

.slider-caption,
.flex-caption {
	max-width: 1000px; 		/* modified, default 550px; was too limiting for slider caption length, real long ones might wrap */
}



/* Primary Menu - Style 3  NOTE: only works when using style 3, and overrides menu settings above
                           this is only for top menu, not for dropdown
						   xxx disabled to get green background on top menu
						   xxx when enabled you get just font color hover effect
-----------------------------------------------------------------*/

#xxxxxxxprimary-menu.style-3 > ul > li > a {

	margin: 28px 0;
	padding-top: 11px;
	padding-bottom: 11px;
	border-radius: 2px;
	text-decoration: none !important;
	color: #666;
}

#xxxxxxxprimary-menu.style-3 > ul > li:hover > a {
	color: #1ABC9C;  			/* hover text color for top menu, was #444 */
	background-color: white;	/* hover color for top menu, not dropdown menu, tried #F0F0F0 */
	font-weight: 500;			/* bold the top menu when hovering */
}

#xxxxxxxxprimary-menu.style-3 > ul > li.current > a {
	color: #1ABC9C; 			/* default: #FFF The letters on the top menu were white because the background was green */
	text-shadow: none; 			/* default: 1px 1px 1px rgba(0,0,0,0.2); disabled this because shadow made it look fuzzy */
	background-color: white; */ /* was #1ABC9C green, changed to F0F0F0 gray; but nuked because I don't want a green block over top menu item */
	text-decoration: none !important;
}


/**********************************************************/
/********************* mobile-only ************************/
/**********************************************************/

.sbgreen /* mainly used to differentiate hyperlinks */
{
	color: #1ABC9C;
}



.things-to-do /* JD new class created */
{
	background-color: white;
	padding:25px 0;
	text-align:center;
}

.things-to-do img { /* JD - becare here. if you create an error here, this code won't run and the icons will balloon up way beyond 50px */
	max-width:150px;
	height:auto;
}

.things-to-do h2 {
	font-size:30px;  
	font-weight:450; /* jd modiy, default 300; for "things to do" line */
	margin:0 0 25px;
}

.things-to-do h3 {
	font-size:18px;  /* jd modiy, default 15px;  for name below each icon */
	letter-spacing:-.02em;
	font-weight:550; /* jd modiy, default 600;  for name below each icon */
}

.things-to-do a {
	outline:0;
	text-decoration: none !important;	/* turn off underlines for hyperlinks */

}

/******************* portfolio *******************/
/* this overrides style.css. It is needed for portfolio to allow media box to expand and not be cropped: */
/*************************************************/


.portfolio-full .portfolio-item { overflow: visible !important; }

.grid-container {	
	position: relative;	
	overflow: visible;
}

/* logo style font */

.logo-font { /* JD custom font to match logo */
	font-family: 'Venetian301BTWXX-Roman', serif !important; 

} 

/*** override page title padding which is too big.       ***/
/*** The page title class is used for all destination    ***/
/*** pages like east beach page, stearns wharf page, etc ***/
/*** plus having them upper case was annoying */

#page-title {
	padding: 30px 0; /* default: 50px 0; */
	background-color: #e2eff3; /* force page title gray background to be the same gray as portfolio background eef2f5 then blueish gray e8edf4*/
}


#page-title h1 {
	text-transform: none; /* default: uppercase */
}

/*****************************/



/* the top and bottom margins for page content descriptions was too huge */
/* this is set to be the same px as the page-title padding override above */

.content-wrap {
	padding: 30px 0; /* default: 80px 0; */
}



/***** JD sidebar changes to STYLE.CSS *******/

/* Had to make changes to style.css in just this one instance */
/* .sidebar { width: 29%; }  JD modified: default 22% */
/* .postcontent { width: 67%; }  JD modified: default 74% */




/***************************************************************/
/* nearby related code */


.nearby-list {
	position: relative;
	width: 100%;
	display: -webkit-flex;
	display: flex; 
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	align-self: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 15px 0;
}


/****  .nearby-list [class*=nearby-] { align-self: center; }    center text vertically relative to image, decided to not use this */


.nearby-list .nearby-image { 
	max-width: 30%; 
}  /* side of sidebar photo */


.nearby-list .nearby-image img { 
	padding: 0 10px; 
}

.nearby-list .nearby-name a {
	color: rgba(255, 255, 255, 1.0);
	font-weight: 400;
	font-size: 16px;
	text-transform: capitalize;
	text-decoration: none !important;
}

.nearby-list .nearby-name span {
	display: block;
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.6);
}

/* *********  filter item bar on dining guide ********* */

.portfolio-filter li a {
	font-size: 16px; /* default 13px; too small */
}


/* *********  make the gray background of displayBoxes darker gray ********* */
/* decided to not  go with darker gray and use the default f9f9f9*/
.xxxxxxxxxxentry {
	background-color: #e9e9e9 !important; /* default #f9f9f9; (no important) */
}

/* *********  I switched to all portfolios to container-fluid instead of just container ********* */
/* This was mobile margins were too wide, so this made them small - perfect. Adding this lets
me override the defaults and make the margins exactly what I want. default was 15px for both */

/* I added x to fluid to disable override for now */

.container-xfluid {
  padding-right: 5px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* used for /movies page to make iframe responsive */

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.iframe-container iframe {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* end iframes */

/* photo size for displayboxtab */

.small-thumbs .entry-image,
.ievent .entry-image {
	float: left;
	width: 400px; /* default 300*/
	margin: 0 30px 0 0;
}
/* end displayboxtab */

/* entry-image of 400px is too big on mobile when used with displayBoxTabDiningAccordion, runs off the right side of the screen*/
/* so in displayBoxTabDiningAccordion, entry-image is used for desktop and entry-image-mobile (300px) is used for mobile*/
.entry-image-mobile,
.entry-image-mobile {
	float: left;
	width: 300px;
	margin: 0 30px 0 0;
}
/* end displayboxtab */



/* footer override, default of 80px is too tall */

#footer .footer-widgets-wrap {
	position: relative;
	padding: 20px 0;
}

/* not using this. toggle in dining guide, default text color is too gray, this makes it black */
/* ended up not using toggle at all, used accordion instead */

.toggle .togglec {

	color: #000000; /* default #444; */
	margin: 0 0 0 0; /* default 0 0 20px 0; */

}

/* toggle in dining guide, default padding was so huge it messaged up photos on mobile */
/* ended up not using toggle at all, used accordion-border instead */

.toggle.toggle-border .togglec { padding: 0 0 0 0; } /* default 0 15px 15px 36px; */

/* accordion in dining guide, default padding was so huge it messaged up photos on mobile */
/* not using accordion-border, using accordion-border instead */

.accordion.accordion-border .acc_content { padding: 0 0 0 0 } /*  0 15px 15px 36px; */
.accordion {  background-color:#f9f9f9;} /* added gray background lighter than entry box gray, not used */


/* container-fluid makes pages gor full width which helps mobile. But unfornuately full width on desktop looks weird. Just too wide. */
/* I use contain-fluid (instead of just container) on home page, attractions, places of worship, dining, and a few more places *
/* where I need minimal margins on mobile */
/* The code below turns off contain-fluid for desktop so that margins stay within a container but on mobile margins go to edge of phone screen */

@media (min-width: 1200px) {
	.container-fluid 
	{
	width: 1170px;
	}
}

/* make menu font larger for various sized mobile devices and increase line space */
/* home, hotels, restaurants, wineries, attractions, community  */

.device-md #primary-menu ul li a {
    font-size: 30px;
	line-height: 1.0; 
}

.device-sm #primary-menu ul li a {
    font-size: 30px;
	line-height: 1.0;
}

.device-xs #primary-menu ul li a {
    font-size: 30px;
	line-height: 1.0;
}

/* sticky footer, chose to not use this */

/* #footer {
    position: fixed;
    width: 100%;
    top: auto;
    bottom: 0;
}
*/

/* change color of tabs text to a slightly darker shade of gray, was too light on phones */

.portfolio-filter li a {

	color: #555; /* default: #666; */
}

/* needed to set MOBILE header height */
/* if screen is no larger than 991 pixels wide, this code sets the header height */

@media (max-width: 991px) {
    #logo,
    #logo img {
        height: 150px; /* 150px mobile height  is set here. 120px non-mobile height is set below */
    }

    #primary-menu-trigger { /* this makes the hamburger near the top which I like better than vertically aligned in the middle */
        top: 5px;
    }
}

/* all this code is needed to change default height of header to 120px */

@media (min-width: 992px) {

	#header.transparent-header + #slider,
	#header.transparent-header + #page-title.page-title-parallax,
	#header.transparent-header + #google-map,
	#slider + #header.transparent-header {
		top: -120px;
		margin-bottom: -120px;
	}

	#header.transparent-header.floating-header + #slider,
	#header.transparent-header.floating-header + #google-map {
		top: -180px;
		margin-bottom: -180px;
	}

	#header.transparent-header + #page-title.page-title-parallax .container { padding-top: 120px; }

	#xxxprimary-menu ul li > a {
		padding-top: 49px;
		padding-bottom: 49px;
	}

	#top-search,
	#top-cart,
	#side-panel-trigger {
		margin-top: 50px;
		margin-bottom: 50px;
	}

	#top-cart .top-cart-content { top: 80px; }

	#header,
	#header-wrap,
	#logo img { height: 180px; } /* this is the header height */

	#header.sticky-header:not(.static-sticky),
	#header.sticky-header:not(.static-sticky) #header-wrap,
	#header.sticky-header:not(.static-sticky):not(.sticky-style-2):not(.sticky-style-3) #logo img { height: 60px; }

	#header.sticky-header:not(.static-sticky) #primary-menu > ul > li > a {
		padding-top: 29px;
		padding-bottom: 19px;
	}

	#header.sticky-header:not(.static-sticky) #top-search,
	#header.sticky-header:not(.static-sticky) #top-cart,
	#header.sticky-header:not(.static-sticky) #side-panel-trigger {
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	}

	#header.sticky-header:not(.static-sticky) #top-cart .top-cart-content,
	#header.sticky-header:not(.static-sticky) #primary-menu.sub-title.style-2 > div #top-cart .top-cart-content { top: 40px; }

}

/* end of code needed to change default heigh of header */