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

	Mobile Adaptive Device Responsive (MADR or MAD Responsive) CSS 
	Version 1.0

	A Cloud Mountain Marketing Development  
	Designed and developed by Haniel Hann.  
	Copyright 2018

	MAD Responsive CSS is designed for 3 platforms: 	smartphone 
														tablet
														desktop

	Adding to standard CSS Techniques, MAD Responsive CSS is organized into 4 Sections:
			Section 1 - Site Wide defintions
			Section 2 - Design Layout (container divs)
			Section 3 - Navigation
			Section 4 - Platform specific definitions

	MAD Responsive CSS is also designed as a themeable (skinable) multi-CSS file structure.  
		The MAD Responsive core CSS file contains the site structure.
		A Theme CSS file contains all the definitions to change the "skin" of a website (aka the color palette).
		A third CSS file will contain iOS high resolution images if needed.

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


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

	SECTION #1 - Site Wide definitions - All Devices

	Production Note:  All "theme" related defintions will be moved to the <Theme name>-THEME.CSS file
						Next steps:
							1. Finish Smartphone navigation.  Desktop and tablet are the same and done for this theme.
							2. Migrate theme CSS code to THEME.CSS file
							3. Make new theme based on this template (Test theme making concept of easy to build with this CSS/HTML template)
							4. Tackle Accordion Navigation after new theme completed as theme variation.
							5. Where should javascript library reside?  No internet access means javascript doesn't run.

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

	/*****************************************************************
		SECTION #1.A.1 - STEP #1 (Clear default HTML definitions)

		All website designs need to start on the "same page".
		First step is to RESET all these "hidden" definitions
		that affect design.

		Reset - remove web browser default margin and 
				padding settings for these html tags 
		
	******************************************************************/

/*
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}
*/

	/**********************************************************************************************************
		SECTION #1.A.2

		MAD Responsive Reset - remove web browser default margin and padding settings for html tags that 
		you actually use.  This is simply a "minor" matter of efficiency in terms of bandwidth and browser 
		performance.  Best used with "min.css" files.

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

	body, h1, h2, h3, h4, h5, h6, ul, li, p, img, a, form, input {
		margin:0;
		padding:0;
		border: 0;
	}

	/******************************************************************************************************************************************
		SECTION #1.B - STEP #2 (Define the Design Components)
		Design Components - HTML definitions and non-Structure related classes and IDs - <links> <h tags> and <classes> et al
							These are defined before the containter divs because the container components will default to these definitions
							making these the foundation of a theme (uniform look and feel across the entire site on all devices).
					Note: 	These components may be redefined within specific container divs below. Or they may be only used within a 
							container div below in which case they can be deleted from this section for efficiency and compactness.
	*******************************************************************************************************************************************/


	a, a:visited {										
		color: #0073b0;									/* text link color for default and visited */
		text-decoration:none;							/* remove underline from link */
		font-weight: bold;
		text-decoration: underline;
		word-wrap: break-word;
	}

	a:hover, a:focus {											
		color: #00A551;									/* text link color on rollover */
	}

	h1 {
		color: #000000;
	}

	p {
		margin-bottom: 5px;
	}

	.clear-float {
		clear:both;
	}

	/******************************************************************
		Positioning Classes for Photos (Can be removed if not used)
	*******************************************************************/

	.floatRight {
		float:right;
	}

	.photo-topleft {
		float:left;
		margin:0px 20px 0px 20px;
		width:114px;
	}

	.photo-topright {
		float:right;
		margin:3px 0px 10px 25px;
	}

	.photo-full-width {
		text-align: center;
		width: 100%;
	}

	/******************************************************************
		Positioning Classes for Videos (Can be removed if not used)
	*******************************************************************/

	.video1 {
		width:100%;
	}


	/***********************************************************
		Form input styling
	************************************************************/

	input {
			background: #C2C2C2;
			color: #7db43b;
			font-size: 18px;
		padding: 4px 10px;
		margin: 4px 0;
		width: 80%;
		border: 2px solid #ddd;
	}

	input[type=text]:focus {
		border: 2px solid;
			border-color: #C2C2C2;
		outline: none;
	}

	input[type=button], input[type=submit], input[type=reset] {
			background-color: #C2C2C2;
		border-radius: 16px;
		color: #fff;
		padding: 6px 20px;
		text-decoration: none;
		margin: 10px 0px;
		cursor: pointer;
		width: 40%;
		font-weight: bold;
		border: 2px solid #2d6436;
	}

	input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
		color: #cccccc;
	}

		::-webkit-input-placeholder { /* Chrome/Opera/Safari */
			color: #427a4b;
		}
		::-moz-placeholder { /* Firefox 19+ */
			color: #427a4b;
		}
		:-ms-input-placeholder { /* IE 10+ */
			color: #427a4b;
		}
		:-moz-placeholder { /* Firefox 18- */
			color: #427a4b;
		}



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

	SECTION #2 - Container Structure Div design 

		Design for Smartphone first >>> Desktop last in principle and CSS coding.

		TECH NOTES:
				--> Customize for other Viewports after smartphone definitions section using @media queries.
				--> CSS syntax allows for multiple definitions with each new definition overriding the prior definition and/or
				adding to the previous definition.
					eg. padding:10px can be overwritten with padding:20px.  
					eg. text-align: center can be added to a prior definition which did not define it previously.

				CSS uses the Parent Child design concept - 
					The HTML body defnition is the outermost container for any web 
				page. It's the topmost parent to all the content on the page.
				Coding practice - 
					Start with the outermost container and work within and down

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

