/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

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,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

strong, b {
	font-weight: 700;
}

div, img, span {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/*------------------------------------*\
    $UTILITY
\*------------------------------------*/

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.phone {
	white-space: nowrap;
	color:	#ED1C24;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.mobile-image {
	display: none;
}

/*------------------------------------*\
    $MAIN
\*------------------------------------*/


/* GO! */

html {
	font-size: 100%;
        -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
	margin: 3rem 0 0 0;
	margin: 48px 0 0 0\9;
	background: #f5f5f5;	
}

body {
	font-family: "proxima-nova",sans-serif;
	font-weight: 400;
	font-size: 1.19rem;
	font-size: 19px\9;	
	color: #3a3a3a;
	background: url(../image/content-bg.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-color: #fff;		
}

a {
	color: #ED1C24;
}

.container {
	width: 1170px;
	margin: 0 auto;
	position: relative;
	-webkit-overflow-scrolling: touch;
/*	-webkit-transform: translate3d(0, 0, 0); */
}

.logo {
	width: 100%;
	background: #f5f5f5;
}

.logo .base {
	height: 8rem;
	height: 128px\9;	
	background: url(../image/logo.png);
	background-size: contain;
	-ms-behavior: url(backgroundsize.min.htc);
	background-repeat: no-repeat;
	display: block;
	/* margin: 3rem auto; */
	margin: 2.5rem 0;
	margin: 40px 0\9;	
	width: 75%;
	float: left;
}

.logo .accred {
	height: 8rem;
	height: 128px\9;	
	background: url(../image/fpa-logo.png);
	background-size: contain;
	background-position: right center;
	-ms-behavior: url(backgroundsize.min.htc);
	background-repeat: no-repeat;
	display: block;
	/* margin: 3rem auto; */
	margin: 2.5rem 0;
	margin: 40px 0\9;	
	float: right;
	width: 25%
}

.logo .container {
	background: url(../image/logo-bg.png);
	background-repeat: no-repeat;
	background-position: top center;	
}

p {
	line-height: 1.5;
	margin: 0 0 1rem 0;
	margin: 0 0 16px 0\9;	
}

ol {
	line-height: 1.5;
	margin: 0 0 1rem 0;
	margin: 0 0 16px 0\9;	
	list-style: decimal;
	list-style-position: inside;
}

p:last-of-type {
	/* margin: 0; */
}

.content-image {
	max-width: 100%;
	height: auto;
	border: .875rem solid #f5f5f5;
	border: 14px solid #f5f5f5\9;	
	margin: 0 0 1rem 0;
	margin: 0 0 16px 0\9;	
}

.mobile-image {
	max-width: 100%;
	height: auto;
	border: .875rem solid #f5f5f5;
	border: 14px solid #f5f5f5\9;	
	margin: 0 0 1rem 0;
	margin: 0 0 16px 0\9;	
	display: none;
}

.pullquote {
	background: #f5f5f5;
	padding: 2rem 2.2rem;
	padding: 32px 35px\9;
	margin: 2rem 0;
}

ul.product-list {
	color: #999;
	margin: 1rem 1rem 2rem 1rem;
	list-style: square;
	list-style-position: inside;
}

ul.product-list span {
	color: #3a3a3a;
	line-height: 1.5;
}

.info-alert {
	background: #fff0f0;
	padding: 1rem 1rem 1rem 4.7rem;
	padding: 16px 16px 16px 75px\9;	
	position: relative;
	line-height: 1.3;
	font-size: 1rem;
	font-size: 16px\9;	
}

.info-alert i {
	position: absolute;
	left: 1rem;
	left: 16px\9;
	top: 50%;
	font-size: 2rem;
	font-size: 32px\9;	
	margin-top: -19px;
	color: #ED1C24;
}

.info-message {
	background: #f5f5f5;
	padding: 1rem 1rem 1rem 4.7rem;
	padding: 16px 16px 16px 75px\9;	
	position: relative;
	line-height: 1.3;
	font-size: 1rem;
	font-size: 16px\9;		
}

.info-message i {
	position: absolute;
	left: 1rem;
	left: 16px\9;
	top: 50%;
	font-size: 2.2rem;
	font-size: 32px\9;	
	margin: -21px 0 0 -3px;
	color: #aaa;
}

.scrollup {
    width:2rem;
    width:32px\9;
    height:2rem;
    height:32px\9;    
    position:fixed;
    bottom:20px;
    right:25px;
    font-size: 1.5rem;
    font-size: 24px\9;    
    z-index: 10;
    display: none;
	text-decoration: none;    
}

.scrollup a {
	text-decoration: none;
}

/* !Type */

h1 {
	font-size: 3rem;
	font-size: 48px\9;	
	margin: 0 0 2rem 0;
	margin: 0 0 32px 0\9;	
	line-height: 3rem;
	line-height: 48px\9;	
	color: #ED1C24;
	letter-spacing: -0.1rem;
	letter-spacing: -1px\9;	
}

body#products-services h1 {
	margin: 0;
	position: absolute;
}

h2 {
	font-size: 2rem;
	font-size: 32px\9;	
	line-height: 2rem;
	line-height: 32px\9;
	margin: 0 0 2rem 0;
	margin: 0 0 32px 0\9;	
}

h3 {
	font-size: 1.5rem;
	font-size: 24px\9;
	line-height: 1.5rem;
	line-height: 24px\9;	
	margin: 0 0 1.5rem 0;
	margin: 0 0 24px 0\9;	
}

h4 {
	font-size: 1rem;
	font-size: 16px\9;	
}

/* !Grid */

.row-62 {
	width: 61%;
	margin: 0 3% 0 0;
	float: left;
}

.row-35 {
	width: 35%;
	margin: 0;
	float: right;
}

.row-62-alt {
	width: 62%;
	margin: 0 0 0 3%;
	float: right;
}

.row-35-alt {
	width: 35%;
	margin: 0;
	float: left;	
}

.row-72-alt {
	width: 70%;
	margin: 0 0 0 3%;
	float: right;
}

.row-25-alt {
	width: 25%;
	margin: 0;
	float: left;	
}

aside {
	color: #888;
	font-size: .875rem;
	font-size: 14px\9;	
}

/* !Navigation bar */

/*! responsive-nav.js v1.0.14 by @viljamis */

.nav-container {
  top: 0;
  left: 0;
  background: #333;
  height: 3rem;	
  height: 48px\9;	  
}

#nav ul {
  margin: 0;
  padding: 0;
  width: auto;
  display: block;
  list-style: none;
  float: left;
}

