/*
                                                ,,            ,,                          ,,
 .M"""bgd mm                                    db          `7MM        mm         mm   `7MM                                    OO OO OO
,MI    "Y MM                                                  MM        MM         MM     MM                                    88 88 88
`MMb.   mmMMmm ,pW"Wq.`7MMpdMAo.     `7Mb,od8 `7MM  .P"Ybmmm  MMpMMMb.mmMMmm     mmMMmm   MMpMMMb.  .gP"Ya `7Mb,od8 .gP"Ya      || || ||
  `YMMNq. MM  6W'   `Wb MM   `Wb       MM' "'   MM :MI  I8    MM    MM  MM         MM     MM    MM ,M'   Yb  MM' "',M'   Yb     || || ||
.     `MM MM  8M     M8 MM    M8       MM       MM  WmmmP"    MM    MM  MM         MM     MM    MM 8M""""""  MM    8M""""""     `' `' `'
Mb     dM MM  YA.   ,A9 MM   ,AP       MM       MM 8M         MM    MM  MM         MM     MM    MM YM.    ,  MM    YM.    ,     ,, ,, ,,
P"Ybmmd"  `Mbmo`Ybmd9'  MMbmmd'      .JMML.   .JMML.YMMMMMb .JMML  JMML.`Mbmo      `Mbmo.JMML  JMML.`Mbmmd'.JMML.   `Mbmmd'     db db db
                        MM                         6'     dP
                      .JMML.                       Ybmmmd'

Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray!
You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet.
So please don't use these styles. They're just here to put together the demo, and nothing more.
They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself.

Atomic design is philosophically complimentary with these CSS approaches:

* SMACSS by Jonathan Snook http://smacss.com/
* OOCSS by Nicole Sullivan http://oocss.org/
* BEM CSS Methology : https://en.bem.info/methodology/
* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines

So feel free to use any of these approaches. Or don't. It's totally up to you.

*/
/*------------------------------------*\
    $TABLE OF CONTENTS
    based generally on Harry Roberts excellent CSS Guidelines https://github.com/csswizardry/CSS-Guidelines
\*------------------------------------*/
/**
 * VARIABLES..............................Declarations of Sass variables
 * .....Colors
 * .....Typography
 * .....Layout
 * .....Defaults
 * .....Breakpoints
 * MIXINS.................................Sass mixins
 * RESET..................................Set reset defaults
 * GLOBAL CLASSES.........................Set reset defaults
 * GLOBAL ELEMENTS........................Establish global styles
 * .....Main
 * .....Headings
 * .....Text-related elements (p, blockquote, lists)
 * .....Defaults
 * .....Breakpoints
 * TYPOGRAPHY------------------------------
 * MEDIA------------------------------
 * LAYOUT------------------------------
 * NAVIGATION------------------------------
 * TOC To Be Continued
 */
/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@800&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/* CSS Transition
	Usage: @include transition(width,0.3s,ease-out);
 */
/* Rem Unit font sizes with relative fallback http:/seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback  
	Usage: @include font-size(1, large);
*/
/*------------------------------------*\
    $RESET
\*------------------------------------*/
/* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure {
  margin: 0;
  padding: 0; }

header, footer, nav, section, article, hgroup, figure {
  display: block; }

/*------------------------------------*\
    $GLOBAL ELEMENTS
\*------------------------------------*/
/*------------------------------------*\
    $GLOBAL CLASSES
\*------------------------------------*/
/* Clearfix */
.cf, .l-two-col, [role=main] {
  *zoom: 1; }

.cf::before, .l-two-col::before, [role=main]::before, .cf::after, .l-two-col::after, [role=main]::after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.cf::after, .l-two-col::after, [role=main]::after {
  clear: both; }

/* Completely remove from the flow and screen readers. */
.is-hidden {
  display: none !important;
  visibility: hidden !important; }

/* Completely remove from the flow but leave available to screen readers. */
.is-vishidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); }

/* Floats */
.right {
  float: right;
  padding: 0 0 1em 1em; }

