/*
* This stylesheet was created in an effort to contain all CSS optimizations to the NAE site in one place without disrupting the original stylesheet. Ideally, this sheet would go away at some point when one discovers how to leverage the original SCSS stylesheets and partials to make future optimizations.

This is embedded via the html-header.twig file

Created by Michael Lopetrone
*
*/

.card__bg-img {
  background-repeat: no-repeat;
  background-color: white;
  background-size: contain;
}

.article__body > .is-data-caption {
  font-size: 0.8rem;
  margin-top: -2rem;
  color: #9c9da1;
}
.article__body
  .wp-block-wpdatatables-wpdatatables-gutenberg-block
  + .is-data-caption {
  margin-top: -1rem;
}
.article__body > p.is-data-source + .is-data-caption {
  margin-top: -1rem;
}
.article__body > .is-data-caption:last-child::after {
  font-size: 0.8rem;
  margin-top: -2rem;
  border: none;
}

.article__body > p.is-data-source a {
  cursor: pointer;
  color: #9c9da1;
  font-size: 16px;
  font-family: FoundersGroteskWeb-Medium, Helvetica, Arial sans-serif;
  font-weight: 400;
  position: relative;
  fill: #9c9da1;
  background-image: none;
}
.article__body > p.is-data-source a:hover {
  color: #9c9da1;
}

/* START Sidebar - Related Items */
.article-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.article__body > p {
  margin-left: 0;
}

.article__body .cta--article-lg {
  max-width: 700px;
}

.article-flex-wrapper {
  margin-left: calc((100% - 700px) / 2);
  max-width: 100%;
}

.related-sidebar {
  max-width: 16%;
}

.sidebar__picks-article {
  justify-content: space-between;
}

.sidebar__picks-article:not(:last-child) {
  margin-bottom: 1.5rem;
}

.related-sidebar__link {
  font-size: 1rem;
}

.related-sidebar__picks {
  border-bottom: 1px solid rgba(112, 112, 112, 0.2);
  padding-bottom: 2rem;
}

.related-sidebar__picks-title,
.sidebar__heading {
  border-bottom: 1px solid #707070;
  padding-bottom: 0.5rem;
  font-family: FoundersGroteskWeb-Medium, Helvetica, Arial sans-serif;
  font-weight: 400;
  font-style: normal;
}

.related-sidebar__img {
  filter: grayscale(1);
  width: 100%;
  height: 80px;
  width: 80px;
  object-fit: cover;
}

.related-sidebar__title:hover + .related-sidebar__img-link img,
.related-sidebar__img:hover {
  filter: none;
}

.related-sidebar__img-link {
  display: block;
  max-width: 30%;
}

.related-sidebar__link,
.related-sidebar__title {
  margin-top: 0;
  font-weight: 100;
  font-size: 1rem;
}

.related-sidebar__title {
  width: 70%;
  max-width: 70%;
  padding-right: 0.5rem;
}

.related-sidebar__title:hover .related-sidebar__link {
  text-decoration: underline;
}

.sidebar__featured {
  margin-top: 2rem;
}

.sidebar__featured-img {
  width: 100%;
}

.sidebar__featured-img {
  margin-top: 0.8rem;
  display: block;
}

