*,
:before,
:after {
    box-sizing: border-box;
}

/*= input focus effects css
=========================== */
:focus {
    outline: none;
}

.col-12 {
    padding-left: 0px;
    padding-right: 0px;
}

.col-3 {
    float: left;
    width: 27.33%;
    margin: 40px 3%;
    position: relative;
}
/* necessary to give position: relative to parent. */
input{
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #333;
    width: 100%;
    max-width: inherit;
    margin-bottom: 0px !important;
    box-sizing: border-box;
    letter-spacing: 1px;
}

.effect-9 {
    border: 1px solid #ccc;
    padding: 7px 14px 9px;
    transition: 0.4s;
}
    .effect-9 ~ .focus-border:before,
    .effect-9 ~ .focus-border:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 2px;
        background-color: #1BBC9B;
        transition: 0.2s;
        transition-delay: 0.2s;
    }

    .effect-9 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        right: auto;
        left: 0;
        transition-delay: 0.6s;
    }

    .effect-9 ~ .focus-border i:before,
    .effect-9 ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 0;
        background-color: #1BBC9B;
        transition: 0.2s;
    }

    .effect-9 ~ .focus-border i:after {
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        transition-delay: 0.4s;
    }

    .effect-9:focus ~ .focus-border:before,
    .effect-9:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.2s;
        transition-delay: 0.6s;
    }

    .effect-9:focus ~ .focus-border:after {
        transition-delay: 0.2s;
    }

    .effect-9:focus ~ .focus-border i:before,
    .effect-9:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.2s;
    }

    .effect-9:focus ~ .focus-border i:after {
        transition-delay: 0.4s;
    }



    /*CUSTOM CHECKBOX*/

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    [type="checkbox"]:checked + label,
    [type="checkbox"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
    }

        [type="checkbox"]:checked + label:before,
        [type="checkbox"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            background: #fff;
        }

        [type="checkbox"]:checked + label:after,
        [type="checkbox"]:not(:checked) + label:after {
            content: '✓';
            width: 8px;
            height: 8px;
            font-weight: 700;
            color: #00a69c;
            position: absolute;
            left: 3px;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type="checkbox"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        [type="checkbox"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }