.form__container {
    max-width: 700px;
    margin: 0 auto;
}
@media screen and (min-device-width: 375px) and (max-device-width: 812px) {
    .form__container {
        max-width: 90%;
    }
}
.form__container form {
    position: relative;
    max-width: 100%;
    height: 400px;
    margin: 60px auto 0;
}
.form__container textarea {
    resize: none;
}

.form__group {
    position: relative;
    margin-bottom: 35px;
}
.form__group--inline {
    display: inline-block;
    position: relative;
    margin-bottom: 35px;
    margin-left: 5%;
    width: 47%;
}
@media screen and (min-device-width: 375px) and (max-device-width: 812px) {
    .form__group--inline {
        margin-left: 0;
    }
    .form__group {
        width: 100%;
    }
}
.form__group--inline:first-child {
    margin-left: 0;
}

.form__input {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    padding: 10px 0;
    display: block;
    border: none;
    color: var(--white);
    border-bottom: 1px solid var(--mediumgrey);
    background: none;
    width: 100%;
}
@media screen and (min-device-width: 375px) and (max-device-width: 812px) {
    .form__input {
        width: 100%;
    }
}

.form__group--full-width .form__input {
    width: 100%;
}

.form__input:focus {
    outline: none;
}

/* ---------------------------- FLOATING LABELS ---------------------------- */

label {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    color: var(--mediumgrey);
    font-size: 0.8rem;
    font-weight: 300;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

/* active state */
.form__input:focus ~ label, .form__input:valid ~ label 		{
    top: -20px;
    font-size: 0.8rem;
    color: var(--white);
}

/* ---------------------------- UNDERLINE ---------------------------- */
.bar {
    position: relative;
    display: block;
    width: 100%;
}
.bar:before, .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: var(--white);
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
.bar:before {
    left: 50%;
}
.bar:after {
    right: 50%;
}

/* active state */
.form__input:focus ~ .bar:before, .form__input:focus ~ .bar:after {
    width:50%;
}

/* active state */
.form__input:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

/* ---------------------------- ANIMATIONS ---------------------------- */
@-webkit-keyframes inputHighlighter {
    from { background: var(--gold); }
    to 	{ width: 0; background: transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background: var(--gold); }
    to 	{ width: 0; background: transparent; }
}
@keyframes inputHighlighter {
    from { background: var(--gold); }
    to 	{ width: 0; background: transparent; }
}

/* Honeypot spam filter technique, hide the fake input field */
.form__group--hidden {
    display: none;
}