/* Career Page Style Starts Here */

.contact-icon {
    margin-top: 25px;
}

.input-style {
    width: 50%;
    float: left;
}

.field {
    display: flex;
    flex-flow: column-reverse;
    margin-bottom: 0.5em;
    width: 43%;
    float: left;
    margin-right: 7%;
    margin-top: 10px;
}

.msg-field {
    width: 90%;
}

.field.selection {
    margin-top: 20px;
}

.field.selection .form-control {
    border: 0px;
    border-bottom: 1px solid #ddd;
}

.careers input[type="file"] {
    padding-top: 15px;
}

.contact label,
.contact input,
.contact textarea {
    transition: all 0.2s;
    touch-action: manipulation;
}

.contact input,
.contact textarea {
    /*font-size: 1.5em;*/
    border: 0;
    border-bottom: 1px solid #ccc;
    font-family: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0;
    cursor: text;
}

.contact input:focus,
.contact textarea:focus {
    outline: 0;
    border-bottom: 1px solid #666;
}

.contact label {
    /*text-transform: uppercase;
  letter-spacing: 0.05em;*/
}

.contact input:placeholder-shown+label,
.contact textarea:placeholder-shown+label {
    cursor: text;
    max-width: 66.66%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    padding-bottom: 5px;
    transform: translate(0, 2.125rem) scale(1.1);
}


/**
* By default, the placeholder should be transparent. Also, it should 
* inherit the transition.
*/

::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    opacity: 0;
}

::-moz-placeholder {
    /* Firefox 19+ */
    opacity: 0;
}

:-ms-input-placeholder {
    /* IE 10+ */
    opacity: 0;
}

:-moz-placeholder {
    /* Firefox 18- */
    opacity: 0;
}


/**
* Show the placeholder when the input is focused.
*/

.contact input:focus::-webkit-input-placeholder,
.contact textarea:focus::-webkit-input-placeholder {
    opacity: 1;
}


/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when 
* there's something in the input at all.
*/

.contact input:not(:placeholder-shown)+label,
.contact input:focus+label,
.contact textarea:not(:placeholder-shown)+label,
.contact textarea:focus+label {
    transform: translate(0, 0) scale(1);
    cursor: pointer;
}

.contact-btn {
    margin-top: 10px;
    float: left;
}

.contact-btn button {
    background-color: #000;
    border: 0;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
}

.contact-btn button:hover {
    background-color: #bd7805;
    transition: 1s ease;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
}

.contact-center .bdr {
    border-left: 1px solid #ddd;
    float: left;
    height: 100%;
    text-align: center;
}

#map {
    height: 500px;
    width: 100%;
}

.selection select {
    padding: 5px;
    border-radius: 0;
    border-color: #ccc;
}
@media only screen and (max-width: 480px) {
    .field {
        width: 100%;
    }
}