/********************************************************************/
/***********************      FLIP      *****************************/
/********************************************************************/
/*
.flipClass {
	-webkit-animation-name: flip;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 5s;

	animation-name: flip;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 5s;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
*/

	
@-webkit-keyframes flip {
	from { -webkit-transform: rotateY(0deg);    }
	to   { -webkit-transform: rotateY(-360deg); }
  }

/* all other browsers */
@keyframes flip {
	from {
	  -moz-transform: rotateY(0deg);
	  -ms-transform: rotateY(0deg);
	  transform: rotateY(0deg);
	}
	to {
	  -moz-transform: rotateY(-360deg);
	  -ms-transform: rotateY(-360deg);
	  transform: rotateY(-360deg);
	}
}

/********************************************************************/
/***********************     SHRINK     *****************************/
/********************************************************************/
/*
.shrinkClass {
	-webkit-animation:shrink 2s linear infinite;
	-moz-animation:shrink 2s linear infinite;
	animation:shrink 2s linear infinite;
}
*/	

@-webkit-keyframes shrink {
    0% {
         transform: scale(1.2);
    }

    50% {
         transform: scale(0.8);
    }

    100% {
         transform: scale(1.2);
    }
}

@-moz-keyframes shrink {
    0% {
         transform: scale(1.2);
    }

    50% {
         transform: scale(0.8);
    }

    100% {
         transform: scale(1.2);
    }
}
  
@-o-keyframes shrink {
    0% {
         transform: scale(1.2);
    }

    50% {
         transform: scale(0.8);
    }

    100% {
         transform:scale(1.2);
    }
  
}

/********************************************************************/
/***********************       BLUR     *****************************/
/********************************************************************/
/*
.blurClass {
   -webkit-animation: blurAnimation 5s linear infinite;
    -moz-animation: blurAnimation 5s linear infinite;
    -o-animation: blurAnimation 5s linear infinite;
    animation: blurAnimation 5s linear infinite;
}	
*/

@-webkit-keyframes blurAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blurAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes blurAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blurAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/********************************************************************/
/***********************     SHAKE X    *****************************/
/********************************************************************/
/*.shakeXClass {
   -webkit-animation: shakeX 2s linear infinite;
    -moz-animation: shakeX 2s linear infinite;
    -o-animation: shakeX 2s linear infinite;
    animation: shakeX 2s linear infinite;
}
*/

@keyframes shakeX {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(4px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}

/********************************************************************/
/***********************  SHAKE X FAST  *****************************/
/********************************************************************/
.shakeXClassFast {
   -webkit-animation: shakeXFast 0.5s linear infinite;
    -moz-animation: shakeXFast 0.5s linear infinite;
    -o-animation: shakeXFast 0.5s linear infinite;
    animation: shakeXFast 0.5s linear infinite;
}


@keyframes shakeXFast {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(8px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/********************************************************************/
/***********************     SHAKE Y    *****************************/
/********************************************************************/
/*
.shakeYClass {
   -webkit-animation: shakeY 2s linear infinite;
    -moz-animation: shakeY 2s linear infinite;
    -o-animation: shakeY 2s linear infinite;
    animation: shakeY 2s linear infinite;
}
*/

@keyframes shakeY {
  10%, 90% {
    transform: translate3d(0, -1px, 0);
  }
  
  15%, 85% {
    transform: translate3d(0, 4px, 0);
  }

  25%, 50%, 75% {
    transform: translate3d( 0, -8px, 0);
  }

  35%, 65% {
    transform: translate3d( 0, 8px, 0);
  }
}

/********************************************************************/
/***********************       SPIN     *****************************/
/********************************************************************/
/*
.spinClass {
	-webkit-animation:spin 5s linear infinite;
	-moz-animation:spin 5s linear infinite;
	animation:spin 5s linear infinite;
}
*/
	
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


/*
.face:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}


*/