@font-face { font-family: Gothic-Lite; src: url("./fonts/Goth720l.ttf");}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	overflow-x : hidden; /* mitigates occasional horizontal scrollbars appearing */
	margin: 0 auto;
	padding: 0;
	text-align: left;
	font-family: Gothic-Lite;
	color: #333;
	background: #fff;
	background-size: 100%;
	}

/* 	SITE color scheme - in the pertinent divs, add these classes instead of 
	baking specific values into the div IDs - this way by changing one CSS line, 
	you can update an entire site color scheme. I'm using CAPS bs these are CONSTANTS
*/

p {font-size : 1.4em;color: black; line-height: 1.4em;}
h5 {font-size: 1.5em;color:#558;font-weight: bold; padding:0px; margin:0px;}

/* zones relating to site globals - always hidden by default */
h1, h2, h3 {font-size : 1.4em; font-weight:bold; color:#558; display:none;}
#BANNER-CONTAINER{display:none;}
#BREADCRUMBS { padding-bottom:10px; font-size:0.9em; display:none;} /* ###!!! locator function generally not needed to be seen */
#NEXTPAGE {display:none;} 
#SUBNAV {display:none;} /* shows submenu under content, turned on by default in globals */
#POST-CONTENT {display:none;}
#SEARCHBOX {display:none;} 
#FOOTER {display:none;} 
#BOTTOM-MENU {display:none;} 
#GO-TO-TOP {display:none;} 
#LOGIN {display:none;}
#SOCIAL-ICONS-CONTAINER{display:none;}
#SOCIAL-ICONS-CONTAINER-MOBILE{display:none;}



#CONTENT-CONTAINER { 
	display : none; /* keeps all invisible until ready for presentation, then the js turns it back on */
	margin:0 auto;
	background-COLOR: inherited; /* from body*/
	background-size: contain;
	text-align:left;
	padding-top:0em;
	opacity:0.9;
	}

#CONTENT {
	font-size: 1em;
	padding: 70px;
	margin: 0 auto;
	padding-top: 0px;
	background-color:#FFF; 	/* ###!!! use inherited to allow the overall window bkgd color to show thru */
}


#CONTENT a:link {text-decoration:underline; color:#666;}
#CONTENT a:hover { color:gray; }
#CONTENT ul li { font-size:1.3em; line-height:1.6;}
#CONTENT ol li { font-size:1.3em; line-height:1.6;}
#CONTENT img {display:inline-block;} /* back to default display b/c block style makes centering impossible */


#LOGIN {font-family:sans-serif; font-size:.8em;}
#LOGIN a:link { color:#ccc; }
.doc, .docs, .sdoc, .sdocs { cursor: pointer;} /* so when you hover you get a finger pointer cursor */

/* UTILITY CLASSES */
.centered {text-align:center; margin:0 auto;}
.row { width: 100%; display:block; padding:0; margin:0;}
.hidden {display:none;}
.youtube {padding:0px;margin:0px;} 
.slideshow img {width:100%;} /* so that slideshow images fill their container */
.small-italic{font-size:0.8em;font-family:arial; font-style:italic; font-weight:normal}
.sparse {margin:0; padding:0;}

.title {height:3em; font-weight:bold; font-size:1.1em; line-height:1.3em; padding-bottom:10px;}

/* add this class to any image that you intend to make a clickable link */
.btn-img {   
	transition: 0.2s ease;
	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
	}

a  .btn-img {text-decoration:none;}
	
.btn-img:hover { /* when you hover it shrinks a bit*/
	transform: scale(0.98, 0.98);
	}
	

/* threeup is like the bootstrap style where you see three team members in a row with an image and credential, then on mobile, 
 they all stack vertically */
 
.threeup {
	background: inherited; 
	width:30%;
	font-size: 1em;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	margin: 0 auto;
	padding:10px;
	line-height: 1.5em;
}
.threeup img { width:100%; height:auto;}

.twoup {
	background: inherited; 
	width:48%;
	font-size: 1em;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	margin: 0 auto;
	padding:10px;
}
.twoup img { width:100%; height:auto;}

/******************************************************************/
/******************** NAVIGATION **********************************/
/******************************************************************/

/* BROWSER nav-menu height - search #NAV ul li and set the padding (eg 50px 20px 50px 20px )*/

.nav-menu { /* CLASS for the containing div that holds the entire nav system */
	font-weight: bold;
	font-size: 1em; /* size of menu items text - browser */
	background-color: #e9e9e9; /* nav menu bkgd and text color */
	color: #FFF;
	opacity: 0.95; 
	
	/* 	the following two settings force the popdown menu to stay above any slideshows - 
		you MUST use position:relative OR position:absolute in order to gain access to z-index
		ie without position explicitly set, z-index does NOTHING */
	position: relative;
	z-index:100;
	} /* nav menu bkgd and text color */

