/******************************************************************************
* Global Styles ***************************************************************
******************************************************************************/
:root {
  --mb-dark-blue: #004A80;  /* main blue background */
  --mb-super-dark-blue: #003257;
  --mb-accent-blue: #00688E;
  --mb-light-blue: #7CCAFF;
  --mb-gray: #EBEBEB;
  --mb-light-gray: #F7F7F7;  /* secondary background */
  --mb-background: #FCFEFF;  /* main white background */
  --mb-body-font-color: #2B2B2B;
  --mb-subtle-font-color: #AAAAAA;

  --bs-font-sans-serif: 'Lato', sans-serif;

  --mb-title-font: 'Montserrat', sans-serif;

  --mb-font-size-page-title: 32px;

  --mb-font-size-small: 14px;
  --mb-font-size-body: 16px;
  --mb-font-size-tagline: 24px;
  --mb-font-size-footer-info: 14px;

  --mb-spacing-block-base: 4px;

  --mb-main-breakpoint: 992px;
}
@media (min-width: 992px) {
  :root {
    --mb-font-size-tagline: 48px;
    --mb-font-size-footer-info: 24px;
    --mb-spacing-block-base: 6px;
    --mb-font-size-page-title: 64px;
  }
}

html {
  background-color: var(--mb-dark-blue);
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--mb-background);
}


/******************************************************************************
 * Typography Styles **********************************************************
 ******************************************************************************/
.text-body {
  font-family: Lato, sans-serif;
  font-weight: 300; 
  font-size: var(--mb-font-size-body);
  color: var(--mb-body-font-color);
}
.text-title {
  font-family: Montserrat, sans-serif;
  font-size: calc(var(--mb-font-size-body) * 1.75);
  font-weight: 700;
  color: var(--mb-body-font-color);
}
.text-subtitle {
  font-family: Montserrat, sans-serif;
  font-size: var(--mb-font-size-body);
  font-weight: 700; 
  color: var(--mb-body-font-color);
}
.text-meta {
  font-family: Lato, sans-serif;
  font-size: var(--mb-font-size-small);
  color: var(--mb-subtle-font-color); 
  font-weight: 300; 
}
.text-link {
  color: var(--mb-accent-blue);
}
.text-link:hover,
.text-link:focus {
  color: var(--mb-super-dark-blue);
}


/******************************************************************************
 * Richtext Styles ************************************************************
 ******************************************************************************/
.rich-text {
  /* See: .text-body */
  font-family: Lato, sans-serif;
  font-weight: 300; 
  font-size: var(--mb-font-size-body);
  color: var(--mb-body-font-color);
}
.rich-text h3 {
  font-family: Montserrat, sans-serif;
  font-size: var(--mb-font-size-body);
  font-weight: 700;
  color: var(--mb-body-font-color);
  line-height: 1em;
  margin-top: 0;
  margin-bottom: 1em; 
}
.rich-text p {
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 1.5em; 
}
.rich-text p:last-child {
  margin-bottom: 0;
}
.rich-text .richtext-image {
  max-width: 100%;
  height: auto;
}
.rich-text .richtext-image.left {
  float: left !important;
  max-width: 60%;
  margin: 0 1.5em 1.5em 0;
}
.rich-text .richtext-image.right {
  float: right !important;
  max-width: 60%;
  margin: 0 0 1.5em 1.5em;
}
.rich-text .richtext-image.full-width {
  min-width: 100%;
  margin: 1.5em 0 1.5em 0;
}
.rich-text a {
  color: var(--mb-accent-blue);
}
.rich-text.rich-text-image:last-child {
  margin-bottom: 0;
}

.rich-text .responsive-object {
  position: relative;
}
.rich-text .responsive-object iframe,
.rich-text .responsive-object object,
.rich-text .responsive-object embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/******************************************************************************
 * Header Styles **************************************************************
 ******************************************************************************/
