/* GRUNT CHECK: 4 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1em;
  box-sizing: border-box; }

main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

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

ul, li {
  margin: 0;
  padding: 0;
  list-style: none; }

a {
  cursor: pointer;
  color: currentColor; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25em;
  margin-bottom: 2rem;
  font-family: "Barlow", sans-serif;
  font-weight: normal;
  text-align: center; }

h1, h2 {
  font-family: "Barlow", sans-serif; }

h1 {
  font-size: 3rem; }

h2 {
  font-size: 2.50rem; }

h3 {
  font-size: 2.00rem; }

h4 {
  font-size: 1.75rem; }

h5 {
  font-size: 1.50rem; }

h6 {
  font-size: 1.25rem; }

@media (max-width: 800px) {
  h1 {
    font-size: 2.5rem; }

  h2 {
    font-size: 2rem; }

  h3 {
    font-size: 1.75rem; }

  h4 {
    font-size: 1.5rem; } }
hr {
  margin-top: 4rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid #DDDDDD; }

p, dl, ul, ol, pre, table {
  font-size: 1rem; }

p, dl, dt, dd {
  line-height: 1.75em;
  margin-bottom: 1.5rem; }
  p a, dl a, dt a, dd a {
    color: currentColor; }
  p em, dl em, dt em, dd em {
    font-style: italic; }
  p abbr, dl abbr, dt abbr, dd abbr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5); }
    p abbr:hover, dl abbr:hover, dt abbr:hover, dd abbr:hover {
      border-color: currentColor; }
  p code, dl code, dt code, dd code {
    background: rgba(221, 221, 221, 0.45);
    padding: .125em .33em;
    margin-right: .125rem; }
  p del, dl del, dt del, dd del {
    opacity: .7; }

code {
  font-family: monospace; }
  code var {
    color: #414042;
    font-style: italic; }

dl, ul, ol, pre {
  margin-bottom: 2rem; }

pre {
  background: #414042;
  color: #FFFFFF;
  padding: 2rem;
  border-radius: 4px; }

dt {
  margin-bottom: .5rem;
  text-decoration: underline; }

dd {
  margin-bottom: 2rem;
  margin-left: 1rem;
  color: #414042;
  font-style: italic; }
  dd:last-of-type {
    margin-bottom: 0; }
  dd:before {
    content: '>';
    margin-left: -1rem;
    margin-right: .5rem; }

pre {
  line-height: 1.5rem; }

main ul > li {
  list-style: disc; }

main ol > li {
  list-style: decimal-leading-zero; }

main ul, main ol {
  list-style: circle; }
  main ul li, main ol li {
    text-align: left;
    margin-left: 2.5rem;
    line-height: 1.5rem;
    margin-bottom: .25rem; }
    main ul li:last-of-type, main ol li:last-of-type {
      margin-bottom: 0; }
    main ul li > ol, main ul li ul, main ol li > ol, main ol li ul {
      margin-top: .25rem;
      margin-bottom: 0; }

table {
  width: 100%;
  margin-bottom: 2rem; }

tr:nth-of-type(2n) {
  background: rgba(221, 221, 221, 0.45); }

td, th {
  border: 1px solid rgba(65, 64, 66, 0.1);
  text-align: left;
  padding: 1rem; }

blockquote, q {
  width: calc(100% + 4rem);
  margin-left: -2rem;
  padding: 2rem 2rem .5rem 1.9rem;
  margin-bottom: 2rem;
  font-size: 1.25rem;
  line-height: 1.5em;
  font-style: italic;
  background: rgba(255, 255, 255, 0.5);
  border-left: 0.125em solid #414042; }
  blockquote cite, q cite {
    display: block;
    margin-top: 1rem; }
    blockquote cite a, q cite a {
      text-decoration: none;
      color: #414042; }

/* 
XXXXXXXXXXXXXXXX
EXCITING FORM STYLES
XXXXXXXXXXXXXXXX
*/
legend {
  font-family: "Barlow", sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 2rem; }