/*********************************************************************************
	SECTION #2.A - Container Div Smartphone and Universal defintions
					No component definitions here.
**********************************************************************************/
/***************************************************************************
		HTML body tag
			site wide definitions for
				background color
				font color
				font family
				font size
				line height
				text alignment
		TECH NOTE:
			Background image can be defined in the desktop section, but 
			do not use it in the mobile responsive sections because
			the browsers and hardware do not support it.
****************************************************************************/
body {
	background-color: #ffffff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:16px;	
	font-weight: 300;
	color:#000000;
/*		text-align: center;	
/* remove for non-centered design  */
}

/***************************************************************************
	>>> MAD Responsive Key Component <<<<
		Page container div
			is a MAD Responsive design technique allowing for a fixed
			width desktop design while having a responsive smartphone
			design.
			On the smartphone, width: 100%
			On the desktop, width: 1024px
****************************************************************************/
#page {
	background: #ffffff;
	margin:0px auto 20px;								/* center website with auto margin for left and right */
	width:100%;											/* set width of smartphone pages here. default is for 100% wide for mobile responsiveness */
}

/***************************************************************************
		Main Layout Structure (Container) Definitions - 
			At the smartphone level, these are more about how the content
			behaves within the container like padding, color, and
			text alignment as the layout structure is simply a single 
			column.
			The desktop section will have the definitions affecting 
			multi column design and will work hand-in-hand with the HTML
			code of the DIVs.  

		MAD Responsive note
			• The tablet section will be identical to the desktop section
			in regards to multi column layout.
			• We use the float box model concept:
			The order of the DIVs in the HTML document
			sets the precedence. The order of the CSS definitions do not
			affect the order in the HTML document in terms of layout
			locations using the Float Box Model concept. 
	
****************************************************************************/

/* header can be replaced by <header> in HTML5 */
.header {
	height: 74px;
	position: relative;
		color: #000000;
		 center bottom repeat-x;
}

.header2 {
	width: 100%;
	height: 210px;
		color: white;
		margin-bottom: 39px;
}

	/***************************************************************************
				#content-wrapper is intended to contain any number of column
				divs and any other content not including the header div or 
				the footer div.
				It may or may not be needed depending on the overall need
				of different site designs.  The float box model layout concept
				works without it.

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

/* content wrapper may not be needed in HTML5.  It is used here in the event that there needs to be multiple divs
between the header and the footer and a way to "contain" those divs so as to not interfere with the header and the footer */
#content-wrapper {
	
}
#slider {

}
/* column-main can probably be replaced by <main> or <section> in HTML5 */
#column-main{
	line-height: 30px;
	/* font-size defined in theme css */
	padding: 10px 30px;
	margin: 0px;
	width: 100%;
}

#column-left {
	float: left;
	margin: 30px 0 0;
	width: 100%;
}
/*  sidebar can be replaced/renamed with <aside> in HTML5 */
#sidebar {
	margin: 30px 0 0;
	float: left;
	width: 100%;
}
/*
#smartphone {
	float: left;
	width: 100%;
}
*/

/* footer can be replaced with <footer> in HTML5 */
#footer {
		background: #0073B0;
		color: #ffffff;
		font-size: 12px;
	padding: 8px 20px 30px;
	text-align: center;
	margin: 0px 0px;
	border-top: 0px solid;
}

