body{
overflow-y: scroll;
overflow-x: hidden;
}


/*=== Global Nav  ===*/
.back-button {
  display: flex;
  align-items: center;
}
.black{
  padding-top:60px;
  padding-bottom:60px;
  background-color: #000;
}
.back-button a {
  display: flex;
  align-items: center;
  padding: 8px 0;
  z-index: 1;
}

.back-button a span {
  display: block;
  height: 30px;
}

.back-button svg {
  width: 12px;
  height: 12px;
  fill: #353535;
  padding: 0 16px 0 0;
  box-sizing: content-box;
}

.back-button img {
  width: 30px;
  height: 30px;
  transition: all .5s;
}

#global-nav {
  height: 116px;
  transition: all .5s;
}

.scrolled #global-nav {
  border-bottom: solid 1px rgba(0,0,0,.1);
  background-color: #fff;
  height: 64px;
  padding: 16px 60px;
}

.scrolled .back-button a span {
  height: 30px;
}

.scrolled #global-nav img {
  width: 30px;
  height: 30px;
}

.nav-project {
 opacity: 0;
 transition: all .3s;
 position: absolute;
 display: block;
 color: #3d3d3d;
 font-size: 20px;
 text-align:right;
 left:50%;
 transform: translate3d(-50%, 0,0);
 padding: 0 60px;
 width: 100%;
 z-index: 0;
}

.scroll-title .nav-project {
 opacity: 1;
 padding-top: 0;
}

/*=== Project Typography  ===*/
h4 {
 font-family: "Playfair Display", serif;
 margin-bottom: 0;
 margin-top: 0;
 font-size: calc(.7rem+.7vw);
 letter-spacing: -2px;
}

#project h1{
  padding-top: 0px;
  font-family: 'Playfair', serif;
  font-size: calc(3rem + 4vw);
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  padding-left: 88px;
}

#project h2{
  font-family: 'Chivo', sans-serif;
  font-size: calc(1.2rem + .5vw);
  font-weight: 700;
  line-height: 1.2;
  padding-top: 24px;
  position: relative;
}

#project h6{
  font-size: calc(2.2rem + 1vw);
    font-weight: 500;
    line-height: 1;
    margin-top: 2%;
    margin-bottom: 6%;
    font-family: 'Playfair', serif;
    padding-top: 24px;
    position: relative;
}

#project h2:before {
 content: "";
 width: 40px;
 height: 2px;
 background-color: #353535;
 position: absolute;
 top: 15px;
 left: 0;
}


#project h4 {
 font-family: 'Playfair', serif;
 font-size:calc(2.2rem + 1vw);
 font-weight:500;
 line-height: 1;
 padding-left: 88px;
 margin: 0 0 .5em -4px;
 letter-spacing: -0.1rem;
 position: relative;
}

.detail h3{
  font-family: 'Chivo', sans-serif;
  font-size:16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01rem;
}

.details p{
  text-align:left;
  font-family:'Chivo', sans-serif;
  font-size: calc(.8rem + .2vw);
}

.intro-dash h3 span {
 width: 64px;
 display: block;
 height: 2px;
 background-color: #30E8AC;
 margin-top: 1.5em;
}

.challenge h3 {
 font-size: 16px;
 font-weight: 600;
}

.takeaways h3 {
 font-size: 16px;
 font-weight: 600;
}

/*=== Project CSS  ===*/
#project {
 margin: 128px 0 0 0;
}

section {
 margin: 4% auto;
 max-width: 1280px;
 padding: 0 60px;
}

.image-cover, .background-video, .background-video-padding, {
  padding: 0 60px;
  max-height: 90vh;
  overflow: hidden;
  max-width: none;
}
.background-video video{
  width:100%;
  height: auto;
}
.background-video-padding video{
  width:100%;
  padding-bottom:8%;
  height: auto;
}
.image-cover img{
  width:100%;
  height: 100%;
}

