/* ----------------------------------------------------------------
Copyright (c) OTTO SPORT.
No permission is granted for any purpose without prior
written consent from OTTO SPORT.
------------------------------------------------------------------- */


/* ================================================================
   PAGE STRUCTURE
================================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: #000;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ================================================================
   WRAPPER
================================================================ */

#design-wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
}

#design-wrapper .container {
  width: 100%;
  max-width: 1400px;
}


/* ================================================================
   HEADER
================================================================ */

#design-header-wrapper {
  position: relative;
  top: 0;
  margin: 0;
  width: 100%;
  height: 140px;
  background: url("../images/header-bg.png") repeat-x;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  z-index: 400;
}

.main-dept #design-header-wrapper {
  background-color: #14378f;
}

#design-header-inner {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1400px;
  height: 140px;
}


/* Logo */

#design-logo {
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 301;
  transition: all 0.3s ease-in-out;
}

#design-logo img {
  display: block;
  height: 140px;
  transition: all 0.3s ease-in-out;
}


/* Header social links */

#design-links {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 100%;
  text-align: right;
}

#design-links a {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 400;
  color: #c7c8c8;
  line-height: 30px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

#design-links a:hover,
#design-links a:focus {
  color: #fff;
  text-decoration: none;
}


/* Additional header logos */

#design-logos {
  position: absolute;
  top: 60px;
  right: 0;
  z-index: 3;
  transition: all 0.3s ease-in-out;
}

#design-logos img {
  height: 60px;
}


/* Main navigation wrapper */

#design-main-nav {
  position: absolute;
  top: 50px;
  right: 0;
  height: 50px;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}

#design-container-main-nav {
  width: 100%;
  max-width: 1200px;
  height: 50px;
  padding-left: 180px;
  box-sizing: border-box;
}


/* ================================================================
   MAIN PAGE SECTIONS
================================================================ */

#design-main {
  margin-top: -100px;
}

body.admin-mode #design-main {
  margin-top: 0;
}


/* Hero */

/* Hero wrapper */
#design-main-top {
    position: relative;
    min-height: 500px;
    overflow: hidden;
}

#design-main-top::before {
    content: "";
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 100;
    background: url("../images/pattern-top.png") no-repeat top center;
    background-size: 100% 80px;
    pointer-events: none;
}

#design-container-11 {
    position: relative;
}

/* CMS editor adjustment */
body.admin-mode #design-main-top::before {
    top: 56px;
}

/*
 * Keep the hero pattern above the rotator artwork while allowing
 * Demosphere's injected editing toolbar to render above the pattern.
 * Do not add a z-index back to #design-container-11: doing so creates
 * a stacking context that traps the toolbar below the pseudo-element.
 */
body.admin-mode #design-container-11 .dii-content-nav,
body.admin-mode #design-container-11 .dii-widget-header {
    position: relative;
    z-index: 101 !important;
}

/* Program section */

#design-main-middle {
  position: relative;
  padding: 90px 0 70px;
  background: #f5f5f5 url("../images/pattern-bg.png");
}


/* News section */

#design-main-news {
  position: relative;
  padding: 70px 0;
  background: #cac8ca;
}


/* Three-column news grid */

#design-main-news .container {
  position: relative;
  z-index: 4;
}

#design-main-news .design-news-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#design-main-news .design-news-grid > [class*="col-"] {
  display: flex;
  float: none;
}

#design-main-news .design-news-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 420px;
  padding: 20px;
  background: #fff;
}

#design-main-news .design-news-container > .dii-content {
  width: 100%;
}

/* Keep empty containers visible while editing in the CMS. */

body.admin-mode #design-main-news .design-news-container:empty {
  min-height: 420px;
  border: 1px dashed rgba(0, 0, 0, 0.25);
}


/* Lower content section */

#design-main-bottom {
  position: relative;
  padding: 90px 0 70px;
  background: #e7e7e7 url("../images/pattern-bg.png");
  text-align: center;
}


/* Decorative section edges */

#design-main-middle::before,
#design-main-bottom::before {
  content: "";
  position: absolute;
  /* Overlap the preceding section slightly to prevent a visible seam. */
  top: -10px;
  left: 0;
  width: 100%;
  height: 84px;
  z-index: 2;
  background: url("../images/pattern-top.png") no-repeat top center;
  background-size: 100% 84px;
  pointer-events: none;
}

#design-main-middle::after,
#design-main-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: url("../images/pattern-bottom.png") no-repeat bottom center / cover;
  pointer-events: none;
}


/* Partners */

#design-partners {
  position: relative;
  padding: 80px 0 30px;
  background: #fff;
  text-align: center;
}

#design-partners::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 80px;
  background: url("../images/pattern-bottom-2.png") no-repeat top center;
  background-size: 100% 80px;
  pointer-events: none;
}


/* Sitemap */

#design-sitemap {
  position: relative;
  background: #14378f;
}

#design-sitemap::before {
  content: "";
  position: absolute;
  top: -80px;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 80px;
  background: url("../images/pattern-top-3.png") no-repeat top center;
  background-size: 100% 80px;
  pointer-events: none;
}

#design-sitemap .container {
  position: relative;
  z-index: 1;
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: none;
}


/* Interior page layout */

