.cont {
  position: relative;
  height: 100vh;
  font-family: "Santral-SemiBoldItalic";
  letter-spacing: -1.25px;
}

.slider {
  position: relative;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
  cursor: all-scroll;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.slider.animation {
  transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}
.slider.animation .slide__darkbg {
  transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}
.slider.animation .slide__text {
  transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}
.slider.animation .slide__letter {
  transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out, -webkit-transform 750ms 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;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
  z-index: 10;
}
.slide__text-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  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%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  font-size: 10vw;
  font-weight: 800;
  color: #000;
  z-index: 2;
  will-change: transform;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.slide__text {
  font-family: "Santral-UltraItalic";
  letter-spacing: -1.25px;
  margin: 0;
  font-size: 8vw;
  font-weight: 800;
  text-transform: uppercase;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 10px #2b2b2b;
  will-change: transform;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.slide__text:nth-child(odd) {
  z-index: 2;
}
.slide__text:nth-child(even) {
  z-index: 1;
}
.slide__subtext {
  font-family: 'Santral-SemiBoldItalic';
  font-size: 1vw;
  font-weight: 800;
  text-transform: uppercase;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  letter-spacing: 5px;
  color: rgb(255, 249, 246);
  text-shadow: 1px 1px 10px #2b2b2b;
  will-change: transform;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0;
}

.slide--1__darkbg {
  left: 0%;
  background: url("../images/slider1.jpg") center center no-repeat;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--2__darkbg {
  left: -50%;
  background: url("../images/slider2.jpg") center center no-repeat;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--3__darkbg {
  left: -100%;
  background: url("../images/slider3.jpg") center center no-repeat;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--4__darkbg {
  left: -150%;
  background: url("../images/slider4.jpg") center center no-repeat;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--5__darkbg {
  left: -200%;
  background: url("../images/slider5.jpg") center center no-repeat;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--1__darkbg:after, .slide--2__darkbg:after, .slide--3__darkbg:after, .slide--4__darkbg:after, .slide--5__darkbg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: #cccccc;*/
}


.nav {
  position: absolute;
  padding: 0;
  right: 25px;
  bottom: 10px;
  list-style-type: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.nav__slide {
  position: relative;
  width: 15px;
  height: 15px;
  border: 2px solid #000;
  margin-top: 10px;
  cursor: pointer;
}

.nav__slide:hover:after {
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
          transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}
.nav__slide:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0, 0);
  transform: translate(-50%, -50%) scale(0, 0);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 300ms;
  background-color: #0063be;
}

.nav-active:after {
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
          transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}

.img-active1{ animation: bounce1 5s ease; }
.img-active2{ animation: bounce2 5s ease; }
.img-active3{ animation: bounce3 5s ease; }
.img-active4{ animation: bounce4 5s ease; }
@keyframes bounce1 { 100% { transform: translate3d(0%,0,0) scale(1.1,1.1); } }
@keyframes bounce2 { 100% { transform: translate3d(50%,0,0) scale(1.1,1.1); } }
@keyframes bounce3 { 100% { transform: translate3d(100%,0,0) scale(1.1,1.1); } }
@keyframes bounce4 { 100% { transform: translate3d(150%,0,0) scale(1.1,1.1); } }

.slide-active1{ animation: slide1 1s; }
.slide-active2{ animation: slide2 1s; }
.slide-active3{ animation: slide3 1s; }
.slide-active4{ animation: slide4 1s; }
@keyframes slide1 { 100% { transform: translate3d(100%,0,0) } }
@keyframes slide2 { 100% { transform: translate3d(-200%,0,0) } }
@keyframes slide3 { 100% { transform: translate3d(-300%,0,0) } }
@keyframes slide4 { 100% { transform: translate3d(-400%,0,0) } }


.slide__text {
  font-size: 12vw;
}

.slide__subtext {
  font-size: 2vw;
  letter-spacing: 1px;
}

.h2-active{
  opacity: 1;
  transform: scale(2);
  transition: 5s;
}

.side-nav {
  position: absolute;
  width: 10%;
  height: 100%;
  top: 0;
  z-index: 20;
  cursor: pointer;
  opacity: 0;
  transition: 300ms;
}
.side-nav:hover {
  opacity: .1;
}
.side-nav--right {
  right: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}
.side-nav--left {
  left: 0;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}


@media screen and (max-width: 480px) {
  .slide__text {
    font-size: 15vw;
  }
}