/* Header Container */
.header {
  background: url("/static/img/ui/header-spec-pattern-bg.154c745a9a87.png"), linear-gradient(176deg, rgb(0, 65, 112, 0.7) 0%, rgb(124, 202, 255, 0.7) 100%), url("/static/img/ui/header-bg.29172648a5f6.jpg") top center fixed;
  position: relative;
  background-size: auto, auto, cover;
  display: block;
  margin-top: calc(var(--mb-spacing-block-base) * -6);
  padding-top: calc(var(--mb-spacing-block-base) * 6);
}
.header-inner-container {
  display: flex;
  align-items: center;
  margin-top: calc(var(--mb-spacing-block-base) * 6);
  margin-bottom: calc(var(--mb-spacing-block-base) * 14);
}
/* Header Title & Logo */
.header-logo-link {
  text-decoration: none;
}
.header-logo {
  max-height: 86px;
  margin-right: calc(var(--mb-spacing-block-base) * 4);
}
@media (min-width: 992px) {
  .header-logo {
    max-height: 148px;
  }
}
.header-title {
  font-weight: bold;
  font-family: var(--mb-title-font);
  font-size: var(--mb-font-size-page-title);
  color: var(--mb-gray);
}

/* Mobile Hamburger Menu Nav */
.hamburger-menu {
  margin-left: auto; /* Float to the right edge */
  margin-top: -4px;
}
@media (min-width: 992px) {
  .hamburger-menu {
    display: none;
    visibility: hidden !important;
  }
}

/* Show relevant open & close icons depending on open state */
.hamburger-menu__button .fa-times {
  display: block;
  margin-right: 3px;
}
.hamburger-menu__button .fa-bars {
  display: none;
}
.hamburger-menu__button.collapsed .fa-times {
  display: none;
}
.hamburger-menu__button.collapsed .fa-bars {
  display: block;
}

.hamburger-menu__button {
  border: none;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: color 250ms ease-in-out, 
              transform 150ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: none;
  font-size: var(--mb-font-size-page-title);
  color: var(--mb-gray);
}

.hamburger-menu__button:hover,
.hamburger-menu__button:focus {
  color: var(--mb-light-blue);
}

.hamburger-menu__button:focus {
  outline: 1px solid #fff;
  outline-offset: -4px;
}

.hamburger-menu__button:active {
  transform: scale(0.99);
}

