/*--------------------------------------------------------------
>>> 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: #f1f1f1;}
.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; color: #212121;}
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: 1.5rem /* 27px */; line-height: 1.2 /* 31px */; font-weight: 600; margin-bottom: 1.95em; 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 */;}

#home h2, p.pullquote {padding-left: .65em; border-left: .1125em solid #ee4938;}
#home p.pullquote {font-size: 1.5rem; line-height: 1.4; margin-bottom: 1.3em;}

.ff_logo h1 {font-size: 1rem; padding-left: 0; border-left: 0;}

@media screen and (min-width: 64em) {
    body {font-size: 131.3% /* 21px */; line-height: 1.65 /* 30px */;}
	h1 {font-size: 2.222222rem /* 40px */; line-height: 1.15 /* 46px */;}
	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 {}
}

h1 time {font-size: 1rem; color: #8a8a8a;}
#blogindex h1, #siteindex h1 {margin-bottom: 0;}

/*--------------------------------------------------------------
7.0 Links + Selection
--------------------------------------------------------------*/
a {text-decoration: none; color: #02ad28; 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; width: 88%; margin-left: auto; margin-right: auto; padding-top: 5.2em; padding-bottom: 1.3em;}
.wrap {width: 88%; margin-left: auto; margin-right: auto; padding: 0;}
@media only screen and (min-width: 44em) {
    main {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;}


/*--------------------------------------------------------------
8.0 Header
--------------------------------------------------------------*/
header[role=banner] + * {margin-top:0;}
header[role=banner] {position: fixed; display: flex; width: 100%; height: 2.6em; margin: 0; padding: .65em 2.6em; border-top: 5px solid #21ad28; z-index: 10; color: #22232b; background-color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); -webkit-transition: padding 0.2s ease-in-out; -moz-transition: padding 0.2s ease-in-out; transition: padding 0.2s ease-in-out; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;}
header[role=banner] .logo {position: fixed; top: 1.3em; left: 1.3em; width: 7.136em;}

@media only screen and (min-width: 61em) {
header[role=banner] {background-color: transparent; box-shadow: none;}
header[role=banner].shrink {background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);}
}

header[role=banner] nav li {font-size: .75em; border-bottom: none; text-transform: uppercase; color: #22232b;}
header[role=banner] a {border-bottom: none;}


/*--------------------------------------------------------------
8.1 Header Navigation
--------------------------------------------------------------*/
header[role=banner] nav {height: 2.222em; flex-grow: 1.3;}
header[role=banner] nav ul {display: flex; margin-top: 0; padding: 0; text-transform: lowercase; flex-wrap: nowrap; justify-content: flex-end;}
header[role=banner] nav ul li {margin-left: 2.195em;; list-style: none;}

@media only screen and (max-width: 61em) {
    header[role=banner] nav ul {width: 100%; min-height: 100%; padding-top: .65em; padding-bottom: .65em; position: fixed; top: 1.3em; left: 0; z-index: -1; opacity: 0; -webkit-transform: translateX(300%); transform: translateX(300%); -webkit-transition: .5s opacity ease; transition: .5s opacity ease; overflow-y: scroll; -webkit-overflow-scrolling: touch; font-size: 24px; text-align: left; transition: .5s opacity ease;}
	header[role=banner] nav ul.open {z-index: 10 !important; background: rgba(255, 255, 255, 0.98); -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; flex-direction: column; justify-content: flex-start;}
	header[role=banner] nav ul li > a {display: inline-block; padding: 10px 0; text-align: left;}
}


/*--------------------------------------------------------------
8.2 Header Main Nav Hamburger
--------------------------------------------------------------*/
header[role=banner] .hamburger-container {display: none;}
.hamburger-container {border: 1px solid #22232b; padding: 7px 6px; cursor: pointer;}
.hamburger-menu {width: 10px; height: 7px;}
.bar, .bar:after, .bar:before {width: 10px; height: 1px;}
.bar {position: relative; -webkit-transform: translateY(3px); transform: translateY(3px); background: #22232b; -webkit-transition: all 0ms 300ms;
    transition: all 0ms 300ms;}
.bar.open {background: rgba(34, 35, 43, 0);}
.bar:before {content: ""; position: absolute; left: 0; bottom: 3px; background: #22232b; -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.bar:after {content: ""; position: absolute; left: 0; top: 3px; background: #22232b; -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.bar.open:after {top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.bar.open:before {bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);}

@media only screen and (max-width: 61em) {
    header[role=banner] .hamburger-container {display: block; top: .694em; right: 13px; position: fixed; z-index: 11;}
}

/*--------------------------------------------------------------
11.0 Page-specific Elements
--------------------------------------------------------------*/
.review {padding-bottom: 1.3em; border-bottom: 1px solid #ee4938;}
aside {padding-top: 1.3em; border-top: 1px solid rgba(0, 0, 0, 0.5);}
#blogindex article {padding-bottom: 1.3em; border-bottom: 1px solid #ee4938;}


/*--------------------------------------------------------------
11.0 Footer
--------------------------------------------------------------*/
footer {margin: 0; border-top: 2px solid #000; 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: 44em;) {
    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;}