#artists-grid {
  padding: auto;
}
#artists-grid #search {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  overflow: visible;
  background-color: var(--primary);
}
#artists-grid #search .content-width #title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--m) var(--s);
  padding: var(--l) 0px;
}
@media (max-width: 768px) {
  #artists-grid #search .content-width #title .subheading.sm {
    font-size: var(--fs26);
  }
}
@media (max-width: 450px) {
  #artists-grid #search .content-width #title {
    flex-direction: column;
  }
}
#artists-grid #search .content-width #title .subheading {
  margin-right: auto;
}
#artists-grid #search .content-width #title #toggle-search {
  text-transform: capitalize;
  margin-left: auto;
  transition: all 0.3s ease-out;
}
#artists-grid #search .content-width #title #toggle-search span {
  font-family: inherit;
  color: inherit;
}
#artists-grid #search .content-width #title #toggle-search i {
  text-transform: lowercase;
}
#artists-grid #search .content-width #title #toggle-search::before, #artists-grid #search .content-width #title #toggle-search::after {
  transition: all 0.3s ease-out;
}
#artists-grid #search .content-width #title #toggle-search.active {
  --color: var(--accent);
}
#artists-grid #search .content-width #title #toggle-search.active i {
  transform: rotate(135deg);
}
#artists-grid #search .content-width #search-container {
  height: auto;
  background-color: var(--primary);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s);
  padding-bottom: var(--l);
}
#artists-grid #search .content-width #search-container .button-container {
  margin-top: 0px;
  padding-bottom: var(--s);
}
#artists-grid #search .content-width #search-container .button-container #category {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--xs);
  flex-wrap: wrap;
}
#artists-grid #search .content-width #search-container .button-container #category .button2 {
  min-width: 11em;
}
#artists-grid #search .content-width #search-container .button-container #category .button2[value=all] {
  min-width: unset;
}
#artists-grid #search .content-width #search-container .button-container #category .button2::after {
  content: none;
}
#artists-grid #search .content-width #search-container .button-container #category .button2:hover {
  background-color: var(--secondary);
  color: var(--accent);
}
#artists-grid #search .content-width #search-container .button-container #category .button2.active {
  color: var(--accent);
  background-color: var(--secondary);
}
@media (max-width: 768px) {
  #artists-grid #search .content-width #search-container .button-container #category .button2 {
    min-width: unset;
  }
}
#artists-grid #search .content-width #search-container .select-container {
  position: relative;
  height: auto;
  font-size: var(--fs18);
  border: solid 1px var(--secondary);
}
#artists-grid #search .content-width #search-container .select-container:has(> select:focus), #artists-grid #search .content-width #search-container .select-container:focus-within {
  border-color: var(--accent);
}
#artists-grid #search .content-width #search-container .select-container select {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 2.5em;
  background-color: transparent;
  border: none;
  font-size: 1em;
  line-height: 1em;
  padding: 0.55em 1em;
  color: var(--secondary-alt);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
#artists-grid #search .content-width #search-container .select-container .caret {
  content: "";
  position: absolute;
  z-index: 2;
  display: block;
  top: 50%;
  right: 1em;
  translate: 0% calc(-50% - 0.125em);
  font-size: 1em;
  border: solid 1px var(--secondary);
  border-top-color: transparent;
  border-left-color: transparent;
  width: 0.5em;
  height: 0.5em;
  transform: rotate(45deg);
  pointer-events: none;
}
#artists-grid #search .content-width #search-container .voice-type {
  flex-grow: 1;
}
#artists-grid #search .content-width #search-container .operas,
#artists-grid #search .content-width #search-container .roles {
  width: 100%;
  max-width: 10em;
}
#artists-grid #search .content-width #search-container .operas::before,
#artists-grid #search .content-width #search-container .roles::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0px;
  right: 0px;
  width: 3em;
  height: 100%;
  background-image: linear-gradient(to right, transparent 0%, var(--primary) 25%);
  pointer-events: none;
}
#artists-grid #search .content-width #search-container .operas #opera,
#artists-grid #search .content-width #search-container .operas #role,
#artists-grid #search .content-width #search-container .roles #opera,
#artists-grid #search .content-width #search-container .roles #role {
  position: relative;
  z-index: 1;
  text-transform: capitalize;
}
#artists-grid #search .content-width #search-container .operas #opera option,
#artists-grid #search .content-width #search-container .operas #role option,
#artists-grid #search .content-width #search-container .roles #opera option,
#artists-grid #search .content-width #search-container .roles #role option {
  text-transform: capitalize;
}
#artists-grid #search .content-width #search-container .button {
  max-width: max-content;
  max-height: max-content;
}
#artists-grid #search .content-width #search-container .operas,
#artists-grid #search .content-width #search-container .roles,
#artists-grid #search .content-width #search-container .button {
  display: none;
}
#artists-grid .content-width #artists-results {
  position: relative;
  z-index: 1;
  padding-bottom: var(--xl);
}
#artists-grid .content-width #artists-results.no-results-en::before {
  content: "No Results Found.";
}
#artists-grid .content-width #artists-results.no-results-de::before {
  content: "Keine Ergebnisse gefunden.";
}
#artists-grid .content-width #artists-results.no-results-en::before, #artists-grid .content-width #artists-results.no-results-de::before {
  width: 100%;
  height: auto;
  font-size: var(--fs18);
  color: var(--secondary);
  font-family: var(--mono);
  padding-top: 1em;
}
#artists-grid .content-width #artists-results.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: var(--m);
  height: var(--m);
  border: solid 3px var(--secondary);
  border-top-color: transparent;
  border-radius: 100%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
#artists-grid .content-width #artists-results .artist-card .info .category {
  /*text-transform: capitalize;*/
}
#artists-grid .content-width .button-container {
  margin-top: var(--l);
  padding-bottom: var(--xl);
}
#artists-grid .content-width .button-container #load-more {
  opacity: 1;
}
#artists-grid .content-width .button-container #load-more.hide {
  opacity: 0;
  pointer-events: none;
}/*# sourceMappingURL=artists.css.map */