@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
html,
body {
  height: 100vh;
  width: 100vw;
  margin:0;padding:0;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background: #007991;
  background: -webkit-gradient(linear, left top, left bottom, from(#78ffd6), to(#007991));
  background: linear-gradient(to bottom, #78ffd6, #007991);
}

.type-ahead {
  width: 100%;
  max-width: 250px;
  position: relative;
  -webkit-perspective: 500px;
          perspective: 500px;
}
.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% - 46px);
  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;
}
.type-ahead__suggestions {
  padding: 4px 0;
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 42px;
  margin: 0;
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  -webkit-transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
  transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
}
.type-ahead__suggestions.hidden {
  opacity: 0;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  pointer-events: none;
  -webkit-transition: opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
  transition: opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
  transition: transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09), opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s;
  transition: transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09), opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
}
.type-ahead__suggestions .suggestion {
  color: #6E6E6E;
  list-style: none;
  font-size: 12px;
  margin: 0;
  padding: 8px 12px;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  cursor: pointer;
}
.type-ahead__suggestions .suggestion .match {
  font-weight: bold;
  overflow-wrap: break-word;
}
.type-ahead__suggestions .suggestion:hover {
  color: #007991;
}