.main-dept #design-main {
  margin-top: 0;
}

.main-dept #design-main-top {
  position: relative;
  padding: 90px 0 70px;
  background: #f5f5f5 url("../images/pattern-bg.png");
}

.main-dept #design-main-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: url("../images/pattern-top.png") no-repeat top center / cover;
  pointer-events: none;
}

.main-dept #design-main-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: url("../images/pattern-bottom.png") no-repeat bottom center / cover;
  pointer-events: none;
}

.main-dept #design-container-main {
  padding: 10px;
  background: #fff;
}


/* ================================================================
   SIX-CARD PROGRAM GRID
================================================================ */

/*
Three cards per row on desktop.
Two cards per row on tablets.
One card per row on phones.
*/

#design-main-middle .container {
  position: relative;
  z-index: 2;
}

#design-main-middle .design-program-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

#design-main-middle .design-program-grid > [class*="col-"] {
  display: flex;
  float: none;
  margin-bottom: 30px;
}

#design-main-middle .design-program-container {
  display: flex;
  width: 100%;
  min-height: 260px;
}

#design-main-middle .design-program-container > .dii-content {
  width: 100%;
}


/* Program image content item */

#design-main-middle
  .design-program-container
  .dii-content.dii-content-image {
  position: relative;
  display: block;
  width: 100%;
  min-height: 260px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #20479a;
  border: 0;
  box-shadow: none;
}


/*
The image link fills the complete program card.
*/

#design-main-middle
  .design-program-container
  .dii-content-image
  > a {
  position: relative;
  display: block;
  width: 100%;
  height: 260px;
  min-height: 260px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}


/* Program image */

#design-main-middle
  .design-program-container
  .dii-content-image
  img {
  display: block;
  width: 100%;
  height: 260px;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border: 0;
  transition:
    transform 0.4s ease-in-out,
    opacity 0.4s ease-in-out;
}


/*
Dark blue overlay improves title readability.
The pseudo-element is placed over the image but below the title.
*/

#design-main-middle
  .design-program-container
  .dii-content-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 25, 70, 0.08) 0%,
      rgba(8, 25, 70, 0.2) 50%,
      rgba(8, 25, 70, 0.32) 100%
    );
  pointer-events: none;
  transition: background 0.35s ease-in-out;
}


/* Program image title */

#design-main-middle
  .design-program-container
  .dii-content-image
  > h2 {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: none;
  font-family: "Anton", sans-serif;
  font-size: 46px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Linked program title */

#design-main-middle
  .design-program-container
  .dii-content-image
  > h2
  a {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-family: "Anton", sans-serif;
  font-size: inherit;
  font-weight: 400;
  color: #fff;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(0, 0, 0, 0.35);
}


/*
Some CMS image items place the title inside the image link.
These selectors support that markup as well.
*/

#design-main-middle
  .design-program-container
  .dii-content-image
  > a
  > h2,
#design-main-middle
  .design-program-container
  .dii-content-image
  > a
  .dii-content-title {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: none;
  font-family: "Anton", sans-serif;
  font-size: 46px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}


/* Remove default title spacing within program cards */

#design-main-middle
  .design-program-container
  .dii-content-image
  .dii-content-title {
  border-bottom: 0;
}


/* Program card hover */

#design-main-middle
  .design-program-container
  .dii-content-image:hover
  img {
  transform: scale(1.05);
}

#design-main-middle
  .design-program-container
  .dii-content-image:hover::after {
  background:
    linear-gradient(
      to bottom,
      rgba(8, 25, 70, 0.2) 0%,
      rgba(8, 25, 70, 0.34) 50%,
      rgba(8, 25, 70, 0.48) 100%
    );
}

#design-main-middle
  .design-program-container
  .dii-content-image:hover
  > h2,
#design-main-middle
  .design-program-container
  .dii-content-image:hover
  > h2
  a,
#design-main-middle
  .design-program-container
  .dii-content-image:hover
  > a
  > h2 {
  color: #fff;
  text-decoration: none;
}


/* Empty-container editor support */

body.admin-mode
  #design-main-middle
  .design-program-container:empty {
  min-height: 260px;
  border: 1px dashed rgba(0, 0, 0, 0.25);
}


/* ================================================================
   SOCIAL SECTION
================================================================ */

#design-social-header {
  margin-bottom: 10px;
  padding: 0 5px 0 0;
  width: 100%;
  border-bottom: 1px solid #0f2a8c;
  text-align: left;
}

#design-social-header::after {
  content: "";
  display: table;
  clear: both;
}

#design-social-header h2 {
  display: inline-block;
  margin: 0;
  font-family: "Anton", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #000;
  line-height: 40px;
  text-transform: uppercase;
}

#design-social-links {
  float: right;
  text-align: right;
}

#design-social-links span {
  font-family: "Anton", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 42px;
  text-transform: uppercase;
}

#design-social-links a {
  margin-left: 10px;
  color: #000;
  font-size: 20px;
  line-height: 40px;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

#design-social-links a:hover,
#design-social-links a:focus {
  color: #0f2a8c;
  text-decoration: none;
}


/* Sitemap social icons */

