:root {
	--bg-color: #C7CED6;
	--color-accent: #CC574F;
	--color-black: #1F2021;
	--color-border: #000;
	--color-text: #222;
	--color-link: #555;
	--color-link-hover: inherit;
	--ease-in-out: cubic-bezier(0.77, 0, 0.125, 1);
	--ease-in-out-back: cubic-bezier(.175, .885, .32, 1.275);
	--ease-out: cubic-bezier(0.49, 0.51, 0.02, 1);
	--font-headline: 'Brown', system-ui, sans-serif;
	--font-sans: 'Brown';
	--font-mono: 'InputMono', 'Courier New';
}

@font-face {
  font-family: 'Brown';
  src: url('//cdn2.propercloth.com/css/fonts/brown/Brown-Light.eot'); /* IE9 Compat Modes */
  src: url('//cdn2.propercloth.com/css/fonts/brown/Brown-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//cdn2.propercloth.com/css/fonts/brown/Brown-Light.woff2') format('woff2'), /* Moderner Browsers */
       url('//cdn2.propercloth.com/css/fonts/brown/Brown-Light.woff') format('woff'), /* Modern Browsers */
       url('//cdn2.propercloth.com/css/fonts/brown/Brown-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('//cdn2.propercloth.com/css/fonts/brown/Brown-Light.svg#8609e2542bae7de88e6a601a6343ee60') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  200;
  unicode-range: U+000-5FF; /* Latin glyphs */
}

@font-face {
  font-family: 'Brown';
  src: url('//cdn2.propercloth.com/css/fonts/brown/Brown-Regular.eot'); /* IE9 Compat Modes */
  src: url('//cdn2.propercloth.com/css/fonts/brown/Brown-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//cdn2.propercloth.com/css/fonts/brown/Brown-Regular.woff2') format('woff2'), /* Moderner Browsers */
       url('//cdn2.propercloth.com/css/fonts/brown/Brown-Regular.woff') format('woff'), /* Modern Browsers */
       url('//cdn2.propercloth.com/css/fonts/brown/Brown-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('//cdn2.propercloth.com/css/fonts/brown/Brown-Regular.svg#e8bb100efb3d47ffea678fdff45642f8') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  500;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
    font-family:"InputMono";
    src:url("fonts/InputMono-Regular.woff2") format("woff2"),url("fonts/InputMono-Regular.woff") format("woff"),url("fonts/InputMono-Regular.otf") format("opentype");
    font-style:normal;font-weight:400;
}

* {
	padding: 0;
	margin: 0;
}

html {
	font-size: 16px;
}

body {
	background: #C7CED6;
	font-family: 'Brown';
	-webkit-font-feature-settings: 'salt' 1, 'tnum' 1;
	        font-feature-settings: 'salt' 1, 'tnum' 1;
	font-size: 1em;
	font-weight: 100;
	color: #222;
	padding: 3rem 0 3rem 8rem;
	transition: 3s ease;
	scroll-behavior: smooth;
}

.texture {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(marble.jpg) no-repeat 50% 50% / cover;
	opacity: 0.5;
	z-index: -2;
	will-change: opacity;
	transition: opacity 1s ease;
	/*display: none;*/
}
.texture-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #666573;
	opacity: 0.1;
	z-index: -3;
	will-change: opacity;
	transition: opacity 1s ease;
	/*display: none;*/
}

article {
	position: relative;
	z-index: 1;
}

/*.is-scrolled {
	background: #666573;
}*/
.is-scrolled .texture {
	opacity: 0.15;
}
.is-scrolled .texture-bg {
	opacity: 1;
}

h1, h2, h3, h4, h5 {
	font-weight: 400;
	font-size: 1.4em;
	line-height: 1.2;
	margin-bottom: 2rem;
}

.s1 {
	font-size: 3.2em;
	font-size: calc(100% + 2vw + 1vmin);
	font-weight: 100;
	position: relative;
	left: -3px;
}

p, li {
	font-size: 1.4em;
	margin-bottom: 2rem;
	line-height: 1.6;
}
li {
	margin-bottom: 0.5rem;
	font-size: 1.2em;
	line-height: 1.6;
	color: #777;
}
p.small {
	font-size: 1em;
}

.mono {
	font-size: 13.5px;
	letter-spacing: 0.5px;
	font-family: 'InputMono', 'Courier New';
	font-weight: 400;
	-webkit-font-feature-settings: 'zero' 1;
	        font-feature-settings: 'zero' 1;
}
.caps {
	text-transform: uppercase;
	letter-spacing: 2px;
}

input,
button,
select {
	font-family: inherit;
}

a {
	/*color: var(--color-link);*/
	color: inherit;
}

a:hover {
	color: inherit;
}

figure {
	padding: 0;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

main {
	padding: 0;
}

header {
	padding-left: 8rem;
	position: fixed;
	top: 2.5rem;
	left: 0;
	width: 100%;
	padding-left: 16rem;
	z-index: 0;
}
header a {
	text-decoration: none;
}
header h1 span {
	opacity: 0;
	font-size: 1rem;
	margin-left: 1rem;
	transition: .2s ease;
}
.is-scrolled header h1 {
	color: #fff;
}
.is-scrolled header h1 span {
	color: #fff;
	opacity: 0.5;
}

.years {
	position: absolute;
	left: 0;
	top: 57%;
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
	margin-left: 4px;
}
.years span {
	transition: 1s cubic-bezier(0.77, 0, 0.125, 1);
	display: inline-block;
	-webkit-transform: translate3d(0,-80px,0);
	        transform: translate3d(0,-80px,0);
}
.is-ready .years span {
	-webkit-transform: translate3d(0,0px,0);
	        transform: translate3d(0,0px,0);
}
.go-down {
	display: block;
	position: absolute;
	top: 75vh;
	left: 0rem;
	background: white url(caret-down.svg) no-repeat 50% 52% / 14px 14px;
	border-radius: 50%;
	height: 3rem;
	width: 3rem;
	margin-left: -1.5rem;
	z-index: 9999;
	cursor: pointer;
}
.go-down:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0 4px 36px rgba(0,0,0,.3);
	border-radius: 50%;
	height: 3rem;
	width: 3rem;
	z-index: 9998;
	opacity: 0.3;
	transition: .4s ease;
}
.go-down:hover:after {
	opacity: 1;
}

.panel {
	position: relative;
	margin-top: 4rem;
	margin-bottom: 16rem;
	padding: 4rem 0 4rem 8rem;
	background: white;
	box-shadow: 0 0 96px rgba(0,0,0,.1);
}

.panel--first {
	position: relative;
	padding-bottom: 0;
}

.panel--first h2 {
	margin-bottom: 0;
}

.section--intro {
	margin: 3rem 0 3rem 0;
	padding: 4rem;
	background: var(--color-black);
	background: #010001;
	min-height: calc(100vh - 22rem);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10rem;
	color: #fff;
	/*transition: transform 1s;*/
	will-change: transform;
	position: relative;
}

/*@keyframes logo {
	0% { background-position: 0 0px; }
  100% { background-position: 0 -5200px; }
}
.logo {
	width: 800px;
	height: 400px;
	background: url('logo.png') no-repeat 0 0px;
	animation: logo 1s steps(13) infinite alternate;
	animation-delay: 1s;
	z-index: 9;
	transform: scale(0.66);
}*/

@-webkit-keyframes logo {
	0% { background-position: 0 0px; }
  /*100% { background-position: 0 -18400px; }*/
  100% { background-position: 0 -10000px; }
}

@keyframes logo {
	0% { background-position: 0 0px; }
  /*100% { background-position: 0 -18400px; }*/
  100% { background-position: 0 -10000px; }
}
.logo {
	width: 400px;
	height: 400px;
	background: url('logo-sprite2.png') no-repeat 0 0;
	-webkit-animation: logo 1.25s steps(25) infinite alternate;
	        animation: logo 1.25s steps(25) infinite alternate;
	z-index: 9;
	/*transform: scale(0.66);*/
}

.img-grid {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-perspective: 2px;
	        perspective: 2px;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-perspective-origin: 50% 0%;
	        perspective-origin: 50% 0%;
	height: 100%;
	overflow: hidden;
	/*border: 2px solid blue;*/
}
.img-grid img {
	display: block;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	/*width: 33.3%;*/
	/*opacity: 0;*/
	/*transition: opacity .5s ease;*/
	/*display: none;*/
}
.img-grid img.is-visible {
	opacity: 1;
}
/*.img-grid img:nth-child(1) {
	width: 30%;
	top: 20%;
	left: 8%;
	transition-delay: 0s;
}
.img-grid img:nth-child(2) {
	width: 20%;
	top: 5%;
	left: 50%;
	z-index: 2;
	transition-delay: .25s;
}
.img-grid img:nth-child(3) {
	width: 20%;
	top: -2%;
	left: 75%;
	transition-delay: .5s;
}
.img-grid img:nth-child(4) {
	width: 30%;
	top: 75%;
	left: 0%;
	transition-delay: .75s;
}
.img-grid img:nth-child(5) {
	width: 25%;
	top: 52%;
	left: 66%;
	transition-delay: 1s;
}
.img-grid img:nth-child(6) {
	width: 25%;
	left: 80%;
	top: 75%;
	t*/ransition-delay: 1.25s;

.section--timeline, .section--next {
	padding: 4rem 0 4rem 0;
}

.section--ten {
	padding: 4rem 0;
}

.timeline__intro {
	margin-bottom: 12rem;
}

.timeline__intro h2 {
	margin-bottom: 6rem;
	position: relative;
	z-index: 1;
	background: linear-gradient(to right, #C2C6D0, #737281);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.timeline__intro h2 ~ p {
	margin-bottom: 6rem;
	max-width: 18em;
	position: relative;
	z-index: 1;
}

/*.timeline__intro p:not(.mono) {
 -webkit-transform: translate3d(0,100px,0);
         transform: translate3d(0,100px,0);
 transition: 1s cubic-bezier(0.77, 0, 0.125, 1) .2s;
}*/

.timeline__intro p:nth-child(4) {
	margin-left: 50%;
	margin-top: -4rem;
	/*transition: 1s cubic-bezier(0.77, 0, 0.125, 1) .4s;*/
}

/*.timeline__intro.is-visible p {
 -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
}*/

.intro--shirt {
	position: absolute;
	right: 0;
	top: 0;
	width: 45%;
	z-index: 0;
	display: none;
}

.timeline__event {
	position: relative;
	margin-bottom: 20rem;
	/*margin-bottom: 33vh;*/
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	transition: 2s cubic-bezier(0.49, 0.51, 0.02, 1);
	/*transform: translateY(50px);*/
}
.timeline__event:last-child {
	margin-bottom: 5rem;
}
.timeline__event.--full {
	width: 100%;
	flex: 1 0 auto;
}
.timeline__event.--full .event__info {
	width: 100%;
	padding-right: 0;
}
.timeline__event.--major {
	transition: 2s cubic-bezier(0.49, 0.51, 0.02, 1);
	/*transform: translateY(100px);*/
}
.timeline__event .event__info {
	transition: 2s cubic-bezier(0.49, 0.51, 0.02, 1);
	/*opacity: 0.5;*/
}

.timeline__event .date {
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #222;
}

p {
	max-width: 24em;
}

.timeline__event p {
	color: #777;
}
.timeline__event p span {
	color: #000;
}

.event__info {
	padding-right: 4rem;
}

.event__images {
	position: relative;
	will-change: transform;
}
.event__images--bg {
	position: absolute;
	z-index: -1;
	left: -14rem;
	top: -6rem;
	will-change: transform;
}

.timeline__event ul {
	list-style: disc outside none;
	margin-left: -1.5rem; 
	padding-left: 1rem;
	max-width: 30em;
}
.timeline__event li {
	padding-left: 0.5rem;
}

.--major .event__images img {
	margin-top: -8rem;
	/*-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);*/
	transition: .75s cubic-bezier(0.77, 0, 0.125, 1) .15s;
}
.event__images--bg img {
	/*-webkit-clip-path: polygon(0 0, 0% 0, 0 100%, 0 100%);
	        clip-path: polygon(0 0, 0% 0, 0 100%, 0 100%);*/
	transition: .75s cubic-bezier(0.77, 0, 0.125, 1) .075s;
}
.event__images span {
	content: '';
	position: absolute;
	top: 4rem;
	left: 4rem;
	right: 0;
	bottom: -4rem;
	background: #E3E6EA;
	opacity: 0.2;
	margin-top: 5rem;
	z-index: -1;
	-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	transition: 1s cubic-bezier(0.77, 0, 0.125, 1) .2s;
}
.timeline__event.--full figure div {
	background: #70707D;
}
.timeline__event.--full img {
	min-height: 500px;
	-o-object-fit: cover;
	   object-fit: cover;
}
.timeline__event.--full figure img, .timeline__event.--full figure iframe {
	transition: 0.5s cubic-bezier(0.77, 0, 0.125, 1) .1s;
}


.timeline__event .date:before, .timeline__event .date:after {
	content: '';
	position: absolute;
	top: 0;
	left: auto;
	display: block;
	background: #222;
}
.timeline__event .date:before {
	top: 0.5rem;
	height: 1px;
	width: 6rem;
	left: auto;
	right: 100%;
	margin-right: 2rem;
	-webkit-clip-path: polygon(0 0, 5% 0, 5% 100%, 0 100%);
	        clip-path: polygon(0 0, 5% 0, 5% 100%, 0 100%);
	transition: .25s cubic-bezier(0.49, 0.51, 0.02, 1) .3s;
}
.timeline__event .date:after {
	height: 1rem;
	width: 1rem;
	border-radius: 50%;
	top: -0rem;
	right: 100%;
	margin-right: 7.5rem;
	border: 1px solid rgba(255,255,255,0.5);
	-webkit-transform: scale(0.25);
	        transform: scale(0.25);
	transition: .25s cubic-bezier(.175, .885, .32, 1.275) .3s;
}
.timeline__event.--major .date:after {
	height: 2rem;
	width: 2rem;
	top: -0.5rem;
	right: 100%;
	margin-right: 7rem;
	transition: .3s cubic-bezier(.175, .885, .32, 1.275) .3s;
}

.timeline__event.is-visible {
	/*transform: translateY(0);*/
}
.timeline__event.is-visible .event__info {
	opacity: 1;
	-webkit-transform: translate3d(0,0%,0);
	        transform: translate3d(0,0%,0);
}
.timeline__event.is-visible .date:before {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.timeline__event.is-visible .date:after {
	-webkit-transform: scale(1);
	        transform: scale(1);
}
.timeline__event.--major.is-visible .event__images img {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.timeline__event.is-visible .event__images--bg img {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.timeline__event.is-visible .event__images span {
	opacity: 1;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.audio {
	margin: 4rem 0 2rem;
	display: flex;
	align-items: center;
}
.audio__play {
	display: inline-block;
	height: 3.5rem;
	width: 3.5rem;
	margin-right: 1.5rem;
	position: relative;
	cursor: pointer;
	transition: .5s ease;
}
.audio__play:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	border-radius: 6px;
	border: 2px solid #000;
	opacity: 0.3;
	-webkit-transform: scale(0.95);
	        transform: scale(0.95);
	transition: .25s cubic-bezier(.175, .885, .32, 1.275);
}
.audio__play:after {
	content: '';
	position: absolute;
	top: 1.15rem;
	left: 1.4rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent #222;
	opacity: 0.3;
	transition: .25s cubic-bezier(0.49, 0.51, 0.02, 1);
}
.audio__play:hover:before, .audio__play.is-playing:before {
	/*transform: rotate(45deg);*/
	/*opacity: 0.6;*/
	-webkit-transform: scale(1);
	        transform: scale(1);
	border-radius: 8px;
}
.audio__play:hover:after, .audio__play.is-playing:after {
	/*transform: translateX(2px);*/
	/*opacity: 1;*/
}
.audio__play.is-playing {
	box-shadow: 0 8px 36px rgba(0,0,40,.3);
}
.audio__play.is-playing:before, .audio__play.is-playing:after {
	-webkit-animation: play-pulse 2.5s linear infinite;
	        animation: play-pulse 2.5s linear infinite;
}
.audio__play.is-playing span i {
	-webkit-animation: dots 2.5s linear infinite;
	        animation: dots 2.5s linear infinite;
}
@-webkit-keyframes play-pulse {
	0% { opacity: 1; }
	50% { opacity: 0.2; }
  100% { opacity: 1; }
}
@keyframes play-pulse {
	0% { opacity: 1; }
	50% { opacity: 0.2; }
  100% { opacity: 1; }
}

.audio p {
	font-size: 12px;
	line-height: 1.8;
	margin: 0;
}
.audio span {
	display: block;
}

.badge.badge--stars {
	transition: .3s ease .3s;
	opacity: 0;
}
.is-visible .badge.badge--stars {
	opacity: 1;
}
.badge--stars a {
	position: absolute;
	right: 2rem;
	top: -8rem;
	background: #000;
	color: #aaa;
	text-align: center;
	height: 9rem;
	width: 9rem;
	border-radius: 50%;
	display: flex;
	text-decoration: none;
	align-content: center;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 12px;
	line-height: 1.5;
	font-family: 'InputMono', 'Courier New';
	transition: .25s cubic-bezier(0.77, 0, 0.125, 1);
}
.badge--stars span {
	font-size: 16px;
	letter-spacing: 3px;
	margin-bottom: 0.25rem;
	color: #fff;
	width: 100%;
}

.lookbook-images {
	margin: 4rem -4rem 4rem -8rem;
	display: flex;
	position: relative;
}
.lookbook-images figure {
	flex: 1 1 auto;
	margin-left: 4px;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	transition: 1s cubic-bezier(0.77, 0, 0.125, 1) .2s;
}
.lookbook-images figure:nth-child(1) { transition-delay: 0s }
.lookbook-images figure:nth-child(2) { transition-delay: .2s }
.lookbook-images figure:nth-child(3) { transition-delay: .4s }
.lookbook-images figure:nth-child(4) { transition-delay: .6s }
.lookbook-images figure:first-child {
	margin-left: 0;
}
.lookbook-images img {

}
.bts {
	position: absolute;
	right: 0;
	text-align: right;
	top: 100%;
	margin-right: 2rem;
	margin-top: -4rem;
	font-size: 12px;
	line-height: 1.8;
	padding-right: 2rem;
	padding-top: 6rem;
	border-right: 1px solid #aaa;
	mix-blend-mode: multiply;
}
.bts a {
	color: #333;
	text-decoration: none;
}
.bts span {
	color: #777;
}
.is-visible .lookbook-images figure {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.wide-feat {
	/*background: #8C939D;*/
	background: linear-gradient(to right, #9096a9, #606677);
	margin: 12rem 0 4rem -8rem;
	padding: 4rem 0 8rem 8rem;
}

.feat--showroom > div {
	display: flex;
	margin-top: -12rem;
}
.feat--showroom figure {
	padding-right: 4rem;
	width: 50%;
}
.feat--showroom figure > div {
	width: 100%;
}
.feat--showroom figure iframe {
	width: 100%;
}
.feat--showroom > div div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.dyk {
	border: 1px dotted #fff;
	padding: 2rem;
	width: calc(100% - 8rem);
}
.dyk p {
	color: #fff;
	margin-bottom: 0;
	margin-top: 1rem;
}
.dyk p:first-child {
	margin-top: 0;
}

.dyk--tip {
	border: none;
	padding: 0 2rem;
	border-left: 1px dotted #777;
}
.dyk--tip p {
	font-size: 13.5px;
	letter-spacing: 0.5px;
	line-height: 1.7;
	font-family: 'InputMono', 'Courier New';
	font-weight: 400;
	-webkit-font-feature-settings: 'zero' 1;
	        font-feature-settings: 'zero' 1;
	color: #777;
}

.audio-player {
	background: #000;
	font-family: 'InputMono', 'Courier New';
	font-size: 14px;
	background: rgba(0,0,0,.85);
	padding: 1.5rem 2rem;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fff;
	z-index: 9;
	-webkit-transform: translate3d(0,4rem,0);
	        transform: translate3d(0,4rem,0);
	will-change: transform;
	transition: .2s ease;
}

.audio-pause {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	color: #999;
	font-size: 14px;
	text-decoration: underline;
	outline: none;
}

.audio-is-playing .audio-player {
	-webkit-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);
}

.panel--next:before {
	content: '';
	position: absolute;
	z-index: -1;
	height: 40rem;
	left: 6.5rem;
	bottom: 100%;
	border-right: 2px dashed rgba(255,255,255,.4);
}
.panel--next h4 {
	margin-bottom: 0.5rem;
}
.panel--next .thx p {
	margin-bottom: 0.5rem;
	color: #777;
	font-size: 1.2em;
	max-width: 32em;
}
.panel--next .thx h4 {
	margin-bottom: 2rem;
}
.panel--next .thx h4 span {
	text-decoration: underline;
}
.panel--next .thx p.small {
	margin-top: 3rem;
	font-size: 0.8em;
}

.horizontal {
	cursor: move;
	overflow: hidden;
	padding: 2px 80px 8rem 8rem;
	margin-top: 4rem;
	margin-left: -8rem;
	margin-bottom: 8rem;
	position: relative;
}
.horizontal:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 8rem;
	background: #E3E6EA;
}
.cards-wrap {
	display: flex;
	z-index: 1;
	position: relative;
}
.horizontal .card + span {
	flex: 1 0 auto;
	width: 10rem;
}
.horizontal:after {
    content: '';
    position: absolute;
    top: 35%;
    height: 28rem;
    left: 0;
    right: 0;
    bottom: -8rem;
    background: #E3E6EA;
    z-index: 0;
}
.card {
	flex: 1 0 auto;
	width: 25vw;
	border: 1px solid #aaa;
	padding: 2rem;
	background: #fff;
	/*margin-left: -1px;*/
	margin-right: 2rem;
	will-change: transform;
	/*-webkit-transition: 0.5s cubic-bezier(0.77, 0, 0.125, 1);
	-o-transition: 0.5s cubic-bezier(0.77, 0, 0.125, 1);
	transition: 0.5s cubic-bezier(0.77, 0, 0.125, 1);*/
}
.card:last-of-type {
	margin-right: 10rem;
}
.card img {
	margin-bottom: 2rem;
}
.card p {
	text-align: center;
	max-width: 90%;
	font-size: 1.2em;
	margin: 0 auto 0;
}
.card p.mono {
	font-family: 'Brown';
	font-weight: 300;
	font-size: 0.9em;
	color: #777;
}

.back-to {
	margin-left: 8rem;
	margin-top: -8rem;
	margin-bottom: 8rem;
	color: #fff;
	color: rgba(255,255,255,.75);
	text-align: left;
	display: block;
	text-decoration: none;
	line-height: 1.8;
	transition: .2s ease;
	position: relative;
}
.back-to:hover {
	color: rgba(255,255,255,1);
}
.back-to span {
	display: block;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.back-to i {
	position: absolute;
	left: -7rem;
	top: -1rem;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
	height: 5rem;
	width: 5rem;
	line-height: 5rem;
	font-style: normal;
	border-radius: 50%;
	transition: .5s ease;
}
.back-to:hover i {
	background: rgba(255,255,255,.1);
	transition: .05s ease;
}

@media screen and (max-width: 55em) {

	body {
		padding: 2rem 0 3rem 2rem;
	}

	header {
		padding-left: 4rem;
	}
	header h1 {
		margin-bottom: 0;
	}
	p, li {
		font-size: 1.2em;
	}
	p {
		max-width: 90%;
	}

	.panel {
		position: relative;
		margin-top: 4rem;
		margin-bottom: 8rem;
		padding: 2rem 0 2rem 2rem;
	}

	@-webkit-keyframes logo {
		0% { background-position: 50% 0px; }
	  100% { background-position: 50% -2600px; }
	}

	@keyframes logo {
		0% { background-position: 50% 0px; }
	  100% { background-position: 50% -2600px; }
	}
	.logo {
		width: 400px;
		height: 200px;
		background: url('logo.png') no-repeat 50% 0px;
		background-size: 400px 2600px;
		-webkit-animation: logo 1s steps(13) infinite alternate;
		        animation: logo 1s steps(13) infinite alternate;
		-webkit-animation-delay: 1s;
		        animation-delay: 1s;
		z-index: 9;
		-webkit-transform: scale(0.66);
		        transform: scale(0.66);
	}
	.go-down {
		top: 95%;
	}

	.section--intro {
		margin: 2rem 0 2rem 0;
		min-height: 30vh;
	}

	.img-grid {
		display: none;
	}

	.timeline__event {
    margin-bottom: 8rem;
    flex-wrap: wrap;
	}
	.timeline__event .date:after {
	    margin-right: 1.5rem;
	}
	.timeline__event.--major .date:after {
		height: 1rem;
		width: 1rem;
		top: 0;
		margin-right: 1.5rem;
	}
	.event__info, .event__images {
	  padding-right: 2rem;
	}
	.timeline__intro h2 {
	    margin-bottom: 2rem;
	}
	.timeline__intro h2 ~ p {
	    max-width: 90%;
	    margin-bottom: 2rem;
	}
	.timeline__intro p:nth-child(4) {
	    margin-left: 0;
	    margin-top: 0;
	}
	.--major .event__images img {
	  margin-top: 0rem;
	}
	.event__images span {
	    content: '';
	    position: absolute;
	    top: 2rem;
	    left: 2rem;
	    bottom: -2rem;
	    margin-top: 4rem;
	}
	.event__images--bg {
		top: -2rem;
	}
	.timeline__event p.mono.caps {
		color: #fff;
		margin-top: 2rem;
	}
	.lookbook-images {
		margin: 2rem -4rem 2rem -2rem;
	}
	.feat--showroom > div {
		flex-wrap: wrap;
	}
	.feat--showroom figure {
	    padding-right: 2rem;
	    width: 100%;
	}
	.wide-feat {
	    margin: 12rem 0 2rem -2rem;
	    padding: 2rem 0 2.5rem 2rem;
	}
	.dyk {
	    padding: 2rem;
	    margin-right: 0rem;
	    margin-left: 0;
	}
	.figure--nyt {
		margin-left: auto;
		margin-right: -2rem;
		margin-top: -3rem!important;
		margin-bottom: -4rem;
		mix-blend-mode: multiply;
	}
	.figure--nyt img {
		display: block;
		margin-left: auto;
		margin-right: 0;
		position: relative;
		z-index: -1;
	}
	.figure--nyt p {
		text-align: left;
		margin-top: -8rem;
		margin-right: 4rem;
		margin-left: 0!important;
	}
	.audio {
	    margin: 2rem 0 2rem;
	}
	.badge.badge--stars {
		display: none;
	}
	.timeline__event ul {
	  padding-left: 2.5rem;
	  font-size: 0.9em;
	}
	.horizontal {
		cursor: move;
    padding: 2px 80px 8rem 2rem;
    margin-top: 2rem;
    margin-left: -2rem;
    margin-bottom: 2rem;
    position: relative;
	}
	.horizontal:after {
	    content: '';
	    position: absolute;
	    top: 35%;
	    height: 14rem;
	    bottom: -4rem;
	}
	.card {
	  width: 44vw;
	  padding: 1rem;
	  margin-right: 1rem;
	}
	.back-to {
		margin-top: -2rem;
	}
	.panel--next .thx p {
    font-size: 1.1em;
    max-width: 90%;
	}

}
}