/* ##################################################

  ####################################################

  Principal

  ###################################################
  
##################################################### */

  /* ==================================================
  
    Cabecera
    
  ===================================================== */

/* ====================================================
    Variables
  ===================================================== */

.animate {
    animation-duration: 2s;
    animation-name: slidein;
}
  
@keyframes slidein {
    from {
        transform: scale(0.98);
        /*filter: blur(10px);*/
    }
  
    to {
        transform: scale(1);
        /*filter: blur(0px);*/
    }
}
.animate-left-to-center {
  animation-duration: 2s;
  animation-name: left-to-center;
}

@keyframes left-to-center {
  from {
      transform: translateX(-50px);
      /*filter: blur(10px);*/
  }

  to {
      transform: scale(1);
      /*filter: blur(0px);*/
  }
}

.animate-right-to-center {
  animation-duration: 2s;
  animation-name: right-to-center;
}

@keyframes right-to-center {
  from {
      transform: translateX(50px);
      /*width: calc(100% - 200px) !important;*/
      /*filter: blur(10px);*/
  }

  to {
      transform: scale(1);
      /*width: 100% !important;*/
      /*filter: blur(0px);*/
  }
}

.animate-page-scroll-1 {
    animation-duration: 2s;
    animation-name: page-scroll-1;
}
  
@keyframes page-scroll-1 {
    0% {
        transform: translateY(50px);
        /*filter: blur(10px);*/
    }
    100% {
        transform: scaleY(1);
        /*filter: blur(0px);*/
    }
  }

.animate-salida {
    animation-duration: 2s;
    animation-name: slidein-salida;
}
  
@keyframes slidein-salida {
    from {
        transform: scale(1);
        /*filter: blur(10px);*/
    }
  
    to {
        transform: scale(0.95);
        /*filter: blur(0px);*/
    }
  }

.animate-2 {
    animation-duration: 2s;
    animation-name: slidein-scale;
}
  
@keyframes slidein-scale {
    from {
        transform: scale(80%);
        transform: translateY(200px);
    }
  
    to {
        transform: scale(100%);
        transform: translateY(0);
    }
  }