#design-social a {
  display: inline-block;
  margin-right: 4px;
  width: 40px;
  height: 40px;
  background: #cac8ca;
  font-size: 22px;
  font-weight: 400;
  color: #0f2a8c;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  transition:
    color 0.3s ease-in-out,
    background 0.3s ease-in-out;
}

#design-social a:hover,
#design-social a:focus {
  background: #fff;
  color: #0f2a8c;
  text-decoration: none;
}


/* ================================================================
   CONTENT CONTAINERS
================================================================ */

#design-container-main {
  margin: 0;
  padding: 0;
  width: 100%;
}

#design-container-1,
#design-container-2,
#design-container-9,
#design-container-10,
#design-container-15 {
  margin-bottom: 15px;
  padding: 8px;
  background: #fff;
}


/*
Container 16 is the updated partners container.
*/

#design-container-16 {
  width: 100%;
}


/* ================================================================
   FOOTER
================================================================ */

#design-footer {
  padding: 30px 0;
  width: 100%;
  min-height: 100px;
  background: #040e31;
}

#design-footer .container {
  padding-top: 15px;
}

#design-footer #design-footer-left {
  float: left;
}

#design-footer #design-footer-right {
  float: right;
}

#design-footer
  #design-footer-left
  .design-copyright,
#design-footer
  #design-footer-left
  .design-copyright
  a {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #a3a3a3;
  line-height: 1.5;
  text-decoration: none;
}

#design-footer
  #design-footer-left
  .design-copyright:first-of-type {
  margin-top: 5px;
  font-weight: 700;
}

#design-footer
  #design-footer-left
  .design-copyright
  a:hover,
#design-footer
  #design-footer-left
  .design-copyright
  a:focus {
  color: #fff;
  text-decoration: none;
}

#design-footer .dii-logo {
  height: 45px;
}


/* ================================================================
   GENERAL CONTENT
================================================================ */

body .dii-content {
  position: relative;
  overflow: visible;
  margin: 0;
  padding: 0;
  background: none;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body .dii-content a {
  color: #2a4c96;
}

body .dii-content a:hover,
body .dii-content a:focus {
  color: #1f386e;
}


/* ================================================================
   CONTENT TITLES
================================================================ */

body .dii-content-title {
  padding: 4px 0;
  border-bottom: none;
}

body .dii-content-title a {
  padding: 0;
  font-family: "Anton", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #2a4c96;
  line-height: 1.1;
  text-decoration: none;
}

body .dii-content-title a:hover,
body .dii-content-title a:focus {
  color: #000;
  text-decoration: none;
}

body .dii-content-calendar h2,
body .dii-content-rawcode h2 {
  margin-bottom: 6px;
  padding: 4px;
  font-family: "Anton", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #2a4c96;
  line-height: 1.1;
}


/* ================================================================
   SECTION HEADERS
================================================================ */

body .dii-content-header {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}

body .dii-content-header h2 {
  display: inline-block;
  margin: 0 0 5px;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #c7c8c8;
  font-family: "Anton", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #1c4d9c;
  line-height: 40px;
  text-align: left;
  text-transform: uppercase;
  box-sizing: border-box;
}

body #design-main-middle .dii-content-header h2,
body #design-main-news .dii-content-header h2 {
  position: relative;
  margin-bottom: 15px;
  height: auto;
  min-height: 50px;
  border: none;
  font-size: 50px;
  color: #8d8d8d;
  line-height: 1;
  text-align: center;
}

body #design-main-news .dii-content-header h2 {
  color: #fff;
}

body #design-main-middle .dii-content-header h2::after,
body #design-main-news .dii-content-header h2::after {
  content: "";
  position: absolute;
  left: calc(50% - 25px);
  bottom: -8px;
  width: 50px;
  height: 3px;
  background: #000;
}

body #design-main-news .dii-content-header h2::after {
  background: #cccccc;
}

body #design-partners .dii-content-header h2 {
  border: none;
  font-family: "Anton", sans-serif;
  font-size: 28px;
  color: #0f2a8c;
  text-align: center;
}

body #design-partners .dii-content-header h2::after {
  content: none;
  display: none;
}

body #design-sitemap .dii-content-header h2 {
  height: 35px;
  border: none;
  font-size: 26px;
  color: #0f2a8c;
}

body .dii-content:not(.dii-content-header) h2 {
  margin: 0;
}


/* ================================================================
   IMAGES
================================================================ */

#design-main-top .dii-content-title-photo img {
  max-height: none;
}

.design-main .dii-content .dii-content-title-photo {
  margin: 0 !important;
  padding: 0;
  border: none;
}

#design-main-top .dii-content .dii-content-title-photo,
#design-main-middle .dii-content .dii-content-title-photo,
#design-main-news .dii-content .dii-content-title-photo,
#design-main-bottom .dii-content .dii-content-title-photo,
#design-partners .dii-content .dii-content-title-photo,
#design-sitemap .dii-content .dii-content-title-photo {
  margin: 0;
  padding: 0;
  border: none;
}


/* Partner images */

#design-partners .dii-content.dii-content-image {
  display: inline-block;
  margin: 10px;
}

#design-partners .dii-content.dii-content-image img {
  width: auto;
  max-width: 350px;
  max-height: 130px;
}


/* ================================================================
   LINKS
================================================================ */

