.c-site-search--region {
  width: 100vw;
  color: #1365DF;
  color: var(--color-secondary);
}

.c-site-search--region {
  background-color: #EEEFF5;
  background-color: var(--color-primary-10);
}

.c-site-search--region h2,
.c-site-search--region label {
  color: #101e8e;
  color: var(--color-primary);
  font-size: max(1.00rem, min(calc(0.88rem + 0.33vw), 1.13rem));
  font-size: var(--type-0);
  margin-bottom: 0.25rem;
  margin-bottom: var(--space-2xs);
}

.c-site-search--content:not([hidden] ) {
  display: flex;
  flex-direction: column;
  max-width: calc(500px + (2 * clamp(1.25rem, 0.096rem + 5.769vw, 5rem)));
  max-width: calc(500px + (2 * var(--container-gutter)));
}

/*to do - use a calc function for the top */
/*.c-site-search--button {
  position: absolute;
  z-index: 9;
  top: -55px;
  right: var(--container-gutter);
  @media (--bp-medium){
    top: -85px;
    top: calc(-1 *(5rem + var(--space)));
  }
}*/

.position {
  height: auto;
  height: initial;
  position: absolute;
  /*top: calc(-1*(5rem + var(--space)));*/
  top: calc(-1*(44px + max(1rem, min(calc(1.40rem + 1.41vw), 1.5rem))));
  top: calc(-1*(44px + var(--space)));
  display: flex;
  align-items: center;
  right: clamp(1.25rem, 0.096rem + 5.769vw, 5rem);
  right: var(--container-gutter);
}

@media (min-width: 45em){

.position {
    height: 5rem;
    /* The height of the logo plus the bottom padding on the header */
    top: calc(-1 *(5rem + max(1rem, min(calc(1.40rem + 1.41vw), 1.5rem))));
    top: calc(-1 *(5rem + var(--space)));
}
  }

.c-site-search--region form label  {
  display: block;
}

.c-site-search--region form input[type=text] {
  max-width: 100%;
}

.c-site-search--button[aria-expanded=false] .close-icon{
  display: none;
}
.c-site-search--button[aria-expanded=true] .search-icon{
  display: none;
}

/*A placeholder block to help with the placement of the header items.*/
.c-search--placeholder {
  height: 44px;
  width: 110px ;
  display: none;
}
@media (min-width: 75em){
.c-search--placeholder {
    display: block;
}
  }