.cycle-slideshow {
    overflow: hidden;
    background: #000;
    min-height: 400px;
}

    .cycle-slideshow > div.slide {
        width: 100%;
        height: 100vh;
        background-size: cover;
        background-position: center;
        transition: transform 6.5s linear;
    }

 
.cycle-slideshow .scale {
    transform: scale(1.1);
}

.cycle-slideshow .fx1 {
    transform-origin: bottom left;
}

.cycle-slideshow .fx2 {
    transform-origin: top left;
}

.cycle-slideshow .fx3 {
    transform-origin: top right;
}

.cycle-slideshow .fx4 {
    transform-origin: bottom right;
}


.overlayItems {
  position: absolute;
  top: -300px;
  text-align: center;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}


.cycle-overlay {
    color: #fff;
    display: inline-block;
    font-family: 'Damion', cursive;
    font-size: 12vw;
    font-size: 120px;
    background-image: url('images/swipe.png');
    background-repeat: no-repeat;
    background-position: top 86px center;
    background-size: contain;
    letter-spacing: 0.02em;
    position: relative;
    bottom: -.3em;
}


.example-pager span.cycle-pager-active {
    color: #00aa09;
}

.example-pager span {
    font-size: 50px;
    width: 16px;
    height: 16px;
    display: inline-block;
    color: #ddd;
    cursor: pointer;
}

.topBanner{
    position: relative;
}

.topBanner::before {
    content: '';
    position: absolute;
    z-index: 990;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;  
    display: block;
    width: 100%;
    /* height: 100%; */
    background-image: linear-gradient(to bottom, #000 0%, transparent 40%, transparent 80%, #000 100%);
    opacity: 0.77;
    pointer-events: none;
}

@media (max-width: 768px){
  .overlayItems {
   
  top: -240px;
   
  }

  .cycle-overlay {
 
    background-position: top 8vw center;
     
  }

}

@media (max-width: 1200px) {

    .cycle-overlay {
        font-size: 12vw;
    }



}