#nav .phone {
	color: #fff;
	line-height: 3rem;
	line-height: 48px\9;	
	float: right;
	font-size: 1rem;
	font-size: 16px\9;	
	font-weight: 700;
	text-transform: uppercase;
}

#nav li {
  width: 100%;
  display: block;
  text-transform: uppercase;
  font-size: .875rem;
  font-size: 14px\9;  
}

@media screen and (max-width: 590px) { /* Smartphone */

html {
	margin: 0;
}

.nav-container {
	height: auto;
}

.js #nav {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

#nav.opened {
  max-height: 9999px;
}

#nav .phone {
	display: none;
}

#nav li {
	padding: 1rem 0 0 0;
	padding: 16px 0 0 0\9;	
}

#nav li a {
	color: #fff;
	text-decoration: none;
	line-height: .875rem;
	line-height: 14px\9;	
}

#nav-toggle {
	display: block;
	font-size: .875rem;
	font-size: 14px\9;	
	line-height: 3rem;
	line-height: 48px\9;	
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 1.5rem;
	padding: 0 24px\9;	
}

#nav-toggle .phone {
	color: #fff;
	font-weight: 700;
	float: right;
}

#nav-toggle .icon-menu:before {
	margin: 0;
}

#nav a.active,
body#home #nav a.home {
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 .875rem;
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 14px\9;
}

body#products-services #nav a.products-services {
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 .875rem;
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 14px\9;}

body#services #nav a.services {
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 .875rem;
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 14px\9;
}

body#about-us #nav a.about-us {
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 .875rem;
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 14px\9;
}

body#contact #nav a.contact {
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 .875rem;
background: url(../image/button-marker.png) left repeat-y; padding: 0 0 0 14px\9;
}

}

@media screen and (min-width: 591px) { /* Normal */

.nav-container {
	position: fixed;
	width: 100%;
	z-index: 10;
}

#nav li {
	width: auto;
	float: left;
	margin: 0 1.5rem 0 0;
	margin: 0 24px 0 0\9;	
}

#nav li a {
	color: #fff;
	text-decoration: none;
	line-height: 3rem;
	line-height: 48px\9;	
	display: block;
}

#nav li a:hover {
	background: url(../image/button-marker.png) bottom left repeat-x;
}

