body {
  margin: 0;
  padding: 0; }

.banners {
  background-color: black;
  overflow: hidden; }
  .banners * {
    margin: 0;
    padding: 0;
    font-size: auto;
    line-height: auto; }
  .banners .notice {
    font-family: 'univers', sans-serif;
    color: #002b53;
    width: 100%;
    position: relative;
    margin: 0 auto;
    background-color: #f78d1e;
    text-align: center; }
  .banners .notice-body {
    position: relative;
    z-index: 5;
    overflow: hidden; }
    .banners .notice-body a {
      color: inherit;
      display: inline-block;
      text-decoration: none;
      padding: 1rem 3rem 1rem 2rem; }
    .banners .notice-body .emphasis {
      font-weight: bold;
      color: inherit; }
  .banners .banner-wrap {
    height: auto;
    display: block; }
  .banners .banner {
    height: auto;
    max-width: 1100px;
    margin: 0 auto; }
  .banners .body {
    font-family: 'Abhaya Libre', serif;
    color: #a7dde4;
    font-size: 16px;
    text-align: center;
    position: relative;
    z-index: 2; }
  .banners .dark-blue-overlay {
    fill: #002b53;
    opacity: 0.85; }
  .banners .light-blue-overlay {
    fill: #a7dde4;
    opacity: 0.15; }
  .banners .emphasis {
    color: white; }
  .banners .quote {
    position: relative;
    z-index: 1;
    font-size: 2.125rem;
    line-height: 1.25em;
    margin: 0 0 2rem 0; }
  .banners .attribution {
    position: relative;
    z-index: 1; }
  .banners .name {
    font-size: 1.625rem;
    margin: 0 0 0 0; }
  .banners .credits {
    display: block;
    font-size: 1rem;
    margin: 0.125rem 0 0 0; }
  .banners .image {
    position: relative;
    z-index: 1; }
  .banners .image-frame {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .banners .title-card {
    max-width: 100% !important;
    display: block !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }
  @media screen and (min-width: 801px) {
    .banners .banner {
      min-height: 40rem;
      display: table; }
    .banners .body {
      padding: 2rem; }
    .banners .body-content {
      padding: 6rem 0; }
    .banners .body, .banners .image {
      display: table-cell;
      width: 50%;
      vertical-align: middle; }
    .banners .overlay {
      position: absolute;
      top: 0;
      right: -12rem;
      width: 1920px;
      height: 100%; }
    .banners .horizontal-overlay {
      height: 100%; }
    .banners .vertical-overlay {
      display: none; }
    .banners .image-frame {
      height: 200%;
      width: 120%; } }
  @media screen and (max-width: 800px) {
    .banners .banner {
      position: relative;
      padding-top: 28rem; }
    .banners .body {
      padding: 0rem 0 2rem; }
    .banners .overlay {
      position: absolute;
      width: 100%;
      height: 200%;
      top: 0;
      left: 0;
      z-index: 0; }
    .banners .vertical-overlay {
      width: 100%; }
    .banners .horizontal-overlay {
      display: none; }
    .banners .quote {
      padding: 40% 2rem 0; }
    .banners .attribution {
      padding: 0 2rem; }
    .banners .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .banners .image-frame {
      background-position: top center;
      background-size: 100% auto; } }
  @media screen and (min-width: 801px) and (max-width: 1000px) {
    .banners .image-frame {
      width: 150%;
      left: -20%; } }
  @media screen and (max-width: 600px) {
    .banners .banner {
      padding-top: 20rem; } }
  @media screen and (max-width: 450px) {
    .banners .banner {
      padding-top: 15rem; }
    .banners .quote {
      font-size: 1.75rem; }
    .banners .name {
      font-size: 1.25rem; }
    .banners .credits {
      font-size: 0.75rem; } }