/* Mobile Nav */
@media (min-width: 992px) {
  #mobile-nav-container {
    display: none;
    visibility: hidden !important;
  }
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  padding: calc(var(--mb-spacing-block-base) * 2) 0;
  margin-bottom: calc(var(--mb-spacing-block-base) * 12);
}
.mobile-nav__item {
  font-size: var(--mb-font-size-tagline);
  font-weight: bold;
  color: var(--mb-gray);
  text-decoration: none;
  padding: calc(var(--mb-spacing-block-base) * 1) calc(var(--mb-spacing-block-base) * 2);
  margin-bottom: calc(var(--mb-spacing-block-base) * 1);
}
.mobile-nav__item:hover {
  color: var(--mb-gray);
  opacity: 0.85;
}
.mobile-nav__item .far,
.mobile-nav__item .fas {
  min-width: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.mobile-nav-submenu__item {
  font-size: var(--mb-font-size-tagline);
  font-weight: bold;
  color: var(--mb-gray);
  text-decoration: none;
  border-radius: calc(var(--mb-spacing-block-base) * 1);
  padding: calc(var(--mb-spacing-block-base) * 1) calc(var(--mb-spacing-block-base) * 2);
  margin-bottom: calc(var(--mb-spacing-block-base) * 1);
}
.mobile-nav-submenu__item:hover {
  color: var(--mb-super-dark-blue);
  background: var(--mb-gray);
}
.mobile-nav-submenu__item .far,
.mobile-nav-submenu__item .fas {
  margin-right: calc(var(--mb-spacing-block-base) * 1); 
}

.mobile-nav__item .uncollapsed-marker {
  display: none;
}
.mobile-nav__item.collapsed .collapsed-marker {
  display: none;
}
.mobile-nav__item.collapsed .uncollapsed-marker {
  display: inline-flex;
}
.mobile-nav__submenu {
  display: flex;
  flex-direction: column;
  background: var(--mb-super-dark-blue);
  border: 1px solid rgba(235,235,235,0.13);
  border-radius: calc(var(--mb-spacing-block-base) * 2);
  padding: calc(var(--mb-spacing-block-base) * 3.5);
  margin-bottom: calc(var(--mb-spacing-block-base) * 2);
}

/* Desktop Nav Styles */
#desktop-nav-container {
  flex: 1;
  display: none;
  visibility: hidden;
}
@media (min-width: 992px) {
  #desktop-nav-container {
    display: block;
    visibility: visible;
  }
}
.desktop-nav {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.desktop-nav-break {
  display: none;
  height: 1px;
  width: 100%;
}
@media (max-width: 1400px) {  /* Control nav overflow to be two mostly even rows */
  .desktop-nav-break {
    display: block;
  }
}
.desktop-nav__item {
  font-size: calc(var(--mb-spacing-block-base) * 4);
  font-weight: bold;
  color: var(--mb-gray);
  text-decoration: none;
  padding: calc(var(--mb-spacing-block-base) * 1) calc(var(--mb-spacing-block-base) * 2);
  margin-left: calc(var(--mb-spacing-block-base) * 2);
}
.desktop-nav__item--submenu-parent {
  padding: 0;
  margin-left: 0;
}
.desktop-nav__item:hover {
  color: var(--mb-gray);
  opacity: 0.85;
}
.desktop-nav__item .far,
.desktop-nav__item .fas {
  margin-right: calc(var(--mb-spacing-block-base) * 1); 
}
.desktop-nav__item--with-submenu {
  position: relative;
}
.desktop-nav__item--with-submenu:hover {
  opacity: 1;
}
.desktop-nav__item--with-submenu .desktop-nav__submenu-container {
  display: none;
  position: absolute;
  left: 0;
  z-index: 9999;
  padding-top: calc(var(--mb-spacing-block-base) * 2);
}
.desktop-nav__item--with-submenu:hover .desktop-nav__submenu-container {
  display: block;
}
.desktop-nav__submenu {
  display: flex;
  flex-direction: column;
  background: var(--mb-super-dark-blue);
  border: 1px solid rgba(235,235,235,0.13);
  border-radius: calc(var(--mb-spacing-block-base) * 1.3333);
  padding: calc(var(--mb-spacing-block-base) * 2.333);
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.21);
  min-width: 120%;
}
.desktop-nav-submenu__item {
  color: var(--mb-gray);
  text-decoration: none;
  border-radius: calc(var(--mb-spacing-block-base) * 1);
  padding: calc(var(--mb-spacing-block-base) * 1) calc(var(--mb-spacing-block-base) * 1.333);
  margin-bottom: calc(var(--mb-spacing-block-base) * 1);
}
.desktop-nav-submenu__item:hover {
  color: var(--mb-super-dark-blue);
  background: var(--mb-gray);
}

/* Header Slice */
.header-slice-container {
  width: 100%;
  height: calc(var(--mb-spacing-block-base) * 13);
  position: relative;
  display: block;
}
.header-slice-container svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(var(--mb-spacing-block-base) * 13);
}
.header-slice-container svg polygon {
  fill: var(--mb-background);
}


/******************************************************************************
* Instagram Styles ************************************************************
******************************************************************************/
.instagram-container {
  padding: calc(var(--mb-spacing-block-base) * 8);
  background: var(--mb-light-gray);
}
.instagram-thumbnail-click {
  display: block;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  padding-bottom: 100%;
  background-position: center center;
  background-size: cover;
  margin: 1px;
  overflow: hidden;
}
.instagram-follow-link-container {
  margin: calc(var(--mb-spacing-block-base) * 2) 0;
}
.instagram-follow-link {
  font-size: calc(var(--mb-font-size-body) * 1.2);
  padding: var(--mb-spacing-block-base);
}
.instagram-follow-link i.fa-instagram {
  position: relative;
  font-size: 160%;
  padding-right: 6px;
  top: 6px;
}


/******************************************************************************
* Footer Styles ***************************************************************
******************************************************************************/
/* Footer Slice */
.footer-slice-container {
  position: relative;
  display: block;
  height: calc(var(--mb-spacing-block-base) * 13);
  background: var(--mb-light-gray);
}
.footer-slice-container svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(var(--mb-spacing-block-base) * 13);
}
.footer-slice-container svg polygon {
  fill: var(--mb-dark-blue);
}

