@charset "UTF-8";
@-ms-viewport {
width:device-width;
}
@viewport {
width:device-width;
}

/*=================================================
NOTE:
The notations in this CSS code are applicable to
the code that immediately follows the comment.
=================================================*/

/*=================================================
Main CSS Styles
Targeted towards mobile devices
=================================================*/
html {
/*
Defines the root font size for all subsequent REM units.
Defining it as 62.5% allows for REM units to be equal to px.
Exempli Gratia, 14px is the same as 1.4rem.
*/
font-size:62.5%;
}
body {
font-size:1.2rem;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:300;
background:#333333;
}
h1 {
font-size:2.4rem;
}
h2 {
font-size:1.8rem;
}
h3 {
font-size:1.4rem;
}
h4 {
font-size:1.2rem;
}
h5 {
font-size:1.0rem;
}
h6 {
font-size:0.8rem;
}
h1,h2,h3,h4,h5,h6 {
margin:0.8rem 0rem;
}
/* Sets all elements box-sizing to border-box.
If you need support for IE7 and lower use polyfill:https://github.com/Schepp/box-sizing-polyfill */
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/*	MAIN CONTAINER */
.container {
/* centers the content on the page, use this class on the body element to center the entire page */
margin:0 auto;
/*Set the width to whatever you want the width of your site to be. */
width:100%;
}
/* 	DEFAULT ROW STYLES 
Set bottom padding according to preference */
.row {
padding-bottom:0;
margin-bottom:1rem;
}			  
/* DEFAULT COLUMN STYLES */
.col {
display:block;
float:left;
width:100%;
margin-bottom:1rem;
}
#content .row {
margin-bottom:0;
}
/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after {
content:"";
display:table;
clear:both;
}
#banner {
background:#fff;
}
#content {
background:none;
}
#MainContent {
background:#fff;
}
#sidebar-left {
background:#007700;
}
#sidebar-right {
background:#007700;
}
#footer {
background:#fff;
}
#footer p {
margin:0;
font-size:1.4rem;
}
/*=================================================
Intermediate CSS Styles
Targeted towards tablets
=================================================*/
@media (min-width: 30em) {
html {
}
body {
width:90%;
background:#777;
}
#content .col {
margin-bottom:0rem;
}

