:focus {
    outline: none;
}

.col-2 {
    float: left;
    width: 20%;
    margin: 30px 2%;
    position: relative;
}

.col-3 {
    float: left;
    width: 30%;
    margin: 30px 2%;
    position: relative;
}

.col-4 {
    float: left;
    width: 46%;
    margin: 30px 2%;
    position: relative;
}
.col-5 {
    float: left;
    width: 50%;
    margin: 30px 2%;
    position: relative;
}

.col-6 {
    float: left;
    width: 60%;
    margin: 30px 2%;
    position: relative;
}
.col-7 {
    float: left;
    width: 70%;
    margin: 30px 2%;
    position: relative;
}
.col-8 {
    float: left;
    width: 94%;
    margin: 30px 2%;
    position: relative;
}
.col-val {
    float: left;
    width: 94%;
    margin: -10px 2%;
    position: relative;
}

.col-x3 {
    float: left;
    width: 28.6%;
    margin: 30px 2%;
    position: relative;
}
/* necessary to give position: relative to parent. */


select option {
    font-family: Delivery, "Helvetica Neue", sans-serif;
}

.input-form {
    font-family: Delivery, "Helvetica Neue", sans-serif;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid;
    padding: 12px 14px;
    transition: 0.4s;
    background: transparent;
    position: absolute;
}

.colorok {
    color: #333;
    border-color: #ccc;
}

.colorfail {
    color: #D40511 !important;
}


    .input-form:hover, .input-form:focus, .input-form:active {
        letter-spacing: 1px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 2px solid;
        position: absolute;
    }

    .input-form ~ .focus-border:before,
    .input-form ~ .focus-border:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0px;
        background-color: red;
        transition: 0.0s;

    }

    .input-form ~ .focus-border:after {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
    }

    .input-form ~ .focus-border i:before,
    .input-form ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 0;
        background-color: blue;
        transition: 0.0s;
    }

    .input-form ~ .focus-border i:after {
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
    }

    .input-form:focus ~ .focus-border:before,
    .input-form:focus ~ .focus-border:after,
    .has-content.input-form ~ .focus-border:before,
    .has-content.input-form ~ .focus-border:after {
        width: 100%;
        transition: 0.3s;
    }

    .input-form:focus ~ .focus-border i:before,
    .input-form:focus ~ .focus-border i:after,
    .has-content.input-form ~ .focus-border i:before,
    .has-content.input-form ~ .focus-border i:after {
        height: 100%;
        transition: 0.4s;
    }

    .input-form ~ label {
        position: absolute;
        left: 14px;
        width: 100%;
        top: 15px;
        color: #aaa;
        transition: 0.3s;
        z-index: -1;
        letter-spacing: 0.5px;
        position: absolute;
    }

    .input-form:focus ~ label, .has-content.input-form ~ label {
        top: -18px;
        left: 0;
        font-size: 12px;
        color: #8C8C8C;
        transition: 0.3s;
        position: absolute;
    }

.disable {
    background-color: #E5E5E5;
}

.input-special {
    font-family: Delivery, "Helvetica Neue", sans-serif;
    color: #333;
    width: 20%;
    box-sizing: border-box;
    letter-spacing: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid;
    padding: 12px 14px;
    transition: 0.4s;
    background: transparent;
}

.space-1 {
    float: left;
    width: 6%;
    margin: 2%;
    position: relative;
}

.space-2 {
    float: left;
    width: 16%;
    margin: 2%;
    position: relative;
}

.space-2-esp {
    float: left;
    width: 16%;
    margin: 1% 2% 2% 2%;
}

.space-3 {
    float: left;
    width: 26%;
    margin: 2%;
    position: relative;
}

.space-4 {
    float: left;
    width: 36%;
    margin: 2%;
    position: relative;
}

.space-5 {
    float: left;
    width: 46%;
    margin: 2%;
    position: relative;
}

.space-6 {
    float: left;
    width: 56%;
    margin: 2%;
    position: relative;
}

.space-7 {
    float: left;
    width: 66%;
    margin: 2%;
    position: relative;
}

.space-8 {
    float: left;
    width: 76%;
    margin: 2%;
    position: relative;
}

.space-9 {
    float: left;
    width: 86%;
    margin: 2%;
    position: relative;
}

.space-10 {
    float: left;
    width: 96%;
    margin: 2%;
    position: relative;
}