﻿.inputbox {
    position: relative;
    width: 100%;
  /* margin-top: 35px;*/
}

    .inputbox input {
        position: relative;
        width: 100%;
        padding: 20px 10px 10px;
        background: transparent;
        border: none;
        outline: none;
        color: #28292d;
        font-size: 1em;
        letter-spacing: 0.05em;
        z-index: 10;
    }

    .inputbox span {
        position: absolute;
        left: 0;
        padding: 20px 115px 10px;
        font-size: 1em;
        color: darkgrey;
        pointer-events: none;
        letter-spacing: 0.05em;
        transition: 0.5s;
    }

    .inputbox input:valid ~ span,
    .inputbox input:focus ~ span {
        color: #45f3ff;
        transform: translateX(-115px) translateY(-34px);
        font-size: 0.75em;
    }

    .inputbox i {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: #45f3ff;
        border-radius: 4px;
        transition: 0.5s;
        pointer-events: none;
        z-index: 9;
    }

    .inputbox input:valid ~ i,
    .inputbox input:focus ~ i {
        height: 44px;
    }
input[type="submit"] {
    border: none;
    outline: none;
    background: #45f3ff;
    padding: 11px 25px;
    width: 100px;
    margin-top: 10px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

input[type="submit"]:active {
        opacity: 0.8;
    }