/*!
 * jQuery ClassyLeaves
 * www.class.pm
 *
 * Written by Marius Stanciu - Sergiu <marius@class.pm>
 * Licensed under the MIT license www.class.pm/LICENSE-MIT
 * Version 1.1.0
 *
 */

body {
  overflow-x: hidden;
}

.ClassyLeaf,
.ClassyLeafFalling {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 3
}

.x1 {
    width: 150px;
    height: 150px
}

.x2 {
    width: 125px;
    height: 125px
}

.x3 {
    width: 150px;
    height: 150px
}

.x4 {
    width: 175px;
    height: 175px
}

.article-topper--simple-white, .article-topper--data-viz-white {
  background-color: transparent;
}

.nav--primary {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  height: auto;
}

.hidden-nav-is-visible .nav__width, .video-page .nav__width, .simple_white_topper .nav__width, .nav--red .nav__width, .archive:not(.term-faces):not(.term-seen-around):not(.post-type-archive-faculty-experts):not(.tax-expertise) .nav__width {
  border-bottom: 0;
}

.article-content > .article-body {
  background: url('/interactive/2018/10/leaves/images/puddle.png') no-repeat bottom center;
  background-size: contain;
  padding-bottom: 430px;
  overflow: hidden;
}

@media screen and (max-width: 1100px) {
  .article-content > .article-body {
    padding-bottom: 40vw;
  }
}

.article-content > .article-body:before {
  position: absolute;
  z-index: 0;
  top: calc(30% - 300px);
  left: 52%;
  display: block;
  content: "";
  width: 600px;
  height: 600px;
  background: url('/interactive/2018/10/leaves/images/leaves/left-leaf.png') no-repeat top left;
  background-size: contain;
  opacity: 0.1;
}

@media screen and (max-width: 1100px) {
  .article-content > .article-body:before {
    width: 80vw;
    height: 80vw;
    left: auto;
    right: -35vw;
  }
}

.article-content > .article-body:after {
  position: absolute;
  z-index: 0;
  top: calc(70% - 300px);
  left: -5%;
  display: block;
  content: "";
  width: 500px;
  height: 500px;
  background: url('/interactive/2018/10/leaves/images/leaves/right-leaf.png') no-repeat top left;
  background-size: contain;
  opacity: 0.1;
}

@media screen and (max-width: 1100px) {
  .article-content > .article-body:after {
    width: 70vw;
    height: 70vw;
    left: -35vw;
  }
}

.article-content > .article-body p {
  position: relative;
  z-index: 1;
}

.spotlight-section {
  position: relative;
  z-index: 4;
}

.article-content > .article-body > p:first-of-type {
  background: url('/interactive/2018/10/leaves/images/leaves/leaf.png') no-repeat top left;
  background-size: 25px;
  text-indent: 30px;
}