.inp {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 100%;
}

    .inp .label {
        position: absolute;
        top: 16px;
        left: 0;
        font-size: 16px;
        color: #9098a9;
        font-weight: 500;
        transform-origin: 0 0;
        transition: all 0.2s ease;
    }

    .inp .border {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: #07f;
        transform: scaleX(0);
        transform-origin: 0 0;
        transition: all 0.15s ease;
    }

    .inp input {
        -webkit-appearance: none;
        width: 100%;
        border: 0;
        font-family: inherit;
        padding: 12px 0;
        height: 48px;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 2px solid #c8ccd4;
        background: none;
        border-radius: 0;
        color: #ffffff;
        transition: all 0.15s ease;
    }

        .inp input:hover {
            background: rgba(34,50,84,0.03);
        }

        .inp input:not(:placeholder-shown) + span {
            color: white;
            transform: translateY(-26px) scale(0.75);
        }

        .inp input:focus {
            background: none;
            outline: none;
        }

            .inp input:focus + span {
                color: #c8ccd4;
                transform: translateY(-26px) scale(0.75);
            }

                .inp input:focus + span + .border {
                    transform: scaleX(1);
                }

    .inp textarea {
        -webkit-appearance: none;
        width: 100%;
        border: 0;
        font-family: inherit;
        padding: 12px 0;
        height: 176px;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 2px solid #c8ccd4;
        background: none;
        border-radius: 0;
        color: #ffffff;
        transition: all 0.15s ease;
    }

        .inp textarea:hover {
            background: rgba(34,50,84,0.03);
        }

        .inp textarea:not(:placeholder-shown) + span {
            color: #c8ccd4;
            transform: translateY(-26px) scale(0.75);
        }

        .inp textarea:focus {
            background: none;
            outline: none;
        }

            .inp textarea:focus + span {
                color: #c8ccd4;
                transform: translateY(-26px) scale(0.75);
            }

                .inp textarea:focus + span + .border {
                    transform: scaleX(1);
                }

    .inp select {
        -webkit-appearance: none;
        width: 100%;
        border: 0;
        font-family: inherit;
        padding: 12px 0;
        height: 48px;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 2px solid #c8ccd4;
        background: none;
        border-radius: 0;
        color: grey;
        transition: all 0.15s ease;
    }

        .inp select:hover {
            background: rgba(34,50,84,0.03);
        }

        .inp select:not(:placeholder-shown) + span {
            color: #c8ccd4;
            transform: translateY(-26px) scale(0.75);
        }

        .inp select:focus {
            background: none;
            outline: none;
        }

            .inp select:focus + span {
                color: grey;
                transform: translateY(-26px) scale(0.75);
            }

                .inp select:focus + span + .border {
                    transform: scaleX(1);
                }