.etc-form {
    flex: 1;
    width: 100%;
}
.etc-disabled{
    pointer-events: none !important;
    opacity: 0.5 !important;
}
.etc-uppercase{
    text-transform: uppercase !important;
}
.etc-wrapper{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #eeeeee !important;
  font-size: 14px !important;
  font-weight: normal !important;
  overflow: hidden !important;
  margin-top: -20px !important;
  padding: 0 !important;
}
.etc-input {
    -webkit-tap-highlight-color: transparent !important;
    background-color: #1b1d1b !important;
    border-radius: 5px !important;
    border: solid 1px #505062 !important;
    box-sizing: border-box !important;
    color: #eeeeee !important;
    float: left !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: normal !important;
    height: 42px !important;
    line-height: 40px !important;
    outline: none !important;
    padding: 4px 0 0 15px !important;
    position: relative !important;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
}
.etc-select {
    -webkit-tap-highlight-color: transparent !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #1b1d1b !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='rgb(91, 91, 97)'%3E%E2%96%BE%3C/text%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 0.85em 0.6em !important;
    background-position: right 8px center !important;
    background-clip: border-box !important;
    -moz-background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    border-radius: 5px !important;
    border: solid 1px #505062 !important;
    box-sizing: border-box !important;
    color: #eeeeee !important;
    float: left !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: normal !important;
    height: 42px !important;
    line-height: 40px !important;
    outline: none !important;
    padding: 2px 0 0 15px !important;
    position: relative !important;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
}
.etc-box-start .image-product {
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.etc-upsell {
    border: 2px dashed #ff7d6a;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color:#f8f8f8;
}
.etc-upsell-top {
    background-color:#ddd;
    border-radius: 6px 6px 0 0;
    padding: 6px 10px !important;
}
.etc-upsell-content {
    padding: 12px 10px 6px 10px !important;
    border-radius: 0 0 6px 6px;
}
.etc-upsell-footer {
    border-radius: 0 0 6px 6px;
    padding: 6px 10px !important;
}
.etc-upsell-footer.last {
    display: none !important;
}
.etc-input-30{
    width: 30% !important;
}
.etc-input-70{
    width: calc(70% - 15px) !important;
    margin-right: 15px !important;
}

.etc-input-50{
    width: calc(50% - 7.5px) !important;
    margin-right: 7.5px !important;
}
.etc-input-50:last-child{
    width: calc(50% - 7.5px) !important;
    margin-right: 0 !important;
    margin-left: 7.5px !important;
}
.etc-input:hover,
.etc-select:hover {
  border-color: #d0dae5 !important;
}

.etc-input:active,
.etc-input:focus,
.etc-select:active,
.etc-select:focus {
  border-color: #333333 !important;
  box-shadow: inset 0 0 0 1px #333;
}
.etc-input.etc-card-invalid,
.etc-input.etc-card-invalid:active,
.etc-input.etc-card-invalid.open,
.etc-input.etc-card-invalid:focus,
.etc-input.etc-card-invalid:hover{
  border-color: #dd0000 !important;
  box-shadow: inset 0 0 0 1px #dd0000;
}
.etc-input.etc-card-valid,
.etc-input.etc-card-valid:active,
.etc-input.etc-card-valid.open,
.etc-input.etc-card-valid:focus,
.etc-input.etc-card-valid:hover{
  border-color: #5abe08 !important;
  box-shadow: inset 0 0 0 1px #5abe08;
}
.etc-price-total {
    font-weight: bold;
}
.etc-price-total span {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #aab0b7;
}
.etc-box-price {
    padding: 6px 10px !important;
    overflow: hidden !important;
    border: 1px solid #d5dce2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.etc-box-price.upsell{
    margin-top: 10px;
}
.etc-box-price-total{
    padding: 12px 10px 6px 10px !important;
    overflow: hidden !important;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.etc-box {
    padding: 15px 0px 0px 0px !important;
    overflow: hidden !important;
}
.etc-box:first-child {
    padding: 0px 0px 0px 0px !important;
}
.etc-box:last-child {
    padding: 15px 0px 10px 0px !important;
}
.etc-box.mt-0 {
    margin-top: 0 !important;
}
.etc-box.mb-0 {
    margin-bottom: 0 !important;
}
.etc-box.pt-0 {
    padding-top: 0 !important;
}
.etc-box.pb-0 {
    padding-bottom: 0 !important;
}
.etc-box hr {
    margin-top: 0.2rem !important;
    margin-bottom: 1.8rem !important;
    border: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.etc-box h6 {
    font-size: 14px !important;
    color: #666 !important;
}
.etc-box-start {
    padding: 15px 0px !important;
}
.etc-box-footer{
    padding: 0px !important;
    text-align: center;
}
.etc-box-footer img.etc-secure{
    width: 100% !important;
    display: inline-block;
}
.etc-box-footer img.etc-bandeiras{
    margin-top: 40px;
    width: 100% !important;
    display: inline-block;
}
.etc-box-footer img{
    opacity: 0.8;
    transition: all .4s ease !important;
}
.etc-box-footer img:hover{
    opacity: 1;
}
label.etc-label {
  color: #666 !important;
  font-size: 13px !important;
  margin: 0 2px 4px !important;
  text-transform: capitalize !important;
  float: left !important;
  font-weight: 600 !important;
}

.etc-button {
  -webkit-tap-highlight-color: transparent !important;
  background-color: #00AB65 !important;
  border-radius: 5px !important;
  border: none !important;
  box-sizing: border-box !important;
  color: #1b1d1b !important;
  cursor: pointer !important;
  display: inline-block !important;
  font-weight: 600 !important;
  height: 42px !important;
  line-height: 44px !important;
  outline: none !important;
  text-align: center !important;
  text-decoration: none !important;
  -webkit-transition: all 0.2s ease-in-out !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap !important;
  width: 100% !important;
  text-transform: uppercase !important;
}

.etc-button:hover,
.etc-button:focus {
    color: #1b1d1b !important;
  background-color: #0ab770 !important;
}

.etc-button:active {
    color: #1b1d1b !important;
  background-color: #089c5e !important;
}

.etc-button.inverted {
  background-color: #1b1d1b !important;
  border: 1px solid #505062 !important;
  color: #333333 !important;
  line-height: 40px !important;
  margin-left: 24px !important;
}

.etc-button.inverted:hover {
  border-color: #d0dae5 !important;
}

.etc-button.inverted:active,
.etc-button.inverted:focus {
  border-color: #333333 !important;
}
.etc-button-link{
    -webkit-tap-highlight-color: transparent !important;
    color: #9ba3ab !important;
    cursor: pointer !important;
    display: inline-block !important;
    font-weight: 600 !important;
    outline: none !important;
    text-align: center !important;
    text-decoration: none !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
    white-space: nowrap !important;
    width: 100% !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}
.etc-button-link:hover,
.etc-button-link:active,
.etc-button-link:focus {
  color: #b9b9c0 !important;
}
.etc-link{
    display: flex !important;
    align-items: center !important;
    height: 18px !important;
    margin-top: 10px !important;
}
.etc-link-remove{
    color: #e0442f !important;
    display: inline-block !important;
    font-weight: 600 !important;
    outline: none !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 13px !important;
    margin-left: 4px !important;
}
.etc-link-remove:hover,
.etc-link-remove:active,
.etc-link-remove:focus {
    color: #a82817 !important;
}
.etc-hide{
    display: none !important;
}
.etc-button-dark {
    -webkit-tap-highlight-color: transparent !important;
    background-color: #3e3e41 !important;
    border-radius: 5px !important;
    border: none !important;
    box-sizing: border-box !important;
    color: #1b1d1b !important;
    cursor: pointer !important;
    display: inline-block !important;
    font-weight: 600 !important;
    height: 42px !important;
    line-height: 44px !important;
    outline: none !important;
    text-align: center !important;
    text-decoration: none !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
    white-space: nowrap !important;
    width: 100% !important;
    text-transform: uppercase !important;
}

.etc-button-dark:hover,
.etc-button-dark:focus {
    color: #1b1d1b !important;
    background-color: #464649 !important;
}

.etc-button-dark:active {
    color: #1b1d1b !important;
    background-color: #333336 !important;
}
.etc-button-30 {
    width: 30% !important;
}

.form-container-card,
.form-container-boleto,
.form-container-pix,
.form-container-free,
.etc-all-address{
    display: none;
}
.form-container-free{
    margin-top: -15px;
}
.etc-list {
    width: 100% !important;
    overflow: hidden !important;
}

.etc-check {
    position: absolute !important;
    height: 1px !important;
    width: 1px !important;
    opacity: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}
.etc-check-label {
    position: relative !important;
    padding: 30px 0px 5px !important;
    background-color: #1b1d1b !important;
    border: 1px solid #818188 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all .4s ease !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    width: 100% !important;
    opacity: 0.8;
    font-size: 12px !important;
    text-transform: capitalize !important;
}
.etc-check-label:hover{
    border: 1px solid #b9b9c0 !important;
    opacity: 1;
}
.etc-check-label:before {
    position: absolute !important;
    height: 18px !important;
    width: 18px !important;
    border-radius: 50% !important;
    border: 1px solid #505062 !important;
    content: '' !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    transition: all .4s ease !important;
}

.etc-check-label:after {
    position: absolute !important;
    height: 12px !important;
    width: 12px !important;
    border-radius: 50% !important;
    background: #b9b9c0 !important;
    content: '' !important;
    top: 13px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    transition: all .4s ease !important;
}
.etc-check:checked ~ label {
    border-color: #b9b9c0 !important;
    box-shadow: inset 0px 0px 0px 1px #b9b9c0;
}
.etc-check:checked ~ label:before {
    border-color: #b9b9c0 !important;
}
.etc-check:checked ~ label:after {
    opacity: 1 !important;
}

.etc-checkbox-item{
    width: 100% !important;
}
.etc-checkbox {
    position: absolute !important;
    height: 1px !important;
    width: 1px !important;
    opacity: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}
.etc-checkbox-label {
    position: relative !important;
    padding: 12px 10px 10px 34px !important;
    background-color: #1b1d1b !important;
    border: 2px solid #e7eaee !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: all .4s ease !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    width: 100% !important;
    opacity: 0.8;
    font-size: 12px !important;
    text-transform: capitalize !important;
}
.etc-checkbox-label:hover{
    border: 2px solid #818188 !important;
    opacity: 1;
}
.etc-checkbox-label:before {
    position: absolute !important;
    height: 18px !important;
    width: 18px !important;
    border-radius: 4px !important;
    background-color:#505062 !important;
    content: '' !important;
    top: 11px !important;
    left: 8px !important;
    transition: all .4s ease !important;
}

.etc-checkbox-label:after {
    position: absolute !important;
    content: '' !important;
    top: 13px !important;
    left: 14px !important;
    opacity: 0 !important;
    transition: all .4s ease !important;
    box-sizing: border-box;
    width: 6px !important;
    height: 12px !important;
    transform: rotate(45deg) !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #000 !important;
    border-top: 0 !important;
    border-left: 0 !important;
}
.etc-checkbox:checked ~ label {
    border-color: #b9b9c0 !important;
}
.etc-checkbox:checked ~ label:before {
    border-color: #b9b9c0 !important;
}
.etc-checkbox:checked ~ label:after {
    opacity: 1 !important;
}

.etc-method-card {
    padding: 10px 8px 8px 8px !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgb(129, 129, 136)' viewBox='0 0 24 24'><path d='M0 8v-2c0-1.104.896-2 2-2h20c1.104 0 2 .896 2 2v2h-24zm24 3v7c0 1.104-.896 2-2 2h-20c-1.104 0-2-.896-2-2v-7h24zm-15 5h-6v1h6v-1zm3-2h-9v1h9v-1zm9 0h-3v1h3v-1z'/></svg>");
    background-repeat: no-repeat !important;
    background-size: 55px 55px !important;
    background-position: center !important;
    background-clip: border-box !important;
    -moz-background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    width: calc(100% - 2px) !important;
    height: 48px !important;
    transition: all .4s ease !important;
}
.etc-method-boleto {
    padding: 10px 8px 8px 8px !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgb(129, 129, 136)' viewBox='0 0 24 24'><path d='M21 6c.551 0 1 .449 1 1v10c0 .551-.449 1-1 1h-18c-.551 0-1-.449-1-1v-10c0-.551.449-1 1-1h18zm0-2h-18c-1.657 0-3 1.343-3 3v10c0 1.657 1.343 3 3 3h18c1.657 0 3-1.343 3-3v-10c0-1.657-1.343-3-3-3zm-17 12v-8h2v8h-2zm12 0v-8h2v8h-2zm-9 0v-8h1v8h-1zm2 0v-8h2v8h-2zm3 0v-8h1v8h-1zm2 0v-8h1v8h-1zm5 0v-8h1v8h-1z'/></svg>");
    background-repeat: no-repeat !important;
    background-size: 55px 55px !important;
    background-position: center !important;
    background-clip: border-box !important;
    -moz-background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    width: calc(100% - 2px) !important;
    height: 48px !important;
    transition: all .4s ease !important;
}
.etc-method-pix {
    padding: 10px 8px 8px 8px !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("pix.png");
    background-repeat: no-repeat !important;
    background-size: 99px 35px !important;
    background-position: center !important;
    background-clip: border-box !important;
    -moz-background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    width: calc(100% - 2px) !important;
    height: 48px !important;
    transition: all .4s ease !important;
}

/*<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 8v-2c0-1.104.896-2 2-2h20c1.104 0 2 .896 2 2v2h-24zm24 3v7c0 1.104-.896 2-2 2h-20c-1.104 0-2-.896-2-2v-7h24zm-15 5h-6v1h6v-1zm3-2h-9v1h9v-1zm9 0h-3v1h3v-1z'/></svg>*/
/*<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M21 6c.551 0 1 .449 1 1v10c0 .551-.449 1-1 1h-18c-.551 0-1-.449-1-1v-10c0-.551.449-1 1-1h18zm0-2h-18c-1.657 0-3 1.343-3 3v10c0 1.657 1.343 3 3 3h18c1.657 0 3-1.343 3-3v-10c0-1.657-1.343-3-3-3zm-17 12v-8h2v8h-2zm12 0v-8h2v8h-2zm-9 0v-8h1v8h-1zm2 0v-8h2v8h-2zm3 0v-8h1v8h-1zm2 0v-8h1v8h-1zm5 0v-8h1v8h-1z'/></svg>*/
.etc-card.etc-card-safari.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-safari.etc-card-identified .etc-card-back:before {
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%) !important;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%) !important;
}



.etc-card.etc-card-ie-10.etc-card-flipped,
.etc-card.etc-card-ie-11.etc-card-flipped {
    -webkit-transform: 0deg !important;
    -moz-transform: 0deg !important;
    -ms-transform: 0deg !important;
    -o-transform: 0deg !important;
    transform: 0deg !important;
}

.etc-card.etc-card-ie-10.etc-card-flipped .etc-card-front,
.etc-card.etc-card-ie-11.etc-card-flipped .etc-card-front {
    -webkit-transform: rotateY(0deg) !important;
    -moz-transform: rotateY(0deg) !important;
    -ms-transform: rotateY(0deg) !important;
    -o-transform: rotateY(0deg) !important;
    transform: rotateY(0deg) !important;
}

.etc-card.etc-card-ie-10.etc-card-flipped .etc-card-back,
.etc-card.etc-card-ie-11.etc-card-flipped .etc-card-back {
    -webkit-transform: rotateY(0deg) !important;
    -moz-transform: rotateY(0deg) !important;
    -ms-transform: rotateY(0deg) !important;
    -o-transform: rotateY(0deg) !important;
    transform: rotateY(0deg) !important;
}

.etc-card.etc-card-ie-10.etc-card-flipped .etc-card-back:after,
.etc-card.etc-card-ie-11.etc-card-flipped .etc-card-back:after {
    left: 18% !important;
}

.etc-card.etc-card-ie-10.etc-card-flipped .etc-card-back .etc-card-cvc,
.etc-card.etc-card-ie-11.etc-card-flipped .etc-card-back .etc-card-cvc {
    -webkit-transform: rotateY(180deg) !important;
    -moz-transform: rotateY(180deg) !important;
    -ms-transform: rotateY(180deg) !important;
    -o-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
    left: 5% !important;
}

.etc-card.etc-card-ie-10.etc-card-flipped .etc-card-back .etc-card-shiny,
.etc-card.etc-card-ie-11.etc-card-flipped .etc-card-back .etc-card-shiny {
    left: 84% !important;
}

.etc-card.etc-card-ie-10.etc-card-flipped .etc-card-back .etc-card-shiny:after,
.etc-card.etc-card-ie-11.etc-card-flipped .etc-card-back .etc-card-shiny:after {
    left: -480% !important;
    -webkit-transform: rotateY(180deg) !important;
    -moz-transform: rotateY(180deg) !important;
    -ms-transform: rotateY(180deg) !important;
    -o-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
}

.etc-card.etc-card-ie-10.etc-card-amex .etc-card-back,
.etc-card.etc-card-ie-11.etc-card-amex .etc-card-back {
    display: none !important;
}

.etc-card-logo {
    height: 36px !important;
    width: 60px !important;
    font-style: italic !important;
}

.etc-card-logo,
.etc-card-logo:before,
.etc-card-logo:after {
    box-sizing: border-box !important;
}

.etc-card-logo.etc-card-amex {
    text-transform: uppercase !important;
    font-size: 4px !important;
    font-weight: bold !important;
    color: white !important;
    background-image: repeating-radial-gradient(circle at center, #1b1d1b 1px, #999 2px) !important;
    background-image: repeating-radial-gradient(circle at center, #1b1d1b 1px, #999 2px) !important;
    border: 1px solid #EEE !important;
}

.etc-card-logo.etc-card-amex:before,
.etc-card-logo.etc-card-amex:after {
    width: 28px !important;
    display: block !important;
    position: absolute !important;
    left: 16px !important;
}

.etc-card-logo.etc-card-amex:before {
    height: 28px !important;
    content: 'american' !important;
    top: 3px !important;
    text-align: left !important;
    padding-left: 2px !important;
    padding-top: 11px !important;
    background: #267AC3 !important;
}

.etc-card-logo.etc-card-amex:after {
    content: 'express' !important;
    bottom: 11px !important;
    text-align: right !important;
    padding-right: 2px !important;
}

.etc-card.etc-card-amex.etc-card-flipped {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
}

.etc-card.etc-card-amex.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-amex.etc-card-identified .etc-card-back:before {
    background-color: #108168 !important;
}

.etc-card.etc-card-amex.etc-card-identified .etc-card-front .etc-card-logo.etc-card-amex {
    opacity: 1 !important;
}

.etc-card.etc-card-amex.etc-card-identified .etc-card-front .etc-card-cvc {
    visibility: visible !important;
}

.etc-card.etc-card-amex.etc-card-identified .etc-card-front:after {
    opacity: 1 !important;
}

.etc-card-logo.etc-card-discover {
    background: #FF6600 !important;
    color: #111 !important;
    text-transform: uppercase !important;
    font-style: normal !important;
    font-weight: bold !important;
    font-size: 10px !important;
    text-align: center !important;
    overflow: hidden !important;
    z-index: 1 !important;
    padding-top: 9px !important;
    letter-spacing: .03em !important;
    border: 1px solid #EEE !important;
}

.etc-card-logo.etc-card-discover:before,
.etc-card-logo.etc-card-discover:after {
    content: ' ' !important;
    display: block !important;
    position: absolute !important;
}

.etc-card-logo.etc-card-discover:before {
    background: white !important;
    width: 200px !important;
    height: 200px !important;
    border-radius: 200px !important;
    bottom: -5% !important;
    right: -80% !important;
    z-index: -1 !important;
}

.etc-card-logo.etc-card-discover:after {
    width: 8px !important;
    height: 8px !important;
    border-radius: 4px !important;
    top: 10px !important;
    left: 27px !important;
    background-color: #FF6600 !important;
    background-image: -webkit-radial-gradient(#FF6600, #1b1d1b) !important;
    background-image: radial-gradient( #FF6600, #1b1d1b) !important;
    content: 'network' !important;
    font-size: 4px !important;
    line-height: 24px !important;
    text-indent: -7px !important;
}

.etc-card .etc-card-front .etc-card-logo.etc-card-discover {
    right: 12% !important;
    top: 18% !important;
}

.etc-card.etc-card-discover.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-discover.etc-card-identified .etc-card-back:before {
    background-color: #86B8CF !important;
}

.etc-card.etc-card-discover.etc-card-identified .etc-card-logo.etc-card-discover {
    opacity: 1 !important;
}

.etc-card.etc-card-discover.etc-card-identified .etc-card-front:after {
    -webkit-transition: 400ms !important;
    -moz-transition: 400ms !important;
    transition: 400ms !important;
    content: ' ' !important;
    display: block !important;
    background-color: #FF6600 !important;
    background-image: -webkit-linear-gradient(#FF6600, #ffa366, #FF6600) !important;
    background-image: linear-gradient(#FF6600, #ffa366, #FF6600) !important;
    height: 50px !important;
    width: 50px !important;
    border-radius: 25px !important;
    position: absolute !important;
    left: 100% !important;
    top: 15% !important;
    margin-left: -25px !important;
    box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5) !important;
}

.etc-card-logo.etc-card-visa {
    text-transform: uppercase !important;
    color: white !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 24px !important;
    line-height: 18px !important;
    margin-top: 5px !important;
}

.etc-card-logo.etc-card-visa:before,
.etc-card-logo.etc-card-visa:after {
    content: ' ' !important;
    display: block !important;
    width: 100% !important;
    height: 25% !important;
}

.etc-card-logo.etc-card-visa:before {
    position: absolute !important;
    left: -4px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 0 12px 6px 0 !important;
    border-color: transparent #1b1d1b transparent transparent !important;
}

.etc-card.etc-card-visa.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-visa.etc-card-identified .etc-card-back:before {
    background-color: #191278 !important;
}

.etc-card.etc-card-visa.etc-card-identified .etc-card-logo.etc-card-visa {
    opacity: 1 !important;
    box-shadow: none !important;
}

.etc-card-logo.etc-card-visaelectron {
    background: white !important;
    text-transform: uppercase !important;
    color: #1A1876 !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 15px !important;
    line-height: 18px !important;
}

.etc-card-logo.etc-card-visaelectron:before,
.etc-card-logo.etc-card-visaelectron:after {
    content: ' ' !important;
    display: block !important;
    width: 100% !important;
    height: 25% !important;
}

.etc-card-logo.etc-card-visaelectron:before {
    background: #1A1876 !important;
}

.etc-card-logo.etc-card-visaelectron:after {
    background: #E79800 !important;
}

.etc-card-logo.etc-card-visaelectron .elec {
    float: right !important;
    font-family: arial !important;
    font-size: 9px !important;
    margin-right: 1px !important;
    margin-top: -5px !important;
    text-transform: none !important;
}

.etc-card.etc-card-visaelectron.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-visaelectron.etc-card-identified .etc-card-back:before {
    background-color: #191278 !important;
}

.etc-card.etc-card-visaelectron.etc-card-identified .etc-card-logo.etc-card-visaelectron {
    opacity: 1 !important;
}

.etc-card-logo.etc-card-mastercard {
    color: white !important;
    font-style: normal !important;
    text-transform: lowercase !important;
    font-weight: bold !important;
    text-align: center !important;
    font-size: 9px !important;
    line-height: 84px !important;
    z-index: 1 !important;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.6) !important;
}

.etc-card-logo.etc-card-mastercard:before,
.etc-card-logo.etc-card-mastercard:after {
    content: ' ' !important;
    display: block !important;
    width: 36px !important;
    top: 0 !important;
    position: absolute !important;
    height: 36px !important;
    border-radius: 18px !important;
}

.etc-card-logo.etc-card-mastercard:before {
    left: 0 !important;
    background: #EB001B !important;
    z-index: -1 !important;
    opacity: 0.9 !important;
}

.etc-card-logo.etc-card-mastercard:after {
    right: 0 !important;
    background: #FF5F00 !important;
    z-index: -2 !important;
}

.etc-card.etc-card-mastercard.etc-card-identified .etc-card-front .etc-card-logo.etc-card-mastercard,
.etc-card.etc-card-mastercard.etc-card-identified .etc-card-back .etc-card-logo.etc-card-mastercard {
    box-shadow: none !important;
}

.etc-card.etc-card-mastercard.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-mastercard.etc-card-identified .etc-card-back:before {
    background-color: #0061A8 !important;
}

.etc-card.etc-card-mastercard.etc-card-identified .etc-card-logo.etc-card-mastercard {
    opacity: 1 !important;
}

.etc-card-logo.etc-card-maestro {
    color: white !important;
    font-style: normal !important;
    text-transform: lowercase !important;
    font-weight: bold !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 84px !important;
    z-index: 1 !important;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.6) !important;
}

.etc-card-logo.etc-card-maestro:before,
.etc-card-logo.etc-card-maestro:after {
    content: ' ' !important;
    display: block !important;
    width: 36px !important;
    top: 0 !important;
    position: absolute !important;
    height: 36px !important;
    border-radius: 18px !important;
}

.etc-card-logo.etc-card-maestro:before {
    left: 0 !important;
    background: #EB001B !important;
    z-index: -2 !important;
}

.etc-card-logo.etc-card-maestro:after {
    right: 0 !important;
    background: #00A2E5 !important;
    z-index: -1 !important;
    opacity: 0.8 !important;
}

.etc-card.etc-card-maestro.etc-card-identified .etc-card-front .etc-card-logo.etc-card-maestro,
.etc-card.etc-card-maestro.etc-card-identified .etc-card-back .etc-card-logo.etc-card-maestro {
    box-shadow: none !important;
}

.etc-card.etc-card-maestro.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-maestro.etc-card-identified .etc-card-back:before {
    background-color: #0B2C5F !important;
}

.etc-card.etc-card-maestro.etc-card-identified .etc-card-logo.etc-card-maestro {
    opacity: 1 !important;
}

.etc-card-logo.etc-card-dankort {
    width: 60px !important;
    height: 36px !important;
    padding: 3px !important;
    border-radius: 8px !important;
    border: #000000 1px solid !important;
    background-color: #1b1d1b !important;
}

.etc-card-logo.etc-card-dankort .dk {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.etc-card-logo.etc-card-dankort .dk:before {
    background-color: #ED1C24 !important;
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 6px !important;
}

.etc-card-logo.etc-card-dankort .dk:after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -7.7px !important;
    right: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 7px 7px 10px 0 !important;
    border-color: transparent #ED1C24 transparent transparent !important;
    z-index: 1 !important;
}

.etc-card-logo.etc-card-dankort .d,
.etc-card-logo.etc-card-dankort .k {
    position: absolute !important;
    top: 50% !important;
    width: 50% !important;
    display: block !important;
    height: 15.4px !important;
    margin-top: -7.7px !important;
    background: white !important;
}

.etc-card-logo.etc-card-dankort .d {
    left: 0 !important;
    border-radius: 0 8px 10px 0 !important;
}

.etc-card-logo.etc-card-dankort .d:before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    background: #ED1C24 !important;
    border-radius: 2px 4px 6px 0px !important;
    height: 5px !important;
    width: 7px !important;
    margin: -3px 0 0 -4px !important;
}

.etc-card-logo.etc-card-dankort .k {
    right: 0 !important;
}

.etc-card-logo.etc-card-dankort .k:before,
.etc-card-logo.etc-card-dankort .k:after {
    content: '' !important;
    position: absolute !important;
    right: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    margin-right: -1px !important;
}

.etc-card-logo.etc-card-dankort .k:before {
    top: 0 !important;
    border-width: 8px 5px 0 0 !important;
    border-color: #ED1C24 transparent transparent transparent !important;
}

.etc-card-logo.etc-card-dankort .k:after {
    bottom: 0 !important;
    border-width: 0 5px 8px 0 !important;
    border-color: transparent transparent #ED1C24 transparent !important;
}

.etc-card.etc-card-dankort.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-dankort.etc-card-identified .etc-card-back:before {
    background-color: #0055C7 !important;
}

.etc-card.etc-card-dankort.etc-card-identified .etc-card-logo.etc-card-dankort {
    opacity: 1 !important;
}

.etc-card-logo.etc-card-elo {
    height: 50px !important;
    width: 50px !important;
    border-radius: 100% !important;
    background: black !important;
    color: white !important;
    text-align: center !important;
    text-transform: lowercase !important;
    font-size: 21px !important;
    font-style: normal !important;
    letter-spacing: 1px !important;
    font-weight: bold !important;
    padding-top: 13px !important;
}

.etc-card-logo.etc-card-elo .e,
.etc-card-logo.etc-card-elo .l,
.etc-card-logo.etc-card-elo .o {
    display: inline-block !important;
    position: relative !important;
}

.etc-card-logo.etc-card-elo .e {
    -webkit-transform: rotate(-15deg) !important;
    -moz-transform: rotate(-15deg) !important;
    -ms-transform: rotate(-15deg) !important;
    -o-transform: rotate(-15deg) !important;
    transform: rotate(-15deg) !important;
}

.etc-card-logo.etc-card-elo .o {
    position: relative !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    right: 0 !important;
    top: 7px !important;
    border-radius: 100% !important;
    background-image: -webkit-linear-gradient( yellow 50%, red 50%) !important;
    background-image: linear-gradient( yellow 50%, red 50%) !important;
    -webkit-transform: rotate(40deg) !important;
    -moz-transform: rotate(40deg) !important;
    -ms-transform: rotate(40deg) !important;
    -o-transform: rotate(40deg) !important;
    transform: rotate(40deg) !important;
    text-indent: -9999px !important;
}

.etc-card-logo.etc-card-elo .o:before {
    content: '' !important;
    position: absolute !important;
    width: 49% !important;
    height: 49% !important;
    background: black !important;
    border-radius: 100% !important;
    text-indent: -99999px !important;
    top: 25% !important;
    left: 25% !important;
}

.etc-card.etc-card-elo.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-elo.etc-card-identified .etc-card-back:before {
    background-color: #6F6969 !important;
}

.etc-card.etc-card-elo.etc-card-identified .etc-card-logo.etc-card-elo {
    opacity: 1 !important;
}

.etc-card-logo.etc-card-jcb {
    border-radius: 5px 0px 5px 0px !important;
    -moz-border-radius: 5px 0px 5px 0px !important;
    -webkit-border-radius: 5px 0px 5px 0px !important;
    background-color: white !important;
    font-style: normal !important;
    color: white !important;
    width: 50px !important;
    padding: 2px 0 0 2px !important;
}

.etc-card-logo.etc-card-jcb>div {
    width: 15px !important;
    margin-right: 1px !important;
    display: inline-block !important;
    text-align: center !important;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.6) !important;
    border-radius: 5px 0px 5px 0px !important;
    -moz-border-radius: 5px 0px 5px 0px !important;
    -webkit-border-radius: 5px 0px 5px 0px !important;
}

.etc-card-logo.etc-card-jcb>div:before,
.etc-card-logo.etc-card-jcb>div:after {
    content: ' ' !important;
    display: block !important;
    height: 8px !important;
}

.etc-card-logo.etc-card-jcb>div.j {
    background-color: #000063 !important;
    background-image: -webkit-linear-gradient(left, #000063, #008cff) !important;
    background-image: linear-gradient(to right, #000063, #008cff) !important;
}

.etc-card-logo.etc-card-jcb>div.c {
    background-color: #630000 !important;
    background-image: -webkit-linear-gradient(left, #630000, #ff008d) !important;
    background-image: linear-gradient(to right, #630000, #ff008d) !important;
}

.etc-card-logo.etc-card-jcb>div.b {
    background-color: #006300 !important;
    background-image: -webkit-linear-gradient(left, #006300, #00ff00) !important;
    background-image: linear-gradient(to right, #006300, #00ff00) !important;
}

.etc-card.etc-card-jcb.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-jcb.etc-card-identified .etc-card-back:before {
    background-color: #CB8000 !important;
}

.etc-card.etc-card-jcb.etc-card-identified .etc-card-logo.etc-card-jcb {
    opacity: 1 !important;
    box-shadow: none !important;
}

.etc-card-logo.etc-card-dinersclub {
    font-family: serif !important;
    height: 40px !important;
    width: 100px !important;
    color: white !important;
    font-size: 17px !important;
    font-style: normal !important;
    letter-spacing: 1px !important;
}

.etc-card-logo.etc-card-dinersclub::before,
.etc-card-logo.etc-card-dinersclub::after {
    display: block !important;
    position: relative !important;
}

.etc-card-logo.etc-card-dinersclub::before {
    content: 'Diners Club' !important;
}

.etc-card-logo.etc-card-dinersclub::after {
    content: 'International' !important;
    text-transform: uppercase !important;
    font-size: 0.6em !important;
}

.etc-card.etc-card-dinersclub .etc-card-front .etc-card-logo {
    box-shadow: none !important;
}

.etc-card.etc-card-dinersclub.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-dinersclub.etc-card-identified .etc-card-back:before {
    background-color: #999 !important;
}

.etc-card.etc-card-dinersclub.etc-card-identified .etc-card-logo.etc-card-dinersclub {
    opacity: 1 !important;
}

.etc-card-container {
    -webkit-perspective: 1000px !important;
    -moz-perspective: 1000px !important;
    perspective: 1000px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    margin: 0 0 0 0 !important;
    z-index: 1 !important;
    position: relative !important;
}

.etc-card {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    line-height: 1 !important;
    position: relative !important;
    width: 75% !important;
    height: 100% !important;
    margin: auto !important;
    border-radius: 10px !important;
    -webkit-transform-style: preserve-3d !important;
    -moz-transform-style: preserve-3d !important;
    -ms-transform-style: preserve-3d !important;
    -o-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    -webkit-transition: all 400ms linear !important;
    -moz-transition: all 400ms linear !important;
    transition: all 400ms linear !important;
}
.etc-card>*,
.etc-card>*:before,
.etc-card>*:after {
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.etc-card.etc-card-flipped {
    -webkit-transform: rotateY(180deg) !important;
    -moz-transform: rotateY(180deg) !important;
    -ms-transform: rotateY(180deg) !important;
    -o-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
}

.etc-card .etc-card-front,
.etc-card .etc-card-back {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform-style: preserve-3d !important;
    -moz-transform-style: preserve-3d !important;
    -ms-transform-style: preserve-3d !important;
    -o-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    -webkit-transition: all 400ms linear !important;
    -moz-transition: all 400ms linear !important;
    transition: all 400ms linear !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background-color: #575761 !important;
}

.etc-card .etc-card-front:before,
.etc-card .etc-card-back:before {
    content: ' ' !important;
    display: block !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    border-radius: 10px !important;
    -webkit-transition: all 400ms ease !important;
    -moz-transition: all 400ms ease !important;
    transition: all 400ms ease !important;
}

.etc-card .etc-card-front:after,
.etc-card .etc-card-back:after {
    content: ' ' !important;
    display: block !important;
}

.etc-card .etc-card-front .etc-card-display,
.etc-card .etc-card-back .etc-card-display {
    color: white !important;
    font-weight: normal !important;
    opacity: 0.5 !important;
    -webkit-transition: opacity 400ms linear !important;
    -moz-transition: opacity 400ms linear !important;
    transition: opacity 400ms linear !important;
}

.etc-card .etc-card-front .etc-card-display.etc-card-focused,
.etc-card .etc-card-back .etc-card-display.etc-card-focused {
    opacity: 1 !important;
    font-weight: 700 !important;
}

.etc-card .etc-card-front .etc-card-cvc,
.etc-card .etc-card-back .etc-card-cvc {
    font-family: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace !important;
    font-size: 14px !important;
}

.etc-card .etc-card-front .etc-card-shiny,
.etc-card .etc-card-back .etc-card-shiny {
    width: 50px !important;
    height: 35px !important;
    border-radius: 5px !important;
    background: #CCC !important;
    position: relative !important;
}

.etc-card .etc-card-front .etc-card-shiny:before,
.etc-card .etc-card-back .etc-card-shiny:before {
    content: ' ' !important;
    display: block !important;
    width: 70% !important;
    height: 60% !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    background: #d9d9d9 !important;
    position: absolute !important;
    top: 20% !important;
}

.etc-card .etc-card-back .etc-card-shiny {
    position: absolute !important;
    top: 66% !important;
    left: 2% !important;
}

.etc-card .etc-card-front .etc-card-logo {
    position: absolute !important;
    opacity: 0 !important;
    right: 5% !important;
    top: 8% !important;
    -webkit-transition: 400ms !important;
    -moz-transition: 400ms !important;
    transition: 400ms !important;
}

.etc-card .etc-card-front .etc-card-lower {
    width: 80% !important;
    position: absolute !important;
    left: 10% !important;
    bottom: 30px !important;
}

@media only screen and (max-width: 480px) {
    .etc-card .etc-card-front .etc-card-lower {
        width: 90% !important;
        left: 5% !important;
    }
}

.etc-card .etc-card-front .etc-card-lower .etc-card-cvc {
    visibility: hidden !important;
    float: right !important;
    position: relative !important;
    bottom: 5px !important;
}

.etc-card .etc-card-front .etc-card-lower .etc-card-number {
    font-family: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace !important;
    font-size: 24px !important;
    clear: both !important;
    margin-bottom: 30px !important;
}

.etc-card .etc-card-front .etc-card-lower .etc-card-expiry {
    font-family: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace !important;
    letter-spacing: 0em !important;
    position: relative !important;
    float: right !important;
    width: 20% !important;
}

.etc-card .etc-card-front .etc-card-lower .etc-card-expiry:before,
.etc-card .etc-card-front .etc-card-lower .etc-card-expiry:after {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 7px !important;
    white-space: pre !important;
    display: block !important;
    opacity: .5 !important;
}

.etc-card .etc-card-front .etc-card-lower .etc-card-expiry:before {
    content: attr(data-before) !important;
    margin-bottom: 2px !important;
    font-size: 7px !important;
    text-transform: uppercase !important;
}

.etc-card .etc-card-front .etc-card-lower .etc-card-expiry:after {
    position: absolute !important;
    content: attr(data-after) !important;
    text-align: right !important;
    right: 100% !important;
    margin-right: 5px !important;
    margin-top: 2px !important;
    bottom: 0 !important;
}

.etc-card .etc-card-front .etc-card-lower .etc-card-name {
    text-transform: uppercase !important;
    font-family: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace !important;
    font-size: 16px !important;
    max-height: 45px !important;
    position: absolute !important;
    bottom: 0 !important;
    width: 200px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: horizontal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.etc-card .etc-card-back {
    -webkit-transform: rotateY(180deg) !important;
    -moz-transform: rotateY(180deg) !important;
    -ms-transform: rotateY(180deg) !important;
    -o-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
}

.etc-card .etc-card-back .etc-card-bar {
    background-color: #444 !important;
    background-image: -webkit-linear-gradient(#444, #333) !important;
    background-image: linear-gradient(#444, #333) !important;
    width: 100% !important;
    height: 20% !important;
    position: absolute !important;
    top: 10% !important;
}

.etc-card .etc-card-back:after {
    content: ' ' !important;
    display: block !important;
    background-color: #1b1d1b !important;
    background-image: -webkit-linear-gradient(#1b1d1b, #1b1d1b) !important;
    background-image: linear-gradient(#1b1d1b, #1b1d1b) !important;
    width: 80% !important;
    height: 16% !important;
    position: absolute !important;
    top: 40% !important;
    left: 2% !important;
}

.etc-card .etc-card-back .etc-card-cvc {
    position: absolute !important;
    top: 44% !important;
    left: 85% !important;
    -webkit-transition-delay: 600ms !important;
    -moz-transition-delay: 600ms !important;
    transition-delay: 600ms !important;
}

.etc-card .etc-card-back .etc-card-shiny {
    position: absolute !important;
    top: 66% !important;
    left: 2% !important;
}

.etc-card .etc-card-back .etc-card-shiny:after {
    content: ' ' !important;
    position: absolute !important;
    left: 120% !important;
    top: 5% !important;
    color: white !important;
    font-size: 7px !important;
    width: 230px !important;
    opacity: .5 !important;
}

.etc-card.etc-card-identified {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}

.etc-card.etc-card-identified .etc-card-front,
.etc-card.etc-card-identified .etc-card-back {
    background-color: #000 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.etc-card.etc-card-identified .etc-card-front:before,
.etc-card.etc-card-identified .etc-card-back:before {
    -webkit-transition: all 400ms ease !important;
    -moz-transition: all 400ms ease !important;
    transition: all 400ms ease !important;
    background-color: rgb(62, 62, 82) !important;
    background-image: linear-gradient(190deg, rgb(62, 62, 82) 0%, rgb(34, 34, 45) 100%) !important;
    opacity: 1 !important;
}

.etc-card.etc-card-identified .etc-card-front .etc-card-logo,
.etc-card.etc-card-identified .etc-card-back .etc-card-logo {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

.etc-card.etc-card-identified.no-radial-gradient .etc-card-front:before,
.etc-card.etc-card-identified.no-radial-gradient .etc-card-back:before {
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%) !important;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%) !important;
}

@media (max-width:767px){
    .etc-check-label {
        font-size: 10px !important;
    }
    .etc-method-pix {
        background-size: 75px 27px !important;
    }
}
@media (max-width: 440px) {
    .card-wrapper .etc-card {
        width: 100% !important;
    }
    .card-form {
        padding: 18px !important;
    }
}