/*------------------------------------------------------------
Page
------------------------------------------------------------*/

 /* Sub Navigation
 ------------------------------------------------------------*/
.sub-nav > .menu {
  width: 100%;
  background: var(--color-haze);
  padding: 0 3.2rem;
  top: 0;
  white-space: nowrap;
  overflow-x: scroll;
  z-index: 1;
  position: relative;
}

.sub-nav > .menu::-webkit-scrollbar {
  display: none;
  visibility: hidden;
  width: 0;
}

.sub-nav > .menu > li {
  display: inline-block;
  margin: 0;
}

.menu-item > a {
  color: var(--color-charcoal);
  padding: 2.4rem 0;
  margin-right: 4rem;
  display: inline-block;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.menu-item > a:hover  { color: var(--color-earth); }
.menu-item.current-menu-item > a { color: var(--color-charcoal); }

.menu-item.current-menu-item > a:after {
  content: '';
  border-bottom: solid 4px var(--color-sand);
  display: block;
  bottom: calc(50% - 7px);
  position: absolute;
  left: -5%;
  width: 110%;
  z-index: -1;
}
/*
@media (max-width: 900px) {
  .sub-nav {
    position: sticky;
    top: 73px;
    z-index: 200;
  } */
}

 /* Page Container
 ------------------------------------------------------------*/

.page-type-default {
  background: url(../../images/page-bg-footer.svg) left bottom repeat-x;
  padding-bottom: 6rem;
}

.page-wrap {
  background: url(../../images/page-bg.svg) left top repeat-x;
  background-size: 450px 450px;
  overflow: hidden;
}

.page-wrap > .container {
  display: flex;
}


.hero {
  display: flex;
  width: 100%;
  max-width: 180rem;
  margin: 6rem auto;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
  position: relative;
}

.hero > .image-left {
  width: 20%;
  height: auto;
  left: 0;
  position: absolute;
}

.hero > .image-center {
  width: 56%;
  height: auto;
  z-index: 1;
}

.hero > .image-right {
  width: 20%;
  height: auto;
  right: 0;
  position: absolute;
}

 /* Page Title
 ------------------------------------------------------------*/
.page-title-wrap {
  padding: 0 2rem;
  display: flex;
  justify-content: center;
}

.page-title {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.page-title:after {
  content: '';
  border-bottom: solid 4px var(--color-ruby);
  display: block;
  margin-top: 2.8rem;
  position: relative;
  width: 0%;
  animation: line .8s ease-out forwards;
}

@keyframes line {
  from {
    left:0%;
    width:0%;
  }
  to {
    left:0%;
    width:40%;
  }
}

 /* Video
 ------------------------------------------------------------*/
 .video-wrap {
  padding: 56.25% 0 0 0;
  position: relative;
 }

 .video-wrap > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }

 /* Page Paragraph
 ------------------------------------------------------------*/
.page-type-default p {
  font-size: 2rem;
  line-height: 3.2rem;
 }

 .drop-cap > p:first-of-type:first-letter {
  color: var(--color-ruby);
  font-size: 6rem;
  line-height: 1;
  padding-right: .4rem;
  margin-top: -.4rem;
  float:left;
  font-family: var(--font-serif);
}

 /* Related Pages
 ------------------------------------------------------------*/
.related-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  grid-column-gap: 3%;
  grid-row-gap: 2rem;
  position: relative;
  max-width: 136rem;
  margin: 8rem auto;
  padding: 0 2rem;
  z-index: 1;
}

.related-page {
  overflow: hidden;
  position: relative;
  background: var(--color-ruby-dark);
}

.related-page:before {
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  border: solid 1px #fff;
  z-index: 3;
  border-radius: 2px;
}

.related-page:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
  z-index: 2;
}

.related-page-title {
  position: absolute;
  bottom: 14%;
  width: 100%;
  z-index: 3;
  text-align: center;
  color: #fff;
  font-size: 2rem;
  line-height: 2.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-serif);
  padding: 0 10%;
}

 .related-page-tn {
  width: 100%;
  height: 100%;
  transition: .5s all ease !important;
  object-fit: cover;
  object-position: 50% 25%;
 }

 .related-page:hover .related-page-tn {
   transform: scale(1.03);
   opacity: 0.7;
 }

  /* Small Viewport
 ------------------------------------------------------------*/
 @media only screen and (max-width: 900px) {

  .related-page-title { font-size: 1.6rem; }

 }


 /* Small Viewport
 ------------------------------------------------------------*/
 @media only screen and (max-width: 719px) {

  .hero {
    flex-wrap: wrap;
  }

  .hero > .image-left {
    width: 40%;
    position: static;
    margin-right: 5%;
  }

  .hero > .image-center {
    width: 85%;
    order: -1;
    margin-bottom: 5%;
  }

  .hero > .image-right {
    width: 40%;
    position: static;
  }

  .related-pages {
    display: grid;
    grid-template-columns: 88%;
    justify-content: space-evenly;
  }

  .related-page       { height: 28rem; }
  .related-page-title { font-size: 2.2rem; }

 }