﻿* { margin: 0; padding: 0; outline: none; border: none; -moz-box-sizing: border-box; -webkit-box-sizing:border-box; box-sizing: border-box;}

body			{font-family:Arial, Helvetica," sans-serif"; font-size: 14px; font-family: 'Open Sans', sans-serif; color: #000;}
.wrapper		{width:960px; margin: 0 auto; max-width: 100%; padding: 20px;}
p				{font-size:14px; line-height: 1.4em; margin-bottom: 1em; font-weight: 300}
p strong		{font-weight:700;}
p a 			{color:inherit}
p a:hover		{color:#71bf43;}

a	{transition: color 0.2s ease-in-out}

header					{padding-top:35px; padding-bottom: 20px;}
.nav					{display:inline-block; text-align: right; float: right; position: relative;}
.nav-icon				{display:none;}
ul.main-nav				{list-style: none; text-transform: uppercase; font-weight: 300; margin-top: 40px; display: inline-block;}
ul.main-nav li			{display:inline-block; margin-left: 20px;}
ul.main-nav li a		{text-decoration: none; color: #000}
ul.main-nav li.active a,
ul.main-nav li a:hover	{color:#71bf43;}

/** LIGHT COL **/
.left-col		{width:23%; max-width: 100%; float: left; padding: 14px; background-color: #e7e7e8;color: #24408e; }
.left-col ul	{margin-left:20px}
.left-col ul li	{line-height:1.2em; margin-bottom: 10px;}

/** RIGHT COL **/
.right-col		{width:75%; max-width: 100%; float: right; font-size: 0;}
.right-col h1	{font-weight:700; font-size: 16px; margin-bottom: 1em; line-height: 1.2em;}
.right-col h2	{font-weight:700; font-size: 14px; margin-bottom: 1em; line-height: 1.2em; font-style: italic;}
.right-col h3,
.right-col h4,
.right-col h5	{font-weight:400; font-size: 14px; margin-bottom: 1em; line-height: 1.2em; font-style: italic;}
.right-col ul,
.right-col ol	{font-size:14px; line-height: 1.4em; margin-bottom: 1em; font-weight: 300; margin-left:20px;}
.right-col ol li a,
.right-col ul li a	{color:inherit;}
.right-col ol li a:hover,
.right-col ul li a:hover	{color:#71bf43;}
.right-col-text	{width:60%; display: inline-block; vertical-align: top;}

.quote-container		{width: 32%; display: inline-block; margin-left: 8%; padding-bottom: 5px; color: #71bf43; text-align: right;}
.quote-container p		{font-weight:400; font-size: 15px; line-height: 1.6em;}
.quote-container .slide	{background-color:#e7e7e8; padding: 20px;}

.header-image			{width:100%; height: auto; margin-bottom: 30px;}

/** FOOTER **/
footer						{display: block; margin-top: 60px;}
footer p.contact			{text-align:right; font-size: 15px; color: #58585a;}
footer p.contact a			{font-weight:700; text-decoration: none; color: inherit}
footer p.contact a:hover	{color:#71bf43;}
footer hr					{border-top:4px solid #e7e7e8; display: block;}
footer p.tagline			{font-weight: 700; color: #71bf43; font-size: 18px; text-align: right; display: inline-block; vertical-align: top; float: right;}
footer ul					{font-size:12px; color: #939598; margin-top: 20px;}
footer ul li				{display:inline-block;}
footer ul li a				{color:inherit; text-decoration: none;}
footer ul li a:hover		{color:#71bf43;}

#mobile-menu 			{width:300px; height:100%; background:#e7e7e8; position:fixed; top:0; bottom:0; left:100%; z-index:99; padding:80px 66px; transition: all 0.5s;}
#mobile-menu.open		{margin-left:-300px; box-shadow: 0 0 10px rgba(0,0,0,0.5)}
#mobile-menu ul			{margin-bottom:0px; text-transform: uppercase; font-weight: 300}
#mobile-menu ul li 		{list-style:none; display:block; }
#mobile-menu ul li a 		{color:#000; text-decoration:none; font-size:16px; margin-bottom:1em; display:block;}
#mobile-menu .menu-close 	{position: absolute; top: 25px; right: 25px; }

@media (max-width: 768px)

{

	.nav-icon		{display:inline-block; margin-top: 10px;}
	ul.main-nav		{display:none; float: none; position: absolute; right: 0; top: 40px; background-color: #fff; padding: 20px; padding-right: 0; margin-top: 0}
	ul.main-nav li	{display:block; margin-bottom: 10px;}
	.right-col	{width:100%; margin-bottom: 20px;}
	.left-col	{width:100%;}

	
}

@media (max-width: 420px)

{
	
	header 		{padding-top:10px;}
	.right-col	{width:100%; margin-bottom: 20px;}
	.right-col-text	{width:100%;}
	.quote-container	{width:100%; text-align:left; margin-left: 0; margin-top: 5px; margin-bottom: 5px;}
	
	footer				{margin-top:40px !important; text-align: center}
	footer p.tagline	{font-size:16px; width: 80%; float: none; text-align: center; margin: 15px auto; display: block}
	footer p.contact	{text-align:center}
	
}

@media (max-width: 330px)

{

	.logo	{width:200px; height: auto}
	.nav-icon	{margin-top:5px}
	
}


