@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

body {
    background-color: #01133E;
    background-image: url("https://www.directv.com.ar/content/dam/public-sites/ar/e-retail-2020/2021/octubre/Carrusel_Desk_131_BASE%20DTH_POSPAGO_OCTUBRE.jpg");
    background-repeat: no-repeat;
}

*{
    font-family: 'Montserrat', sans-serif;
}

h2{
    font-weight: bold;
    font-size: 1.8rem;
    margin: 10px auto 30px auto;
    text-align: center;
}

h3{
    background: #03a8f2;
    font-size: 1.5rem;
    margin-left: -40px;
    padding: 20px;
    text-align: center;
    width: calc(100% + 80px);
}

.form {
    border: 1px solid #ffffff;
    border-radius: 20px;
    max-width: 700px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    padding: 50px;
    margin: 350px auto 50px;
    background-color: #000;
}

.form img {
    margin: auto;
    display: block;
    padding-bottom: 20px;
}

.form-group:first-child {
    padding-top: 30px;
}

.tarjetas {
    display: flex;
    width: 100%;
    max-width: 700px;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.tarjetas img {
    height: 50px;
    padding: 4px;
}

.visa {
    flex: 1;
}

.master {
    flex: 1;
}

.american {
    flex: 1;
}

.naranja {
    flex: 1;
}

.nativa {
    flex: 1;
}

.cencosud {
    flex: 1;
}

.fava {
    flex: 1;
}

.data {
    flex: 1;
}

input, select{
    border: 2px solid transparent;
}

.error{
    border: 2px solid crimson;
}

button {
    margin: 20px 0 30px;
    width: 100%;
}

button:disabled{
    cursor: not-allowed;
}

.message{
    display: block;
    width: 100%;
    font-size: 12px;
    padding: 0;
    text-transform: uppercase;
    color: crimson;
    height: 15px;
}