/* Stories */



.stories {

  margin: 45px 0 60px;

}

.story {

  border-bottom: 1px solid #8B8B8B;

  margin-bottom: 40px;

  padding-bottom: 20px;

}



.story:nth-of-type(4),

.story:nth-of-type(5),

.story:nth-of-type(6) {

  display: none;

}



.story:last-of-type {

  border-bottom: 0;

}



.story--image {

  margin-bottom: 20px;

}



.story .story--image a {

  background-image: none;

}



.story .story--title {

  font-family: atten-new, sans-serif;

  font-size: 2rem;

  font-weight: 700;

  text-transform: uppercase;

}



.story--title::after {

  border-bottom: 5px solid #8B8B8B;

  content: '';

  display: block;

  max-width: 215px;

  padding-top: 20px;

}



.story .story--title a {

  background-image: none;

  font-weight: 800;

}



.story--excerpt {

  line-height: 1.2;

}



.story .story--read-more {

  font-size: 0;

  margin-top: 20px;

  text-align: right;

}



.story--read-more a::before {

  font-size: 2rem !important;

  -webkit-transition: opacity 250ms ease-in-out;

  transition: opacity 250ms ease-in-out;

}



.story--read-more:hover a::before {

  opacity: .5;

}



.stories--opt-in {

  background-color: #000;

  color: #fff;

  padding: 15px;

  text-align: center;

}



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



  .stories {

    display: -webkit-box;

    display: flex;

      flex-wrap: wrap;

    margin-left: -30px;

    margin-right: -30px;

  }



  .story {

    border-bottom: 0;

    border-right: 1px solid #8B8B8B;

    flex-basis: calc(100% / 3 - 5px);

    padding-bottom: 0;

    position: relative;

  }



  .story:nth-of-type(4),

  .story:nth-of-type(5),

  .story:nth-of-type(6) {

    display: block;

  }



  .story:nth-of-type(3n+3),

  .story:last-of-type {

    border-right: 0;

  }



  .story > * {

    padding-left: 30px;

    padding-right: 30px;

  }



  .story--excerpt {

    margin-bottom: 75px;

  }



  .story--read-more {

    margin-bottom: 0;

    position: absolute;

      right: 0;

      bottom: 0;

  }



  .stories .story-divider {

    color: #8B8B8B;

    flex-basis: 100%;

    margin: 30px 0 75px;

  }



  .stories--opt-in {

    display: -webkit-box;

    display: flex;

      -webkit-box-align: center;

              align-items: center;

      -webkit-box-pack: justify;

              justify-content: space-between;

    flex-basis: 100%;

    margin: 30px 30px 75px;

    padding: 30px;

    text-align: left;

  }



  .stories--opt-in-headline {

    margin-bottom: 0;

  }



}