/* FadeIn */
        @-webkit-keyframes fadeIn{
            0%{visibility: hidden; opacity: 0;}
            100%{visibility: visible; opacity: 1;}
        }
                
        @keyframes fadeIn{
            0%{visibility: hidden; opacity: 0;}
            100%{visibility: visible; opacity: 1;}
        }
    
       /* FadeOut */
        @-webkit-keyframes fadeOut{
                0%{visibility: visible; opacity: 1;}
                100%{visibility: hidden; opacity: 0;}
            }
                    
            @keyframes fadeOut{
                0%{visibility: visible; opacity: 1;}
                100%{visibility: hidden; opacity: 0;}
            }
    
    /* slideFromRight */
    @-webkit-keyframes slideFromRight{
             0%{visibility: visible;
                webkit-transform: translate3d(200%, 0, 0);
                       transform: translate3d(200%, 0, 0);
            }
            100%{
              -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;
                
            }
        }
        @keyframes slideFromRight{
            0%{visibility: visible;
                webkit-transform: translate3d(200%, 0, 0);
                       transform: translate3d(200%, 0, 0);
            }
            100%{
              -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;  
            }
        }
      /* slideFromLeft */
    @-webkit-keyframes slideFromLeft{
             0%{visibility: visible;
                webkit-transform: translate3d(-200%, 0, 0);
                       transform: translate3d(-200%, 0, 0);
            }
            100%{
              -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;
                
            }
        }
        @keyframes slideFromLeft{
            0%{visibility: visible;
                webkit-transform: translate3d(-200%, 0, 0);
                       transform: translate3d(-200%, 0, 0);
            }
            100%{
              -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;  
            }
        }
            /* slideFromBottom */
    @-webkit-keyframes slideFromBottom{
             0%{visibility: visible;
                webkit-transform: translate3d(0, 200%, 0);
                       transform: translate3d(0, 200%, 0);
            }
            100%{
              -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;
                
            }
        }
        @keyframes slideFromBottom{
            0%{visibility: visible;
                webkit-transform: translate3d(0, 200%, 0);
                       transform: translate3d(0, 200%, 0);
            }
            100%{
              -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;  
            }
        }
      /* slideFromTop */
    @-webkit-keyframes slideFromTop{
             0%{visibility: visible;
                webkit-transform: translate3d(0, -200%, 0);
                       transform: translate3d(0, -200%, 0);
            }
            100%{
              -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;
                
            }
        }
        @keyframes slideFromTop{
            0%{visibility: visible;
                webkit-transform: translate3d(0, -200%, 0);
                       transform: translate3d(0, -200%, 0);
            }
            100%{
              -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;  
            }
        }
          


/* slideOutTop */
@-webkit-keyframes slideOutTop{
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, -200%, 0);
  }
}
@keyframes slideOutTop{
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); 
visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);

  }
}

/* slideOutBottom */
@-webkit-keyframes slideOutBottom{
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }
}
@keyframes slideOutBottom{
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); 
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);

  }
}

/* slideOutLeft */
@-webkit-keyframes slideOutLeft{
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-300px, 0, 0);

  }
}
@keyframes slideOutLeft{
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); 
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-300px, 0, 0);

  }
}

/* slideOutRight */
@-webkit-keyframes slideOutRight{
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);

  }
}
@keyframes slideOutRight{
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); 
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);

  }
}

/* ScaleIn */
@-webkit-keyframes scaleIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    visibility: visible;
  }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
    visibility: visible;
  }
  100% {    
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    visibility: visible;
  }
}

@keyframes scaleIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    visibility: visible;
  }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
    visibility: visible;
  }
  100% {    
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
   visibility: visible;
  }
}

/* ScaleOut */
@-webkit-keyframes scaleOut {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    visibility: visible;
  }
  100% {    
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    visibility: visible;
  }
}

@keyframes scaleOut {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    visibility: visible;
  }
  100% {    
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    visibility: visible;
  }
}

/* Pulse */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    visibility: visible;
  }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
    visibility: visible;
  }
  100% {    
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    visibility: visible;
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    visibility: visible;
  }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
    visibility: visible;
  }
  100% {    
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    visibility: visible;
  }
}