/*

CORE CSS 
Author: Hao Nhien Nguyen
Licensed to: Touch Pride Pty Ltd

*/

/* Safari */
@-webkit-keyframes spin {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-360deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-360deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

@-webkit-keyframes shake {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-10deg); }
  20% { transform: rotate(0deg); }
  30% { transform: rotate(-10deg); }
  40% { transform: rotate(0deg); }
  50% { transform: rotate(0deg); }
  60% { transform: rotate(10deg); }
  70% { transform: rotate(0deg); }
  80% { transform: rotate(10deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-10deg); }
  20% { transform: rotate(0deg); }
  30% { transform: rotate(-10deg); }
  40% { transform: rotate(0deg); }
  50% { transform: rotate(0deg); }
  60% { transform: rotate(10deg); }
  70% { transform: rotate(0deg); }
  80% { transform: rotate(10deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes flyin-l {
  0% {opacity:0; transform: translateX(-100%); }
  100% {opacity:1; transform: translate(0); }
}

@-webkit-keyframes flyin-l {
  0% {opacity:0; transform: translateX(-100%); }
  100% {opacity:1; transform: translate(0); }
}

@keyframes flyin-r {
  0% {opacity:0; transform: translateX(100%); }
  100% {opacity:1; transform: translate(0); }
}

@-webkit-keyframes flyin-r {
  0% {opacity:0; transform: translateX(100%); }
  100% {opacity:1; transform: translate(0); }
}

@keyframes flyin-u {
  0% {opacity:0; transform: translateY(-100%); }
  100% {opacity:1; transform: translate(0); }
}

@-webkit-keyframes flyin-u {
  0% {opacity:0; transform: translateY(-100%); }
  100% {opacity:1; transform: translate(0); }
}

@keyframes flyout-u {
  0% {opacity:1; transform: translate(0); }
  100% {opacity:0; transform: translateY(-100%); }
}

@keyframes flyout-l {
  0% {opacity:1; transform: translate(0); }
  100% {opacity:0; transform: translateX(-100%); }
}

@keyframes flyin-d {
  0% {opacity:0; transform: translateY(100%); }
  100% {opacity:1; transform: translate(0); }
}

@-webkit-keyframes flyin-d {
  0% {opacity:0; transform: translateY(100%); }
  100% {opacity:1; transform: translate(0); }
}

@keyframes fadeIn1 {
  0% {opacity:0; }
  100% {opacity:1; }
}

@keyframes fadeOut1 {
  0% {opacity:1; }
  100% {opacity:0; }
}

@keyframes growBoth {
  0% {opacity:0; transform: scale(0); }
  100% {opacity:1; transform: scale(1); }
}

@keyframes growX {
  0% {opacity:0; transform: scale(0,1); }
  100% {opacity:1; transform: scale(1,1); }
}

@keyframes shrinkBoth {
  0% {opacity:0; transform: scale(10); }
  100% {opacity:1; transform: scale(1); }
}

/*Ele*/

@keyframes bg-fly {
  0% { background-position: top left; }
  20% { background-position: bottom right; }
  35% { background-position: bottom left; }
  55% { background-position: top right; }
  70% { background-position: top left; }
  75% { background-position: bottom left; }
  85% { background-position: bottom right; }
  90% { background-position: top right; }
  100% { background-position: top left; }
}

.banner-fly
{
	animation: bg-fly 20s linear infinite;
}

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3ba0;
  border-bottom: 8px solid #3ba0;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 4s linear infinite; /* Safari */
  animation: spin 4s linear infinite;
}

.preAnim1
{
	opacity:0;
}

.preAnim2
{
	opacity:0;
	transform: translateX(100%);
}

.shakeItem
{
	-webkit-animation: shake 2s linear infinite; /* Safari */
	animation: shake 2s linear infinite;
}

.flyinlItem
{
	-webkit-animation: flyin-l 0.5s linear; /* Safari */
	animation: flyin-l 0.5s linear;
}

.flyinrItem
{
	-webkit-animation: flyin-r 0.5s linear; /* Safari */
	animation: flyin-r 0.5s linear;
}

.flyinuItem
{
	-webkit-animation: flyin-u 0.5s linear; /* Safari */
	animation: flyin-u 0.5s linear;
}

.flyindItem
{
	-webkit-animation: flyin-d 0.5s linear; /* Safari */
	animation: flyin-d 0.5s linear;
}