.search .search__field { transition: width .2s ease .2s; }
.search .search__field:focus { transition: width .2s ease; }

.search .autocomplete-menu { padding: 15px; }
.search .autocomplete-menu a { font-size: 16px; }

.autocomplete-field-wrapper { position: relative; }

.autocomplete-menu { width: 100%; max-height: 240px; padding: 20px; background: #fff; border: 1px solid #dce3e8; border-top: 0; border-radius: 0 0 4px 4px; box-shadow: 0 4px 8px rgba(84, 88, 90, .15); list-style: none; margin: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; position: absolute; left: 0; top: 100%; z-index: 1000; overflow-y: auto; }

.autocomplete-menu a { display: block; padding: 0; margin: 0; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 18px; color: #54585a; transition: color .4s ease; }
.autocomplete-menu > li ~ li { margin-top: 12px; }

.active > .autocomplete-menu { opacity: 1; visibility: visible; }
.active > .autocomplete-field { border-radius: 4px 4px 0 0; border-bottom-color: rgba(79, 117, 139, .2) !important; }

.autocomplete-field::-ms-clear { display: none; }

.search-result h3 .zmdi { font-size: 18px; position: relative; top: -2px; margin-right: 10px; }

@media (min-width: 1025px) {
    .autocomplete-menu { padding: 10px; max-height: 260px; }
    .autocomplete-menu li ~ li { margin-top: 0; }
    .autocomplete-menu li a { padding: 6px 8px !important; border-radius: 4px; font-weight: bold; transition: all .2s;  }
    .autocomplete-menu li a strong { font-weight: normal; }
    .autocomplete-menu li a:hover,
    .autocomplete-menu .focus a { background-color: #f2f2f0 !important; }
    .form--search-large .field { border-top: 0; border-right: 0; border-bottom: 1px solid #fff; border-left: 0; }
}