.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.one {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

.two {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

.three{
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}
.four {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.challenge{
  padding-left:0;
}
.takeaways{
  padding-left: 8%;
}

.proj-content {
  display: flex;
  line-height: 1.6;
}

.proj-content.text {
  max-width: ;
}

section.full-bleed {
  margin: 0;
  padding: 0;
  max-width: none;
}
section.full-bleed-padding {
  margin: 0 0 0 0;
      padding: 0 0 8% 0;
      max-width: none;
}
section.image {
  display: block;
  margin-top: 24px;
}

.image > img {
  width: 100%;
}

.max-width-90 {
  max-width: 90%;
}

.max-width-80 {
  max-width: 80%;
}

.max-width-60 {
  max-width: 60%;
}

.content-col {
  max-width: 72%;
  padding-right: 4%;
}

.content-col.pct-30 {
  max-width: 30%;
}

.content-col.pct-40 {
  max-width: 40%;
}

.content-col.pct-50 {
  max-width: 50%;
}

.content-col.pct-60 {
  max-width: 60%;
}

.content-col.pct-70 {
  max-width: 70%;
}
.content-col:first-child {
  padding-left: 88px;
}

.content-col.intro-dash {
  max-width: 100px;
  padding-left: 0;
  padding-right: 24px;
}

hr{
  border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid #fff;
}

.indent-left > img {
  margin-left: 88px;
}

.indent-right > img {
  margin-right:88px;
}

.full-bleed-image-text {
  margin: 0;
  padding: 0 4% 0 0;
  max-width: none;
}
.full-bleed-image-image {
  margin: 0;
  padding: 0% 0% 4% 4%;
  max-width: none;
}
.full-bleed-image-text .content-col:first-child {
  margin-top: 24px;
  padding-left: 0;
}
.full-bleed-image-image .content-col:first-child {
  margin-top: 0px;
  padding-left: 0;
}
.indent-left-image-text .content-col:first-child {
  margin-top: 24px;
  padding-left: 88px;
}

.indent-right-image-text .content-col:first-child {
  margin-top: 24px;
}

.middle {
  position: relative;
  top:cal(50%);
  margin: auto
}

.wires > img {
  width: 80%;
  height: auto;
}

.overview{
  margin-left: 15%;
  display: block;
}
.center-gif{
  background:#F5F6F7;
}
.center-gif img{
  display: block;
  max-width:35%;
  margin:auto;
}
.fullview img{
  display: block;
  max-width:70%;
  margin:auto;
}

.filter img{
  display: block;
  width:60%;
  margin:auto;
}
.desktop p{
  font-size: 14px;
}

.no-margin-bottom{
  margin-bottom:0;
}

.no-margin-top{
  margin-top:0;
}
.one-third-images{
  padding-bottom: 4%;
  display: flex;
  margin:0;
  max-width: none;
}
.one-third-images-indent{
  padding: 0;
  display: flex;
}
.one-third{
  margin: 10px;
  flex: 1 30%;
}
.one-third:first-child{
  margin-left: 0px;
}

.one-third:last-child{
  margin-right: 0px;
}

.one-third img{
  width: 100%;
}


.no-heading {
  margin-top: 10px;
}

section.bottom-nav{
  max-width:100%;
  top:-100px;
  height:286px;
  margin:0;
  padding-left: 60px;
  padding-right: 60px;
}
.project-left{
  padding-top:100px;
  height:286px;
  width: 50%;
  float:left;
}
.project-right{
  padding-top:100px;
  height:286px;
  width: 50%;
  float:right;
}
.project-left p {
  margin: 0 0 .5em -4px;
  text-align:left;
}
.project-right p {
  margin: 0 0 .5em -4px;
  text-align:right;
}


.bottom-nav a {
  font-family: 'Playfair Display', serif;
  color: #201C1C;
  font-size: calc(.5rem + 2vw);
  line-height: 1.8;
  letter-spacing: 0.2rem;
  text-decoration:none;
}
.project-left h5 {
  font-family: 'Chivo', sans-serif;
  font-size:14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01rem;
  padding-top: 100px;
  color: #201C1C;
  text-align:left;
  opacity: .7;
}
.project-right h5 {
  font-family: 'Chivo', sans-serif;
  font-size:14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01rem;
  padding-top: 100px;
  color: #201C1C;
  text-align:right;
  opacity: .7;
}

.project-left a:hover{
  padding-left: 10px;
  transition: .1s cubic-bezier(.8, 0, 0.2, 1);
}

.project-right a:hover{
  padding-right: 10px;
  transition: .1s cubic-bezier(.8, 0, 0.2, 1);
}
.extra-margin{
 margin-bottom:100px;
}

.index-link{
 padding-right: 10px;
}

.detail{
  display: flex;
}
.details{
  padding-right: 6vw;
}
.info{
  margin-top:0;
}
.icecream{
  max-width: 100%;
}
.details:last-child{
  padding-right: 0;
}

.desktop h3{
  text-transform: none;
}

.newsletter{
  padding-left: 4%;
  padding-right:0;
}
.star{
  max-width: 45vw;
}
.poster img{
  width:70%;
}
@media (max-width: 1024px){
  .content-col{
    max-width:90%;
  }
@media (max-width: 768px){
  #project h1{
    padding-left:0;
    padding-right:30px;
    padding-top: 60px;
  }
  #project h4{
    padding-left:0;
    padding-right:30px;
    padding-bottom: 30px;
  }
  .search{
    margin-top: 5vw;
  }
  .newsletter{
    padding-left:0;
    margin-top: 5vw;
  }
  .full-bleed-image-image .content-col:first-child {
    margin-bottom: 6%;
      padding-right: 8%;
      padding-left: 4%;
      padding-top: 6%;
  }
  .full-bleed-image-image .content-col:nth-child(2) {
    margin-bottom: 6%;
      padding-right: 8%;
      padding-left: 4%;
      padding-top: 6%;
  }
  .challenge{
    padding-right:60px;
  }
 .takeaways, .challenges, .icecream {
    padding-bottom: 10px;
 }
 .bottom-nav a {
    font-size: calc(1.2rem + .5vw);
    line-height: .1.8;
 }
 .bottom-nav {
    height: 667px;
 }
 .bottom-nav h5 {
    padding-bottom: 50px;
    margin-top: auto;
    padding-top: 100px;
 }
 .bottom-nav p:last-child{
    padding-bottom: 50px;
 }

 #global-nav {
   height: 64px;
 }

 .scrolled #global-nav {
   padding: 8px 60px;
   height: 56px;
 }

 .scrolled .back-button a span {
   height: 24px;
 }

 .scrolled #global-nav .back-button img {
   width: 24px;
   height: 24px;
 }

 .nav-project {
   margin-left: 0;
 }

 #project{
   margin-top: 80px;
 }

 section,
 .full-bleed-image-text {
   margin: 0;
   padding: 0 60px;
   flex-direction: column;
 }

