@charset "UTF-8";
/*
Theme Name: 	Firmament
Theme URI: 		https://mosaic.ws
Description: 	A basic starting point for a simple Wordpress themes.
Version: 		1.0.0
Author: 		Andrew Joyce
Author URI: 	https://mosaic.ws
Tags: 			firmament, clean, basic
*/
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* COLOR AND FONT VARIABLES																										*/
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* Standard greyscale gradient */
:root {
  /* Site width, used in helpers.less */
  --site-width: 1100px;
}

/* Set your fonts here. I'm just using arial but you could set up webfonts.
/* LESS mixins let you use this snippet throughout the entire site: nifty! */
section[role=heading] p.tagline, body, input, button {
  font-family: Arial, Helvetica, Tahoma, sans-serif;
}

/* HEADINGS */
/* Here's some ground rules -- if you need a heading to "look" important, but it's actually not: use a class. h5.beta conveys that you want this h5 to LOOK like an h2, but semantically it's still an H5. Useful stuff! */
/* Also, these are super basic heading styles -- fill in your own! */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin-bottom: 1rem;
}

/* Let's define some simple button styles */
body.single section.comments form#commentform input#submit, .more-link, button, input[type=submit], input.tribe-events-button {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  font-family: "myriad-pro", "Myriad Pro", "lucida grande", "lucida sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 13.8px;
  font-size: 13px;
  line-height: 2.052;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s;
  color: #fff;
  background-color: #BC6930;
  border-color: #b4642e;
  /* a .small helper class */
  /* a clear helper class - for making buttons that have a colored border and transparent center */
}
body.single section.comments form#commentform input#submit:after, .more-link:after, button:after, input[type=submit]:after, input.tribe-events-button:after {
  content: " ›";
}
body.single section.comments form#commentform input#submit:hover, .more-link:hover, button:hover, input[type=submit]:hover, input.tribe-events-button:hover, body.single section.comments form#commentform input#submit:focus, .more-link:focus, button:focus, input[type=submit]:focus, input.tribe-events-button:focus {
  color: #978872;
  text-decoration: none;
}
body.single section.comments form#commentform input#submit:active, .more-link:active, button:active, input[type=submit]:active, input.tribe-events-button:active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
body.single section.comments form#commentform input#submit:last-child, .more-link:last-child, button:last-child, input[type=submit]:last-child, input.tribe-events-button:last-child {
  margin-bottom: 0;
}
body.single section.comments form#commentform input.small#submit, .small.more-link, button.small, input.small[type=submit], input.small.tribe-events-button {
  height: 1.953rem;
  line-height: 1.953rem;
}
body.single section.comments form#commentform input.clear#submit, .clear.more-link, button.clear, input.clear[type=submit], input.clear.tribe-events-button {
  background: transparent;
  border: 2px solid #787573;
  color: #5f5b58;
  line-height: 2.302rem;
}
body.single section.comments form#commentform input.clear#submit:hover, .clear.more-link:hover, button.clear:hover, input.clear[type=submit]:hover, input.clear.tribe-events-button:hover {
  background: #5f5b58;
  border-color: #5f5b58;
  color: #fff;
}
body.single section.comments form#commentform input.clear.clear#submit, .clear.clear.more-link, button.clear.clear, input.clear.clear[type=submit], input.clear.clear.tribe-events-button {
  border-color: #fff;
  color: #fff;
}
body.single section.comments form#commentform input.clear.clear#submit:hover, .clear.clear.more-link:hover, button.clear.clear:hover, input.clear.clear[type=submit]:hover, input.clear.clear.tribe-events-button:hover {
  background: #972220;
  border-color: #972220;
}

/* role=button: basic button styles */
/* Set your brand colors here; variables will push them through the entire site. Importing this from the child theme lets you change the variables once for the whole site */
/* Contents:
	- CSS Reset
	- Firmament Grid System
	- Print Styles
 */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* CSS RESET & DEFINING BASIC ELEMENTS																							*/
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* Sensible box-sizing defaults on everything */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* HTML force smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Stripping styles */
body, html, div, blockquote, img, label, figure, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {
  margin: 0;
  padding: 0;
  border: 0;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

ol, ul {
  list-style: none;
}

/* Doing an HTML5 reset for older browsers - this is less important than it used to be but still recommended */
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block;
}

/* Making sure there's no horizontal overflow */
body, html {
  width: 100%;
  overflow-x: hidden;
}

/* setting the global font to our typography variable */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* GRID SYSTEM																														*/
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* OK, let's define our grid -- starting with a row. A row can hold any number of children summing to 12 columns. */
[data-st=frmt-row] {
  clear: both;
  margin-bottom: 7.5%;
}
[data-st=frmt-row]:after {
  content: "";
  display: table;
  clear: both;
}
[data-st=frmt-row] > *:last-child {
  margin-right: 0px !important;
  margin-bottom: 0 !important;
}
[data-st=frmt-row] > *:after {
  content: "";
  display: table;
  clear: both;
}

/* This is a mobile-first grid, so not all of the columns behave according to their labels at lower screen sizes */
/* Let's define the one and two column width elements. */
[data-st=frmt-one], [data-st=frmt-two] {
  width: 46.25%;
  margin-right: 7.5%;
  margin-bottom: 7.5%;
  float: left;
}
[data-st=frmt-one]:nth-child(2n), [data-st=frmt-two]:nth-child(2n) {
  margin-right: 0;
}
[data-st=frmt-one]:last-child, [data-st=frmt-one]:nth-last-child(2), [data-st=frmt-two]:last-child, [data-st=frmt-two]:nth-last-child(2) {
  margin-bottom: 0;
}

/* And everything else. For mobile, at least, everything is full-width except the very smallest elements */
[data-st=frmt-three], [data-st=frmt-four], [data-st=frmt-five], [data-st=frmt-six], [data-st=frmt-seven],
[data-st=frmt-eight], [data-st=frmt-nine], [data-st=frmt-ten], [data-st=frmt-eleven], [data-st=frmt-twelve] {
  width: 100%;
  float: left;
  margin-bottom: 7.5%;
}

