/**
 * Deps: magnific-popup
 * Load: global
 */
.search-button-container {
  position: relative; }
  .search-button-container .search-form-container {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    transition: .2s ease all; }
  .search-button-container.show-search-form .search-form-container {
    opacity: 1;
    pointer-events: all; }
  .search-button-container.show-search-form .search-form {
    width: 350px; }

@media (max-width: 560px) {
  .search-button-container .search-form-container {
    position: fixed;
    top: 0;
    margin-top: 85px;
    left: 0;
    width: 100%; }
    .search-button-container .search-form-container .search-form {
      margin-left: auto;
      margin-right: auto; }
  body.search-form-visible {
    overflow: hidden; } }

.search-button {
  height: 40px;
  cursor: pointer;
  display: block; }
  .search-button svg {
    background: #0C1C33;
    width: 40px;
    border-radius: 5px;
    position: relative;
    top: 1px;
    height: auto; }
    .search-button svg g g g circle,
    .search-button svg g g g line {
      stroke: #FED102; }

.search-form {
  margin-left: auto;
  width: 300px;
  display: flex;
  transition: .3s ease all;
  position: relative;
  margin-top: 0px; }
  .search-form label {
    display: inline-block;
    vertical-align: bottom;
    flex-grow: 1; }
  .search-form .search-field {
    line-height: 42px;
    height: 44px;
    background: #0C1C33;
    padding-left: 15px;
    padding-right: 55px;
    width: 100%;
    border: none;
    color: #fff;
    border-radius: 0px !important;
    -webkit-appearance: none; }
    .search-form .search-field::-webkit-input-placeholder {
      /* Edge */
      color: #F2F3F5; }
    .search-form .search-field:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #F2F3F5; }
    .search-form .search-field::placeholder {
      color: #F2F3F5; }
    .search-form .search-field:focus {
      outline: none; }
  .search-form .search-submit {
    border: none;
    width: 40px;
    height: 100%;
    position: absolute;
    right: 0;
    background: none;
    color: #fff;
    flex-grow: 0;
    cursor: pointer;
    text-indent: -1000em; }
    .search-form .search-submit i {
      text-indent: 0;
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      margin-top: -9px;
      text-align: center; }
    .search-form .search-submit:focus, .search-form .search-submit:hover {
      outline: 1px dotted white;
      background: rgba(0, 0, 0, 0.1); }
    .search-form .search-submit:active {
      transform: scale(1.03); }