@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
html,
body{

}

.type-ahead {
    height: 100vh;
    width: 100vw;
    margin:0;padding:0;
    max-width: 1980px;
    position: relative;
    -webkit-perspective: 500px;
    perspective: 500px;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background: #007991;
}
.type-ahead__input {
    padding: 12px 34px 12px 12px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: .4px;
    caret-color: #007991;
    color: #007991;
    outline: none;
    width: calc(100% - 60%);
    box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.1);
}
.type-ahead__input::-webkit-input-placeholder {
    opacity: .5;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
    color: #6E6E6E;
}
.type-ahead__input::-moz-placeholder {
    opacity: .5;
    -moz-transition: opacity .2s linear;
    transition: opacity .2s linear;
    color: #6E6E6E;
}
.type-ahead__input:-ms-input-placeholder {
    opacity: .5;
    -ms-transition: opacity .2s linear;
    transition: opacity .2s linear;
    color: #6E6E6E;
}
.type-ahead__input::-ms-input-placeholder {
    opacity: .5;
    -ms-transition: opacity .2s linear;
    transition: opacity .2s linear;
    color: #6E6E6E;
}
.type-ahead__input::placeholder {
    opacity: .5;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
    color: #6E6E6E;
}
.type-ahead__input:focus::-webkit-input-placeholder {
    opacity: .7;
}
.type-ahead__input:focus::-moz-placeholder {
    opacity: .7;
}
.type-ahead__input:focus:-ms-input-placeholder {
    opacity: .7;
}
.type-ahead__input:focus::-ms-input-placeholder {
    opacity: .7;
}
.type-ahead__input:focus::placeholder {
    opacity: .7;
}
.type-ahead .icon {
    position: absolute;
    right: 8px;
    top: 8px;
    fill: #6E6E6E;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    fill: #007991;
}