.animate-block-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 30;
    pointer-events: none;
    opacity: 1;
    transition: 1s opacity ease-in-out;
}

.animate-block-wrapper.inactive {
	opacity: 0;
}

.animate-block-wrapper div[class^="block-"] {
    position: relative;
    /* height: 250px; */
    height: 33.33vh;
    overflow: hidden;
}

.animate-block-wrapper div[class^="block-"] .first-bg {
    /* 
    min-height: 250px; */
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.animateMe {
    opacity: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
}

.animate-block-wrapper .block-1 .color-block,
.animate-block-wrapper .block-3 .color-block {
    height: 100%;
    width: 100%;
    display: inline-block;
    
	animation-delay: 0s;
	animation-name: moveblock;
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes moveblock {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-100vw);
  }
}

.animate-block-wrapper .block-2 .color-block {
    height: 100%;
    width: 100%;
    display: inline-block;
    
	animation-delay: 0s;
	animation-name: moveblockright;
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes moveblockright {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(100vw);
  }
}

.animate-block-wrapper.motion .block-1 .black-bg.first,
.animate-block-wrapper.motion .block-3 .black-bg {
	animation-delay: 2s;
	animation-name: moveblock;
	animation-duration: 4s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.animate-block-wrapper.motion .block-1 .black-bg.first.speedend {
	animation-delay: 0s;
	animation-duration: 0.1s;
}

.animate-block-wrapper.motion .block-1 .black-bg.second,
.animate-block-wrapper.motion .block-2 .black-bg {
	animation-delay: 2s;
	animation-name: moveblockright;
	animation-duration: 4s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.animate-block-wrapper .black-bg {
    display: inline-block;
    height: 100%;
    width: 100%;
    transition: width 5s ease-in-out;
}

.animate-block-wrapper .block-1 .first-bg {
    max-width: 100%;
    background-position: center 120.99vh;
    background-size: cover;
    z-index: 1;
}

.animate-block-wrapper .block-1 .black-bg {
    max-width: 25%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}
.animate-block-wrapper .block-1 .black-bg.second {
	left: unset;
	right: 0px;
}

.animate-block-wrapper .block-2 .first-bg {
    max-width: 100%;
    background-position: center 87.66vh;
    background-size: cover;
    z-index: 1;
}

.animate-block-wrapper .block-2 .black-bg {
    max-width: 45%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
}

.animate-block-wrapper .block-3 .first-bg {
    background-position: center 54.33vh;
    background-size: cover;
    max-width: 100%;
    z-index: 1;
}

@media (min-width: 1920px) and (max-width: 2559px) {
	.animate-block-wrapper .block-1 .first-bg {
	    background-position: center 99.99vh;
	}
	.animate-block-wrapper .block-2 .first-bg {
	    background-position: center 66.66vh;
	}
	.animate-block-wrapper .block-3 .first-bg {
	    background-position: center 33.33vh;
	}
	
}

.animate-block-wrapper .block-3 .black-bg {
    max-width: 50%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}


.animate-block-wrapper.done-flicker .animateMe {
    position: relative;
    overflow: hidden;
    transition: 5s all ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.animate-block-wrapper.done-flicker .block-1 .animateMe,
.animate-block-wrapper.done-flicker .block-3 .animateMe {
    transform: translateX(100%);
    /* opacity: 0 !important;
    animation: slideOutRight 1s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    transform-origin: right; */
}

.animate-block-wrapper.done-flicker .block-2 .animateMe {
    transform: translateX(-100%);
    /* opacity: 0 !important;
     animation: slideOutLeft 1s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    transform-origin: left; */
}

.animate-block-wrapper.done-flicker.done-slide {
    background: transparent;
    border-left: 8px solid;
    border-image: linear-gradient(to bottom, #0000ff 0, #0000ff 33.3%, #ff0000 33.3%, #ff0000 66.6%, #00ff00 66.6%, #00ff00) 8;
}

.animate-block-wrapper.done-flicker.done-slide .first-bg,
.animate-block-wrapper.done-flicker.done-slide .black-bg {
    opacity: 0;
}

#home-slide.pause #slide-caption {
    /* left: unset !important; 
    right: 150px; */
    left: 13vw;
}

#home-slide.play #slide-caption {
    left: 250px !important;
    right: unset;
}

.slide-countdown {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.skw-nav {
    left: unset;
    right: 50px;
}

.skw-nav span {
    background: transparent;
    border: 1px solid #fff;
    width: 20px;
    height: 20px;
    position: relative;
}

.skw-nav span:hover,
.skw-nav span.skw-current {
    background: transparent;
}

.skw-nav span.skw-current:before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    background: #fff;
    border-radius: 50%;
}

.control-wrapper {
  position: absolute;
  bottom: 60px;
  right: 100px;
  z-index: 9091;
}

.skip-intro {
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  display: inline-block;
}

@media only screen and (max-width: 991px) {
	.control-wrapper {
		right: 20px;
	}

	.animate-block-wrapper div[class^="block-"] {
	    height: 150px;
	}

	.animate-block-wrapper .block-1 .first-bg {
	    background-position: center 450px;
	}
	
	.animate-block-wrapper .block-2 .first-bg {
	    background-position: center 300px;
	}
	
	.animate-block-wrapper .block-3 .first-bg {
	    background-position: center 150px;
	}	
}