/*  desvanecer ----------------------------------------------------*/
@-webkit-keyframes desvanecerNormal{
    from{
    opacity: 1;
    }
    to{
    opacity: 0;
    }
}
@keyframes desvanecerNormal{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
.desvanecerNormal{
    -webkit-animation-name: desvanecerNormal;
    animation-name: desvanecerNormal;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*  desvanecerEsquerda ----------------------------------------------------*/
@-webkit-keyframes desvanecerEsquerda{
    from{
    opacity: 1;
    }
    to{
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
}
@keyframes desvanecerEsquerda{
    from{
    opacity: 1;
    }
    to{
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
}
.desvanecerEsquerda{
    -webkit-animation-name: desvanecerEsquerda;
    animation-name: desvanecerEsquerda;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*  desvanecerDereita ----------------------------------------------------*/
@-webkit-keyframes desvanecerDereita{
    from{
    opacity: 1;
    }
    to{
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    }
}
@keyframes desvanecerDereita{
    from{
    opacity: 1;
    }
    to{
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    }
}
.desvanecerDereita{
    -webkit-animation-name: desvanecerDereita;
    animation-name: desvanecerDereita;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*  aparecerEsquerda ----------------------------------------------------*/
@-webkit-keyframes aparecerEsquerda{
    from{
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
    to{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}
@keyframes aparecerEsquerda{
    from{
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
    to{
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}
.aparecerEsquerda{
    -webkit-animation-name: aparecerEsquerda;
    animation-name: aparecerEsquerda;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*  aparecerDereita ----------------------------------------------------*/
@-webkit-keyframes aparecerDereita{
    from{
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    }
    to{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}
  @keyframes aparecerDereita{
    from{
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    }
    to{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}
.aparecerDereita{
    -webkit-animation-name: aparecerDereita;
    animation-name: aparecerDereita;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}