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

	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, ol, 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 {										
		/* text link color for default and visited defined in theme css */
		text-decoration:none;							/* remove underline from link */
		font-weight: bold;
	}

	a:hover, a:focus {											
		/* color defined in theme css */
	}

	h1 {
		/* color defined in theme css */
	}

	.clear-float {
		clear:both;
	}

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

	.floatRight {
		float:right;
	}

	.photo-topleft {
		float:left;
		margin:3px 25px 10px 0;
	}

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

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

	input {
		/* color, background color, font-size and border-color defined in theme css */
		padding: 4px 10px;
		margin: 4px 0;
		width: 80%;
		border: 2px solid;
	}

	input[type=text]:focus {
		border: 2px solid;
		/* border-color defined in theme css */
		outline: none;
	}

	input[type=button], input[type=submit], input[type=reset] {
		/* background color and border-color defined in theme css */
		border: none;
		border-radius: 16px;
		color: #fff;
		padding: 2px 10px;
		text-decoration: none;
		margin: 4px 2px;
		cursor: pointer;
		width: 40%;
		font-weight: bold;
		border: 2px solid;
	}

	input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
		/* color defined in theme css */
	}

		::-webkit-input-placeholder { /* Chrome/Opera/Safari */
		/* color defined in theme css */
		}
		::-moz-placeholder { /* Firefox 19+ */
		/* color defined in theme css */
		}
		:-ms-input-placeholder { /* IE 10+ */
		/* color defined in theme css */
		}
		:-moz-placeholder { /* Firefox 18- */
		/* color defined in theme css */
		}



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

	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 {
		/* color, background color, font-size and font-family defined in theme css */
/*		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 {
		/* color defined in theme css */
	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: 450px;
		/* color defined in theme css */
}
/*
.header2 {
	height: 190px;
		/* color defined in theme css */
}

	/***************************************************************************
				#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 {
	/*		background: ;								/* set background for main column and right column to sit in visually */
	}

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

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

/* footer can be replaced with <footer> in HTML5 */
#footer {
		/* color defined in theme css */
		/* font-size defined in theme css */
		/* border-top-color defined in theme css */
	padding: 8px 0 30px;
	text-align: center;
	margin: 20px 10%;
	border-top: 1px 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.
**********************************************************************************/

#column-main h1, #column-main h2 {
	margin: 50px 8% 20px;
}

#column-main p, #column-main ul, #column-main ol  {
	margin: 20px 8%;
}
.twoup {
	margin: 12px 50px;
}

#column-main h1, #column-main h2, #column-main h3, #column-main h4  {
		/* line-height defined in theme css */
	text-align: center;
}

.tiers  h1 {
	margin-top: 25px !important;
}

.tiers h2 {
		/* border-top-color defined in theme css */
		/* border-left-color defined in theme css */
	border-top: 2px solid;
	border-left: 12px solid;
	border-right: 12px solid;
	padding: 10px 8px 3px;
	border-top-color:#0db5e7;
	border-left-color:#0db5e7;
	border-right-color:#0db5e7;
}

.tiers h4 {
		/* border-top-color defined in theme css */
		/* border-left-color defined in theme css */
	border-bottom: 2px solid;
	border-left: 12px solid;
	border-right: 12px solid;
	padding: 0px 8px 20px;
	font-weight: normal;
	border-bottom-color:#00CB0D;
	border-left-color:#00CB0D;
	border-right-color:#00CB0D;
}


#column-main ul{
		/* line-height defined in theme css */
}

#column-main li {
	margin:;
}

blockquote,
blockquote::before {
	color: #999;
}

blockquote {
	margin: 40px 40px 24px;
	margin: 4rem 4rem 2.4rem;
	text-align:left;
}
blockquote .p{padding-left:30px;}

blockquote::before {
	content: "\201C";
	display: block;
	font-size: 30px;
	font-size: 3rem;
	height: 0;
	left: -20px;
	position: relative;
	top: -10px;
}

/*************************************************
	Sidebar Widget(s) defintions
**************************************************/
.sidebarWidget h1 {
	/* font-size defined in theme css */
	margin: -5px 0 10px;
}

.sidebarWidget h2 {							/* This is the yellow headline type for every widget */
		/* color defined in theme css */
		/* background defined in theme css */
		/* padding defined in theme css */
	margin: 10px 0 15px;
	border-top-left-radius: 12px;
	border-bottom-right-radius: 12px;
	display: inline-block;
}

.sidebarWidget h3 {							/* This is used to set the color for the Author line in the testimonials widget */
	/* font-style defined in theme css */
	/* font-size defined in theme css */
	/* color defined in theme css */
	margin: 10px;
}

.sidebarWidget h4 {
	/* color defined in theme css */
	/* font-style defined in theme css */
	margin-bottom: 10px;
}

.sidebarWidget p {
	width:70%;
	margin: 0 auto;
}

.sidebarWidget a:hover {
	/* color defined in theme css */
}

