@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

 * {
	 padding: 0;
	 margin: 0;
	 box-sizing: border-box;
}
 img {
	 max-width: 100%;
}
 .caption {
	 position: absolute;
	 top: 50%;
	 left: 8rem;
	 z-index: 9;
	 transform: translateY(-50%);
	 opacity: 0;
	 transition: 500ms ease opacity, 500ms ease transform;
	 transform: translateY(60px);
}
 .caption.current-caption {
	 transition-delay: 1000ms;
	 opacity: 1;
	 transform: translateY(0);
}
 .caption.previous-caption {
	 transform: translateY(-60px);
}
 .caption .caption-heading {
	 transition: 500ms ease-in all;
}
 .caption .caption-heading h1 {
	 font-size: 4rem;
	 margin-bottom: 1.5rem;
	 text-transform: uppercase;
	 text-indent: -0.2rem;
	 letter-spacing: 0.2rem;
	 font-weight: 300;
}
 .caption .caption-subhead {
	 font-size: 1rem;
	 font-weight: 300;
	 text-transform: uppercase;
	 color: white;
	 letter-spacing: 4px;
	 word-spacing: 0.1rem;
	 margin-bottom: 2.5rem;
	 display: block;
}
 .caption a.btn {
	 color: #333;
	 font-size: 0.8rem;
	 text-decoration: none;
	 background-color: white;
	 padding: 0.5rem 1rem;
	 text-transform: uppercase;
	 letter-spacing: 0.2rem;
	 position: relative;
	 z-index: 9;
	 transition: 250ms ease-in background-color, 500ms ease-in color;
}
 .caption a.btn:hover {
	 background-color: black;
	 color: white;
}
 .container {
	 width: 100%;
	 height: 100vh;
	 background-color: #2c302e;
	 display: flex;
	 position: relative;
}
 .left-col, .right-col {
	 width: 100%;
	 box-sizing: border-box;
	 height: 100vh;
	 overflow: hidden;
}
 .left-col {
	 background-size: cover;
	 background-position: center top;
	 overflow: hidden;
	 /* margin: 2rem; */
	 position: relative;
}
 .left-col .slide {
	 filter: grayscale(00%);
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 background-position: left top !important;
	 background-size: cover !important;
	 background-repeat: no-repeat;
	 opacity: 0;
	 transition: 1000ms cubic-bezier(1, 0.04, 0.355, 1) transform, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) clip-path;
	 transform: translateY(-100%);
	 scale: 1;
	 z-index: -1;
}
 .left-col .slide.previous {
	 z-index: 1;
	 opacity: 1;
	 transform: translateY(0);
	 animation-delay: 1s;
	 clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	 transition: 3s ease transform;
	 will-change: transform;
}
 .left-col .slide.previous.change {
	 transform: translateY(50%);
}
 .left-col .slide.next {
	 transform: translateY(-100%);
	 z-index: 3;
	 opacity: 1;
	 clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
 .left-col .slide.current {
	 opacity: 1;
	 transform: translateY(0) scale(1.25);
	 z-index: 2;
	 clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
 .right-col {
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .right-col .preview {
	 max-width: 400px;
}
 .nav {
	 display: block;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 6;
	 overflow: hidden;
}
 .nav a {
	 color: rgba(250, 250, 250, 1);
	 font-size: 3rem;
	 text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}
 .nav:hover .slide-up, .nav:hover .slide-down {
	 opacity: 0.5;
	 transform: translateX(0);
}
 .nav .slide-up, .nav .slide-down {
	 display: block;
	 position: absolute;
	 text-align: center;
	 padding: 1rem ;
	 opacity: 0;
	 transition: 0.25s ease opacity, 0.25s ease transform;
	 z-index: 99;
}
 .nav .slide-up:hover, .nav .slide-down:hover {
	 opacity: 1;
}
 .nav .slide-up a, .nav .slide-down a {
	 text-decoration: none;
	 font-weight: 300 !important;
}
 .nav .slide-up {
	 top: 50%;
	 left: 0;
	 transform: translateX(-100%);
}
 .nav .slide-down {
	 top: 50%;
	 right: 0;
	 transform: translateX(100%);
}