.right-search {
  float: right;
  padding: 0 0 1em 0; }

.left {
  float: left;
  padding: 0 1em 1em 0; }

/* Text-Align */
.align-right {
  text-align: right; }

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

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

/* Display Classes */
@media all and (max-width: 46.8em) {
  .hide-small {
    display: none; } }

@media all and (min-width: 46.8em) and (max-width: 50em) {
  .hide-med {
    display: none; } }

@media all and (min-width: 50em) {
  .hide-large {
    display: none; } }

.valid {
  color: #089e00; }

.error {
  color: #f00; }

.warning {
  color: #fff664; }

.information {
  color: #000db5; }

.font-secondary {
  font-family: "Montserrat", sans-serif; }

body {
  background: #fff;
  font: 100%/1.5 "Open Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
  color: #333;
  box-sizing: border-box;
  overflow-x: hidden; }

.pre-scrollable {
  max-height: 340px;
  overflow-y: auto; }

/* Links */
a {
  outline: 0; }

/* Headings */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem; }

h1, .h1 {
  font-weight: 600;
  line-height: 1.2; }

h2, .h2 {
  font-weight: 600;
  line-height: 1.2; }

h3, .h3 {
  font-weight: 600;
  line-height: 1.2; }

h4, .h4 {
  font-weight: 600;
  line-height: 1.2; }

h5, .h5 {
  font-weight: 600;
  line-height: 1.2; }

h6, .h6 {
  font-weight: 700;
  line-height: 1.2; }

.extrabold-1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem; }

.extrabold-2 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem; }

.extrabold-3 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem; }

.extrabold-4 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem; }

.extrabold-5 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.5rem; }

.extrabold-6 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.5rem; }

@media (min-width: 992px) {
  /* Headings */
  h1, .h1 {
    font-size: 40px; }
  h2, .h2 {
    font-size: 32px; }
  h3, .h3 {
    font-size: 28px; }
  h4, .h4 {
    font-size: 24px; }
  h5, .h5 {
    font-size: 20px; }
  h6, .h6 {
    font-size: 16px; }
  /* Display classes */
  .display-1 {
    font-size: 5rem; }
  .display-2 {
    font-size: 4.5rem; }
  .display-3 {
    font-size: 4rem; }
  .display-4 {
    font-size: 3.5rem; }
  .display-5 {
    font-size: 3rem; }
  .display-6 {
    font-size: 2.5rem; } }

/* Subheadings */
.subheading {
  font-family: "Montserrat", sans-serif;
  font-weight: normal; }

h2.pl-c-category__title {
  font-family: 'Montserrat', sans-serif; }

/* 18px version */
.body-18px .h1, .body-18px .h2, .body-18px .h3, .body-18px .h4, .body-18px .h5, .body-18px .h6, .body-18px h1, .body-18px h2, .body-18px h3, .body-18px h4, .body-18px h5, .body-18px h6 {
  font-weight: 600; }

.body-18px h1,
.body-18px .h1 {
  font-size: 45px; }

.body-18px h2,
.body-18px .h2 {
  font-size: 36px; }

.body-18px h3,
.body-18px .h3 {
  font-size: 32px; }

.body-18px h4,
.body-18px .h4 {
  font-size: 27px; }

.body-18px h5,
.body-18px .h5 {
  font-size: 22px; }

.body-18px h6,
.body-18px .h6 {
  font-size: 18px; }

.body-18px .extrabold-1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem; }

.body-18px .extrabold-2 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem; }

.body-18px .extrabold-3 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem; }

.body-18px .extrabold-4 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem; }

.body-18px .extrabold-5 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.5rem; }

.body-18px .extrabold-6 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.5rem; }

.body-18px .display-1, .body-18px .display-2, .body-18px .display-3, .body-18px .display-4, .body-18px .display-5, .body-18px .display-6 {
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1rem; }

.body-18px .display-1 {
  font-size: 5rem; }

.body-18px .display-2 {
  font-size: 4.5rem; }

