.fade-in-right {
    -webkit-animation: fade-in-right-frame 0.5s;
            animation: fade-in-right-frame 0.5s;

    animation-fill-mode: forwards;
}

@keyframes fade-in-right-frame{
    0% {
        position: absolute;
        opacity: 0;
        display: block;
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
    }


    100% {
        opacity: 1;
        position: absolute;
        display: block;
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
}

.fade-out-left {
    -webkit-animation: fade-out-left-frame 0.5s;
            animation: fade-out-left-frame 0.5s;

    animation-fill-mode: forwards;
}

@keyframes fade-out-left-frame{

    0% {
        opacity: 1;
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }



}

@keyframes RL_HeroSlider_Slide_Right{
	0%, 20%{
		transform: translateX(0%);
	}
	25%, 45%{
		transform: translateX(-100%);
	}
	50%, 70%{
		transform: translateX(-200%);
	}
	75%, 95%{
		transform: translateX(-300%);
	}

}

@keyframes RL_HeroSlider_Slide_Up{
	0%, 20%{
		transform: translateY(0%);
	}
	25%, 45%{
		transform: translateY(-100%);
	}
	50%, 70%{
		transform: translateY(-200%);
	}
	75%, 95%{
		transform: translateY(-300%);
	}
}


@keyframes slides {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }


  .pulse {
    animation: pulse-animation 2s infinite;
  }
  
  @keyframes pulse-animation {
    0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }
    100% {
      box-shadow: 0 0 0 20px rgba(163, 217, 248, 0);
    }
  }