@import url("reset.css");
@import url("font-awesome.min.css");
@import url("colorbox.css");
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700&display=swap');

body {background: #000; color: #fff; font: 300 100%/1.5em "Montserrat", Arial, Helvetica, sans-serif;}

a {border: none; color: #666; text-decoration: none;}
a:hover {text-decoration: none; color: #fff;}
a:focus {outline: none;}
img, a, a img {border: none;}
.clear {clear: both;}
.hide {display: none;}
.rule {height: 1px; background: #eee; /*  margin: 20px 0;  */}
.rule hr {display: none;}
.devnote {background: lightyellow; color: red; padding: 5px;}

/* Base OVERRIDES */
h1,h2,h3 {margin:1em 0;/* top & bottom margin based on font size */}
h1,h2,h3,h4,h5,h6,strong {font-weight:bold;/*bringing boldness back to headers and the strong element*/}
abbr,acronym {border-bottom:1px dotted #000; cursor:help;/*indicating to users that more info is available */}
em {font-style:italic;/*bringing italics back to the em element*/}
blockquote,ul,ol,dl {margin:1em;/*giving blockquotes and lists room to breath*/}
ol,ul,dl {margin-left:2em;/*bringing lists on to the page with breathing room */}
ol li {list-style: decimal outside;/*giving OL's LIs generated numbers*/}
ul li {list-style: disc outside;/*giving UL's LIs generated disc markers*/}
dl dd {margin-left:1em;/*providing spacing for definition terms*/}
table {font-size:inherit; font:100%;}
th,td {/*  border:1px solid #000;  */ padding:.5em;/*borders and padding to make the table readable*/}
th {font-weight:bold; text-align:center;/*distinguishing table headers from data cells*/}
caption {margin-bottom:.5em; text-align:center;/*coordinated margin to match cell's padding*/}
p,fieldset,table,pre {margin-bottom:1em;/*so things don't run into each other*/}
select, input, button, textarea {/*  font:99% arial,helvetica,clean,sans-serif;  */}
input, textarea, select {font-family:inherit; font-size:inherit; font-weight:inherit;}
/* +++++++++++++++++++++ */
/*
.lato {font-family: 'Lato', sans-serif;}
.ffont {font-family: 'Open Sans', sans-serif;}
.muli {font-family: 'Muli', sans-serif;}
  */

.ffont {font-family: 'Montserrat', sans-serif;}

h1, h2, h3, h4 {font-weight: normal;}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

.buffer {height: 82px;}

.base-wrap {}

/* header */

.header {background-color: transparent;position: fixed;width: 100%;z-index: 3;}

/* logo */
.header .logoX {background: url(../img/FF_logo.png) no-repeat center; display: block;}
.header .logoX {/*margin: 16px 70px;float: left;width: 289px;height: 28px;background-size: 289px 28px;*/
	margin: 32px 0 32px 70px;
	float: left;
	width: 202px;height: 19px;
	background-size: 202px 19px;
}
/*
578x55 100%
289x28 50%
202x19 35%
145x14 25%
*/
@media only screen and (min-width : 800px) {
	.header .logoX {width: 289px;height: 28px;background-size: 289px 28px;}
}
@media only screen and (min-width : 1024px) {
	.header .logoX {margin: 32px 0 32px 140px;}
}


.header ul {margin: 0;padding: 0;overflow: hidden;background-color: #000;}
.header ul li {list-style-type: none; text-align:center;}
.header li a {display: block;padding: 10px 20px;color:#989898;text-decoration: none;font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size:70%;}
.header li a:hover,
.header .menu-btn:hover {color: #fff;}



/* menu */
.header .menu {clear: both;max-height: 0;transition: max-height .2s ease-out;}

/* menu icon */
.header .menu-icon {cursor: pointer;display: inline-block;float: right;margin: 14px 50px 0 0;padding: 28px 20px 28px 0px;position: relative;user-select: none;}
.header .menu-icon .navicon {background: #989898;display: block;height: 2px;position: relative;transition: background .2s ease-out;width: 18px;}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {background: #989898;content: '';display: block;height: 100%;position: absolute;transition: all .2s ease-out;width: 100%;}
.header .menu-icon .navicon:before {top: 5px;}
.header .menu-icon .navicon:after {top: -5px;}

/* menu btn */
.header .menu-btn {display: none;}
.header .menu-btn:checked ~ .menu {max-height: 240px;}
.header .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
.header .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
.header .menu-btn:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}

/* 48em = 7px */
@media only screen and (min-width : 800px) {
	.header ul {background-color: transparent;}
	.header li {float: left;}
	.header li a {padding: 10px 0 10px 28px;}
	.header .menu {clear: none;float: right; margin-right: 70px;margin-top: 26px;max-height: none;}
	.header .menu-icon {display: none;}
}
@media only screen and (min-width : 1024px) {
	.header .menu {margin-right: 140px;}
}


#footer {margin-top: 100px;margin-bottom: 150px;}
#footer .inside {color: #999;text-align: center; text-transform:uppercase; letter-spacing: .10em; font-size: 110%;}
#footer .inside a {color: #999 !important;}

/* respond */
@media only screen and (max-width : 600px) {
	#footer .inside {}
}