/******* slide from right to left ********/
@-moz-keyframes slideInFromRight {
    from {-moz-transform: translateX(100%);}
    to {-moz-transform: translateX(0);}
}
@-moz-keyframes slideOutToLeft {
    from {-moz-transform: translateX(0);}
    to {-moz-transform: translateX(-100%);}
}
@-webkit-keyframes slideInFromRight {
    from {-webkit-transform: translateX(100%);}
    to {-webkit-transform: translateX(0);}
}
@-webkit-keyframes slideOutToLeft {
    from {-webkit-transform: translateX(0);}
    to {-webkit-transform: translateX(-100%);}
}

/******* slide from left to right ********/
@-moz-keyframes slideInFromLeft {
    from {-moz-transform: translateX(-100%);}
    to {-moz-transform: translateX(0);}
}
@-moz-keyframes slideOutToRight {
    from {-moz-transform: translateX(0);}
    to {-moz-transform: translateX(100%);}
}
@-webkit-keyframes slideInFromLeft {
    from {-webkit-transform: translateX(-100%);}
    to {-webkit-transform: translateX(0);}
}
@-webkit-keyframes slideOutToRight {
    from {-webkit-transform: translateX(0);}
    to {-webkit-transform: translateX(100%);}
}

/******* slide from down to top ********/
@-moz-keyframes slideOutToUp {
    from {-moz-transform: translateY(0);}
    to {-moz-transform: translateY(-100%);}
}
@-moz-keyframes slideInFromDown {
    from {-moz-transform: translateY(100%);}
    to {-moz-transform: translateY(0);}
}
@-webkit-keyframes slideOutToUp {
    from {-webkit-transform: translateY(0);}
    to {-webkit-transform: translateY(-100%);}
}
@-webkit-keyframes slideInFromDown {
    from {-webkit-transform: translateY(100%);}
    to {-webkit-transform: translateY(0);}
}

/******* slide from top to down ********/
@-moz-keyframes slideOutToDown {
    from {-moz-transform: translateY(0);}
    to {-moz-transform: translateY(100%);}
}
@-moz-keyframes slideInFromUp {
    from {-moz-transform: translateY(-100%);}
    to {-moz-transform: translateY(0);}
}
@-webkit-keyframes slideOutToDown {
    from {-webkit-transform: translateY(0);}
    to {-webkit-transform: translateY(100%);}
}
@-webkit-keyframes slideInFromUp {
    from {-webkit-transform: translateY(-100%);}
    to {-webkit-transform: translateY(0);}
}

/******* slide Fade ********/