section.two-up div.pw, section.three-up div.pw, section.four-up div.pw {
  display: block !important;
}

/* Let's get some tablet sizing up in here */
@media screen and (min-width: 40rem) {
  .pw, .fw {
    width: 90%;
    padding: 5% 0;
    margin-bottom: 5%;
  }
  .pw:last-child, .fw:last-child {
    margin-bottom: 5.6%;
  }

  [data-st=frmt-row] {
    margin-bottom: 5%;
  }

  [data-st=frmt-one] {
    width: 20.8%;
    margin: 0 5.6% 5.6% 0;
  }
  [data-st=frmt-one]:nth-child(2n) {
    margin-right: 5.6%;
  }
  [data-st=frmt-one]:nth-child(4n) {
    margin-right: 0;
  }
  [data-st=frmt-one]:nth-last-child(3), [data-st=frmt-one]:nth-last-child(4) {
    margin-bottom: 0;
  }

  [data-st=frmt-two] {
    width: 47.2%;
    margin: 0 5.6% 5.6% 0;
  }
  [data-st=frmt-two]:nth-child(2n) {
    margin-right: 0;
  }

  [data-st=frmt-three], [data-st=frmt-four], [data-st=frmt-five], [data-st=frmt-six], [data-st=frmt-seven],
[data-st=frmt-eight], [data-st=frmt-nine], [data-st=frmt-ten], [data-st=frmt-eleven], [data-st=frmt-twelve] {
    margin-bottom: 5.6%;
  }
}
@media screen and (min-width: 48rem) {
  [data-st=frmt-row] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: stretch;
  }

  [data-st=frmt-one] {
    width: 3.2%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-two] {
    width: 12%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-three] {
    width: 20.8%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-four] {
    width: 29.6%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-five] {
    width: 38.4%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-six] {
    width: 47.2%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-seven] {
    width: 56%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-eight] {
    width: 64.8%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-nine] {
    width: 73.6%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-ten] {
    width: 82.4%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-eleven] {
    width: 91.2%;
    margin: 0 5.6% 0 0;
  }

  [data-st=frmt-twelve] {
    width: 100%;
    margin: 0 0 3% 0;
  }

  [data-st=frmt-one]:nth-child(2n), [data-st=frmt-two]:nth-child(2n), [data-st=frmt-three]:nth-child(2n) {
    margin-right: 5.6%;
  }
}
@media screen and (min-width: 84rem) {
  .pw, .fw {
    width: 92%;
    padding: 4% 0;
    margin-bottom: 4%;
  }
  .pw:last-child, .fw:last-child {
    margin-bottom: 4%;
  }

  [data-st=frmt-row] {
    margin-bottom: 4%;
  }

  [data-st=frmt-one] {
    width: 4.667%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-two] {
    width: 13.334%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-three] {
    width: 22%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-four] {
    width: 30.667%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-five] {
    width: 39.334%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-six] {
    width: 48%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-seven] {
    width: 56.667%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-eight] {
    width: 65.334%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-nine] {
    width: 74%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-ten] {
    width: 82.667%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-eleven] {
    width: 91.334%;
    margin: 0 4% 0 0;
  }

  [data-st=frmt-twelve] {
    width: 100%;
    margin: 0 0 2.5% 0;
  }

  [data-st=frmt-one]:nth-child(2n), [data-st=frmt-two]:nth-child(2n),
[data-st=frmt-three]:nth-child(2n), [data-st=frmt-one]:nth-child(6n) {
    margin-right: 4%;
  }
}
/* end Firmament GRID */
/* PRINT STYLING -- the CSS that most people forget about. Not us! */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  p, h2, h3 {
    orphans: 3;
    /* http://css-tricks.com/almanac/properties/o/orphans/ */
    widows: 3;
    /* http://css-tricks.com/almanac/properties/w/widows/ */
  }

  h2, h3 {
    page-break-after: avoid;
  }

  /* If you want to strip out images when you print, go for it. I find that most people actually expect them, so it's disabled by default */
  /* img { display:none !important; } */
}
/* Contents:
	- Clear-fix helper class
	- Clear:both helper class
	- Page-width helper class
	- Fluid width helper class
	- No padding helper class
	- Image alignments
 */
/* CLEAR-FIX HELPER CLASS */
.cf:after, .pw:after, [data-st=frmt-row]:after, section:after {
  content: "";
  display: table;
  clear: both;
}

/* CLEAR:BOTH HELPER CLASS */
.both {
  clear: both;
}

