.search-form-wrapper { float: right; margin-top: 7px; } .bm-search-trigger span { position: absolute; height: 100%; width: 100%; top: 0; left: 0; } .bm-search-trigger, .bm-nav-trigger{ position: relative; display: block; width: 44px; height: 44px; overflow: hidden; white-space: nowrap; color: transparent; z-index: 3; } .bm-searrch-header { -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .bm-searrch-header { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .bm-search-trigger.search-is-visible::before, .bm-search-trigger.search-is-visible::after { -moz-opacity: 0; opacity: 0; } .bm-search-trigger::before { top: 11px; left: 11px; width: 15px; height: 15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #333; } .bm-search-trigger::before, .bm-search-trigger::after { content: ''; position: absolute; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bm-search-trigger.search-is-visible span::before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .bm-search-trigger.search-is-visible span::before, .bm-search-trigger.search-is-visible span::after { -moz-opacity: 1; opacity: 1; } .bm-search-trigger span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .bm-search-trigger span::before, .bm-search-trigger span::after { content: ''; position: absolute; display: inline-block; height: 2px; width: 18px; top: 50%; margin-top: -2px; left: 50%; margin-left: -11px; background: #333; opacity: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transform: rotate(45deg); } .bm-search { position: absolute; width: 100%; top: 100%; left: 0; z-index: 3; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .bm-search input { border-radius: 0; border: none; background: #ffac3a; width: 100%; padding: 0 5%; -webkit-box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; font-size: 1em; padding: 0.8em 2em; color: #fff; } .search-form-wrapper .is-visible{ visibility: visible; opacity: 1; z-index: 999; } .bm-search-trigger::after { height: 3px; width: 8px; background: #333; bottom: 17px; right: 13px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .is-visible form input::placeholder{ color: #ffffff; }