/*********************************************************************************
	SECTION #2.B - Layout Component Definitions and Sub Layout Definitions 

		This section was created to help keep the main structure section easy 
		to navigate and manage.  Here is where any layout component definitions
		and sub-layout specific additional definitions are maintained.
**********************************************************************************/
#logo {
	float: left;
	position: absolute;
	z-index: 100000;
    top: 60%;
    left: 32%;
    transform: translate(-50%, -50%);
	width:180px;
}
#logo img{
	height: auto;
	max-height: 130px;
	width: auto;
	margin: auto;
}
#menu, #menuclose {
	width:81px;
/*
	height: 44px;
*/
	border: 3px solid #ffffff;
	background: #0073B0;
	padding: 10px;
	top: 10px;
	right: 10px;
	text-align: center;
	position: absolute;
}

#menuclose {
	display: none;
}

#menu a, #menuclose a {
	color: #ffffff;
}

#column-main h1, #column-main h2 {
}

#column-main p, #column-main ul  {
	padding: 0px 30px 12px 0px;
}

.hdr-img1 {
	background: #000000 url(../img/black-theme-butterfly-2048.jpg) no-repeat top;
	background-size: cover;
}

.hdr-img2d {
	background: #000000 url(../img/gift-shops-dinosaur-ridge-header-MED.jpg) no-repeat top;
	background-size: cover;
}

.hdr-img3 {
	/*background: #000000 url(../img/about-dino-ridge-header.jpg) no-repeat top;*/
	background-size: cover;
}

.hdr-img4 {
	background: #000000 url(../img/butterflys2-2048.jpg) no-repeat top;
	background-size: cover;
}

.hdr-img5 {
	background: #000000 url(../img/book-header.jpg) no-repeat top;
	background-size: cover;
}

#column-main h1 {
	color: #0073B0;
	font-size: 28px;
	text-align: center;
	padding-bottom: 20px;
}

#column-main h2 {
	font-size: 18px;
	line-height: 25px;
	padding: 0px 30px 3px 0px;
}

#column-main h3 {
	color: #0073B0;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	padding: 0px 30px 3px 0px;
}

#column-main p {
	margin: 20px 0;
}

#column-main ul{
	line-height: 22px;
}

#column-main li {
	margin: 12px 8%;
}

.widget1wide {
	width: 100%;
	background: #00A551;
	color: white;	
}

.widget1wide p {
	padding: 20px;
    font-size: 18px;
    font-weight: 700;
    text-align: left !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.landingwidget {
	margin-bottom: 30px;
}

.landingwidget h2 a{
	font-weight: normal;
	color: #0073B0;
}

.landingwidget p {
	line-height: 22px;
}

.landingwidgettext {
	float: left;
	width:55%;	
}

.widgetBody {
	height: auto;
    margin-top: 24px;
    padding-bottom: 0px;
    margin-left: 0 !important;
    margin-right: 10px !important;
}

.middle {
	margin: 0px 0px;
}

.widgetBody p {
	line-height: 18px;
	padding: 0px 30px 8px;
}
.widgetBody h1 {
	padding: 20px 30px 8px;
	font-size: 30px;
	text-align: center;
	line-height: 32px;
}

.widgetBody h2 {
	font-size: 26px;
	text-align: center;
}

.widgetBody h2, .widgetBody h3, .widgetBody form {
	padding: 20px 30px 5px;
}

.widgetBody h1, .widgetBody a {
	color: #ffffff;
}
.green {
	background: #00A551;
	color: #ffffff;
}

.blue {
	background: #0073B0;
	color: #ffffff;
}

.smallTitle {
	font-size: 24px;
}

.first p, .first a {
	padding-left: 20px;
}

.widgetFooter {
	width: 100%;
	padding: 10px 0;
}

#widgetFooterContainer {
}

#footer a, #footer a:visited {
	color: #ffffff;
}

/*************************************************
	Theme specific defintions
**************************************************/

	.headerText {
		float: left;
			font-weight: lighter;
			background:rgba(0,115,176,1);
		position: absolute;
		margin-top:210px;
		width:100%;
	}

	.headerText h1 {
		color: white;
		font-size: 24px;
		padding: 4px 0 4px 20px;
}

	.splitColorTilt {
			color:#FF8D00;
			font-style: italic;
			font-weight: normal;
	}

	.splitColor {
			color:#ffae00;
	}

	#company {											/* Use with a logo/business name in the nav bar line */
		float: left;
		margin-left: 20px;
		padding: 10px 0px 10px;
		width:300px;
			font-size: 22px;
			font-weight: bold;
		text-align: left;
			color: #fff;
	}

	#contactInfo {
		background: #217B00;
		padding: 50px;
		text-align: center;
	}

/*
.normal {
		font-weight: normal;
		font-size: 18px;
}

#Slideshow {
		background: #771012;
	width: 100%;
	height: 768px;
}
*/

