/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

img {
   max-width: 100%;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

q {
   quotes: "“" "”" "‘" "’";
}
q:before {
   content: open-quote;
}
q:after {
   content: close-quote;
}


/* ===============
    ALL: IE Fixes
   =============== */



/* ==========================================================================
   Author's custom styles
   ========================================================================== */

* {
   box-sizing: border-box;
}

body {
   font-family: "arno-pro-display", serif;
   margin: 0 auto;
   background: #fff;
}

.max-wrapper {
   margin: 0 auto;
   position: relative;
}

.max-wrapper.nav-wrapper {
   position: relative;
}

.max-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.header-container {
   background: #000;
   position: relative;
}

.header-container .max-wrapper {
   padding: .5rem 2rem;
}

.header-container h1 {
   margin: 0 0;
}

.header-right {
   position: absolute;
   right: 2rem;
   top: 1.5rem;
   font-size: .7rem;
   text-transform: uppercase;
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
}

.header-right a {
   display: inline-block;
   margin-left: 2em;
   color: #fff;
   text-decoration: none;
}

a.download {
   position: relative;
}

a.download:after {
   content: url(../img/arrow.svg);
   display: inline-block;
   vertical-align: middle;
   margin-top: -3px;
   margin-left: 7px;
   transform:rotate(180deg);
}

a.download.active:after {
   transform:rotate(0deg);
}

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

   .slide:not(.panel-closed) .header-container nav {
      opacity: 0;
   }

}

ul.nav-links {
   position: absolute;
   z-index: 100;
   left: 2rem;
   top: 100%;
   list-style-type: none;
   padding: 0 1.6rem;
   margin: 0;
   background-color: rgba(255,255,255,.6);
   font-size: .9rem;
   text-transform: uppercase;
   transition: opacity .3s;
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
}

ul.nav-links.downloads {
   text-transform: none;
   position: absolute;
   z-index: 100;
   right: 4.5rem;
   left: auto;
   top: 100%;
   height: auto;
   max-height: 0;
   overflow: hidden;
   transition: max-height .3s;
   background-color: rgba(255,255,255,.8);
}

ul.nav-links.downloads.active {
   max-height: 500px;
   transition: max-height .8s;
}

ul.nav-links li {
   line-height: 2.1rem;
   font-size: 15px;
}

ul.nav-links li span {
   color: #999;
   text-transform: uppercase;
   display: block;
   position: relative;
}

ul.nav-links li span:before {

}

ul.nav-links li:first-of-type {
   padding-top: 1.2rem;
}

ul.nav-links li:last-of-type {
   padding-bottom: 1.2rem;
}

ul.nav-links li a {
   text-decoration: none;
   color: #000;
}

ul.nav-links.downloads li a {
   margin-left: 0;
   margin-right: 3rem;
   padding-left: 1.3rem;
   background: url(../img/download.svg) left 0 no-repeat;
   white-space: nowrap;
}

ul.nav-links li a:hover {
   color: #F05700;
}

.slide {
   position: relative;
   min-height: 100vh;
   overflow: hidden;
}