@-moz-keyframes slideFadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-moz-keyframes slideFadeIn {
    from {opacity: 1;}
    to {opacity: 1;}
}
@-moz-keyframes slideFading {
    0% {opacity: 0;}
    50% {opacity: 1;}
	100% {opacity: 0;}
}
@-moz-keyframes slideFadeInFromBlank {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes slideFadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-webkit-keyframes slideFadeIn {
    from {opacity: 1;}
    to {opacity: 1;}
}
@-webkit-keyframes slideFading {
    0% {opacity: 0;}
    50% {opacity: 1;}
	100% {opacity: 0;}
}
@-webkit-keyframes slideFadeInFromBlank {
    from {opacity: 0;}
    to {opacity: 1;}
}

/******* click *********/
@-moz-keyframes clickButtonBrightness {
    from {-moz-filter:brightness(100%);}
    to {-moz-filter:brightness(50%);}
}
@-webkit-keyframes clickButtonBrightness {
    from {-webkit-filter:brightness(100%);}
    to {-webkit-filter:brightness(50%);}
}

/******* shake *********/
@-moz-keyframes shakePhone {
	0% {-moz-transform: rotate(0deg);bottom:200px;left: 50px;}
	20% {-moz-transform: rotate(-26deg);bottom: 230px;left: 33px;}
	30% {-moz-transform: rotate(0deg);bottom:200px;left: 50px;}
	40% {-moz-transform: rotate(26deg);bottom: 184px;left: 50px;}
	50% {-moz-transform: rotate(0deg);bottom:200px;left: 50px;}
	60% {-moz-transform: rotate(-26deg);bottom: 230px;left: 33px;}
	70% {-moz-transform: rotate(0deg);bottom:200px;left: 50px;}
	80% {-moz-transform: rotate(26deg);bottom: 184px;left: 50px;}
	100% {-moz-transform: rotate(0deg);bottom:200px;left: 50px;}
}
@-moz-keyframes shakeGesture {
    0% {-moz-transform: translate(0,0);}
	25% {-moz-transform: translate(10%,10%);}
	50% {-moz-transform: translate(0,0);}
	75%{-moz-transform: translate(10%,10%);}
	100% {-moz-transform: translate(0,0);}
}

@-moz-keyframes pressToShake {
	0% {-moz-transform: rotate(0deg);left: 185px;top: 106px;z-index: 2;}
	100% {-moz-transform: rotate(-60deg);left: 70px;top: 548px;z-index: 2;display:none;}
}

@-webkit-keyframes shakePhone {
	0% {-webkit-transform: rotate(0deg);bottom:200px;left: 50px;}
	20% {-webkit-transform: rotate(-26deg);bottom: 230px;left: 33px;}
	30% {-webkit-transform: rotate(0deg);bottom:200px;left: 50px;}
	40% {-webkit-transform: rotate(26deg);bottom: 184px;left: 50px;}
	50% {-webkit-transform: rotate(0deg);bottom:200px;left: 50px;}
	60% {-webkit-transform: rotate(-26deg);bottom: 230px;left: 33px;}
	70% {-webkit-transform: rotate(0deg);bottom:200px;left: 50px;}
	80% {-webkit-transform: rotate(26deg);bottom: 184px;left: 50px;}
	100% {-webkit-transform: rotate(0deg);bottom:200px;left: 50px;}
}
@-webkit-keyframes shakeGesture {
    0% {-webkit-transform: translate(0,0);}
	25% {-webkit-transform: translate(10%,10%);}
	50% {-webkit-transform: translate(0,0);}
	75%{-webkit-transform: translate(10%,10%);}
	100% {-webkit-transform: translate(0,0);}
}

@-webkit-keyframes pressToShake {
	0% {-webkit-transform: rotate(0deg);left: 185px;top: 106px;z-index: 2;}
	100% {-webkit-transform: rotate(-60deg);left: 70px;top: 548px;z-index: 2;display:none;}
}
/******* shake *********/

/* ########################################################## effect ########################################################## */
.slideInFromRight,
.slideInFromLeft,
.slideOutToLeft,
.slideOutToRight,
.slideOutToUp,
.slideInFromDown,
.slideOutToDown,
.slideInFromUp {
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 0.4s;
	/*-webkit-animation-fill-mode: forwards;*/
	
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 0.4s;
	/*-moz-animation-fill-mode: forwards;*/
}
/******* slide from top to down ********/
.slideOutToDown {
	-webkit-transform: translateY(-100%);
	-webkit-animation-name: slideOutToDown;
	
	-moz-transform: translateY(-100%);
	-moz-animation-name: slideOutToDown;
}
.slideInFromUp{
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideInFromUp;
	
	-moz-transform: translateY(0);
	-moz-animation-name: slideInFromUp;
}
/******* slide from top to down ********/

/******* slide from down to top ********/
.slideOutToUp {
	-webkit-transform: translateY(-100%);
	-webkit-animation-name: slideOutToUp;
	
	-moz-transform: translateY(-100%);
	-moz-animation-name: slideOutToUp;
}
.slideInFromDown {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideInFromDown;
	
	-moz-transform: translateY(0);
	-moz-animation-name: slideInFromDown;
}
/******* slide from down to top ********/

/******* slide from right to left ********/
.slideInFromRight {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideInFromRight;
	
	-moz-transform: translateX(0);
	-moz-animation-name: slideInFromRight;
}

.slideOutToLeft {
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideOutToLeft;
	-moz-transform: translateX(-100%);
	-moz-animation-name: slideOutToLeft;
}

/******* slide from right to left ********/

/******* slide from left to right ********/

.slideOutToRight {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideOutToRight;
	-moz-transform: translateX(100%);
	-moz-animation-name: slideOutToRight;
}
.slideInFromLeft {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideInFromLeft;
	
	-moz-transform: translateX(0);
	-moz-animation-name: slideInFromLeft;
}

/******* slide from left to right ********/

/******* slide from back to front ********/
.slideFadeIn {
	-webkit-animation: slideFadeIn 1s ease;
	-moz-animation: slideFadeIn 1s ease;
}
.slideFadeOut {
	opacity:0;
	-webkit-animation: slideFadeOut 1s ease;
	-moz-animation: slideFadeOut 1s ease;
}
.slideFading{
	-webkit-animation: slideFading 1.5s infinite;
	-moz-animation: slideFading 1.5s infinite;
}
.slideFadeInFromBlank{
	opacity:1;
	-webkit-animation: slideFadeInFromBlank 1s ease;
	-moz-animation: slideFadeInFromBlank 1s ease;
}
/******* slide from back to front ********/

/******* shaking ********/
.pressToShake {
	-webkit-transform: rotate(-60deg);
	-webkit-animation: pressToShake 1s ease;
	z-index: 2;
	-moz-transform: rotate(-60deg);
	-moz-animation: pressToShake 1s ease;
	top: 548px;
	
}
.shakePhone{
	-webkit-transform: rotate(0deg);
	-webkit-animation: shakePhone 1.5s linear;
	-moz-transform: rotate(0deg);
	-moz-animation: shakePhone 1.5s linear;
}
.shakeGesture{
	-webkit-transform: translate(0,0);
	-webkit-animation: shakeGesture 1.5s linear;
	-moz-transform: translate(0,0);
	-moz-animation: shakeGesture 1.5s linear;
}

/******* shaking ********/

/******* click effect for button *******/
.clickButtonBrightness{
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 0.5s;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 0.5s;
}
.clickButtonBrightness{
	-webkit-filter: brightness(50%);
	-webkit-animation-name: clickButtonBrightness;
	-moz-filter: brightness(50%);
	-moz-animation-name: clickButtonBrightness;
}
/******* click effect for button *******/


/******* delay *********/
.delay-0-3 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.h548 .delay-0-3{
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}


.delay-0-6 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.h548 .delay-0-6{
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.delay-1 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.h548 .delay-1{
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.delay-1-5 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.h548 .delay-1-5{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.delay-2 {
  -webkit-animation-delay:2s;
  animation-delay: 2s;
}
.h548 .delay-2{
  -webkit-animation-delay:2s;
  animation-delay:2s;
}

.delay-2 {
  -webkit-animation-delay:2.5s;
  animation-delay: 2.5s;
}
.h548 .delay-2{
  -webkit-animation-delay:2.5s;
  animation-delay:2.5s;
}

.delay-3 {
  -webkit-animation-delay:3s;
  animation-delay: 3s;
}
.h548 .delay-3{
  -webkit-animation-delay:3s;
  animation-delay:3s;
}