a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    padding: 0;
    margin: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 100%
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

body,
html {
    width: 100%;
    background: #000;
    color: #848484;
    font-family: droid-sans, sans-serif;
    font-size: 16px
}

.content-copy,
.header-desc,
p {
    max-width: 840px;
    text-align: left;
    line-height: 24px
}

@media (min-width:1024px) {

    .content-copy,
    .header-desc,
    p {
        text-align: center;
        line-height: 32px
    }
}

a {
    position: relative;
    padding-bottom: 16px;
    text-decoration: none;
    color: #848484;
    -webkit-transition: all .333s ease;
    transition: all .333s ease
}

a:after {
    position: absolute;
    width: 40%;
    height: 1px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    background: #f6871f;
    content: "";
    -webkit-transition: all .333s ease;
    transition: all .333s ease
}

a:hover {
    color: #fff;
    -webkit-transition: all .333s ease;
    transition: all .333s ease
}

a:hover:after {
    width: 100%
}

.svg-container {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    vertical-align: middle
}

.svg-container>svg {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto
}

.header-rail .svg-container>svg {
    max-width: 277px
}

.page-header {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 50vh;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-family: din-2014, sans-serif;
    z-index: 1
}

@media (min-width:1024px) {
    .page-header {
        height: 75vh;
        min-height: 900px
    }
}

.page-header .masthead {
    max-width: 970px;
    padding: 0 1em
}

.page-header .masthead span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    line-height: .3em;
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: italic
}

@media (min-width:1024px) {
    .page-header .masthead span {
        font-size: 2rem;
        filter: drop-shadow(5px 5px 10px #000);
    }
}

.page-header .masthead span:after,
.page-header .masthead span:before {
    height: 1px;
    background: #fff;
    content: ""
}

.page-header .masthead span:before {
    width: 40%
}

@media (min-width:1024px) {
    .page-header .masthead span:before {
        width: 45%
    }
}

.page-header .masthead span:after {
    width: 40%
}

@media (min-width:1024px) {
    .page-header .masthead span:after {
        width: 45%
    }
}

.page-header .masthead h1 {
    padding: .5em 0;
    border-bottom: 1px solid #fff;
    text-transform: uppercase;
    font-size: 2.4em;
    filter: drop-shadow(5px 5px 10px #000);
}

@media (min-width:1024px) {
    .page-header .masthead h1 {
        padding: 1em 0;
        font-size: 4em
    }
}

.page-header .masthead .header-cta {
    position: relative;
    margin-top: 3em
}

@media (min-width:1024px) {
    .page-header .masthead .header-cta {
        margin-top: 4em
    }
}

.page-header .masthead .header-cta:after {
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    bottom: -20px;
    left: 0;
    margin: 0 auto;
    border-top: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: ""
}

.page-header .header-logos {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    bottom: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 8em 0 1em;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .6)), to(transparent));
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent)
}