/*************************************************
	Sidebar Widget(s) defintions
**************************************************/
.sidebarWidget h1 {
		font-size: 30px !important;
	margin: -5px 0 10px;
}

.sidebarWidget h2, .sidebarWidget h3.widgettitle {							/* This is the yellow headline type for every widget */
	padding: 8px 30px;
    text-align: left !important;
    margin: 10px 0 15px;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: inline-block;
    font-size: 1.5em !important;
    margin-bottom: 0;
    color: #fff;
    width: 100%;
}

.sidebarWidget h3 {							/* This is used to set the color for the Author line in the testimonials widget */
		font-style: italic;
		font-size: 14px !important;
		color:#1B361F;
	margin: 10px;
}

.sidebarWidget h4 {
		color: #ffae00;
		font-style: italic;
	margin-bottom: 10px;
}

.sidebarWidget p {
		padding: 0px 30px 18px;
	margin: 0 auto;
	text-align: left;
}

.sidebarWidget a:hover {
		color: #cccccc;
}

.sidebarWidget {
	background: #0073B0;
    font-size: 14px !important;
    border-top-color: #2D6436;
    border-bottom-color: #2D6436;
    color: white;
    margin: 0 0 7px 5%;
    text-align: center;
    padding: 10px 0 !important;
    width: 90% !important;
    border-top: 0px solid;
    border-bottom: 0px solid;
}

/* while defined specifically for testimonials, it's available to use in other widgets */
	.sbDoubleBorder {
		border-top-color: #2D6436;
		border-bottom-color: #2D6436;
		border-top: 1px solid;
		border-bottom: 1px solid;
		display: inline-block;
		padding: 5px 4px;
		margin-bottom: 10px;
	}

/* for first widget in the sidebar */
	.sbTop h1 {
		margin: 0px 0 0px;
	}

	.sbTop {
		padding-top: 60px;
	}

/* for last widget in the sidebar */
	.sidebarWidget.sbBottom {
		padding-bottom: 25px;
	}

/*************************************************
	Sidebar btn defintions
**************************************************/

.buttonContainer {
	text-align: center;
	margin: 16px 0;
}

