/* sketch-animation: biblioteca de animacoes
 *
 * Marcelo Barbosa,
 * julho, 2017.
 */

/* animacoes: conteineres*/
.marquee { position: relative; padding: 0; border: 0; margin: 0; white-space: nowrap; }
.marquee::after { content: ""; display: block; clear: both; }

/* animacoes */
.border-fade-in { border: 0 solid; -webkit-animation: border-fade-in linear 1s; animation: border-fade-in linear 1s; }
.border-fade-out { border: 15px solid; -webkit-animation: border-fade-out linear 1s; animation: border-fade-out linear 1s; }
.fade-in { -webkit-animation: fade-in linear 1s; animation: fade-in linear 1s; }
.fade-out { -webkit-animation: fade-out linear 1s; animation: fade-out linear 1s; }
.fade-in-out { -webkit-animation: fade-in-out linear 1s; animation: fade-in-out linear 1s; }
.fade-out-in { -webkit-animation: fade-out-in linear 1s; animation: fade-out-in linear 1s; }
.horizontal-rotate { -webkit-animation: horizontal-rotate linear 1s; animation: horizontal-rotate linear 1s; }
.move-left-to-right { -webkit-animation: move-left-to-right linear 1s; animation: move-left-to-right linear 1s; }
.move-right-to-left { -webkit-animation: move-right-to-left linear 1s; animation: move-right-to-left linear 1s; }
.move-left-to-right-fade-in { -webkit-animation: move-left-to-right-fade-in linear 1s; animation: move-left-to-right-fade-in linear 1s; }
.move-right-to-left-fade-in { -webkit-animation: move-right-to-left-fade-in linear 1s; animation: move-right-to-left-fade-in linear 1s; }
.rotate { -webkit-animation: rotate linear 1s; animation: rotate linear 1s; }
.slide-bottom-to-top { position: absolute; -webkit-animation: slide-bottom-to-top linear 1s; animation: slide-bottom-to-top linear 1s; }
.slide-top-to-bottom { position: absolute; bottom: 0; -webkit-animation: slide-top-to-bottom linear 1s reverse; animation: slide-top-to-bottom linear 1s; }
.slide-left-to-right { position: absolute; left: 0; -webkit-animation: slide-left-to-right linear 1s; animation: slide-left-to-right linear 1s; }
.slide-right-to-left { position: absolute; right: 0; -webkit-animation: slide-right-to-left linear 1s; animation: slide-right-to-left linear 1s; }
.vertical-rotate { -webkit-animation: vertical-rotate linear 1s; animation: vertical-rotate linear 1s; }

.left-to-right { display: inline-block; padding-left: 100%; -webkit-animation: marquee-right-to-left linear 25s infinite reverse; animation: marquee-right-to-left linear 25s infinite reverse; }
.right-to-left { display: inline-block; padding-left: 100%; -webkit-animation: marquee-right-to-left linear 25s infinite; animation: marquee-right-to-left linear 25s infinite; }

/* animacoes: duracao */
.shortest-duration { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; }
.shorter-duration { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; }
.short-duration { -webkit-animation-duration: 0.7s; animation-duration: 0.7s; }
.normal-duration { -webkit-animation-duration: 1s; animation-duration: 1s; }
.slow-duration { -webkit-animation-duration: 2s; animation-duration: 2s; }
.slower-duration { -webkit-animation-duration: 3s; animation-duration: 3s; }
.slowest-duration { -webkit-animation-duration: 4s; animation-duration: 4s; }
.long-duration { -webkit-animation-duration: 5s; animation-duration: 5s; }
.longer-duration { -webkit-animation-duration: 7s; animation-duration: 7s; }
.longest-duration { -webkit-animation-duration: 10s; animation-duration: 10s; }
.slightly-extended-duration { -webkit-animation-duration: 15s; animation-duration: 15s; }
.extended-duration { -webkit-animation-duration: 20s; animation-duration: 20s; }
.severely-extended-duration { -webkit-animation-duration: 25s; animation-duration: 25s; }
.max-extended-duration { -webkit-animation-duration: 30s; animation-duration: 30s; }

