.callback {
    padding: 0 1rem;
    float: left;

    p.title {
        font-size: 1.4em;
        color: #666;
        font-weight: 600;
        text-transform: uppercase;
        font-family: "DINCompMedium";
        margin-bottom: 10px;
        margin-top: 10px;
    }

    form.callback-form {
        label {
            width: 48%;

            input {
                /* width: 100%; */
                margin-top: .25em;
                padding: .5em;
                border: none;
                border: 1px solid #d1d1d1;

                &:focus {
                    outline: none;
                    border: 1px solid #b4c1d7;
                }
            }

            select {
                width: 100%;
                margin-top: .25em;
                padding: .5em;
                border: none;
                border: 1px solid #d1d1d1;
                margin-bottom: 1em;


                &:focus {
                    outline: none;
                    border: 1px solid #b4c1d7;
                }
            }
        }

        input[type="submit"] {
            background: #3073c4;
            color: #fff;
            width: 48%;
            cursor: pointer;

            &:disabled {
                opacity: .25;
                cursor: not-allowed;
            }

            &:not(:disabled) {
                opacity: 1;
            }
        }
    }
}


.contact {
    form.contact-form {

        padding: 1rem;

        label {
            width: 48%;
            margin-bottom: .75em;

            input,
            textarea,
            select {
                width: 100%;
                margin-top: .25em;
                padding: .5em;
                border: none;
                border: 1px solid #d1d1d1;

                &:focus {
                    outline: none;
                    border: 1px solid #b4c1d7;
                }
            }

            input[type="radio"],
            input[type="checkbox"] {
                width: auto;
                margin-right: .5em;
            }



            &.further-details {
                width: 100%;
            }
        }

        input[type="submit"] {
            background: #3073c4;
            color: #fff;
            width: 49%;
            cursor: pointer;
            padding: .5em;

            &:disabled {
                opacity: .25;
                cursor: not-allowed;
            }

            &:not(:disabled) {
                opacity: 1;
            }
        }

        .services {
            width: 100%;

            .checkboxes {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}





form {
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    label {
        display: block;
        position: relative;


        &.label-radio {
            font-size: .75em;
        }
    }

    input[type="file"] {
        font-size: .75em;
        border: 1px solid #b4c1d7;
    }

    input[type="radio"],
    input[type="checkbox"] {
        width: auto;
        margin-right: .5em;
    }

    input[type="submit"] {
        background: #3073c4;
        color: #fff;
        text-transform: uppercase;
        cursor: pointer;
        transition: all .2s ease;

        &:disabled {
            opacity: .25;
            cursor: not-allowed;
        }

        &:not(:disabled) {
            opacity: 1;

            &:hover {
                background-color: #008a00;
            }

            &:active {
                background-color: #006600;
                transition: none;
            }
        }
    }

    /* Validation */
    .message {
        display: block;
        position: absolute;
        top: 55%;
        right: 1em;
        font-size: .75em;
        text-align: right;
        margin-top: .25em;
        color: red;

        span {
            font-family: FontAwesome;
        }
    }

    .further-details .message {
        top: auto;
        bottom: 1em;
    }

    .issue {
        input {
            background: rgba(255, 0, 0, 0.1);
        }

        span {
            color: red;
        }
    }

    .success {
        input {
            background: rgba(0, 128, 0, 0.1);
        }

        span {
            color: green;
        }
    }
}

/*styles for when the form sends*/
.results {
    position: fixed;
    bottom: -60px;
    z-index: 50;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font: 1.2em/1em sans-serif;
    transition: all .2s ease;

    &.visible {
        bottom: 0;
    }

    &.success {
        background: green;
        color: #fff;
    }

    &.issue {
        background: red;
        color: #fff;
    }
}

/* AJAX Loading Spinner */
.loading {
    margin: 1em 0;
    font: .9em arial, sans-serif;
    text-transform: uppercase;
    color: #000;
    display: none;
}

.loader {
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 4px solid rgba(0, 0, 0, 0.2);
    border-right: 4px solid rgba(0, 0, 0, 0.2);
    border-bottom: 4px solid rgba(0, 0, 0, 0.2);
    border-left: 4px solid #555;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    display: block;
    float: left;
    margin-right: 5px;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 25px;
    height: 25px;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loading.white {
    color: #fff;
}

.loading.white .loader {
    border-top: 4px solid rgba(255, 255, 255, 0.4);
    border-right: 4px solid rgba(255, 255, 255, 0.4);
    border-bottom: 4px solid rgba(255, 255, 255, 0.4);
    border-left: 4px solid #ffffff;
}