/* --------------------------------------------------------------------------
   19.Custom — Account page
   -------------------------------------------------------------------------- */

/* Image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   .account-image {
    position: relative;
 }
 
 .account-image img {
    width: 120px;
    height: 120px;
 }
 
 .account-image svg {
    position: absolute;
    z-index: -1;
    top: calc(50% - 19px - 1vh);
    left: calc(50% - 17px);
    width: 34px;
    height: 34px;
    opacity: .8;
    fill: var(--color-three);
 }
 
 /* Details
    –––––––––––––––––––––––––––––––––––––––––––––––––––– */
 .account-details,
 .account-detail-column > div {
    box-sizing: border-box;
 }
 
 .account-details {
    position: relative;
    max-width: 600px;
    margin: 100px auto;
    border: var(--border) var(--color-three);
 }
 
 .account-details-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 2vh 6%;
 }
 
 .account-detail-column {
    flex-basis: auto;
    min-width: 225px;
    padding-right: 20px;
 }
 
 .account-detail-column > div {
    padding: 12px 0;
 }
 
 .account-details-title,
 .account-detail-heading {
    font-family: var(--font-family-four);
    font-size: 13px;
    font-weight: var(--font-weight-four-medium);
 }
 
 .account-details-title {
    position: absolute;
    top: -30px;
    left: -1px;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--color-font-one);
 }
 
 .account-detail-heading {
    line-height: 1;
    position: relative;
    display: block;
    width: 100%;
 }
 
 .account-detail-content {
    font-family: var(--font-family-two);
    font-size: 14px;
    font-weight: var(--font-weight-two-bold);
    display: inline-block;
    margin-top: 10px;
 }
 
 /* Cancel button
    –––––––––––––––––––––––––––––––––––––––––––––––––––– */
 .account-detail-cancel {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
 }
 
 .account-detail-cancel-button {
    padding: 15px;
 }
 
 .account-detail-cancel-error {
    display: none;
 }
 
 /* Alerts
    –––––––––––––––––––––––––––––––––––––––––––––––––––– */
 .account-detail-cancel-error,
 .account-detail-alert {
    font-size: 11px;
    margin-top: 10px;
 }
 
 .account-detail-cancel-button.error + .account-detail-cancel-error {
    display: block;
 }
 
 /* Billing link
    –––––––––––––––––––––––––––––––––––––––––––––––––––– */
    .account-detail-buttons {
       font-size: 11px;
       width: 100%;
       margin-top: 17px;
       text-align: right;
    }
    
    .account-detail-buttons span {
       display: inline-block;
       transition: transform .2s ease;
    }
    
    .account-detail-buttons a:hover span {
       transform: translateX(3px);
    }
    
    .account-detail-buttons a:first-child {
       margin-right: 10px;
    }
    
    .account-detail-buttons a:hover:first-child {
       text-decoration: underline;
    }
 
 /* RWD — Account page
    –––––––––––––––––––––––––––––––––––––––––––––––––––– */
 @media (max-width:480px) {
    .account-detail-billing {
       text-align: left;
    }
 
 }
 
 .apply-membership{
    margin: auto;
    text-align: center;
    margin-top: 50px;
 }
 .apply-membership a{
    font-weight: var(--font-weight-one-bold);
    text-transform: uppercase;
    border: 0;
 }
 
 /* --------------------------------------------------------------------------
   12.Author & Tag page
   -------------------------------------------------------------------------- */
.archive-section {
   width: 100%;
   margin: 8vh auto 5vh;
   text-align: center;
}