br.both {
  clear: both;
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* PAGE-WIDTH HELPER CLASS + defining site-wide max-width */
section > [data-st=frmt-row], header > [data-st=frmt-row], footer > [data-st=frmt-row], nav > [data-st=frmt-row],
.pw {
  width: 85%;
  max-width: var(--site-width);
  display: flex;
  margin: 0 auto 0;
  padding: 10% 0;
  padding-bottom: 0 !important;
}
section > [data-st=frmt-row]:last-child, header > [data-st=frmt-row]:last-child, footer > [data-st=frmt-row]:last-child, nav > [data-st=frmt-row]:last-child,
.pw:last-child {
  margin-bottom: 7.5%;
}
@media screen and (min-width: 40rem) {
  section > [data-st=frmt-row], header > [data-st=frmt-row], footer > [data-st=frmt-row], nav > [data-st=frmt-row],
.pw {
    width: 90%;
    padding: 5% 0;
  }
  section > [data-st=frmt-row]:last-child, header > [data-st=frmt-row]:last-child, footer > [data-st=frmt-row]:last-child, nav > [data-st=frmt-row]:last-child,
.pw:last-child {
    margin-bottom: 5%;
  }
}
@media screen and (min-width: 48rem) {
  section > [data-st=frmt-row], header > [data-st=frmt-row], footer > [data-st=frmt-row], nav > [data-st=frmt-row],
.pw {
    padding: 3% 0;
  }
  section > [data-st=frmt-row]:last-child, header > [data-st=frmt-row]:last-child, footer > [data-st=frmt-row]:last-child, nav > [data-st=frmt-row]:last-child,
.pw:last-child {
    margin-bottom: 3%;
  }
}
@media screen and (min-width: 84rem) {
  section > [data-st=frmt-row], header > [data-st=frmt-row], footer > [data-st=frmt-row], nav > [data-st=frmt-row],
.pw {
    width: 100%;
  }
}

/* page-width helper class*/
/* FULL WIDTH HELPER CLASS */
.fw {
  padding: 10% 0;
  width: 85%;
  margin: 0 auto;
  max-width: none;
  padding-bottom: 0 !important;
}
.fw:last-child {
  margin-bottom: 7.5%;
}
.fw div[data-st=frmt-row] {
  max-width: none !important;
}
@media screen and (min-width: 40rem) {
  .fw {
    width: 90%;
    padding: 5% 0;
  }
  .fw:last-child {
    margin-bottom: 5%;
  }
}
@media screen and (min-width: 48rem) {
  .fw {
    padding: 3% 0;
  }
  .fw:last-child {
    margin-bottom: 3%;
  }
}
@media screen and (min-width: 84rem) {
  .fw {
    width: 100%;
  }
}

/* NO PADDING HELPER CLASS */
.nopad {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.nopad:last-child, .nopad [data-st=frmt-row] {
  margin-bottom: 0 !important;
}

/* no padding helper class */
/* IMAGE ALIGNMENTS */
div.wp-caption.alignleft, img.alignleft, .alignleft {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
}
div.wp-caption.alignleft img, img.alignleft img, .alignleft img {
  margin-bottom: 1rem;
}

div.wp-caption.alignright, img.alignright, .alignright {
  float: right;
  margin: 0 0 1.5rem 1.5rem;
}
div.wp-caption.alignright img, img.alignright img, .alignright img {
  margin-bottom: 1rem;
}

div.wp-caption.aligncenter, img.aligncenter, .aligncenter {
  display: inherit;
  margin: 0 auto 1.5rem;
}
div.wp-caption.aligncenter img, img.aligncenter img, .aligncenter img {
  margin-bottom: 1rem;
}

.auto-grid {
  --auto-grid-min-size: 16rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: var(--standard-site-gutter-gap);
  margin-bottom: var(--standard-site-gutter-gap);
}
.auto-grid.content:before {
  display: none;
}

/* Helper classes like clearfix, etc */
/* This basic button extend is styled in the _variables.less file so that you can change it for your site */
input[type=submit] {
  float: none;
}

/* Yes, some browsers don't style these. Why not define them? */
strong {
  font-size: inherit;
  font-weight: bold;
}

em {
  font-size: inherit;
  font-style: italic;
}

input, textarea {
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* And a basic link style. I like to hide the underline except on hover, but you may be different. We're also branding this to your colors */
a {
  color: #be2f2d;
  text-decoration: none;
  transition: 0.3s all;
}
a:hover {
  text-decoration: underline;
}

/* GENERAL TYPOGRAPHY */
/* Hey, let's brand text selection to your brand color. Why not?? */
::selection {
  background: #2860a5;
  color: #fff;
}

::-moz-selection {
  background: #2860a5;
  color: #fff;
}

/* Some basic styling for paragraph elements. */
p:last-child, p:last-of-type {
  margin-bottom: 0;
}

/* Simple styling for lists and tables */
ol, ul, table {
  margin: 1em 0;
  list-type: none;
}
ol li, ul li, table li {
  margin-bottom: 0.48rem;
}
ol:first-child, ul:first-child, table:first-child {
  margin-top: 0;
}
ol:last-child, ol:last-of-type, ul:last-child, ul:last-of-type, table:last-child, table:last-of-type {
  margin-bottom: 0;
}

/* and let's finish defining our tables */
table {
  border: 1px solid #787573;
  padding: 0;
  border-radius: 2px;
}
table td {
  padding: 8px;
}
table tr:nth-child(2n) {
  background: #fff;
}

/* Let's make sure sub-lists look OK, too. */
ul ul {
  margin-left: 1rem;
  margin-top: 0.48rem;
}

/* Let's set up some blockquote styles */
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

/* Blockquotes */
/* I like having basic styling for an HR element that's not butt-ugly */
hr {
  display: block;
  clear: both;
  width: 100%;
  height: 0px;
  background: transparent;
  border: 0px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 1.5rem 0;
  padding-top: 1rem;
}

/* As of September 2018, every major browser except edge supports details (https://caniuse.com/#feat=details). You can use a polyfill if you need that support. */
/* Here's some very basic styling just to make sure details elements work in the browsers that do support them. */
details summary * {
  display: inline-block;
  cursor: pointer;
}

/* always define a code view */
pre, code {
  margin: 1.5rem auto;
  padding: 1.5rem;
  background: #787573;
  border-radius: 4px;
  color: #fff;
  line-height: 1.7;
  font-family: "Consolas", "Courier New", monospace;
}

code {
  padding: 0.25rem;
  background: #be2f2d;
}

/* if you use "embed responsively" -- and you should -- let's define the styles for responsive video embeds. http://embedresponsively.com/ */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  margin: 1rem 0;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* simple styling to show a number centered in a circle. */
/* I always use this a ton, but just take it out if you don't need it */
.numeral {
  width: 2rem;
  height: 2rem;
  display: block;
  float: left;
  margin-right: 0.889rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 2.2rem;
  text-align: center;
  background: #be2f2d;
  border-radius: 2rem;
}

/* Social buttons. Since everyone and their brother has these now, you should too. Delete them if you don't need them: simple. */
div.orb-social {
  clear: both;
  text-align: center;
  /* a */
  /* option for square buttons */
}
div.orb-social a {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  color: #fff;
  font-size: 1rem;
  display: inline-block;
  height: 2rem;
  margin-right: 5px;
  overflow: hidden;
  padding: 0.5rem;
  text-align: center;
  transition: 0.2s all;
  width: 2rem;
}
div.orb-social.full a, div.orb-social a:hover {
  background-color: #999999;
}
div.orb-social.full a.tw, div.orb-social a.tw:hover {
  background-color: #1da1f2;
}
div.orb-social.full a.fb, div.orb-social a.fb:hover {
  background-color: #3b5998;
}
div.orb-social.full a.insta, div.orb-social a.insta:hover {
  background-color: #c13584;
}
div.orb-social.full a.vi, div.orb-social a.vi:hover {
  background-color: #1ab7ea;
}
div.orb-social.full a.rss, div.orb-social a.rss:hover {
  background-color: #f26522;
}
div.orb-social.full a.yt, div.orb-social a.yt:hover {
  background-color: #ff0000;
}
div.orb-social.full a.sp, div.orb-social a.sp:hover {
  background-color: #1bce68;
}
div.orb-social.full a.sc, div.orb-social a.sc:hover {
  background-color: #f0d500;
}
div.orb-social.full a.li, div.orb-social a.li:hover {
  background-color: #0077b5;
}
div.orb-social.full a:hover {
  background-color: #333333 !important;
}
div.orb-social.square a {
  border-radius: 2px;
}

/* div.orb-social */
/* Defining basic typography and HTML elements */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* SPLASH PAGE STYLING																											*/
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
section[role=heading] {
  padding: 2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-color: #2f5a6f;
  /* this almost gets over-ridden by what you set on the front-end */
  text-align: center;
  /* colorize elements to make sure they show up OK -- except on the white overlay. */
  /* You can add more arguments to the :not() below if your accent or primary colors require dark text */
  /* Background Blur Option w/ Cover Image */
  /* Background Options */
  /* Tinted Dark Option */
  /* Tinted White Option */
  /* Barebones version, for showing just the background image */
}
section[role=heading] div[data-st=frmt-seven] {
  margin: 0 auto !important;
  float: none;
}
section[role=heading] div.content {
  position: relative;
  z-index: 3;
  text-align: center;
}
section[role=heading]:not(.bg-white) {
  /* We'll also add a few elements to cover taglines and generated HTML content. */
}
section[role=heading]:not(.bg-white) h1, section[role=heading]:not(.bg-white) h2, section[role=heading]:not(.bg-white) h3, section[role=heading]:not(.bg-white) h4, section[role=heading]:not(.bg-white) h5, section[role=heading]:not(.bg-white) h6 {
  color: #fff;
}
section[role=heading]:not(.bg-white) p, section[role=heading]:not(.bg-white) span, section[role=heading]:not(.bg-white) li {
  color: rgba(255, 255, 255, 0.75);
}
section[role=heading] h1 {
  display: inline-block;
  position: relative;
  margin-bottom: 1.953rem;
  line-height: 1;
  text-align: center;
}
section[role=heading] p.tagline {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
section[role=heading].size-tiny {
  padding: 3.5rem 0 3rem;
  background: rgba(0, 0, 0, 0.02);
}
section[role=heading].size-tiny > .pw {
  padding-top: 0;
}
section[role=heading].size-tiny [data-st=frmt-eight] {
  float: none;
  margin: 0;
  text-align: left;
}
section[role=heading].size-tiny [data-st=frmt-eight] h1 {
  color: #787573;
  text-align: left;
}
section[role=heading].size-tiny div.breadcrumbs {
  position: relative;
  z-index: 5;
}
section[role=heading].size-tiny div.breadcrumbs nav.breadcrumbs {
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 2px solid #5b8fa9;
  text-align: center;
}
section[role=heading].size-tiny div.breadcrumbs ul {
  list-type: none;
}
section[role=heading].size-tiny div.breadcrumbs li {
  display: block;
  margin-bottom: 0;
  margin-right: 0.5rem;
  margin-top: 0;
  position: relative;
  font-size: 0.889rem;
  height: 24px;
  line-height: 24px;
  float: left;
}
section[role=heading].size-tiny div.breadcrumbs li:before {
  display: none;
}
section[role=heading].size-tiny div.breadcrumbs li a {
  border-bottom: 0;
  color: #2f5a6f;
  transition: 0.3s all;
}
section[role=heading].size-tiny div.breadcrumbs li a:hover {
  color: #be2f2d;
}
section[role=heading].size-tiny div.breadcrumbs li a:focus, section[role=heading].size-tiny div.breadcrumbs li a:active {
  color: #d14f4d;
}
section[role=heading].size-tiny div.breadcrumbs li.separator {
  width: 8px;
  color: #1d3e4e;
}
section[role=heading].size-tiny div.breadcrumbs li.item-current {
  cursor: default;
}
section[role=heading].size-tiny div.breadcrumbs li.item-current strong {
  color: #972220;
}
section[role=heading].size-tiny div.breadcrumbs li:last-child {
  margin-right: 0;
}
section[role=heading].size-small {
  /* small heading styles */
}
section[role=heading].size-small div.pw {
  position: relative;
  z-index: 5;
}
section[role=heading].size-small [data-st=frmt-eight] {
  text-align: left;
}
section[role=heading].size-small [data-st=frmt-eight] h1 {
  margin-bottom: 0;
}
section[role=heading].size-small [data-st=frmt-four] {
  position: relative;
  text-align: right;
  z-index: 4;
}
section[role=heading].size-small [data-st=frmt-four] * {
  display: inline-block;
  float: none;
}
@media screen and (min-width: 48rem) {
  section[role=heading].size-small div.pw {
    display: flex;
    align-items: center;
  }
}
section[role=heading].size-large {
  /* large heading styles */
  text-align: center;
}
section[role=heading].size-large * {
  position: relative;
  float: none;
}
section[role=heading].size-large h1:after {
  content: "";
  height: 4px;
  width: 100%;
  display: block;
  position: absolute;
  bottom: -1rem;
  left: 0;
  background: rgba(255, 255, 255, 0.15);
}
section[role=heading].size-jumbo {
  /* jumbo heading styles */
}
section[role=heading].size-jumbo .pw.jumbo {
  position: relative;
  z-index: 4;
}
section[role=heading].size-graphic {
  /* graphic heading styles - this fits a 4:1 image */
  padding: 0;
  margin: 0;
  padding-top: 25%;
}
section[role=heading].size-graphic h1 {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
}
section[role=heading] .cover-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /* as of September 2018, you'll get about 85% of browsers with this */
  /* https://caniuse.com/#feat=css-filters */
}
section[role=heading] .cover-image.blurry {
  filter: blur(5px);
  top: -5%;
  bottom: -5%;
  left: -5%;
  right: -5%;
}
section[role=heading]:before {
  content: "";
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #be2f2d;
  opacity: 0;
}
section[role=heading].bg-primary:before {
  opacity: 0.4;
}
section[role=heading].bg-primary-solid:before {
  background: #be2f2d;
  opacity: 1;
}
section[role=heading].bg-accent:before {
  background: #2f5a6f;
  opacity: 0.4;
}
section[role=heading].bg-accent-solid:before {
  background: #2f5a6f;
  opacity: 1;
}
section[role=heading].bg-black:before {
  background: black;
  opacity: 0.4;
}
section[role=heading].bg-white:before {
  background: white;
  opacity: 0.4;
}
section[role=heading].bg:before, section[role=heading].bg h1, section[role=heading].bg p.tagline {
  display: none;
}

/* CSS STYLING FOR MENU OPTIONS */
/* sidecar and bar menus */
div.bar-menu {
  position: relative;
  z-index: 3;
  /* ul */
  /* $40rem */
  /* $64rem */
}
div.bar-menu ul {
  clear: both;
  margin-left: 0;
  text-align: center;
  list-type: none;
  /* li */
}
div.bar-menu ul a.toggle {
  display: block;
  margin-bottom: 1rem;
  border-bottom: 0;
  color: #fff;
  font-weight: 600;
  font-size: 0.889rem;
  line-height: 26px;
  text-align: center;
  text-transform: uppercase;
}
div.bar-menu ul a.toggle:hover {
  text-decoration: none;
}
div.bar-menu ul li {
  display: inline-block;
  margin: 0 0.4rem 0.79rem;
}
div.bar-menu ul li:before {
  display: none;
}
div.bar-menu ul li a {
  padding: 7px 12px 5px;
  transition: 0.3s all;
  display: inline-block;
  margin-bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  border-bottom: 0;
  color: #fff;
  line-height: 1rem;
}
div.bar-menu ul li a:hover {
  background: #be2f2d;
  text-decoration: none;
}
div.bar-menu.size-full {
  background: #787573;
}
div.bar-menu.size-full div.pw {
  display: block;
}
@media screen and (min-width: 40rem) {
  div.bar-menu ul {
    text-align: left;
  }
  div.bar-menu ul a.toggle {
    display: inline-block;
    margin-right: 0.709rem;
    margin-bottom: 0.709rem;
  }
  div.bar-menu.size-full a.toggle {
    margin-top: 0.8rem;
  }
}
@media screen and (min-width: 64rem) {
  div.bar-menu hr {
    display: none;
  }
  div.bar-menu.size-small ul {
    display: inline-block;
    width: 100%;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(255, 255, 255, 0.05);
  }
  div.bar-menu.size-small ul li a {
    padding: 8px 11px;
  }
  div.bar-menu.size-full .pw {
    padding-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* .bar-menu */
#otp {
  /* sidecar sub menu option */
  padding: 3.5rem 8% 1rem 8%;
  margin-right: 0;
  background: #5b8fa9;
  font-size: 0.79rem;
  line-height: 2.027;
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 12;
  transition: 0.3s all;
  cursor: pointer;
}
#otp ul {
  list-type: none;
  clear: both;
  margin-left: 0;
  position: static;
}
#otp ul li {
  width: 100%;
  margin: 0;
  float: left;
  list-type: none;
  text-align: left;
}
#otp ul li:before {
  display: none;
}
#otp ul li a {
  opacity: 0.7;
  transition: 0.3s all;
  border-bottom: 0;
  color: #fff;
}
#otp ul li a:after {
  content: " ›";
}
#otp ul li a:hover {
  opacity: 1;
}
#otp ul li a.active {
  color: #be2f2d;
}
#otp a.closer {
  width: 50px;
  height: 50px;
  float: right;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background: #43758e;
  border-bottom: 0;
  border-bottom-left-radius: 1px;
  transition: 0.3s all;
  color: #be2f2d;
  font-size: 2.887rem;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
}
#otp a.closer:after {
  content: "×";
}
#otp a.closer:hover {
  background: #972220;
}
#otp a.toggle {
  width: 140px;
  height: 60px;
  display: block;
  float: left;
  position: absolute;
  top: 0px;
  left: -140px;
  transition: 0.3s all;
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 0;
  border-bottom-left-radius: 1px;
  color: #fff;
  font-weight: 600;
  font-size: 0.889rem;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
