/* MAIN STORY CONTAINER ELEMENTS */

.story-container {
  background: white;
  width: 100%;
  margin: 0;
  position: relative;
  top: 0vh;
  background-color: white;
}

.text-title{
  font-family: 'Playfair Display', serif;
  font-size:3em;
  letter-spacing: 2px;
  line-height:140%;
  font-weight: 200;
}

.text-author{
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
}

.caption {
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding-bottom:30px;
  font-family: 'Montserrat', sans-serif;
  font-size: .8em;
  color: black;
  text-align: center;
}

.photo-caption{
  width:100%;
  max-width:900px;
  padding-bottom:30px;
  font-family: 'Montserrat', sans-serif;
  font-size: .8em;
  color: black;
  text-align: left;
}

.photo-credit {
  width:100%;
  max-width:900px;
  font-family: 'Montserrat', sans-serif;
  font-size: .8em;
  color: black;
  text-align: right;
}

.chapter-title{
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  text-align: center;
}

.chapter-title-alt{
  font-family: 'Playfair Display', serif;
  font-size:2.8em;
  letter-spacing: 2px;
  line-height:140%;
  font-weight: 200;
  text-align: center;
}

.chapter-author{
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  text-align: left;
}

.image {
  width:100%;
  padding-top:20px;
  padding-bottom:20px;
}

.table-images {
  float: left;
  width: 50%;
  padding: 8px;
  padding-top: 15px;
  max-width: 100%
  height: auto;
}

.additional-credit{
  font-family: 'Playfair Display', serif;
  font-size: 0.8em;
  text-align: left;
}

.chapter-title-new{
  font-family: 'Playfair Display', serif;
  font-size: 1.7em;
  text-align: left;
}

.dateline{
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-size: 1em;
}

/* WIDER CONTAINER */

.embed-container{
  margin: 0 auto;
}

.img-logo {
  max-width: 100%;
}

/* GRAPHICS ELEMENTS */

.graphic-container{
  text-align:center;
}



/* SCROLLYTELLING */


  /* sticky section */
  .image-scrolly-section {
    margin: 0;
    padding: 0;
  }

  /* sticky item */
  figure {
    align-items: center;
    align-self: flex-start;
    display: flex;
    height: 100vh;
    margin: 0;
    width: 100%;
    justify-content: center;
    top: 0;
    z-index: -1;
    position: -webkit-sticky;
    position: sticky;
  }

  .sticky {
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
  }

  /* floating child items */
  article {
    padding: 0 1rem 60vh;
    margin: 0 auto;
  }

  .annotations {
    width: 50%;
    padding: 20px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    margin:0 auto;
    opacity: .8;
    box-shadow: 0px 0px 10px #888888;
    border-left: 5px solid #F23030;
    background-color: rgba(0, 0, 0, 0.7);
    color:white;
  }

  .annotations-1{
    background-color: rgba(255, 255, 255, 0.75);
    width: 50%;
    padding: 1.5em;
    margin:0 auto;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    opacity: .9;
    box-shadow: 0px 0px 10px #888888;
    border-left: 5px solid #F23030;
  }

  .annotations:not(:last-of-type), .annotations-1:not(:last-of-type) {
    margin-bottom: 60vh;
  }



    /* scrollama */

    .scroll-graphic {
      position: -webkit-sticky;
      position: sticky;
      top:0;
      height: 50vh;
    }

    .step {
      padding: 2rem;
      height: 50vh;
    }

    .scroll-graphic-tab{
      padding-top: 15px;
      padding-bottom: 15px;
    }


    .col-graphic{
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      background-color: white;
    }





    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {

      .scroll-graphic {
        position: -webkit-sticky;
        position: sticky;
        top:0;
        height: 100vh;
      }

      .step {
        height: 100vh;
      }

      .col-graphic{
        position: relative;
      }

      .scroll-text{
        /* height: 100vh;
        overflow: hidden; */
      }
    }