/****************************************************************
----------- DEFAULT ELEMENT TAG SELECTORS -----------------------
****************************************************************/ 

/* Specify zero margin and padding as the default for all elements. Any deviations from this must be specified within the individual elements.*/

* {
	margin: 0;
	padding: 0;
}
/* Certain basic attributes of Article areas are best defimed here as a default for the entire site. This element is good to include whereever there is information for the reader that should be classified as an "article" for search engines. */
article {
	background-color: #ffffff;
	width: inherit;
}
/* Certain basic attributes of Aside areas are best defimed here for the entire site. This element is good to include whereever there is information for the reader that should be classified as an "aside" for search engines. */
aside {
	background-color: #ffffff;
	width: inherit;
}
 /* Due to variations between browsers, it's best practices to zero padding and margin on navigation and lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the nav list unless you write a more specific selector.*/
nav, ul, ol, dl {
	padding: 0;
	margin: 0;
}
/* Removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. Adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags in a block that is defined by the containing tag or class dimensions. */
header, section, footer, aside, article, figure, nav {
	display: block;
}
/****************************************************************
---------------- ALL SITES CLASS DEFINITIONS --------------------
****************************************************************/ 
/* This allows class definitions to be used instead of the defaults where neeeded. */

/* Text definitions are first and then followed by container definitions. */

/*****************************************************************************
------------------- CUSTOM FONT CLASS SELECTORS ----------------
Use these to build fonts out of multiple classes. This allows 
them to be reviewed in the code as small changes are made.
Otherwise, one of the Font Class Selectors below may be picked
or a new one custom-defined to make it easier to code.
*****************************************************************************/

/*****************************************************************************
------------------------ FONT ALIGNMENT -----------------------------
*****************************************************************************/
.align-left {
	text-align: left;
}
.align-left-full {
	padding-left: 0px; /*Erase all padding settings, go as far left as possible*/
	text-align: left;
}
.align-center {
	text-align: center;
}
.align-right {
	text-align: right;
}
.align-justify{
	text-align: justify;
}

/*****************************************************************************
---------------------- FONT BOLDNESS ----------------------------
*****************************************************************************/
.bold-none {
	font-weight: 400;  /* Set the boldness of the font for normal reading */
}
.bold-normal {
	font-weight: 600;  /* Set the boldness of the font for normal reading */
}
.bold-very {
	font-weight: 800;  /* Set the boldness of the font for normal reading */
}

/*************************************************************
------------------------- FONT COLORS ------------------------
*************************************************************/
.color-black {
	color: #000000;
}
.color-blue {
	color: #0000ff;
}
.color-blue-bold {
	color: #0060c0;
}
.color-blue-cornflower {
	color: #6495ed;
}
.color-blue-grape {
	color: #586092;
}
.color-blue-navy {
	color: #00006a;
}
.color-blue-steel {
	color: #4682b4;
}
.color-blue-violet {
	color: #8a2be2;
}
.color-brown {
	color: #c29059;
}
.color-coral {
	color: #d18266;
}
.color-crimson {
	color: #dc143c;
}
.color-gold {
	color: #c29059;
}
.color-green {
	color: #008000;
}
.color-green-forest {
	color: #6c6e36;
}
.color-grey {
	color: #707070;
}
.color-indigo {
	color: #4b0082;
}
.color-orange{ 
	color: #ffa500;
}
.color-maroon {
	color: #943634;
}
.color-pearl {
	color: #ece3de;
}
.color-purple-dark {
	color: #6b0c04;
}
.color-red {
	color: #ff0000;
}
.color-red-wine {
	color: #861227;
}
.color-rust {
	color: #c06631;
}
.color-teal {
	color: #2f4c6a;
}
.color-white {
	color: #ffffff;
}