.body-18px .display-3 {
  font-size: 4rem; }

.body-18px .display-4 {
  font-size: 3.5rem; }

.body-18px .display-5 {
  font-size: 3rem; }

.body-18px .display-6 {
  font-size: 2.5rem; }

/* Text-Related Elements */
p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 16px 0; }

p.lead {
  font-size: 18px;
  font-weight: 300;
  line-height: 22px; }
  @media all and (min-width: 768px) {
    p.lead {
      font-size: 20px;
      font-weight: 300;
      line-height: 24px; } }

small {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px; }

/* Blockquote */
blockquote {
  font-style: italic;
  border-left: 1px solid #808080;
  color: #808080;
  padding-left: 1em;
  margin-bottom: 1em; }

/* Horizontal Rule */
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: .25; }

abbr {
  border-bottom: 1px dotted #808080;
  cursor: help; }

/* Code snippet */
pre[class*="lang-"] {
  background-color: #333;
  padding: 15px;
  width: 100%; }

pre code {
  font-family: 'Consolas', 'Courier New', monospace;
  color: #fff; }

/* 18px version */
.body-18px p {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin: 20px 0; }

.body-18px p.lead {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px; }

.body-18px blockquote {
  font-size: 20px;
  font-weight: 400;
  line-height: 34px;
  margin: 20px 0; }

ol, ul {
  margin: 0 0 1rem 0;
  padding-left: 2rem; }

/* Definition Lists */
dl {
  overflow: hidden;
  margin: 0 0 1em; }

dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

/*------------------------------------*\
    $MEDIA ELEMENTS
\*------------------------------------*/
/* Flexible Media */
img, video, object {
  max-width: 100%;
  height: auto; }

iframe {
  margin-bottom: 1em; }

figure {
  margin-bottom: 1em; }
  figure img {
    margin-bottom: 0.5em; }

figcaption {
  font-style: italic; }

/*------------------------------------*\
    $FORMS
\*------------------------------------*/
form ol, form ul {
  list-style: none;
  margin-left: 0; }

fieldset {
  border: 0;
  padding: 0;
  margin: 0; }

label {
  display: block;
  padding-bottom: 0.5em; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0 1px 0; }

input, textarea {
  width: 100%;
  border: 1px solid #808080;
  padding: 0.5em 0.65rem; }

input[type=text], input[type=search], input[type=url], input[type=number], textarea {
  -webkit-appearance: none; }

button, input[type="submit"] {
  padding: 0.5em;
  background: #333;
  border: 1px solid #808080;
  cursor: pointer; }

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 0.3em; }

