/* Efeito - Fade */
@-webkit-keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; } 
}
@-moz-keyframes fade {
    0%   { opacity: 0;}
    100% { opacity: 1; }
}
@-o-keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Efeito - Quicar */
@-webkit-keyframes quicar {
    0%   { opacity: 0;                                                                  }
    15%  { -webkit-transform: translateY(-50px); transform: translateY(-50px);          }
    30%  { -webkit-transform: translateY(0px);   transform: translateY(0px);            }
    50%  { -webkit-transform: translateY(-30px); transform: translateY(-30px);          }
    65%  { -webkit-transform: translateY(0px);   transform: translateY(0px);            }
    80%  { -webkit-transform: translateY(-20px); transform: translateY(-20px);          }
    100% { -webkit-transform: translateY(0);     transform: translateY(0); opacity: 1;  }
}
@keyframes quicar {
    0%   { opacity: 0;                                                                  }
    10%  { -webkit-transform: translateY(-40px); transform: translateY(-40px);          }
    25%  { -webkit-transform: translateY(0px);   transform: translateY(0px);            }
    35%  { -webkit-transform: translateY(-30px); transform: translateY(-30px);          }
    50%  { -webkit-transform: translateY(0px);   transform: translateY(0px);            }
    60%  { -webkit-transform: translateY(-20px); transform: translateY(-20px);          }
    75%  { -webkit-transform: translateY(0px);   transform: translateY(0px);            }
    85%  { -webkit-transform: translateY(-5px);  transform: translateY(-5px);           }
    100% { -webkit-transform: translateY(0);     transform: translateY(0); opacity: 1;  }
}

/* Efeito - Deslize para direita */
@-webkit-keyframes deslizeParaDireita {
    0%   { opacity: 0;  -webkit-transform: translateX(-1000px); transform: translateX(-1000px);     }
    100% { opacity: 1;  -webkit-transform: translateX(0);       transform: translateX(0);           }
}
@keyframes deslizeParaDireita {
    0%   { opacity: 0;  -webkit-transform: translateX(-1000px); transform: translateX(-1000px);     }
    100% { opacity: 1;  -webkit-transform: translateX(0);       transform: translateX(0);           }
}

/* Efeito - Deslize para direita */
@-webkit-keyframes deslizeParaEsquerda {
    0%   { opacity: 0;  -webkit-transform: translateX(1000px); transform: translateX(1000px);     }
    100% { opacity: 1;  -webkit-transform: translateX(0);       transform: translateX(0);           }
}
@keyframes deslizeParaEsquerda {
    0%   { opacity: 0;  -webkit-transform: translateX(1000px); transform: translateX(1000px);     }
    100% { opacity: 1;  -webkit-transform: translateX(0);       transform: translateX(0);           }
}

/* Efeito - Deslize suave para direita */
@-webkit-keyframes deslizeSuaveParaDireita {
    0%   { opacity: 0;  -webkit-transform: translateX(-80px);     transform: translateX(-80px);     }
    100% { opacity: 1;  -webkit-transform: translateX(0);         transform: translateX(0);         }
}
@keyframes deslizeSuaveParaDireita {
    0%   { opacity: 0;  -webkit-transform: translateX(-80px);     transform: translateX(-80px);     }
    100% { opacity: 1;  -webkit-transform: translateX(0);         transform: translateX(0);         }
}

/* Efeito - Deslize para cima */
@-webkit-keyframes deslizeParaCima {
    0%   { opacity: 0;  -webkit-transform: translateY(1000px);   transform: translateY(1000px);     }
    100% { opacity: 1;  -webkit-transform: translateY(0);       transform: translateY(0);           }
}
@keyframes deslizeParaCima {
    0%   { opacity: 0;  -webkit-transform: translateY(1000px);   transform: translateY(1000px);     }
    100% { opacity: 1;  -webkit-transform: translateY(0);       transform: translateY(0);           }
}