.archive-details,
.archive-description {
   margin: 3vh auto 0;
}


 /* Profile & Cover image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.archive-image img {
   width: 200px;
   height: 200px;
   margin-bottom: 2vh;
   padding: 10px;
   border: var(--border) var(--color-three);
   border-radius: 100%;
}

/* Title
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.archive-title {
   font-size: 40px;
   margin: 0;
}

/* Location & Counter
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.archive-details {
   font-family: var(--font-family-four);
   font-size: 13px;
   font-weight: var(--font-weight-four-medium);
}

/* Author social
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.archive-icons {
   margin-top: 3vh;
}

.archive-icons svg {
   width: 19px;
   height: 19px;
   margin: 0 20px;
   transition: fill .15s ease;
   fill: var(--color-font-one);
}

.archive-icons svg:hover {
   fill: var(--ghost-accent-color);
}

/* Description
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.archive-description {
   font-family: var(--font-family-two);
   font-size: 16px;
   font-weight: var(--font-weight-two-medium);
   line-height: 1.6;
   max-width: 680px;
}

/* RWD — Author & Tag page
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:480px) {
   .archive-image img {
      padding: 6px;
   }

   .archive-title {
      font-size: 25px;
   }

   .archive-description {
      font-size: 14px;
   }

}

@media (min-width:481px) and (max-width:768px) {
   .archive-title {
      font-size: 30px;
   }

}

@media (max-width:768px) {
   .archive-image img {
      width: 160px;
      height: 160px;
   }

}

@media (max-width:1024px) {
   .archive-section {
      margin-top: 3vh;
   }

}

/* Pricing cards
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   .membership-cards,
   .membership-card {
      display: flex;
      flex-wrap: wrap;
   }
   
   .membership-cards {
      justify-content: center;
      margin: 10vh auto 2vh;
   }
   
   .membership-cards.is-member {
      margin-bottom: 5vh;
   }
   
   .membership-card {
      position: relative;
      flex: 1 0 260px;
      box-sizing: border-box;
      min-width: 260px;
      max-width: 444px;
      margin: 0 0 80px;
      padding: 10px 10px 5vh;
      text-align: center;
      border-left: var(--border) var(--color-three);
   }
   
   .membership-card-content {
      width: 100%;
      margin: 0 auto;
   }
   
   /* Title label
      –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   .membership-card-title {
      font-family: var(--font-family-four);
      font-size: 13px;
      font-weight: var(--font-weight-four-medium);
      position: absolute;
      top: -30px;
      left: -1px;
      margin-top: 0;
      margin-bottom: 0;
      color: var(--color-font-two);
      background-color: var(--ghost-accent-color);
   }

   /* Switch
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
.membership-switch[data-active-price="yearly"] + .membership-cards [data-monthly],
.membership-switch[data-active-price="monthly"] + .membership-cards [data-yearly] {
   display: none;
}

.membership-switch,
.membership-switch button {
   position: relative;
}

.membership-switch {
   display: none;
   box-sizing: border-box;
   width: 100%;
   max-width: 280px;
   min-height: 45px;
   margin: 0 auto 12vh;
   background-color: var(--color-one);
}

.membership-switch[data-active-price="monthly"]::before {
   transform: translateX(-100%);
}

.membership-switch[data-active-price="monthly"] button:first-of-type,
.membership-switch[data-active-price="yearly"] button:first-of-type + button {
   color: var(--color-font-two);
}

.membership-switch::before {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50%;
   content: "";
   transition: transform .15s ease-in-out;
   background-color: var(--ghost-accent-color);
}

.membership-switch button {
   font-size: 14px;
   font-family: var(--font-family-two);
   font-weight: var(--font-weight-two-semi-bold);
   line-height: 1;
   width: 50%;
   padding: 0;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   transition: color .15s ease-in-out;
   color: var(--color-font-one);
   border: 0;
   outline: none;
   background-color: transparent;
   box-shadow: none;
}
   
   /* Price
      –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   .membership-card-price {
      font-size: 70px;
      margin: 0 0 0 -25px;
      padding: 3vh 0 4vh;
   }
   
   .membership-card-price sup {
      font-size: 50%;
      position: relative;
      top: -25px;
      margin-right: 3px;
   }
   
   /* Options
      –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   .membership-card-options ul {
      margin: 0;
      padding: 0 20px 5vh;
   }
   
   .membership-card-options ul li {
      font-family: var(--font-family-four);
      font-size: 13px;
      font-weight: var(--font-weight-four-medium);
      margin: 0 0 10px;
      padding: 0;
      list-style: none;
   }
   
   /* Button
      –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   .membership-card-content + a {
      align-self: flex-end;
      margin: 0 auto;
   }
   
   /* Small footer
      –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   .membership-cards + small {
      margin-top: 0;
      margin-bottom: 10vh;
      text-align: center;
   }
   
   /* RWD — Membership page
      –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   @media (max-width:480px) {
      .membership-switch {
         max-width: 100%;
      }
   
      .membership-card-price span,
      .membership-card-description {
         font-size: 14px;
      }
      .membership-card-price {
         font-size: 50px;
      }
   
      .membership-card-title,
      .membership-card-options ul li {
         font-size: 12px;
      }
   
   }
   
   @media (max-width:768px) {
      .post-header.is-hero.is-page .membership-description p {
         font-size: 16px;
      }
   
   }
   
   @media (max-width:1024px) {
      .membership-card-price {
         font-size: 65px;
      }
   
   }
   
   @media (max-width:1280px) {
      .membership-card {
         max-width: 100%;
      }
   
   }