@charset "UTF-8";
/* Fe V2.0
 * Copyright 2018, Jethro Wilson
 * fe.jethrowilson.com
 */
/*
    Build with Fe.

    The Iron Toolkit.

    Get up and running swiftly at fe.jethrowilson.com

    CONCEPTS
        Fe is designed for fluid transitions between desktop and mobile environments.

        Fe makes use of Css Grids & Flexbox.
*/
/*
    i. Color
   ii. Font
  iii. Margins

    • Layout
    • Typography
    • Links
    • Lists

    • Tables
    • Forms
    • Elements

    • Utilities
*/
/*
    0.Debug
*/
/*
    i. Color
*/
/*
   ii. Fonts
*/
/*
  iii. Layout Defaults
*/
/* Layout
------------
        • Container - Master Max Width Box
        • Row - Horizontal Segment, usually a 'screen' of content 
*/
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.container-flex {
  display: flex;
  justify-content: center;
}

.master-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(20px, 1fr) minmax(200px, 1000px) minmax(20px, 1fr);
  grid-row-gap: 10px;
}

header, footer, section, .row, column, .master-grid > div {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  grid-column: 2/span 1;
}

.master-grid > .full-width {
  grid-column: 1/span 3;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 3rem;
}
.grid.auto {
  grid-template-columns: repeat(autofill, minmax(10rem, 1fr));
}
.grid.one {
  grid-template-columns: 1fr;
}
.grid.two {
  grid-template-columns: repeat(2, 1fr);
}
.grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.grid.four {
  grid-template-columns: repeat(4, 1fr);
}
.grid.five {
  grid-template-columns: repeat(5, 1fr);
}
.grid.six {
  grid-template-columns: repeat(6, 1fr);
}
.grid.seven {
  grid-template-columns: repeat(7, 1fr);
}
.grid.eight {
  grid-template-columns: repeat(8, 1fr);
}
.grid.nine {
  grid-template-columns: repeat(9, 1fr);
}
.grid.ten {
  grid-template-columns: repeat(10, 1fr);
}
.grid .col-one {
  grid-column: span 1;
}
.grid .col-two {
  grid-column: span 2;
}
.grid .col-three {
  grid-column: span 3;
}
.grid .col-four {
  grid-column: span 4;
}
.grid .col-five {
  grid-column: span 5;
}
.grid .col-six {
  grid-column: span 6;
}
.grid .col-seven {
  grid-column: span 7;
}
.grid .col-eight {
  grid-column: span 8;
}
.grid .col-nine {
  grid-column: span 9;
}
.grid .col-ten {
  grid-column: span 10;
}

/*
@media (min-width:600px) {
    .column {
        float:left;
        margin-left: 2%;
    }
    .column:first-child {
        margin-left: 0;
    }
//    .column.one     { width:(100% / 12) }
}*/
/* Navigation
-----------------
*/
nav ul {
  list-style: none;
  width: 100%;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
}
nav ul li {
  display: inline;
  margin-left: 4%;
}
nav ul :first-child {
  margin-left: 0;
}

header {
  padding-top: 2rem;
}
footer {
  margin-bottom: 1.6rem;
}
footer nav {
  font-size: 1.2rem;
}
footer a {
  color: #c8c8c8;
}

/* Layout Color
------------------
*/
.lc-highlight {
  background-color: #eee;
}

/* Typography
----------------
        • html
        • body
        • h*
        • p
*/
html {
  font-size: 62.5%;
}

body {
  font-family: "Sofia-Pro", "Sofia Pro", sans-serif;
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0pt;
  color: #808080;
}

::selection {
  background: #ff1521;
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 400;
  font-family: "Sofia-Pro", "Sofia Pro", sans-serif;
  text-transform: capitalize;
}

h1 {
  font-size: 4.8rem;
  line-height: 1.2;
  letter-spacing: 0.2rem;
}

h2 {
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: 0.2rem;
}