/**************************************************************
---------------- NON-GOOGLE FONT DEFINITIONS ------------------
Fonts that are referenced in files under this website's "fonts" folder. The Google fonts are defined on the "head-section".
***************************************************************/
/* Begin Proxima Nova Open Font Definitions */
@font-face {
  font-family: Proxima-nova;
  src: url(../fonts/proxima-nova/Fontspring-DEMO-proximanova-regular.otf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Proxima-nova;
  src: url(../fonts/proxima-nova/Fontspring-DEMO-proximanova-regularit.otf);
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: Proxima-nova;
  src: url(../fonts/proxima-nova/Fontspring-DEMO-proximanova-bold.otf);
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: Proxima-nova;
  src: url(../fonts/proxima-nova/Fontspring-DEMO-proximanova-boldit.otf);
  font-weight: bold;
  font-style: italic;
}
*/
/* End Proxima Nova Open Font Definitions */


/*****************************************************************************
-------------------- FONT FAMILY CLASSES ------------------------------
Backup fonts are shown after a comma in case the browser doesn't
support Google fonts. Non-Google font classes are defined using the names created in the @font-face definitions above and use a different syntax.
*****************************************************************************/
.font-family-arial {
	font-family: Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-comic {
	font-family: 'Comic Sans MS', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-libre {
	font-family: 'Libre Baskerville', serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-merriweather {
	font-family: 'Merriweather', serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-montserrat {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-notica {
	font-family: 'Noticia Text', serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-neue {
	font-family: 'Comic Neue', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-open {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-oswald {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-outfit {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-patua {
	font-family: 'Patua One', serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-permanent {
	font-family: 'Permanent Marker', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
/* This is a non-Google font */
.font-family-proxima {
	font-family: 'Proxima-nova', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-raleway {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-style: normal
	font-optical-sizing: auto;
}
.font-family-serif-pro {
	font-family: 'Source Serif 4', serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-trebuchet {
	font-family: 'Trebuchet MS', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}
.font-family-unbounded {
	font-family: 'Unbounded', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
}

/*****************************************************************************
------------------------ FONT SIZES -----------------------------
Set 7 sizes of the fonts using a graduated scale based on a 
single multiplier factor of .3. Use a line height that ends up 
when rendered, based on the size of the font, making the size and
line height scale together.
*****************************************************************************/
.font-size-micro {
	font-size: 0.42em;
}
.font-size-super-small {
	font-size: 0.54em;
}
.font-size-xsmall {
	font-size: 0.70em;
}
.font-size-small {
	font-size: 0.92em;
}
.font-size-normal {
	font-size: 1.19em;
}
.font-size-med {
	font-size: 1.55em;
}
.font-size-large {
	font-size: 2.01em;
}
.font-size-xlarge {
	font-size: 2.61em;
}
.font-size-xxlarge {
	font-size: 3.40em;
}


/*****************************************************************************
---------------------- FONT STYLES ------------------------------
*****************************************************************************/
.font-style-none {
	font-style: normal;
}
.font-style-italic {
	font-style: italic;
}
.font-style-oblique {
	font-style: oblique;
}


/*****************************************************************************
------------ ALL-IN-ONE FONT CLASS SELECTORS --------------------
*****************************************************************************/
.font-full-bullets {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em .3em; /*Put a little padding on the bottom & left*/
	color: #000000;
	font-family: Arial, Helvetica, sans-serif; 
	font-weight: 400; 
	font-style: italic;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 1.05em;
	line-height: 1.1em;
	list-style-position:outside;
}
.font-full-big-bullets {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em .3em; /*Put a little padding on the bottom & left*/
	color: #000000;
	font-family: Arial, Helvetica, sans-serif; 
	font-weight:400; 
	font-style:italic;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 1.37em;
	line-height: 1.1em;
	list-style-position:outside;
}
.font-full-header-small-black {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em 0em; /*Put a little padding on the bottom*/
	color: #000000;
	font-family: "Raleway", Arial, Helvetica, sans-serif; 
	font-weight:600;
	font-style: italic;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 1.37em;
	line-height: 1.1em;
}
.font-full-header-small-blue {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em 0em; /*Put a little padding on the bottom*/
	color: #06c;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-weight:600;
	font-style: italic;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 1.37em;
	line-height: 1.1em;
}
.font-full-header-small-white {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em 0em; /*Put a little padding on the bottom*/
	color: #ffffff;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-weight:600;
	font-style: italic;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size:1.37em;
	line-height: 1.1em;
}
.font-full-list-header {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em 0em; /*Put a little padding on the bottom*/
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:400;
	font-style: normal;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 2.01em;
	line-height: 1.1em;
}
.font-full-micro {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em .3em; /*Put a little padding on the bottom & left*/
	color: #202020;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 0.37em;
	line-height: 1.10em;
}
.font-full-minimal {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em 0em 0em; /*No padding*/
	font-size: 0.1em;/*Makes the font virtually invisible for clearing floats and when content must be written invisibally.*/
	line-height: 1.0em;
}
.font-full-notice {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em .3em; /*Put a little padding on the bottom & left*/
	color:#06c;
	font-family: "Comic Sans MS", cursive;
	font-weight: 600;
	font-style: normal;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 1.77em;
	line-height: 1.1em;
}
.font-full-page-header {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em 0em; /*Put a little padding on the bottom*/
	color:#2f4c6a; /*Teal*/
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 3.00em;
	line-height: 1.10em;
}
.font-full-posting-info {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em .8em; /*Put a little padding on the bottom & left*/
	color: #999999;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 0.81em;
	line-height: 1.10em;
}
.font-full-special-intro  {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em .3em; /*Put a little padding on the bottom & left*/
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 1.37em;
	line-height: 1.10em;
}
.font-full-super-small  {
	margin: 0em 0em 0em 0em; /*No margins*/
	padding: 0em 0em .2em .3em; /*Put a little padding on the bottom & left*/
	color: #202020;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;/*Adjust size to per browser tweaks*/
	font-size: 0.48em;
	line-height: 1.10em;
}
/*****************************************************************************
-------------- INDENT SETTINGS FOR LINES OF TEXT -----------------
Used to override default paragraph settings for line spacing before and after
a line.
*****************************************************************************/
.indent-none {
	padding-left: 0px;
}
.indent-normal {
	padding-left: 15px;
}
.indent-large {
	padding-left: 30px;
}
/*****************************************************************************
-------------- SPACING SETTINGS FOR LINES OF TEXT -----------------
Used to override default paragraph settings for line spacing before and after
a line.
*****************************************************************************/
.spacing-after-none {
	padding-bottom: 0px;
}
.spacing-after-normal {
	padding-bottom: 6px;
}
.spacing-after-large {
	padding-bottom: 20px;
}
.spacing-before-none {
	padding-top: 0px;
}
.spacing-before-normal {
	padding-top: 6px;
}
.spacing-before-large {
	padding-top: 20px;
}
/*****************************************************************************
----------- RESPONSIVE IMAGE ATTRIBUTE DEFINITIONS ------------
*****************************************************************************/
/* Setup mages using commonly used size definitions. Responsive images are 
defined using these references to adjust to a width and automatically adjust height for various browser widths.*/

/* Aspect images are used as links or other commonly used dimensions for special illustrations or emphasis as lined up text. */
.image-aspect-landscape {
	display: inline;
	width: 100%;
	aspect-ratio: 3/2;
}
.image-aspect-square {
	display: inline;
	width: 100%;
	aspect-ratio: 2/2;
}
.image-aspect-portrait {
	display: inline;
	width: 100%;
	aspect-ratio: 2/3;
}
/* Fixed sized images are used as links or other commonly used dimensions for special illustrations or emphasis as lined up text. */
.image-responsive {
	width: 100%; /*Used for auto sized icons or images in block sections*/
	height: auto;
}
.image-tiny {
	width:15px; /*Used for little link icons at the end of text lines*/
	height: 15px;
}
/*****************************************************************************
----------- CONTAINER MANAGEMENT DEFINITIONS ------------
*****************************************************************************/
/*  This classes should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float. */
.clear-float { 
	clear: both; /*Clear the left and right floats*/
}
/***************************************************************
----------- ELEMENT AMIMATION DEFINITIONS ------------
***************************************************************/
/* These classes are intended to indicate hyperlinks and contol the appearance of elements that are being interacted with using a mouse or other method. When used, these over-ride the prefiously defined default dynamic interaction effects.*/

/* This makes the background show up with a transparent wine color and changes the cursor to indicate a link when the mouse hovers over an element.*/
.hover-bknd:hover {
	background: #5d728d80; /*In hex, wine blue bknd paragraph, translucent*/
	cursor:pointer;
}
/* This this puts a box around an element and changes the cursor to indicate a link when the mouse hovers over an element.*/
.hover-box:hover {
	border-style:solid; /*Add orange outline around element*/
	border-color:#ff9933;
	border-width: 2px 2px 2px 2px;
	cursor:pointer;
}
/* This removes any default text decoration and changes the cursor to indicate a link when the mouse hovers over an element.*/
.hover-undecorate:hover {
	text-decoration: none; /*Remove all link text decoration settings*/
	cursor:pointer;
	
}
/* This shifts the contents when the mouse hovers over an element.*/
.hover-slide:hover {
	position: relative; /*Make an element jump a little to the right on hover*/
	left: 4px;
	cursor:pointer;
}
/*****************************************************************************
----------- FULL-WIDTH BOX CONTAINER CLASS DEFINITIONS ----------
*****************************************************************************/
/* This class defines a container for a 1-column section that is
used for a container box for content.  This container
is setup to expand and contract as the dimensions of the browser
window changes from device to device.

It is also set for "auto" width so that the contained material can have various margin and padding settings and they will not spill out beyond the body's overall width. */
.box-full-width {
	width: auto;/*Adjust width to include the content's margins, padding, and borders.*/
	height: auto;  /* Adjust the height to match content*/
	margin: 0px 0px 0px 0px; /*No margins & padding, define more in page's CSS*/
	padding: 0px 0px 0px 0px;
	background-color: inherit;/*Keep the parent's back color*/
}
/*****************************************************************************
-----1/2 WIDTH FLOATING BOX PANEL CONTAINER CLASS DEFINITION ----
*****************************************************************************/
/* This class defines a container for a 2-panel section that is
used for 50% display panels.  This container
is setup to float 2 panels within a full-width box. To make the panels evenly spaced, the 2 panels take up about 94% of the width and the margins take the remainining 6% when the remaining right margin is included.

Because true width is actually 99.5, the width of each panel is actually 46.75. Note that, because of its fixed content width setting, changes to this box's left or right margins AND PADDING will add to the the overall width that the box takes up on the page.*/

/* This is for the text container in the left column.*/
.box-half-width-floating {
	width: 46.75%;/*Less than 1/2 because of spacing in between. */
	height: 100%; /* Make the height the same as the container  to adjust it as the browser width changes. */
	margin: 0px 0px 0px 2%; /*Forces left-side separation between the two columns and makes them evenly centered on the page.*/
	padding: 0px 0% 0px 0%;/*No padding by default*/
	float: left;
}
/**************************************************************
-- 1/3 WIDTH FLOATING BOX PANEL CONTAINER CLASS DEFINITION --
**************************************************************/
/* This class defines a container for a 3-panel section that is
used for 33% display panela.  This container
is setup to float 3 image panels within a full-width box. To make the panels evenly spaced, the 3 panels take up about 90% of the width and the margins take the remainining 10% when the remaining right margin is included.

Because true width is actually 99.5, the width of each panel is actually 29.83. Note that, because of its fixed content width setting, changes to this box's left or right margins AND PADDING will add to the the overall width that the box takes up on the page.*/
.box-third-width-floating {
	width: 29.83%;/* Less than 1/2 because of spacing in between. */
	height: 100%; /* Make the height the same as the container  to adjust it as the browser width changes. */
	margin: 0px 0px 0px 2.5%; /* Forces left-side separation between the image panels and makes them evenly centered on the page. */
	padding: 0px 0% 0px 0%;/*No padding by default*/
	float: left;
}
/*****************************************************************************
---- 1/4 WIDTH FLOATING BOX PANEL CONTAINER CLASS DEFINITION ----
*****************************************************************************/
/* This class defines a container for a 3-panel section that is
used for 25% display panels.  This container
is setup to float the 4 panels within a full-width box. To make the panels evenly spaced, the 4 panels take up about 90% of the width and the margins take the remainining 10% when the remaining right margin is included.
Because true width is actually 99.5, the width of each panel is actually 22.375. Note that, because of its fixed content width setting, changes to this box's left or right margins AND PADDING will add to the the overall width that the box takes up on the page.*/
.box-quarter-width-floating {
	width: 22.375%;/* Less than 1/4 because of spacing in between. */
	height: 100%; /* Make the height the same as the container  to adjust it as the browser width changes. */
	margin: 0px 0px 0px 2%; /* Forces left-side separation between the image panels and makes them evenly centered on the page. */
	padding: 0px 0% 0px 0%;/*No padding by default*/
	float: left;
}