:focus {
    outline: none
}

input[type="text"] {
    font: 15px/24px "Lato",Arial,sans-serif;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px
}

.effect-1, .effect-2, .effect-3 {
    border: 0;
    padding: 7px 0;
    border-bottom: 1px solid #ccc;
    width: 100%
}

    .effect-1 ~ .focus-border {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #d2bd7f;
        transition: 0.4s
    }

    .effect-1:focus ~ .focus-border {
        width: 100%;
        transition: 0.4s
    }

.form-control:focus {
    border-color: #d2bd7f;
    box-shadow: none;
    -webkit-box-shadow: none
}

.has-error .form-control:focus {
    box-shadow: none;
    -webkit-box-shadow: none
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
    padding-top: 0;
    height: 70vh
}

    .flex-container > div {
        background-color: transparent;
        color: #fff;
        width: 1200px;
        height: 40px
    }

ul2 {
    margin: 150px auto 0;
    padding: 0;
    list-style: none;
    display: table;
    width: 600px;
    text-align: center
}

li2 {
    display: table-cell;
    position: relative;
    padding: 15px 0
}

a2 {
    color: #fff;
    text-decoration: none;
    letter-spacing: .1em;
    display: inline-block;
    padding: 15px 20px;
    position: relative
}

    a2:after {
        background: none repeat scroll 0 0 transparent;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        position: absolute;
        background: #fff;
        transition: width 0.3s ease 0s,left 0.3s ease 0s;
        width: 0
    }

    a2:hover:after {
        width: 100%;
        left: 0
    }

@@media screen and (max-height:300px) {
    ul2 {
        margin-top: 40px
    }
}

.form-wrapper-outer {
    padding: 40px;
    border-radius: 8px;
    margin: auto;
    width: 460px;
    border: 1px solid #DADCE0;
    margin-top: 7%
}

.field-wrapper {
    position: relative;
    margin-bottom: 15px
}

    .field-wrapper input {
        border: 1px solid #DADCE0;
        padding: 15px;
        border-radius: 4px;
        width: 100%
    }

        .field-wrapper input:focus {
            border: 1px solid #1A73E8
        }

    .field-wrapper .field-placeholder {
        font-size: 16px;
        position: absolute;
        bottom: 17px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #80868b;
        left: 8px;
        padding: 0 8px;
        -webkit-transition: transform 150ms cubic-bezier(.4,0,.2,1),opacity 150ms cubic-bezier(.4,0,.2,1);
        transition: transform 150ms cubic-bezier(.4,0,.2,1),opacity 150ms cubic-bezier(.4,0,.2,1);
        z-index: 1;
        text-align: left;
        width: 100%
    }

        .field-wrapper .field-placeholder span {
            background: #fff;
            padding: 0 8px
        }

    .field-wrapper input:not([disabled]):focus ~ .field-placeholder {
        color: #1A73E8
    }

    .field-wrapper input:not([disabled]):focus ~ .field-placeholder, .field-wrapper.hasValue input:not([disabled]) ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-39px) translateX(-60px);
        transform: scale(.75) translateY(-39px) translateX(-60px)
    }

    .field-wrapper.field-error {
        border: 1px solid red
    }

        .field-wrapper.field-error .field-placeholder span {
            color: red
        }

#message-wrap {
    padding: 15px;
    text-align: center;
    display: none;
    border-radius: 4px
}

    #message-wrap.success-msg {
        color: green;
        background: #e3ffd5
    }

    #message-wrap.error-msg {
        color: red;
        background: #ffd5d5
    }

.rc-anchor-light {
    background: #222222 !important;
    color: wheat !important
}