#nav a.active,
body#home #nav a.home {background: url(../image/button-marker.png) bottom left repeat-x;}
body#products-services #nav a.products-services {background: url(../image/button-marker.png) bottom left repeat-x;}
body#services #nav a.services {background: url(../image/button-marker.png) bottom left repeat-x;}
body#about-us #nav a.about-us {background: url(../image/button-marker.png) bottom left repeat-x;}
body#contact #nav a.contact {background: url(../image/button-marker.png) bottom left repeat-x;}

.js #nav {
position: relative;
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(0, 0, 0);
}
.js #nav.closed {
max-height: none;
}
#nav-toggle {
display: none;
}

}



/* !Main Content */

.content {
	margin: 3rem auto;
	margin: 48px auto\9;	
}

.clients {
	border-top: 1px solid #ddd;
	/* border-bottom: 1px solid #ddd; */
	padding: 3rem 0;
	padding: 48px 0\9;	
}

.clients-list {
	text-align: justify;
}

.clients-list:before{
    content: '';
    display: block;
    width: 100%;
}

.clients-list:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.clients-list img {
	width: 15%;
	height: auto;
	display: inline-block;
}

/* .clients-list img:first-child {
	margin: 0;
} */

/* !scrollspy nav */

.box {
    margin: 20px; padding: 15px;
    background: #eee;
    height: 500px;
}

.sticky-nav {
	margin-top: 6rem;
	margin-top: 96px\9;	
	width: 292px;
}

section.page {
	padding: 6rem 0 0 0;
	padding: 96px 0 0 0\9;	
}

section.page h2 {
}

#navbar {
}

ul.nav li {
	position: relative;
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(0, 0, 0);
}

ul.nav li.active span {
	width: 0; 
	height: 0; 
	border-top: .6rem solid transparent;
	border-bottom: .6rem solid transparent;
	border-left: .6rem solid #ED1C24;
	border-top: 10px solid transparent\9;
	border-bottom: 10px solid transparent\9;
	border-left: 10px solid #ED1C24\9;
	position: absolute;
	right: -.5rem;
	right: -8px\9;	
	top: 50%;
	margin: -.6rem 0 0 0;
	margin: -10px 0 0 0\9;	
}

#navbar .nav li a {
    float: left;
    width: 292px;
    padding: 15px 0;
    padding: .75rem;
    padding: 12px\9;    
	background: #f5f5f5;
	margin: 0 0 1px 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .875rem;
	font-size: 14px\9;	
	line-height: .875rem;
	line-height: 14px\9;	
	color: #444;
}

#navbar .nav li a:hover {
    color: #fff !important;
    background: #ED1C24;
}

#navbar .nav li.active a {
    color: #fff;
    text-decoration: none;
    background: #ED1C24;
}

/* !Sidebar callout */

.callout {
	margin: 2rem 0 0 0;
	margin: 32px 0 0 0\9;	
	max-width: 290px;
}

.callout i {
	float: left;
	font-size: 2rem;
	font-size: 32px\9;	
	line-height: 3rem;
	line-height: 48px\9;	
	color: #aaa;
	width: 17%;
}

.callout p {
	float: right;
	width: 83%;
}

/* !Contact Form */

#contact_form {
	padding: 2.5rem;
	padding: 40px\9;	
	background: #f5f5f5;
	margin: 2rem 0 0 0;
	margin: 32px 0 0 0\9;	
}

#contact_form label {
	text-transform: uppercase;
	color: #777;
	display: block;
	font-size: .875rem;
	font-size: 14px\9;	
	line-height: .875rem;
	line-height: 14px\9;	
	margin: 0 0 .25rem 0;
	margin: 0 0 .4px 0\9;	
}

#contact_form .fl.fields {
	width: 50%;
	box-sizing: border-box;
	padding: 0 1.25rem 0 0;
}

#contact_form .fr.fields {
	width: 50%;
	box-sizing: border-box;
	padding: 0 0 0 1.25rem;
}

#contact_form div.fields div {
	margin: 0 0 1rem 0;
	margin: 0 0 16px 0\9;	
}

#contact_form div.fields div.error {
	margin: 0;
}


#contact_form input[type=text], #contact_form textarea {
	border: 1px solid #ccc;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: .5rem;
	padding: 8px\9;	
	margin: 0;
	font-size: 1rem;
	
}

#contact_form textarea {
	height: 11rem;
	height: 176px\9;	
}

p#submit, div.form-state {
	clear: both;
	padding: 1px 0 0 0;
	margin: 0;
}