body .dii-content-linkview {
  margin: 0;
  padding: 0;
}

body .dii-content-linkview:hover {
  border: none;
}

body .dii-content-linkview > a {
  padding: 5px;
  font-size: 15px;
  font-weight: 400;
  color: #000;
  transition:
    color 0.3s ease-in-out,
    background 0.3s ease-in-out;
}

body .dii-content-linkview > a:hover,
body .dii-content-linkview > a:focus {
  color: #4d4d4d;
  text-decoration: none;
}

body .dii-content-linkview a.dii-content-linkview-link i {
  display: none;
}

body #design-main-middle .dii-content-linkview > a {
  margin-bottom: 3px;
  padding: 10px;
  color: #000;
  background: linear-gradient(
    to right,
    #e3e3e3 1%,
    #f5f5f5 100%
  );
}

body #design-main-middle .dii-content-linkview > a:hover,
body #design-main-middle .dii-content-linkview > a:focus {
  background: #144786;
  color: #fff;
  text-decoration: none;
}


/* ================================================================
   ARTICLES
================================================================ */

body .dii-content .dii-content-story {
  margin-top: 0;
  padding: 6px 4px;
  border-top: none;
  color: #000;
}

body .dii-content .dii-content-story,
body .dii-content .dii-content-story * {
  line-height: 1.5;
}

body .dii-content .dii-content-story a {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: #666;
}

body .dii-content .dii-content-story a:hover,
body .dii-content .dii-content-story a:focus {
  color: #4d4d4d;
  text-decoration: none;
}

body .dii-content-continue {
  margin: 0;
  text-align: left;
}

body .dii-content-continue a {
  padding: 0 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: #666;
  text-decoration: none;
}

body .dii-content-continue a:hover,
body .dii-content-continue a:focus {
  color: #4d4d4d;
}

body .dii-content-continue a::before {
  content: "read more ";
}

body .dii-content-continue a::after {
  content: "...";
}


/* Sitemap articles */

body #design-sitemap .dii-content-title,
body #design-sitemap .dii-content-title a {
  font-family: "Anton", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
}

body #design-sitemap .dii-content-title a:hover,
body #design-sitemap .dii-content-title a:focus {
  color: #fff;
}

body #design-sitemap .dii-content .dii-content-story {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #fff;
  border-top: 0;
}

body #design-sitemap .dii-content .dii-content-story * {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #fff;
}

body #design-sitemap .dii-content .dii-content-story a {
  color: #fff;
}

body #design-sitemap .dii-content .dii-content-story td {
  padding: 0 0 5px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #fff;
}

body #design-sitemap .dii-content .dii-content-story a:hover,
body #design-sitemap .dii-content .dii-content-story a:focus {
  color: #fff;
}


/* Events */

body .dii-content.dii-content-event {
  margin-top: 4px;
  padding: 8px;
}


/* ================================================================
   CALENDARS
================================================================ */

body #dii-full-calendar {
  margin: 6px 28px;
}

body .dii-calendar-wall table td {
  padding: 0;
}

body .dii-calendar-wall .fc-button {
  margin-bottom: 2px;
}

body .dii-calendar-wall .fc-header-title {
  padding: 2px 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #000;
}

body .dii-calendar-upcoming-events {
  font-size: 16px;
  color: #000;
}

body .dii-calendar-upcoming-events .dii-bold {
  font-weight: 400;
}

body .dii-calendar-upcoming-events .dii-center {
  text-align: left;
}

body .dii-calendar-upcoming-events li {
  margin: 0 5px;
  padding: 5px 8px;
  font-weight: 400;
}

body .dii-calendar-upcoming-events li h4 {
  padding: 2px 0 0;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
}

body .dii-calendar-upcoming-events li h3 a {
  padding: 2px 0 0;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  line-height: 1.2;
  text-decoration: none;
}

body .dii-calendar-upcoming-events li h3 a:hover,
body .dii-calendar-upcoming-events li h3 a:focus {
  background: none;
  color: #4d4d4d;
  font-weight: 400;
}


/* ================================================================
   RAW CODE
================================================================ */

body .dii-content.dii-content-rawcode > iframe {
  padding: 0;
}


/* ================================================================
   RESPONSIVE ROTATOR
================================================================ */

body .dii-content.dii-content-rotator {
  margin: 0;
  box-sizing: border-box;
}

body .dii-content.dii-content-rotator article {
  background-color: #000;
}

body .dii-content-rotator .list-none {
  min-height: 100px;
}

body .dii-content-rotator article .article-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 700px;
  padding: 40px 20px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(15, 42, 140, 0.92) 100%
  );
  box-sizing: border-box;
}

body .dii-content-rotator article .article-inner {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding: 50px 40px;
  background-color: transparent;
  text-align: center;
}

/* Hero heading hierarchy */
#design-main-top .dii-content-rotator article h1,
#design-main-top .dii-content-rotator article h1 a,
#design-main-top .dii-content-rotator article h2,
#design-main-top .dii-content-rotator article h2 a,
#design-main-top .dii-content-rotator article h3,
#design-main-top .dii-content-rotator article h3 a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#design-main-top .dii-content-rotator article h1,
#design-main-top .dii-content-rotator article h1 a {
  margin-bottom: 18px;
  font-size: 100px;
  line-height: 1;
  letter-spacing: 1px;
}