@media screen and (max-width: 48rem) {
  #otp {
    width: 100%;
  }
  #otp.opened {
    right: 0;
  }
  #otp.opened a.toggle {
    left: 8%;
    text-align: left;
    color: #122a36;
    background: #5b8fa9;
  }
}
@media screen and (min-width: 48rem) {
  #otp {
    position: absolute;
    order: 2;
    width: 40%;
    right: 0;
    padding: 2rem;
    margin-left: 5%;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0;
  }
  #otp a.closer {
    display: none;
  }
  #otp a.toggle {
    position: static;
    height: 20px;
    margin-bottom: 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: #fff;
    line-height: 1;
    text-align: left;
  }
  #otp ul li {
    width: 100%;
    float: none;
  }
  #otp ul li a.active {
    color: #fff;
  }
}
@media screen and (min-width: 64rem) {
  #otp {
    right: -8%;
    animation-name: menuSlide;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.17, 0.67, 0.52, 1.21);
    animation-duration: 1.5s;
  }
}
@media screen and (min-width: 84rem) {
  #otp {
    right: -12%;
  }
}
@media screen and (min-width: 90rem) {
  #otp {
    right: -15%;
  }
}
@media screen and (min-width: 96rem) {
  #otp {
    right: -20%;
  }
}
@media screen and (min-width: 101rem) {
  #otp {
    right: -25%;
  }
}
@media screen and (min-width: 110rem) {
  #otp {
    width: 80%;
    right: -75%;
  }
}
@media screen and (min-width: 130rem) {
  #otp {
    width: 80%;
    right: -95%;
    top: 1.75rem;
  }
}