#send_message { 
    width:200px !important; 
    border:none;
    cursor:pointer;
	background:#ED1C24;
	padding: .5rem;
	padding: 8px\9;	
	color:#FFFFFF;
	font-size: 1rem;
	font-size: 16px\9;	
	margin: 1rem 0 0 0;
	margin: 16px 0 0 0\9;	
}

div.error { 
	display: none; 
	padding: .5rem; 
	padding: 8px\9; 	
	color: #D8000C; 
	font-size: 1rem;
	font-size: 16px\9;	
	background-color: #FFBABA;
}

.success { 
	display: none; 
	padding:.5rem; 
	padding: 8px\9; 		
	color: #044406; 
	font-size: 1rem;
	font-size: 16px\9;		
	background-color: #B7FBB9;
	clear: both;
	width: 100%;
	margin: 1rem 0 0 0;
	margin: 16px 0 0 0\9;	
}

.error img { 
	vertical-align:top; 
}

/* !Footer */

footer {
	padding: 3rem 0;
	padding: 48px 0\9;	
	background: #f5f5f5;
	/* background-image: url(../image/footer-bg.jpg); */
	background-size: cover;
	color: #ccc;
	font-size: .875rem;
	font-size: 14px\9;	
	text-transform: uppercase;
}

footer .phone {
	color: #ccc;
	font-weight: 700;
}

/* !Colophon */

.colophon {
	padding: 3rem 0;
	padding: 48px 0\9;	
}



/* !Smaller Desktops */

@media screen and (max-width: 1280px) {

html {
	font-size: 16px;
}

.container {
	width: 920px;
}

.content {
	margin: 2rem auto;
	margin: 32px auto\9;	
}

.logo .base, .logo .accred {
	margin: 2rem 0;
	margin: 32px 0\9;	
}

.row-72-alt {
	width: 63%;
}

section.page {
	padding: 5rem 0 0 0;
	padding: 80px 0 0 0\9;	
}

.sticky-nav {
	margin-top: 5rem;
	margin-top: 80px\9;	
}

}

/* !Landscape Tablets */

@media screen and (max-width: 980px) {

html {
	font-size: 16px;
}

.logo .base, .logo .accred {
	margin: 2rem 0;
	height: 6rem;
}

.content-image {
	display: none;
}

.mobile-image {
	display: inline;
}

.container {
	width: 768px;
	padding: 0 2rem;
	-webkit-transform: translate3d(0, 0, 0);
}

.sticky-nav {
margin-top: 6rem;
width: 100%;
}

#navbar ul li {
	display: inline-block;
}

#navbar ul li .arrow {
	display: none;
}

#navbar .nav li a {
	width: auto;
}

#navbar .nav li.active a {
color: #444;
text-decoration: none;
background: #f5f5f5;
}

.row-72-alt {
	width: 100%;
}

.row-62 {
	width: 100%;
}

.row-35 {
	width: 100%;
	margin: 1rem 0;
}

.phone span {
	display: none;
}

}

/* !Portrait tablet and Smartphone Styles */

@media screen and (max-width: 768px) {

html {
	font-size: 16px;
}

.logo .base, .logo .accred {
margin: 2rem 0;
height: 5rem;
}

.content-image {
	display: none;
}

.mobile-image {
	display: inline;
}

h1 {
font-size: 2rem;
margin: 0 0 1.5rem 0;
line-height: 2rem;
}

h2 {
font-size: 1.5rem;
line-height: 1.5rem;
margin: 0 0 1rem 0;
}

.container {
	width: 100%;
	padding: 0 1.5rem;
	-webkit-transform: translate3d(0, 0, 0);
}

.row-35 {
	width: 100%;
	margin: 1rem 0;
}

.clients-list img {
width: 25%;
}

.sticky-nav {
margin-top: 6rem;
width: 100%;
}

#navbar ul li {
	display: inline-block;
}

#navbar ul li .arrow {
	display: none;
}

#navbar .nav li a {
	width: auto;
}

#navbar .nav li.active a {
color: #444;
text-decoration: none;
background: #f5f5f5;
}

section.page {
padding: 2rem 0 0 0;
}

#contact_form {
padding: 1.5rem;
background: #f5f5f5;
margin: 2rem 0 0 0;
}

#contact_form .fields {
width: 100%;
}

#contact_form .fl.fields {
width: 100%;
padding: 0;
}

#contact_form .fr.fields {
width: 100%;
padding: 0;
}

footer {
	padding: 1rem 0;
}

}
