search_on_mobile.css

@media  (max-width: 980px) {
  .et_header_style_centered #et_top_search, .et_vertical_nav.et_header_style_centered #main-header #et_top_search, .et_header_style_split #et_top_search, .et_vertical_nav.et_header_style_split #main-header #et_top_search {    
    display: block !important;    
    float: right;    
    z-index: 99999;
  }
  .et_header_style_centered #et_search_icon:before {    
    top: 7px;    
    left: -3px;
  }
  .et_header_style_split #et_search_icon:before {    
    margin-top: 0;    
    left: -3px;
  }
  .et_header_style_centered .et_search_outer, .et_header_style_split .et_search_outer {    
    display: block;
  }
  .et_header_style_centered .container.et_search_form_container, .et_header_style_split .container.et_search_form_container.et_pb_search_visible, .et_header_style_split .container.et_search_form_container.et_pb_search_form_hidden {    
    max-width: 100% !important;
  }
  .et_header_style_centered .container.et_search_form_container.et_pb_search_visible, .et_header_style_split .container.et_search_form_container.et_pb_search_visible {    
    z-index: 999;    
    -webkit-animation: fadeInTop 1s 1 cubic-bezier(.77,0,.175,1);    
    -moz-animation: fadeInTop 1s 1 cubic-bezier(.77,0,.175,1);    
    -o-animation: fadeInTop 1s 1 cubic-bezier(.77,0,.175,1);    -webkit-animation: fadeInTop 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeInTop 1s 1 cubic-bezier(.77,0,.175,1);
  }
  .et_header_style_centered .et_pb_menu_hidden #et_search_icon:before, .et_header_style_centered .et_pb_menu_hidden .mobile_menu_bar, .et_header_style_centered .et_pb_menu_hidden .select_page, .et_header_style_split .et_pb_menu_hidden #et_search_icon:before, .et_header_style_split .et_pb_menu_hidden .mobile_menu_bar, .et_header_style_split .et_pb_menu_hidden .select_page {    -webkit-opacity: 0;
    opacity: 0;    
    -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);    
    -moz-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);    
    -o-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);    -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
  }
  .et_header_style_centered .et_pb_menu_visible .select_page, .et_header_style_split .et_pb_menu_visible .select_page {    -webkit-opacity: 1;
    opacity: 1;    
    -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);    
    -moz-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);    
    -o-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);    -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
  }

  .et_header_style_centered span.et_close_search_field, .et_header_style_split span.et_close_search_field {    
    right: 5px;
  }

  .et_header_style_centered .et-search-form input, .et_header_style_split .et-search-form input {    
    left: 10px;    
    right: auto;
  }
  .et_header_style_centered .et-search-form input, .et_header_style_centered span.et_close_search_field, .et_vertical_nav.et_header_style_centered .et-search-form input, .et_vertical_nav.et_header_style_centered span.et_close_search_field, .et_header_style_split .et-search-form input, .et_header_style_split span.et_close_search_field {    
    top: unset !important;    
    line-height: 2em;
  }
  .et_header_style_centered span.et_close_search_field, .et_header_style_split span.et_close_search_field {    
    bottom: 20px;
  }
  .et_header_style_centered .et-search-form, .et_header_style_split .et-search-form {    
    width: 100% !important;    
    max-width: 100% !important;    
    bottom: 20px;
  }
  .et_header_style_centered .et_close_search_field:after, .et_header_style_split .et_close_search_field:after {    
    margin-top: -2px;
  }
}