body {
     font-family: 'book';
     line-height: 1.15 !important;
     color: #424242 !important;
 }

 /* menu principal*/

 nav {
     position: fixed;
     z-index: 99;
     width: 100%;
     background: #242526;
 }

 nav .wrapper {
     position: relative;
     max-width: 1300px;
     padding: 0px 30px;
     height: 70px;
     line-height: 70px;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .wrapper .logo a {
     color: #f2f2f2;
     font-size: 30px;
     font-weight: 600;
     text-decoration: none;
 }

 .wrapper .nav-links {
     display: inline-flex;
 }

 .nav-links li {
     list-style: none;
     margin-bottom: 5px;
     margin-top: 5px;
 }

 .nav-links li a {
     color: #f2f2f2;
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
     padding: 9px 15px;
     border-radius: 5px;
     transition: all 0.3s ease;
     padding-top: 5px !important;
     padding-bottom: 5px !important;
 }

 .nav-links li a:hover {
     background: #0082ca;
 }

 .nav-links .mobile-item {
     display: none;
 }

 .nav-links .drop-menu {
     position: absolute;
     background: #242526;
     width: 300px;
     margin-left: -150px;
     line-height: 24px;
     top: 85px;
     opacity: 0;
     visibility: hidden;
     box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }

 .nav-links li:hover .drop-menu,
 .nav-links li:hover .mega-box {
     transition: all 0.3s ease;
     top: 70px;
     opacity: 1;
     visibility: visible;
 }

 .drop-menu li a {
     width: 85%;
     display: block;
     padding: 0 0 0 15px;
     font-weight: 400;
     border-radius: 0px;
 }

 .mega-box {
     position: absolute;
     left: 0;
     width: 100%;
     padding: 0 30px;
     top: 85px;
     opacity: 0;
     visibility: hidden;
 }

 .mega-box .content {
     background: #242526;
     padding: 25px 20px;
     display: flex;
     width: 100%;
     justify-content: space-between;
     box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }

 .mega-box .content .row {
     width: calc(25% - 30px);
     line-height: 45px;
 }

 .content .row img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .content .row header {
     color: #f2f2f2;
     font-size: 20px;
     font-weight: 500;
 }

 .content .row .mega-links {
     margin-left: -40px;
     border-left: 1px solid rgba(255, 255, 255, 0.09);
 }

 .row .mega-links li {
     padding: 0 20px;
 }

 .row .mega-links li a {
     padding: 0px;
     padding: 0 20px;
     color: #d9d9d9;
     font-size: 17px;
     display: block;
 }

 .row .mega-links li a:hover {
     color: #f2f2f2;
 }

 .wrapper .btn {
     color: #fff;
     font-size: 20px;
     cursor: pointer;
     display: none;
 }

 .wrapper .btn.close-btn {
     position: absolute;
     right: 30px;
     top: 10px;
 }


 nav input {
     display: none;
 }

 hr {
     background-color: #fff;
     padding: 0px !important;
     margin: 0px !important;
     width: 90%;
 }

 hr.hr-1 {
     border: 1;
     border-color: #fff;
     height: 1px;
     background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
     padding: 0px !important;
     margin: 0px !important;
 }


 /* Submenú (tercer nivel) ------------------------------------------------------------------*/
 .nav-links .drop-menu li.has-submenu {
     position: relative;
 }


 .nav-links .drop-menu li .sub-menu {
     position: absolute;
     left: 95%;
     top: 0;
     background: #242526;
     min-width: 220px;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
     z-index: 100;
 }

 .nav-links .drop-menu li:hover>.sub-menu {
     opacity: 1;
     visibility: visible;
 }

 .nav-links .drop-menu li .sub-menu li a {
     color: #f2f2f2;
     /*padding: 10px 15px;*/
     display: block;
     font-size: 15px;
 }

 .nav-links .drop-menu li .sub-menu li a:hover {
     background: #0082ca;
     padding-right: 10px;
 }


 /*Fin menú principal*/

 .misvis {
     font-size: 35px !important;
 }

 .misvis-space {
     position: relative;
     margin-top: 18% !important;
 }

 .firttitle {
     color: #ffffff !important;
 }


 .img-fullscreen {
     width: 100vw;
     /* 100% del ancho del viewport */
     height: 100vh;
     /* 100% del alto del viewport */
     object-fit: cover;
     /* Cubre todo el contenedor sin deformarse */
     display: block;
 }



 .logomicro {
     width: 200px !important;
     height: auto !important;
     margin-bottom: 5px !important;
 }

 .logo-center {
     width: 250px !important;
     height: auto !important;
     position: relative;
     top: -0px;
     left: 42.5% !important;

 }



 .sloganleft {
     margin-right: auto !important;
     color: #424242 !important;
 }

 .sloganrigth {
     margin-left: 60% !important;
     margin-right: auto !important;
     color: #424242 !important;
 }

 .uk-width-1-2 {
     width: 50% !important;
 }

 canvas,
 img,
 svg,
 video {
     border-radius: 10px !important;
 }

 @font-face {
     font-family: 'black';
     /* El nombre de la fuente para usar en CSS */
     src: url('../fonts/GothamBlack.otf') format('opentype');
     font-weight: 800;
     font-style: normal;
 }

 @font-face {
     font-family: 'book';
     /* El nombre de la fuente para usar en CSS */
     src: url('../fonts/Raleway-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'helvetica';
     /* El nombre de la fuente para usar en CSS */
     src: url('../fonts/HelveticaLTStd-Fractions.otf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

 /* Aplica la fuente 'black' a todos los encabezados de UIkit */
 .uk-h1,
 .uk-h2,
 .uk-h4,
 .uk-h5,
 .uk-h6,
 h1,
 h2,
 h4,
 h5,
 h6 {
     font-family: 'black' !important;
 }


 .uk-h5,
 h5 {
     font-size: 25px !important;
     margin-bottom: 0px !important;
     line-height: 1 !important;
     margin-left: 20px !important;
 }

 .uk-h6,
 h6 {
     font-size: 17px !important;
     margin-bottom: 0px !important;
 }

 .font-type {
     font-family: 'book' !important;
     color: #444444 !important;
 }

 .font-book {
     font-family: 'book' !important;
     text-align: justify;
     font-size: 15px !important;
 }


 .slogan {
     width: 68% !important;
     font-size: 19px !important;
     font-weight: 1000 !important;
     /* O cualquier otro valor de ancho */
     margin-left: auto !important;
     margin-right: auto !important;
     margin-bottom: 50px;
     color: #ffffff;
 }

 .font-black {
     font-family: 'black', sans-serif !important;
 }

 p {
     font-family: 'book' !important;
     margin: 0px 0px 0px 30px !important;
 }

 .animacion-lenta {
     animation-duration: 30s !important;
 }

 .fondo-code {
     background-image: url('../img/bg/bg-code-index-m.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 60vh;
     width: 100% !important;

     /* 100% del alto de la pantalla */
 }

 .fondo-trans {
     background-image: url('../img/bg/bg-peaje-index-m.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 60vh;
     width: 100% !important;
     /* 100% del alto de la pantalla */
 }

 .fondo-services {
     background-image: url('../img/bg/bg-kioscos-index-m.webp') !important;
     background-size: cover !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
     height: 60vh;
     width: 100% !important;
     /* 100% del alto de la pantalla */
 }

 .fondo-recaudo {
     background-image: url('../img/bg/bg-acceso-tren-sub.webp') !important;
     background-size: cover !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
     background-attachment: fixed;
     /* 100% del alto de la pantalla */
 }

 .fondo-recaudo-1 {
     background-image: url('../img/bg/bg-alpha01-11.jpg') !important;
     background-size: cover !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
     height: 70vh;
     /* 100% del alto de la pantalla */
 }

 .section {
     width: 100%;
     display: inline-block;
     background: #333;
     height: 50vh;
     text-align: center;
     font-size: 22px;
     font-weight: 700;
     text-decoration: underline;
 }


 .bgcolor-ini {
     background-color: rgba(0, 0, 0, 0.5) !important;
     background-size: 50% 100% !important;
     color: #fff;
     padding-top: 100% !important;
     padding-bottom: 100% !important;
     width: 100% !important;
     font-size: 20px;
     font-family: black;
 }


 .bgcolor-1 {
     background-color: #f2f2f2 !important;
     color: #0082CA;
 }

 .bg-section {
     background-color: #f2f2f2 !important;
 }

 .bg-section-0 {
     background-image: url('../img/bg/nosotros-2.webp');
     background-repeat: no-repeat;
     background-position: center bottom !important;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-contact {
     background-image: url('../img/bg/nosotros-2.webp');
     background-repeat: no-repeat;
     background-position: center bottom !important;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-contact-form {
     background-image: url('../img/bg/planta-bg-blanco-1.webp');
     background-repeat: no-repeat;
     background-position: center bottom !important;
     background-size: cover !important;
     background-attachment: fixed;
 }


 .bg-section-1 {
     background-image: url('../img/bg/bg-alpha01-11.jpg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-chapa {
     background-image: url('../img/bg/chapa-randomica-gris.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-chapa-color {
     background-color: #cedfe5;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }


 .bg-section-sistema-aims {
     background-image: url('../img/bg/sistema-aims-gris.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-app-aims {
     background-image: url('../img/bg/app-aims-gris.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-tvm-w {
     background-image: url('../img/bg/bg-microsafe-s.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-tvm-b {
     background-image: url('../img/bg/sistema-tvm-100.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-tvm-l-b {
     background-image: url('../img/bg/sistema-tvm-100l.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-validador {
     background-image: url('../img/bg/bg-validador-de-tarjetas.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-recaudo {
     background-image: url('../img/bg/bg-recaudo-peaje-1.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-2 {
     background-image: url('../img/bg/bg-blue-01-11.jpg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-nosotros {
     background-image: url('../img/bg/diseño-industrial-bg-blanco.jpg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-code {
     height: 800px !important;
     width: auto !important;
     background-image: url('../img/bg/bg-app-index.webp');
     animation: bg-section-code 20s ease-in-out infinite alternate;

 }


 .bg-section-diseno-ind {
     background-image: url('../img/bg/diseño-industrial-bg-blanco.webp');
     animation: bg-section-code 20s ease-in-out infinite alternate;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-valores {
     background-image: url('../img/bg/integracion-bg-valores.webp');
     animation: bg-section-code 20s ease-in-out infinite alternate;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover !important;
     background-attachment: fixed;
 }

 .bg-section-microsafe-s {
     background-image: url('../img/bg/bg-microsafe-s.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-accesos-masivos {
     background-image: url('../img/bg/bg-accesos-masivos.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-accesos-torniquetes {
     background-image: url('../img/bg/bg-section-accesos-torniquetes.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-accesos-torniquetes-cortesia {
     background-image: url('../img/bg/bg-section-accesos-torniquete-cortesia.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-accesos-torniquetes-vertical {
     background-image: url('../img/bg/bg-section-accesos-torniquete-vertical.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-accesos-cortesia {
     background-image: url('../img/bg/bg-section-accesos-cortesia.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }


 .bg-section-encausadores {
     background-image: url('../img/bg/bg-section-encausadores.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-contador-pasajeros {
     background-image: url('../img/bg/bg-section-contador-pasajeros.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
     
 }

 .bg-section-kiosco-autoservicio {
     background-image: url('../img/bg/bg-section-kioscos-autoservicio.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-kiosco-autoservicio-plaza {
     background-image: url('../img/bg/bg-plaza-kiosco.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

  .bg-section-traslado {
     background-image: url('../img/bg/bg-industrias-traslado-valores.webp');
     background-repeat: no-repeat;
     background-position: center rightleft;
     background-size: cover;
     background-attachment: fixed;
     width: 100vw;    
     height: 100vh;
 }

 .bg-section-bg-kiosco-orange {
     background-image: url('../img/bg/bg-industrias-kiosco.webp');
     background-repeat: no-repeat;
     background-position: center left;
     background-size: cover;
     background-attachment: fixed;
     width: 100vw;    
     height: 100vh;
 }

 .bg-seccion-transporte-masivo {
     background-image: url('../img/bg/bg-industrias-industrias.webp') !important;
     background-repeat: no-repeat;
     background-position: center left;
     background-size: cover;
     background-attachment: fixed;
      width: 100vw;    
     height: 100vh;
 }



 .bg-section-seguridad {
     background-image: url('../img/bg/bg-industrias-seguridad.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
     width: 100vw;    
     height: 100vh;
 }



  .bg-section-entretenimiento {
     background-image: url('../img/bg/bg-industrias-entretenimiento-1.webp');
     background-repeat: no-repeat;
     background-position: center left;
     background-size: cover;
     background-attachment: fixed;
     width: 100vw;    
     height: 100vh;
 }


  .bg-section-banca-consumo {
     background-image: url('../img/bg/bg-idustrias-banca-sonsumo.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
     width: 100vw;    
     height: 100vh;
 }

 .bg-section-bg-kiosco-retail {
     background-image: url('../img/bg/bg-industrias-retail.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
     width: 100vw;    
     height: 100vh;
 }

 .bg-section-bg-produc-service {
     background-image: url('../img/bg/productos-y-servicios-w.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-bg-kiosco-recirculador {
     background-image: url('../img/bg/bg-section-kiosco-recirculador.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-bg-atalaya {
     background-image: url('../img/bg/bg-section-atalaya.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-taquilla-manual {
     background-image: url('../img/bg/bg-section-taquilla-manual.webp');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-bg-produc-service-blur {
     background-image: url('../img/bg/prodproductos-y-servicios-blur-1.webp') !important;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .uk-section-muted {
     background: #E6E9F2 !important;
 }


.bg-w{
    background-color: rgb(255 255 255 / 0.9)!important;
    border-radius: 10px!important;
    margin-top: 100px!important;
    margin-bottom: 100px!important;
    
}
.spaceright{
    padding-right: 30px!important;
}


 @keyframes bg-section-code {
     from {
         background-size: 100% 100%;
     }

     to {
         background-size: 110% 110%;
     }
 }


 .bg-section-peaje {
     height: 800px !important;
     background-image: url(../img/bg/bg-tvm-index.webp);
     animation: bg-section-peaje 20s ease-in-out infinite alternate;
 }


 @keyframes bg-section-peaje {
     from {
         background-size: 100% 100%;
     }

     to {
         background-size: 110% 110%;
     }
 }


 .bg-section-serv {
     height: 800px !important;
     background-image: url(../img/bg/bg-kioscos-index.webp) !important;
     animation: bg-section-serv 20s ease-in-out infinite alternate;
 }


 @keyframes bg-section-serv {
     from {
         background-size: 100% 100%;
     }

     to {
         background-size: 110% 110%;
     }
 }



 .uk-card-default {
     background-color: transparent !important;
     box-shadow: 0 5px 15px rgba(0, 0, 0, .00) !important;
 }


 .bg-section-parquimetro {
     background-image: url('../img/bg/estacionamiento-publico-gris.webp') !important;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 .bg-section-parquimetro-b {
     background-image: url('../img/bg/bg-parquimetro.webp') !important;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
 }

 




 .colorbtn-1 {
     background-color: #0082CA;
 }


 .color-title {
     color: #444444 !important;
     font-weight: 700;
 }

 .article-title {
     color: #ffffff !important;

 }

 .uk-overlay-primary {
     background: rgba(0, 0, 0, .4) !important;
 }

 .uk-align-center {
     margin-left: auto;
     margin-right: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 }

 .uk-overlay {
     padding: 15px 30px !important;
 }



 .uk-child-width-1-2\@m>* {
     width: 50%;
     height: auto !important;
 }

 .colortext {
     color: #ffffff !important;
     text-decoration: none !important;
 }

 .colortext-black {
     color: #444444 !important;
     text-decoration: none !important;
 }

 .uk-link,
 a {
     color: #ffffff !important;
     text-decoration: none !important;
     cursor: pointer !important;
 }

 .color-text {
     color: #444444 !important;
     text-decoration: none !important;
 }


 .color-change-2x {
     animation: color-change-2x 6s linear infinite alternate both;
 }

 @keyframes color-change-2x {
     0% {
         background: #011C40;
     }

     100% {
         background: #083359;
     }
 }


 .footer-distributed {
     background-image: url('../img/bg/bottom-index.webp') !important;
     background-repeat: no-repeat;
     background-size: 100% !important;
     background-position: center bottom;
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
     box-sizing: border-box;
     width: 100% !important;
     text-align: left;
     font: bold 16px sans-serif;
     padding: 55px 50px;
 }

 .footer-distributed .footer-left,
 .footer-distributed .footer-center,
 .footer-distributed .footer-right {
     display: inline-block;
     vertical-align: top;
 }

 /* Footer left */

 .footer-distributed .footer-left {
     width: 40%;
 }

 /* The company logo */

 .footer-distributed h3 {
     color: #ffffff;
     font: normal 36px 'Open Sans', cursive;
     margin: 0;
 }


 .footer-distributed h3 span {
     color: lightseagreen;
 }

 /* Footer links */

 .footer-distributed .footer-links {
     color: #ffffff;
     margin: 20px 0 12px;
     padding: 0;
 }

 .footer-distributed .footer-links a {
     display: inline-block;
     line-height: 1.8;
     font-weight: 400;
     text-decoration: none;
     color: inherit;
 }

 .footer-distributed .footer-company-name {
     font-family: book;
     color: #fff;
     font-size: 14px;
     font-weight: normal;
     margin: 0;
 }

 /* Footer Center */

 .footer-distributed .footer-center {
     width: 35%;
 }

 .footer-distributed .footer-center i {
     background-color: #33383b;
     color: #ffffff;
     font-size: 25px;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     text-align: center;
     line-height: 42px;
     margin: 10px 15px;
     vertical-align: middle;
     font-family: 'book' !important;
 }

 .footer-distributed .footer-center i.fa-envelope {
     font-size: 17px;
     line-height: 38px;
 }

 .footer-distributed .footer-center p {
     display: inline-block;
     color: #ffffff;
     font-weight: 400;
     vertical-align: middle;
     margin: 0;
     font-family: 'book' !important;
 }

 .footer-distributed .footer-center p span {
     display: block;
     font-weight: normal;
     font-size: 14px;
     line-height: 2;
     font-family: 'book' !important;
 }

 .footer-distributed .footer-center p a {
     color: lightseagreen;
     text-decoration: none;
     ;
 }

 .footer-distributed .footer-links a:before {
     content: "|";
     font-weight: 300;
     font-size: 20px;
     left: 0;
     color: #fff;
     display: inline-block;
     padding-right: 5px;
 }

 .footer-distributed .footer-links .link-1:before {
     content: none;
 }

 /* Footer Right */

 .footer-distributed .footer-right {
     width: 20%;
 }

 .footer-distributed .footer-company-about {
     line-height: 20px;
     color: #92999f;
     font-size: 13px;
     font-weight: normal;
     margin: 0;
 }

 .footer-distributed .footer-company-about span {
     display: block;
     color: #ffffff;
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 20px;
 }

 .footer-distributed .footer-icons {
     margin-top: 25px;
 }

 .footer-distributed .footer-icons a {
     display: inline-block;
     width: 35px;
     height: 35px;
     cursor: pointer;
     border-radius: 2px;
     font-size: 20px;
     color: #ffffff;
     text-align: center;
     line-height: 35px;
     margin-bottom: 5px;
 }



 .gm-logos {
     margin-top: 33%;
     margin-left: 00% !important;
     width: 30% !important;
 }

 .buttonsecc {
     background-color: rgba(0, 130, 200, 1) !important;
     color: #ffffff !important;
     border-radius: 5px;
     width: 20% !important;
 }

 .buttonsecc-ind {
     background-color: rgba(0, 130, 200, 1) !important;
     color: #ffffff !important;
     border-radius: 5px;
     width: 25% !important;
     margin-left: 40% !important;
 }



 .buttonslideprod {
     background-color: rgba(0, 130, 200, 1) !important;
     color: #ffffff !important;
     border-radius: 5px;
     width: 100% !important;
 }

 .icons {
     width: 50px;
     padding-bottom: 10px;
     margin-top: 30%;
     margin-right: 20px !important;
     margin-left: 20px !important;
 }

 .subir {
     z-index: 100;
     width: 80px;
     padding: 5px;
     position: fixed;
     top: 87%;
     right: 10px;
 }

 .whats {
     width: 70px;
     padding: 5px;
     position: fixed;
     top: 77% !important;
     right: 12px;
     z-index: 100;
 }


 .card {
     width: 400px;
     background: #fff;
     height: 90% !important;
     border-radius: 5px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
     transition: .3s;
     font-family: 'Segoe UI', sans-serif;
     margin: 20px auto;
     overflow: hidden;
     position: relative;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15)
 }

 .badge {
     position: absolute;
     top: 10px;
     right: 10px;
     background: #FFB30D;
     color: #fff;
     padding: 5px 10px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     border-radius: 10px;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
     z-index: 10
 }

 .tilt {
     overflow: hidden;
 }

 .img {
     height: 200px;
     overflow: hidden
 }

 .img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s
 }

 .card:hover .img img {
     transform: scale(1.05)
 }

 .info {
     padding: 20px
 }

 .cat {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: #71717A;
     margin-bottom: 5px
 }

 .title {
     font-size: 18px !important;
     font-weight: 700;
     color: #444444;
     margin: 0 0 15px;
 }






 .desc {
     font-size: 13px;
     color: #52525B;
     line-height: 1.4;
     margin-bottom: 12px
 }

 .feats {
     display: flex;
     gap: 6px;
     margin-bottom: 15px
 }

 .feat {
     font-size: 10px;
     background: #F4F4F5;
     color: #71717A;
     padding: 3px 8px;
     border-radius: 10px;
     font-weight: 500
 }

 .bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px
 }

 .price {
     display: flex;
     flex-direction: column
 }

 .old {
     font-size: 13px;
     text-decoration: line-through;
     color: #A1A1AA;
     margin-bottom: 2px
 }

 .new {
     font-size: 20px;
     font-weight: 700;
     color: #18181B
 }

 .btn_card {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 65%;
 }

 .btn_card:hover {
     background: linear-gradient(45deg, #27272A, #3F3F46);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
 }

 .btn_card:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
     transition: .5s
 }

 .btn_card:hover:before {
     left: 100%
 }

 .icon {
     transition: transform .3s
 }

 .btn_card:hover .icon {
     transform: rotate(-10deg) scale(1.1)
 }

 .meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid #F4F4F5;
     padding-top: 12px
 }

 .rating {
     display: flex;
     align-items: center;
     gap: 2px
 }

 .rcount {
     margin-left: 6px;
     font-size: 11px;
     color: #71717A
 }

 .stock {
     font-size: 11px;
     font-weight: 600;
     color: #22C55E
 }


 .card-2 {
     width: 100% !important;
     background: #fff;
     border-radius: 5px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
     transition: .3s;
     font-family: 'Segoe UI', sans-serif;
     margin: 20px auto;
     overflow: hidden;
     position: relative;
 }

 .card-2:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15)
 }

 .card-2:hover .img img {
     transform: scale(1.05)
 }

 .btn_card-2 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 75%;
 }

 .btn_card-2:hover {
     background: linear-gradient(45deg, #27272A, #3F3F46);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
 }

 .btn_card-2:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
     transition: .5s
 }

 .btn_card-2:hover:before {
     left: 100%
 }

 .icon {
     transition: transform .3s
 }

 .btn_card-2:hover .icon {
     transform: rotate(-10deg) scale(1.1)
 }

 .img1 img {
     width: 100%;
     height: 330px;
     object-fit: cover;
     transition: transform .5s
 }


 .btn_card-3 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 40% !important;
     margin-right: 40% !important;
     margin-top: 10%;
 }

 .btn_card-3:hover {
     background: linear-gradient(45deg, #27272A, #3F3F46);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
 }

 .btn_card-3:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
     transition: .5s
 }

 .btn_card-3:hover:before {
     left: 100%
 }

 .icon {
     transition: transform .3s
 }

 .btn_card-3:hover .icon {
     transform: rotate(-10deg) scale(1.1)
 }

 .btn_card-4 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 75%;
     margin-top: -10px;
 }


 .btn_card-5 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 75%;
 }

 .btn_card-5:hover {
     background: linear-gradient(45deg, #27272A, #3F3F46);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
 }

 .btn_card-5:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
     transition: .5s
 }

 .btn_card-5:hover:before {
     left: 100%
 }

 .icon {
     transition: transform .3s
 }

 .btn_card-5:hover .icon {
     transform: rotate(-10deg) scale(1.1)
 }

 .img1 img {
     width: 100%;
     height: 330px;
     object-fit: cover;
     transition: transform .5s
 }


 .card-6 {
     width: 90%;
     background: #fff;
     border-radius: 5px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
     transition: .3s;
     font-family: 'Segoe UI', sans-serif;
     margin: 20px auto;
     overflow: hidden;
     position: relative;
 }

 .img-6 {
     height: 350px !important;
     overflow: hidden
 }

 .card-6:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15)
 }

 .card-6:hover .img img {
     transform: scale(1.1)
 }

 .btn_card-6 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 75%;
 }

 .btn_card-6:hover {
     background: linear-gradient(45deg, #27272A, #3F3F46);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
 }

 .btn_card-6:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
     transition: .5s
 }

 .btn_card-6:hover:before {
     left: 100%
 }

 .icon {
     transition: transform .3s
 }

 .btn_card-6:hover .icon {
     transform: rotate(-10deg) scale(1.1)
 }

 .img1 img {
     width: 100%;
     height: 330px;
     object-fit: cover;
     transition: transform .5s
 }


 .card-7 {
     width: 100%;
     background: #fff;
     border-radius: 5px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
     transition: .3s;
     font-family: 'Segoe UI', sans-serif;
     margin: 20px auto;
     overflow: hidden;
     position: relative;
 }

 .img-7 {
     height: 150px !important;
     overflow: hidden
 }

 .card-7:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15)
 }

 .card-7:hover .img img {
     transform: scale(1.1)
 }

 .btn_card-7 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 75%;
 }

 .btn_card-7:hover {
     background: linear-gradient(45deg, #27272A, #3F3F46);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
 }

 .btn_card-7:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
     transition: .5s
 }

 .btn_card-7:hover:before {
     left: 100%
 }

 .icon {
     transition: transform .3s
 }

 .btn_card-7:hover .icon {
     transform: rotate(-10deg) scale(1.1)
 }

 .img1 img {
     width: 100%;
     height: 330px;
     object-fit: cover;
     transition: transform .5s
 }

 .card-9 {
     width: 100%;
     background: #fff;
     border-radius: 5px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
     transition: .3s;
     font-family: 'Segoe UI', sans-serif;
     margin: 20px auto;
     overflow: hidden;
     position: relative;
 }

 .img-9 {
     height: 310px !important;
     overflow: hidden
 }

 .card-9:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15)
 }

 .card-9:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15)
 }

 .card-9:hover .img img {
     transform: scale(1.1)
 }

 .btn_card-9 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 75%;
 }

 .btn_card-9:hover {
     background: linear-gradient(45deg, #27272A, #3F3F46);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
 }

 .btn_card-9:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
     transition: .5s
 }

 .btn_card-9:hover:before {
     left: 100%
 }

 .icon {
     transition: transform .3s
 }

 .btn_card-9:hover .icon {
     transform: rotate(-10deg) scale(1.1)
 }

 .img1 img {
     width: 100% !important;
     height: 330px;
     object-fit: cover;
     transition: transform .5s
 }

 .card-8 {
     width: 100%;
     background: transparent;
     border-radius: 5px;
     transition: .3s;
     font-family: 'Segoe UI', sans-serif;
     margin: 20px auto;
     overflow: hidden;
     position: relative;
     cursor: pointer
 }

 .img-8 {
     height: 310px;
     overflow: hidden
 }

 .card-8:hover {
     transform: translateY(-5px);
     box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .5)
 }

 .card-8:hover .img img {
     transform: scale(1.1)
 }

 .btn_card-8 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 75%;
 }

 .btn_card-8:hover {
     background: linear-gradient(45deg, #27272A, #3F3F46);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
 }

 .btn_card-8:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
     transition: .5s
 }

 .btn_card-8:hover:before {
     left: 100%
 }

 .icon {
     transition: transform .3s
 }

 .btn_card-8:hover .icon {
     transform: rotate(-10deg) scale(1.1)
 }

 .img1 img {
     width: 100% !important;
     height: 330px;
     object-fit: cover;
     transition: transform .5s
 }


 .convers {
     padding-top: -0px !important;
     font-size: 55px !important;
 }

 /* scroll down */

 #mouse-scroll {
     style: block;
 }

 #mouse-scroll {
     position: fixed;
     margin: auto;
     left: 50%;
     top: 85%;
     -webkit-transform: translateX(-50%);
     z-index: 9999;
 }

 #mouse-scroll span {
     display: block;
     width: 10px;
     height: 10px;
     -ms-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     transform: rotate(45deg);
     border-right: 2px solid #fff;
     border-bottom: 2px solid #fff;
     margin: 0 0 3px 5px;
 }

 #mouse-scroll .mouse {
     height: 30px;
     width: 19px;
     border-radius: 10px;
     -webkit-transform: none;
     -ms-transform: none;
     transform: none;
     border: 2px solid #ffffff;
     top: 170px;
 }

 #mouse-scroll .down-arrow-1 {
     margin-top: 6px;
 }

 #mouse-scroll .down-arrow-1,
 #mouse-scroll .down-arrow-2,
 #mouse-scroll .down-arrow-3 {
     -webkit-animation: mouse-scroll 1s infinite;
     -moz-animation: mouse-scroll 1s infinite;
 }

 #mouse-croll .down-arrow-1 {
     -webkit-animation-delay: .1s;
     -moz-animation-delay: .1s;
     -webkit-animation-direction: alternate;
 }

 #mouse-scroll .down-arrow-2 {
     -webkit-animation-delay: .2s;
     -moz-animation-delay: .2s;
     -webkit-animation-direction: alternate;
 }

 #mouse-scroll .down-arrow-3 {
     -webkit-animation-delay: .3s;
     -moz-animation-dekay: .3s;
     -webkit-animation-direction: alternate;
 }

 #mouse-scroll .mouse-in {
     height: 5px;
     width: 2px;
     display: block;
     margin: 5px auto;
     background: #ffffff;
     position: relative;
 }

 #mouse-scroll .mouse-in {
     -webkit-animation: animated-mouse 1.2s ease infinite;
     moz-animation: mouse-animated 1.2s ease infinite;
 }

 @-webkit-keyframes animated-mouse {
     0% {
         opacity: 1;
         -webkit-transform: translateY(0);
         -ms-transform: translateY(0);
         transform: translateY(0);
     }

     100% {
         opacity: 0;
         -webkit-transform: translateY(6px);
         -ms-transform: translateY(6px);
         transform: translateY(6px);
     }
 }

 @-webkit-keyframes mouse-scroll {
     0% {
         opacity: 1;
     }

     50% {
         opacity: .5;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes mouse-scroll {
     0% {
         opacity: 0;
     }

     50% {
         opacity: 0.5;
     }

     100% {
         opacity: 1;
     }
 }

 .mi-animacion {
     animation: slideLeft 0.5s ease-out;
     transform-origin: center center;
     /* igual a uk-transform-origin-center-center */
 }

 .mi-animacion-reversa {
     animation: slideLeft 0.5s ease-out reverse;
     /* igual a uk-animation-reverse */
     transform-origin: center center;
 }

 /* Ejemplo de animación */
 @keyframes slideLeft {
     from {
         transform: translateX(-100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 .contenedor-flex {
     display: flex;
     justify-content: center;
     /* Centrado horizontal */
     align-items: center;
     /* Centrado vertical */
     height: 80px;
     /* Es necesario darle una altura al contenedor */
     box-shadow: none !important;
 }

 .uk-h2,
 h2 {
     font-size: 25px;
     margin-bottom: 35px !important;
     margin-left: 20px !important;
     line-height: 1;
 }

 .title-1 {
     font-size: 25px !important;
     font-weight: 700;
     color: #444444;
     margin: 0 0 15px;

 }

 .uk-button {
     border-radius: 50px !important;
 }

 .space-top-bottom {
     margin-top: 25px !important;
     margin-bottom: 25px !important;
     margin-left: 20px !important;
     width: 40 !important;
     background-color: rgba(0, 130, 200, 1) !important;
     color: #ffffff !important;
 }

 .space-top-bottom-1 {
     margin-top: 90px !important;
     margin-bottom: 0px !important;
 }

 .space-title-t-b {
     margin-top: 100px !important;
     margin-bottom: 30px !important;
 }

 .spacetop {
     margin-top: 12% !important;
 }

 .spacetop-rubro {
     margin-top: 13% !important;
     margin-bottom: 0% !important;
 }

 .spacetop-1 {
     margin-top: 10% !important;
 }

 .spacetop-2 {
     margin-top: 35% !important;
 }

 .spacetop-3 {
     margin-top: 2% !important;
 }

 .spacetop-4 {
     margin-top: 18% !important;
 }


 .uk-slider-per {
     margin: 0px 0px 0px 0px !important;
 }

 .frec {
     padding-left: 20px !important;
     padding-right: 20px !important;
 }

 .valor {
     font-family: book !important;
     font-weight: 600 !important;
     color: #444444 !important;

 }

 .icon-valor {
     width: 50% !important;
 }

 .align-p {
     padding-top: 60px !important;
     padding-bottom: 60px !important;
     padding-left: 70px !important;
 }


 form {
     width: 80% !important;
     padding: 3em 2em 2em 2em;
     background: #fafafa;
     border: 1px solid #ebebeb;
     border-radius: 10px !important;
     box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
 }

 .group {
     position: relative;
     margin-bottom: 45px;
 }

 input {
     font-size: 18px;
     padding: 10px 10px 10px 5px;
     -webkit-appearance: none;
     display: block;
     background: #fafafa;
     color: #636363;
     width: 100%;
     border: none;
     border-radius: 0;
     border-bottom: 1px solid #757575;
 }

 input:focus {
     outline: none;
 }


 /* Label */

 .label-style {
     color: #999;
     font-size: 18px;
     font-weight: 800;
     font-family: 'book' !important;
     letter-spacing: 1px;
     position: absolute;
     pointer-events: none;
     left: 5px;
     top: 10px;
     transition: all 0.2s ease;
 }


 /* active */

 input:focus~label,
 input.used~label {
     top: -20px;
     transform: scale(.75);
     left: -2px;
     /* font-size: 14px; */
     color: #0082ca;
 }


 /* Underline */

 .bar {
     position: relative;
     display: block;
     width: 100%;
 }

 .bar:before,
 .bar:after {
     content: '';
     height: 2px;
     width: 0;
     bottom: 1px;
     position: absolute;
     background: #0082ac;
     transition: all 0.2s ease;
 }

 .bar:before {
     left: 50%;
 }

 .bar:after {
     right: 50%;
 }


 /* active */

 input:focus~.bar:before,
 input:focus~.bar:after {
     width: 50%;
 }


 /* Highlight */

 .highlight {
     position: absolute;
     height: 60%;
     width: 100px;
     top: 25%;
     left: 0;
     pointer-events: none;
     opacity: 0.5;
 }


 /* active */

 input:focus~.highlight {
     animation: inputHighlighter 0.3s ease;
 }


 /* Animations */

 @keyframes inputHighlighter {
     from {
         background: #4a89dc;
     }

     to {
         width: 0;
         background: transparent;
     }
 }


 /* Button */

 .button {
     position: relative;
     display: inline-block;
     padding: 12px 24px;
     margin: .3em 0 1em 0;
     width: 100%;
     vertical-align: middle;
     color: #fff;
     font-size: 16px;
     line-height: 20px;
     -webkit-font-smoothing: antialiased;
     text-align: center;
     letter-spacing: 1px;
     background: transparent;
     border-radius: 50px;
     border: 2px solid #0082CA !important;
     cursor: pointer;
     transition: all 0.15s ease;
 }

 .button:focus {
     outline: 0;
 }


 /* Button modifiers */

 .buttonBlue {
     background: #0082ca;
     text-shadow: 1px 1px 0 rgba(0, 130, 200, 1);
 }

 .buttonBlue:hover {
     background: #444;
 }


 /* Ripples container */

 .ripples {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: transparent;
 }

 /* Ripples circle */

 .ripplesCircle {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     opacity: 0;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.25);
 }

 .ripples.is-active .ripplesCircle {
     animation: ripples .4s ease-in;
 }


 /* Ripples animation */

 @keyframes ripples {
     0% {
         opacity: 0;
     }

     25% {
         opacity: 1;
     }

     100% {
         width: 200%;
         padding-bottom: 200%;
         opacity: 0;
     }
 }

 .uk-grid-column-small>*,
 .uk-grid-small>* {
     padding-left: 25px !important;
 }


 .text-contact {
     font-family: 'book', sans-serif !important;
     text-align: center !important;
 }


 textarea {
     padding-top: 35px;
     font-family: 'book' !important;
     border: none;
     /* Elimina todos los bordes */
     background-color: transparent;
     /* Hace el fondo transparente */
     border-bottom: 1px solid #757575;
     /* Añade un borde inferior de 2px de grosor y color gris oscuro */
     outline: none;
     /* Elimina el borde de enfoque que aparece al hacer clic */
     width: 100%;
     /* Ocupa todo el ancho disponible del contenedor */
     height: 100px;
     /* Altura fija de 150 píxeles */
     color: #0082ac !important;
 }

 textarea:focus {
     border-bottom-color: #0082ac;
     /* Cambia el color del borde inferior a azul */
 }

 /* Estilos del label por defecto */
 .group label {
     color: #999;
     transition: all 0.2s ease-in-out;
 }

 /* Cambia el color del label cuando el textarea no está vacío */
 .group textarea:not(:placeholder-shown)+label {
     color: #0082ca;
 }


 .uk-icon {
     color: #f2f2f2 !important;
 }

 .uk-icon-conact {
     color: #0082ca !important;
 }

 .uk-icon-btn {
     color: #f2f2f2 !important;
 }

 .uk-icon-1 {
     color: #0082ca !important;
 }

 ul {
     font-family: 'book' !important;
     padding-left: 20px !important;
 }


 .par-prod {
     width: 80% !important;
 }


 .uk-accordion-title:hover {
     display: block;
     font-size: 1.25rem;
     line-height: 1.4;
     color: #333;
     background-color: #f2f2f2;
     overflow: hidden;
 }


 .uk-tab>.uk-active>a {
     color: #333;
     border-color: #1e87f0;
     border-width: 4px !important;
 }


 .padlateral {
     padding-left: 20px !important;
     padding-right: 20px !important;
 }


 /*controles para video de cada producto*/


 .video-wrap {
     position: relative;
     display: inline-block;
     /* o block según tu layout */
     max-width: 100%;
     overflow: hidden;
 }

 .video-wrap video {
     width: 100%;
     height: auto;
     display: block;
     background: #000;
 }

 /* Botón fullscreen (oculto por defecto, aparece con hover/mostrarControles) */
 .vfs-btn {
     position: absolute;
     right: 8px;
     bottom: 8px;
     z-index: 10;
     padding: 8px 10px;
     border-radius: 6px;
     border: none;
     font-size: 14px;
     background: rgba(0, 0, 0, 0.6);
     color: white;
     cursor: pointer;
     display: none;
 }

 /* muestra el botón con hover sobre el contenedor o cuando la clase .show-controls está presente */
 .video-wrap:hover .vfs-btn,
 .video-wrap.show-controls .vfs-btn {
     display: inline-block;
 }


 .bg-color-text {
     background-color: rgba(255, 255, 255, 0.8);
     /* Green background with 50% opacity */
     padding: 20px !important;
     padding-top: 40px !important;
     border-radius: 10px;
     color: #18181B !important;
 }

 .spaceleft {
     margin-left: 30px !important;
 }


 .title-1 {
     font-size: 25px !important;
     font-weight: 700;
     color: #444444;
     margin: 0 0 15px;

 }


 .first-title {
     font-size: 40px !important;
 }


 .font-size-title-ind {
     font-size: 30px !important;
 }

 @media (max-width: 1500px) {

     .img-6 {
         height: 350px !important;
         overflow: hidden;
     }

     .bg-section-code {
         height: auto !important;
         width: 100% !important;
         background-image: url(../img/bg/bg-app-index.webp);
         animation: bg-section-code 20s ease-in-out infinite alternate;
     }

     .bg-section-peaje {
         height: auto !important;
         width: 100% !important;
         background-image: url(../img/bg/bg-tvm-index.webp);
         animation: bg-section-peaje 20s ease-in-out infinite alternate;
     }

     .bg-section-serv {
         height: auto !important;
         width: 100% !important;
         background-image: url(../img/bg/bg-kioscos-index.webp) !important;
         animation: bg-section-serv 20s ease-in-out infinite alternate;
     }

     .bg-section-contact {
         background-image: url('../img/bg/nosotros-2.webp');
         background-repeat: no-repeat;
         background-position: center right !important;
         background-size: 100%;
         background-attachment: fixed;
     }

 }



 @media screen and (max-width: 970px) {
     .wrapper .btn {
         display: block;
     }

     .wrapper .nav-links {
         position: fixed;
         height: 100vh;
         width: 97% !important;
         max-width: 400px;
         top: 50px !important;
         left: -450px;
         background: #242526;
         display: block;
         padding: 50px 10px;
         line-height: 50px;
         overflow-y: auto;
         box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
         transition: all 0.3s ease;
     }

     /* custom scroll bar */
     ::-webkit-scrollbar {
         width: 10px;
     }

     ::-webkit-scrollbar-track {
         background: #242526;
     }

     ::-webkit-scrollbar-thumb {
         background: #3A3B3C;
     }

     #menu-btn:checked~.nav-links {
         left: 0%;
     }

     #menu-btn:checked~.btn.menu-btn {
         display: none;
     }

     #close-btn:checked~.btn.menu-btn {
         display: block;
     }

     .nav-links li {
         margin: 1px 10px;
     }

     .nav-links li a {
         padding: 0 20px;
         display: block;
         font-size: 20px;
         padding-top: 10px !important;
         padding-bottom: 10px !important;
     }

     .nav-links .drop-menu {
         position: static;
         opacity: 1;
         top: 65px;
         visibility: visible;
         padding-left: 20px;
         width: 100%;
         max-height: 0px;
         overflow: hidden;
         box-shadow: none;
         transition: all 0.3s ease;
     }

     #showDrop-1:checked~.drop-menu,
     #showMega:checked~.mega-box {
         max-height: 100%;
     }

     #showDrop-2:checked~.drop-menu,
     #showMega:checked~.mega-box {
         max-height: 100%;
     }

     #showDrop-3:checked~.drop-menu,
     #showMega:checked~.mega-box {
         max-height: 100%;
     }

     .nav-links .desktop-item {
         display: none;
     }

     .nav-links .mobile-item {
         display: block;
         color: #f2f2f2;
         font-size: 20px;
         font-weight: 500;
         padding-left: 20px;
         cursor: pointer;
         border-radius: 5px;
         transition: all 0.3s ease;
     }

     .nav-links .mobile-item:hover {
         background: #3A3B3C;
     }

     .drop-menu li {
         margin: 0;
     }

     .drop-menu li a {
         border-radius: 1px;
         font-size: 18px;
         margin-left: -20px;
         padding-top: 20px !important;
         padding-bottom: 20px !important;
     }

     .mega-box {
         position: static;
         top: 65px;
         opacity: 1;
         visibility: visible;
         padding: 0 20px;
         max-height: 0px;
         overflow: hidden;
         transition: all 0.3s ease;
     }

     .mega-box .content {
         box-shadow: none;
         flex-direction: column;
         padding: 20px 20px 0 20px;
     }

     .mega-box .content .row {
         width: 100%;
         margin-bottom: 15px;
         border-top: 1px solid rgba(255, 255, 255, 0.08);
     }

     .mega-box .content .row:nth-child(1),
     .mega-box .content .row:nth-child(2) {
         border-top: 0px;
     }

     .content .row .mega-links {
         border-left: 0px;
         padding-left: 15px;
     }

     .row .mega-links li {
         margin: 0;
     }

     .content .row header {
         font-size: 19px;
     }

     /* Submenú en móviles */
     .nav-links .drop-menu li .sub-menu {
         position: static;
         max-height: 0;
         overflow: hidden;
         opacity: 1;
         visibility: visible;
         box-shadow: none;
         transition: max-height 0.3s ease;
     }

     .nav-links .drop-menu li.show-submenu .sub-menu {
         max-height: 500px;
         /* espacio para expandir --------------------------------------------------------------*/
     }
 }



 @media (min-width: 1200px) {
     .uk-card-body-ind {
         padding: 10px 10px;
     }

     .uk-grid-ind>* {
         padding-left: 10px !important;
     }

     .img-6 {
         height: 350px !important;
         overflow: hidden;
     }

     .pregfrec {
         padding-right: 50px !important;
     }

     .espace-card {
         padding: 10px 40px !important;
     }
 }


 @media (min-width: 960px) {
     .uk-section {
         padding-top: 100px !important;
         padding-bottom: 100px !important;
         font-size: 18px !important;
     }


     .zind {
         position: relative !important;
         top: -190px !important;
         z-index: 1 !important;
         width: 40% !important;
         background-color: rgba(255, 255, 255, 0.2) !important;
         /* Semi-transparent background */
         /*backdrop-filter: blur(8px) !important;*/
         /* Adjust the pixel value for desired blur intensity */
         border-width: 1px !important;
         border: solid !important;
     }

 }


 /* */

 @media (max-width: 1000px) {

     .black {
         background-color: rgba(0, 0, 0, 0.0);
         padding: 20px;
         padding-top: 40%;
         padding-bottom: 45%;
     }

     .slogan {
         width: 100% !important;
         margin-left: auto !important;
         margin-right: auto !important;
         text-align: center !important;
         color: #fff !important;
         position: relative;
         /*top: 40% !important;*/
     }

     .footer-distributed {
         background-image: url('../img/bg/bg-index-footer-movil-1.webp') !important;
         background-repeat: no-repeat;
         background-size: 100%;
         box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
         box-sizing: border-box;
         width: 100%;
         text-align: left;
         font: bold 16px sans-serif;
         padding: 45px 50px;
     }


     .sloganleft {
         width: 100%;
         text-align: center !important;
         color: #444444 !important;

     }

     .font-size-title {
         font-size: 20px !important;
     }


     .footer-distributed {
         font: bold 14px sans-serif;
     }

     .footer-distributed .footer-left,
     .footer-distributed .footer-center,
     .footer-distributed .footer-right {
         display: block;
         width: 100%;
         margin-bottom: 50px;
         text-align: center;
     }

     .footer-distributed .footer-center i {
         margin-left: 0;
     }

     .gm-logos {
         margin-top: 10% !important;
         margin-left: 0% !important;
         width: 60% !important;
     }

     .movil {
         display: inline;
     }
 }

 @media (max-width: 1100px) {

     .movil-oculta {
         display: none !important;
     }

     .nav-links .drop-menu {
         margin-left: 10px !important;

     }
 }


 @media (min-width: 1100px) {
     .pc-oculta {
         display: none;
     }

     .menuleft {
         position: relative;
         left: -550px !important;
     }

     .bg-section-0 {
         background-image: url('../img/bg/nosotros-2.webp');
         background-repeat: no-repeat;
         background-position: center bottom !important;
         background-size: cover;
         background-attachment: fixed;
     }
 }

 .uk-card {
     margin-left: 10% !important;
     margin-right: 10% !important;
 }

 @media (max-width: 999px) {

     .menuleft {
         position: relative;
         left: 0px !important;
     }

     .uk-card {
         margin-left: 1% !important;
         margin-right: 1% !important;
     }


     .bg-section-contact {
         background-image: url('../img/bg/nosotros-2.webp');
         background-repeat: no-repeat;
         background-position: center bottom !important;
         background-size: cover;
         background-attachment: fixed;
     }
 }

 .buttonsecc-ind-1 {
     background-color: rgba(0, 130, 200, 1) !important;
     font-weight: 600 !important;
     color: #ffffff !important;
     border-radius: 5px;
     width: 40% !important;
     margin-top: 20px !important;
     margin-left: 0px !important;

 }


 .buttonsecc-ind-2 {
     background-color: rgba(0, 130, 200, 1) !important;
     font-weight: 600 !important;
     color: #ffffff !important;
     border-radius: 5px;
     width: 40% !important;
     margin-top: 30px !important;
     margin-left: 30px !important;

 }


 .buttonsecc-ind-3 {
     background-color: rgba(0, 130, 200, 1) !important;
     font-weight: 800 !important;
     color: #ffffff !important;
     border-radius: 5px;
     width: 30% !important;
     margin-top: 30px !important;

 }

 @media (max-width: 768px) {

     .bg-section-contact {
         background-image: url('../img/bg/nosotros-1-m.webp  ');
         background-repeat: no-repeat;
         background-position: center bottom !important;
         background-size: cover;
         background-attachment: fixed;
     }

     .buttonsecc-ind {
         background-color: rgba(0, 130, 200, 1) !important;
         color: #ffffff !important;
         border-radius: 5px;
         width: 50% !important;
         margin-left: 40% !important;
     }

     .buttonsecc-ind-2 {
         background-color: rgba(0, 130, 200, 1) !important;
         color: #ffffff !important;
         border-radius: 5px;
         width: 50% !important;

     }


     .zind {
         position: relative !important;
         top: -300px !important;
         z-index: 1 !important;
         width: 40% !important;
         background-color: rgba(255, 255, 255, 0.2) !important;
         /* Semi-transparent background */
         /*backdrop-filter: blur(8px) !important;*/
         /* Adjust the pixel value for desired blur intensity */
         border-width: 1px !important;
         border: solid !important;
     }

 }





 @media (max-width:450px) {
     .card {
         width: 95% !important;
     }

     .title {
         font-size: 16px;
     }

     .img {
         height: 180px;
     }

     .bottom {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px
     }

     .price {
         margin-bottom: 5px
     }

     .btn_card {
         width: 35%;
         justify-content: center
     }


     .card-2 {
         width: 90%
     }


     .btn_card-2 {
         width: 30%;
         margin-left: 63% !important;
         justify-content: center
     }


     .btn_card-3 {
         width: 38% !important;
         margin-left: 63% !important;
         justify-content: center;
     }

     .img-7 {
         height: 260px !important;
         overflow: hidden
     }

     .img-9 {
         height: 300px !important;
         overflow: hidden
     }

     .uk-h2,
     h2 {
         font-size: 25px !important;
         margin-bottom: 25px !important;
         color: #444444 !important;
     }

     .uk-h4,
     h4 {
         color: #444444 !important;
     }


     .img-6 {
         height: 250px !important;
         overflow: hidden;
     }

     .img-8 {
         height: 300px !important;
         overflow: hidden;
         padding-top: 50px !important;
     }

     .buttonsecc-ind-2 {
         width: 55% !important;
         margin-top: 30px !important;
         margin-left: 30px !important;
     }

 }


 @media (min-width:300px) {
     .buttonsecc {
         background-color: rgba(0, 130, 200, 1) !important;
         color: #ffffff !important;
         border-radius: 5px;
         width: 70% !important;
     }

     .img-7 {
         height: 260px !important;
         overflow: hidden
     }

     .img-9 {
         height: 300px !important;
         overflow: hidden
     }


     .uk-grid>* {
         padding-left: 26px;
     }

     .buttonsecc-ind-2 {
         width: 55% !important;
         margin-top: 30px !important;
         margin-left: 30px !important;

     }
 }




 @media (max-width:500px) {
     .img-8 {
         height: 340px !important;
         overflow: hidden;
         padding-top: 50px !important;
     }

     .bg-section-contact {
         background-image: url('../img/bg/nosotros-1-m.webp');
         background-repeat: no-repeat;
         background-position: center bottom !important;
         background-size: cover;
         background-attachment: fixed;
     }

     .pregfrec {
         padding-right: 0px !important;
     }


     .uk-section {
         padding-top: 100px !important;
         padding-bottom: 100px !important;
     }

     .sloganini {
         width: 90% !important;
         text-align: center !important;
     }


     .slogan {
         width: 68% !important;
         font-size: 23px !important;
         font-weight: 1000 !important;
         /* O cualquier otro valor de ancho */
         margin-left: auto !important;
         margin-right: auto !important;
         margin-bottom: 30px !important;
         color: #ffffff;
     }

     .bgcolor-ini {
         padding-top: 100% !important;
         padding-bottom: 100% !important;
     }

     .align-p {
         padding-top: 50px !important;
         padding-left: 20px !important;
         padding-right: 20px !important;
     }

     .convers {
         padding-top: 0px;
         font-size: 35px !important;
     }

     .firttitle {
         font-size: 25px !important;
         margin-top: -20% !important;
         color: #ffffff !important;
     }

     .firttitleps {
         font-size: 35px !important;
         margin-top: -20% !important;
         color: #ffffff !important;
     }

     .slogan-m {
         font-size: 17px !important;
         width: 90% !important;
         top: 40% !important;
     }

     .uk-h2,
     h2 {
         font-size: 25px !important;
         margin-bottom: 25px !important;
         color: #444444 !important;
     }

     .img-fullscreen-1 {
         width: 100vw;
         /* 100% del ancho del viewport */
         height: 100vh;
         /* 100% del alto del viewport */
         object-fit: cover;
         /* Cubre todo el contenedor sin deformarse */
         display: block;
     }


     .space-top-bottom-1 {
         margin-top: 0px !important;
         margin-bottom: 0px !important;
     }

     .zind {
         position: relative !important;
         top: -190px !important;
         z-index: 1 !important;
         width: 40% !important;
         background-color: rgba(255, 255, 255, 0.2) !important;
         /* Semi-transparent background */
         /* backdrop-filter: blur(8px) !important;*/
         /* Adjust the pixel value for desired blur intensity */
         border-width: 1px !important;
         border: solid !important;
     }
 }



 @media (max-width:300px) {

     .uk-section {
         padding-top: 100px !important;
         padding-bottom: 100px !important;
     }

     .space-top-bottom-1 {
         margin-top: 0px !important;
         margin-bottom: 0px !important;
     }



     .slogan {
         width: 68% !important;
         font-size: 23px !important;
         font-weight: 1000 !important;
         /* O cualquier otro valor de ancho */
         margin-left: auto !important;
         margin-right: auto !important;
         margin-bottom: 30px !important;
         color: #ffffff;
     }
 }




 @media (min-width: 1440px) {
     .slogan {
         max-width: 1360px;
         /* Limita el ancho máximo a 960px */
         width: 1360px;
         /* Opcional: fija el ancho a 960px */
     }
 }

 @media (min-width: 1100px) and (max-width: 1500px) {
     .spacetop-rubro {
         margin-top: 8% !important;
         margin-bottom: 8% !important;
     }

 }

 @media (min-width: 650px) and (max-width: 1100px) {
     .zind {
         position: relative !important;
         top: -300px !important;
         z-index: 1 !important;
         width: 40% !important;
         background-color: rgba(255, 255, 255, 0.2) !important;
         /* Semi-transparent background */
        /* backdrop-filter: blur(8px) !important;*/
         /* Adjust the pixel value for desired blur intensity */
         border-width: 1px !important;
         border: solid !important;
         display: none !important;
     }


     .slogan {
         width: 100% !important;
         margin-left: auto !important;
         margin-right: auto !important;
         text-align: center !important;
         color: #fff !important;
         position: relative;
         top: -32% !important;
     }



 }


 @media (min-width: 380px) and (max-width: 470px) {
     .img-6 {
         height: 250px !important;
         overflow: hidden;
     }

     .spaceright{
    padding-left: 5px!important;
    padding-right: 3px!important;
    }

 }


 .btn_card-3 {
     background: linear-gradient(45deg, #0082ca, #0082CA);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 8px 15px;
     font-size: 13px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: .3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
     margin-left: 35% !important;
     margin-right: auto !important;
     margin-top: 0%;
 }


 @media (min-width: 350px) and (max-width: 800px) {
     p {
        margin: 0px 20px 0px 20px !important;
     }
    

 }

 @media (min-width: 960px) {

     .uk-h2,
     h2 {
         font-size: 25px !important;
         line-height: 1;
     }
 }

 .font-size-title-ind {
     font-size: 30px !important;
 }

 .sombra {
     box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px !important;
 }

 .uk-heading-small {
     font-size: 2rem !important;
     line-height: 1.2;
 }






 @media (min-width: 750px) and (max-width: 1000px) {

      
 .fondo-code {
     background-image: url('../img/bg/bg-code-index-m.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 80vh;
     width: 100% !important;

     /* 100% del alto de la pantalla */
 }

 .fondo-trans {
     background-image: url('../img/bg/bg-peaje-index-m.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 80vh;
     width: 100% !important;
     /* 100% del alto de la pantalla */
 }

 .fondo-services {
     background-image: url('../img/bg/bg-kioscos-index-m.webp') !important;
     background-size: cover !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
     height: 80vh;
     width: 100% !important;
     /* 100% del alto de la pantalla */
 }


 }



  @media (min-width: 1100px) and (max-width: 1350px) {
      .bg-section-code {
         height: 530px !important;
         width: 100% !important;
         background-image: url(../img/bg/bg-app-index.webp);
         animation: bg-section-code 20s ease-in-out infinite alternate;
     }

     .bg-section-peaje {
         height: 530px !important;
         width: 100% !important;
         background-image: url(../img/bg/bg-tvm-index.webp);
         animation: bg-section-peaje 20s ease-in-out infinite alternate;
     }

     .bg-section-serv {
        height: 530px !important;
         width: 100% !important;
         background-image: url(../img/bg/bg-kioscos-index.webp) !important;
         animation: bg-section-serv 20s ease-in-out infinite alternate;
     }
  }



@media (min-width: 650px) and (max-width: 1100px) {
    .tmovil{
        font-size: 30px!important;
        top: 10%!important;
    }


     .zind {
         position: relative !important;
         top: -190px !important;
         z-index: 1 !important;
         width: 40% !important;
         background-color: rgba(255, 255, 255, 0.2) !important;
         /* Semi-transparent background */
         /*backdrop-filter: blur(8px) !important;*/
         /* Adjust the pixel value for desired blur intensity */
         border-width: 1px !important;
         border: solid !important;
     }

    
 }

@media (min-width: 640px) and (max-width: 1000px) {

 .kindle{
        display: none!important;
     }
}

 

.heartbeat {
	-webkit-animation: heartbeat 1.5s infinite !important;
	        animation: heartbeat 1.5s infinite !important;
}


/* ----------------------------------------------
 * Generated by Animista on 2025-10-24 17:41:3
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}