.site-nav {
  /* add transition for top (keep right for mobile nav) */
  -webkit-transition: top 0.5s ease, right 0.3s ease;
  transition: top 0.5s ease, right 0.3s ease;
}
.header-image {
  display: none;
}
.site-main {
  margin-top: 0;
}



/* --- hero section --- */
#hero {
  margin-bottom: 4rem; /* height of 'next' pane */
  position: relative;
  height: calc(100vh - 4rem);
  background-size: cover;
  background-position: center center;
  background-image: url('../img/mmc-hero-image-seal.jpg');
}
/* gradient overlays */
#hero::before, #hero::after {
  content: '';
  display: block;
  height: 50%;
}
#hero::before {
  background: -webkit-linear-gradient( bottom, transparent, rgba(0, 0, 0, 0.625) );
  background: linear-gradient( to top, transparent, rgba(0, 0, 0, 0.625) );
}
#hero::after {
  background: -webkit-linear-gradient( top, transparent, rgba(0, 0, 0, 0.875) );
  background: linear-gradient( to bottom, transparent, rgba(0, 0, 0, 0.875) );
}
/* logo lockup */
#lockup a {
  position: absolute;
  bottom: 7.5rem;
  right: 50%;
  width: 840px;
  height: 116px;
  background-image: url('../img/mmc_icons.svg');
  background-position: -10px -10px;
  background-size: 860px 268px;
  -webkit-transform: translateX(50%) scale(0.25);
          transform: translateX(50%) scale(0.25);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}



/* --- next button --- */
#next {
  position: absolute;
  bottom: -4rem;
  display: block;
  width: 100%;
  height: 4rem;
  background: #efefef;
}
/* circle link */
#next a {
  position: relative;
  top: -50%;
  display: block;
  margin: auto;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
}
/* down arrow */
#next a::after {
  content: '';
  display: block;
  margin-top: -0.875rem;
  width: 64px;
  height: 64px;
  background-image: url('../img/mmc_icons.svg');
  background-position: -130px -136px;
  background-size: 860px 268px;
}



/* --- features slider --- */
#features {
  overflow: hidden;
  padding-bottom: 4rem;
  background: -webkit-linear-gradient( bottom, #3d9fc1, #efefef );
  background: linear-gradient( to top, #3d9fc1, #efefef );
}
/* modify features container to allow for features slider arrows */
#features .container {
  max-width: 58.5rem; /* 6 rem wider, offset with padding */
  padding: 0 3rem;
}


/* tab-group overrides */
.tab-group .display {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.tab-group .display .panel {
  overflow: hidden;
  padding: 0;
  background-color: white;
  /* flex display so .featured-figure fills height when .featured-item is long */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}


/* slider text styling to match .card padding */
.slider-text {
  padding: 1.25rem;
}


/* tab-group arrows */
.tab-group .arrows li {
  position: absolute;
  top: calc(50% - 52px); /* center with panel */
  list-style: none;
}
#features .tab-group .arrows [data-arrow="prev"] { left: -16px;  }
#features .tab-group .arrows [data-arrow="next"] { right: -16px; }
.tab-group .arrows a {
  display: block;
  width: 64px;
  height: 64px;
  background-image: url('../img/mmc_icons.svg');
  background-position: -130px -136px;
  background-size: 860px 268px;
  opacity: 0.5;
}
.tab-group .arrows a:hover { opacity: 1.0; }
.tab-group [data-arrow="prev"] a { -webkit-transform: rotate(90deg); transform: rotate(90deg);  }
.tab-group [data-arrow="next"] a { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }


/* featured figure */
.featured-figure {
  position: relative;
  /* hidden for mobile */
  display: none;
}
/* 1:1 aspect ratio */
.featured-figure::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.featured-figure img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}


/* featured text */
.featured-items .slider-text {
  border-top: 0.5rem solid #3d9fc1;
  margin-bottom: 0;
}
.featured-items .small-heading,
.featured-items .small-subheading {
  color: #3d9fc1;
}
.featured-date {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: #444;
}
/* reduce top margin immediately following featured-item-date */
.featured-date + * {
  margin-top: 0.5rem;
}



/* about section */
#about {
  overflow: hidden;
  padding: 2rem 1rem 0;
  text-align: center;
}
#about .content {
  margin-bottom: 0;
  max-width: 52.5rem;
}
/* adjust site-footer's margin top so the gap is the same as other pages */
.home .site-footer {
  margin-top: 1rem;
}

.card-columns .card {
  margin-bottom: 2rem;
}
.card-columns iframe {
  margin-top: 1rem !important;
}
.small-heading {
  font-size: 1.3125rem;
  color: #48b5b5;
}
.small-subheading {
  margin-top: 0.125rem;
  font-size: 1rem;
  font-style: italic;
  color: #48b5b5;
}

