.material input {
    margin: 10px 25px 10px 0px;
    width: 100%;
    display: block;
    border: none;
    padding: 10px 0;
    border-bottom: solid 1px #1abc9c;
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
    background-position: -1px 0;
    background-size: 1px 100%;
    background-repeat: no-repeat;
    color: #0e6252;
}

    .material input:focus, .material input:valid {
        box-shadow: none;
        outline: none;
        background-position: 0 0;
        background-size: 100% 100%;
    }

        .material input:focus::-webkit-input-placeholder, .material input:valid::-webkit-input-placeholder {
            color: #1abc9c;
            font-size: 12px;
            padding-left: 10px;
            -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
            visibility: visible !important;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

    .material input::-webkit-input-placeholder {
        font-family:'Roboto', sans-serif;
        font-weight:100;
        padding-left: 0px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .material input + label {
        font-family:'Roboto', sans-serif;
        display: none;
    }

    .material input:valid + label {
        font-weight:100;
        display: block;
        position: absolute;
        color: #1abc9c;
        font-size: 12px;
        top: 0px;
        padding-left: 10px;
    }

    .material .header-2{
        font-size:20px;
    }