*{box-sizing:border-box;margin:0;padding:0}body{background:#fff;font-family:Lato,sans-serif}.contenedor{align-items:center;display:flex;flex-direction:column;max-width:1000px;padding:40px 20px;width:90%}@media (max-width:768px){.contenedor{padding:20px 0;width:100%}}.tarjeta{color:#fff;cursor:pointer;max-width:550px;position:relative;transform:rotateY(0deg);transform-style:preserve-3d;transition:all .3s ease;width:100%;z-index:2}.tarjeta.active{transform:rotateY(180deg)}.tarjeta>div{border-radius:15px;box-shadow:0 10px 10px 0 rgba(90,116,148,.3);display:flex;flex-direction:column;justify-content:space-between;min-height:315px;padding:30px}.tarjeta .delantera{background:#5b92e5;background:linear-gradient(180deg,#5b92e5,#4a82b4 50%,#3a72a4);box-shadow:0 0 30px rgba(0,0,0,.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5B92E5",endColorstr="#3A72A4",GradientType=0);width:100%;z-index:0}@keyframes slide{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.delantera .logo-marca{display:block ruby;min-height:50px;text-align:right!important}.delantera .logo-marca img{height:100%;max-width:80px;-o-object-fit:cover;object-fit:cover;width:70%}.delantera .chip{margin-bottom:20px;max-width:50px;width:100%}.delantera .grupo .label{color:#bfbfbf;font-size:16px;margin-bottom:5px}.delantera .grupo .expiracion,.delantera .grupo .nombre,.delantera .grupo .numero{color:#fff;font-size:22px;text-transform:uppercase}.delantera .flexbox{display:flex;justify-content:space-between;margin-top:20px}.trasera{backface-visibility:hidden;background:#5b92e5;background:linear-gradient(180deg,#5b92e5,#4a82b4 50%,#3a72a4);box-shadow:0 0 30px rgba(0,0,0,.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5B92E5",endColorstr="#3A72A4",GradientType=0);position:absolute;top:0;transform:rotateY(180deg);z-index:0}.trasera .barra-magnetica{background:#000;height:40px;left:0;position:absolute;top:30px;width:100%}.trasera .datos{display:flex;justify-content:space-between;margin-top:60px}.trasera .datos p{margin-bottom:5px}.trasera .datos #firma{width:70%}.trasera .datos #firma .firma{background:repeating-linear-gradient(#87ceeb,#87ceeb 5px,orange 0,orange 10px);height:40px}.trasera .datos #firma .firma p{color:#000;font-family:Liu Jian Mao Cao,cursive;font-size:30px;line-height:40px;padding:0 10px;text-transform:capitalize}.trasera .datos #ccv{width:20%}.trasera .datos #ccv .ccv{background:#fff;color:#000;height:40px;padding:10px;text-align:center;width:100%}.trasera .leyenda{font-size:14px;line-height:24px;opacity:0;width:100%}.trasera .link-banco{color:#fff;font-size:14px}.contenedor-btn .btn-abrir-formulario{background:#f9d45a;border:none;border-radius:100%;box-shadow:-5px 4px 8px rgba(24,56,182,.4);color:#fff;cursor:pointer;font-size:20px;height:50px;line-height:20px;padding:5px;position:relative;top:-25px;transition:all .2s ease;width:50px;z-index:3}.contenedor-btn .btn-abrir-formulario:hover{background:#f9d45a}.contenedor-btn .btn-abrir-formulario.active{transform:rotate(45deg)}.formulario-tarjeta{background:#fff;border-radius:10px;clip-path:polygon(0 0,100% 0,100% 0,0 0);max-width:550px;padding:150px 30px 30px;position:relative;top:-150px;transition:clip-path .3s ease-out;width:90%;z-index:1}@media (max-width:768px){.formulario-tarjeta{padding:150px 10px 10px;width:95%}}.formulario-tarjeta.active{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.formulario-tarjeta label{color:#7d8994;display:block;font-size:16px;margin-bottom:5px}.btn-enviar,.formulario-tarjeta input,.formulario-tarjeta select{border:2px solid #ced6e0;border-radius:5px;font-size:18px;height:50px;padding:5px 12px;transition:all .3s ease;width:100%}.formulario-tarjeta input:hover,.formulario-tarjeta select:hover{border:2px solid #93bded}.formulario-tarjeta input:focus,.formulario-tarjeta select:focus{box-shadow:1px 7px 10px -5px rgba(90,116,148,.3);outline:#040404}.formulario-tarjeta input{margin-bottom:20px;text-transform:uppercase}.formulario-tarjeta .flexbox{display:flex;justify-content:space-between}.formulario-tarjeta .expira{width:100%}.formulario-tarjeta .ccv{min-width:100px}.formulario-tarjeta .grupo-select{margin-right:15px;position:relative;width:100%}.formulario-tarjeta select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.formulario-tarjeta .grupo-select i{color:#ced6e0;position:absolute;right:15px;top:18px;transition:all .3s ease}.formulario-tarjeta .grupo-select:hover i{color:#93bfed}.formulario-tarjeta .btn-enviar{background:#f9d45a;border:none;box-shadow:2px 2px 10px 0 rgba(0,85,212,.4);color:#fff;cursor:pointer;font-size:22px;padding:10px}.formulario-tarjeta .btn-enviar:hover{background:#f9d45a}#alert{background-color:#f8d7da;border-radius:5px;padding:10px;text-align:center;width:100%}#alert p{color:#721c24;font-size:16px}