/* -----------------------
Base styles
------------------------*/

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body
{
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #00253c;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

h1,h2,h3,h4,h5,h6
{
	margin: 0 0 .5em;
	font-weight: 400;
	line-height: 1.1;
	/*text-transform: lowercase; */
}

h1 { font-size: 1.5em; } /* 36px */
h2 { font-size: 1.125em; } /* 28px */
h3 { font-size: 1.125em; } /* 22px */
h4 { font-size: 1em; } /* 18px */
h5 { font-size: 1em; } /* 16px */
h6 { font-size: .875em; } /* 14px */

p
{
	margin: 0 0 1.5em;
	line-height: 1.5;
}

a:link { color: #00253c; }
a:visited { color: #00253c; }
a:focus { color: black; }
a:hover { color: #00253c; }
a:active { color: #00253c; }

/* -----------------------
Layout styles
------------------------*/

.container
{
	max-width: 50em;
	margin: 0 auto;
	/*font-size: initial;*/
}

.header
{
	background-color: #F83515; 
	color: white; 
	padding: 2px 10px 2px 0px; 
	text-align: left; 
	transition: top .5s;
	-moz-box-shadow: 0 0 3px 3px #999;
	-webkit-box-shadow: 0 0 3px 3px #999;
	box-shadow: 0 0 3px 3px #999;
}

.header-heading { margin: 0; }

.content
{
	padding: 0.5em 1.25em 1em 1.25em;
	background-color: #fff;
}

.content .highlights
{
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block; 
	float: right; 
	margin: 0 20px 10px 20px; 
	padding: 5px 15px 20px 30px;
	max-width: 250px;
	background-color: #F0F2F4;
}

.content .highlights li
{
	margin: 15px 0 0 0;
}

.content .highlights li .fa
{
	margin-right: 6px;
	color: #F83515;
}

.footer
{
	color: #fff;
	background: #00253c;
	padding: 1em 1.25em;
}

/* -----------------------
Nav
------------------------*/

.nav
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li
{
	display: inline-block;
	margin: 0;
}

.nav a
{
	display: inline-block;
	margin: .2em 0.6em;
	color: #fff;
	text-decoration: none;
	position: relative;
	font-size: 26px;
	font-weight: 300;
}

.nav li.active > a:after 
{
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #ffffff;
	display: block;
	position: absolute;
	bottom: -16px;
	content: '';
	left: 50%;
}

.nav li#home a img
{
	width: 47px; 
	height: 50px; 
	vertical-align: middle;
}

.nav li#home a
{
	margin: .1em 0.2em;
}

/* -----------------------
Footer
------------------------*/

.footercolumns
{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}

.footercolumns strong
{
	font-size: 14px;
	font-weight: 400;
}

.footercolumns li
{
	display: inline-block;
	margin: 20px 50px 0 0;
	height: 100%;
	vertical-align: top;

}

.footercolumns #logo {
    width: 100px;
}

.footercolumns a
{
	color: #fff;
	text-decoration: none;
}

.footercolumns a:link { color: white; }
.footercolumns a:visited { color: white; }

.footernav li:before {    
    margin:0 10px 0 -20px;
    font-family: 'FontAwesome';
    width: 12px;
}

.footernav li {    
    display: block; 
    padding-bottom: 5px;
	margin-top: 0;
}

.footernav {
    list-style:none;
    padding: 0;
    margin: 0;
}

.footernav li#phone:before { content: '\f095'; padding-right: 3px; }
.footernav li#email:before { content: '\f003'; }
.footernav li#linkedin:before { content: '\f0e1'; padding-right: 2px; }
.footernav li#twitter:before { content: '\f099'; padding-right: 1px; }
.footernav li#admin:before { content: '\f0f6'; padding-right: 2px; }

ul#contact {
  padding-left: 20px;  
}

/* -----------------------
Single styles
------------------------*/

.img-responsive { max-width: 100%; }

/* -----------------------
Wide styles
------------------------*/

@media (min-width: 42em)
{
	.header { /*padding: 1.5em 3em; */}
	.nav-bar { padding: 1em 3em; }
	.content { padding: 1em 3em; }
	.footer { padding: 1em 3em 2em 3em }
	
}


/* -----------------------
Mobile styles
------------------------*/

@media (max-width: 46em)
{

	.nav li.active  a{
		border-bottom: 1px dotted #ffffff;
	}

	.nav li.active > a:after {
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}
	
}	


@media (max-width: 25em)
{

	.nav li
	{
		display: block;
		padding: 0;
		border-bottom: 0;
		padding: .2em 0.5em;
		color: #fff;
		text-decoration: none;
	}
	
	.nav a
	{
		font-size: 16px;
	}
	.nav li#home a
	{
		margin: 0.7em;
	}
	.nav {
		margin-bottom: 0.5em;
	}
}