/* Footer Container */
.footer {
  background: var(--mb-dark-blue);
  margin-top: -1px;
  opacity: 0.999;
  padding-top: calc(var(--mb-spacing-block-base) * 6);
}

/* Tagline */
.footer-tagline {
  font-weight: bold;
  font-style: italic;
  font-size: var(--mb-font-size-tagline);

  color: var(--mb-light-blue);

  margin-bottom: calc(var(--mb-spacing-block-base) * 8);
}
.footer-tagline__quote {
  vertical-align: 65%;
  font-size: 60%;
  display: inline-block;
}
.footer-tagline__quote:first-child {
  margin-right: calc(var(--mb-spacing-block-base));
}
.footer-tagline__quote:last-child {
  margin-left: calc(var(--mb-spacing-block-base));
}

/* Icon & Info */
.footer-logo {
  max-height: calc(var(--mb-spacing-block-base) * 19);
  margin-bottom: calc(var(--mb-spacing-block-base) * 8);
}
.footer-info {
  color: var(--mb-gray);
  font-weight: bold;
  font-size: var(--mb-font-size-footer-info);
}
.footer-info__column {
  display: flex;
}
.footer-info__icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--mb-spacing-block-base) * 3);
}
.footer-info__icon {
  font-size: calc(var(--mb-spacing-block-base) * 6);
  min-width: calc(var(--mb-spacing-block-base) * 6); 
}
.footer-info__info-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.footer-info-link {
  text-decoration: none;
  color: var(--mb-gray);
}
.footer-info-link:hover,
.footer-info-link:focus {
  color: var(--mb-gray);
  opacity: 0.85;
  text-decoration: underline;
}

/* Copyright */
.footer-copyright {
  font-size: var(--mb-font-size-small);
  font-weight: bold;
 
  color: rgba(255, 255, 255, 0.40);
  margin: calc(var(--mb-spacing-block-base) * 8) 0;
}

/*
div[class="row"] {
    outline: 1px dotted rgba(0, 0, 0, 0.25);
}

div[class^="col-"] {
    background-color: rgba(255, 0, 0, 0.2);
    outline: 1px dotted rgba(0, 0, 0, 0.5);
}
*/


/******************************************************************************
* Main Content Styles *********************************************************
******************************************************************************/
/* Main Content Container */
.main-content-container {
  margin-top: calc(var(--mb-spacing-block-base) * -22);
  display: block;
  position: relative;
  /* TODO: Remove once we have "More News..." */
  margin-bottom: 50px;
}


/******************************************************************************
* News Page Styles ************************************************************
******************************************************************************/
/* News Card */
.news-card {
  background: white;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.20);
  border-radius: var(--mb-spacing-block-base);
  overflow: hidden;
  margin: calc(var(--mb-spacing-block-base) * 4) 0;
}
.news-card--no-news {
  padding: calc(var(--mb-spacing-block-base) * 4);
  color: var(--mb-subtle-font-color);
  min-height: calc(var(--mb-spacing-block-base) * 24);
}
.news-card-accent {
  background: var(--mb-dark-blue);
  display: block;
  height: var(--mb-spacing-block-base);
  width: 100%; 
}
.news-card-thumbnail-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.news-card-thumbnail-click {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card-thumbnail {
  /* In addition to `.img-fluid` styles */
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card-content {
  padding: calc(var(--mb-spacing-block-base) * 4);
}
.news-card-article-body {
  margin-top: 1.5em;
}
.news-card-meta {
  margin-bottom: calc(var(--mb-spacing-block-base) * 1.5);
  display: block;
}
.news-card-title {
  margin-bottom: calc(var(--mb-spacing-block-base) * 1.5);
  display: block;
}
.news-card-title a,
.news-card-summary a {
  color: inherit;
  text-decoration: none;
}
.news-card-title a:hover,
.news-card-summary a:hover {
  color: var(--mb-accent-blue);
  text-decoration: underline;
}
.news-card-summary:last-child {
  margin-bottom: 0;
}
.more-news {
  font-size: var(--mb-font-size-body);
  text-align: center;
}
.more-news a {
  padding: var(--mb-spacing-block-base);
}
.more-news a .more-news-previous-icon {
  margin-right: calc(var(--mb-spacing-block-base) * 0.5); 
}