.cover-story {
  background: black;
}

.cover-story .attachment-post-thumbnail{
  position: absolute;
  z-index: -10;
  max-height: 100vh;
  object-fit: cover;
}

.cover-story .heading{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100vh;
    color: white;
}

.cover-story .heading h1{
  font-size: 4rem;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

.cover-story .heading h4{
  font-size: 100%;
}

.cover-story .heading .wp-block-group__inner-container{
  padding-bottom: 50px;
}

.cover-story .addtoany_shortcode{
  padding-bottom: 25px;
}

.cover-story .heading .attributes {
  display: flex;
  padding-bottom: 25px;
}

.cover-story .heading .title-attributes{
  padding-right: 4rem;
}

.cover-story .heading .title-attributes .name {
  font-weight: bold;
}

.cover-story .header-logo{
  position: absolute;
	right: 40px;     
	bottom: 20px;
}

.cover-story > p, .cover-story > ul{
  max-width: 60%;
  margin: auto;
  color: white;
  font-family: 'Lora', serif;
  padding: 25px 0;
    line-height: inherit;
}

.cover-story > p a, .cover-story > ul a, .cover-story > .credits-section a{
  color: #6482f7;
    text-decoration: underline;
}

.cover-story .intro-text{
      max-width: 60%;
    margin: auto;
    color: white;
    margin-bottom: 50px;
}

.cover-story .full-image, .cover-story .centered-image{
  padding: 100px 0;
}

.cover-story .full-image .wp-block-image {
  margin: 0;
}

.cover-story .centered-image .wp-block-image{
  margin: auto;
    width: 100%;
    text-align: center;
}

.cover-story .centered-image .wp-block-image img{
  max-width: 65%;
}

.cover-story figcaption {
    max-width: 60%;
    margin: auto;
    margin-top: 10px;
    color: white;
    font-family: 'Lora';
    border-left: 1px solid;
    padding-left: 20px;
    text-align: left;
    line-height: 20px;
}

.cover-story .multiple-columns figcaption{
  column-count: 2;
  column-gap: 40px;
}

.cover-story .n2-section-smartslider p{
  font-family: 'Lora';
    color: white;
    padding: 10px 0;
}

.cover-story .n2-section-smartslider .slider-quote div{
  font-family: 'Lora';
    color: white;
}

.cover-story .n2-section-smartslider .slider-name div{
  display: block;
    text-transform: uppercase;
    font-weight: 800;
    font-family: "tablet-gothic",sans-serif;
}

.cover-story .credits-section{
  max-width: 60%;
  margin: auto;
  display: flex;
  margin-top: 100px;
}

.cover-story .credits-section > .wp-block-group__inner-container{
  display: flex;
}

.cover-story .credits-section .wp-block-group__inner-container .wp-block-group:first-of-type{
  flex: 1;
}

.cover-story .credits-section .wp-block-group__inner-container .wp-block-group:last-of-type{
  flex: 2;
}

.cover-story .credits-section p{
  color: white;
  padding-bottom: 35px;
  font-family: 'Lora';
  line-height: inherit;
}

.cover-story .credits-section h3{
  margin: 20px 0;
  color: white;
  font-family: "tablet-gothic",sans-serif;
}

.cover-story .credits-footer{
  display: flex;
    max-width: 60%;
    margin: auto;
    padding: 50px;
}

.cover-story .credits-footer .credits-column:first-of-type{
  flex: 1;
}

.cover-story .credits-footer .footer-social img{
  object-fit: contain !important;
  width: 30px !important;
}

.cover-story .credits-footer .credits-column:last-of-type{
  flex: 2;
}

.cover-story .credits-footer .credits-column p{
  color: white;
}

.cover-story .portrait-caption {
    padding-bottom: 150px !important;
  }


.cover-story .portrait-caption p {
    font-size: 13px !important;
	  font-family: 'Lora', serif !important;
  }

.cover-story.flint-cover > p, .cover-story.flint-cover > ul {
  color: black;
  max-width: 50%;
  padding: 10px 0;
  font-family: lemonde-journal, serif;
}

.cover-story.flint-cover.black-bg > p, .cover-story.flint-cover.black-bg > ul {
  color: white;
}

.cover-story.flint-cover .intro-text{
    max-width: 50%;
    margin: auto;
    color: black;
    font-family: apotek-cond, sans-serif;
}

.cover-story.flint-cover.black-bg h3, .cover-story.flint-cover.black-bg h4{
  max-width: 50%;
    margin: auto;
    color: white;
    font-family: apotek-cond, sans-serif;
}


.cover-story.flint-cover .intro-text:after {
  content: "";
      display: block;
    width: 20px;
    padding-top: 15px;
    border-bottom: 5px solid black;
}

.cover-story.flint-cover figcaption:before {
  content: "";
  display: block;
  width: 20px;
  padding-bottom: 10px;
  border-top: 5px solid black;
}

.cover-story.flint-cover.black-bg figcaption:before {
  border-top: 5px solid white;
}

.cover-story.flint-cover figcaption {
    max-width: 50%;
    margin: auto;
    margin-top: 10px;
    font-family: lemonde-journal, serif;
    color: black;
    border-left: 0px;
    padding-left: 0px;
    text-align: left;
}

.cover-story.flint-cover.black-bg figcaption {
    font-family: lemonde-journal, serif;
    color: white;
}

.cover-story.flint-cover .pullquote {
  width: 50%;
    margin: auto;
    padding: 50px 0;
}

.cover-story.flint-cover .pullquote figure {
  margin: 0;
}

.cover-story.flint-cover .pullquote blockquote {
  padding: 0;
    font-size: 40px;
    text-transform: uppercase;
    line-height: 45px;
}

.cover-story.flint-cover .pullquote blockquote p{ 
  font-family: apotek-cond, sans-serif;
    display: inline;
    line-height: 100%;
}

.cover-story.flint-cover .pullquote blockquote cite{
      font-family: apotek-cond, sans-serif;
    display: inline;
    font-style: normal;
    color: darkgrey;
    font-size: 115%;
    margin-left: 5px;
}

.cover-story.flint-cover .left-image figure {
      display: flex;
    width: 83%;
    margin: auto;
    padding: 100px 0;
}

.cover-story.flint-cover .left-image figure img {
  width: 60%;
}

.cover-story.flint-cover .left-image figure figcaption{
  padding-left: 10%;
  margin-top: 0;
}

.cover-story.flint-cover .right-image figure {
      display: flex;
      flex-direction: row-reverse;
    width: 83%;
    margin: auto;
    padding: 100px 0;
}

.cover-story.flint-cover .right-image figure img {
  width: 60%;
}

.cover-story.flint-cover .right-image figure figcaption{
  padding-right: 10%;
  margin-top: 0;
}

.cover-story.flint-cover{
  transition: 0.5s ease;
}

.cover-story.flint-cover.black-bg{
  background: black;
}

.cover-story.flint-cover.light-bg{
  background: white;
}

.cover-story.flint-cover .footer-title{
      margin: auto;
    padding-bottom: 200px;
    width: 50%;
    text-align: center;
}

.timeline-wrapper {
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-top: 100px;
    padding-left: 50px;
    padding-bottom: 100px;
}

.timeline-wrapper .card {
  flex: 0 0 auto;
    width: 30%;
    color: white;
    position: relative;
}

.timeline-wrapper .timeline-date{
    background: white;
    color: black;
    text-align: center;
    font-family: apotek-cond, sans-serif;
    font-size: 20px;
    display: flex;
    text-transform: uppercase;
    width: 75px;
    align-items: center;
    justify-content: center;
    height: 75px;
}

.timeline-wrapper .line{
  position: absolute;
    width: 100%;
    height: 1px;
    background: white;
    top: 267px;
    z-index: -10;
}

.timeline-buffer {
	height: 227px;
}

.timeline-wrapper .timeline-img{
	height: 200px;
    object-fit: contain;
    padding-bottom: 20px;
}

.timeline-wrapper .timeline-desc {
      white-space: normal;
    font-size: 13px;
    font-family: lemonde-journal, serif;
    line-height: 18px;
    padding-top: 10px;
    padding-right: 50px;
}

.cover-story.flint-cover .attachment-post-thumbnail {
      position: relative;
    max-width: 60%;
    margin: auto;
    display: block;
    padding-top: 130px;
}

.cover-story.flint-cover .heading{
  position: absolute;
    top: 0;
    align-items: flex-start;
    padding-top: 50px;
}

.cover-story.flint-cover .heading > .wp-block-group__inner-container{
  max-width: 50%;
  padding-bottom: 0px;
}

.cover-story.flint-cover .heading .wp-block-group__inner-container h3{
  margin-left: 0;
  max-width: 100%;
  font-family: apotek-cond, sans-serif;
  color: white;
}

.cover-story.flint-cover .heading .wp-block-group__inner-container figure {
  margin-left: 0;
}

.cover-story.flint-cover .heading .wp-block-group__inner-container{
  padding-bottom: 0px;
}

.cover-story.flint-cover .header-caption{
      max-width: 50%;
    margin: auto;
    margin-top: 10px;
    font-family: lemonde-journal, serif;
    color: white;
    border-left: 0px;
    padding-left: 0px;
    text-align: left;
    line-height: 20px;
    font-size: 14px;
}

.cover-story.flint-cover .header-caption:before{
  content: "";
    display: block;
    width: 20px;
    padding-bottom: 10px;
    border-top: 5px solid white;
}

.cover-story.flint-cover.light-bg .header-caption{
  color: black;
}

.cover-story.flint-cover.light-bg .header-caption:before{
  border-top: 5px solid black;
}

@media only screen and (max-width: 600px) {
  .cover-story .attachment-post-thumbnail{
    position: relative;
  }

  .cover-story .heading{
    display: block;
    width: auto;
    margin: 25px;
    height: auto;
  }

  .cover-story .heading h1{
    font-size: 2rem;
  }

  .cover-story > p, .cover-story > ul{
    max-width: 100%;
    margin: 0 25px;
    text-align: justify;
  }

  .cover-story .intro-text{
    max-width: 100%;
    margin: 0 25px;
    font-size: 150%;
  }

  .cover-story .multiple-columns figcaption{
    column-count: 1;
  }

  .cover-story figcaption{
    max-width: 100%;
    margin: 0 25px;
    margin-top: 5px;
    padding-left: 0px;
    border-left: none;
  }

  .cover-story .centered-image .wp-block-image img{
    max-width: 100%;
  }

  .cover-story .credits-section{
    max-width: 100%;
    padding: 0 25px;
  }

  .cover-story .credits-section > .wp-block-group__inner-container, .credits-footer{
    flex-direction: column;
  }

  .cover-story .credits-footer{
    max-width: 100%;
    padding: 0 25px;
  }

  .cover-story .credits-footer .blocks-gallery-grid {
    margin-left: 0;
    flex-wrap: nowrap;
  }

  .cover-story .credits-footer .blocks-gallery-grid .blocks-gallery-item {
    margin-right: 10px;
  }

  .cover-story .portrait-caption {
    font-size: 115% !important;
    margin: 0 !important;
		padding-bottom: 25px !important;
  }

  .cover-story .n2-section-smartslider .slider-quote{
    display: none;
  }

  .cover-story ul{
    margin-left: 50px;
  }

  .cover-story .header-logo{
    top: 20px;
  }

  .cover-story .navigation {
    display: none;
  }

  .cover-story.flint-cover .left-image figure, .cover-story.flint-cover .right-image figure{
    width: 100%;
    flex-direction: column;
  }

  .cover-story.flint-cover .left-image figure img, .cover-story.flint-cover .right-image figure img{
    width: 100%;
  }

  .cover-story.flint-cover .left-image figure figcaption, .cover-story.flint-cover .right-image figure figcaption{
    margin-top: 20px;
  }

  .cover-story.flint-cover .attachment-post-thumbnail, .cover-story.flint-cover.black-bg h3, .cover-story.flint-cover.black-bg h4, .cover-story.flint-cover .header-caption, .cover-story.flint-cover > p, .cover-story.flint-cover > ul, .cover-story.flint-cover .intro-text{
    max-width: 90%;
  }
	
	.cover-story.flint-cover .heading{
		padding-top: 50px;
	}
	
	.cover-story.flint-cover .heading .wp-block-group__inner-container h3{
		font-size: 115%;
	}

  .cover-story.flint-cover figcaption{
    max-width: 100%;
    margin: 20px;
  }

  .cover-story.flint-cover .pullquote{
    width: 80%;
  }

  .cover-story.flint-cover .pullquote blockquote{
    font-size: 20px;
    line-height: 25px;
  }

  .timeline-wrapper .card{
    width: 50%;
  }

  .cover-story.flint-cover .left-image figure figcaption{
    padding-left: 0px;
  }

  .cover-story.flint-cover .right-image figure figcaption{
    padding-right: 0px;
  }

  .cover-story.flint-cover .heading > .wp-block-group__inner-container{
    max-width: 90%;
    padding-left: 10px;
  }
}

.cover-story.flint-cover .lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* A bit of padding around image */
  padding: 2em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.cover-story.flint-cover .lightbox:target {
  display: block;
}

.cover-story.flint-cover .lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}