.membership {
  background: #212121;
  margin: 40px 10px; }
  .membership h1 {
    font-weight: 100; }
    @media screen and (min-width: 400px) {
      .membership h1 {
        font-size: 3rem; } }
  .membership p {
    margin: 20px 0 30px 0; }
  .membership a {
    text-decoration: none;
    color: #999; }
    .membership a:hover {
      color: #eee; }
  .membership .divider {
    padding: 0 10px; }
    @media screen and (max-width: 400px) {
      .membership .divider {
        display: none; } }

#membership-details {
  display: none;
  background: #444;
  margin: 20px auto;
  padding: 15px 20px 0 20px;
  border: solid #666 1px;
  border-radius: 5px; }

.feature-set, .feature-group {
  list-style: none; }

.feature-set {
  margin: 0;
  padding: 0;
  color: #212121;
  text-align: center; }
  .feature-set ul {
    max-width: 1360px;
    margin: 0 auto; }
  .feature-set .row-fullwidth {
    background: #212121;
    color: #fff; }

.feature-group {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* price plans */ }
  .feature-group li {
    padding: 15px;
    margin: 15px auto;
    max-width: 500px; }
    .feature-group li img {
      max-width: 100%; }
    .feature-group li .bg {
      position: relative;
      padding: 20px 45px; }
      .feature-group li .bg > img {
        display: block; }
      @media screen and (min-width: 1024px) {
        .feature-group li .bg {
          padding: 45px; } }
    .feature-group li .ic {
      position: absolute;
      left: 0;
      right: 0;
      top: 40%;
      bottom: 40%;
      z-index: 1; }
      .feature-group li .ic span {
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        bottom: -30px; }
    .feature-group li .ic img {
      max-height: 100%; }
    @media screen and (min-width: 1024px) {
      .feature-group li {
        float: left;
        width: 33%;
        margin: 25px 0;
        padding: 25px;
        max-width: none; } }
    @media screen and (max-width: 1024px) {
      .feature-group li:nth-child(2) {
        margin: 0 auto;
        padding: 0; } }
  .feature-group h2, .feature-group p {
    padding: 0 10px; }
  .feature-group h2 {
    font-size: 1.4rem; }
  .feature-group p {
    font-size: 0.9rem;
    color: #9B919A; }
  .feature-group .plan {
    margin-bottom: 0;
    padding: 0;
    /* Switch display order of plans */ }
    @media screen and (min-width: 1024px) {
      .feature-group .plan {
        float: left;
        width: 25%; } }
    @media screen and (max-width: 1024px) {
      .feature-group .plan:nth-child(2) {
        margin-top: 20px; } }
    .feature-group .plan h3 {
      color: #fff;
      font-size: 1.2rem;
      font-weight: 100;
      text-align: center;
      margin: 0; }
      .feature-group .plan h3 em {
        position: relative;
        font-size: 4rem;
        font-style: normal;
        line-height: 1; }
      .feature-group .plan h3 .subtitle {
        display: block; }
      .feature-group .plan h3 .currency {
        position: absolute;
        bottom: 14px;
        right: -37px;
        font-size: 1rem; }
    .feature-group .plan a {
      display: block;
      background: #212121;
      margin: 40px 30px;
      padding: 30px 0;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s; }
      .feature-group .plan a:hover {
        transform: scale(1.02);
        transition: transform 0.2s; }
        .feature-group .plan a:hover .button {
          background: rgba(150, 150, 150, 0.1); }
    .feature-group .plan p {
      background: #000;
      color: #fff;
      margin: 30px 0 20px 0;
      padding: 7px;
      text-align: center; }
    .feature-group .plan.promote a {
      margin: 0; }
    .feature-group .plan.promote em {
      margin-top: 23px;
      font-size: 5rem; }
    .feature-group .plan.promote .button {
      font-size: 1.4rem;
      margin: 12px 0;
      padding: 12px 20px; }
    @media screen and (min-width: 1024px) {
      .feature-group .plan:nth-child(1) {
        position: relative;
        left: 55%; }
      .feature-group .plan:nth-child(2) {
        position: relative;
        left: -5%; } }

.store-item-banner {
  background: #212121;
  color: #fff;
  text-align: center;
  padding: 40px 0; }
  .store-item-banner h1, .store-item-banner h2 {
    font-weight: 100; }
  .store-item-banner h1 {
    font-size: 2.2rem; }
    .store-item-banner h1 em {
      font-style: normal;
      font-weight: 300; }
  .store-item-banner h2 {
    font-size: 1.1rem;
    margin-bottom: 0; }
  .store-item-banner p {
    color: #999;
    margin: 15px 0 0 0; }

.checkout {
  margin: 15px 0;
  border: solid 1px #ddd;
  border-radius: 4px;
  background: #F7F7F7;
  padding: 10px; }
  @media screen and (min-width: 400px) {
    .checkout {
      margin-top: 40px;
      padding: 10px 40px; } }
  .checkout fieldset {
    margin: 15px 0; }
  .checkout div > fieldset {
    margin-top: 0; }
  .checkout .secure {
    font-family: "Roboto";
    color: #888;
    font-size: 0.7rem; }
    .checkout .secure i {
      float: left;
      font-size: 1.5rem;
      margin: 3px 15px 0 0; }
  .checkout .StripeElement {
    font-size: 1rem;
    padding: 10px;
    outline: none;
    border: solid 1px #ddd;
    border-radius: 4px;
    background: #fff;
    height: 40px; }
    .checkout .StripeElement--focus {
      border-color: #0096D5; }
  .checkout .card-element {
    height: 40px; }
  .checkout #card-wrapper {
    position: relative; }
    .checkout #card-wrapper.loading:before {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #F7F7F7;
      content: '';
      display: block;
      z-index: 1; }
    .checkout #card-wrapper.loading:after {
      position: absolute;
      top: 50%;
      left: 0%;
      right: 0;
      text-align: center;
      content: 'loading...';
      color: #888;
      font-size: 0.8rem;
      z-index: 2; }
  .checkout .card-meta {
    overflow: hidden; }
  .checkout #card_submit {
    margin-top: 15px; }
  .checkout .card_expiry, .checkout .card_cvc {
    float: left;
    width: 45%; }
  .checkout .card_expiry {
    margin-right: 10%; }
  .checkout .summary {
    width: 100%;
    font-family: "Roboto"; }
    .checkout .summary td:last-child {
      padding-right: 0; }
    .checkout .summary .discount-blurb {
      font-weight: 300;
      font-size: 0.8rem; }
    .checkout .summary .donation-row td {
      padding-bottom: 0; }
    .checkout .summary .donation-blurb-row td {
      padding-top: 5px;
      font-weight: 300;
      font-size: 0.8rem;
      padding-bottom: 15px; }
    .checkout .summary .total-row td {
      border-top: solid #ddd 1px;
      padding-top: 15px; }
  .checkout input[name='donation'] {
    width: 80px;
    padding: 5px 10px; }

.order-complete {
  position: relative; }
  .order-complete #member-badge {
    top: -40px;
    left: -60px; }
    @media screen and (max-width: 600px) {
      .order-complete #member-badge {
        display: none; } }

.order-complete-cta {
  padding: 10px; }
  .order-complete-cta p {
    margin: 30px 0; }