.candidate-party-icon {
  border: 1px solid white;
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.candidate-image {
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  float: left;
  height: 50px;
  margin-right: 5px;
  min-width: 50px;
  overflow: hidden;
  position: relative;
  width: 50px;
  vertical-align: middle;
  @media (max-width: 800px) {
    height: 35px;
    min-width: 35px;
    width: 35px;
  }
  & > * {
    background-position: 50% 30%;
    background-size: cover;
    bottom: 0;
    display: block;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
  }
}

#Profile {
  & .cp-subnav {
    z-index: 20;

    /* Desktop SubNav styles */
    @media (min-width: 768px) {
      & .cp-subnav-item {
        position: relative;
        width: 130px;
        & .cp-subnav-link {
          font-family: "Palanquin", sans-serif;
          font-size: 11px;
          font-weight: 400;
          margin: 0 0.75rem;
          padding-left: 0.75rem;
          position: static;
          opacity: 1;
          text-transform: uppercase;
          transition: margin 0.1s, padding 0.1s;
          text-align: center;
          text-shadow: 0 2px 6px black;
          & .bp3-icon {
            font-size: 16px;
            position: absolute;
            left: 0.75rem;
            top: 0.75rem;
            transition: transform 0.2s;
            transform: translateX(44px)translateY(-35px)scale(1.75);
            will-change: transform;
          }
        }
        &.is-active {
          font-weight: 700;
        }
      }
      &.is-fixed {
        background-color: var(--dark);
        & .cp-subnav-list:not(:only-child) {
          & .cp-subnav-link {
            & .bp3-icon {
              transform: translateY(-12px)scale(0.9);
            }
          }
        }
        & .cp-subnav-item {
          width: auto;
          & .cp-subnav-link {
            margin: 0;
            padding-left: calc(0.75rem + 20px);
            & .bp3-icon {
              transform: none;
            }
          }
        }
      }
    }

    /* Mobile SubNav styles */
    @media (max-width: 768px) {
      &.is-static {
        background-color: transparent;
        margin-top: -2rem;
        padding-top: 0;
        & .cp-subnav-item {
          text-align: left;
          width: auto;
          & .cp-subnav-link {
            margin: 0;
            padding-left: 0;
            & .bp3-icon {
              position: static;
              transform: none;
            }
          }
        }
      }
      &.is-fixed {
        background-color: transparent;
        margin-top: -2rem;
        padding-top: 0;
      }
    }

    /* Text modifications to the secondary SubGrouping options */
    & .cp-subnav-secondary .is-active .cp-subnav-link {
      color: var(--red);
      text-shadow: none;
    }
  }
  & .toc {
    display: flex;
    padding: 0 50px 50px;
    width: 100%;
    & .toc-category {
      flex: 1;
      margin: 0 10px;
      & .toc-title {
        color: white;
        font-family: "Palanquin", sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.05em;
        line-height: 1;
        text-transform: uppercase;
        & img {
          display: inline-block;
          height: 20px;
          margin-right: 5px;
          margin-top: -1px;
          width: 20px;
          vertical-align: top;
        }
        &:hover {
          text-decoration: none;
        }
      }
      & .toc-list {
        & a {
          color: white;
          cursor: pointer;
          display: block;
          font-family: "Palanquin", sans-serif;
          font-size: 13px;
          font-weight: 600;
          line-height: 1.6;
          letter-spacing: 0.1em;
          opacity: 0.7;
          text-transform: uppercase;
          transition: opacity 0.25s;
          white-space: normal;
          &:after {
            content: ">";
            bottom: -7px;
            font-size: 20px;
            font-weight: 400;
            margin-left: 4px;
            text-decoration: none;
          }
          &:hover {
            opacity: 1;
            text-decoration: none;
          }
        }
      }
    }
  }
  & .category {
    flex: 1 1 100%;
    font-family: "Palanquin", sans-serif;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
    padding: 25px 5px 15px 25px;
    position: relative;
    text-transform: uppercase;
    text-align: left;
    & a {
      color: var(--darkgray);
      &:hover {
        text-decoration: none;
      }
    }
  }
  & .sidenav {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    opacity: 0;
    position: fixed;
    right: -50px;
    top: 0;
    transition: right 0.5s, opacity 0.5s;
    width: 50px;
    @media (max-width: 768px) {
      display: none;
    }
    &.visible {
      opacity: 1;
      right: 0;
    }
    & .sidenav-section {
      border-bottom: 1px solid #ccc;
      &:last-child {
        border-bottom: 0;
      }
      & .sidenav-circle {
        background-color: transparent;
        border: 1px solid #999;
        border-radius: 50%;
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        height: 8px;
        margin: 12px 4px;
        opacity: 0.7;
        overflow: hidden;
        transition: background-color 0.25s, border-color 0.25s, opacity 0.25s, width 0.25s, height 0.25s, margin 0.25s;
        width: 8px;
        &:hover, &.active {
          height: 12px;
          opacity: 1;
          margin: 10px 2px;
          width: 12px;
        }
        &.active {
          background-color: var(--red);
          border-color: var(--red)
        }
      }
    }
  }
  & .keep-exploring {
    & h2 {
      color: rgba(255, 255, 255, 0.9);
      font-family: "Pathway Gothic One", sans-serif;
      font-size: 38px;
      font-weight: 400;
      letter-spacing: 0.1em;
      margin: 30px 0 15px;
      text-align: center;
      text-transform: uppercase;
    }
    & .tiles {
      display: flex;
      flex-wrap: wrap;
      padding: 0 35px;
      width: 100%;
      & .usa-tile {
        flex: 1;
        margin: 15px;
        min-width: 300px;
      }

      &.geo .usa-tile { border-color: var(--geo); }
      &.naics .usa-tile { border-color: var(--naics); }
      &.soc .usa-tile { border-color: var(--soc); }
      &.cip .usa-tile { border-color: var(--cip); }
      &.university .usa-tile { border-color: var(--university); }
      &.napcs .usa-tile { border-color: var(--napcs); }

    }
  }
}

.sidenav-label {
  color: var(--red);
  font-family: "Palanquin", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cp-hero-pdf { display: none }