.sidebar__featured-link {
  background-image: linear-gradient(transparent 95%, #21d279 0);
  padding-bottom: 1px;
  text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff,
    0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff,
    -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  font-family: FoundersGroteskWeb-Medium, Helvetica, Arial sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
}

.sidebar__featured-imgLink:hover + .sidebar__featured-link,
.sidebar__featured-link:hover {
  background-image: none;
  color: #21d279;
}

.sidebar__featured-img {
  margin-bottom: 0.8rem;
}

.sidebar__featured-text {
  margin-top: 0.5rem;
}

@media (max-width: 800px) {
  .article-flex-wrapper {
    margin-left: 0;
  }
}

@media (max-width: 1264px) {
  .related-sidebar {
    max-width: 700px;
    margin: 0 auto;
  }
  .sidebar__picks-article {
    justify-content: flex-start;
  }
  .related-sidebar__title {
    margin-right: 1rem;
  }

  .sidebar__featured-flexWrapper {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .sidebar__featured-innerWrapper {
    max-width: 70%;
    margin-right: 1rem;
  }

  .sidebar__featured-img {
    max-width: 300px;
    margin-bottom: 0.8rem;
    height: 80px;
    width: 80px;
    object-fit: cover;
  }
}
/*END Sidebar - Related Items */

/* START Lit Club Template */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.lit__page {
  scroll-behavior: smooth;
  padding: 0px 60px 60px 60px;
  --lit-color-primary: #c0eaf1;
  --lit-color-secondary: #21d279;
  --lit-color-tertiary: #6263ed;
  --lit-color-grey: rgba(236, 242, 242, 0.7);
  --lit-color-text-black: #000000;
}
.img-aspect-2by3,
.img-aspect-3by2 {
  position: relative;
}
.img-aspect-2by3::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: calc((3 / 2) * 100%);
}
.img-aspect-3by2::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: calc((2 / 3) * 100%);
}
.img-aspect-2by3 img,
.img-aspect-3by2 img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.lit__heading {
  font-family: FoundersGroteskWeb-Medium, Helvetica, Arial sans-serif;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.lit__heading--primary {
  font-size: 4rem;
}
.lit__heading--secondary {
  font-size: 2.25rem;
  font-family: FoundersGroteskWeb-Medium, Helvetica, Arial sans-serif;
  font-weight: 400;
}
.lit__heading--tertiary {
  font-size: 1.25rem;
}
.lit__page p,
.lit__page span {
  font-family: FoundersGroteskWeb-Regular, Helvetica, Arial sans-serif;
}
.lit__page p,
.lit__page a {
  font-size: 18px;
}
.lit__btn {
  //background: var(--lit-color-secondary);
  //padding: 0.5rem 2rem 0.75rem 2rem;
  //color: white;
}
a.lit__link {
  background-image: linear-gradient(transparent 95%, #21d279 0);
  padding-bottom: 1px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  display: inline-block;
  margin: 0 auto;
}

a.lit__link:hover {
  background-image: none;
  color: #21d279;
}
.lit__btn:hover {
  background: var(--lit-color-tertiary);
}
.lit__header {
  font-family: FoundersGroteskWeb-Regular, Helvetica, Arial sans-serif;
  display: flex;
  padding-top: 30px;
  justify-content: space-between;
}
.lit__menu {
  width: 85%;
  display: flex;
  justify-content: space-between;
  max-width: 850px;
}
.lit__menu-link:hover {
  color: var(--lit-color-secondary);
}
.lit__social-icon {
  margin-right: 8px;
  height: 24px;
  width: 24px;
}
.lit__social-icon:hover path,
.lit__social-icon:hover path,
.lit__social-icon:hover circle {
  fill: var(--lit-color-secondary) !important;
}
.lit__social-icon--fb {
  margin-right: 4px;
}
.lit__intro {
  margin-top: 2rem;
  position: relative;
  //max-height: 686px;
}

.lit__intro-box {
  background: var(--lit-color-primary);
  padding: 2rem 2rem 3rem 2rem;
  max-width: 60%;
  position: relative;
  z-index: 20;
  margin-top: 1;
  animation-name: fadeInLeft;
  animation-duration: 1s;
}
.lit__intro-header {
  position: relative;
}
.lit__intro-by {
  font-family: FoundersGroteskWeb-Medium, Helvetica, Arial sans-serif;
  font-size: 3rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  position: relative;
}
.lit__intro-logo {
  bottom: 10px;
  position: relative;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.lit__intro-img {
  position: absolute;
  right: 0;
  max-width: 50%;
  top: 0;
  z-index: 0;
  animation-name: fadeInRight;
  animation-duration: 2s;
  top: calc(115px / 2);
}
.lit__intro-logo {
  position: absolute;
  max-width: 150px;
  bottom: 1px;
  width: 200px;
  left: 74px;
}

.lit__bookMonth {
  margin: 4rem 0;
}
.lit__bookMonth-container {
  display: flex;
  margin-top: 2rem;
}
.lit__bookMonth-cover {
  width: 33.33333%;
  margin-right: 37px;
}
.lit__bookMonth-cover:hover + .lit__bookMonth-description h3 {
  color: var(--lit-color-secondary);
}

.lit__bookMonth-description {
  width: 40%;
  margin-right: 37px;
}

.lit__bookMonth-author {
  background: var(--lit-color-grey);
  width: 33.33333%;
}

.lit__bookMonth-author-container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 2.5rem;
  padding-top: 1.5rem;
}

.lit__bookMonth-author p:first-child {
  font-family: FoundersGroteskWeb-Medium, Helvetica, Arial sans-serif;
  font-weight: semibold;
  font-size: 26px;
  margin: 0;
  margin-bottom: 1rem;
}

.lit__author-photo {
  height: 80px;
  width: 80px;
  border-radius: 1000px;
  margin-right: 1rem;
}

.lit__read-more {
  color: var(--lit-color-secondary);
}

.lit__list {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--lit-color-grey);
}
.lit__list-flexbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, 17%);
  margin-top: 2rem;
  grid-column-gap: 37px;
  grid-row-gap: 2rem;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lit__past-selections {
  margin-left: -60px;
  padding-left: 60px;
  padding-right: 60px;
  width: calc(100% + 120px);
  background: url("../../img/film-club-pattern.png"), var(--lit-color-primary);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.lit__past-selections h3 {
  font-weight: 100;
  font-size: 26px;
  margin-top: 0.5rem;
}

.lit__past-selections span {
  display: block;
}

.lit__past-selections a {
  display: block;
  padding-bottom: 1px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  font-family: FoundersGroteskWeb-Medium, sans-serif;
  display: inline-block;
  margin: 0 auto;
  font-size: 1rem;
  background-image: linear-gradient(transparent 95%, #21d279 0);
  margin-top: 0.5rem;
}

.lit__past-selections svg {
  width: 16px;
  position: relative;
  bottom: 4px;
  left: 4px;
}

.past-selections__single {
  width: 40%;
  margin-top: 1rem;
}

.past-selections__date {
  font-size: 1.5rem;
}

.partners-wrapper {
  width: calc(100% + 120px);
  background: rgba(109, 180, 208, 0.24);
  margin-left: -60px;
  padding-top: 4rem;
  padding-left: 60px;
  padding-right: 60px;
}

.partners-wrapper .lit__heading:first-child:not(.lit__bookCard-title) {
  display: block;
  text-align: center;
}

.lit__partners-text {
  text-align: center;
  margin-top: 0;
}

.lit__partners-img {
  border-radius: 100px;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  display: block;
}

.lit__partners-cards {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  width: 500px;
  margin: 0 auto;
  justify-content: space-between;
}

.lit__partners-card.inactive {
  opacity: 0.4;
  filter: grayscale(1);
}

.lit__partners-card p {
  margin: 0;
  text-align: center;
}

.lit__bookCard:hover h3 {
  color: var(--lit-color-secondary);
}

.lit__bookCard h3 {
  margin-top: 0.5rem;
}
.lit__bookCard span {
  margin-top: 0.1rem;
  display: block;
}

.lit__list-seeMore-wrapper {
  // margin: 0 auto;
  margin-top: 1.5rem;
  // width: 282px;
  // text-align: center;
}

a.lit__list-seeMore {
  background-image: linear-gradient(transparent 95%, #21d279 0);
  padding-bottom: 1px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  font-family: FoundersGroteskWeb-Medium, sans-serif;
  display: inline-block;
  margin: 0 auto;
  font-size: 1.5rem;
}

a.lit__list-seeMore:hover {
  background-image: none;
  color: #21d279;
}

.lit__morefromNae {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.lit__morefromNae .lit__heading--secondary {
  margin-bottom: 2rem;
}

.lit__featured-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lit__featuredCard {
  width: 48%;
}

.lit__featuredCard img {
  width: 100%;
}

.lit__featuredCard a:first-child:hover + a h3 {
  color: var(--lit-color-secondary);
}

.lit__featuredCard a:last-child:hover h3 {
  color: var(--lit-color-secondary);
}

.lit__featuredCard h3 {
  font-family: FoundersGroteskWeb-Medium, sans-serif;
  display: inline-block;
  margin: 0 auto;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 0.5rem;
}
.lit__featuredCard h3:hover {
  color: var(--lit-color-secondary);
}
.lit__featuredCard p {
  margin-top: 0;
}

.lit__sign-up {
  display: flex;
  justify-content: space-between;
}
.lit__sign-up-inner {
  width: 60%;
}
.lit__sign-up .cta {
  width: 40%;
  margin-right: 37px;
}
.cta__content {
  position: relative;
}
.cta__box {
  height: 40px;
  width: 40px;
  position: absolute;
  background: #21d279;
  right: 0;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  bottom: 0;
}
.lit__sign-up p {
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

@media (max-width: 1280px) {
  .lit__list-flexbox {
    grid-template-columns: repeat(auto-fill, 17%);
  }
}

@media (max-width: 1160px) {
  .lit__intro-box {
    max-width: 75%;
  }
}

@media (max-width: 1024px) {
  .lit__list-flexbox {
    grid-template-columns: repeat(auto-fill, 21%);
  }
  .lit__bookMonth-container {
    flex-wrap: wrap;
  }
  .lit__bookMonth-description {
    margin-top: 1rem;
    width: 100%;
    margin-right: 0;
  }
  .lit__bookMonth-author {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .lit__page {
    padding: 20px 20px 60px 20px;
  }
  .lit__heading--primary {
    font-size: 3rem;
  }
  .lit__header {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .lit__menu {
    width: 100%;
    max-width: 100%;
    background: var(--lit-color-grey);
    padding: 0.5rem 0.5rem 1rem 1rem;
    flex-wrap: wrap;
  }
  .lit__menu-link {
    width: 50%;
    padding-bottom: 0.5rem;
  }

  .lit__social {
    align-self: flex-end;
    margin-bottom: 1rem;
  }
  .lit__intro-box {
    max-width: 100%;
    padding: 1rem 1rem 2rem 1rem;
  }
  .lit__intro-by {
    display: block;
    font-size: 2rem;
  }
  .lit__intro-logo {
    left: 45px;
    bottom: 5px;
    width: 100px;
  }

  .lit__bookMonth-cover {
    width: 50%;
  }

  .partners-wrapper,
  .lit__past-selections {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: calc((48% + 24px) - 50vw);
    width: calc(100vw - 23px);
  }

  .past-selections__single {
    width: 100%;
  }

  .lit__list-flexbox {
    grid-template-columns: repeat(auto-fill, 200px);
  }

  .lit__sign-up {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .lit__sign-up-inner {
    width: 100%;
  }
  .lit__sign-up .cta {
    width: 100%;
  }
  .cta__box {
    bottom: 0;
  }
}
@media (max-width: 600px) {
  .lit__partners-cards {
    flex-wrap: wrap;
    width: 100%;
  }
  .lit__partners-card {
    margin-bottom: 1rem;
    width: 70px;
  }
  .lit__partners-img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 460px) {
  .lit__list-flexbox {
    grid-template-columns: repeat(auto-fill, 130px);
  }
  .partners-wrapper,
  .lit__past-selections {
    margin-left: calc((48% + 14px) - 50vw);
    width: calc(100vw - 16px);
  }
  .lit__featuredCard {
    width: 100%;
  }
}
/* END Lit Club Template */