.agentes{
    color: var(--mattes);
    text-decoration: underline;
    font-family: "Gothic";
}

@media(min-width:576px) {
    .agentes{
        text-decoration: none;
    }

    .agentes::after,
    .agentes::before {
        content: ' ';
        position: absolute;
        width: 120px;
        height: 3px;
        background-color: currentcolor;
        top: 4.3em;
    }

    .agentes::before {
        left: 90px;
    }

    .agentes::after {
        right: 90px;
    }
}


@media(min-width:768px) {   
    .agentes::after,
    .agentes::before {        
        top: 2.3em;
    } 
    .agentes::before {
        left: 180px;
    }

    .agentes::after {
        right: 180px;
    }
}

@media(min-width:992px) {    
    .agentes::before {
        left: 300px;
    }

    .agentes::after {
        right: 300px;
    }
}

@media(min-width:1200px) {    
    .agentes::before {
        left: 374px;
    }

    .agentes::after {
        right: 374px;
    }
}

/*Estilos animados a los inputs*/
.form__group {
    margin: auto;
    position: relative;
}

.form__input {
    display: block;
    width: 100%;
    background: none;
    color: #000;
    font-size: 18px;
    padding: 8px 12px 8px 5px;
    border: none;
    border: 1px solid #ccc;
}

.form__input:focus {
    outline: none;
    color: #000;
    padding-bottom: 8px;
}

input {
    caret-color: var(--mattes);
}

.form__input:focus+.form__label,
.form__input:not(:placeholder-shown)+.form__label {
    position: absolute;
    top: -23px;
    left: 16px;
    font-size: 18px;
    color: #212529;
    width: 95%;
}

.form__label {
    position: absolute;
    color: #212529;
    font-size: 18px;
    left: 24px;
    top: 6px;
    transition: 0.5s ease all;
    pointer-events: none;
}

input[type=text]:valid:not(:focus):not(:placeholder-shown),
input[type=tel]:valid:not(:focus):not(:placeholder-shown),
input[type=email]:valid:not(:focus):not(:placeholder-shown),
input[type=number]:valid:not(:focus):not(:placeholder-shown),
input[type=date]:valid:not(:focus):not(:placeholder-shown),
input[type=password]:valid:not(:focus):not(:placeholder-shown),
select:valid:not(:focus):not(:placeholder-shown),
textarea:valid:not(:focus):not(:placeholder-shown) {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    border: 1px solid #28a745;
    padding-right: calc(1.5em + .75rem) !important;
}

input[type=text]:invalid:not(:focus):not(:placeholder-shown),
input[type=tel]:invalid:not(:focus):not(:placeholder-shown),
input[type=email]:invalid:not(:focus):not(:placeholder-shown),
input[type=number]:invalid:not(:focus):not(:placeholder-shown),
textarea:invalid:not(:focus):not(:placeholder-shown) {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    border: 1px solid #dc3545;
    padding-right: calc(1.5em + .75rem) !important;
}

input[type=text]:invalid:not(:focus):not(:placeholder-shown)~.requirements,
input[type=tel]:invalid:not(:focus):not(:placeholder-shown)~.requirements,
input[type=email]:invalid:not(:focus):not(:placeholder-shown)~.requirements,
input[type=number]:invalid:not(:focus):not(:placeholder-shown)~.requirements,
textarea:invalid:not(:focus):not(:placeholder-shown)~.requirements {
    max-height: 200px;
}

.requirements {
    color: #999;
    max-height: 0;
    transition: 0.28s;
    overflow: hidden;
    color: red;
    font-family: "Gothici";
}

.pr-5-5{
    padding-right: 4rem !important;
}
@media(min-width: 992px){
    .pr-lg-6{
        padding-right: 4.5rem !important;
    }
}