.sidebarWidget {
	/* background defined in theme css */
	/* font-size defined in theme css */
	/* border-top-color defined in theme css */
	/* border-bottom-color defined in theme css */
	margin: 0 0 7px 5%;
	text-align: center;
	padding: 10px 0;
	width:90%;
	border-top: 6px solid;
    border-bottom: 0px solid;
}

/* while defined specifically for testimonials, it's available to use in other widgets */
	.sbDoubleBorder {
	/* border-top-color defined in theme css */
	/* border-bottom-color defined in theme css */
		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
**************************************************/

.btn {
	/* background defined in theme css */
	/* background-image defined in theme css */
	/* box-shadow defined in theme css */
	/* color defined in theme css */
	/* font-size defined in theme css */
	/* border color defined in theme css */
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	padding: 6px 20px 6px 20px;
	border: solid #2d6436 2px;
	text-decoration: none;
	margin-top: 8px;
	margin-bottom: 5px;
	display: inline-block;
}

.btn:hover {
	/* background defined in theme css */
	/* background-image defined in theme css */
	text-decoration: none;
}

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

	.sb img {
	/* box shadow defined in theme css */
		margin: 10px 0;
	}

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

	.sbBook h1 {
		/* font-size defined in theme css */
		margin-top: 7px;
		margin-bottom: 14px;
	}

	.sbBook p {
		/* font-size defined in theme css */
		/* border-top-color defined in theme css */
		/* fborder-bottom-color defined in theme css */
		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 defined in theme css */
	}

/*************************************************
	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 defined in theme css */
		/* border-radius defined in theme css */
		/* background-color defined in theme css */
		/* color defined in theme css */
		/* font-size defined in theme css */
}

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

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

	.btn2 {
	/* background defined in theme css */
	/* background-image defined in theme css */
	/* box-shadow defined in theme css */
	/* color defined in theme css */
	/* font-size defined in theme css */
	/* border color defined in theme css */
		-webkit-border-radius: 14px;
		-moz-border-radius: 14px;
		border-radius: 14px;
		padding: 6px 20px 6px 20px;
		border: solid 2px;
		text-decoration: none;
		margin-top: 8px;
		margin-bottom: 5px;
		display: inline-block;
	}

	.btn2:hover {
	/* background defined in theme css */
	/* background-image defined in theme css */
		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 defined in theme css */
		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 {
 		background-color: ;
    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 {
		border-bottom: solid 4px;
		padding-bottom: 2px;
	}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
		right: 10px;
		top: 5px;
    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 defined in theme css */
	/* background-color defined in theme css */
	/* font-size defined in theme css */
	/* font-weight defined in theme css */
    border: none;
    outline: none;
    padding: 0;
    margin: 10px;
	width: 80px;
	height:100px;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
	/* background-color defined in theme css */
	/* box-shadow defined in theme css */
    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 defined in theme css */
    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 defined in theme css */
	/* color defined in theme css */
	}

/* Add a grey background to dropdown links on hover */
	.dropdown-content a:hover {
	/* background-color defined in theme css */
	/* color defined in theme css */
	}

/* 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: 5px;
	text-align: center;
}

.menulinks button {
	/* background-color defined in theme css */
	/* color defined in theme css */
	/* font-weight defined in theme css */
		height: 110px;
	width: 90px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 0;
	margin: 12px 12px;
	border: none;
	position: relative;
}

.more {
	/* background-color defined in theme css */
	/* font-weight defined in theme css */
	/* font-size defined in theme css */
	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:20px 0;
	text-align: center;
}

/* When the screen is less than 600 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: 600px) {
	.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%;
	/* background-color defined in theme css */
	}

}

/* 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: 600px) {
  .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 {
		background:;
	width: 100%;
	text-align: center;
	padding-top: 40px;
/* 													This section is needed to float the Nav bar above another div.
	position:absolute;
	z-index: 1;
	top:0px;
*/
}

#navbar ul {
	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) */
}

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

	#navbar li a:hover, li a:focus {
	}

	#navbar li a:active {
	}

#navbar img {
/*	margin-bottom:-5px;								/* line up social media icons with rest of nav bar */
}

/*************************************************
	Secondary Navigation

#navbar2 {
	list-style:none;
}

#navbar2 li {
}

#navbar2 li a {
	text-decoration:none;
		color: #CC0000;
}

	#navbar2 li a:hover, li a:focus {
		color: #0000CC;
	}
**************************************************/


/*************************************************
	Styles for all viewports
**************************************************/
#content-wrapper {
	text-align: center;
}	
.singlecol {
	width: auto;
	display: inline-block;
	text-align: left;
}