/* animacoes: loop */
.loop-animation { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

/* animacoes: direcao */
.animation-reverse-direction { -webkit-animation-direction: reverse; animation-direction: reverse; }
.animation-alternate-direction { -webkit-animation-direction: alternate; animation-direction: alternate; }

@keyframes move-left-to-right
{
    0% { width: 0%; }
    100% { width: 100%; }
}

@-webkit-keyframes move-left-to-right
{
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes move-left-to-right-fade-in
{
    0% { width: 0%; opacity: 0; }
    100% { width: 100%; opacity: 1; }
}

@-webkit-keyframes move-left-to-right-fade-in
{
    0% { width: 0%; opacity: 0; }
    100% { width: 100%; opacity: 1; }
} 

@keyframes move-right-to-left
{
    0% { width: 100%; }
    100% { width: 0%; }
}

@-webkit-keyframes move-right-to-left
{
    0% { width: 100%; }
    100% { width: 0%; }
}

@keyframes move-right-to-left-fade-in
{
    0% { width: 100%; opacity: 0; }
    100% { width: 0%; opacity: 1; }
}

@-webkit-keyframes move-right-to-left-fade-in
{
    0% { width: 100%; opacity: 0; }
    100% { width: 0%; opacity: 1; }
}

@keyframes fade-in
{
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fade-in
{
    0% { opacity: 0; }
    100% { opacity: 1; }
} 

@keyframes fade-out
{
    0% { opacity: 1; }
    100% { opacity: 0;}
}

@-webkit-keyframes fade-out
{
    0% { opacity: 1; }
    100% { opacity: 0;}
}

@keyframes fade-in-out
{
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0;}
}

@-webkit-keyframes fade-in-out
{
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0;}
}

@keyframes fade-out-in
{
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1;}
}

@-webkit-keyframes fade-out-in
{
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1;}
}

@keyframes rotate
{
    0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }    
}

@-webkit-keyframes rotate
{
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@keyframes horizontal-rotate
{
    0% { -ms-transform: rotateX(0deg); transform: rotateX(0deg); }
    100% { -ms-transform: rotateX(360deg); transform: rotateX(360deg); }    
}

@-webkit-keyframes horizontal-rotate
{
    0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
    100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
}

@keyframes vertical-rotate
{
    0% { -ms-transform: rotateY(0deg); transform: rotateY(0deg); }
    100% { -ms-transform: rotateY(360deg); transform: rotateY(360deg); }    
}

@-webkit-keyframes vertical-rotate
{
    0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
    100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}

@keyframes border-fade-in
{    
    100% { border: 15px solid rgba(0,0,0,0.0); }    
}

@-webkit-keyframes border-fade-in
{
    100% { border: 15px solid rgba(0,0,0,0.0); }
}

@keyframes border-fade-out
{    
    100% { border: 0 solid rgba(0,0,0,0.0); }    
}

@-webkit-keyframes border-fade-out
{
    100% { border: 0 solid rgba(0,0,0,0.0); }
}

@keyframes slide-bottom-to-top
{   
	0%   { top: 100%; }
    100% { top: 0; }
}

@-webkit-keyframes slide-bottom-to-top
{
    0%   { top: 100%; }
    100% { top: 0; }
}

@keyframes slide-top-to-bottom
{   
	0%   { bottom: 100%; }
    100% { bottom: 0; }
}

@-webkit-keyframes slide-top-to-bottom
{
    0%   { bottom: 100%; }
    100% { bottom: 0; }
}

@keyframes slide-left-to-right
{    
    0% { left: 100%; }
    100% { left: 0; }
}

@-webkit-keyframes slide-left-to-right
{
    0% { left: 100%; }
    100% { left: 0; }
}

@keyframes slide-right-to-left
{    
    0% { right: 100%; }
    100% { right: 0; }
}

@-webkit-keyframes slide-right-to-left
{
    0% { right: 100%; }
    100% { right: 0; }
}

@keyframes marquee-right-to-left
{    
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

@-webkit-keyframes marquee-right-to-left
{
    0% { -webkit-transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); }
}