.proj-content{
   padding-top: 30px;
}
 .indent-left-image-text {
   margin: 0;
   padding: 0 60px;
   flex-direction: column;
 }

 .content-col:first-child {
   padding-left: 0;
   padding-right: 0;
 }
 .star,
 .content-col,
 .content-col.pct-70,
 .content-col.pct-30,
 .content-col.pct-40,
 .content-col.pct-50,
 .content-col.pct-60 {
   max-width: none;
 }

 .indent-left > img {
   margin-left: 0;
   max-width: none;
 }

 .content-col:first-child {
   padding-left: 0;
   padding-right: 0;
 }


 .indent-left-image-text .content-col:first-child {
   margin-top: 24px;
   padding-left: 0;
 }

 .image > img {
   max-width: none;
 }

 .reverse{
   display: flex;
   flex-direction: column-reverse;
 }
 .overview{
   margin-left:0;
 }
 .hide{
   display:none;
 }

 .challenges{
   padding-right: 0%;
 }
 .takeaways{
   padding-left: 0%;
   padding-right: 60px;
 }

 .center img{
   max-width: 30%;
   margin: auto;
   display: block;
 }
 .one-third{
   margin: 0;
}

.extra-spacing{
   margin-bottom:40px;
}

}

@media (max-width: 600px){
  .background-video{
    padding: 0 16px;
  }
.detail{
  display:flex;
  flex-direction: column;
}
  section.bottom-nav{
    margin:0;
    padding-left: 16px;
    padding-right: 16px;
  }

  .poster img{
    width:100%;
  }
  .challenges{
    padding-right: 60px;
    padding-left: 16px;
  }
  .image-cover{
    padding: 0 0;
  }
  .full-bleed-image-image .content-col:first-child {
    margin-bottom: 6%;
    padding-right:4%;
    padding-left: 0;
  }

  .full-bleed-image-image .content-col:nth-child(2) {
    margin-bottom: 6%;
      padding-right: 4%;
      padding-left: 0%;
      padding-top: 0%;
  }
 .takeaways, .challenges, .icecream {
    padding-bottom: 10px;
 }
 .bottom-nav a {
    font-size: 1.5rem;
    line-height: .1.8;
 }
 .bottom-nav {
    height: 667px;
 }
 .bottom-nav h5 {
    padding-bottom: 50px;
    margin-top: auto;
    padding-top: 100px;
 }
 .bottom-nav p:last-child{
    padding-bottom: 50px;
 }

 #global-nav {
   height: 64px;
 }

 .back-button svg {
   padding-right: 8px;
 }

 .back-button a span {
   height: 25px;
 }

 .back-button img {
   width: 25px;
   height: 25px;
 }

 .scrolled #global-nav {
   padding: 8px 16px;
   height: 56px;
 }

 .scrolled .back-button a span {
   height: 24px;
 }

 .scrolled #global-nav .back-button img {
   width: 24px;
   height: 24px;
 }

 .nav-project {
   margin-left: 0;
   padding-right:16px;
 }

 #project{
   margin-top: 80px;
 }

 section,
 .full-bleed-image-text {
   margin: 0;
   padding: 0 16px;
   flex-direction: column;
 }

 .indent-left-image-text {
   margin: 0;
   padding: 0 16px;
   flex-direction: column;
 }

 .content-col:first-child {
   padding-left: 0;
   padding-right: 0;
 }
 .content-col,
 .content-col.pct-70,
 .content-col.pct-30,
 .content-col.pct-40,
 .content-col.pct-50,
 .content-col.pct-60 {
   max-width: none;
 }

 .indent-left > img {
   margin-left: 0;
   max-width: none;
 }

 .content-col:first-child {
   padding-left: 0;
   padding-right: 0;
 }


 .indent-left-image-text .content-col:first-child {
   margin-top: 24px;
   padding-left: 0;
 }

 .image > img {
   max-width: none;
 }

 .reverse{
   display: flex;
   flex-direction: column-reverse;
 }
 .overview{
   margin-left:0;
 }
 .hide{
   display:none;
 }

 .challenges{
   padding-left: 16px;
   padding-right:16px;
 }
 .challenge{
   padding-left: 0%;
   padding-right:0%;
 }
 .takeaways{
   padding-left: 0%;
   padding-right:0%;
 }

 .center img{
   max-width: 30%;
   margin: auto;
   display: block;
 }
 .one-third{
   margin: 0;
}

.extra-spacing{
   margin-bottom:40px;
}

}