.nav-menu ul li:hover, #SUBMENU li:hover {
	background-color: #87aeb9; 		/* BOX color on hover */
	font-weight:bold;
	color: #fff; 				/* text color on hover */ 
	/* the following settings cause the highlighting on menu items to fade in */
	-webkit-transition: background-color 0.3s;
	transition : background-color 0.3s;
	} 

/* the box that you click to pop open the mobile menu */
.mobile-nav-menu {
	color: white; 
	font-weight: normal; 
	} 

/* to remove submenus from the nav menu (but still have them show up on the in-page submenu) - display:none */
/* keep in mind if the sub-pages are hidden with #CMSIMPLE HIDE# they will still NOT show up in the submenu */
.menulevel3, .menulevel2  { display:none; }

/* box to hold social icons */
#SOCIAL-ICONS-CONTAINER { display: none; }
#SOCIAL-ICONS p {display:inline; }
#SOCIAL-ICONS a img  { max-width:40px; filter: grayscale(60%); padding: 0px 5px 0px 0px}	
#SOCIAL-ICONS a img:hover  { opacity:1.0; filter: grayscale(0%);}

#SOCIAL-ICONS #CONTACT-US-POPUP img {max-width: 180px;position:relative;left:-20px;top: -5px;}



/* defining a browser pop up menu */

#SUBCONTAINER { /* container div that holds the popdown submenu */
	display: none;
	background-color: #c3c3c3; /* background color of the entire popdown submenu */
	position: absolute;
	min-width: 200px;
	max-width: 500px;
	/*  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.4);  	###!!! optional shadow under the popdown menu */
	font-size: 0.9em;
}

#SUBMENU { /* div containing the popdown menu items themselves */
	height:100%;
	background-color: #c3c3c3;
	color: white;
	font-size: 1em;
	text-align: left; /* alignment of popdown menu items */
	font-weight: bold;
	list-style:none;
	display:block; 			/* ###!!! change to display:none to GET RID OF POPDOWN MENUS */
}

/* the padding around normal browser menu popdown menu items - makes the popdown menu feel a bit more 'air' around the items */
#SUBMENU li {	padding: 12px 40px 24px 20px;} /* last item is left padding - needed if text-align (above) is left but not if center */

/* stylin' the submenu that appears on the content page */

	/* /scripts/misc-functionality.js includes proc to change the submenu label to whatever you want */
	h4 { margin-bottom:0px;}
	
	/* uncomment the following line if you do NOT want ANY submenu appearing under the content area */
	/* .submenu {display:none;} */ 
	.submenu { font-size: .85em; list-style: none; line-height:2em; }
	.submenu a:hover { text-decoration:underline;}
	
.nav-menu a {
	text-decoration: none; /* gets rid of underlines on links in the nav menu*/
	color: inherit; /* so it simply picks up color from bkgd */
	/* vertical-align: middle; */
} 

.fixed { /* add this to the navmenu's class to make it static fixed position instead of scrolling */
	position:fixed;
	width:100%;
	z-index:10;
	}
		
#NAV ul { /* deals with the overall box that CONTAINS the standard nav menu*/
	overflow: hidden;
	padding: 0;
	text-align: center; /* left/right/center determines the alignment of the horz nav menu */
	padding-right: 0px;
	padding-left: 0px; /* keeps it from bumping into a graphic in the non-mobile menu */
	margin: 0;
	color:black;
	}
	
#NAV ul li { /* deals with individual nav menu items */
	max-width: 200px;		/* width limit of individual menu items - if they are too long, they wrap to multiple lines */
	height: 126px; 			/* overall nav area height - adjust to accomodate varying menu item lengths */
	display: inline-block; 	/* kind of like float left but better */
	padding: 56px 20px 0px 20px; /* Top, Right, Bottom, Left - menu 'thickness' - a single value for a ll four gives sketchy results */
	vertical-align: text-top; /* keeps it from looking stupid if the menus have widely varying lengths */
}


/* special menu styles for the menu at the BOTTOM of the site */
#BOTTOM-MENU > ul { margin-left:-39px; margin-top:40px; }
#BOTTOM-MENU  .doc, 
#BOTTOM-MENU .docs, 
#BOTTOM-MENU .sdoc, 
#BOTTOM-MENU .sdocs { 
	cursor: pointer; 
	display : inline; 
	padding-right: 10px; 
	font-family: arial;
	font-size: 0.9em; 
	font-weight:normal;
	}

#BOTTOM-MENU a {color:grey;}
#PAYMENT {text-align:center;}
#PAYMENT img { width : 120px;}
/*************************************************/
/* MEDIA QUERIES */
/*************************************************/

