.filters {
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #9b2743;
  -ms-flex-direction: column;
  flex-direction: column; }
  @media (min-width: 40em) {
    .filters {
      -ms-flex-direction: row;
      flex-direction: row; } }
  .filters .btn {
    padding: 0.8em 2em;
    border: 0;
    height: 47.5px;
    display: block;
    width: 100%; }
    @media (min-width: 40em) {
      .filters .btn {
        border-left: 2px solid #FFF;
        text-align: left; }
        .filters .btn:hover, .filters .btn:focus {
          border: 0;
          border-left: 2px solid #FFF;
          background-color: #FFF;
          color: #9b2743;
          outline: 0; } }
  .filters .form-item {
    border-bottom: 2px solid #FFF; }
    @media (min-width: 40em) {
      .filters .form-item {
        border-bottom: 0;
        border-left: 2px solid #FFF; }
        .filters .form-item:first-child {
          border-left: 0; } }
    @media (min-width: 55em) {
      .filters .form-item:first-child {
        border-left: 2px solid #FFF; } }
  .filters .form-item + .form-item {
    margin-top: 0; }
  .filters .form-item ~ .form-actions {
    margin-top: 0; }
  .filters .form-actions {
    width: 100%; }
    @media (min-width: 40em) {
      .filters .form-actions {
        width: 20%; } }
  @media (min-width: 40em) {
    .upcoming-events--filtered .filters .js-form-type-select {
      width: 25%; } }
  .filters .js-form-type-select {
    position: relative;
    height: 47.5px;
    background-color: #9b2743;
    width: 100%; }
    @media (min-width: 40em) {
      .filters .js-form-type-select {
        width: 40%; } }
    @media (min-width: 55em) {
      .filters .js-form-type-select {
        width: 320px; } }
    .filters .js-form-type-select:hover {
      background-color: #721d31; }
    .filters .js-form-type-select::after {
      content: '';
      position: absolute;
      top: 0;
      width: 0;
      height: 0;
      right: 10px;
      bottom: 0;
      margin: auto;
      border-style: solid;
      border-width: 12px 12px 0;
      border-color: #FFF transparent transparent;
      pointer-events: none; }
    .filters .js-form-type-select::before {
      width: 30px;
      position: absolute;
      top: 1px;
      right: 1px;
      bottom: 1px;
      content: '';
      pointer-events: none; }
    .filters .js-form-type-select:focus-within::after {
      border-color: #9b2743 transparent transparent; }
    .filters .js-form-type-select select {
      font-size: 16px;
      color: #FFF;
      box-shadow: none;
      border-radius: 0;
      background: transparent;
      height: 100%;
      width: 100%;
      cursor: pointer;
      outline: none;
      padding-right: 35px;
      padding-left: 15px;
      border: 1px solid #9b2743;
      -moz-appearance: none;
      -webkit-appearance: none; }
      .filters .js-form-type-select select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000; }
      .filters .js-form-type-select select::-ms-expand {
        display: none; }
      .filters .js-form-type-select select:focus, .filters .js-form-type-select select:focus-visible {
        border: 0;
        border-left: 2px solid #FFF;
        background-color: #FFF;
        color: #9b2743; }
        .filters .js-form-type-select select:focus option, .filters .js-form-type-select select:focus-visible option {
          color: #36424a; }