#design-main-top .dii-content-rotator article h2,
#design-main-top .dii-content-rotator article h2.no-url,
#design-main-top .dii-content-rotator article h2 a {
  margin-bottom: 14px !important;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: 0.5px;
}

#design-main-top .dii-content-rotator article h3,
#design-main-top .dii-content-rotator article h3 a {
  margin-bottom: 12px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.5px;
}

#design-main-top .dii-content-rotator article h1 a:hover,
#design-main-top .dii-content-rotator article h1 a:focus,
#design-main-top .dii-content-rotator article h2 a:hover,
#design-main-top .dii-content-rotator article h2 a:focus,
#design-main-top .dii-content-rotator article h3 a:hover,
#design-main-top .dii-content-rotator article h3 a:focus {
  background: none;
  color: #0f2a8c;
  text-decoration: none;
}

/* Hero article body */
#design-main-top .dii-content-rotator article .article-story,
#design-main-top .dii-content-rotator article .article-story p,
#design-main-top .dii-content-rotator article .dii-content-story,
#design-main-top .dii-content-rotator article .dii-content-story p {
  margin: 0 auto 18px;
  max-width: 760px;
  font-family: "Anton", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: 0.25px;
  text-align: center;
}

body .dii-content-rotator article .article-more {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 22px auto 0;
  padding: 12px 24px;
  min-width: 140px;
  max-width: none;
  height: 40px;
  background: #cac8ca;
  border: none;
  border-radius: 0;
  font-family: "Anton", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #14378f;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition:
    color 0.3s ease-in-out,
    background 0.3s ease-in-out;
}

body .dii-content-rotator article .article-more:hover,
body .dii-content-rotator article .article-more:focus {
  background: #FFF;
  color: #14378f;
  text-decoration: none;
}

body .dii-content-rotator article .article-more::before {
  content: "LEARN MORE";
}

body .dii-content-rotator article .article-more::after {
  content: "";
}

body .dii-content-rotator .dii-rotator-nav i {
  color: rgba(255, 255, 255, 0.5);
}

body .dii-content-rotator .dii-rotator-nav i.rotator-active {
  color: #cccccc;
}

body
  .dii-content-rotator
  .dii-rotator-nav
  i:hover:not(.fa-circle) {
  color: #fff;
}

body
  .dii-content-rotator
  .rotator-group
  .group-nav:hover {
  background: none;
  text-decoration: none;
}

body
  .dii-content-rotator
  .rotator-group
  .group-item
  span {
  opacity: 1;
  background: rgba(255, 255, 255, 0.7);
  font-family: "Anton", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 1;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body
  .dii-content-rotator
  .rotator-group
  .group-item
  span:hover {
  background: rgba(255, 255, 255, 1);
  color: #333;
}


/* ================================================================
   DESKTOP NAVIGATION
================================================================ */

#design-container-main-nav
  .dii-content-nav-menu
  > ul
  > li
  > a.dii-sub-menu-link {
  display: block;
  height: 50px;
  margin: 0;
  padding: 0 15px;
  background: none;
  border: none;
  font-family: "Anton", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  line-height: 50px;
  letter-spacing: 0;
  text-transform: uppercase;
  transition:
    color 0.2s ease-in-out,
    background 0.2s ease-in-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

#design-container-main-nav
  .dii-content-nav-menu
  > ul
  > li:hover
  > a.dii-sub-menu-link {
  background: #06164e;
  cursor: pointer;
}

#design-container-main-nav
  .dii-content-nav-menu.theme-none
  ul
  li:hover {
  background: none;
}

#design-container-main-nav
  .dii-content-nav-menu
  > ul
  ul {
  padding: 0;
  background-color: #06164e;
}

#design-container-main-nav
  .dii-content-nav-menu
  ul
  ul
  li
  a {
  padding: 10px;
  color: #fff;
}

#design-container-main-nav
  .dii-content-nav-menu
  > ul
  > li:hover
  > ul {
  top: 50px;
}

#design-container-main-nav
  .dii-content-nav-menu
  > ul
  ul
  li
  > a {
  font-family: "Anton", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: left;
}

#design-container-main-nav
  .dii-content-nav-menu
  > ul
  ul
  li:hover
  > a {
  background: #c7c8c8;
  color: #06164e;
  transition: all 0.3s ease-in-out;
}

#design-container-main-nav
  .dii-content-nav-menu
  > ul
  ul
  li:hover::before {
  width: 100%;
}

#design-container-main-nav
  .dii-content-nav-menu.horizontal
  li.dii-menu-item-sub-menu
  > a.dii-sub-menu-icon::before {
  content: "\f0da";
  color: rgba(255, 255, 255, 0.4);
}


/* ================================================================
   LARGE DESKTOP
================================================================ */

@media screen and (min-width: 1025px) {

  #design-header-wrapper.design-fixed {
    position: fixed;
    top: 0;
    height: 110px;
    background-color: #000;
  }

  body.admin-mode #design-header-wrapper.design-fixed {
    top: 70px;
  }

  #design-header-wrapper.design-fixed #design-logo img {
    height: 110px;
  }

  #design-header-wrapper.design-fixed #design-links {
    top: 10px;
    right: 10px;
    width: 100%;
    text-align: right;
  }

  #design-header-wrapper.design-fixed #design-logos {
    top: 45px;
  }

  #design-header-wrapper.design-fixed #design-logos img {
    height: 50px;
  }

  #design-header-wrapper.design-fixed #design-main-nav {
    top: 45px;
  }

  #design-header-wrapper.design-fixed
    #design-container-main-nav {
    padding-left: 140px;
  }

  #design-main.design-fixed {
    margin-top: 0;
  }

  body #design-main-middle .dii-content-header h2,
  body #design-main-news .dii-content-header h2 {
    min-height: 65px;
    font-size: 65px;
  }

}


