/* ADAPTIVE PLACEHOLDER */


        .adaptive:focus + label[placeholder]:before {
            color: #00bafa;
        }

        .adaptive:focus + label[placeholder]:before,
        .adaptive:valid + label[placeholder]:before {
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            -webkit-transform: translate(0, -1.25em) scale(0.9, 0.9);
            transform: translate(0, -1.25em) scale(0.9, 0.9);
            border-radius: 3px;
        }

    .adaptive:invalid + label[placeholder][alt]:before {
        content: attr(alt);
    }
    

    .adaptive + label[placeholder] {
        display: block;
        pointer-events: none;
        line-height: 1.25em; /* .6 lookhere */
        margin-top: calc(-3em - 2px);
        margin-bottom: calc((3em - 1em) + 2px);
    }
        .adaptive + label[placeholder]:before {
            content: attr(placeholder);
            display: inline-block;
            margin: 0 calc(1em + 2px);
            padding: 0 2px;
            color: #898989;
            white-space: nowrap;
            -webkit-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            background-image: -webkit-linear-gradient(top, #fff, #fff);
            background-image: linear-gradient(to bottom, #fff, #fff);
            background-size: 100% 5px;
            background-repeat: no-repeat;
            background-position: center;
            border: solid 1px rgba(255,255,255,.95);
            background-color: rgba(255,255,255,.85);
            border-top: solid 1px rgba(0,0,0,0);
        }

    .mild-whisper {
        color: #666;
    }

    @media only screen and (max-width: 320px) {
        h1 {
            font-size: 2em;
        }
    }

    .adaptive:focus {
        border-color: #00bafa !important;
    }