input[type="search"] {
  -webkit-appearance: none;
  border-radius: 0; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

.field-container {
  margin-bottom: 1em; }

.inline-form fieldset, .inline-form .inline-container {
  position: relative; }

.inline-form input[type=submit], .inline-form button, .inline-form .btn {
  font-size: 0.875em;
  padding: 0.65rem 1.3rem;
  background: #333;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: auto; }
  .inline-form input[type=submit]:hover, .inline-form input[type=submit]:focus, .inline-form button:hover, .inline-form button:focus, .inline-form .btn:hover, .inline-form .btn:focus {
    background: #808080;
    color: #fff; }

/* Validation */
.has-error {
  border-color: #f00; }

.is-valid {
  border-color: #089e00; }

/*------------------------------------*\
    $SPECIFIC FORMS
\*------------------------------------*/
/* Search Form */
.search-field {
  padding-right: 3em; }

.inline-form .search-submit {
  background: none;
  padding: 0.78em 1em;
  border: 0;
  border-left: 1px solid #808080;
  color: #808080; }

/*------------------------------------*\
    $Table
\*------------------------------------*/
table.table.table-bordered {
  border: 1px solid #ddd; }

.table-bordered th {
  border: 1px solid #ddd;
  background-color: #eee; }

.table-bordered td {
  border: 1px solid #ddd; }

/*------------------------------------*\
    $City Logos
\*------------------------------------*/
.city-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 350px; }
  .city-logo .logo-container {
    display: flex;
    height: 50%;
    align-items: center; }
  .city-logo img {
    max-width: 100%;
    max-height: 100%; }

.animate-fade {
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out; }
  .animate-fade:hover {
    opacity: 0; }

.animate-move > .demo-shape {
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out; }

/* Hide expand panels buttons */
.pl-c-pattern__extra-toggle {
  display: none !important; }

/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
/* Layout Container */
.lc, [role=main] {
  max-width: 72em;
  margin: 0 auto;
  padding: 0.5em; }

/*------------------------------------*\
    $TEMPLATES
\*------------------------------------*/
/* Two Column Layout */
@media all and (min-width: 50em) {
  .l-two-col .l-main {
    float: left;
    width: 70%;
    padding-right: 1em; } }

@media all and (max-width: 50em) {
  .l-two-col .l-sidebar {
    clear: both; } }

@media all and (min-width: 50em) {
  .l-two-col .l-sidebar {
    float: left;
    width: 30%;
    padding: 0 0 0 1em; } }

/*------------------------------------*\
    $GRIDS
\*------------------------------------*/
/* Grid Container */
.g {
  overflow: hidden;
  margin: 0 -0.5em; }

/* Grid Item */
.gi {
  padding: 0.5em; }
  .gi img {
    display: block; }
  @media all and (min-width: 46.8em) {
    .gi {
      float: left; } }

/* Grid 1up */
.g-1up .gi {
  width: 100%; }

/* Grid 2up */
@media all and (min-width: 46.8em) {
  .g-2up > .gi {
    float: left;
    width: 50%; }
    .g-2up > .gi:nth-of-type(odd) {
      clear: left; } }

/* Grid Half (Always displayed side by side) */
.g-half > .gi {
  float: left;
  width: 50%; }
  .g-half > .gi:nth-of-type(odd) {
    clear: left; }

/* Grid 3up */
@media all and (min-width: 46.8em) {
  .g-3up > .gi {
    float: left;
    width: 50%; }
    .g-3up > .gi:nth-of-type(2n+1) {
      clear: left; } }

@media all and (min-width: 50em) {
  .g-3up > .gi {
    width: 33.3333333%; }
    .g-3up > .gi:nth-of-type(2n+1) {
      clear: none; }
    .g-3up > .gi:nth-of-type(3n+1) {
      clear: left; } }

/* Grid 4up */
@media all and (min-width: 46.8em) {
  .g-4up > .gi {
    float: left;
    width: 50%; }
    .g-4up > .gi:nth-of-type(2n+1) {
      clear: both; } }

@media all and (min-width: 50em) {
  .g-4up > .gi {
    width: 25%; }
    .g-4up > .gi:nth-of-type(2n+1) {
      clear: none; }
    .g-4up > .gi:nth-of-type(4n+1) {
      clear: left; } }

/* Grid Quarter (Always displayed side by side) */
.g-quarter > .gi {
  float: left;
  width: 24%; }
  .g-quarter > .gi:nth-of-type(4n+1) {
    clear: left; }

@media all and (min-width: 29.75em) {
  .g-max4 > .gi {
    float: left;
    width: 50%; }
    .g-max4 > .gi:nth-of-type(2n+1) {
      clear: both; } }

@media all and (min-width: 39.8em) {
  .g-max4 > .gi {
    width: 33.3333333%; }
    .g-max4 > .gi:nth-of-type(2n+1) {
      clear: none; }
    .g-max4 > .gi:nth-of-type(3n+1) {
      clear: left; } }

@media all and (min-width: 50em) {
  .g-max4 > .gi {
    width: 25%; }
    .g-max4 > .gi:nth-of-type(3n+1) {
      clear: none; }
    .g-max4 > .gi:nth-of-type(4n+1) {
      clear: left; } }

/* Grid 5up */
.g-max5 > .gi {
  float: left;
  width: 50%; }
  .g-max5 > .gi:nth-of-type(2n+1) {
    clear: both; }

@media all and (min-width: 39.8em) {
  .g-max5 > .gi {
    width: 33.3333333%; }
    .g-max5 > .gi:nth-of-type(2n+1) {
      clear: none; }
    .g-max5 > .gi:nth-of-type(3n+1) {
      clear: left; } }

@media all and (min-width: 46.8em) {
  .g-max5 > .gi {
    width: 25%; }
    .g-max5 > .gi:nth-of-type(3n+1) {
      clear: none; }
    .g-max5 > .gi:nth-of-type(4n+1) {
      clear: left; } }

@media all and (min-width: 48em) {
  .g-max5 > .gi {
    width: 20%; }
    .g-max5 > .gi:nth-of-type(4n+1) {
      clear: none; }
    .g-max5 > .gi:nth-of-type(5n+1) {
      clear: left; } }

/* Grid 2/3 */
@media all and (min-width: 46.8em) {
  .gi-2-3 {
    float: left;
    width: 66.666666%; } }

@media all and (min-width: 46.8em) {
  .gi-1-3 {
    float: left;
    width: 33.333333%; } }

/* Grid 4up block */
.g-opposites .gi {
  float: left; }
  .g-opposites .gi:last-child {
    float: right;
    text-align: right; }

/*------------------------------------*\
    $PAGE STRUCTURE
\*------------------------------------*/
/* PAGE HEADER */
header {
  background: #1c2253;
  display: block; }

nav.navbar {
  min-height: 85px;
  padding: 0;
  color: #fffeff; }

div.site-branding {
  flex-grow: 2;
  display: flex;
  align-items: center; }

div.site-logo {
  min-width: 85px; }

div.site-branding > div:nth-child(2) {
  display: block;
  margin-left: 1rem; }

div.site-name-slogan {
  white-space: nowrap; }

div.site-name-slogan div.site-name {
  font-size: x-large; }

.navbar-nav {
  list-style: none; }
  .navbar-nav li.nav-item a.nav-link {
    text-decoration: none;
    color: #fffeff; }

.logo {
  float: left;
  max-width: 8rem;
  margin: 0.4rem; }
  @media all and (min-width: 46.8em) {
    .logo {
      max-width: 9rem; } }

/*------------------------------------*\
    $NAVIGATION
\*------------------------------------*/
.nav {
  margin-top: 1rem; }
  .nav .nav-link-wrapper {
    margin-right: 1rem; }
  .nav .nav-link, .nav .navbar-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    padding: 0 0 5px 0;
    color: #161f50; }
  .nav .nav-link:hover, .nav .nav-link.active {
    border-bottom: 3px solid #161f50;
    padding-bottom: 2px; }

/* Capitalize menu links NOTE: currently does not work */
.pl-c-nav__link--title {
  text-transform: capitalize; }

.pagination {
  overflow: hidden; }
  .pagination li {
    float: left;
    border-right: 1px solid #eee; }
    .pagination li:last-child {
      border: 0; }
  .pagination a {
    padding: 1em; }

/* BREADCRUMBS */
ol.breadcrumb {
  margin: 1rem 0;
  padding: 0;
  background-color: transparent; }

.breadcrumb {
  font-size: 0.929em; }

li.breadcrumb-item + li.breadcrumb-item::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-size: 0.8em;
  font-weight: 600;
  float: none;
  padding-right: 0.5rem; }

/*------------------------------------*\
    $MAIN CONTENT AREA
\*------------------------------------*/
[role=main] {
  padding: 0.5em 0.5em 2em;
  overflow: hidden; }

/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer {
  clear: both;
  overflow: hidden;
  background: #161f50;
  color: #fff;
  line-height: 1.5; }
  .footer a {
    color: #fff; }
  .footer a:hover {
    text-decoration: underline; }
  .footer p {
    font-size: 14px;
    line-height: 22px; }

.site-footer {
  font: 100%/1.5 "Open Sans", sans-serif; }

.nav-footer {
  margin: -1em -1em 1em; }
  .nav-footer li {
    border-bottom: 1px solid #333; }
    @media all and (min-width: 46.8em) {
      .nav-footer li {
        border: 0;
        float: left; } }
  .nav-footer a {
    display: block;
    padding: 1em; }

@media all and (min-width: 46.8em) {
  .copyright {
    float: right; } }

/*------------------------------------*\
    $TEXT Styles
\*------------------------------------*/
.intro {
  font-size: 1.0625em;
  font-weight: bold; }

.pullquote {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4375em; }

.caption {
  font-style: italic; }

.text a {
  text-decoration: underline; }

.text ul {
  list-style: disc;
  margin: 0 0 1em 1.2em; }
  .text ul ul {
    margin-bottom: 0; }

.text ol {
  list-style: decimal;
  margin: 0 0 1em 1.5em; }
  .text ol ol {
    margin-bottom: 0; }

/*------------------------------------*\
    $COMPONENTS
\*------------------------------------*/
/* Icon Font */
@font-face {
  font-family: 'icons';
  src: url("../fonts/icons.eot");
  src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]::before {
  font-family: 'icons';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.icon-twitter::before, .icon-stumbleupon::before, .icon-pinterest::before, .icon-linkedin::before, .icon-google-plus::before, .icon-search::before, .icon-play::before, .icon-menu::before, .icon-arrow-left::before, .icon-arrow-right::before, .icon-bubble::before, .icon-facebook::before, .icon-feed::before, .icon-youtube::before, .icon-tag::before, .icon-tumblr::before, .icon-instagram, .icon-podcast, .icon-apple, .icon-android, .icon-arrow::after, .icon-envelope::before {
  font-family: 'icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.icon-twitter::before {
  content: "\74"; }

.icon-stumbleupon::before {
  content: "\75"; }

.icon-pinterest::before {
  content: "\70"; }

.icon-linkedin::before {
  content: "\69"; }

.icon-google-plus::before {
  content: "\67"; }

.icon-search::before {
  content: "\73"; }

.icon-play::before {
  content: "\61"; }

.icon-menu::before {
  content: "\21"; }

.icon-arrow-left::before {
  content: "\23"; }

.icon-arrow-right::before {
  content: "\24"; }

.icon-bubble::before {
  content: "\25"; }

.icon-facebook::before {
  content: "\66"; }

.icon-feed::before {
  content: "\27"; }

.icon-youtube::before {
  content: "\79"; }

.icon-tag::before {
  content: "\28"; }

.icon-tumblr::before {
  content: "\6d"; }

.icon-instagram::before {
  content: "\22"; }

.icon-podcast::before {
  content: "\26"; }

.icon-android::before {
  content: "\29"; }

.icon-apple::before {
  content: "\2a"; }

.icon-envelope::before {
  content: "\2b"; }

.icon-arrow::after {
  content: "\61";
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg); }

.icon-play::before {
  font-size: 0.7rem;
  padding-left: 0.2em; }

.icon-play-box {
  display: block;
  margin-left: 2em; }

.icon-play-box::before {
  padding: 0.25em;
  background: #808080;
  color: #fff;
  margin-left: -1.7rem;
  margin-right: 0.5em; }

/*------------------------------------*\
    $BUTTONS
\*------------------------------------*/
/* Generic Placeholder Brick: REMOVE FOR PRODUCTION */
.brick {
  background: #dcdddc;
  padding: 2em;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #eee; }

/* Block */
.block {
  overflow: hidden; }
  .block p:last-child {
    margin-bottom: 0; }

.headline {
  line-height: 1.2; }

/* Hero Block */
.block-hero {
  margin-bottom: 0.5em; }
  .block-hero .b-thumb img {
    display: block; }
  @media all and (min-width: 50em) {
    .block-hero {
      position: relative; }
      .block-hero .b-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 1.5em; } }

/* Block Thumbnail with Headline */
.block-thumb {
  display: table;
  width: 100%;
  border-collapse: collapse; }
  .block-thumb .b-inner {
    display: table-row;
    vertical-align: top;
    overflow: hidden; }
  @media all and (min-width: 29.75em) {
    .block-thumb .b-thumb {
      display: table-cell;
      vertical-align: top;
      width: 30%;
      max-width: 10em; }
      .block-thumb .b-thumb img {
        display: block;
        width: 100%;
        height: auto; } }
  @media all and (min-width: 29.75em) {
    .block-thumb .b-text {
      display: table-cell;
      width: 70%;
      padding: 0 1em; } }

/* Block Headline Summary */
.block-headline-summary a {
  display: block;
  padding: 0.5em; }

/* Block Inset */
.block-inset {
  position: relative; }
  .block-inset .b-thumb {
    position: relative;
    z-index: 0; }
    .block-inset .b-thumb img {
      display: block; }

/* Hero Block */
.block-inset {
  margin-bottom: 0.5em;
  position: relative; }
  .block-inset .headline {
    font-size: 1.1em; }
  .block-inset .b-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 0.5em; }

/* Block Thumb with Summary */
.block-thumb-summary .b-thumb {
  float: left;
  width: 50%; }

.block-thumb-summary .b-text {
  margin-left: 50%;
  padding: 0.5em; }

h5.card-title {
  margin: 16px 0;
  font-size: 20px; }

.card-text:last-child {
  margin-bottom: 16px; }

.card-img-top {
  width: 100%; }
  .card-img-top img {
    width: 100%; }

.border-none {
  border: none; }

/* ICON MENU */
.icon-top {
  text-align: center; }

.icon-top + h5.card-title {
  text-align: center; }

.icon-circle {
  border: 2px solid #333;
  border-radius: 50%;
  min-height: 2em;
  min-width: 2em;
  padding: 4px 5px; }

.icon-medium {
  font-size: 1.33333em;
  line-height: 1.4;
  text-align: center; }

.icon-large {
  font-size: 2em;
  line-height: 1.5;
  text-align: center; }

.icon-circle-background {
  background-color: #333;
  color: white; }

.inline-list li {
  display: inline-block; }

/* Social List */
.social-list li {
  margin: 0 0.4rem 1em 0; }

.social-list a {
  font-size: 1.6em; }

/* Headline List */
.headline-list {
  margin-bottom: 1em; }
  .headline-list.flush {
    margin: 0; }
  .headline-list h4 {
    font-weight: normal; }
  .headline-list li {
    padding: 0.25em 0;
    border-top: 1px solid #ddd; }

/* Post List */
.post-list li {
  margin-bottom: 1em; }

/* Bullet List */
.bullet-list {
  list-style: square;
  margin: 0 0 1em 1.2em;
  line-height: 1.3; }
  .bullet-list li {
    margin-bottom: 1em; }

/* Text List */
.text-list {
  margin: 0 0 1em;
  line-height: 1.3; }
  .text-list li {
    margin-bottom: 1em; }

.tooltip-container {
  display: inline-block;
  position: relative; }
  .tooltip-container:hover .tooltip {
    display: block; }

.tooltip-link {
  background: #f9f9f9; }

.tooltip {
  display: none;
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 18em;
  padding: 1em;
  background: #fff;
  border: 1px solid #808080;
  box-shadow: 0.3em 0.3em 1em 0 rgba(0, 0, 0, 0.2); }
  .tooltip h2 {
    margin-top: 0; }
  @media all and (min-width: 24em) {
    .tooltip {
      width: 22em; } }
  @media all and (min-width: 29.75em) {
    .tooltip {
      width: 27em; } }
  @media all and (min-width: 39.8em) {
    .tooltip {
      width: 30em; } }

.accordion {
  margin-bottom: 1em; }

.acc-handle {
  background: #131313;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  display: block;
  position: relative;
  padding: 0.5em;
  border-bottom: 1px solid #ddd; }
  .acc-handle::after {
    content: "+";
    float: right; }
  .acc-handle:hover {
    color: #fff;
    background: #333; }
  .acc-handle.active {
    background: #333; }
    .acc-handle.active::after {
      content: "-"; }

.tabs {
  overflow: hidden; }
  .tabs ul {
    display: table;
    width: 100%; }
  .tabs li {
    display: table-cell;
    text-align: center;
    border-right: 1px solid #ddd; }
    .tabs li:last-child {
      border-right: 0; }
  .tabs a {
    display: block;
    padding: 0.5em;
    background: #808080; }
    .tabs a:hover, .tabs a:focus {
      background: #ddd; }
    .tabs a.active {
      background: #333;
      color: #fff; }

.tab-content {
  padding-top: 15px; }

.section {
  margin: 0 0 1em; }

.section-title {
  margin-bottom: 0.5em; }

.comments li {
  margin-bottom: 1em; }

.comment-container {
  overflow: hidden;
  margin-bottom: 1em;
  list-style: none; }

.comment-meta {
  float: left;
  width: 6.5em; }
  .comment-meta img {
    display: block;
    border: 1px solid #eee;
    margin-bottom: 0.5em; }

.comment-name {
  font-size: 0.75em; }

.comment-text {
  margin-left: 9em; }

/*------------------------------------*\
    $MESSAGING
\*------------------------------------*/
/* HERO */
.hero {
  overflow: hidden;
  background-color: #161f50; }
  .hero img {
    width: 100%;
    object-fit: cover; }

.hero.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto; }

@media (min-width: 768px) {
  .hero.jumbotron-float .jumbotron-wrap {
    background-color: transparent;
    height: auto;
    position: absolute; }
  .hero.jumbotron-float .jumbotron {
    max-height: 100%; }
  .hero.jumbotron-float .jumbotron-bg {
    background: rgba(0, 0, 0, 0.65);
    padding: 2rem; } }

.hero.jumbotron-full-height .jumbotron-wrap .jumbotron {
  padding: 0 2rem 0 0; }

.hero.jumbotron-full-height .jumbotron-wrap .jumbotron.fullheight-right {
  padding: 0 0 0 2rem; }

@media (max-width: 768px) {
  .hero.jumbotron-full-height .jumbotron-wrap .jumbotron {
    padding: 0 2rem 0 2rem; } }

@media (min-width: 768px) {
  .hero.jumbotron-fixed .jumbotron.hero-img-overlay {
    bottom: 0;
    left: 0;
    text-align: left;
    width: 100%;
    position: absolute; }
  .hero.jumbotron-fixed .jumbotron-bg {
    background: rgba(0, 0, 0, 0.65);
    padding: 1rem; } }

@media (max-width: 768px) {
  .hero.jumbotron-fixed .jumbotron-bg {
    padding: 0 2rem 0 2rem; } }

.hero-sm.jumbotron-float img, .hero-sm.jumbotron-full-height img,
.hero-sm.jumbotron-fixed img {
  height: 250px; }

.hero-md.jumbotron-float img, .hero-md.jumbotron-full-height img,
.hero-md.jumbotron-fixed img {
  height: 432px; }

.hero-lg.jumbotron-float img, .hero-lg.jumbotron-full-height img,
.hero-lg.jumbotron-fixed img {
  height: 530px; }

.hero-xl.jumbotron-float img, .hero-xl.jumbotron-full-height img,
.hero-xl.jumbotron-fixed img {
  height: 665px; }

@media (max-width: 768px) {
  .hero-sm.jumbotron-float img,
  .hero-sm.jumbotron-full-height img,
  .hero-sm.jumbotron-fixed img, .hero-md.jumbotron-float img,
  .hero-md.jumbotron-full-height img,
  .hero-md.jumbotron-fixed img, .hero-lg.jumbotron-float img,
  .hero-lg.jumbotron-full-height img,
  .hero-lg.jumbotron-fixed img, .hero-xl.jumbotron-float img,
  .hero-xl.jumbotron-full-height img,
  .hero-xl.jumbotron-fixed img {
    height: auto; } }