/* form starting stylings ------------------------------- */
    .group { 
        position:relative; 
        padding-top: 20px;
        margin-bottom: 45px;
    }
    .v-material-input {
        font-size:18px;
        padding:10px 10px 10px 5px;
        display:block;
        width:100%;
        border:none;
        border-bottom:1px solid #757575;
    }
    .v-material-input:focus { outline:none; }

    /* LABEL ======================================= */
    .group label  {
        color:#999; 
        font-size:18px;
        font-weight:normal;
        position:absolute;
        pointer-events:none;
        left:5px;
        top:35px;
        transition:0.2s ease all; 
        -moz-transition:0.2s ease all; 
        -webkit-transition:0.2s ease all;
    }
  
    /* active state */
    .v-material-input:focus ~ label, .v-material-input:valid ~ label {
        top: 0px;
        font-size:14px;
        color:#046169;
    }
  
    /* BOTTOM BARS ================================= */
    .bar { position:relative; display:block; width:100%; }
    .bar:before, .bar:after {
        content:'';
        height:2px; 
        width:0;
        bottom:1px; 
        position:absolute;
        background:#046169; 
        transition:0.2s ease all; 
        -moz-transition:0.2s ease all; 
        -webkit-transition:0.2s ease all;
    }
    .bar:before {
        left:50%;
    }
    .bar:after {
        right:50%; 
    }
    /* active state */
    .v-material-input:focus ~ .bar:before, .v-material-input:focus ~ .bar:after {
        width:50%;
    }