/* -----------------------------------------------------
   ANIMATIONS
----------------------------------------------------- */
body {
    font-family: Helvetica,Tahoma;
}

.section{
	width:500px;
	height: 200px;
	margin:200px auto;
	background: #202746;
	border: 10px solid #eee;
	display: table;
}

.section h2{ font-size: 18px; color: #fff; display: table-cell; vertical-align: middle; text-align: center;}

.fadeInUp-anim.fadeInUp, 
.fadeInDown-anim.fadeInDown,
.fadeInLeft-anim.fadeInLeft,
.fadeInRight-anim.fadeInRight{
	opacity:1;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.fadeInUp, 
.fadeInDown,
.fadeInLeft,
.fadeInRight{
	opacity:0;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/* fadeInUp */
.fadeInUp-anim{
	-webkit-animation-name:fadeInUp-anim;
	animation-name:fadeInUp-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes fadeInUp-anim{
	0%{
		opacity:0;
		-webkit-transform:translate3d(0,30%,0);
		-moz-transform:translate3d(0,30%,0);
		-ms-transform:translate3d(0,30%,0);
		transform:translate3d(0,30%,0)
	}
	100%{
		opacity:1;
		-webkit-transform:none;
		-moz-transform:none;
		-ms-transform:none;
		transform:none
	}
}

/* fadeInDown */
.fadeInDown-anim{
	-webkit-animation-name:fadeInDown-anim;
	animation-name:fadeInDown-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes fadeInDown-anim{
	0%{
		opacity:0;
		-webkit-transform:translate3d(0,-30%,0);
		-moz-transform:translate3d(0,-30%,0);
		-ms-transform:translate3d(0,-30%,0);
		transform:translate3d(0,-30%,0)
	}
	100%{
		opacity:1;
		-webkit-transform:none;
		-moz-transform:none;
		-ms-transform:none;
		transform:none
	}
}

/* fadeInLeft */
.fadeInLeft-anim{
	-webkit-animation-name:fadeInLeft-anim;
	animation-name:fadeInLeft-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes fadeInLeft-anim{
	0%{
		opacity:0;
		-webkit-transform:translate3d(30%,0,0);
		-moz-transform:translate3d(30%,0,0);
		-ms-transform:translate3d(30%,0,0);
		transform:translate3d(30%,0,0)
	}
	100%{
		opacity:1;
		-webkit-transform:none;
		-moz-transform:none;
		-ms-transform:none;
		transform:none
	}
}

/* fadeInRight */
.fadeInRight-anim{
	-webkit-animation-name:fadeInRight-anim;
	animation-name:fadeInRight-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes fadeInRight-anim{
	0%{
		opacity:0;
		-webkit-transform:translate3d(-30%,0,0);
		-moz-transform:translate3d(-30%,0,0);
		-ms-transform:translate3d(-30%,0,0);
		transform:translate3d(-30%,0,0)
	}
	100%{
		opacity:1;
		-webkit-transform:none;
		-moz-transform:none;
		-ms-transform:none;
		transform:none
	}
}

.zoomIn-anim.zoomIn, 
.zoomInDown-anim.zoomInDown,
.zoomInLeft-anim.zoomInLeft,
.zoomInRight-anim.zoomInRight,
.zoomInUp-anim.zoomInUp{
	opacity:1;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.zoomIn, 
.zoomInDown,
.zoomInLeft,
.zoomInRight,
.zoomInUp{
	opacity:0;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*ZOOMIN*/
.zoomIn-anim{
	animation-name:zoomIn-anim;
	-webkit-animation-name:zoomIn-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes zoomIn-anim{
	0%{
		opacity:0;
		transform:scale3d(.3,.3,.3);
		-webkit-transform:scale3d(.3,.3,.3);
		-ms-transform:scale3d(.3,.3,.3);
		-moz-transform:scale3d(.3,.3,.3);
		}
	50%{
		opacity:1;
		}
}

/*zoomInDown*/
.zoomInDown-anim{
	animation-name: zoomInDown-anim;
	-webkit-animation-name:zoomInDown-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes zoomInDown-anim {
0% {
opacity:0;
transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-ms-transform:scale3d(.1, .1, .1) -ms-translate3d(0, -1000px, 0);
-moz-transform:scale3d(.1, .1, .1) -moz-translate3d(0, -1000px, 0);
-webkit-transform:scale3d(.1, .1, .1) -webkit-translate3d(0, -1000px, 0);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity:1;
transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-ms-transform:scale3d(.475, .475, .475) -ms-translate3d(0, 60px, 0);
-moz-transform:scale3d(.475, .475, .475) -moz-translate3d(0, 60px, 0);
-webkit-transform:scale3d(.475, .475, .475) -webkit-translate3d(0, 60px, 0);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
}

/*zoomInLeft*/

.zoomInLeft-anim {
	animation-name: zoomInLeft-anim;
	-webkit-animation-name:zoomInLeft-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}
@keyframes zoomInLeft-anim {
0% {
opacity:0;
transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-transform:scale3d(.1, .1, .1) -webkit-translate3d(-1000px, 0, 0);
-ms-transform:scale3d(.1, .1, .1) -ms-translate3d(-1000px, 0, 0);
-moz-transform:scale3d(.1, .1, .1) -moz-translate3d(-1000px, 0, 0);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity:1;
transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-transform:scale3d(.475, .475, .475) -webkit-translate3d(10px, 0, 0);
-ms-transform:scale3d(.475, .475, .475) -ms-translate3d(10px, 0, 0);
-moz-transform:scale3d(.475, .475, .475) -moz-translate3d(10px, 0, 0);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
}

/*zoomInLeft*/

.zoomInRight-anim {
	animation-name: zoomInRight-anim;
	-webkit-animation-name:zoomInRight-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}
@keyframes zoomInRight-anim {
0% {
opacity:0;
transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-transform:scale3d(.1, .1, .1) -webkit-translate3d(1000px, 0, 0);
-ms-transform:scale3d(.1, .1, .1) -ms-translate3d(1000px, 0, 0);
-moz-transform:scale3d(.1, .1, .1) -moz-translate3d(1000px, 0, 0);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity:1;
transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-transform:scale3d(.475, .475, .475) -webkit-translate3d(-10px, 0, 0);
-ms-transform:scale3d(.475, .475, .475) -ms-translate3d(-10px, 0, 0);
-moz-transform:scale3d(.475, .475, .475) -moz-translate3d(-10px, 0, 0);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
}

/*zoomInUp*/
.zoomInUp-anim {
	animation-name: zoomInUp-anim;
	-webkit-animation-name:zoomInUp-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes zoomInUp-anim {
0% {
opacity:0;
transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-transform:scale3d(.1, .1, .1) -webkit-translate3d(0, 1000px, 0);
-ms-transform:scale3d(.1, .1, .1) -ms-translate3d(0, 1000px, 0);
-moz-transform:scale3d(.1, .1, .1) -moz-translate3d(0, 1000px, 0);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity:1;
transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-transform:scale3d(.475, .475, .475) -webkit-translate3d(0, -60px, 0);
-ms-transform:scale3d(.475, .475, .475) -ms-translate3d(0, -60px, 0);
-moz-transform:scale3d(.475, .475, .475) -moz-translate3d(0, -60px, 0);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
}

.rotateIn-anim.rotateIn, 
.rotateInDownLeft-anim.rotateInDownLeft,
.rotateInDownRight-anim.rotateInDownRight,
.rotateInUpLeft-anim.rotateInUpLeft{
	opacity:1;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.rotateIn-anim, 
.rotateInDownLeft,
.rotateInDownRight,
.rotateInUpLeft{
	opacity:0;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*rotateIn*/
.rotateIn-anim {
	animation-name: rotateIn-anim;
	-webkit-animation-name:rotateIn-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes rotateIn-anim{
0% {
transform-origin:center;
-webkit-transform-origin:center;
-ms-transform-origin:center;
-moz-transform-origin:center;
transform:rotate(-200deg);
-moz-transform:rotate(-200deg);
-ms-transform:rotate(-200deg);
-webkit-transform:rotate(-200deg);
opacity:0
}
to {
transform-origin:center;
-webkit-transform-origin:center;
-ms-transform-origin:center;
-moz-transform-origin:center;
transform:none;
-webkit-transform:none;
-ms-transform:none;
-moz-transform:none;
opacity:1
}
}

/*rotateInDownLeft*/
.rotateInDownLeft-anim {
	animation-name: rotateInDownLeft-anim;
	-webkit-animation-name:rotateInDownLeft-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes rotateInDownLeft-anim {
0% {
transform-origin:left bottom;
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
-moz-transform-origin:left bottom;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
opacity:0
}
to {
transform-origin:left bottom;
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
-moz-transform-origin:left bottom;
transform:none;
-webkit-transform:none;
-ms-transform:none;
-moz-transform:none;
opacity:1
}
}

/*rotateInDownRight*/
.rotateInDownRight-anim {
	animation-name: rotateInDownRight-anim;
	-webkit-animation-name:rotateInDownRight-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes rotateInDownRight-anim {
0% {
transform-origin:right bottom;
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
-moz-transform-origin:right bottom;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
opacity:0
}
to {
transform-origin:right bottom;
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
-moz-transform-origin:right bottom;
transform:none;
-webkit-transform:none;
-ms-transform:none;
-moz-transform:none;
opacity:1
}
}

/*rotateInUpLeft*/
.rotateInUpLeft-anim {
	animation-name: rotateInUpLeft-anim;
	-webkit-animation-name:rotateInUpLeft-anim;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}

@keyframes rotateInUpLeft-anim {
0% {
transform-origin:left bottom;
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
-moz-transform-origin:left bottom;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
opacity:0
}
to {
transform-origin:left bottom;
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
-moz-transform-origin:left bottom;
transform:none;
-webkit-transform:none;
-ms-transform:none;
-moz-transform:none;
opacity:1
}
}