.singlecol h2 {
	color: #0017a4;
	font-weight: 700;
	line-height: 1.2;
}
.singlecol h3 {
	color: #0017a4;
	font-weight: 700;
	line-height: 1.2;
}
.singlecol ul , ol {
/*    background: #3399ff; */
	padding: 0 .5rem .5rem 3rem;
}
.singlecol ul li, ol li {
	line-height:1.2;
	list-style-position: outside;
	padding:0.25rem 0.5rem;
}
.singlecol a:link, a:visited {
	color: #3399ff !important; 
}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


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

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 defined in theme css */
		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%;
	/* background-color defined in theme css */
		padding: 20px 0 0 0;
	}

  .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;}
}



/******************************************************************************************************************************************
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: 737px) {
	
	body {

		min-width: 1024px;
	/*	position: relative;												/* needed for any position divs contained within */	
	/* container for full-width text block */
	}
	.singlecol {
		font-size: 14px;
		line-height: 14px;
	}
	.tiers {
		width: 30%;
	/*	float: left;
		*/
		display: inline-block;
		text-align: left;
		font-size: 14px;
		line-height: 14px;
	}
		
	/***************************************************************************************
		desktop layout design - container divs
	****************************************************************************************/
		
	#page {
		margin:0px auto 30px;											/* 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 */
		
	}

	.header {
		height: 559px;												/* image height for desktop */
		position: relative;											/* needed for any position divs contained within */	
	}

	.header2 {
		height: 384px;												/* image height for desktop */
		position: relative;											/* needed for any position divs contained within */	
	}
		
		
	.tiers p {
		border-bottom: solid 1px #C6C6C6;
		padding-bottom: 4px;
		}

	.singlecol p {
		font-size:16px;
		line-height:1.4;
		margin-bottom:5px;
	}

	.leftblock {
		float:left;
		padding:5px;
		margin-right:20px;
		display: inline-block;
	}
	.rightblock {
		overflow:hidden;
		padding:5px;
		display: inline-block;
	}
	.largeblock{width:59%;}
	.smallblock{width:35%;}
	.halfblock{width:45%;}

	.emptytier {
		height:350px;
		font-size: 100px;
		padding-top:200px;
	}
	

	#column-main {
		margin: 0 auto;
	}	

	#column-main h1 {
		margin: 40px 50px 0px;
		}
		
	#column-main h2 {
		margin: 40px 50px 30px;
		}
		
	#column-main h3 {
		margin: 0px 50px 20px;
	}

	.tiers h4 {
		margin: 0px 50px 20px;
	}
		
	#column-main p, #column-main ul, #column-main ol  {
		margin: 12px 50px;
	}

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

		#column-main li {
		margin:;
	}
		
	#sidebar {
		width: 36%;
	}	
	.singlecol h2 {
		font-size: 3rem;
	}
	.singlecol h3 {
		font-size: 1.7rem;
	}
	.singlecol ul li, ol li {
		font-size:16px;
	}

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

	.sbTop {
		padding-top: 60px;
	}

	/*
	#Slideshow {
		width: 1024px;
		height: 768px;
	}
	*/
		
	#footer {
		/* font-size defined in theme css */
		padding: 8px 0 30px;
			margin: 20px 21%;
	}

	/***************************************************************************************
		desktop navigation design 
	****************************************************************************************/
		
	.headerText {
		/* font-size defined in theme css */
		padding:280px 0 0 50px;
		position: absolute;												/* needed for correct positioning within another div especially when the other div is correcting for top 																	margin error */
	}

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

	.topnav {
			height: 43px;
		display: block;
			overflow: hidden;
		}
		
		.menulinks {
			margin-top: 0;
			padding-top: 0;
			padding-right: 5px;
			float: right;
			height: 38px;
		/* font-weight defined in theme css */
		}
		.menulinks button {
		/* background-color defined in theme css */
			 height: 43px;
			width: auto;
			margin:0;
			padding:0 6px;
		}

		.btn2 {
		/* background defined in theme css */
		/* background-image defined in theme css */
		/* box-shadow defined in theme css */
		/* color defined in theme css */
		/* border-color defined in theme css */
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
			padding: 0;
			border: solid 0px;
			text-decoration: none;
			margin-top: 0px;
			margin-bottom: 0px;
			display: inline-block;
		}

		.btn2:hover {
		/* background defined in theme css */
			text-decoration: none;
		}

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

		}

		.btn2.active:hover {
		/* background defined in theme css */

		}
	/*
		.btn2.active {
			background-color: #000000;
			color: white;
		}
	*/	
	.topnav a {
		padding: 10px 5px;
		}
		
		.topnav a:hover {
		/* background-color defined in theme css */
		}
		
	#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 {
	/* background defined in theme css */
	}

	#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 defined in theme css */
	}

	
}


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

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

******************************************************************************************************************************************/
@media screen and (max-width: 400px) {
	.leftblock {
		float:none;
		width: auto;
		padding:5px;
		margin-right:20px;
	}
	.twoup {
		margin: 0;
	}
	.largeblock{style="width:auto;"}
	.smallblock{style="width:auto;"}
	.halfblock{style="width:auto;"}
}


/******************************************************************************************************************************************
	The .desktop class (hidden) has to be defined here after it is declared (visible) 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;
	}
}