/* ================================================================
   TABLET AND SMALL DESKTOP
================================================================ */

@media screen and (max-width: 1024px) {

  #design-header-wrapper,
  #design-header-inner,
  #design-logo img {
    height: 130px;
  }

  #design-logos {
    top: 50px;
  }

  #design-logos img {
    height: 55px;
  }

  #design-main-nav {
    top: 45px;
  }

  #design-container-main-nav {
    padding-left: 160px;
  }

  #design-container-main-nav
    .dii-content-nav-menu
    > ul
    > li
    > a.dii-sub-menu-link {
    font-size: 22px;
  }

  #design-main-middle,
  #design-main-bottom {
    padding-left: 15px;
    padding-right: 15px;
  }

  #design-main-middle .design-program-container,
  #design-main-middle
    .design-program-container
    .dii-content.dii-content-image {
    min-height: 230px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > a {
    height: 230px;
    min-height: 230px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    img {
    height: 230px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > h2,
  #design-main-middle
    .design-program-container
    .dii-content-image
    > a
    > h2,
  #design-main-middle
    .design-program-container
    .dii-content-image
    > a
    .dii-content-title {
    font-size: 38px;
  }

}


/* ================================================================
   CMS UI ADJUSTMENTS
================================================================ */

@media screen and (max-width: 1000px) {

  .ui-widget-header {
    color: #fff;
  }

}


/* ================================================================
   MOBILE NAVIGATION
================================================================ */

@media screen and (max-width: 900px) {

  #design-header-wrapper {
    background-color: #000;
  }

  #design-header-wrapper,
  #design-header-inner,
  #design-logo img {
    height: 120px;
  }

  #design-logos {
    top: 5px;
    right: 130px;
  }

  #design-logos img {
    height: 50px;
  }

  #design-main-nav {
    top: 70px;
    width: 280px;
    max-width: 85vw;
  }

  #design-main-nav #design-container-main-nav {
    padding: 0;
  }

  #design-main-nav
    #design-container-main-nav
    #ww-btn-main-nav {
    padding: 0 10px;
    height: 50px;
    background: none;
    border: 0;
    font-family: "Anton", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    line-height: 50px;
    text-align: right;
    text-transform: uppercase;
    box-sizing: border-box;
  }

  #design-main-nav
    #design-container-main-nav
    #ww-btn-main-nav
    i {
    margin: 0 10px 0 0;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: right;
  }

  #design-main-nav
    #design-container-main-nav
    #ww-btn-main-nav
    i.caret {
    display: none;
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    > ul {
    padding: 10px 20px;
    width: 100%;
    background: #14378f;
    box-sizing: border-box;
    z-index: 201;
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    > ul
    > li
    > a.dii-sub-menu-link {
    padding: 5px 10px;
    height: auto;
    background-image: none;
    font-size: 20px;
    color: #fff;
    line-height: 1.5;
    text-align: left;
    text-shadow: none;
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    > ul
    > li
    > a.dii-sub-menu-link::after {
    content: "";
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    > ul
    > li:hover
    > a.dii-sub-menu-link {
    background: #c7c8c8;
    border-radius: 0;
    color: #1c4d9c;
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    > ul
    > li:hover
    > ul {
    top: 40px;
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    ul
    li.dii-menu-item-sub-menu
    > ul {
    background: #14378f;
    color: #fff;
    text-shadow: none;
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu.horizontal
    li.dii-menu-item-sub-menu
    > a.dii-sub-menu-icon::before {
    right: 15px !important;
    line-height: 30px !important;
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    ul
    li
    ul.show,
  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu:not(.dii-is-mobile)
    ul
    li:hover
    > ul {
    left: 0;
    width: 100%;
    background: #14378f;
  }

  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    li
    > a:hover,
  #design-main-nav
    #design-container-main-nav
    .dii-content-nav-menu
    li
    > a:focus {
    background: #c7c8c8;
    color: #14378f;
  }

}


/* ================================================================
   PHONE / SINGLE-COLUMN PROGRAM GRID
================================================================ */

@media screen and (max-width: 767px) {

  #design-main-middle .design-program-grid {
    display: block;
  }

  #design-main-middle
    .design-program-grid
    > [class*="col-"] {
    display: block;
    width: 100%;
    margin-bottom: 20px;
  }

  #design-main-middle .design-program-container,
  #design-main-middle
    .design-program-container
    .dii-content.dii-content-image {
    min-height: 240px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > a {
    height: 240px;
    min-height: 240px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    img {
    height: 240px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > h2,
  #design-main-middle
    .design-program-container
    .dii-content-image
    > a
    > h2,
  #design-main-middle
    .design-program-container
    .dii-content-image
    > a
    .dii-content-title {
    left: 15px;
    right: 15px;
    font-size: 38px;
  }

  #design-social-header h2 {
    display: block;
    text-align: center;
  }

  #design-social-links {
    float: none;
    padding-bottom: 10px;
    text-align: center;
  }

  body .dii-content-rotator article .article-wrapper {
    min-height: 560px;
  }

  body .dii-content-rotator article .article-inner {
    width: 100%;
    padding: 35px 20px;
  }

  #design-main-top .dii-content-rotator article h1,
  #design-main-top .dii-content-rotator article h1 a {
    font-size: 56px;
  }

  #design-main-top .dii-content-rotator article h2,
  #design-main-top .dii-content-rotator article h2.no-url,
  #design-main-top .dii-content-rotator article h2 a {
    font-size: 40px;
  }

  #design-main-top .dii-content-rotator article h3,
  #design-main-top .dii-content-rotator article h3 a {
    font-size: 26px;
  }

  #design-main-top .dii-content-rotator article .article-story,
  #design-main-top .dii-content-rotator article .article-story p,
  #design-main-top .dii-content-rotator article .dii-content-story,
  #design-main-top .dii-content-rotator article .dii-content-story p {
    font-size: 19px;
  }

}


/* ================================================================
   SMALL PHONE
================================================================ */

@media screen and (max-width: 667px) {

  #design-header-wrapper,
  #design-header-inner,
  #design-logo img {
    height: 100px;
  }

  #design-main-nav {
    top: 50px;
  }

  #design-footer {
    margin: 0;
    width: 100%;
  }

  #design-footer #design-footer-left {
    display: block;
    float: none;
    margin: 0;
    width: 100%;
    text-align: center;
  }

  #design-footer #design-footer-right {
    display: block;
    float: none;
    margin: 10px 0 0;
    width: 100%;
    text-align: center;
  }

}


