:root {
    --color-primary-op: #ac87bd;
    --color-bg-light: #eee;
    --color-text-ligth: #757575;
    --color-stars: #dfad51;
    --color-danger: #ff4040;
    --color-success: #22d163;
    --color-info: #c6cfd9;
    --color-info-dark: #9acef8;
    --color-blue: #2581cc;
    --color-blue-dark: #1765a4;
}

.header-iniciar,
.form-iniciar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.header-iniciar img {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
}

.header-iniciar h1 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary-op);
}

.form-iniciar {
    margin-top: 32px;
}

.form-iniciar>div {
    justify-content: center;
}

.btn-iniciar {
    background-color: var(--color-primary-op);
    color: #fff;
    padding: 8px 36px;
    border: none;
    border-radius: 32px;
    margin: 7px 0;
}

.btn-registro {
    color: var(--color-blue);
}

.btn-registro:hover {
    color: var(--color-blue-dark);
}

.btn-google,
.btn-facebook,
.btn-guest {
    border: 2px solid var(--color-primary-op);
    background-color: transparent;
    width: 80%;
    padding: 8px 36px;
    border-radius: 32px;
    margin: 7px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    margin: 10px 0 5px 0;
    font-size: 16px;
}

.btn-google i {
    font-size: 28px;
    color: var(--color-stars);
}

.btn-facebook {
    border-color: var(--color-blue-dark);
}

.btn-facebook i {
    font-size: 28px;
    color: var(--color-blue-dark);
}

.btn-guest {
    border-color: var(--color-stars);
}




/* Small Device: 320px */
@media only screen and (max-width: 479px) {

    .btn-google,
    .btn-facebook {
        font-size: 11px;
    }

}