.no-js .slide {
   margin-bottom: 6px;
   box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.slide .info-panel {
   /*position: absolute;*/
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: calc(439px - 6rem);
   /*height: calc(100% - 4rem);*/
   height: 100%;
   background-color: rgba(0,0,0,.2);
   color: #000;
   z-index: 1000;
   padding: 4.5rem 3rem 0;
   font-size: 15px;
   line-height: 26px;
   transform: translate(0,0);
   transition: transform .3s;
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
}

.slide .info-panel a {
   color: #000;
}

html.animations-go .slide .info-panel {
   display: block;
}

.slide .info-panel.white,
.slide .info-panel.white a {
   color: #fff;
}

.slide.art_1 .info-panel {
   height: 100%;
}

.slide.panel-closed .info-panel {
   transform: translate(-100%,0);
}

.slide.art_1 .info-panel {
   background-color: rgba(30,78,168,.9);
}

.slide.art_2 .info-panel {
   background-color: rgba(235,39,52,.9);
}

.slide.art_3 .info-panel {
   background-color: rgba(99,183,51,.9);
}

.slide.art_4 .info-panel {
   background-color: rgba(98,107,114,.9);
}

.slide.art_5 .info-panel {
   background-color: rgba(83,69,139,.9);
}

.slide.art_6 .info-panel {
   background-color: rgba(216,200,80,.9);
}

.slide.art_7 .info-panel {
   background-color: rgba(22,136,186,.9);
}

.slide.art_8 .info-panel {
   background-color: rgba(255,85,34,.9);
}

.slide.art_9 .info-panel {
   background-color: rgba(178,15,27,.9);
}

.slide .info-panel .close-info {
   position: absolute;
   bottom: 2rem;
   left: 3rem;
}

@media only screen
and (max-height : 641px)  {

   .slide .info-panel .close-info {
      bottom: auto;
      left: auto;
      top: 1rem;
      right: 1rem;
   }

   .slide .info-panel .close-info svg text {
      display: none;
   }

}

.slide.art {
   background-color: #eee;
}

.slide .about-art {
   position: absolute;
   bottom: 8rem;
   left: 4rem;
   width: 68px;
   height: 75px;
   transition: opacity .3s;
}

.slide .about-art a {
   text-decoration: none;
}

.slide.white .about-art svg .color-fill,
.info-panel.white svg .color-fill  {
   fill: white;
}

.slide.white .about-art svg .color-stroke,
.info-panel.white svg .color-stroke  {
   stroke: white;
}

.slide.art_1 .about-art {
   bottom: 4rem;
}

.slide:not(.panel-closed) .about-art {
   opacity: 0;
}

.no-js .slide .about-art {
   opacity: 0;
}

.slide.art {
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: right top;
   padding-bottom: 4rem;
}

/* ios devices aren't displaying the cover/fixed bg images */
@media only screen
and (max-device-width : 1024px)  {

   .slide.art {
      background-size: cover;
      background-attachment: inherit;
   }

}

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

   .slide.art.art_1 {
      background-image: url(../img/art/art_1_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_1 {
      background-image: url(../img/art/art_1_crop.jpg);
      background-position: left top;
   }

}

.slide.art.art_1 #overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url(../img/art/art_1_overlay.png);
   background-size: cover;
   background-position: top right;
}

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

   .slide.art.art_2 {
      background-image: url(../img/art/art_2_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_2 {
      background-image: url(../img/art/art_2_crop.jpg);
      background-position: left top;
   }

}

.slide.art:before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
}

.slide.art.art_2:before {
   opacity: 0.45;
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 1%, rgba(0,0,0,0.00) 8%, #000000 100%);
}

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

   .slide.art.art_3 {
      background-image: url(../img/art/art_3_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_3 {
      background-image: url(../img/art/art_3_crop.jpg);
      background-position: left top;
   }

}

.slide.art.art_3:before {
   opacity: 0.45;
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 1%, rgba(0,0,0,0.00) 8%, #000000 100%);
}

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

   .slide.art.art_4 {
      background-image: url(../img/art/art_4_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_4 {
      background-image: url(../img/art/art_4_crop.jpg);
      background-position: left top;
   }

}

.slide.art.art_4:before {
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 32%, rgba(255,255,255,0.00) 32%, #FFFFFF 100%);
}

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

   .slide.art.art_5 {
      background-image: url(../img/art/art_5_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_5 {
      background-image: url(../img/art/art_5_crop.jpg);
      background-position: left top;
   }

}

.slide.art.art_5:before {
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 32%, rgba(255,255,255,0.00) 32%, #FFFFFF 100%);
}

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

   .slide.art.art_6 {
      background-image: url(../img/art/art_6_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_6 {
      background-image: url(../img/art/art_6_crop.jpg);
      background-position: left top;
   }

}

.slide.art.art_6:before {
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 32%, rgba(255,255,255,0.00) 32%, #FFFFFF 100%);
}

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

   .slide.art.art_7 {
      background-image: url(../img/art/art_7_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_7 {
      background-image: url(../img/art/art_7_crop.jpg);
      background-position: left top;
   }

}

.slide.art.art_7:before {
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 32%, rgba(255,255,255,0.00) 32%, #FFFFFF 100%);
}

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

   .slide.art.art_8 {
      background-image: url(../img/art/art_8_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_8 {
      background-image: url(../img/art/art_8_crop.jpg);
      background-position: left top;
   }

   .slide.art.art_8:before {
      background-color: rgba(0, 0, 0, .1);
   }

   .slide.art.art_8 .top-copy {
      color: #fff;
   }

   .slide.art.art_8 .inset-text {
      color: #fff;
      border-color: #fff;
   }

}

.slide.art.art_8:before {
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 32%, rgba(255,255,255,0.00) 32%, #FBC023 100%);
}

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

   .slide.art.art_9 {
      background-image: url(../img/art/art_9_full.jpg);
   }

}

@media only screen and (max-width: 767px) {

   .slide.art.art_9 {
      background-image: url(../img/art/art_9_crop.jpg);
      background-position: left top;
   }

}

.slide.art.art_9:before {
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 32%, rgba(255,255,255,0.00) 32%, #FFFFFF 100%);
}

.slide.art.art_10 {
   background-size: contain;
   background-color: #000;
   background-position: left;
   background-image: url(../img/art/art_10_full.jpg);
}

.slide.art.art_10:before {
   background-image: linear-gradient(89deg, rgba(0,0,0,0.00) 1%, rgba(0,0,0,0.00) 8%, #000000 100%);
}

.slide.art.art_1 .primary-title {
   position: absolute;
   top: 140px;
   left: 50vw;
   font-weight: normal;
   font-size: 26px;
   text-transform: uppercase;
   margin: 0;
   padding-top: 1rem;
   font-weight: 800;
}

.slide.art.art_1 .primary-title:after {
   content: '';
   position: absolute;
   top: 0;
   let: 0;
   width: 45%;
   border-top: 1px solid #000;
}

.slide.art.art_1 .primary-title span {
   display: block;
   font-size: 22px;
   font-family: "arno-pro-display", serif;
   letter-spacing: .1rem;
   font-weight: 600;
}

.slide.art.art_1 .secondary-title {
   position: absolute;
   bottom: 13rem;
   right: -114px;
   font-weight: 600;
   font-size: 74px;
   transform: rotate(270deg);
   margin: 0;
   font-family: "arno-pro-display", serif;
}

.slide.info {
   background-color: #2C55A3;
}

.slide.text {
   background: #2C55A3;
   color: #fff;
   font-size: 1.2rem;
   padding: 10rem 8rem 4rem;
}

.slide.text p {
   font-size: 26px;
   margin: 0 0 1.6rem;
}

.slide.text p.lede,
.slide.text b {
   font-weight: 600;
}

.slide.text p:not(.lede) {
   color: rgba(255,255,255,.75);
}

.slide.text .column {
   width: 45%;
   float: left;
}

.slide.text .column:first-of-type {
   margin-right: 6rem;
}

.slide .art-stump {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 45%;
   height: 4rem;
   background: #fff;
}

.slide .subnav {
   position: absolute;
   top: 0;
   left: 55%;
   font-size: 16px;
   text-transform: uppercase;
   background: #000;
   color: #fff;
   text-decoration: none;
   padding: .1rem .4rem;
   font-family: 'Roboto Condensed', sans-serif;
}

.slide .art-copy {
   margin-left: 55%;
   margin-top: 176px;
   color: #000;
}

.slide .top-copy {
   height: 560px;
}

.slide.art_2 .art-copy,
.slide.art_3 .art-copy,
.slide.art_10 .art-copy {
   color: #fff;
}

.slide.art_10 {
   font-family: 'Roboto', sans-serif;
}

.slide .art-copy .slide-title {
   font-size: 70px;
   font-weight: normal;
   line-height: 4rem;
   margin: 0;
   font-family: "arno-pro-display";
   font-weight: 600;
}

.slide.art_10 .art-copy .slide-title {
   font-size: 18px;
   font-weight: 600;
   text-transform: uppercase;
   margin-bottom: 0;
   line-height: 2rem;
}

.slide .slide-title span {
   display: block;
}

.slide .art-copy .main-text {
   width: 26rem;
   font-size: 26px;
   line-height: 2rem;
   font-weight: 600;
}

.slide.art_10 .art-copy p {
   font-weight: 300;
   width: 440px;
}

.slide.art_10 .art-copy p a {
   color: #fff;
}

.slide .art-copy .inset-text {
   width: 16rem;
   height: 200px;
   font-size: 15px;
   line-height: 1.5rem;
   border-left: 1px solid #000;
   padding-left: 1rem;
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   margin: 0;
}

.slide.art_2 .art-copy .inset-text,
.slide.art_3 .art-copy .inset-text {
   border-left: 1px solid #fff;
}

.slide.quote {
   top: -4rem;
}

.slide.quote blockquote {
   padding-left: 0;
   padding-right: 2rem;
   /* width: 540px; */
   /* max-width: 45%; */
   /* display: inline-block; */
   /* vertical-align: top; */
   position: absolute;
   /* right: calc(100% + 2rem); */
   right: calc(100% - 55%);
   top: 20rem;
   max-width: 570px;
}

@media only screen and (max-width: 1289px) {

   .slide.quote blockquote {
      left: 0;
   }

}

.slide.quote blockquote q {
   font-size: 46px;
   font-weight: 600;
   display: block;
   text-indent: -1rem;
   line-height: 1.2em;
   max-width: 540px;
}

.slide.quote blockquote footer {
   position: relative;
   font-size: 23px;
   color: #969696;
   margin-top: 1rem;
   padding-top: 1rem;
   font-weight: 600;
}

.slide.quote blockquote footer a {
   color: #969696;
   text-decoration: none;
   border-bottom: 1px solid #969696;
   display: inline-block;
   line-height: 0.85;
   text-shadow:
   2px 2px white,
   2px -2px white,
   -2px 2px white,
   -2px -2px white;
}

.slide.quote.art_2 blockquote footer a {
   border-color: #EB2734;
}

.slide.quote.art_2 blockquote footer a:hover {
   color: #EB2734;
}

.slide.quote.art_3 blockquote footer a {
   border-color: #63B733;
}

.slide.quote.art_3 blockquote footer a:hover {
   color: #63B733;
}

.slide.quote.art_4 blockquote footer a {
   border-color: #626B72;
}

.slide.quote.art_4 blockquote footer a:hover {
   color: #626B72;
}

.slide.quote.art_6 blockquote footer a {
   border-color: #D8C850;
}

.slide.quote.art_6 blockquote footer a:hover {
   color: #D8C850;
}

.slide.quote.art_7 blockquote footer a {
   border-color: #1688BA;
}

.slide.quote.art_7 blockquote footer a:hover {
   color: #1688BA;
}

.slide.quote.art_8 blockquote footer a {
   border-color: #FF5522;
}

.slide.quote.art_8 blockquote footer a:hover {
   color: #FF5522;
}

.slide.quote blockquote footer cite {
   display: block;
   text-transform: uppercase;
   font-style: normal;
}

.slide.quote blockquote footer span.title {
   display: block;
}

.slide.quote blockquote footer:before {
   content: '';
   position: absolute;
   top: 0;
   left: -6rem;
   border-top: 1px solid #969696;
   width: calc(100px + 6rem);
}

.slide.quote .photo-block {
   margin-top: 4rem;
   display: inline-block;
   vertical-align: top;
   width: 100%;
   padding-left: 55%;
   position: relative;
}

.slide.quote .photo-block p {
   max-width: 400px;
   font-size: 15px;
   line-height: 1.8em;
   font-family: 'Roboto', sans-serif;
}

.slide.quote .photo-block p a {
   color: inherit;
   border-bottom: 1px solid #969696;
   text-decoration: none;
}

.slide.quote.art_6 {
   mine-height: 910px;
}

.slide.quote.art_6 .photo-block p a {
   border-color: #969696;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 480px) {


}

@media only screen and (max-width: 768px) {

   .header-container {
   }

   .header-container h1 {
      max-width: 85%;
      padding-left: 0;
   }

   .header-container nav {
      position: absolute;
      background: transparent;
      top: 3.8rem;
      right: 0;
      left: auto;
      width: 100%;
      cursor: pointer;
      z-index: 100;
      background: rgba(255,255,255,.9);
   }

   .header-container nav:before {
      content: 'TOC';
      position: absolute;
      top: -2.45rem;
      right: 2rem;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      font-weight: 300;
      font-size: 12px;
      color: #fff;
      font-family: 'Roboto', sans-serif;
   }

   .header-container nav.active {
      min-height: 100vh;
   }

   ul.nav-links {
      height: 0;
      z-index: 1000;
      width: 100%;
      left: 0;
      padding: 0 2rem;
      overflow: hidden;
      background: transparent;
   }

   .active ul.nav-links {
      height: auto;
      position: static;
   }

   .active ul.nav-links.downloads {
      height: auto;
      max-height: 100%;
      position: static;
      background-color: transparent;
   }

   .header-right {
      display: none;
   }

   .slide.art {
      min-height: 0;
   }

   .slide.art:before {
      background-image: none ! important;
      background-color: rgba(255,255,255,.45);
   }

   .slide.art.art_2:before,
   .slide.art.art_3:before {
      background-color: rgba(0,0,0,.45);
   }

   .slide.art .top-copy {
      height: auto;
   }

   .slide.art.art_1 .primary-title {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      margin-top: 10rem;
      margin-left: 2rem;
      width: auto;
   }

   .slide.art.art_1 .secondary-title {
      position: static;
      bottom: auto;
      top: auto;
      right: auto;
      margin-left: 2rem;
      margin-bottom: 8rem;
      font-weight: 600;
      font-size: 64px;
      transform: rotate(0);
      line-height: 4rem;
   }

   .slide.text {
      padding: 4rem 2rem;
   }

   .slide.text p {
      font-size: 20px;
   }

   .slide.text .column {
      width: 95%;
      margin-right: 0;
      float: none;
   }

   .slide.art:not(.art_1) {
      padding: 24rem 2rem 2rem;
   }

   .slide .art-copy {
      position: relative;
      top: auto;
      left: auto;
      margin-left: 0;
      margin-top: 0;
   }

   .slide .subnav {
      position: relative;
      top: 0;
      left: 0;
      z-index: 100;
      display: inline-block;
      margin-bottom: 2rem;
   }

   .slide .slide-title span {
      text-indent: 0 ! important;
      font-size: 43px;
      line-height: 3rem;
   }

   .slide .art-copy .main-text,
   .slide.quote .photo-block p {
      width: 100%;
   }

   .slide .art-copy .inset-text {
      width: 80%;
      min-height: 0;
      height: auto;
      font-size: 15px;
      line-height: 1.5rem;
      border-left: 1px solid #000;
      padding-left: 1rem;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      position: static;
      margin: 0;
   }

   .slide .about-art {
      position: relative;
      top: auto;
      left: auto;
      bottom: auto;
      margin-top: 3rem;
      margin-bottom: 3rem;
   }

   .slide.art_1 .about-art {
      margin-left: 2rem;
   }

   .slide.art.art_10 {
      padding-top: 0;
      background-size: contain;
      background-color: #000;
      background-position: left;
      background-image: none;
   }

   .slide.art.art_10:before {
      position: static;
      display: block;
      height: 36vh;
      width: calc(100% + 4rem);
      margin-bottom: 2rem;
      margin-left: -2rem;
      background-image: url(../img/art/art_10_full.jpg) !important;
      background-size: contain;
      background-repeat: no-repeat;
      background-color: transparent;
   }

   .slide.art_10 .art-copy p {
      width: 100%;
   }

   .art-stump {
      display: none;
   }

   .slide.quote {
      top: 0;
   }

   .slide.quote blockquote {
      display: block;
      width: 100%;
      margin-top: 3rem;
      position: static;
      padding-right: 0;
      padding-left: 0;
      margin-left: 0;
   }

   .slide.quote blockquote q {
      font-size: 25px;
      text-indent: -.6rem;
      margin-bottom: 1.5rem;
   }

   .slide.quote blockquote footer:before {
      display: none;
   }

   .slide.quote blockquote footer {
      padding-top: 0;
      padding-left: .65rem;
      border-left: 1px solid #C3C3C3;
   }

   .slide.quote blockquote footer cite a {
      line-height: 2rem;
   }
   .slide.quote .photo-block {
      display: block;
      width: 85%;
      position: static;
      margin: 2rem 1rem 2rem;
      padding: 0;
   }

   .slide.quote .photo-block p {
      max-width: 100%;
   }

   .slide .info-panel {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
   }

   .slide .info-panel img {
      max-height: 30vh;
      display: block;
   }

   .slide .info-panel .close-info {
      left: 1rem;
   }

   .slide.art:not(.art_1) {
      padding-left: 1em;
      padding-right: 1rem;
   }

}

/* ANIMATIONS */

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

   html:not(.no-js) [data-group] {
      opacity: 0;
   }

   html:not(.no-js) [data-group=text] {
      transform: translateY(80px);
   }

   html:not(.no-js) [data-group=art] {
      transform: translateY(160px);
   }

   html:not(.no-js) [data-group].slide-in {
     animation: slide-in .8s ease forwards;
   }

   @keyframes slide-in {
     to { transform: translateY(0); opacity: 1; }
   }

}