#contact-form { position: relative; }
#contact-form > .fields {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    
    margin-bottom: 15px;
    
    transition: opacity .2s ease-out;
}
#contact-form > .fields > .field {
    width: 100%; overflow: hidden;
    margin: 0;
    
    background-color: #FAFAFA;
    border: none;
    border-radius: 10px;
    
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
#contact-form > .fields > input.field {
    height: 48px;
    padding: 0 12px;
}
#contact-form > .fields > textarea.field {
    height: 96px;
    padding: 10px 12px;
    resize: none;
}
#contact-form > .fields > .field + .field { margin-top: 10px; }
#contact-form > .fields > .field.column { flex: 0 0 calc(50% - 5px); }
#contact-form > .fields > .field.column + .field.column { margin-top: 0; margin-left: 10px; }
#contact-form > .fields > .field.error { color: #F88; }
#contact-form > input[type="submit"] {
    width: 100%; height: 48px;
    
    background-color: #597AA3;
    border-radius: 10px;
    border: none;
    box-shadow:
        inset 1px 1px 1px   rgba(255,255,255,.1),
              0   1px 2px 0 rgba(0,0,0,.2);
    
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: #FAFAFA;
    
    transition: background-color .2s ease-out;
    
    cursor: pointer;
}
#contact-form > input[type="submit"]:hover {
    background-color: #496A93;
}

/*------------------------------------------------------------------------------------------------------*/

#contact-form.sending > .fields,
#contact-form.sending > input[type="submit"] { opacity: 0; pointer-events: none; }

#contact-form.sending:before,
#contact-form.sending:after {
    position: absolute; top: 50%; left: 50%;
}
#contact-form.sending:after { transform: translate(-50%, -50%); }
#contact-form.sending.spinner:before {
    content: "";
    display: block; height: 100px; width: 100px;
    
    background-image: url("../../images/icons/spinner.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    animation: spinner 1.5s linear 0s infinite;
}
#contact-form.sending:after {
    display: block; max-width: 75%;
    padding: 20px 30px;
    
    background-color: #FAFAFA;
    border-radius: 10px;
    
    text-align: center;
    font-weight: 700;
    color: #294A73;
}
#contact-form.sending.success:after { content: attr(data-success); }
#contact-form.sending.failure:after { content: attr(data-failure); }

@keyframes spinner {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    50%  { transform: translate(-50%, -50%) rotate(180deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}