@keyframes menuSlide {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  40% {
    transform: translateX(300px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
/* basically, we want to make sure all the headers but the below ones get extra padding */
/* we'll keep light padding on the more utilitarian pages */
@media screen and (min-width: 48rem) {
  body:not(.archive, .error404) section[role=heading] {
    padding: 6% 0 6.5%;
  }
}
@media screen and (min-width: 64rem) {
  body:not(.archive, .error404) section[role=heading] {
    padding: 5% 0 5.5%;
  }
}
@media screen and (min-width: 84rem) {
  body:not(.archive, .error404) section[role=heading] {
    padding: 5% 0 5.5%;
  }
}
/* Section Color Options -- background images can be added in the page-specific tweaks section of flecha.less */
section.white {
  background: #fff;
}

section.primaryDark {
  background: #972220;
}

section.primary {
  background: #be2f2d;
}

section.primaryLight {
  background: #d14f4d;
}

section.accentDark {
  background: #1d3e4e;
}

section.accent {
  background: #2f5a6f;
}

section.accentLight {
  background: #5b8fa9;
}

section.backgroundDark {
  background: #46423e;
}

section.background {
  background: #5f5b58;
}

section.backgroundLight {
  background: #787573;
}

/* here's what we're doing. We are assuming that if you put two sections together, you're intending for them to run together as the same section. So we collapse the padding on the second section. */
/* if you don't need this, just take it out. We've found it to be a helpful default behavior. */
section.white + section.white .pw,
section.primaryDark + section.primaryDark .pw,
section.primary + section.primary .pw,
section.primaryLight + section.primaryLight .pw,
section.accentDark + section.accentDark .pw,
section.accent + section.accent .pw,
section.accentLight + section.accentLight .pw,
section.backgroundDark + section.backgroundDark .pw,
section.background + section.background .pw,
section.backgroundLight + section.backgroundLight .pw {
  padding-top: 0 !important;
}

/* no padding helper class */
/* If the sections are colored or a background, change all the colors to white */
/* I'm assuming that all of your brand colors will be similar to mine -- you'll have to tweak which sections to include based on your colors */
section.primaryDark h1, section.primaryDark h2, section.primaryDark h3, section.primaryDark h4, section.primaryDark h5, section.primaryDark h6, section.primary h1, section.primary h2, section.primary h3, section.primary h4, section.primary h5, section.primary h6, section.primaryLight h1, section.primaryLight h2, section.primaryLight h3, section.primaryLight h4, section.primaryLight h5, section.primaryLight h6, section.backgroundDark h1, section.backgroundDark h2, section.backgroundDark h3, section.backgroundDark h4, section.backgroundDark h5, section.backgroundDark h6, section.background h1, section.background h2, section.background h3, section.background h4, section.background h5, section.background h6, section.backgroundLight h1, section.backgroundLight h2, section.backgroundLight h3, section.backgroundLight h4, section.backgroundLight h5, section.backgroundLight h6, section.bg h1, section.bg h2, section.bg h3, section.bg h4, section.bg h5, section.bg h6 {
  color: #fff !important;
}
section.primaryDark p, section.primaryDark ul li, section.primaryDark ol li, section.primary p, section.primary ul li, section.primary ol li, section.primaryLight p, section.primaryLight ul li, section.primaryLight ol li, section.backgroundDark p, section.backgroundDark ul li, section.backgroundDark ol li, section.background p, section.background ul li, section.background ol li, section.backgroundLight p, section.backgroundLight ul li, section.backgroundLight ol li, section.bg p, section.bg ul li, section.bg ol li {
  color: rgba(255, 255, 255, 0.75) !important;
}
section.primaryDark a, section.primary a, section.primaryLight a, section.backgroundDark a, section.background a, section.backgroundLight a, section.bg a {
  color: #fff !important;
  text-decoration: underline;
}

/* Firmament page styles */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* HEADER						 																								    */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
header[role=banner] {
  background: #5b8fa9;
  position: -webkit-sticky;
  position: sticky;
  /* YMMV, browser support is mixed: https://caniuse.com/#feat=css-sticky */
  /* Left and Right menus */
  /* Header Logo */
}
header[role=banner] [data-st=frmt-row] {
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
}
header[role=banner] [data-st=frmt-five] {
  width: 100%;
  margin-bottom: 0;
}
header[role=banner] [data-st=frmt-five] li {
  display: block;
  width: 100%;
  float: left;
  margin-bottom: 0;
  text-align: center;
}
header[role=banner] [data-st=frmt-five] li a {
  width: 100%;
  height: 40px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 40px;
  transition: 0.3s all;
  /* change color on hover */
}
header[role=banner] [data-st=frmt-five] li a:hover, header[role=banner] [data-st=frmt-five] li a:focus {
  color: #d14f4d;
  text-decoration: none;
}
header[role=banner] [data-st=frmt-five] li.current_page_item {
  box-shadow: inset 0 -2px 0 #5b8fa9;
  color: #d14f4d;
}
header[role=banner] [data-st=frmt-two] {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 1rem 0;
}
header[role=banner] [data-st=frmt-two] a {
  display: block;
  height: auto;
  margin: 0 auto;
}
@media screen and (min-width: 30rem) {
  header[role=banner] [data-st=frmt-two] {
    width: 60%;
    padding: 0;
  }
  header[role=banner] [data-st=frmt-five] {
    width: 20%;
  }
  header[role=banner] [data-st=frmt-five] li {
    width: 100%;
    text-align: right;
  }
  header[role=banner] [data-st=frmt-five]:first-child li {
    text-align: left;
  }
}
@media screen and (min-width: 40rem) {
  header[role=banner] [data-st=frmt-two] {
    width: 35%;
    margin: 0;
  }
  header[role=banner] [data-st=frmt-two] a {
    max-width: 100%;
  }
  header[role=banner] [data-st=frmt-five] {
    width: 32.5%;
    margin-right: 0;
  }
  header[role=banner] [data-st=frmt-five] li {
    width: 33.333%;
    text-align: center;
  }
  header[role=banner] [data-st=frmt-five]:first-child li {
    text-align: center;
  }
}
@media screen and (min-width: 48rem) {
  header[role=banner] [data-st=frmt-five] li {
    display: inline-block;
    width: auto;
    float: none;
    margin-top: 3%;
  }
  header[role=banner] [data-st=frmt-five]:first-child ul {
    padding-right: 1rem;
    text-align: right !important;
  }
  header[role=banner] [data-st=frmt-five]:first-child ul li {
    margin-left: 0.48rem;
  }
  header[role=banner] [data-st=frmt-five]:last-child ul {
    padding-left: 1rem;
    text-align: left !important;
  }
  header[role=banner] [data-st=frmt-five]:last-child ul li {
    margin-right: 0.48rem;
  }
}
@media screen and (min-width: 64rem) {
  header[role=banner] [data-st=frmt-two] {
    width: 20%;
  }
  header[role=banner] [data-st=frmt-two] a {
    margin: 0.48rem 0;
  }
  header[role=banner] [data-st=frmt-five] {
    width: 40% !important;
  }
  header[role=banner] [data-st=frmt-five]:first-child ul {
    padding-right: 2.448rem;
  }
  header[role=banner] [data-st=frmt-five]:first-child ul li {
    margin-left: 1.953rem;
  }
  header[role=banner] [data-st=frmt-five]:last-child ul {
    padding-left: 2.448rem;
  }
  header[role=banner] [data-st=frmt-five]:last-child ul li {
    margin-right: 1.953rem;
  }
}

/* End header styles */
/* Main site header styles */
/* Make sure we're only grabbing the SITE footer, and not any random <footer> elements you might be using in your HTML source */
main + footer {
  background: #e6e6e6;
  /* Primary Footer Container */
  /* Secondary Footer Container */
  /* data-st=frmt-eight: secondary footer container */
  /* Start layering in more styling as we up the display size */
  /* 30 rem */
}
main + footer [data-st=frmt-four] {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  text-align: center;
}
main + footer [data-st=frmt-four] h4 {
  color: #999999;
}
main + footer [data-st=frmt-four] span.description {
  color: #43758e;
}
main + footer [data-st=frmt-eight] {
  /* copyright text */
  /* social buttons */
  /* menu */
}
main + footer [data-st=frmt-eight] span[role=contentinfo] {
  display: block;
  margin-bottom: 1rem;
  color: #999999;
  font-size: 0.8rem;
  line-height: 1.25rem;
  text-align: center;
}
main + footer [data-st=frmt-eight] div.orb-social {
  text-align: center;
  padding-bottom: 1rem;
}
main + footer [data-st=frmt-eight] [class^=menu] {
  /* footer menu -- the fancy select just makes sure it starts with 'menu-' since wordpress class names vary */
  /* keeps the footer tidy, and hides any submenus that exist */
  /* menu item */
}
main + footer [data-st=frmt-eight] [class^=menu] ul.submenu {
  display: none;
}
main + footer [data-st=frmt-eight] [class^=menu] li {
  width: 100%;
  float: left;
  margin-bottom: 0;
  text-align: center;
  /* change color on hover */
}
main + footer [data-st=frmt-eight] [class^=menu] li a {
  width: 100%;
  height: 30px;
  margin-bottom: 2px;
  color: #d97978;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: 0.3s all;
}
main + footer [data-st=frmt-eight] [class^=menu] li.current-menu-item a, main + footer [data-st=frmt-eight] [class^=menu] li a:hover, main + footer [data-st=frmt-eight] [class^=menu] li a:focus {
  color: #be2f2d;
}
@media screen and (min-width: 30rem) {
  main + footer {
    /* Secondary Footer Container */
    /* data-st=frmt-eight: secondary footer container */
  }
  main + footer [data-st=frmt-eight] {
    padding-top: 1.5rem;
    /* menu */
  }
  main + footer [data-st=frmt-eight] [class^=menu] {
    width: 100%;
    text-align: center;
  }
  main + footer [data-st=frmt-eight] [class^=menu] li {
    display: inline-block;
    float: none;
    width: 33.333%;
  }
}
@media screen and (min-width: 48rem) {
  main + footer {
    /* up the padding for larger screens. The grid includes default padding, but some elements you'll want to tweak it */
    /* Primary Footer Container */
    /* Secondary Footer Container */
  }
  main + footer div.pw {
    padding-top: 2rem;
    margin-bottom: 2rem;
  }
  main + footer [data-st=frmt-four] h4, main + footer [data-st=frmt-four] span {
    text-align: left;
  }
  main + footer [data-st=frmt-eight] {
    margin-bottom: 0;
    padding-top: 0;
    /* remember we added padding? now we no longer need it */
  }
  main + footer [data-st=frmt-eight] div.orb-social {
    text-align: right;
  }
  main + footer [data-st=frmt-eight] span[role=contentinfo] {
    text-align: right;
    margin: 0 0 1rem 0;
    padding: 0;
    border: 0px solid;
  }
  main + footer [data-st=frmt-eight] [class^=menu] {
    display: inline-block;
    float: right;
    width: auto;
    text-align: right;
  }
  main + footer [data-st=frmt-eight] [class^=menu] li {
    margin-left: 1rem;
    width: auto;
    text-align: right;
  }
}
@media screen and (min-width: 64rem) {
  main + footer {
    /* Primary Footer Container */
    /* Secondary Footer Container */
  }
  main + footer [data-st=frmt-four] {
    width: 43.5%;
    /* again, the grid has default widths, but you'll want to adjust these on a case by case basis */
  }
  main + footer [data-st=frmt-four] h4 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
  }
  main + footer [data-st=frmt-eight] {
    width: 53.5%;
  }
}

/* that's a wrap on the footer! */
/* MBTS-specific network nav */
nav.network-nav {
  background: #e6e6e6;
  padding: 5%;
}
nav.network-nav .wrap {
  width: 100%;
}
nav.network-nav .network {
  list-type: none;
  text-align: center;
}
nav.network-nav .item {
  display: inline-block;
  margin: 3px;
  line-height: 1.802;
  font-size: 0.79rem;
}
nav.network-nav .item a {
  color: #666666;
  border-bottom: 0;
  transition: 0.3s all;
}
nav.network-nav .item a:hover {
  color: #be2f2d;
}
nav.network-nav .item a.active {
  color: #d14f4d;
  font-weight: 600;
}
@media screen and (min-width: 64rem) {
  nav.network-nav {
    border-top: 0;
    display: flex;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
  }
  nav.network-nav .item {
    flex-grow: 1;
    font-size: 0.75rem;
    margin: 0 8px;
  }
  nav.network-nav .item a {
    width: 100%;
  }
  nav.network-nav .item:first-child {
    margin-left: 0;
  }
  nav.network-nav .item:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 48rem) {
  nav.network-nav .network {
    display: flex;
    position: relative;
    z-index: 1;
  }
  nav.network-nav .item {
    margin-right: 0.555rem;
  }
  nav.network-nav .item:last-child {
    margin-right: 0;
  }
  nav.network-nav .item a {
    padding: 1rem 1.266rem;
    display: inline-block;
    transition: 0.3s all;
    line-height: 1.2;
  }
  nav.network-nav .item a.active, nav.network-nav .item a:hover {
    position: relative;
    background: #2f5a6f;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: #e6e6e6;
    text-decoration: none;
  }
  nav.network-nav .item a.active:after, nav.network-nav .item a:hover:after {
    content: "";
    position: absolute;
    left: -2500%;
    bottom: 0;
    transition: 0.3s all;
    display: block;
    width: 5000%;
    height: 8px;
    background: #2f5a6f;
  }
  nav.network-nav .item a.active {
    z-index: -1;
  }
  nav.network-nav .item:first-child a:hover {
    background: #be2f2d;
  }
  nav.network-nav .item:first-child a:hover:after {
    background: #be2f2d;
  }
  nav.network-nav .item:nth-child(2) a:hover {
    background: #075c83;
  }
  nav.network-nav .item:nth-child(2) a:hover:after {
    background: #075c83;
  }
  nav.network-nav .item:nth-child(3) a:hover {
    background: #b59737;
  }
  nav.network-nav .item:nth-child(3) a:hover:after {
    background: #b59737;
  }
  nav.network-nav .item:nth-child(4) a:hover {
    background: #3669b0;
  }
  nav.network-nav .item:nth-child(4) a:hover:after {
    background: #3669b0;
  }
  nav.network-nav .item:nth-child(5) a:hover {
    background: #799e2e;
  }
  nav.network-nav .item:nth-child(5) a:hover:after {
    background: #799e2e;
  }
  nav.network-nav .item:nth-child(6) a:hover {
    background: #ca412c;
  }
  nav.network-nav .item:nth-child(6) a:hover:after {
    background: #ca412c;
  }
  nav.network-nav .item:nth-child(7) a:hover {
    background: #198aa6;
  }
  nav.network-nav .item:nth-child(7) a:hover:after {
    background: #198aa6;
  }
  nav.network-nav .item:nth-child(8) a:hover {
    background: #2f5a6f;
  }
  nav.network-nav .item:nth-child(8) a:hover:after {
    background: #2f5a6f;
  }
}
@media screen and (min-width: 72rem) {
  nav.network-nav .item a {
    padding: 1.125rem 1.802rem;
  }
}
@media screen and (min-width: 100rem) {
  nav.network-nav .item {
    font-size: 0.889rem;
  }
}

/* Main site footer styles */
div.widget {
  margin-bottom: 1.5rem;
}
div.widget h4 {
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  color: #122a36;
  font-weight: bold;
}

div.post-meta {
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.75;
}
div.post-meta span {
  display: inline-block;
  margin: 0 0.8rem;
}

section.posts [data-st=frmt-eight] [data-st=frmt-row] {
  display: block;
}
section.posts div.title {
  width: 100%;
  position: relative;
  padding: 4rem 3rem;
  margin-bottom: 1.5rem;
  background: #d14f4d;
  background-size: cover !important;
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
section.posts div.title:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
}
section.posts div.title h2 {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  color: #fff;
}
section.posts div.title a {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

body.single section[role=heading] {
  position: relative;
}
body.single section[role=heading]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
}
body.single section[role=heading] div.pw {
  position: relative;
  z-index: 4;
}
body.single section.comments {
  background: #e6e6e6;
}
body.single section.comments div#comments article {
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
body.single section.comments div#comments article h4 {
  margin-bottom: 0;
  padding-top: 8px;
}
body.single section.comments div#comments article time a {
  text-transform: uppercase;
  font-size: 12px;
  color: #666;
}
body.single section.comments div#comments article img.avatar {
  float: left;
  width: 48px;
  height: 48px;
  margin: 0 1.5rem 1.5rem 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border-radius: 40px;
}
body.single section.comments div#comments article p {
  clear: both;
}
body.single section.comments form#commentform label {
  width: 100%;
  margin-bottom: 10px;
  font-size: 12px;
  text-transform: uppercase;
}
body.single section.comments form#commentform input, body.single section.comments form#commentform textarea {
  width: 100%;
}
body.single section.comments form#commentform textarea {
  margin-bottom: 10px;
}
body.single section.comments form#commentform input#submit {
  border: 0;
}
@media screen and (min-width: 48rem) {
  body.single section.content div.pw {
    display: flex;
  }
  body.single section.content div.pw [data-st=frmt-four] {
    padding: 2rem;
    background: rgba(0, 0, 0, 0.02);
  }
}

body.author section[role=heading] img {
  float: none;
  display: block;
  margin: 0 auto 1.5rem;
  border-radius: 50px;
}

/* Wordpress blog-specific styling */
/* I am working on documentation for Firmament, but I'm a one-man team so progress is slow! */
/* If you have any questions, drop me a line at andrew@mosaic.ws -- I'd love to help out. */

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