.sw19p-resources {
  font-family: "Roboto", sans-serif;

  .sw19b-search {
    background: #666;
    padding: 20px 0;

    form {
      border: 2px solid #ccc;
      max-width: 712px;
      margin: 0 auto;
    }

    input[type="text"] {
      color: #111111;
      font-weight: 500;
      width: calc(100% - 40px);
    }

    input[type="text"]::placeholder {
      color: #999;
    }

    input[type="text"],
    button[type="submit"] {
      padding: 10px 10px 10px 15px;
      background: #fff;
      letter-spacing: 0.23px;
      border: none;
    }

    button[type="submit"] {
      width: 40px;
    }

    button[type="submit"] svg {
      fill: #a1a1a1;
      height: 12px;
    }

    @media (max-width: 768px) {
      padding-top: 10px;
      padding-bottom: 10px;

      form {
        max-width: none;
      }
    }
  }

  .sw19b-mobile-filter-top {
    padding: 10px 0 11px 0;
    box-shadow: 0 2px 10px 0 rgba(17, 17, 17, 0.3);
    position: relative;
    display: none;

    &.selected {
      box-shadow: none;
      border-bottom: 1px solid #a1a1a1;
    }

    .sw19s-std-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    p {
      margin: 0;
      font-weight: 500;
      color: #a1a1a1;
    }

    svg {
      stroke: #a1a1a1;
      width: 9px;
      height: 11px;
    }

    &.selected svg {
      transform: rotate(90deg);
    }

    @media (max-width: 768px) {
      display: block;
    }
  }

  .sw19b-mobile-filter-box {
    padding-bottom: 21px;
    border-bottom: 5px solid #FF6200;
    box-shadow: 0 2px 10px 0 rgba(17, 17, 17, 0.3);
    display: none;

    .controls {
      padding-top: 11px;
      padding-bottom: 10px;
      background: #fafafa;
    }

    .controls .sw19s-std-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .controls .sw19s-btn {
      font-size: 12px;
      line-height: normal;
      padding-left: 24px;
      padding-right: 24px;
    }

    .controls .clear-filters {
      background: none;
      border: none;
      font-weight: 500;
      color: #FF6200;
    }

    .filter-name {
      font-size: 16px;
      font-weight: 500;
      padding: 0;
      border: none;
      background: none;
      margin-top: 20px;
      font-family: inherit;
      color: #111111;
    }

    .filter-name:before {
      content: "+";
      min-width: 13px;
      display: inline-block;
    }

    .selected > .filter-name:before {
      content: "\2014";
    }

    .checkbox {
      margin: 15px 0;
      display: none;
      font-size: 14px;
    }

    .selected > .checkbox {
      display: block;
    }

    @media (max-width: 768px) {
      &.selected {
        display: block;
      }
    }
  }

  .sw19b-filters-cards {
    background: linear-gradient(90deg, #eee 50%, #fff 50%);

    .sw19s-std-wrap {
      display: flex;
      align-items: flex-start;
    }

    .filter-cards-wrap {
      display: flex;
    }

    .filter {
      flex-basis: 360px;
      padding: 20px 30px 20px 0;
      position: sticky;
      top: 0;
    }

    .filter .title {
      font-weight: 500;
      color: #a1a1a1;
      margin: 0 0 20px 0;
    }

    .filter-box {
      border-bottom: 2px solid #ccc;
      padding-bottom: 11px;
      margin-top: 9px;
    }

    .filter-name {
      font-size: 16px;
      font-weight: 500;
      padding: 0;
      border: none;
      text-align: left;
      font-family: inherit;
      color: #111111;
    }

    .filter-name:before {
      content: "+";
      min-width: 13px;
      display: inline-block;
    }

    .filter-box.selected .filter-name:before {
      content: "\2014";
    }

    .filter p.checkbox {
      color: #111111;
      margin: 15px 0;
      display: none;
      font-size: 14px;
    }

    .filter-box.selected p.checkbox {
      display: block;
    }

    .cards-and-paging {
      flex-basis: 780px;
      padding: 20px 0 30px 30px;
      background: #fff;
    }

    .top {
      border-bottom: 2px solid #ddd;
      padding-bottom: 10px;
    }

    .top div {
      display: inline-block;
      padding: 8px 15px;
      border-radius: 15px;
      background-color: #eee;
      font-size: 12px;
      margin: 0 10px 10px 0;
    }

    .top div a {
      text-decoration: none;
      color: #111111;
    }

    .numresults {
      font-weight: 500;
      color: #a1a1a1;
    }

    .num-and-clear {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .num-and-clear .clear {
      font-weight: 500;
    }

    .cards {
      margin-top: 20px;
      padding-bottom: 30px;
      display: grid;
      grid-gap: 30px;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      grid-auto-rows: 20px;
      border-bottom: 1px solid #eaeaea;
    }

    .sw-card {
      border-top: 5px solid #00C8DC;
      box-shadow: 0 2px 12px 0 #ccc;
    }

    .sw-card.infographics {
      border-top-color: #FF6200;
    }

    .sw-card.whitepapers {
      border-top-color: #FBDC44;
    }

    .sw-card.case-studies {
      border-top-color: #AADC33;
    }

    .sw-card .title {
      padding: 10px 20px;
      background: #eee;
      font-weight: 500;
      color: #a1a1a1;
      margin: 0;
    }

    .sw-card .img-wrap {
      text-align: center;
      height: 206px;
    }

    .sw-card img {
      max-height: 100%;
      object-fit: contain;
    }

    .body {
      padding: 20px 20px 30px 20px;
    }

    .title2 {
      font-size: 18px;
      font-weight: 500;
      line-height: normal;
      color: #111111;
      margin: 0;
    }

    .excerpt {
      font-size: 16px;
      line-height: normal;
      color: #111111;
    }

    .body > a {
      text-decoration: none;
    }

    .body > a:hover {
      text-decoration: underline;
    }

    .learnmore {
      margin: 20px 0 0;
      font-family: Roboto;
      font-size: 14px;
      font-weight: 500;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      color: #FF6200;
    }

    .paging {
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
    }

    .paging a {
      color: #02c0cf;
      font-size: 18px;
    }

    @media (max-width: 768px) {
      background: none;

      .filter {
        display: none;
      }

      .numresults {
        margin-top: 8px;
        font-size: 12px;
        font-weight: normal;
      }

      .cards-and-paging {
        padding-left: 0;
        background: none;
      }

      .cards {
        display: block;
        margin-top: 8px;
      }

      .sw-card {
        margin-bottom: 15px;
      }
    }
  }
}