/*--- animations ---*/
.ani-ripple{transition:opacity 0s}.ani-ripple:active{opacity:0.5}
.ani-spin{animation:spin 2s infinite linear}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}

/* agregado mio */
.ani-fadein{animation:fadein 10s}@keyframes fadein{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.ani-fadeout{animation:fadeout 10s}@keyframes fadout{0%{opacity:1}50%{opacity:0}100%{opacity:1}}

.ani-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.ani-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.ani-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.ani-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.ani-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.ani-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.ani-input{transition:width 0.4s ease-in-out}.animate-input:focus{width:100%!important}