.search-block__wrapper {
  overflow: auto;
}
.search-block {
  @include clearfix;
  display: none;
  text-align: center;
  background: $colour-white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 98;
  &.show {
    display: block;
  }
  //IE fix
  .no-object-fit & {
    position: relative;
  }
  .path-search & {
    display: block;
    position: relative;
  }
  label {
    @include visuallyhidden;
  }
  input[type=submit] {
    border: none;
    width: 100%;
    max-width: 100%;
    height: 40px;
    padding: 0;
    text-indent: -9999px;
    background-color: $colour-gainsboro-grey;
    mask: url($image-path + "magnify.svg") no-repeat right center;
    mask-size: 30px;
    -webkit-mask: url($image-path + "magnify.svg") no-repeat right center;
    -webkit-mask-size: 30px;
    -webkit-appearance: none;
    @include breakpoint($screen-md) {
      height: 100px;
      mask-size: 70px;
      -webkit-mask-size: 70px;
    }
    .no-cssmask & {
      background: transparent url($image-path + "search_page_icon.png") center right no-repeat;
      background-size: 35px;
      @include breakpoint($screen-md) {
        background-size: 55px;
      }
      &:focus,
      &:hover {
        background-image: url($image-path + "search_page_icon_hover.png");
        background-color: transparent;
      }
    }
    &:focus,
    &:hover {
      background-color: $colour-black;
    }
  }
  input[type=text] {
    width: 100%;
    max-width: 100%;
    height: 40px;
    border: none;
    font-size: 24px;
    font-family: $body-font;
    @include breakpoint($screen-md) {
      height: 100px;
      font-size: 70px;
    }
    &::-ms-clear {
      display: none;
    }
  }
  .form-item {
    @include span(10);
    margin-bottom: 0;
  }
  .form-actions {
    @include span(2);
  }

   a.close-button {
    height: 30px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;

    .icon {
      fill: $colour-black;
      height: 30px;
      position: relative;
      width: 30px;
      cursor: pointer;
    }

    &:hover, 
    &:focus {
      .icon {
        fill: $colour-jasper-grey;
      }
    }
  }

  .icon {
    .path-search & {
      display: none;
    }
  }
}

.search-block__form {
  margin: 20px auto;
  max-width: 1200px;
  padding: 0 calc((4 * 1.25%));
  @include breakpoint($screen-md) {
    padding: 0 calc((2 * 1.25%));
  }
  @include breakpoint($screen-lg) {
    width: span(8);
    padding: 0 calc((0.5 * 1.25%));
  }
  form {
    margin: 39px auto 40px;
    width: 100%;
    border-bottom: $colour-red 4px solid;
    @include clearfix;
  }
}
nav.menu--main {
  .main-menu__icons-magnify {
    background-color: transparent;
    border: none;
    height: 50px;
    margin: 0;
    padding: 0;
    width: 85px;
    height: 78px;
    outline: 0;
    @include breakpoint($desktop-nav-breakpoint) {
      height: 100%;
    }
    .path-search &,
    &:focus,
    &:hover,
    &.active {
      .icon {
        fill: $colour-black;
      }
    }
    .icon {
      fill: $colour-jasper-grey;
      width: 46px;
      height: 46px;
    }
    .path-search & {
      background-color: #f9f9f9;
    }
  }
}
.search-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(3, 14, 26, 0.7);
  z-index: 90;
  display: none;
  &.show {
    display: block;
  }
  .path-search & {
    display: none;
  }
}