@media (min-width:1024px) {
    .page-header .header-logos {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: end;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.page-header .header-logos>div {
    width: 184px;
    padding: 0 1em;
    margin-bottom: .5em
}

.page-header .header-logos>div img {
    width: 100%
}

.header-slides {
    position: relative;
    min-height: 100%;
    overflow: hidden
}

.header-slides li {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    z-index: 0;
    will-change: transform
}

.header-slides li:nth-child(0) {
    background-image: url(../images/slides/slide_0@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_0@1x.jpg") 1x, url("../images/slides/slide_0@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_0@1x.jpg") 1x, url("../images/slides/slide_0@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(0) {
        background-position: center center
    }
}

.header-slides li:nth-child(1) {
    background-image: url(../images/slides/slide_1@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_1@1x.jpg") 1x, url("../images/slides/slide_1@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_1@1x.jpg") 1x, url("../images/slides/slide_1@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 21s;
    animation-delay: 21s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(1) {
        background-position: center center
    }
}

.header-slides li:nth-child(2) {
    background-image: url(../images/slides/slide_2@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_2@1x.jpg") 1x, url("../images/slides/slide_2@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_2@1x.jpg") 1x, url("../images/slides/slide_2@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(2) {
        background-position: center center
    }
}

.header-slides li:nth-child(3) {
    background-image: url(../images/slides/slide_3@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_3@1x.jpg") 1x, url("../images/slides/slide_3@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_3@1x.jpg") 1x, url("../images/slides/slide_3@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(3) {
        background-position: center center
    }
}

.header-slides li:nth-child(4) {
    background-image: url(../images/slides/slide_4@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_4@1x.jpg") 1x, url("../images/slides/slide_4@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_4@1x.jpg") 1x, url("../images/slides/slide_4@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(4) {
        background-position: center center
    }
}

.header-slides li:nth-child(5) {
    background-image: url(../images/slides/slide_5@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_5@1x.jpg") 1x, url("../images/slides/slide_5@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_5@1x.jpg") 1x, url("../images/slides/slide_5@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(5) {
        background-position: center center
    }
}

.header-slides li:nth-child(6) {
    background-image: url(../images/slides/slide_6@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_6@1x.jpg") 1x, url("../images/slides/slide_6@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_6@1x.jpg") 1x, url("../images/slides/slide_6@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(6) {
        background-position: center center
    }
}

.header-slides li:nth-child(7) {
    background-image: url(../images/slides/slide_7@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_7@1x.jpg") 1x, url("../images/slides/slide_7@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_7@1x.jpg") 1x, url("../images/slides/slide_7@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(7) {
        background-position: center center
    }
}

.header-slides li:nth-child(8) {
    background-image: url(../images/slides/slide_8@1x.jpg);
    background-image: -webkit-image-set(url("../images/slides/slide_8@1x.jpg") 1x, url("../images/slides/slide_8@2x.jpg") 2x);
    background-image: image-set(url("../images/slides/slide_8@1x.jpg") 1x, url("../images/slides/slide_8@2x.jpg") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation-name: pageHeaderFade;
    animation-name: pageHeaderFade;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (min-width:1024px) {
    .header-slides li:nth-child(8) {
        background-position: center center
    }
}

@-webkit-keyframes pageHeaderFade {
    0% {
        opacity: 1
    }

    16% {
        opacity: 1
    }

    20% {
        opacity: 1
    }

    22% {
        opacity: 0
    }

    92% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes pageHeaderFade {
    0% {
        opacity: 1
    }

    16% {
        opacity: 1
    }

    20% {
        opacity: 1
    }

    22% {
        opacity: 0
    }

    92% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.timeline-container {
    position: relative;
    height: 100%;
    min-height: 440px;
    padding: 6em 0;
    background: #000
}

.timeline-container:before {
    position: absolute;
    width: 32%;
    max-width: 512px;
    height: 10px;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: #f6871f;
    content: ""
}

.timeline-intro {
    margin-bottom: 10em;
    text-align: center
}

.timeline-intro h3 {
    display: inline-block;
    padding: 1em 0 .5em;
    margin-bottom: 1em;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-family: din-2014, sans-serif;
    font-size: 2em
}

@media (min-width:1024px) {
    .timeline-intro h3 {
        margin-bottom: 0;
        font-size: 50px
    }
}

.timeline-intro p {
    padding: 0 2em 2em
}

@media (min-width:1024px) {
    .timeline-intro p {
        max-width: 840px;
        margin: 0 auto
    }
}

.timeline2-intro {
    margin-bottom: 10em;
    text-align: center
}

.timeline2-intro h3 {
    display: inline-block;
    padding: 1em 0 .5em;
    margin-bottom: .25em;
    text-align: left;
    text-transform: uppercase;
    color: #fff;
    font-family: din-2014, sans-serif;
    font-size: 2em
}

@media (min-width:1024px) {
    .timeline2-intro h3 {
        margin-bottom: 0;
        font-size: 50px
    }
}

.timeline2-intro p {
    padding: 0 2em 2em;
    text-align: left
}

@media (min-width:1024px) {
    .timeline2-intro p {
        max-width: 810px;
        margin: 0 auto
    }
}

.timeline2-intro g {
    padding: 0 2em 2em;
    text-align: center
}

@media (min-width:1024px) {
    .timeline2-intro g {
        max-width: 810px;
        margin: 0 auto
    }
}

.timeline-subsection {
    margin: .6em 0;
    background-image: url(../images/timeline-graphic.png);
    background-position: left top;
    background-repeat: no-repeat
}

@media (min-width:1024px) {
    .timeline-subsection {
        display: grid;
        max-width: 1036px;
        min-height: 80vh;
        margin: 0 auto;
        background-position: center top;
        background-repeat: no-repeat;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px
    }
}

.header-rail {
    position: -webkit-sticky;
    position: sticky;
    height: 45px;
    top: -1px;
    padding-left: 4em;
    z-index: 2
}

@media (min-width:1024px) {
    .header-rail {
        min-height: 725px;
        top: 0;
        padding: 2em 4.5em 0 4em
    }
}

.header-rail .header-desc,
.header-rail .header-graph,
.header-rail .header-year {
    display: none
}

@media (min-width:1024px) {

    .header-rail .header-desc,
    .header-rail .header-graph,
    .header-rail .header-year {
        display: block
    }
}

.header-rail .header-title {
    padding: .5em 0;
    background: #000;
    font-family: minion-pro, serif;
    font-size: 2em;
    font-style: italic
}

[data-section=early] .header-rail .header-title {
    color: #f6871f
}

[data-section=romantic] .header-rail .header-title {
    /* color: #F19595 */
    color: #f6871f
}

[data-section=victorian] .header-rail .header-title {
    color: #f6871f
}

[data-section=jazz] .header-rail .header-title {
    /* color: #c38d05 */
    color: #f6871f
}

[data-section=activism] .header-rail .header-title {
    color: #f6871f
}

[data-section=alternative] .header-rail .header-title {
    color: #f6871f
}

[data-section=streetwear] .header-rail .header-title {
    color: #f6871f
}

@media (min-width:1024px) {
    .header-rail .header-title {
        padding: 1.2rem 0
    }
}

.header-rail .header-desc {
    text-align: left
}

.header-rail .header-graph {
    padding-top: 3em
}

.content-rail {
    padding-top: 2em
}

.content-block {
    padding: 0 1em 5em 4em
}

@media (min-width:1024px) {
    .content-block {
        padding-left: 9em
    }
}

@media (min-width:3000px) {
    .content2-block {
        padding-left: 9em
    }
}

.content-block .content-year {
    position: relative;
    margin-bottom: .8em;
    font-size: 22px
}

@media (min-width:1024px) {
    .content-block .content-year {
        font-size: 30px
    }
}

.content-block .content-year:before {
    position: absolute;
    width: 0;
    height: 0;
    top: 5px;
    left: -18px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #fff;
    content: ""
}

@media (min-width:1024px) {
    .content-block .content-year:before {
        top: 8px;
        left: -46px;
        border-top: 7.5px solid transparent;
        border-bottom: 7.5px solid transparent;
        border-left: 7.5px solid #fff
    }
}

/* [data-section=glory] .content-block .content-year:before {
    border-left-color: #20caf6
}

[data-section=fall] .content-block .content-year:before {
    border-left-color: #c38d05
}

[data-section=rebirth] .content-block .content-year:before {
    border-left-color: #05c481
} */

.content-block .content-media {
    padding-bottom: 1em
}

.content-block .content-media img,
.content-block .content-media svg {
    width: 100%
}

.content-block .content-copy {
    text-align: left
}