h3 {
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: 0.2rem;
}

h4 {
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: 0.1rem;
}

h5 {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.1rem;
}

h6 {
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: 0.1rem;
}

p {
  margin-top: 0;
}
p a {
  font-weight: bold;
}

blockquote {
  margin: 0;
  color: #c8c8c8;
  font-family: "Vollkorn";
}

/* Links
-----------
        • a - Links
*/
a {
  color: #14adff;
  text-decoration: none;
}
a:hover {
  color: #6dd1fc;
}
a:active {
  color: #ff1521;
}

/* Lists
-----------
*/
ul {
  list-style: disc inside;
}

ol {
  list-style: decimal inside;
}

ul, ol {
  padding-left: 0;
  margin-top: 0;
}

ul ul, ol ul {
  list-style: circle inside;
}

ul ol, ol ol {
  list-style: lower-alpha;
}

ul ul, ul ol, ol ol, ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
}

li {
  margin-bottom: 1rem;
}

/* Tables
------------
*/
table {
  border-spacing: 0;
  width: 100%;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
th:first-child, td:first-child {
  padding-left: 0;
}
th:last-child, td:last-child {
  padding-right: 0;
}

/* Forms
-----------
*/
/* Elements
--------------
*/
img {
  width: 100%;
}

.button, button,
input[type=submit], input[type=reset], input[type=button] {
  display: inline-block;
  box-sizing: border-box;
  height: 4.2rem;
  padding: 0 3rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #14adff;
  text-align: center;
  font-family: "Avenir Next";
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  line-height: 4rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 3px;
  border: 2px solid #14adff;
  cursor: pointer;
}
.button:hover, .button:focus, button:hover, button:focus,
input[type=submit]:hover,
input[type=submit]:focus, input[type=reset]:hover, input[type=reset]:focus, input[type=button]:hover, input[type=button]:focus {
  color: #6dd1fc;
  border-color: #6dd1fc;
}
.button:active, button:active,
input[type=submit]:active, input[type=reset]:active, input[type=button]:active {
  color: #ff1521;
  border-color: #ff1521;
}

.b-solid {
  color: #fff;
  background-color: #14adff;
}
.b-solid:hover, .b-solid:focus {
  background-color: #6dd1fc;
  color: #fff;
}
.b-solid:active {
  background-color: #ff1521;
}

progressbar {
  background-color: #eee;
  height: 3rem;
  display: block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 4%;
  margin-right: 4%;
  border-radius: 0.5rem;
  overflow: hidden;
  box-sizing: border-box;
}

progressor {
  background-color: #14adff;
  border-radius: 0.5rem;
  height: 100%;
  display: block;
  box-sizing: border-box;
}

hr {
  margin-top: 2rem;
  margin-bottom: 3rem;
  border-width: 0;
  border-top: 0.2rem solid #eee;
  width: 100%;
  grid-column-end: span 3;
}

/* Utilities
---------------
*/
.u-g-align-center {
  justify-items: center;
}

.u-g-valign-center {
  align-items: center;
}

.u-gi-align-center {
  align-self: center;
}

.u-align-left {
  text-align: left;
}

.u-align-right {
  text-align: right;
}

.u-align-center {
  text-align: center;
}

.u-c-one {
  color: #14adff;
}

.u-c-two {
  color: #6dd1fc;
}

.u-c-alt {
  color: #ff1521;
}

.u-c-comp {
  color: #ff6614;
}

.u-c-m-b {
  color: #000;
}

.u-c-m-g1 {
  color: #808080;
}

.u-c-m-g2 {
  color: #c8c8c8;
}

.u-c-m-g3 {
  color: #eee;
}

.u-c-m-w {
  color: #fff;
}

.u-t-strike {
  text-decoration: line-through;
}

.u-clear,
header:after, footer:after, section:after, .row:after {
  content: "";
  display: table;
  clear: both;
}

/*# sourceMappingURL=fe.css.map */