.card{position:relative;display:inline-block;width:60px;height:38px;border-radius:5px;overflow:hidden;margin:0 5px 0 0}
.card:before,.card:after{content:"";position:absolute;display:block}
.card.visa{background:#FFF}
.card.visa:before,.card.visa:after{border-radius:0;left:0;right:0;width:100%;height:13px}
.card.visa:before{top:0;background:#234bad}
.card.visa:after{bottom:0;background:#ffc13f}
.card.mastercard{background:#264dae}
.card.mastercard:before,.card.mastercard:after{top:5px;width:27px;height:27px;border-radius:100%}
.card.mastercard:before{left:6px;background:#ee502e}
.card.mastercard:after{right:6px;background:#ffc13f}
.card.amex{background:#0c88c9}
.card.amex:before,.card.amex:after{width:60%;height:6px;border-radius:3px;background:#FFF}
.card.amex:before{top:12px;left:6px}
.card.amex:after{bottom:12px;right:6px}
.card.discover{background:#F9F9F9}
.card.discover:before{top:7px;left:50%;margin-left:-10px;width:21px;height:21px;border-radius:100%;background:#f67d0d}
.card.discover:after{bottom:-6px;right:-18px;width:100%;height:40%;background:#F16820;transform:rotate(-20deg);-webkit-transform:rotate(-20deg)}
.loader{margin:30px auto 0 auto;width:120px;height:20px;background:linear-gradient(var(--one-color) 0 0) 0/0% no-repeat var(--one-light-color);animation:loader 2s infinite linear;border-radius:var(--border-radius)}
@keyframes loader{100% {background-size:100%}}