/* Efeito - Deslize para baixo */
@-webkit-keyframes deslizeParaBaixo {
    0%   { opacity: 0;  -webkit-transform: translateY(-1000px);   transform: translateY(-1000px);   }
    100% { opacity: 1;  -webkit-transform: translateY(0);       transform: translateY(0);           }
}
@keyframes deslizeParaBaixo {
    0%   { opacity: 0;  -webkit-transform: translateY(-1000px);   transform: translateY(-1000px);   }
    100% { opacity: 1;  -webkit-transform: translateY(0);       transform: translateY(0);           }
}

/* Efeito - Impacto */
@-webkit-keyframes impacto {
    0%   { opacity: 0;  -webkit-transform: scale(50);   -ms-transform: scale(50);  transform: scale(50);    }
    10%  { opacity: 1;  -webkit-transform: scale(1.2);  -ms-transform: scale(1.2);  transform: scale(1.2);  }
    100% { opacity: 1;  -webkit-transform: scale(1.0);  -ms-transform: scale(1.0);  transform: scale(1.0);  }
}
@keyframes impacto {
    0%   { opacity: 0;  -webkit-transform: scale(50);   -ms-transform: scale(50);  transform: scale(50);    }
    10%  { opacity: 1;  -webkit-transform: scale(1.2);  -ms-transform: scale(1.2);  transform: scale(1.2);  }
    100% { opacity: 1;  -webkit-transform: scale(1.0);  -ms-transform: scale(1.0);  transform: scale(1.0);  }
}

/* Efeito - Zoom para fora */
@-webkit-keyframes zoomPraFora {
    0%   { opacity: 0;  -webkit-transform: scale(0);    -ms-transform: scale(0);    transform: scale(0);    }
    100% { opacity: 1;  -webkit-transform: scale(1.0);  -ms-transform: scale(1.0);  transform: scale(1.0);  }
}
@keyframes zoomPraFora {
    0%   { opacity: 0;  -webkit-transform: scale(0);    -ms-transform: scale(0);    transform: scale(0);    }
    100% { opacity: 1;  -webkit-transform: scale(1.0);  -ms-transform: scale(1.0);  transform: scale(1.0);  }
}

/* CLASSES DE TRANSIÇÃO */

.efeitoImpacto {
    opacity:0;
    -webkit-animation: impacto 5s ease;
    animation: impacto 5s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoFadeLento {
    opacity:0;
    animation: fade 3s;
    -webkit-animation: fade 3s;
    -moz-animation: fade 3s;
    -ms-animation: fade 3s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoFadeRapido {
    opacity:0;
    -webkit-animation: fade 1s ease-in-out;
    -moz-animation: fade 1s ease-in-out;
    -o-animation: fade 1s ease-in-out;
    animation: fade 1s ease-in-out; 
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoQuicar {
    opacity:0;
    -webkit-animation: quicar 2s ease;
    animation: quicar 2s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoDeslizeParaDireita {
    opacity:0;
    -webkit-animation: deslizeParaDireita 1s ease;
    animation: deslizeParaDireita 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoDeslizeParaEsquerda {
    opacity:0;
    -webkit-animation: deslizeParaEsquerda 1s ease;
    animation: deslizeParaEsquerda 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoDeslizeSuaveParaDireita {
    opacity: 0;
    -webkit-animation: deslizeSuaveParaDireita 1s ease;
    animation: deslizeSuaveParaDireita 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoDeslizeParaCima {
    opacity:0;
    -webkit-animation: deslizeParaCima 1s ease;
    animation: deslizeParaCima 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoDeslizeParaBaixo {
    opacity:0;
    -webkit-animation: deslizeParaBaixo 1s ease;
    animation: deslizeParaBaixo 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.efeitoApresentar {
    opacity:0;
    -webkit-animation: zoomPraFora 3s ease;
    animation: zoomPraFora 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.zoomButton:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/* DELAY DE TRANSIÇÃO */

.delay0_5s {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.delay1s {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

.delay1_5s {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.delay2s {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
}

.delay2_5s {
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    -o-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.delay3s {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
}

.delay3_5s {
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

.delay4s {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}

.delay4_5s {
    -webkit-animation-delay: 4.5s;
    -moz-animation-delay: 4.5s;
    -o-animation-delay: 4.5s;
    animation-delay: 4.5s;
}

.delay5s {
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}