/* ================================================================
   EXTRA-SMALL PHONE
================================================================ */

@media screen and (max-width: 480px) {

  #design-links {
    top: 12px;
  }

  #design-logos img {
    height: 45px;
  }

  #design-main-middle {
    padding-top: 80px;
    padding-right: 10px;
    padding-bottom: 65px;
    padding-left: 10px;
  }

  #design-main-middle .design-program-container,
  #design-main-middle
    .design-program-container
    .dii-content.dii-content-image {
    min-height: 210px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > a {
    height: 210px;
    min-height: 210px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    img {
    height: 210px;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > h2,
  #design-main-middle
    .design-program-container
    .dii-content-image
    > a
    > h2,
  #design-main-middle
    .design-program-container
    .dii-content-image
    > a
    .dii-content-title {
    font-size: 32px;
  }

  body .dii-content-rotator article .article-wrapper {
    min-height: 460px;
    padding: 25px 15px;
  }

  body .dii-content-rotator article .article-inner {
    padding: 25px 10px;
  }

  #design-main-top .dii-content-rotator article h1,
  #design-main-top .dii-content-rotator article h1 a {
    font-size: 44px;
  }

  #design-main-top .dii-content-rotator article h2,
  #design-main-top .dii-content-rotator article h2.no-url,
  #design-main-top .dii-content-rotator article h2 a {
    font-size: 34px;
  }

  #design-main-top .dii-content-rotator article h3,
  #design-main-top .dii-content-rotator article h3 a {
    font-size: 23px;
  }

  #design-main-top .dii-content-rotator article .article-story,
  #design-main-top .dii-content-rotator article .article-story p,
  #design-main-top .dii-content-rotator article .dii-content-story,
  #design-main-top .dii-content-rotator article .dii-content-story p {
    font-size: 17px;
  }

  body .dii-content-rotator article .article-more {
    min-width: 125px;
    height: 46px;
    padding: 10px 18px;
    font-size: 16px;
  }

}

/* ================================================================
   FINAL PROGRAM CARD CORRECTIONS
   Keeps one image per card and positions the CMS image title over it.
================================================================ */

#design-main-middle .container {
  position: relative;
  z-index: 2;
}

#design-main-middle .design-program-grid {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

#design-main-middle .design-program-grid > [class*="col-"] {
  display: flex;
  float: none;
  margin-bottom: 30px;
}

#design-main-middle .design-program-container {
  display: block;
  width: 100%;
  min-height: 0 !important;
}

#design-main-middle .design-program-container > .dii-content {
  width: 100%;
}

/* Outer CMS image item */
#design-main-middle
  .design-program-container
  .dii-content.dii-content-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #20479a !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
Remove the duplicate image applied to the title by legacy JavaScript
or retained inline styling. The H2 is text-only.
*/
#design-main-middle
  .design-program-container
  .dii-content-image
  > h2 {
  position: absolute !important;
  top: 50% !important;
  right: 20px !important;
  bottom: auto !important;
  left: 20px !important;
  z-index: 5 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-position: initial !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  border: 0 !important;
  font-family: "Anton", sans-serif !important;
  font-size: 46px !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.4) !important;
  pointer-events: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#design-main-middle
  .design-program-container
  .dii-content-image
  > h2
  a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  font-family: "Anton", sans-serif !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: inherit !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.4) !important;
}