.gutters .col:first-child {
margin-left:0;
}

}
/*=================================================
Main CSS Styles
Targeted towards laptops and desktops
=================================================*/
@media (min-width: 60em) {
html {
}
body {
width:80%;
max-width:1004px;
background:#777;
}
/*---------------------Begin Menu----------------------------*/
/*Main menu settings*/
#navigation {
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
font-family:Verdana, Geneva, sans-serif;
z-index:777;
position:relative;
background:#fff;
}
/*Top menu items*/
#navigation ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
/*
Using width:100% will make the menu no longer centered.
However, when used with a width on the ul li element, it can create equal width menu items
*/
/*width:100%;*/
}
#navigation ul li {
/*Left and right margins determine space between menu items*/
margin:0;
padding:0;
float:left;
position:relative;
left:50%;
/*
100 divided by total number of top level items
*/
/*width:20%;*/
}
/*Top level - normal state*/
#navigation ul li a {
display:block;
margin:0;
padding:1.2rem 1.4rem;
font-size:1rem;
background:#fff;
text-decoration:none;
color:#444;
font-weight:bold;
text-align:center;
}
/*Top level - active state*/
#navigation ul li.active a {
color:#fff;
background:#000;
}
/*Top level - hover state*/
#navigation ul li:hover a {
background:#36f;
color:#fff;
text-decoration:none;
}
/* Submenu items */
#navigation ul ul {
/*Sub menus are hidden by default*/
display:none;
position:absolute;
top:auto;
left:0;
float:left;
/*resets the right:50% on the parent ul*/
right:auto;
/*width of the drop-down menus*/
width:15rem;
}
/*Makes second level visible*/
#navigation ul li:hover ul {
display:block;
}
#navigation ul ul li {
/*resets the left:50% on the parent li*/
left:auto;
margin:0;
clear:left;
float:left;
width:100%;
}
/*Second level background - normal state*/
#navigation ul ul li a,
#navigation ul li.active li a,
#navigation ul li:hover ul li a {
font-size:0.8rem;
font-weight:normal;
background:#eee;
padding:0.8rem 1rem;
color:#444;
float:left;
width:100%;
}
/*Second level background - hover state*/
#navigation ul ul li:hover a:hover,
#navigation ul li.active ul li a:hover,
#navigation ul li:hover ul li a:hover {
background:#000;
color:#fff;
float:left;
}
/* Flip the last submenu so it stays within the page */
#navigation ul li.last > ul {
left:auto;
right:0;
}
/*Keeps third level hidden*/
#navigation ul ul ul li {
display:none;
}
/*Makes third level visible*/
#navigation ul ul li:hover ul li {
display:block;
}
/*Positions and sizes third level menu*/
#navigation ul ul ul{
/*equal to width of ul ul*/
left:150px;left:15rem;
top:0;
width:150px;width:15rem;
}
/*Third level background - normal state*/
#navigation ul ul ul li a,
#navigation ul li.active li li a,
#navigation ul li:hover ul li li a {
background:#e2dfa8;
}
/*Third level background - hover state*/
#navigation ul ul ul li:hover a:hover,
#navigation ul li.active ul li li a:hover,
#navigation ul li:hover ul li li a:hover {
background:#b2ab9b;
}
#navigation ul li.last > ul ul{
left:auto;
right:150px;right:15rem;
top:0;
}
/*---------------------End Menu----------------------------*/

.span_1 {width:4.16666666667%;}
.span_2 {width:8.33333333333%;}
.span_3 {width:12.5%;}
.span_4 {width:16.6666666667%;}
.span_5 {width:20.8333333333%;}
.span_6 {width:25%;}
.span_7 {width:29.1666666667%;}
.span_8 {width:33.3333333333%;}
.span_9 {width:37.5%;}
.span_10 {width:41.6666666667%;}
.span_11 {width:45.8333333333%;}
.span_12 {width:50%;}
.span_13 {width:54.1666666667%;}
.span_14 {width:58.3333333333%;}
.span_15 {width:62.5%;}
.span_16 {width:66.6666666667%;}
.span_17 {width:70.8333333333%;}
.span_18 {width:75%;}
.span_19 {width:79.1666666667%;}
.span_20 {width:83.3333333333%;}
.span_21 {width:87.5%;}
.span_22 {width:91.6666666667%;}
.span_23 {width:95.8333333333%;}
.span_24 {width:100%;}

.gutters .col {
margin-left:2%;
}

.gutters .span_1 {width:2.25%;}
.gutters .span_2 {width:6.5%;}
.gutters .span_3 {width:10.75%;}
.gutters .span_4 {width:15.0%;}
.gutters .span_5 {width:19.25%;}
.gutters .span_6 {width:23.5%;}
.gutters .span_7 {width:27.75%;}
.gutters .span_8 {width:32.0%;}
.gutters .span_9 {width:36.25%;}
.gutters .span_10 {width:40.5%;}
.gutters .span_11 {width:44.75%;}
.gutters .span_12 {width:49.0%;}
.gutters .span_13 {width:53.25%;}
.gutters .span_14 {width:57.5%;}
.gutters .span_15 {width:61.75%;}
.gutters .span_16 {width:66.0%;}
.gutters .span_17 {width:70.25%;}
.gutters .span_18 {width:74.5%;}
.gutters .span_19 {width:78.75%;}
.gutters .span_20 {width:83.0%;}
.gutters .span_21 {width:87.25%;}
.gutters .span_22 {width:91.5%;}
.gutters .span_23 {width:95.75%;}
.gutters .span_24 {width:100%;}
}