.slidetext {
    position: relative;
    margin-bottom: 6em;
    margin-left: 2.5em;
    padding: 0.2em 0.6em;
    color: #fff;
    font-size: 2em;
    max-width: auto;
    width: 20rem;
  }
  @media(max-width: 991px) {
      .slidetext{
          margin-left: 1em !important;
          font-size: 0.7em !important;
          margin-bottom: 15em !important;
      }
  }
  .slidetext h1 {
    margin-bottom: 0.5em;
    line-height: 1;
  }
  #CrossFade {
    background: #fff;
    display: flex;
    align-items: flex-end;
    height: 90vh;
    overflow: hidden;
    position: relative;
  }
  #CrossFade img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: 110%;
    height: auto;
    background: #000;
    object-fit: cover;
    object-position: center;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    opacity: 0;
    transform: scale(1.4) rotate(12deg);
    -webkit-animation: CrossFade 24s infinite;
            animation: CrossFade 24s infinite;
  }
  #CrossFade img:nth-child(3) {
    -webkit-animation-delay: 6s;
            animation-delay: 6s;
  }
  #CrossFade img:nth-child(2) {
    -webkit-animation-delay: 12s;
            animation-delay: 12s;
  }
  #CrossFade img:nth-child(1) {
    -webkit-animation-delay: 18s;
            animation-delay: 18s;
  }
  #CrossFade h1 {
    position: absolute;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    opacity: 0;
    -webkit-animation: CrossFade 24s infinite;
            animation: CrossFade 24s infinite;
  }
  #CrossFade h1:nth-child(1) {
    color: #000;
    -webkit-animation-delay: 18s;
            animation-delay: 18s;
  }
  #CrossFade h1:nth-child(2) {
    color: #fff;
    -webkit-animation-delay: 12s;
            animation-delay: 12s;
  }
  #CrossFade h1:nth-child(3) {
    color: #fff;
    -webkit-animation-delay: 6s;
            animation-delay: 6s;
  }
  /* 
  
  $duration = 12
  $slides = 4
  $step = $duration/$slides
  setDelayRevers($duration, $slides)
    
    for index in (2..$slides)
      &:nth-child({index -1}) 
        animation-delay ($step*index)s
  
  #CrossFade
    height 100vh
    overflow hidden
    position relative
    
    display flex
    img
      align-self center
      position absolute
      
      min-width 100%
      min-height 100%
      height auto
      
      backface-visibility hidden
      opacity 0
    
      transform scale(1.4) rotate(12deg)
      animation CrossFade ($duration)s infinite 
      setDelayRevers($duration, $slides)   
  @keyframes CrossFade
    25%
      opacity 1
      transform scale(1) rotate(0)
    40%
      opacity 0
      
  */
  @-webkit-keyframes CrossFade {
    25% {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
    40% {
      opacity: 0;
    }
  }
  @keyframes CrossFade {
    25% {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
    40% {
      opacity: 0;
    }
  }