/* CMS image wrapper */
#design-main-middle
  .design-program-container
  .dii-content-image
  .dii-content-title-photo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
}

#design-main-middle
  .design-program-container
  .dii-content-image
  .dii-content-title-photo
  > a {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* The only visible image layer */
#design-main-middle
  .design-program-container
  .dii-content-image
  .dii-content-title-photo
  img {
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  transform: none;
  transition: transform 0.4s ease-in-out;
}

/* Readability overlay */
#design-main-middle
  .design-program-container
  .dii-content-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(8, 25, 70, 0.08) 0%,
    rgba(8, 25, 70, 0.2) 50%,
    rgba(8, 25, 70, 0.32) 100%
  );
  pointer-events: none;
  transition: background 0.35s ease-in-out;
}

#design-main-middle
  .design-program-container
  .dii-content-image:hover
  .dii-content-title-photo
  img {
  transform: scale(1.05);
}

#design-main-middle
  .design-program-container
  .dii-content-image:hover::after {
  background: linear-gradient(
    to bottom,
    rgba(8, 25, 70, 0.2) 0%,
    rgba(8, 25, 70, 0.34) 50%,
    rgba(8, 25, 70, 0.48) 100%
  );
}

body.admin-mode
  #design-main-middle
  .design-program-container:empty {
  min-height: 260px !important;
  border: 1px dashed rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1024px) {
  #design-main-middle
    .design-program-container
    .dii-content.dii-content-image,
  #design-main-middle
    .design-program-container
    .dii-content-image
    .dii-content-title-photo,
  #design-main-middle
    .design-program-container
    .dii-content-image
    .dii-content-title-photo
    img {
    height: 230px !important;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > h2 {
    font-size: 38px !important;
  }
}


/* ================================================================
   THREE-COLUMN NEWS CARDS — FINAL OVERRIDES
   Kept at the end of the stylesheet so the card presentation wins
   over the theme's general section-header and desktop rules.
================================================================ */

body #design-main-news
  .design-news-container
  .dii-content-header {
  position: absolute;
  top: -36px;
  left: 0;
  z-index: 2;
  margin: 0;
  width: 100%;
  height: 36px;
  padding: 0;
  background: transparent;
}

body #design-main-news
  .design-news-container
  .dii-content-header h2 {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid #20479a;
  font-family: "Anton", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #20479a;
  line-height: 34px;
  text-align: left;
  text-transform: uppercase;
}

body #design-main-news
  .design-news-container
  .dii-content-header h2::after {
  display: none;
  content: none;
}

@media screen and (max-width: 767px) {

  #design-main-news {
    padding: 70px 15px 45px;
  }

  #design-main-news .design-news-grid {
    display: block;
  }

  #design-main-news
    .design-news-grid
    > [class*="col-"] {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: 60px;
  }

  #design-main-news
    .design-news-grid
    > [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  #design-main-news .design-news-container,
  body.admin-mode #design-main-news .design-news-container:empty {
    min-height: 320px;
  }
}

@media screen and (max-width: 767px) {
  #design-main-middle .design-program-grid {
    display: block;
  }

  #design-main-middle
    .design-program-grid
    > [class*="col-"] {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }

  #design-main-middle
    .design-program-container
    .dii-content.dii-content-image,
  #design-main-middle
    .design-program-container
    .dii-content-image
    .dii-content-title-photo,
  #design-main-middle
    .design-program-container
    .dii-content-image
    .dii-content-title-photo
    img {
    height: 240px !important;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > h2 {
    right: 15px !important;
    left: 15px !important;
    font-size: 38px !important;
  }
}

@media screen and (max-width: 480px) {
  #design-main-middle
    .design-program-container
    .dii-content.dii-content-image,
  #design-main-middle
    .design-program-container
    .dii-content-image
    .dii-content-title-photo,
  #design-main-middle
    .design-program-container
    .dii-content-image
    .dii-content-title-photo
    img {
    height: 210px !important;
  }

  #design-main-middle
    .design-program-container
    .dii-content-image
    > h2 {
    font-size: 32px !important;
  }
}


/* ================================================================
   MOBILE ROTATOR POSITION
   Offset only the rotator content. The pattern-top.png pseudo-element
   remains anchored to #design-main-top in its original position.
================================================================ */

@media screen and (max-width: 767px) {
  #design-container-11 {
    padding-top: 180px;
  }

  #design-main-top .dii-content-rotator article {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  #design-sitemap .row {
    margin-right: 0;
    margin-left: 0;
  }

  #design-sitemap .row > [class*="col-"] {
    padding-right: 15px !important;
    padding-left: 30px !important;
  }
}

/* ================================================================
   PUBLIC PROGRAM CARD LINK FIX
   Preserve OTTO editing behavior while fixing public card links.
================================================================ */

body:not(.admin-mode)
  #design-main-middle
  .design-program-container
  .dii-content-image
  > a.dii-disable-link {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
}

body:not(.admin-mode)
  #design-main-middle
  .design-program-container
  .dii-content-image
  > a[href] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}