.glitch {
  color: rgb(223, 191, 191);
  position: relative;
  font-size: 9vw;
 //  margin: 70px 100px;
  animation: glitch 5s 5s infinite;
}

.glitch::before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: -5px 0 magenta;
  background: black;
  overflow: hidden;
  top: 0;
  animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}

.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -5px 0 lightgreen;
  background: black;
  overflow: hidden;
  top: 0;
  animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}

@keyframes glitch {
  1%{
    transform: rotateX(10deg) skewX(90deg);
  }
  2%{
    transform: rotateX(0deg) skewX(0deg);
  }
}

@keyframes noise-1 {
  $steps: 30;
  @for $i from 1 through $steps {
    #{percentage($i*(1/$steps))} {
      $top: random(100);
      $bottom: random(101 - $top);
      clip-path: inset(#{$top}px 0 #{$bottom}px 0);
    }
  }
}

@keyframes noise-2 {
  $steps: 30;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      $top: random(100);
      $bottom: random(101 - $top);
      clip-path: inset(#{$top}px 0 #{$bottom}px 0);
    }
  }
}

.scanlines {
  overflow: hidden;
  mix-blend-mode: difference;
}

.scanlines::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background: repeating-linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.05) .5%,
    transparent 1%
  );

  animation: fudge 7s ease-in-out alternate infinite;
}


@keyframes fudge {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(0px, 2%);
  }
}

.glow {
  @extend .glitch;
  text-shadow: 0 0 1000px rgb(223, 191, 191);
  color: transparent;
  position: absolute;
  top: 0;
}

.subtitle2 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  font-size: .8vw;
  color: rgba(165, 141, 141, .4);
  text-transform: uppercase;
  letter-spacing: 0.5em;
  text-align: right;
  position: absolute;
  left: 17%;
  animation: glitch-2 5s 5.02s infinite;
}

@keyframes glitch-2 {
  1%{
    transform: rotateX(10deg) skewX(70deg);
  }
  2%{
    transform: rotateX(0deg) skewX(0deg);
  }
}



#section-1 {
    max-width: 100%;
  }
  
  #section-1 .widget {
    padding: 0;
    line-height: 0;
  }
  
  .page > :first-child {
    min-height: 50vh;
  }
  
  .genre-wrapper {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    will-change: transform;
    overflow: hidden;
    cursor: pointer;
  }
  
  .slide__bg {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 1;
    -webkit-transition: 950ms;
    transition: 950ms;
    will-change: transform;
  }
  
  .slide__img {
    position: relative;
    height: 100%;
  }
  
  .slide__img-wrapper {
    position: absolute;
    top: -10%;
    left: 0;
    width: 125%;
    height: 120%;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: 950ms;
    transition: 950ms;
    will-change: transform;
  }
  
  @media screen and (max-width: 768px ) {
      .slide__img-wrapper {
        position: absolute;
        top: -10%;
        left: -10%;
        width: 125%;
        height: 120%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: 950ms;
        transition: 950ms;
        will-change: transform;
      }
  }
  
  .slide__close {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 100px;
    height: 100px;
    z-index: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity 200ms, z-index 0ms 200ms;
    transition: opacity 200ms, z-index 0ms 200ms;
  }
  
  .slide__close:after, .slide__close:before {
    containerent: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 115px;
    height: 20px;
    border-radius: 20px;
    background-color: #fff;
    -webkit-transition: 500ms 500ms;
    transition: 500ms 500ms;
  }
  @media screen and (max-width: 960px) {
  
  .slide__close:after, .slide__close:before {
    width: 75px;
    height: 15px;
  }
  }
  
  .slide__close:after {
    -webkit-transform-origin: center left;
    transform-origin: center left;
    -webkit-transform: rotate(45deg) scale(0, 0);
    transform: rotate(45deg) scale(0, 0);
  }
  
  .slide__close:before {
    left: -33px;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    -webkit-transform: rotate(-45deg) scale(0, 0);
    transform: rotate(-45deg) scale(0, 0);
    -webkit-transition: 500ms 650ms;
    transition: 500ms 650ms;
  }
  @media screen and (max-width: 960px) {
  
  .slide__close:before { left: -21px; }
  }
  
  .slide__bg-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    -webkit-transition: 350ms;
    transition: 350ms;
    z-index: 2;
  }
  
  .slide__text {
background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 5%;
    width: 23%;
    text-transform: uppercase;
    word-wrap: break-word;
    color: #fff;
    font-family: "Rajdhani", sans-serif;
    font-size: 40px;
    font-weight: 600;
    -webkit-transform: translate3d(0, -50%, 0) rotate(0.01deg);
    transform: translate3d(0, -50%, 0) rotate(0.01deg);
    will-change: transform, opacity;
    -webkit-transition: 750ms;
    transition: 750ms;
    opacity: 0;
    z-index: 1;
  }
  @media screen and (max-width: 960px) {
  
  .slide__text { font-size: 30px; }
  }
  
  .slide__text--1 { left: 8%; }
  
  @media only screen and ( max-width: 480px ) {
      .slide__text {
          width: 55%;
          text-align: center;
      }
  
      .slide__text--1 {
          left: -7%;
      }
  
      .slide__text--2 {
          left: -9%;
      }
  
      .slide__text--3 {
          left: -11%;
      }
  
      .slide__text--4 {
          left: -13%;
      }
  }


