@media (min-width: 481px) {

    .form .form-fields input {
        display: block;
        width: 100%;
        font-size: 2.75em;
        font-weight: 100;
        background-color: transparent;
        color: #353535;

        border-width: 0 0 3px 0;
        border-color: #414242;

        padding: 10px 5px;
        margin-bottom: 1em;
        font-family: 'Roboto';

        background: url(/assets/svg/form_standby.svg);
        background-size: .4em;
        background-repeat: no-repeat;
        background-position: 95% center;

        -webkit-transition: ease .5s;
        transition: ease .5s;

    }

    .form .form-fields input::placeholder {
        color: #414242;
    }

    .form .form-fields input:focus {
        outline: none;
        border-color: #B6860E;
        color: #353535;
    }

    .form .form-fields input.sent {
        opacity: 0;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
    }

    .form .form-fields input:focus::placeholder {
        color: #FFFFFF;
    }

    .form .form-fields button {
        width: 30vh;
        padding: .75em 0;

        background-color: #B6860E;
        color: #fff;
        border: none;

        font-size: 1.5em;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 2em;

        cursor: pointer;
        -webkit-transition: ease .5s;
        transition: ease .5s;
    }

    .form .form-fields button:focus {
        outline: none;
    }

    .form .form-fields button:hover {
        background-color: #37426b;
    }

    .form .form-fields button.loading:after {
        animation: changeContent .8s linear infinite;
        display: block;
        content: "⠋";
        font-size: 80px;
    }

    .form .form-fields button.sent,
    .form .form-fields.sent {
        display: none;
        -webkit-transition: ease .5s;
        transition: ease .5s;
    }

/*    .form .form-fields .sent {

        background-image: url(/assets/svg/form_success.svg);
        background-size: 60%;
        background-position: center;
        background-repeat: no-repeat;

        position: absolute;

        width: 30vw !important;
        height: 30vw !important;

        border-radius: 15vw;
        top: calc(25% - 7.5vh);
        left: calc(50% - 22.5vh);

        cursor: default;

        -webkit-transition: ease .5s;
        transition: ease .5s;
    }*/

    input[type="text"]:valid,
    input[type="email"]:valid,
    input[type="telephone"]:valid {
        background: url(/assets/svg/form_success.svg);
        background-size: .4em;
        background-repeat: no-repeat;
        background-position: 95% center;
    }
}

@media (max-width: 480px) {
   
    .form .form-fields input {
        display: block;
        width: 100%;
        font-size: 2em;
        font-weight: 100;
        background-color: transparent;
        color: #353535;

        border-width: 0 0 3px 0;
        border-color: #414242;

        padding: 10px 5px;
        margin-bottom: 1em;
        font-family: 'Roboto';

        background: url(/assets/svg/form_standby.svg);
        background-size: .75em;
        background-repeat: no-repeat;
        background-position: 95% center;

        -webkit-transition: ease .5s;
        transition: ease .5s;

    }

    .form .form-fields input::placeholder {
        color: #414242;
    }

    .form .form-fields input:focus {
        outline: none;
        border-color: #B6860E;
        color: #353535;
    }

    .form .form-fields input.sent {
        opacity: 0;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
    }

    .form .form-fields input:focus::placeholder {
        color: #FFFFFF;
    }

    .form .form-fields button {
        width: 30vh;
        padding: .75em 0;

        background-color: #B6860E;
        color: #fff;
        border: none;

        font-size: 1.5em;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 2em;

        cursor: pointer;
        -webkit-transition: ease .5s;
        transition: ease .5s;
    }

    .form .form-fields button:focus {
        outline: none;
    }

    .form .form-fields button:hover {
        background-color: #37426b;
    }

    .form .form-fields button.loading:after {
        animation: changeContent .8s linear infinite;
        display: block;
        content: "⠋";
        font-size: 80px;
    }

    .form .form-fields button.sent,
    .form .form-fields.sent {
        display: none;
        -webkit-transition: ease .5s;
        transition: ease .5s;
    }

/*    .form .form-fields .sent {

        background-image: url(/assets/svg/form_success.svg);
        background-size: 60%;
        background-position: center;
        background-repeat: no-repeat;

        position: absolute;

        width: 30vw !important;
        height: 30vw !important;

        border-radius: 15vw;
        top: calc(25% - 7.5vh);
        left: calc(50% - 22.5vh);

        cursor: default;

        -webkit-transition: ease .5s;
        transition: ease .5s;
    }*/

    input[type="text"]:valid,
    input[type="email"]:valid,
    input[type="telephone"]:valid {
        background: url(/assets/svg/form_success.svg);
        background-size: .75em;
        background-repeat: no-repeat;
        background-position: 95% center;
    }

}