#slider-container .animation{
  opacity: 1;
}
.animation_{
  opacity: 0;
}
[data-animation].pause{
  -webkit-animation-play-state: paused !important; /* Chrome, Safari, Opera */
  animation-play-state: paused !important;
}
[data-animation=countdown] {
    width: 0px;
    display: table;
}
[data-animation=countdown].stop {
    animation-name: none !important;
}
[data-animation=countdown].animation {
    animation: countdown linear;
}
[data-animation=pageDots] {
    visibility: hidden
}
.pageDots > ul > li.animation[data-animation=pageDots] {
    animation: pageDots 2500ms linear;
    visibility: visible
}
.pageDots > ul > li.animation[data-animation=pageDots]:hover {
    transform: scale(1.2);
    transition: 200ms all;
}

/*
 * Scroll down icon */
  #slider-container .scroll_down{
    animation: scrollDown_icon 2000ms linear;
    animation-iteration-count: infinite;
    z-index: 5;    
  }

/**************************************************************************************
 * Slide 1# */

#slider-container li[data-index="1"] h1 { opacity: 0; }
  #slider-container li[data-index="1"] h1.animation{
    opacity: 0;
    animation: zoom-out 500ms ease-out;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="1"] h1::after{ opacity: 0; }
  #slider-container li[data-index="1"] h1.animation::after{
    animation: bounceInLeft 750ms ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards
  }
  /* 3# --- H4 */
  #slider-container li[data-index="1"] h4{
    opacity: 0;
  }
  #slider-container li[data-index="1"] h4.animation{
    animation: zoom-out 400ms ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="1"] button { opacity: 0; }
  #slider-container li[data-index="1"] button.animation{
    animation: zoom-out 250ms ease-in-out;
    animation-delay: 750ms;
    animation-fill-mode: forwards;
}

/**************************************************************************************
 * Slide 1# Out 
 * 1# --- H1 out */
  /*#slider-container [data-animation*=boomInOut_]{
      opacity: 0 !important;
  }*/
  
  #slider-container li[data-index="1"] h1.out{
    opacity: 1;
    animation: zoom-in 500ms ease-in-out;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="1"] h4.out{
    opacity: 1;
    animation: zoom-in 500ms ease-in;
    animation-fill-mode: forwards;
  }  
  #slider-container li[data-index="1"] button.out{
    animation: zoom-in 500ms ease-in-out;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="1"] h1.out::after{
    opacity: 1;
    animation: bounceOutRight 750ms ease-in-out;
    animation-delay: 350ms;
    animation-fill-mode: forwards;
  }
  
/**************************************************************************************
 * Slide 1# */

#slider-container li[data-index="2"] h1 { opacity: 0; }
  #slider-container li[data-index="2"] h1.animation{
    opacity: 0;
    animation: zoom-out 500ms ease-out;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="2"] h1::after{ opacity: 0; }
  #slider-container li[data-index="2"] h1.animation::after{
    animation: bounceInLeft 750ms ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards
  }
  /* 3# --- H4 */
  #slider-container li[data-index="2"] h4{
    opacity: 0;
  }
  #slider-container li[data-index="2"] h4.animation{
    animation: zoom-out 400ms ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="2"] button { opacity: 0; }
  #slider-container li[data-index="2"] button.animation{
    animation: zoom-out 250ms ease-in-out;
    animation-delay: 750ms;
    animation-fill-mode: forwards;
}

/**************************************************************************************
 * Slide 1# Out 
 * 1# --- H1 out */
  /*#slider-container [data-animation*=boomInOut_]{
      opacity: 0 !important;
  }*/
  
  #slider-container li[data-index="2"] h1.out{
    opacity: 1;
    animation: zoom-in 500ms ease-in-out;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="2"] h4.out{
    opacity: 1;
    animation: zoom-in 500ms ease-in;
    animation-fill-mode: forwards;
  }  
  #slider-container li[data-index="2"] button.out{
    animation: zoom-in 500ms ease-in-out;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="2"] h1.out::after{
    opacity: 1;
    animation: bounceOutRight 750ms ease-in-out;
    animation-delay: 350ms;
    animation-fill-mode: forwards;
  }

/**************************************************************************************
 * Slide 1# */

#slider-container li[data-index="3"] h1 { opacity: 0; }
  #slider-container li[data-index="3"] h1.animation{
    opacity: 0;
    animation: zoom-out 500ms ease-out;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="3"] h1::after{ opacity: 0; }
  #slider-container li[data-index="3"] h1.animation::after{
    animation: bounceInLeft 750ms ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards
  }
  /* 3# --- H4 */
  #slider-container li[data-index="3"] h4{
    opacity: 0;
  }
  #slider-container li[data-index="3"] h4.animation{
    animation: zoom-out 400ms ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="3"] button { opacity: 0; }
  #slider-container li[data-index="3"] button.animation{
    animation: zoom-out 250ms ease-in-out;
    animation-delay: 750ms;
    animation-fill-mode: forwards;
}

/**************************************************************************************
 * Slide 1# Out 
 * 1# --- H1 out */
  /*#slider-container [data-animation*=boomInOut_]{
      opacity: 0 !important;
  }*/
  
  #slider-container li[data-index="3"] h1.out{
    opacity: 1;
    animation: zoom-in 500ms ease-in-out;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="3"] h4.out{
    opacity: 1;
    animation: zoom-in 500ms ease-in;
    animation-fill-mode: forwards;
  }  
  #slider-container li[data-index="3"] button.out{
    animation: zoom-in 500ms ease-in-out;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="3"] h1.out::after{
    opacity: 1;
    animation: bounceOutRight 750ms ease-in-out;
    animation-delay: 350ms;
    animation-fill-mode: forwards;
  }

/**************************************************************************************
 * Slide 1# */

#slider-container li[data-index="4"] h1 { opacity: 0; }
  #slider-container li[data-index="4"] h1.animation{
    opacity: 0;
    animation: zoom-out 500ms ease-out;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="4"] h1::after{ opacity: 0; }
  #slider-container li[data-index="4"] h1.animation::after{
    animation: bounceInLeft 750ms ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards
  }
  /* 3# --- H4 */
  #slider-container li[data-index="4"] h4{
    opacity: 0;
  }
  #slider-container li[data-index="4"] h4.animation{
    animation: zoom-out 400ms ease-in-out;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="4"] button { opacity: 0; }
  #slider-container li[data-index="4"] button.animation{
    animation: zoom-out 250ms ease-in-out;
    animation-delay: 750ms;
    animation-fill-mode: forwards;
}

/**************************************************************************************
 * Slide 1# Out 
 * 1# --- H1 out */
  /*#slider-container [data-animation*=boomInOut_]{
      opacity: 0 !important;
  }*/
  
  #slider-container li[data-index="4"] h1.out{
    opacity: 1;
    animation: zoom-in 500ms ease-in-out;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="4"] h4.out{
    opacity: 1;
    animation: zoom-in 500ms ease-in;
    animation-fill-mode: forwards;
  }  
  #slider-container li[data-index="4"] button.out{
    animation: zoom-in 500ms ease-in-out;
    animation-fill-mode: forwards;
  }
  #slider-container li[data-index="4"] h1.out::after{
    opacity: 1;
    animation: bounceOutRight 750ms ease-in-out;
    animation-delay: 350ms;
    animation-fill-mode: forwards;
  }

  
/* 1# --- H1::after in */
  #slider-animation {
    animation: h1_arrow_animation_in 1s ease-out;
  }