  /*for the search bar on the index and athletic pages*/
.nav-search input {
  outline: none;
}
.nav-search input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none; /*removes the search and cancels the icon*/
}
.nav-transparent .nav-search input[type=search] /* When the page is scrolled to the top, it uses .nav-transparent, so here we use the white icon */ {
  background: url(/_resources/images/search-icon-white.png) no-repeat 9px center;
}

.nav-slide .nav-search input[type=search] /* When the page is scrolled down, it uses .nav-slide, so here we use the grey icon */ {
  background: url(/_resources/images/search-icon-white.png) no-repeat 9px center;
}

.nav-search input[type="search"] {
  padding: 5px;
  color: transparent;
  cursor: pointer;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-family: inherit;
  font-size: 100%;
  border: none;
  width: 20px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  /* margin-top: 10px;
  margin-right: -12px; */
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
  align-self: flex-end;
}
/* .nav-search input:-moz-placeholder {
  color: rgb(86, 86, 86);
}
.nav-search input::-webkit-input-placeholder {
  color: rgb(86, 86, 86);
} */
.nav-search input[type="search"]:focus {
  width: 130px;
  /* padding-left: 32px; */
  color: white;
  background-color: lightgray;
  cursor: auto;
}
.nav-search input:-moz-placeholder {
  color: transparent;
}
.nav-search input::-webkit-input-placeholder {
  color: transparent;
}
/*for the search bar on the internal pages*/
.nav-search-internal input {
  outline: none;
}
.nav-search-internal input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none; /*removes the search and cancels the icon*/
}
.nav-search-internal input[type="search"] {
  background: url(/_resources/images/search-icon-white.png) no-repeat 9px center;
}
.nav-slide .nav-search-internal input[type=search] /* When the page is scrolled down, it uses .nav-slide, so here we use the grey icon */ {
  background: url(/_resources/images/search-icon-white.png) no-repeat 9px center;
}
.nav-search-internal input[type="search"] {
  padding: 5px;
  color: transparent;
  cursor: pointer;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-family: inherit;
  font-size: 16px;
  border: none;
  width: 20px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  margin-top: 36px;
  margin-right: -24px;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
  align-self: flex-end;
  @media (max-width: 599px) {
    margin-top: 4px;
  }
}
/* .nav-search-internal input:-moz-placeholder {
  color: rgb(86, 86, 86);
}
.nav-search-internal input::-webkit-input-placeholder {
  color: rgb(86, 86, 86);
} */
.nav-search-internal input[type="search"]:focus {
  width: 130px;
  padding-left: 32px;
  color: black;
  background-color: lightgray;
  cursor: auto;
}
.nav-search-internal input:-moz-placeholder {
  color: transparent;
}
.nav-search-internal input::-webkit-input-placeholder {
  color: transparent;
}

@media (max-width: 1259px) and (min-width: 600px) {
  .nav-search-internal input[type="search"] {
    margin-right: -12px;
  }
}
@media (min-width: 1259px) {
  .nav-search-internal input[type="search"] {
    padding: 5px 2px;
  }
}