/* FULL SIZE BROWSER */
@media screen and (min-width: 1280px)
{
	#CONTENT { width:1200px; background-color:inherited; padding-top:20px;}
	#NAV-ICON { position:absolute;left: 0%;top: 50%;width: 176px;transform: translate(0, -50%);box-shadow: 5px 5px 5px #5550;}
	#MOBILE-MENU-TITLE {display:none;} /* otherwise text menu label shows up in full size browser */
	.wrap-img {float: left; padding-right :30px; padding-bottom : 30px; } /* palced here b/c if it's mobile the img would be full width */

	#SOCIAL-ICONS-CONTAINER {
	position: absolute;
	top: 40px;
	width: 240px;
	padding: 0px 0px 0px 0px;
	z-index:200;
	right: -0vw; /* the right will be 1% of the viewport size :. 1200px becomes flushed right minus 120px */
	}
	
	#BBB {
	position: absolute;
    left: 200px;
    top:8px;
	z-index:200;
	}
}

/* SMALLER SCREEN (TABLETS ETC) */
@media screen and (max-width: 1280px){ /* normally 768px, in this case might as well go mobile one the menu would collapse to 2 rows */

	/*#BOTTOM-MENU .doc, .docs, .sdoc, .sdocs {}*/
	#BOTTOM-MENU {font-size:.7em;}
	#BREADCRUMBS {display:none;}
	

	/* MOBILE MENU */
	#MENU-BUTTON { /* the mobile menu header */
		width: 100%;
		text-align: center; /* alternatively make it left ... */
		box-sizing: border-box;
		padding: 15px 15px;
		cursor: pointer;
		display: none;
	}
	
	#MOBILE-MENU-LINES { 
	width:34px;
	height:22px;
	position:absolute;
	left: calc(100vw - 50px);
	top: 16px;
	overflow:hidden;
	text-align:right;
	background : url("./../../userfiles/images/hamburger.png");
	}

	p { 	font-size:1.4em;line-height: 1.2em;}
	
	#NAV { height:60px;}
		
	#NAV ul { /* causes menu to be hidden until clicking the menu button */
		max-height: 0;
		padding-right:0px; /* compensates for padding-right:15px in browser menu */
		padding-left: 0px; /* change to 60px-ish if you're including an icon in the mobile menu */
		background: #c3c3c3; /* bkgd color of the box containing the mobile pop out menu */
	}
	
	#NAV ul li {
		box-sizing: border-box; /* without this each box would add the padding we have in the large screen nav */
		max-width:100%;
		width: 100%; 			/* counteracts the (presumably) fixed width in browser */
		height:100%;
		padding: 15px 10px 15px 10px;
		margin: 0px 0px 0px 0px;
		text-align: center; /* text alignment of mobile menu items */
		display: block;
		font-size:1.2em;
	}
	
	#MENU-BUTTON {
		display: block;
		text-align:center;
		padding-left:0px;
	}
	
	/* makes the icon smaller for mobile */
	#NAV-ICON {
		position:
		absolute;
		left: -1px;
		top: -1px;
		width: 84px;
		}
		
	#SUBCONTAINER, #SUBMENU {
	/* the popdown menu should not show at all on mobile - later mod to make the menu expand to show
		this would require total restyling so the sub menu is in line with other menu items */
		display : none;
	}
	
	#CONTENT {padding:15px 40px 40px 40px;}
	#CONTENT img, #BANNER img {max-width:100%;height: auto;}
	#CONTENT ul { margin-left:-20px; }
	#CONTENT ul li { font-size:1.2em; line-height:1.6em; }
	
	/* it simply makes no sense to have pop ups in a mobile menu */
	.menulevel2, .menulevel3 { display: none; }
	
	.threeup, .twoup  { width:100%;} /* makes threeups stack in mobile */
	.LOGIN { display:none; } /* you cannot log in thru mobile */
	
	#SOCIAL-ICONS-CONTAINER {
		position: relative;
		width:  100%;
		z-index:200;
		text-align:center;
		margin: 0 auto;
		}
	#SOCIAL-ICONS a img  { max-width:20%; }
	#CONTACT-US-POPUP { padding:0px;}
	#SOCIAL-ICONS #CONTACT-US-POPUP img { max-width: 80%; left:0px; top:0px;}
	#BBB {
		position: relative;
		margin: 0px;
		padding:0px;
		margin-left : calc((100vw - 12vw)/2);
		padding-bottom:40px;
	}
}

/* Style labels and input fields */
label {
	
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}
input { font-size: 1em; font-weight:normal; }
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Style checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    margin-right: 5px;
    float: left;
    margin-top: 3px;
}

/* STyles for the mailform*/
/* Clear the float to prevent other elements from floating around them */
/* Reset styles for radio buttons and checkboxes */
input[type="radio"],
input[type="checkbox"] {
    margin-right: 5px;
    float: left;
    clear: none;
}


/* Style submit button */
input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

/* Style the CAPTCHA message */
#captchaValue {
    font-weight: bold;
}

/* Add any additional styles as needed */

input[type="checkbox"],
input[type="radio"] {
    margin-right: 5px;
}

/* Style submit button */
input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

/* Style the CAPTCHA message */
#captchaValue {
    font-weight: bold;
}

/* Add any additional styles as needed */