.transition,  button,  .question label,  .question input[type="text"] {
    -moz-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
    -o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
    -webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
    transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}


     .question {
        position: relative;
        padding: 10px 0;
    }

         .question:first-of-type {
            padding-top: 0;
        }

         .question:last-of-type {
            padding-bottom: 0;
        }

         .question label {
            trans-origin: left center;
            color: #833293;
            font-weight: 100;
            letter-spacing: 0.01em;
            font-size: 14px;
            box-sizing: border-box;
            padding: 10px 15px;
            display: block;
            position: absolute;
            margin-top: -40px;
            z-index: 2;
            pointer-events: none;
        }

         .question input[type="text"] {
            appearance: none;
            background-color: none;
            border: 1px solid #833293;
            line-height: 0;
            font-size: 14px;
            width: 75%;
            display: block;
            box-sizing: border-box;
            padding: 10px 15px;
            border-radius: 60px;
            color: black;
            font-weight: 100;
            letter-spacing: 0.01em;
            position: relative;
            z-index: 1;
        }

             .question input[type="text"]:focus {
                outline: none;
                background: #833293;
                color: white;
                margin-top: 5px;
            }

             .question input[type="text"]:valid {
                margin-top: 5px;
            }

             .question input[type="text"]:focus ~ label {
                -moz-trans: translate(0, -35px);
                -ms-trans: translate(0, -35px);
                -webkit-trans: translate(0, -35px);
                trans: translate(0, -35px);
            }

             .question input[type="text"]:valid ~ label {
                text-trans: uppercase;
                font-style: italic;
                -moz-trans: translate(5px, -35px) scale(0.6);
                -ms-trans: translate(5px, -35px) scale(0.6);
                -webkit-trans: translate(5px, -35px) scale(0.6);
                trans: translate(5px, -35px) scale(0.6);
            }