.cont{position:relative;height:100vh;overflow:hidden}.slider{position:relative;height:100%;transform:translateZ(0);will-change:transform;cursor:grabbing;user-select:none}.slider.animation,.slider.animation .slide__darkbg,.slider.animation .slide__text,.slider.animation .slide__letter{transition:transform .75s ease-in-out}.slide{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.slide--1{left:0%}.slide--2{left:100%}.slide--3{left:200%}.slide--4{left:300%}.slide--5{left:400%}.slide__darkbg{position:absolute;width:100%;height:100%;top:0;left:0;transform:translateZ(0);will-change:transform;z-index:10}.slide__text-wrapper{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:15}.slide__letter{position:absolute;display:flex;align-items:center;justify-content:center;top:0;left:0;width:100%;height:100%;transform:translateZ(0);-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;font-size:50vw;font-weight:800;color:#000;z-index:2;will-change:transform;user-select:none}.slide__text{font-size:8vw;font-weight:800;text-transform:uppercase;transform:translateZ(0);letter-spacing:12px;color:#fff;will-change:transform;user-select:none}.slide__text:nth-child(odd){z-index:2}.slide__text:nth-child(2n){z-index:1}.slide--1__darkbg{left:0%;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg) center center no-repeat;background-size:cover;background-position:0px center,0px center;transform:translateZ(0);will-change:transform}.slide--1__darkbg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0b0f27d4}.slide--1__letter{background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg) center center no-repeat;background-position:0px center,0px center;background-size:cover}.slide--2__darkbg{left:-50%;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg) center center no-repeat;background-size:cover;background-position:0px center,0px center;transform:translateZ(0);will-change:transform}.slide--2__darkbg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0b0f27d4}.slide--2__letter{background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg) center center no-repeat;background-position:0px center,0px center;background-size:cover}.slide--3__darkbg{left:-100%;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg) center center no-repeat;background-size:cover;background-position:0px center,0px center;transform:translateZ(0);will-change:transform}.slide--3__darkbg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0b0f27d4}.slide--3__letter{background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg) center center no-repeat;background-position:0px center,0px center;background-size:cover}.slide--4__darkbg{left:-150%;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg) center center no-repeat;background-size:cover;background-position:0px center,0px center;transform:translateZ(0);will-change:transform}.slide--4__darkbg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0b0f27d4}.slide--4__letter{background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg) center center no-repeat;background-position:0px center,0px center;background-size:cover}.slide--5__darkbg{left:-200%;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg) center center no-repeat;background-size:cover;background-position:0px center,0px center;transform:translateZ(0);will-change:transform}.slide--5__darkbg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0b0f27d4}.slide--5__letter{background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg) center center no-repeat;background-position:0px center,0px center;background-size:cover}.nav{position:absolute;bottom:25px;left:50%;transform:translate(-50%);list-style-type:none;z-index:10}.nav__slide{position:relative;display:inline-block;width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:10px;cursor:pointer}@media screen and (max-width:400px){.nav__slide{width:22px;height:22px}}.nav__slide:hover:after{transform:translate(-50%,-50%) scale(1);opacity:1}.nav__slide:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:75%;height:75%;border-radius:50%;background-color:#fff;opacity:0;transition:.3s}.nav__slide--1{margin-left:0}.nav-active:after{transform:translate(-50%,-50%) scale(1);opacity:1}.side-nav{position:absolute;width:10%;height:100%;top:0;z-index:20;cursor:pointer;opacity:0;transition:.3s}.side-nav:hover{opacity:.1}.side-nav--right{right:0;background-image:linear-gradient(to right,#fff0,#eed7ff)}.side-nav--left{left:0;background-image:linear-gradient(to left,#fff0,#eed7ff)}html{box-sizing:border-box;font-family:Open Sans,sans-serif}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}body{background-color:#000;overflow:hidden}