.btn, .button {
	background: #75bf80;
	background-image: -webkit-linear-gradient(top, #75bf80, #00A551);
	background-image: -moz-linear-gradient(top, #75bf80, #00A551);
	background-image: -ms-linear-gradient(top, #75bf80, #00A551);
	background-image: -o-linear-gradient(top, #75bf80, #00A551);
	background-image: linear-gradient(to bottom, #75bf80, #00A551);
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
	color: #ffffff !important;
	font-size: 14px;
	border-color: #2d6436;
	text-align: center;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	padding: 6px 20px 6px 20px;
	border: solid #2d6436 2px;
	text-decoration: none;
	margin: 0px 5px;
	display: inline-block;
}

.btn:hover, .button:hover {
	background: #00A551;
	background-image: -webkit-linear-gradient(top, #00A551, #75bf80);
	background-image: -moz-linear-gradient(top, #00A551, #75bf80);
	background-image: -ms-linear-gradient(top, #00A551, #75bf80);
	background-image: -o-linear-gradient(top, #00A551, #75bf80);
	background-image: linear-gradient(to bottom, #00A551, #75bf80);
	border-color: #2d6436;
	-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 0px 1px rgba(0,0,0,0.26);
	box-shadow: 0px 0px 1px rgba(0,0,0,0.26);
	color: #cccccc !important;
	text-decoration: none;
}

/*************************************************
	Sidebar Headshot Widget defintion
**************************************************/

	.sb img {
	-webkit-box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
	box-shadow: 0px 0px 7px 10px rgba(0,0,0,0.36);
		margin: 10px 0;
	}

/*************************************************
	Sidebar Book Widget specific defintions
**************************************************/

	.sbBook h1 {
		font-size: 28px;
		margin-top: 7px;
		margin-bottom: 14px;
	}

	.sbBook p {
		font-size: 20px;
		border-top-color: #2D6436;
		border-bottom-color: #2D6436;
		margin: 10px auto;
		padding-top: 8px;
		border-top: 1px solid;
		border-bottom: 1px solid;
		padding-bottom: 8px;
	}

/*************************************************
	Sidebar Testimonials Widget defintions
**************************************************/

	.sidebarWidget.sbTestimonials a {			/* Tech note: .sbTestimonials by itself works in desktop, but not on smartphone.  Needs this double call to work on smartphone */
		color:;
	}

/* not sure which CSS file these two definitions should be located */
	.testimonials h3 {
		text-align: right;
	}

	.testimonials p {
		font-style: italic;
	}

/*************************************************
	Sidebar Phone Widget defintion
**************************************************/

.sbPhone {
		color: #fff;
}

.testimonials h3 {
	text-align: right;
}

.testimonials p {
	font-style: italic;
}


/*************************************************
	sbButton not used at this point
**************************************************/

.sbButton {
	margin: 10px auto;
	padding: 6px 12px;
		color: white;
		font-size: 18px;
		font-weight: bold;
		background-color: #2D6436;
	border-radius: 18px;
	/*
	border: 2px solid #2C6034;
	*/
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	-webkit-box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.26);
	box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.26);
}

.sbButton:hover {
	background-color: #427a4b;
	color: #ffae00;
}

.sbButton:active {
	-webkit-box-shadow: 0px 0px 2px 4px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 0px 2px 4px rgba(0,0,0,0.36);
	box-shadow: 0px 0px 2px 4px rgba(0,0,0,0.36);
}

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

	SECTION #3 - Site Navigation 
			This section is where the main nav bar is located and any other navigation related definitions 
			like the "back to top" button.

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

/*************************************************
	SECTION #3.A - Back to Top button
**************************************************/

#topBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    outline: none; /* Remove outline */
		border: none; /* Remove borders */
		border-radius: 10px; /* Rounded corners */
		background-color:rgba(0,165,81,0.50) ; /* Set a background color */
		color: white; /* Text color */
		font-size: 18px; /* Increase font size */
}

/*************************************************
	SECTION #3.B - Main Navigation
**************************************************/

	/******************************************************************
		Button design for navigation bar
	*******************************************************************/

	.btn2 {

		background: #0073b0;
		background-image: -webkit-linear-gradient(top, #0073b0, #0073b0);
		background-image: -moz-linear-gradient(top, #0073b0, #0073b0);
		background-image: -ms-linear-gradient(top, #0073b0, #0073b0);
		background-image: -o-linear-gradient(top, #0073b0, #0073b0);
		background-image: linear-gradient(to bottom, #0073b0, #0073b0);
/*
		-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
		-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
		box-shadow: 0px 0px 10px rgba(0,0,0,0.26);
*/
		color: #ffffff;
		border-color: #2d6436;
		-webkit-border-radius: 14px;
		-moz-border-radius: 14px;
		border-radius: 14px;
		padding: 6px 20px;
		border: solid 2px;
		text-decoration: none;
		margin-top: 8px;
		margin-bottom: 5px;
		display: inline-block;
	}

	.btn2 {
		background: #0073B0;
		background-image: -webkit-linear-gradient(top, #0073B0, #0073B0);
		background-image: -moz-linear-gradient(top, #0073B0, #0073B0);
		background-image: -ms-linear-gradient(top, #0073B0, #0073B0);
		background-image: -o-linear-gradient(top, #0073B0, #0073B0);
		background-image: linear-gradient(to bottom, #0073B0, #0073B0);
		text-decoration: none;
	}

	/* Add an active class to highlight the current page */
	.btn2.active {
	/* background defined in theme css */
		background-image: none;
		opacity: 0.7;
		cursor: not-allowed;

	}

	.btn2.active:hover {
		background: #0073B0;
		background-image: none;

	}


	/******************************************************************
		Main Navigation design
	*******************************************************************/


/* 	• Add a black background color to the top navigation 
	• Set the height of the navigation bar
	• width by default will span the whole screen
	• hidden overflow hides anything that extends below the navigation bar including paddings and margins
*/
.topnav {
/*
	overflow: hidden;
*/
}

/* Style the links inside the navigation bar */
.topnav a {
/*    float: left;
    display: block;
    text-align: center;
    padding: 12px 12px 10px;
    text-decoration: none;
	    color: #f2f2f2;
    font-size: 17px;
*/
}

/* Add an active class to highlight the current page */
	.active {
		background-color: #427a4b;
		color: white;
	}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
		right: 10px;
		top: 5px;
    display: none;
}

.topnav #menu {
	display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown, .dropdown2 {
	/* color defined in theme css */
	/* background-color defined in theme css */
	display: inline-block;
	position: relative;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn, .dropdown2 .dropbtn {
    color: white;
	/*
    background-color: rgba(255,255,255,0.42);
*/
	font-size: 14px;
	font-weight: bold;
    border: none;
    outline: none;
    padding: 0 12px;
	/*
	width: 80px;
    margin: 10px;
	height:100px;
	*/
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    background-color: #0073B0;  /* #0073B0 blue #75bf80 green*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    display: none;
    position: absolute;
	border-radius: 0 12px;
    min-width: 160px;
    z-index: 1;
	/*
	top: 121px;
	left:22px;
	*/
}

/* Style the links inside the dropdown */
.dropdown-content a {
	/*
    color: black;
*/
	float: none;
    padding: 16px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
	.topnav a:hover, .dropdown:hover .dropbtn {
/*		background-color: #555;
		*/
		color: white;
	}

/* Add a grey background to dropdown links on hover */
	.dropdown-content a:hover {
		background-color: #00A551;
		color: black;
	}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content, .dropdown2:hover .dropdown-content {
    display: block;
}

.dropdown:hover  {
	height: 220px;
}

.menulinks {
/*
	margin-top: 43px;
*/
	height: 100vh;
	padding-top: 70px;
	text-align: center;
}

.menulinks a, .menulinks h1, .menulinks p, a#menu {
	color: #ffffff;
}

.menulinks p {
	font-size: 24px;
	line-height: 24px;
	margin-top: 25px;
}

.menulinks h1 {
	font-size: 36px;
	margin-bottom: 20px;
}

.menulinks button {
	color: #f2f2f2;
    /* background-color: #0073B0; */
    font-weight: bold;
    height: 105px;
    width: 85px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 0;
    margin: 8px;
    border: none;
    position: relative;
}

.more {
	background-color:#03C400;
	font-weight: bold;
	font-size: 14px;
	float: right;
	display: block;
	width: 20px;
	height: 20px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	padding-top:0px;
	text-align: center;
	position: absolute;
	z-index: 2;
	top:90px;
	margin-left: 70px;
}

.smartphonenav h2 {
	padding:0px 0;
}

.smartphonenav {
	padding:0px 0;
	text-align: center;
}

.smartphonenav .btn2 {
	padding: 10px;
}

/* When the screen is less than 895px pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 895px) {
	.menulinks button, .smartphonenav {display: none;}
	.topnav a /*:not(:first-child),*/ .dropdown .dropbtn, .dropdown2 .dropbtn  {display: none;}

	.topnav a#menu {
		float: right;
		display: inline;
		position: absolute;
		z-index: 10;
 	}
 
	.topnav a.icon {
		float: right;
		display: inline;
		position: absolute;
 	}
 
	.menulinks {
		width: 100%;
		background-color:rgba(0,165,81,0.95);
		color: white;
	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 895px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
  }
  .topnav.responsive a {
    float: none;
    display: inline-block;
    text-align: left;
  }
  .topnav.responsive .dropdown, .topnav.responsive .dropdown2  {float: ;}
  .topnav.responsive .dropdown-content {position: ;}
  .topnav.responsive .dropdown .dropbtn, .topnav.responsive .dropdown2 .dropbtn  {
    display: block;
    width: 100%;
    text-align: left;
  }
	.topnav.responsive .menulinks button {display: inline-block;}
	.topnav.responsive .smartphonenav {display: block;}
}

/*************************************************
	Old Main Navigation
**************************************************/

#navbar {
	width: 100%;
	height: 43px;
	z-index: 2;
	position:absolute;
/* 													This section is needed to float the Nav bar above another div.
	top:0px;
*/
}

#navbar ul {
	float: right;
	margin-right: 20px;
	padding: 14px 0px;								/* watch padding and margins so they don't push other divs out of alignment leaving gaps */
	list-style:none;								/* turn off bullets for <ul> */
}

#navbar li {
	display:inline;									/* display:inline makes <li>s horizontal (horizontal navbar setting) */
		color: #eeeeee;									/* vertical bar colors */
}

#navbar li a {
	text-decoration:none;							/* remove underline from text links */
		color: #eeeeee;
}

	#navbar li a:hover, li a:focus {
		color:#FF8D00;
	}

	#navbar li a:active {
		color: #FFCC00;
	}

#navbar img {
	vertical-align: middle; 						/* need this to vertically center images with text on the same line otherwise the image defaults to sitting 
														above the text on the same line and also causing layout issues with the surrounding text and divs */
/*	margin-bottom:-5px;								/* line up social media icons with rest of nav bar */
}

img#navbar
{
	vertical-align: middle; 
}



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

SECTION #4 - MAD Responsive Design
			Now we go beyond the default vertical Smartphone design.  First, we tackle the smartphone wide (horizontal, landscape) view.
			Then we tackle the tablet view.  And lastly, we tackle the desktop view.  We also tackle any specific device issues in this
			section.

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

/******************************************************************************************************************************************
SECTION #4.A - Smartphone Landscape Modifications

		Vertical and Horizontal viewing on the smartphone are dramatically different.  Horizontal specific design modifications
		are defined or redefined here, after the vertical defintions are defined above.
******************************************************************************************************************************************/
@media screen and (min-width: 376px) and (max-width: 736px) {

	.headerText {
		font-size: 40px;
		padding:50px 0 0 50px;
	}
	
	.menulinks button, .smartphonenav {display: none;}
	.topnav a /*:not(:first-child),*/ .dropdown .dropbtn, .dropdown2 .dropbtn  {display: none;}

	.topnav a.icon {
		float: right;
		display: inline;
		position: absolute;
 	}
 
	.menulinks {
		width: 100%;
		padding: 20px 0 0 0;
	}

  
  .topnav.responsive a.icon {
    position: absolute;
  }
  .topnav.responsive a {
    float: none;
    display: inline-block;
    text-align: left;
  }
  .topnav.responsive .dropdown .dropbtn, .topnav.responsive .dropdown2 .dropbtn  {
    display: block;
    width: 100%;
    text-align: left;
  }
	.topnav.responsive .menulinks button {display: inline-block;}
	.topnav.responsive .smartphonenav {
		display: block;
	    position: relative;
	    z-index: 9;
	    margin-top: -6px;

	}
}



/******************************************************************************************************************************************
SECTION #4.B - MAD Responsive Key Section
			Tablet & Desktop Viewport Definitions

		This section is for definitions shared by both the tablet and the desktop.  It comes BEFORE the Desktop only and Tablet only 
		definitions because of the CSS over-writing prior definitions principle.  

		This section is where the bulk of the desktop design that is shared by the tablet design is defined.

		The following tablet only and desktop only sections are used to "fix" some technology issues.

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

@media screen and (min-width: 895px) {
	
	body {

		min-width: 1024px;
	/*	position: relative;												/* needed for any position divs contained within */	
	}

	
	/******************************************************************
		Positioning Classes for Videos (Can be removed if not used)
	*******************************************************************/

	.video1 {
		width:560px;
		height:315px;
		margin: 0 auto 20px;
	}

	/***************************************************************************************
		desktop layout design - container divs
	****************************************************************************************/
		
	#page {
		margin:0px auto 0px;											/* center website with auto margin for left and right and give bottom area below page */
		width:1024px;													/* set width of website pages here. default is for 1024px wide */
		/* box-shadow defined in theme css */
	/*	display: inline-block;											/* needed to disply top margin correctly */
		
	}
		
	#content-wrapper {
		width: 1024px;
			padding:0px;
		}

	.header {
		height: 173px;												/* image height for desktop - different from smartphone */
		background-position:  center top;							/* image position for desktop - different from smartphone */
		text-align: center;
		position: relative;											/* needed for any position divs contained within */	
	}

	.header2 {
		z-index: 0;
		width:1024px;
		margin-bottom: 0px;
		height: 200px;												/* image height for desktop */
		position: relative;											/* needed for any position divs contained within */	
	}
		
	#logo {
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		width:329px;
		z-index: 2;
	}
		
	#column-main{
		margin: 0 auto;
	}

	#column-main h1 {
		text-align: left;
		padding-bottom: 20px;
/*		padding-left: 30px; */
	}
		
	#column-main h2 {
		text-align: left;
		padding-bottom: 0px;
	}
		
	#column-main h3 {
	}
		
	#column-main p, #column-main ul  {
		margin-bottom: 20px;
	}

	#column-main.testimonials p {
		margin-bottom: 0;
	}

	#column-main li {
		margin: 12px 40px;
	}

	.widget1wide {
		width: 1024px;
	}
		
	.photo-full-width {
		width: 960px;
	}

	.photo-topleft {
		margin:0px 30px 0px 0;
		width:164px;
	}

	.landingwidgettext {
		width:400px;
	}

	.widgetBody {
		width: 318px;
		height: auto;
		margin-top: 24px;
		padding-bottom: 0px;
	}

	.widgetBody h1, .widgetBody h2 {
		text-align: left;
	}
		
	.middle {
		margin: 24px 23px;
	}

	#column-left{
		width:64%;
	}
		
	#sidebar {
		width: 36%;
	}	

	.sidebarWidget {
		padding: 10px 0 20px;
		padding: 10px 0;
		font-size: 14px;
		width:auto;
	}

	.sbTop {
		padding-top: 60px;
	}

	/*
	#Slideshow {
		width: 1024px;
		height: 768px;
	}
	*/

	.widgetFooter {
		float: left;
		padding: 0px 0;
	}

	#widgetFooterContainer {
		width: 1024px;
		margin: 0 auto;
	}

	.first {
		text-align: left;
	}

	#footer {
		/* font-size defined in theme css */
		padding: 20px 0 30px;
		margin: 0px 0;
		margin-top: 50px;
	}

	#footer, #footer a {
			font-size: 14px;
		line-height: 22px;
	}

		#footer p {
			padding-bottom: 0px;
		}
		
	/***************************************************************************************
		desktop navigation design 
	****************************************************************************************/
		
	.headerText {
		background:rgba(0,115,176,0.70);
		width: auto;
		margin: 141px 0 0 0px;
		padding: 10px 20px;
		position: absolute;												/* needed for correct positioning within another div especially when the other div is correcting for top 																	margin error */
	}

	#navbar {
		background:#00A551;
		position: relative;
		top: 0px; /* Modified by SJ to fix bug */
	/*		top: 130px; */
		z-index: 1;
	}	
		
	#pagenav {
		width: 1024px;
		margin: 0 auto;
	}

	.topnav {
			height: 43px;
		display: block;
		}
		
		.menulinks {
			margin-top: 0;
			padding-top: 0;
			padding-right: 5px;
			height: 38px;
			font-weight: bold;
		}
		.menulinks button {
			/*
			background-color: #0073B0;
	*/
			font-size: 14px;
			 height: 43px;
			width: auto;
			margin:0;
			padding:0 16px;
		}

		.btn2 {
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
	/*
			background: #0073B0;
			background-image: -webkit-linear-gradient(top, #0073B0, #0073B0);
			background-image: -moz-linear-gradient(top, #0073B0, #0073B0);
			background-image: -ms-linear-gradient(top, #0073B0, #0073B0);
			background-image: -o-linear-gradient(top, #0073B0, #0073B0);
			background-image: linear-gradient(to bottom, #0073B0, #0073B0);
			-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.00);
			-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.00);
			box-shadow: 0px 0px 0px rgba(0,0,0,0.00);
			color: #ffffff;
			border-color: #2d6436;
			padding: 0;
			border: solid 0px;
			text-decoration: none;
			margin-top: 0px;
			margin-bottom: 0px;
			display: inline-block;
			*/
		}

		/*
		.btn2:hover {
			background: #00A551;
			background-image: none;
			text-decoration: none;
		}
	*/
		/* Add an active class to highlight the current page */
	/*
		.btn2.active {
			background-image: none;
			color: #00A551;
			opacity: 1;
			cursor: not-allowed;

		}

		.btn2.active:hover {
			background: #0073B0;

		}
		*/
	/*
		.btn2.active {
			background-color: #000000;
			color: white;
		}
	*/	
	.topnav a {
		}
		
		.topnav a:hover {
	/*		background-color: #00A551 ;
			*/
		}
		
	#company {											/* Use with a logo/business name in the nav bar line */
		padding: 9px 0px 9px;
	}
}

