.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.spin {
	animation: spin 0.7s infinite;
	-webkit-animation: spin 0.7s infinite linear;
	-moz-animation: spin 0.7s infinite linear;
	-o-animation: spin 0.7s infinite linear;
	-ms-animation: spin 0.7s infinite linear;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
 -o-transform: rotate(360deg);
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.counter-spin {
animation: counter-spin 0.7s infinite;
-webkit-animation: counter-spin 0.7s infinite linear;
-moz-animation: counter-spin 0.7s infinite linear;
-o-animation: counter-spin 0.7s infinite linear;
-ms-animation: counter-spin 0.7s infinite linear;
}
@-webkit-keyframes counter-spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(-360deg);}
}
@-moz-keyframes counter-spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(-360deg);}
}
@-o-keyframes counter-spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(-360deg);}
}
@-ms-keyframes counter-spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(-360deg);}
}
@keyframes counter-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.flipInX {
	animation: flipInX 0.7s 1;
	-webkit-animation: flipInX 0.7s 1 linear;
	-moz-animation: flipInX 0.7s 1 linear;
	-o-animation: flipInX 0.7s 1 linear;
	-ms-animation: flipInX 0.7s 1 linear;
}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}