.searchTop:not(.searchTop--button_only) {
  padding: 0;
  min-width: 200px;
  width: 100%;
  max-width: 21.75rem;
  height: 3.4375rem;
  max-height: 3.4375rem;
  flex-grow: 1;
}
.searchTop:not(.searchTop--button_only) .searchTop__textfield {
  padding: 0 55px 0 15px;
  color: #3D3D3D;
  font-family: "SourceSansPro";
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #DEDEDE;
  transition: border-color 0.3s ease-out;
}
.searchTop:not(.searchTop--button_only) .searchTop__submit {
  min-width: 55px;
  width: 3.2352941176vw;
  max-width: 3.4375rem;
  height: calc(100% - 2px);
  background: #FFFFFF;
  position: absolute;
  right: 1px;
  top: 1px;
  font-size: 1.25rem;
  color: var(--color-primary);
  z-index: 10;
}
.searchTop:not(.searchTop--button_only) .searchTop__submit .svg {
  height: 40%;
}
.searchTop:not(.searchTop--button_only) #search_top__submit_button {
  bottom: 0;
  top: 0;
  height: 100%;
  min-width: 55px;
  width: 3.2352941176vw;
  max-width: 3.4375rem;
  right: 0;
  outline: none !important;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.searchTop:not(.searchTop--button_only) #search_top__submit_button:focus + .searchTop__submit {
  outline: 2px red dashed;
}
@media (min-width: 768px) and (max-width: 850px) {
  .searchTop:not(.searchTop--button_only) {
    min-width: 166px;
    flex-grow: 0;
    width: 166px;
  }
}
@media (min-width: 768px) and (max-width: 850px) and (min-width: 768px) {
  .searchTop:not(.searchTop--button_only) {
    width: calc(63.4146341463vw - 321.0243902439px);
  }
}
@media (min-width: 768px) and (max-width: 850px) and (min-width: 850px) {
  .searchTop:not(.searchTop--button_only) {
    width: 218px;
  }
}
@media (min-width: 1200px) {
  .searchTop:not(.searchTop--button_only) .searchTop__textfield {
    padding: 0 55px 0 20px;
  }
}
@media (min-width: 1400px) {
  .searchTop:not(.searchTop--button_only) {
    max-width: 435px;
  }
}

.searchTop--button_only {
  padding: 0;
  margin-left: 1.875rem;
  height: 3.4375rem;
  max-height: 3.4375rem;
}
.searchTop--button_only:focus .searchTop__textfield, .searchTop--button_only:focus-within .searchTop__textfield {
  opacity: 1;
  transform: translateX(-100%) scaleX(1);
}
.searchTop--button_only .searchTop__textfield {
  padding: 0 15px 0 15px;
  color: #3D3D3D;
  font-family: "SourceSansPro";
  font-size: 100%;
  left: 0;
  transform: translateX(-50%) scaleX(0);
  background: #FFFFFF;
  position: absolute !important;
  min-width: 23.75rem;
  width: 12.5rem;
  border: 1px solid #DEDEDE;
  border-right: none;
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}
.searchTop--button_only .searchTop__textfield--active, .searchTop--button_only .searchTop__textfield:focus, .searchTop--button_only .searchTop__textfield:focus-within {
  opacity: 1;
  transform: translateX(-100%) scaleX(1);
}
.searchTop--button_only .searchTop__submit {
  width: 3.4375rem;
  height: 100%;
  background: var(--color-secondary);
  color: var(--color-secondary--text);
  font-size: 1.25rem;
  position: relative;
  border-radius: 4px;
}
.searchTop--button_only .searchTop__submit .svg {
  height: 40%;
}
.searchTop--button_only #search_top__submit_button {
  bottom: 0;
  top: 0;
  height: 100%;
  width: 3.4375rem;
  right: 0;
  outline: none !important;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.searchTop--button_only #search_top__submit_button:focus + .searchTop__submit {
  outline: 2px red dashed;
}

.searchTop__form {
  padding: 0;
  margin: 0;
  height: 100%;
  position: relative;
}

.searchTop__textfield,
.searchTop__submit {
  height: 100%;
}

.searchTop:hover .searchTop__textfield {
  border-color: var(--color-primary);
}

.searchTop--border .searchTop__submit {
  background: transparent;
  color: #000000 !important;
  border: 1px solid var(--color-primary);
}
.searchTop--border .searchTop__submit:hover, .searchTop--border .searchTop__submit:focus-within, .searchTop--border .searchTop__submit:focus {
  background: var(--color-primary);
  color: var(--color-primary--text) !important;
}
.searchTop--border .searchTop__submit {
  transition: all 0.3s ease-out;
}

body.home .searchTop--border .searchTop__submit {
  background: transparent;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF;
}
body.home .searchTop--border .searchTop__submit:hover, body.home .searchTop--border .searchTop__submit:focus-within, body.home .searchTop--border .searchTop__submit:focus {
  background: #FFFFFF;
  color: #000000 !important;
}
body.home .searchTop--border .searchTop__submit {
  transition: all 0.3s ease-out;
}/*# sourceMappingURL=search-top.css.map */