/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Reset
2.0 Typography
3.0 Elements
4.0 Forms
5.0 Accesibility
6.0 Clearings
7.0 Header + Navigation
8.0 Home
9.0 Landing Pages
10.0 Content Pages
11.0 Footer


/*--------------------------------------------------------------
1.0 Reset
--------------------------------------------------------------*/
* {margin: 0; padding: 0; border: 0;}
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {display: block;}

img, video {max-width: 100%; height: auto; width: auto;}
iframe, object, embed {max-width: 100%;}
img {border: 0; -ms-interpolation-mode: bicubic;}
a img {border: 0;}

@-webkit-viewport {width: device-width; zoom: 1.0;}
@-moz-viewport {width: device-width; zoom: 1.0;}
@-ms-viewport {width: device-width; zoom: 1.0;}
@-o-viewport {width: device-width; zoom: 1.0;}
@viewport {width: device-width; zoom: 1.0;}

a, .link-block-styled, button, input, select, textarea, label, summary {touch-action: manipulation;}
* , * :before, * :after {box-sizing: border-box;}

.clearfix::before, .clearfix::after {content: "";display: table;}
.clearfix::after {clear: both;}


/*--------------------------------------------------------------
1.1 Basic Elements & Styling
--------------------------------------------------------------*/
* + * {margin-top: 1.3em;}
html {background: #fff;}
.compact * + * {margin-top: .65em;}
.compactissimo * + * {margin-top: .325em;}
.no-margin * + * {margin-top: 0 !important;}


/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
@font-face {font-family: 'Colfax'; font-style: normal; font-weight: normal; src: local('Colfax Regular'), url('../fonts/Colfax-Regular.woff') format('woff');}
@font-face {font-family: 'Colfax'; font-style: italic; font-weight: normal; src: local('Colfax Regular Italic'), url('../fonts/Colfax-RegularItalic.woff') format('woff');}
@font-face {font-family: 'Colfax'; font-style: normal; font-weight: bold; src: local('Colfax Medium'), url('../fonts/Colfax-Medium.woff') format('woff');}
@font-face {font-family: 'Colfax Medium Italic'; font-style: italic; font-weight: bold; src: local('Colfax Medium Italic'), url('../fonts/Colfax-MediumItalic.woff') format('woff');}

html {font-size: 106.25% /* 17px */; font-family: "Colfax", sans-serif;}
body {font-size: 1rem; font-weight: 400; font-family: "Colfax", sans-serif; line-height: 1.3 /* 24px */; color: #333;}
h1, h2, h3, h4, h5, h6 {font-family: "Colfax", sans-serif; font-weight: bold; letter-spacing: -1px; color: #3a3a3a;}
h1 {font-size: 2rem /* 40px */; line-height: 1.05 /* 42px */; font-weight: 600; padding-left: .65em; border-left: .1125em solid #ee4938;}
h2 {font-size: 1.5rem /* 27px */; line-height: 1.2 /* 31px */; font-weight: 600;}
h3 {font-size: 1.222222rem /* 22px */; line-height: 1.2 /*25px */; font-weight: 600;}
h4 {font-size: 1.055555rem /* 19px */; line-height: 1.315789 /* 25px */; font-weight: 600;}
h5 {font-size: 1rem /* 18px */; line-height: 1.444444 /* 26px */;}

#lp_ffn h2, p.pullquote {padding-left: .65em; border-left: .1125em solid #ee4938;}
.ff_logo h1 {font-size: 1rem; padding-left: 0; border-left: 0;}

p.pullquote {font-size: 1.5rem; line-height: 1.4; margin-bottom: 1.3em;}

@media screen and (min-width: 64em) {
    body {font-size: 131.3% /* 21px */; line-height: 1.65 /* 30px */;}
	h1 {font-size: 3.277777rem /* 59px */; line-height: 1.050847 /* 62px */;}
	h2 {font-size: 2.222222rem /* 40px */; line-height: 1.15 /* 46px */}
	h3 {font-size: 1.5rem /* 27px */; line-height: 1.14811481 /* 31px */}
	.pullquote {font-size: 2.222rem; line-height: 1.65; margin-bottom: 2.6em;}
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {font-size-adjust: 0.5;}
.font-light, .font-light a {color: rgba(0, 0, 0, 0.5);}
.font-small {font-size: 80%;}

footer {font-size: .7588rem /* 12px */;}

@media only screen and (max-width: 61em) {
    footer .social a {}
}


/*--------------------------------------------------------------
7.0 Links + Selection
--------------------------------------------------------------*/
a {text-decoration: none; color: #3a3a3a; border-bottom: 1px solid #ee4938; transition: color 0.2s ease-out;}
a:hover {border-bottom: transparent; color: #a8291c;}

::selection, ::-moz-selection {background: #3a3a3a; background: #fff8a3; color: #3a3a3a; text-shadow: none;}


/*--------------------------------------------------------------
5.0 Accessibility
--------------------------------------------------------------*/
.screen-reader, .svg-fallback-text {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0);  overflow: hidden;}
.screen-reader-focusable:active, .screen-reader-focusable:focus {position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;}


/*--------------------------------------------------------------
3.0 Basic Layout Elements
--------------------------------------------------------------*/
body {margin-top: 0;}
main {position: relative; padding-top: 1.3em; padding-bottom: 1.3em; border-top: 5px solid #ee4938; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);}
.wrap {width: 88%; margin-left: auto; margin-right: auto; padding: 0;}
@media only screen and (min-width: 44em) {
    .wrap {max-width: 30em;}
}

header.ff_logo {display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end;}
img.ff_logo {width: 5em;}


/*--------------------------------------------------------------
4.0 Forms & Buttons
--------------------------------------------------------------*/
form {position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1.95em 0;}
input, optgroup, select, textarea {font: inherit; font-size: 1rem; line-height: normal; color: rgba(0, 0, 0, 0.8); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);}
input, select, textarea {display: block; width: 100%; padding: .5em .5em .5em .5em; border-radius: 1px; border: 2px solid rgba(0, 0, 0, 0.3); background: #fff; flex: 8 8 1em;}
input[type=text], input[type=email], input[type=password], textarea {-webkit-appearance: none;}
input:focus, select:focus, textarea:focus {border-color: rgba(0, 0, 0, 0.5); outline: 0;}
input:disabled {background: transparent; color: rgba(0, 0, 0, 0.5);}
button {display: inline-block; padding: .5em .9375em .5em .9375em; border: 2px solid transparent; font-weight: 600; text-decoration: none; text-align: center; vertical-align: middle; background: rgba(0, 0, 0, 0.8); color: rgba(255, 255, 255, 0.9); flex: 0 0 1em; cursor: pointer; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);}
button {width: 100%; font-size: inherit; line-height: normal; overflow: visible; text-transform: none; -webkit-appearance: button; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
button:focus {outline: none;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}


/*--------------------------------------------------------------
11.0 Page-specific Elements
--------------------------------------------------------------*/
#lp_ffn aside {padding-top: 1.3em; border-top: 1px solid rgba(0, 0, 0, 0.5);}


/*--------------------------------------------------------------
11.0 Footer
--------------------------------------------------------------*/
footer {margin: 0; background: #2a2a2a; color: #fff;}
footer .logo {width: 5em; margin: 0; padding: 0; color: #ebebeb;}
footer .wrap {width: 90%; height: 100%;	 display: flex; flex-direction: column; justify-content: flex-end;}
@media (min-width: 600px) {
    footer .wrap {width: 84%;}
}
footer .wrap header {margin-top: 1.3em; text-align: center;}
footer header a {border-bottom: none;}
footer .site_nav::before {position: relative; content: ""; display: inline-block; width: 2.888888em; height: 1px; left: 48%;margin-bottom: .325em; margin-left: -1.444444em; border-top: 2px solid #9a9a9a;}
footer .site_nav::after {position: relative; content: ""; display: inline-block; width: 2.888888em; height: 1px; left: 48%; margin-left: -1.444444em; margin-top: .325em; border-top: 2px solid #9a9a9a;}
footer .site_nav ul {display: flex; justify-content: space-around;}
footer .site_nav ul li {display: inline; list-style: none;}
footer a {color: #fff;}
footer .social {margin-bottom: 1.5em; cursor: default;}
footer .social a {padding: 6px; margin: 3px; color: #fff; opacity: .8;}
footer .social a:hover {opacity: 1;}
footer .copyright {text-align: center; opacity: .4;}
footer .copyright:hover {opacity: 1;}
footer .copyright a {border-bottom: none;}