/* Para controlar tipo de visualización del texto Próximamente*/
.txtp{
    display: none;
}
/* Define posición de la ventana de mensaje*/
.toast{
    position: absolute;
    top: 25px;
    right: 30px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    background: #fff;
    padding: 20px 35px 20px 25px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);    
    overflow: hidden;
    transform: translate(calc(100% + 30 px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    -webkit-transform: translate(calc(100% + 30 px));
    -moz-transform: translate(calc(100% + 30 px));
    -ms-transform: translate(calc(100% + 30 px));
    -o-transform: translate(calc(100% + 30 px));
}

/* Define comportamiento de la ventana de mensaje*/
.toast.active{
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
}

/* Define formato de la ventana de mensaje*/
.toast .toast-content{
    display: flex;
    align-items: center;
}

/* Define formato del icono */
.toast-content .check{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;    
    color: #fff;
    font-size: 20PX;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/* Define alineación del texto del mensaje */
.toast-content .message{
    display: flex;
    flex-direction: column;
    margin: 0 20px ;
}

/* Color de fondo de los iconos según tipo de mensaje */
.toast-content.success .check {
    background-color: #0ABF30;
}

.toast-content.error .check {
    background-color: #E24D4C;
}

.toast-content.warning .check {
    background-color: #E9BD0C;
}

.toast-content.info .check {
    background-color: #3498DB;
}


/* Color de la decoración izquierda del mensaje  según tipo de mensaje*/
.toast.success{
    border-left: 6px solid #0ABF30;
}

.toast.error{
    border-left: 6px solid #E24D4C;
}

.toast.warning{
    border-left: 6px solid #E9BD0C;
}

.toast.info{
    border-left: 6px solid #3498DB;
}

/* Formato del texto del mensaje */
.message .text{
    font-size: 20px;
    font-weight: 400;
    color: #666666;
}

/* Color del título del mensaje */
.message .text.text-1{
    font-weight: 600;
    color: #333;
}

/* Formato del icono de cerrar mensaje */
.toast .close{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

/* Formato del icono de cerrar mensaje al pasar el cursor sobre el */
.toast .close:hover{
    opacity: 1;
}

/* Decoración inferior */
.toast .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}

.toast .progress:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

/* Animación de la decoración parte inferior del mensaje */
.progress.active:before{
    animation: progress 5s linear forwards;
    -webkit-animation: progress 5s linear forwards;
}

@keyframes progress {
    100%{
        right: 100%;
    }
}

/* Color de la decoración parte inferior del mensaje según su tipo */
.toast .progress.success:before{
    background-color: #0ABF30;
}

.toast .progress.error:before{
    background-color: #E24D4C;
}

.toast .progress.warning:before{
    background-color: #E9BD0C;
}

.toast .progress.info:before{
    background-color: #3498DB;
}

/* Animación del texto Únete a nuestra lista ... */
.ani {
    transform: translateY(3px);
}

.text_ani {   
  animation-name: wiggleWiggle;
  animation-duration: 1.25s;
  animation-direction: alternate;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
}

@keyframes wiggleWiggle {
  20%,
  100% {
    transform: translate(0, 3px);
  }

  0% {
    transform: translate(0, 0px);
  }
  10% {
    transform: translate(0, 3px);
  }
}

/* Animación del texto Próximamente */
.text-1 {
    display: flex;
    font-size: 4rem;
    vertical-align: inherit;
    color: #9A9CA8;
}
.p {
    opacity: 0;
    animation: drop 0.4s linear forwards;
}
.r {
    opacity: 0;
    animation: drop 0.4s linear forwards 0.2s;
}
.o {
    opacity: 0;
    animation: drop 0.4s linear forwards 0.4s;
}
.x {
    opacity: 0;
    animation: drop 0.4s linear forwards 0.6s;
}
.i {
    opacity: 0;
    animation: drop 0.4s linear forwards 0.8s;
}
.m{
    opacity: 0;
    animation: drop 0.4s linear forwards 1.2s;    
}
.a{
    opacity: 0;
    animation: drop 0.4s linear forwards 1.4s;    
}
.m2{
    opacity: 0;
    animation: drop 0.4s linear forwards 1.6s;    
}
.e{
    opacity: 0;
    animation: drop 0.4s linear forwards 1.8s;    
}
.n{
    opacity: 0;
    animation: drop 0.4s linear forwards 2.2s;    
}
.t{
    opacity: 0;
    animation: drop 0.4s linear forwards 2.4s;
}
.e2 {
    opacity: 0;
    animation: drop 0.4s linear forwards 2.6s;
}
@keyframes drop {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }
    50% {
        transform: translateY(0px);
        opacity: 1;
    }
    65% {
        transform: translateY(-17px);
        opacity: 1;
    }
    75% {
        transform: translateY(-22px);
        opacity: 1;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}