#search {
  background: $white;
  position: fixed;
  z-index: 905;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translateY(-100%);
  transition: transform 1s $easeInOutQuart;
  .content__frame {
    position: relative;
    overflow: visible;
  }
  .content__frame, .content__container, .content__main {
    height: 100%;
  }
  .search_open & {
    transform: none;
  }
  .search_results & {
    position: relative;
    overflow: visible;
  }
}

.search__close {
  top: em(50px);
}

.search__content {
  padding: em(200px) 0;
  width: 100%;
  height: 100%;
}

.search__content__main {
  width: 100%;
  height: 100%;
  position: relative;
}

.search__form {
  width: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: top 1s $easeInOutQuart, transform 1s $easeInOutQuart;
  will-change: top;
  .search_results & {
    top: 0;
    transform: none;
  }
  input[type="text"] {
    display: block;
    width: 100%;
    height: em(90px);
    font-weight: 300;
    font-size: em(35px);
    text-indent: em(25px);
    padding: 0 em(100px) em(4px) 0;
  }
  button {
    position: absolute;
    top: 0;
    right: 0;
    width: em(90px);
    height: em(90px);
    font-size: 0;
    border: none;
    background: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: block;
    will-change: transform;
    transform: none;
    padding: 0;
    svg {
      fill: $green;
      display: inline-block;
      height: em(60px);
      width: em(60px);
      .circle {
        transform: none;
        transform-origin: 50% 50%;
        transition: transform 0.3s $easeOutQuart;
      }
    }
    &:hover, &:focus {
      outline: none;
      svg {
        .circle {
          transform: scale(1.15);
        }
      }
    }
  }
  @media screen and (max-width: $large_breakpoint) {
    input[type="text"] {
      height: em(60px);
      font-size: em(23px);
      text-indent: em(17px);
      padding: 0 em(66px) em(2px) 0;
    }
    button {
      width: em(60px);
      height: em(60px);
      svg {
        height: em(40px);
        width: em(40px);
      }
    }
  }
}

.search__results__amount {
  margin: em(35px) 0 em(25px);
}

.search__results {
  width: 100%;
  transform: translateY(50vh);
  transition: transform 1s $easeInOutQuart, opacity 1s $easeInOutQuart;
  opacity: 0;
  padding-bottom: em(100px);
  position: relative;
  .search_results & {
    opacity: 1;
    transform: none;
  }
}