@-webkit-keyframes 
cardEnter {  0%, 20%, 40%, 60%, 80%, 100% {
            -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
            opacity: 0;
            -webkit-transform: scale3d(0.3, 0.3, 0.3);
        }
        20% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1);
        }
        40% {
            -webkit-transform: scale3d(0.9, 0.9, 0.9);
        }
        60% {
            opacity: 1;
            -webkit-transform: scale3d(1.03, 1.03, 1.03);
        }
        80% {
            -webkit-transform: scale3d(0.97, 0.97, 0.97);
        }
        100% {
            opacity: 1;
            -webkit-transform: scale3d(1, 1, 1);
             }
}
@keyframes 
cardEnter {  0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/* -- Input styles ---------------------------------- */
.form-material{

    .form-group {
        position: relative;
        margin-top: 35px;
        margin-bottom: 20px;
    }
    .input-group {
        position: relative;
    }
    .form-control {
        display: block;
        height: 36px;
        width: 100%; 
        border: none;
        border-radius: 0 !important;
        font-size: 12px;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        border-bottom: 1px solid #D5D5D5;
    }
    textarea.form-control{
        height: auto;
    }
    
    .input-group .form-control {
        position: relative;
        z-index: inherit;
        float: inherit;
        width: 100%;
        margin-bottom: 0;
    }
    .form-control:focus {
        border-color: #D5D5D5;
        outline: none;
        box-shadow: none;
    }

    /* -- label styles ---------------------------------- */
    label {
        position: absolute;
        top: -18px;
        color: #333;
        font-size: 12px;
        font-weight: 400;

        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .form-horizontal .control-label {
        position: relative;
        top: 0;
        margin-bottom: 0;
    }

    .float-label {
        left: 0;
        top: 7px;
        font-size: 12px;
        pointer-events: none;
    }

    /* active state */
    .form-control:focus ~ .float-label, .form-control:valid ~ .float-label {
        top: -18px;
        font-size: 11px;
    }


    /* input colors ---- */
    // default
    .form-control:focus {
        ~ label {
            color: #E34724;
        }

        ~ .form-bar:before, ~ .form-bar:after {
            background: #E34724;
        }
    }




    .form-control:valid ~ .control-label {

    }

    /* help-block */
    .form-group .help-block {
        position: absolute;
    }

    .help-block {
        color: #bdbdbd; // caption
        font-size: 12px;
        font-weight: 300;
    }

    /* input addon ---*/
    .input-group-addon {
        border: none;
        background: transparent;
    }

    /* ------  inline ----*/
    .input-group-addon, .form-inline .input-group {
        display: table-cell;
    }

    .input-group-addon, .input-group-btn {
        width: inherit;
    }

    .input-group {
        width: 100%;
    }



    /* -- bar styles -------------------------------------- */
    .form-bar {
        position: relative;
        display: block;
        width: 100%;
    }
    .form-bar:before, .form-bar:after 	{
        content: '';
        height: 1px;
        width: 0;
        bottom: 0;
        position: absolute;
        transition: 0.3s ease all;
        -moz-transition: 0.3s ease all;
        -webkit-transition: 0.3s ease all;
    }
    .form-bar:before {
        left: 50%;
    }
    .form-bar:after {
        right: 50%;
    }

    /* active state */
    .form-control:focus ~ .form-bar:before, .form-control:focus ~ .form-bar:after {
        width: 50%;
    }

    /* -- highlighter styles ------------------------------ */
    .form-highlight {
        position: absolute;
        height: 60%;
        width: 60px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: 0.4;
    }

    /* active state */
    .form-control:focus ~ .form-highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    /* -- highlighter animation --------------------------- */
    @-webkit-keyframes inputHighlighter {
        from { background:#5264AE; }
        to { width:0; background:transparent; }
    }
    @-moz-keyframes inputHighlighter {
        from { background:#5264AE; }
        to { width:0; background:transparent; }
    }
    @keyframes inputHighlighter {
        from { background:#5264AE; }
        to { width:0; background:transparent; }
    }

    .form-group.checkbox-material {
        margin-top: 20px;
    }

    .checkbox-material input[type='checkbox'] {
        height: 0;
        width: 0;
        opacity: 0;
    }

    .checkbox-material label {
        font-size: 12px;        
        line-height: 19px;
        display: inline-block;
        overflow: hidden;
        position: relative;
        top: 10px;
        padding-left: 0;
        cursor: pointer;
    }

    .checkbox-material .chk-span {
        top: 0;
        border: 1px solid #D5D5D5;
        color: #D5D5D5;
        cursor: pointer;
        display: inline-block;
        float: left;
        height: 18px;
        margin: 0px 14px 0px 0px;
        outline-color: #eaeaea;
        padding: 0;
        position: relative;
        width: 18px;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        z-index: 1;
    }

    .checkbox-material .chk-span.checked {
        top: -2px;
        border-left: 2px solid #E34724;
        border-bottom: 4px solid #E34724;
        border-top: 1px solid rgba(0,0,0,0);
        border-right: 1px solid rgba(0,0,0,0);
        -webkit-transform: rotate(-45deg) scaleY(0.5);
        -moz-transform: rotate(-45deg) scaleY(0.5);
        -ms-transform: rotate(-45deg) scaleY(0.5);
        -o-transform: rotate(-45deg) scaleY(0.5);
        transform: rotate(-45deg) scaleY(0.5);
    }

    // Checkbox colors
    .checkbox-material .chk-span.checked {
        border-left-color: #E34724;
        border-bottom-color: #E34724;
    }

    // focus state
    .checkbox-material input[type='checkbox']:focus ~ label {

        color: #E34724;

        .chk-span {
            border-color: #E34724;
            &.checked {
                border-left-color: #E34724;
                border-bottom-color: #E34724;
                border-top: 1px solid rgba(0, 0, 0, 0);
                border-right: 1px solid rgba(0, 0, 0, 0);
            }
        }
    }

    .form-control-static {
        font-size: 14px;
    }

    .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
        background-color: transparent;
        border-bottom-style: dashed;
    }

    #focusedInput {
        border-color: #ccc;
        border-color: rgba(82,168,236,.8);
        outline: 0;
        box-shadow: none;
    }
    
    .radio-material {        
        padding-right: 20px;
        font-size: 12px;
        line-height: 20px;
        cursor: pointer;                
    }
    label.radio-material{
        position: relative;
        top: 0px;
    }

    .radio-material:hover .inner {
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
        opacity: .5;
    }

    .radio-material input {
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .radio-material input:checked + .outer .inner {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    .radio-material input:checked + .outer { border: 1px solid #D5D5D5; }

    .radio-material input:focus + .outer .inner {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        background-color: #E34724;
    }

    .radio-material .outer {
        width: 20px;
        height: 20px;
        display: block;
        float: left;
        margin: 0px 10px 0px 0px;
        border: 1px solid #D5D5D5;
        border-radius: 50%;
        background-color: #fff;
    }

    .radio-material .inner {
        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        width: 14px;
        height: 14px;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        display: block;
        margin: 2px;
        border-radius: 50%;
        background-color: #E34724;
        opacity: 0;
    }
    
    
}

@media (min-width: 768px) {
    .form-material{    

        .form-horizontal .control-label {
            font-size: 14px;
        }

        .form-inline .form-group {
            margin-top: 16px;
        }

        .input-group-btn, .input-group .form-control, .input-group-addon, .form-inline .input-group {
            display: inline-block;
        }

        .input-group {
            width: auto;
        }

        .form-inline .radio label, .form-inline .checkbox label {
            padding-left: 5px;
        }
    }
}