.newsletter .small-subheading {
  margin-top: 1rem;
}
.newsletter .newsletter-issues {
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}
.newsletter .newsletter-issues li {
  margin-top: 0.5rem;
}

.content .twitter-attribution {
  font-size: 0.875rem;
  color: #666;
}

.announcements { position: relative; }
.announcements .tab-group .arrows [data-arrow="prev"] { left: -64px;  }
.announcements .tab-group .arrows [data-arrow="next"] { right: -64px; }
.block-heading {
  padding: 0.5rem;
  font-weight: 900;
  font-size: 1.1875rem;
  text-transform: uppercase;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  color: white;
  background-color: #3d9fc1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.announcement-title {
  color: #3d9fc1;
}
.announcement-date {
  margin-top: 0.375rem;
  color: #444;
}
.announcement-text {
  text-align: left;
}



.home-outro {
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.home-outro .outro-box {
  margin-bottom: 2rem;
}
.home-outro .article-box-section .section-heading {
  font-size: 1.3125rem;
}
.home-outro .article-box-section p {
  line-height: 1.5;
}
.home-outro .article-box-section .section-heading + p {
  margin-top: 1rem;
}
.home-outro .article-box-text {
  /* match padding of .card */
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: none;
}



/* WP specific: if logged-in, push lockup down to accomidate admin bar (32px) */
.logged-in.scrolled #lockup a { top: 1.25rem; }



@media (min-width: 20em) {
  #lockup a {
    -webkit-transform: translateX(50%) scale(0.375);
            transform: translateX(50%) scale(0.375);
  }
}
@media (min-width: 30em) {
  #lockup a {
    -webkit-transform: translateX(50%) scale(0.500);
            transform: translateX(50%) scale(0.500);
  }
  #about {
    padding: 3rem 2rem 0;
  }
  .slider-text {
    padding: 1.5rem;
  }
  .small-heading {
    font-size: 1.5rem;
    line-height: 1.125;
  }
  .small-subheading {
    margin-top: 0.25rem;
    font-size: 1.125rem;
  }
  .home-outro .article-box-text {
    padding: 1rem 1.5rem 1.5rem;
  }
  .home-outro .article-box-section .section-heading {
    font-size: 1.5rem;
    line-height: 1.125;
  }
}
@media (min-width: 40em) {
  #lockup a {
    -webkit-transform: translateX(50%) scale(0.625);
            transform: translateX(50%) scale(0.625);
  }
  #about {
    padding: 4rem 3rem 0;
  }
  .slider-text {
    padding: 2rem;
  }
  .featured-items .featured-figure {
    display: block;
    float: left;
    width: 37.5%; /* 3/8 (aligns with top nav) */
  }
  .featured-items .slider-text {
    float: left;
    width: 62.5%; /* 5/8 */
  }

  .home-outro .article-box-text {
    padding: 1.25rem 2rem 2rem;
  }
}
@media (min-width: 50em) {
  /* when page is scrolled to a certain distance, body is given 'scrolled' class via JavaScript */
  .scrolled .site-header {
    background-color: rgba(0, 0, 0, 0.75);
  }
  .scrolled .site-nav {
    top: 5.375rem;
  }
  .scrolled .site-nav .primary:hover > a {
    background-color: rgba(0, 0, 0, 0.25);
  }
  .scrolled #lockup a {
    position: fixed;
    top: -0.75rem;
    -webkit-transform: translateX(50%) scale(0.5);
            transform: translateX(50%) scale(0.5);
    z-index: 11;
  }

  /* make site header transparent */
  .site-header {
    background-color: transparent;
  }
  /* hide site logo and use lockup logo instead */
  .site-logo {
    display: none;
  }
  /* position site nav at the top of page (when not scrolled) */
  .site-nav {
    top: 1rem;
  }
  .site-nav .primary:hover > a {
    background-color: rgba(0, 0, 0, 0.75);
  }

  #lockup a {
    -webkit-transform: translateX(50%) scale(0.750);
            transform: translateX(50%) scale(0.750);
  }

  .slider-text {
    padding: 2.5rem;
  }

  .card-columns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .card-column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 0;
    width: calc(50% - 1rem);
  }
  .card-columns .column-left {
    margin-right: 1rem;
  }
  .card-columns .column-right {
    margin-left: 1rem;
  }
  .card-columns .card {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }

  .home-outro .article-box-text {
    padding: 1.5rem 2.5rem 2.5rem;
  }
}
@media (min-width: 60em) {
  #lockup a {
    -webkit-transform: translateX(50%) scale(1.000);
            transform: translateX(50%) scale(1.000);
  }

  .home .site-footer {
    margin-top: 3rem;
  }
}