.slide { left: 100%; }

.slide--1 { z-index: 0; }

.slide--1 .slide__img-wrapper {
  background-image: url("img/projects/iot.png");
}

.slide--2 { z-index: 1; }

.slide--2 .slide__img-wrapper {
  background-image: url("https://i.ytimg.com/vi/Bxx2qBE5WhU/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLAXSO7plBvTaPA7XceT8vYiykfhVw");
}

.slide--3 { z-index: 2; }

.slide--3 .slide__img-wrapper {
	background-image: url("img/projects/hmi1.jpg");
}

.slide--4 { z-index: 3; }

.slide--4 .slide__img-wrapper {
  background-image: url("img/projects/zrywarka3.jpg");
}

.active .slide--1 .slide__bg {
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: 950ms;
  transition: 950ms;
}

.active .slide--1 .slide__img-wrapper {
  -webkit-transform: translate3d(-150px, 0, 0);
  transform: translate3d(-150px, 0, 0);
  -webkit-transition: 2000ms;
  transition: 2000ms;
}

.active .slide--1 {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: -webkit-transform 950ms 0ms;
  transition: -webkit-transform 950ms 0ms;
  transition: transform 950ms 0ms;
  transition: transform 950ms 0ms, -webkit-transform 950ms 0ms;
}

.active .slide--1 .slide__bg {
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: 1900ms 0ms;
  transition: 1900ms 0ms;
}

.active .slide--1 .slide__img-wrapper {
  -webkit-transform: translate3d(-150px, 0, 0);
  transform: translate3d(-150px, 0, 0);
  -webkit-transition: 2000ms 0ms;
  transition: 2000ms 0ms;
}

.active .slide--2 {
  -webkit-transform: translate3d(-75%, 0, 0);
  transform: translate3d(-75%, 0, 0);
  -webkit-transition: -webkit-transform 500ms 950ms;
  transition: -webkit-transform 500ms 950ms;
  transition: transform 500ms 950ms;
  transition: transform 500ms 950ms, -webkit-transform 500ms 950ms;
}

.active .slide--2 .slide__bg {
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: 1235ms 950ms;
  transition: 1235ms 950ms;
}

.active .slide--2 .slide__img-wrapper {
  -webkit-transform: translate3d(-150px, 0, 0);
  transform: translate3d(-150px, 0, 0);
  -webkit-transition: 1350ms 950ms;
  transition: 1350ms 950ms;
}

.active .slide--3 {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  -webkit-transition: -webkit-transform 500ms 1600ms;
  transition: -webkit-transform 500ms 1600ms;
  transition: transform 500ms 1600ms;
  transition: transform 500ms 1600ms, -webkit-transform 500ms 1600ms;
}

.active .slide--3 .slide__bg {
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: 1235ms 1600ms;
  transition: 1235ms 1600ms;
}

.active .slide--3 .slide__img-wrapper {
  -webkit-transform: translate3d(-150px, 0, 0);
  transform: translate3d(-150px, 0, 0);
  -webkit-transition: 1350ms 1600ms;
  transition: 1350ms 1600ms;
}

.active .slide--4 {
  -webkit-transform: translate3d(-25%, 0, 0);
  transform: translate3d(-25%, 0, 0);
  -webkit-transition: -webkit-transform 500ms 2000ms;
  transition: -webkit-transform 500ms 2000ms;
  transition: transform 500ms 2000ms;
  transition: transform 500ms 2000ms, -webkit-transform 500ms 2000ms;
}

.active .slide--4 .slide__bg {
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: 1235ms 2000ms;
  transition: 1235ms 2000ms;
}

.active .slide--4 .slide__img-wrapper {
  -webkit-transform: translate3d(-150px, 0, 0);
  transform: translate3d(-150px, 0, 0);
  -webkit-transition: 1350ms 2000ms;
  transition: 1350ms 2000ms;
}

@media only screen and ( max-width: 480px ) {
	.slide__text {
	  -webkit-transform: translate3d(0, -50%, 0) rotate(-90deg);
	  transform: translate3d(0, -50%, 0) rotate(-90deg);
	}
}