/* ANIMATION */
.animate-opacity {
-webkit-animation-name:opac;-webkit-animation-duration:0.6s;animation-name:opac;animation-duration:0.6s;}
@-webkit-keyframes opac {from {opacity:0;} to {opacity:1;}}
@keyframes opac {from {opacity:0;} to {opacity:1;}}
/* TOP */
.animate-top {
position:relative;-webkit-animation-name:animatetop;-webkit-animation-duration:0.6s;animation-name:animatetop;animation-duration:0.6s;}
@-webkit-keyframes animatetop {from {top:-300px;opacity:0;} to {top:0;opacity:1;}}
@keyframes animatetop {from {top:-300px;opacity:0;} to {top:0;opacity:1;}}
/* LEFT */
.animate-left {
-webkit-animation-name:animateleft;-webkit-animation-duration:0.6s;animation-name:animateleft;animation-duration:0.6s;}
@-webkit-keyframes animateleft {from {left:-300px;opacity:0;} to {left:0;opacity:0.9;}}
@keyframes animateleft {from {left:-300px;opacity:0;} to {left:0;opacity:0.9;}}
/* RIGHT */
.animate-right {
-webkit-animation-name:animateright;-webkit-animation-duration:0.6s;animation-name:animateright;animation-duration:0.6s;}
@-webkit-keyframes animateright {from {right:-300px;opacity:0;} to {right:0;opacity:0.9;}}
@keyframes animateright {from {right:-300px;opacity:0;} to {right:0;opacity:0.9;}}
/* BOTTOM */
.animate-bottom {
position:relative;-webkit-animation-name:animatebottom;-webkit-animation-duration:0.6s;animation-name:animatebottom;animation-duration:0.6s;}
@-webkit-keyframes animatebottom {from {bottom:-300px;opacity:0;} to {bottom:0px;opacity:1;}}
@keyframes animatebottom {from {bottom:-300px;opacity:0;} to {bottom:0;opacity:1;}}
.slower {
    -webkit-animation-duration:1.0s;
    animation-duration:1.0s;
}