.desktop {
	display: inline-block;
}

.smartphonenav {
	display: none;
}



/******************************************************************************************************************************************
SECTION #4.C - Tablet Only Viewport Definitions 
			Usually for bug fixes and workarounds

		MAD Responsive design does make the desktop and tablet look the same, but there are specific bugs and technological work-a-rounds
		that sometimes need to be addressed.  These will be defined in this section.
******************************************************************************************************************************************/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body {
	}

	#page {
		margin:-2px auto 30px;											/* adjust up to close gap between nav bar and header divs */
		}

}



/******************************************************************************************************************************************
SECTION #4.D - Desktop Only Viewport Definitions
			Usually for bug fixes and workarounds.
******************************************************************************************************************************************/

@media screen and (min-width: 737px) and (min-device-width: 1024px) {

	#topBtn:hover {									/* needs to be "last" in CSS or After touchscreen devices so not to activate hover on touchscreens */
		background-color:rgba(0,0,0,0.20); 	/* Add a dark-grey background on hover */
	}

	
}


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

SECTION #4.DE - Smartphone Only Viewport Definitions
			Usually for bug fixes and workarounds.
			This is the last viewport definition.

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


/******************************************************************************************************************************************
	The .desktop class (hidden) has to be defined here after it is declared (visibile) in the desktop section 4.B.  If this is defined 
	before it's visible definition in section 4.B then the "bug" is that it will be visible on the smartphone as the display:none is 
	overwritten by the display:inline-block.
******************************************************************************************************************************************/

@media screen and (max-width: 737px) {
	.desktop {
		display: none;
	}
}