label {
  display: block;
  font-size: .85rem;
  cursor: pointer; }
  label:hover {
    color: #DDDDDD; }
    label:hover + input {
      background: #FFF; }
  label:active, label :focus {
    color: #DDDDDD; }

input, textarea, select {
  display: block;
  padding: .5rem;
  margin: .75rem 0 0 0;
  font-family: inherit;
  font-size: 1rem; }

select, [type='text'], [type='url'], [type='email'], [type='password'],
[type='tel'], [type='search'], [type='number'], [type='date'], [type='month'], [type='week'], [type='datetime'], [type='datetime-local'], textarea {
  width: 100%;
  background: rgba(221, 221, 221, 0.45);
  border: 1px solid rgba(221, 221, 221, 0.5);
  outline: 0; }
  select:focus, select :active, [type='text']:focus, [type='text'] :active, [type='url']:focus, [type='url'] :active, [type='email']:focus, [type='email'] :active, [type='password']:focus, [type='password'] :active,
  [type='tel']:focus,
  [type='tel'] :active, [type='search']:focus, [type='search'] :active, [type='number']:focus, [type='number'] :active, [type='date']:focus, [type='date'] :active, [type='month']:focus, [type='month'] :active, [type='week']:focus, [type='week'] :active, [type='datetime']:focus, [type='datetime'] :active, [type='datetime-local']:focus, [type='datetime-local'] :active, textarea:focus, textarea :active {
    background: #FFF;
    border: 1px solid #DDDDDD; }
  select::-moz-placeholder, [type='text']::-moz-placeholder, [type='url']::-moz-placeholder, [type='email']::-moz-placeholder, [type='password']::-moz-placeholder,
  [type='tel']::-moz-placeholder, [type='search']::-moz-placeholder, [type='number']::-moz-placeholder, [type='date']::-moz-placeholder, [type='month']::-moz-placeholder, [type='week']::-moz-placeholder, [type='datetime']::-moz-placeholder, [type='datetime-local']::-moz-placeholder, textarea::-moz-placeholder {
    color: #DDDDDD; }
  select::-webkit-input-placeholder, [type='text']::-webkit-input-placeholder, [type='url']::-webkit-input-placeholder, [type='email']::-webkit-input-placeholder, [type='password']::-webkit-input-placeholder,
  [type='tel']::-webkit-input-placeholder, [type='search']::-webkit-input-placeholder, [type='number']::-webkit-input-placeholder, [type='date']::-webkit-input-placeholder, [type='month']::-webkit-input-placeholder, [type='week']::-webkit-input-placeholder, [type='datetime']::-webkit-input-placeholder, [type='datetime-local']::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #DDDDDD; }
  select:-ms-input-placeholder, [type='text']:-ms-input-placeholder, [type='url']:-ms-input-placeholder, [type='email']:-ms-input-placeholder, [type='password']:-ms-input-placeholder,
  [type='tel']:-ms-input-placeholder, [type='search']:-ms-input-placeholder, [type='number']:-ms-input-placeholder, [type='date']:-ms-input-placeholder, [type='month']:-ms-input-placeholder, [type='week']:-ms-input-placeholder, [type='datetime']:-ms-input-placeholder, [type='datetime-local']:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #DDDDDD; }
  select ~ input, [type='text'] ~ input, [type='url'] ~ input, [type='email'] ~ input, [type='password'] ~ input,
  [type='tel'] ~ input, [type='search'] ~ input, [type='number'] ~ input, [type='date'] ~ input, [type='month'] ~ input, [type='week'] ~ input, [type='datetime'] ~ input, [type='datetime-local'] ~ input, textarea ~ input {
    color: #414042; }

[type="radio"], [type="checkbox"] {
  display: inline-block;
  position: relative;
  margin: 0 .5rem 0 0; }
  [type="radio"]:before, [type="checkbox"]:before {
    content: ' ';
    position: absolute;
    top: -.125em;
    left: 0;
    height: 1em;
    width: 1em;
    border: 1px solid currentColor;
    border-radius: .25em;
    background: #FFFFFF; }
  [type="radio"]:checked, [type="checkbox"]:checked {
    color: #FFF; }
    [type="radio"]:checked:before, [type="checkbox"]:checked:before {
      content: "\2713";
      border-color: #919191;
      text-transform: lowercase;
      background: #919191;
      text-align: center; }

[type="color"] {
  height: 2rem;
  min-width: 3rem;
  border: 0;
  padding: 0;
  background: transparent; }

[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  padding: 0;
  cursor: move;
  background: transparent; }
  [type="range"]:focus, [type="range"] :active {
    outline: 0; }

input[type=range]::-ms-track {
  width: 100%;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: transparent; }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: #DDDDDD;
  height: 2rem;
  width: .75rem; }
  input[type=range]::-webkit-slider-thumb:hover {
    background: #aaaaaa; }

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: #DDDDDD;
  height: 2rem;
  width: .75rem; }
  input[type=range]::-moz-range-thumb:hover {
    background: #aaaaaa; }

input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: #DDDDDD;
  height: 2rem;
  width: .75rem; }
  input[type=range]::-ms-thumb:hover {
    background: #aaaaaa; }

input[type=range]::-webkit-slider-runnable-track {
  height: 2rem;
  background: rgba(221, 221, 221, 0.5);
  border: 1px solid rgba(221, 221, 221, 0.5); }

input[type=range]::-moz-range-track {
  height: 2rem;
  background: rgba(221, 221, 221, 0.5);
  border: 1px solid rgba(221, 221, 221, 0.5); }

input[type=range]::-ms-track {
  height: 2rem;
  background: rgba(221, 221, 221, 0.5);
  border: 1px solid rgba(221, 221, 221, 0.5); }

input[type=range]::-ms-fill-lower {
  background: rgba(221, 221, 221, 0.5); }

.btn, button, [type="button"], [type="submit"], [type="reset"] {
  align-self: flex-start;
  display: inline-block;
  margin: .5rem 0;
  padding: .75em;
  text-decoration: none;
  font-size: 1em;
  color: #FFFFFF;
  background: #414042;
  cursor: pointer;
  border: 1px solid #414042;
  border-radius: .25em;
  transition: ease-in-out,all,.2s; }
  .btn:visited, button:visited, [type="button"]:visited, [type="submit"]:visited, [type="reset"]:visited {
    color: #FFFFFF; }
  .btn:hover, button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover {
    background: #282728; }
  .btn.-ghost, button.-ghost, [type="button"].-ghost, [type="submit"].-ghost, [type="reset"].-ghost {
    color: currentColor;
    border-color: currentColor;
    background: transparent; }
    .btn.-ghost:hover, button.-ghost:hover, [type="button"].-ghost:hover, [type="submit"].-ghost:hover, [type="reset"].-ghost:hover {
      background: rgba(65, 64, 66, 0.1); }
  .btn:disabled, button:disabled, [type="button"]:disabled, [type="submit"]:disabled, [type="reset"]:disabled {
    color: #9a999c;
    background: #b4b3b5;
    border-color: #414042;
    pointer-events: none; }

[type="reset"] {
  background: #DDDDDD;
  color: #414042;
  border-color: #DDDDDD; }
  [type="reset"]:hover {
    color: #6a6a6a;
    background: #f7f7f7; }

.marquee {
  width: 100%;
  margin: 0;
  padding: 3rem 2rem;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  color: #414042; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-bottom: -.2em;
  margin-right: .25em;
  fill: currentColor; }

.menukey {
  display: none;
  padding: 1rem;
  background: #414042;
  color: #FFFFFF;
  cursor: pointer; }
  .menukey:hover {
    background: #282728; }

nav {
  align-items: center; }

.mainmenu {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0; }
  .mainmenu > li > a {
    display: block;
    padding: 1rem .75rem;
    text-decoration: none; }
    .mainmenu > li > a:hover {
      background: #DDDDDD; }

@media (max-width: 1000px) {
  .menukey {
    display: block;
    order: 3; }

  .nav-link {
    order: 2; }

  .mainmenu {
    display: none;
    position: absolute;
    flex-direction: column;
    top: 5.725rem;
    right: 2rem;
    min-width: 12.5rem; }
    .mainmenu > li {
      display: block;
      background: #414042;
      color: #FFFFFF; }
      .mainmenu > li a:hover {
        background: #282728; } }
@media (max-width: 700px) {
  nav {
    width: 100%;
    margin-top: .75rem; }

  .nav-link {
    flex: 1; }

  .mainmenu {
    top: 11.175rem; } }
@media (max-width: 600px) {
  .mainmenu {
    top: 13.1rem; } }
@media (max-width: 470px) {
  .mainmenu {
    top: 9.75rem; } }
/* 
MAJOR ELEMENTS AND NAVIGATION
*/
* {
  transition: ease,all,.15s; }

html, body {
  position: relative;
  min-height: 100vh;
  width: 100%;
  font-family: "Barlow", sans-serif;
  font-size: 20px;
  color: #414042; }
  @media (max-width: 600px) {
    html, body {
      font-size: 14px; } }

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh; }

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  height: calc(116px + 2rem);
  padding: 1rem 2rem;
  z-index: 200; }
  @media (max-width: 470px) {
    header {
      height: 7rem; } }

*[data-bg] {
  background-size: cover;
  background-position: bottom; }

.logo {
  color: #414042;
  font-size: 1.5rem;
  font-weight: bold;
  max-width: 300px; }
  .logo a {
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none; }
  .logo img {
    display: block;
    height: 60px;
    max-height: 80px; }
  @media (max-width: 700px) {
    .logo {
      height: 100%;
      width: 100%;
      max-width: 100%;
      text-align: center;
      align-items: center; }
      .logo a {
        height: 100%; } }

.nav-link {
  display: block;
  padding: 1rem .75rem;
  text-decoration: none;
  background: #eaeaea;
  color: #414042;
  font-weight: bold; }
  .nav-link:hover {
    background-color: #f7f7f7; }
  @media (max-width: 700px) {
    .nav-link {
      padding: 1rem;
      margin: 0;
      border-radius: 0; } }

main {
  position: relative;
  display: block;
  flex-grow: 1;
  z-index: 100;
  background: #FFFFFF; }

.intro-wrapper {
  position: relative;
  height: calc(100vh - 7rem);
  width: calc(100% - 4rem);
  max-width: 1600px;
  margin: 5rem auto 2rem auto;
  background-position: bottom;
  background-size: cover;
  background-attachment: fixed; }

.intro-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem;
  color: #FFFFFF; }
  .intro-tag h1, .intro-tag p {
    margin-bottom: 0;
    text-align: left; }
  .intro-tag h1 {
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
  @media (max-width: 350px) {
    .intro-tag h1 {
      font-size: 2rem; } }

section {
  padding: 2rem; }
  @media screen and (min-width: 1472px) {
    section {
      padding: 2rem 0; } }
  @media (max-width: 480px) {
    section {
      padding: 1rem; } }
  section:nth-of-type(2n + 1) {
    background: #FFFFFF; }

.section-title {
  color: #414042;
  font-weight: bold;
  margin-top: 6rem;
  margin-bottom: 4rem; }

.block {
  padding: 2rem; }

.block-heading {
  font-size: 1.25rem; }

.card {
  display: flex;
  flex-direction: row; }
  .card *:last-child {
    margin-bottom: 0; }
  .card > .item {
    width: 50%;
    padding: 1rem;
    min-height: 35vh; }
  @media (max-width: 840px) {
    .card {
      flex-direction: column; }
      .card > .item {
        width: 100%;
        min-height: 0; } }

.illo-wrap {
  position: relative;
  float: left;
  width: 0;
  height: 100%;
  z-index: 30; }

.illo {
  position: absolute;
  left: -3rem;
  top: 0;
  transform: translateY(-40%);
  width: 6em;
  height: 6rem;
  stroke: #DDDDDD;
  fill: transparent;
  stroke-width: 4px; }
  @media (max-width: 840px) {
    .illo {
      width: 5rem;
      height: 8rem;
      left: -2rem; } }

.card-title {
  position: relative;
  font-size: 1.25rem;
  color: #414042;
  font-weight: bold;
  text-align: left;
  z-index: 50; }
  .card-title + p {
    position: relative;
    z-index: 50; }

.sep-heading {
  margin: 3rem 0;
  padding-top: 1.5rem;
  font-size: 1.25rem; }
  .sep-heading > span {
    display: inline-block;
    padding: .5rem 1rem;
    background: #414042;
    color: #FFFFFF;
    border-radius: 5px; }

.brands {
  display: flex;
  width: 100%;
  flex-direction: row; }
  @media (max-width: 1100px) {
    .brands {
      flex-direction: column; } }

.brand {
  display: flex;
  flex-direction: column;
  padding: 1rem; }
  @media (max-width: 1100px) {
    .brand {
      flex-direction: row; } }
  @media (max-width: 850px) {
    .brand {
      flex-direction: column; } }

.brand-logo {
  width: 100%;
  align-content: center;
  margin-bottom: 2rem; }
  .brand-logo img {
    height: 5rem;
    margin-right: 1rem;
    align-self: flex-start; }
  @media (max-width: 1100px) {
    .brand-logo {
      min-width: 20rem;
      flex: 1; } }
  @media (max-width: 850px) {
    .brand-logo {
      width: 100%; } }

.brand-title {
  margin: 0 auto 0 0;
  font-size: 1.25rem;
  line-height: 5rem;
  font-weight: bold;
  color: #414042;
  color: var(--brand); }

.brand-desc {
  width: 100%;
  flex-grow: 1;
  padding: 1.5rem;
  border: 1px solid var(--brand); }
  .brand-desc > .btn {
    border-color: var(--brand);
    background: var(--brand); }

.products {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  max-width: 1200px;
  margin: 0 auto; }
  @media (max-width: 850px) {
    .products {
      flex-direction: column; } }

.products-intro {
  width: 80%;
  margin: 0 auto 4rem auto;
  text-align: center;
  font-size: 1.25em; }

.product {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 50%;
  max-width: 720px;
  padding: 1rem; }
  @media (max-width: 1300px) {
    .product {
      max-width: 50%;
      flex: 0; } }
  @media (max-width: 850px) {
    .product {
      max-width: 100%; } }

.product-hero {
  padding-top: 25vh; }

.product-title {
  margin: 0;
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: left;
  color: #FFFFFF;
  background: var(--brand); }
  @media (max-width: 410px) {
    .product-title {
      padding: 1rem; } }

.product-details {
  flex: 1;
  padding: 1.5rem; }
  @media (max-width: 410px) {
    .product-details {
      padding: 1rem; } }

.more-info {
  margin-top: auto; }
  .more-info .btn {
    border-color: var(--brand);
    background: var(--brand); }
    @media (max-width: 410px) {
      .more-info .btn {
        width: 100%;
        text-align: center; } }

.product-list {
  position: absolute;
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  background: #DDDDDD; }
  .product-list > li {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(65, 64, 66, 0.1); }
    .product-list > li:first-of-type {
      padding-top: 0; }
    .product-list > li:last-of-type {
      padding-bottom: 0;
      border-bottom: 0; }
  .product-list.o {
    max-height: 100vh;
    opacity: 1;
    padding: 1em; }

.contact {
  background: #414042 !important;
  color: #FFFFFF; }

.contact-title {
  color: #FFFFFF; }

.contact-intro {
  text-align: center; }

.contact-details {
  width: 100%;
  color: #FFFFFF;
  justify-content: center; }
  .contact-details > .btn {
    border: 1px solid currentColor;
    margin: 0 1rem; }
    @media (max-width: 580px) {
      .contact-details > .btn {
        width: 100%; }
        .contact-details > .btn:first-of-type {
          margin-bottom: 1rem; } }

.but-bigger {
  display: inline-block;
  font-size: 1.25em; }
  @media (max-width: 320px) {
    .but-bigger {
      font-size: 1.15rem; } }

footer {
  padding: 2rem;
  background: #FFFFFF;
  align-content: center; }

.trailer {
  line-height: 3rem; }

/* 
##########################################
##########################################
##########################################
     XX  XX XXXXXX XX  XX   XXXXXX
     XX  XX XXXXXX XX  XX   XX  
     XX  XX   XX   XX  XX   XXXXXX
     XXXXXX   XX   XX  XXXX     XX XXX
     XXXXXX   XX   XX  XXXX XXXXXX XXX
##########################################
##########################################
##########################################

Classes to customise behaviour/appearance.

$vars set in _vars.scss

FLEX
Container settings 
*/
.row, .col {
  display: block;
  display: flex; }

.row {
  flex-direction: row;
  flex-wrap: wrap; }

.col {
  flex-direction: column; }

.contained {
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
  max-width: 1200px; }

.-fake-l {
  padding-left: calc( (100% - 1200px) / 2 ); }

.-fake-r {
  padding-right: calc( (100% - 1200px) / 2 ); }

@media (max-width: 1200px) {
  .-fake-l, .-fake-r {
    padding: 0; } }
.fill {
  height: 100%;
  width: 100%; }

.fullscreen {
  height: 100vh;
  width: 100%; }

.wrap {
  width: 100%;
  height: 100%;
  padding: 2rem; }

.wrap-s {
  width: 100%;
  padding: 1rem; }

.spaced {
  width: 100%;
  width: calc(100% + 3rem);
  margin-left: -1.5rem; }
  .spaced > * {
    margin: 1.5rem; }

/*
GRIDLET
Meat and Veg Settings
*/
._p10 {
  width: 10%; }

._p20 {
  width: 20%; }

._p30 {
  width: 30%; }

._p40 {
  width: 40%; }

._p50 {
  width: 50%; }

._p60 {
  width: 60%; }

._p70 {
  width: 70%; }

._p80 {
  width: 80%; }

._p90 {
  width: 90%; }

._full {
  width: 100%; }

._1-2 {
  width: 50%; }

._1-3 {
  width: 33.33%; }

._2-3 {
  width: 66.66%; }

._1-4 {
  width: 25%; }

._3-4 {
  width: 75%; }

.-hide {
  display: none; }

.-show {
  display: inherit; }

@media (max-width: 1000px) {
  ._tfull {
    width: 100%; }

  ._t1-2 {
    width: 50%; }

  ._t1-3 {
    width: 33.33%; }

  ._t2-3 {
    width: 66.66%; }

  ._t1-4 {
    width: 25%; }

  ._t3-4 {
    width: 75%; }

  .-tabhide {
    display: none; }

  .-tabshow {
    display: inherit; } }
@media (max-width: 400px) {
  ._mfull {
    width: 100%; }

  ._m1-2 {
    width: 50%; }

  ._m1-3 {
    width: 33.33%; }

  ._m2-3 {
    width: 66.66%; }

  ._m1-4 {
    width: 25%; }

  ._m3-4 {
    width: 75%; }

  .-mobhide {
    display: none; }

  .-mobshow {
    display: inherit; } }
.-centered {
  justify-content: center; }

.-bottoms {
  justify-content: flex-end; }

.-tops {
  justify-content: flex-start; }

.-fill {
  width: 100%; }

.-fill-r {
  margin-right: auto; }

.-fill-l {
  margin-left: auto; }

.-fill-t {
  margin-top: auto; }

.-fill-b {
  margin-bottom: auto; }

.-self-t {
  margin-bottom: auto; }

.-self-b {
  margin-top: auto; }

.-white-b {
  color: #414042;
  background: #FFFFFF; }

.-white-m {
  color: #414042;
  background: #FFFFFF; }

.-grey {
  color: #414042;
  background: #EEEEEE; }

.-black {
  color: #FFFFFF;
  background: #414042; }

.-overlay-m {
  color: #FFFFFF;
  background: rgba(65, 64, 66, 0.5); }

.-overlay-a {
  color: #414042;
  background: rgba(221, 221, 221, 0.45); }

.-overlay-b {
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.5); }

.-overlay-w {
  color: #414042;
  background: rgba(255, 255, 255, 0.75); }

.-main {
  color: #FFFFFF;
  background: #414042; }

.-alt {
  color: #414042;
  background: #DDDDDD; }

.-success {
  color: #00957a; }

.-warning {
  color: #ff8640; }

.-error {
  color: red; }

.-padded {
  padding: 2rem; }

.-padded-v {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.-padded-h {
  padding-left: 2rem;
  padding-right: 2rem; }

.-nopad {
  padding: 0; }

.-nopad-t {
  padding-top: 0; }

.-nopad-l {
  padding-left: 0; }

.-nopad-r {
  padding-right: 0; }

.-nopad-b {
  padding-bottom: 0; }

.-nomar {
  margin: 0; }

.-nomar-t {
  margin-top: 0; }

.-nomar-l {
  margin-left: 0; }

.-nomar-r {
  margin-right: 0; }

.-nomar-b {
  margin-bottom: 0; }

.-lined {
  border: 2px solid rgba(0, 0, 0, 0.5); }

.-lined-a {
  border: 2px solid rgba(221, 221, 221, 0.5); }

.-lined-c {
  border: 2px solid currentColor; }

.-lined-m {
  border: 2px solid #414042; }

.-lined-b {
  border: 2px solid #414042; }

.-lined-w {
  border: 2px solid #FFFFFF; }

.-tac {
  text-align: center; }

.-tal {
  text-align: left; }

.-tar {
  text-align: right; }

.-fullbg {
  background-size: cover;
  background-repeat: no-repeat; }

.-heading {
  margin-top: 2rem;
  margin-bottom: 4rem; }

.-big {
  font-size: 1.5em; }

.-med {
  font-size: 1.25em; }

.-reg {
  font-size: 1rem; }

.-sml {
  font-size: 0.8em; }

.-clean-list > li {
  list-style: none;
  margin: 0 0 1rem 0; }

.alert {
  position: relative;
  padding: 1rem 1rem 1rem 3rem;
  border: 1px solid currentColor;
  margin: .5rem 0;
  line-height: 1.5rem; }
  .alert.-generic:before {
    content: 'i';
    margin-left: -2rem;
    margin-right: 1rem;
    font-size: 1.25rem; }
  .alert.-success:before {
    content: '\263A';
    margin-left: -2rem;
    margin-right: 1rem;
    font-size: 1.25rem; }
  .alert.-warning:before {
    content: '\203C';
    margin-left: -2rem;
    margin-right: 1rem;
    font-size: 1.25rem; }
  .alert.-error:before {
    content: 'x';
    margin-left: -2rem;
    margin-right: 1rem;
    font-size: 1.25rem; }

.closebtn {
  position: absolute;
  top: 0;
  right: 0;
  padding: .5rem; }
  .closebtn:hover {
    cursor: pointer;
    font-weight: bold; }

.elevate {
  --brand: #00aeef; }

.thermalheart {
  --brand: #8dc63f; }

.vantage {
  --brand: #000000; }

.residential {
  --brand: #337577; }

.designer {
  --brand: #003063; }

.thermal {
  --brand: #d6982f; }

.specialty {
  --brand: #7c2353; }

.architectural {
  --brand: #028ba3; }

.commercial {
  --brand: #3b3251; }

.thermal-com {
  --brand: #669900; }

.framing {
  --brand: #a12116; }

.hardware {
  --brand: #afb1b3; }

/* ALL ABOARD THE SHAME TRAIN (delete if u shame free) */
/* THANKS FOR INSPECTING <3 */