﻿
.subscriptionLandingPage .mainContent {
  text-align: center;
}

.subscriptionLandingPage h1 {
  font-size: 54px;
  font-weight: 800;
  color: var(--brandColorBlack);
}

.subscriptionLandingPage .disclaimer {
  font-size: 12px;
}

.subscriptionLandingPage .subscription-wrap {
  padding-top: 35px;
  margin-bottom: 35px;
}

.subscriptionLandingPage .subscription {
  max-width: 400px;
  margin:0 auto;
  padding: 6px;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  text-align: left;
  box-shadow: 0px 4px 4px 0px #00000040;
}

.subscriptionLandingPage .subscription:not(:last-child) {
  margin-bottom: 35px;
}

.subscriptionLandingPage .badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 200px;
  padding: 11px 0;
  border-bottom-left-radius: 25px;
  font-size: 15px;
  color: #FFF;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0px 4px 4px 0px #00000040;
}

.subscriptionLandingPage .processingTime {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 200px;
  padding: 11px 0;
  border-top-right-radius: 25px;
  font-size: 12px;
  color: #FFF;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.subscriptionLandingPage .subscription .content {
  height:100%;
  padding-bottom: 50px;
  background: #F4F4F4;
  border-radius: 24px;
}

.subscriptionLandingPage .content .top {
  padding: 55px 32px 0 32px;
  margin-bottom: 25px;
}

.subscriptionLandingPage .content .top > *:not(:last-child) {
  margin-bottom: 11px;
}

.subscriptionLandingPage .content .planName {
  font-size: 28px;
  font-weight: 800;
}

.subscriptionLandingPage .content .desc {
  font-size: 13px;
}

.subscriptionLandingPage .content .price {
  font-size: 32px;
  font-weight: 800;
}

.subscriptionLandingPage .content .fees {
  font-size:10px;
  text-transform:lowercase;
}

.subscriptionLandingPage .content .ctaButton {
  padding-top: 10px;
}

.subscriptionLandingPage .content .price span {
  font-size: 10px;
  font-weight: 500;
}

.subscriptionLandingPage .content .btn {
  width: 100%;
  padding: 10px 2px;
  font-size: 15px;
  text-transform: none;
  color: #FFF;
  border: none;
  box-shadow: 0px 4px 4px 0px #00000040;
}

.subscriptionLandingPage .content .btm {
  margin: 0 20px;
  padding: 20px 20px;
  border-radius: 20px;
  background: linear-gradient(126.55deg, rgba(130, 130, 130, 0.3) 2.93%, rgba(28, 28, 28, 0.3) 98.54%);
}

.subscriptionLandingPage .content .btmHeader {
  margin-bottom: 10px;
  padding-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #000;
}

.subscriptionLandingPage .content .btm ul {
  padding: 0;
  list-style-type: none;
  font-weight: 600;
  font-size: 11px;
}

.subscriptionLandingPage .content .btm li::before {
  content: "✓";
  margin-right:5px;
}

.subscriptionLandingPage .included-list {
  list-style: none;
  font-family: sans-serif;
  width: 350px;
}

.subscriptionLandingPage .included-list li {
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.subscriptionLandingPage .info-wrapper {
  position: relative;
  display: inline-flex;
  margin-left: 4px;
  cursor: pointer;
}

.subscriptionLandingPage .info-icon {
  color: #ff4500;
  font-size: 14px;
}

.subscriptionLandingPage .info-icon img {
  width: 13px;
  height: auto;
  position: relative;
  top: 1px;
}

.subscriptionLandingPage .tooltip {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 10px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  width: 200px;
  position: absolute;
  top: 160%;
  left: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
  transform: translateX(-46.5%);
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  justify-content: center;
}

.subscriptionLandingPage .tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

.subscriptionLandingPage .included-list li:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width:768px) {
  .subscriptionLandingPage .subscription-wrap.sub-count-2,
  .subscriptionLandingPage .subscription-wrap.sub-count-4 {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    max-width: 850px;
    margin: 0 auto 35px;
  }

  .subscriptionLandingPage .subscription-wrap.sub-count-2 .subscription,
  .subscriptionLandingPage .subscription-wrap.sub-count-4 .subscription {
    margin-bottom: 0;
  }
}

@media screen and (min-width:1024px) {
  .subscriptionLandingPage .subscription-wrap.sub-count-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 35px;
    max-width: 1150px;
    margin: 0 auto 35px;
  }

  .subscriptionLandingPage .subscription-wrap.sub-count-3 .subscription {
    max-width:350px;
    margin-bottom: 0;
  }
}

@media screen and (min-width:1320px) {
  .subscriptionLandingPage .subscription-wrap.sub-count-4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1250px;
  }

  .subscriptionLandingPage .subscription-wrap.sub-count-4 .subscription {
    margin-bottom: 0;
  }
}

/* ----------------------------------------------------
		Start Subscription Popup
------------------------------------------------------- */
#SubscriptionPopup.modalWrapper {
  overflow-y: scroll;
  align-items: flex-start;
  background-color: rgba(0, 0, 0, 0.4);
}

#SubscriptionPopup .modalContentWrap {
  width: 100%;
  max-width: 600px;
  padding: 50px 2%;
  background-color: transparent;
  background: transparent;
}

#SubscriptionPopup .modalClose {
  padding: 3px 11px;
  top: 10px;
  right: 10px;
  font-size: 19px;
  color: #000;
  font-weight: 600;
  background-color: #FFF;
  border-radius: 52px;
}

#SubscriptionPopup .modalContent {
  text-align: center;
}

#SubscriptionPopup .content {
  padding: 45px 2%;
  position: relative;
  background: linear-gradient(180deg, #FFA200 0%, #FF4015 100%);
  box-shadow: 0px 0px 5px 10px #00000040;
  border-radius: 9px;
}

#SubscriptionPopup .contentCopy {
  padding-top: 20px;
}

#SubscriptionPopup .img {
  width: 100%;
}

#SubscriptionPopup .header {
  margin-bottom: 10px;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.1em;
  text-transform: uppercase;
}

#SubscriptionPopup .rteCopy {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3em;
}

#SubscriptionPopup .screen2 {
  display: none;
  padding-bottom: 30px;
}

@media screen and (min-width:630px) {
  #SubscriptionPopup .content {
    padding: 45px 15px 15px 15px;
  }

  #SubscriptionPopup .modalClose {
    top: -13px;
    right: -18px;
  }

  #SubscriptionPopup .contentCopy {
    max-width: 475px;
  }
}

@media screen and (min-width:768px) {
  #SubscriptionPopup .modalContentWrap {
    padding: 50px;
  }
}

/* ----------------------------------------------------
		End Subscription Popup
------------------------------------------------------- */

/* ----------------------------------------------------
		Start Labor Law Poster Popup Form
------------------------------------------------------- */

.subscriptionPopupForm {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6em;
  scroll-margin-top: 100px;
}

.subscriptionPopupForm .formContent {
  padding: 20px 22px 35px 22px;
}

.subscriptionPopupForm .formContent form {
  background-color: transparent;
}

.subscriptionPopupForm .formContent .formRow {
  background-color: transparent;
}

.subscriptionPopupForm .formContent .formRow .inputs {
  background-color: transparent;
}

.subscriptionPopupForm .formContent .formRow .inputs input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color:transparent;
}

.subscriptionPopupForm .formContent .formRow .btn {
  max-width: 170px;
  background-color: #000;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-color: transparent;
}

.subscriptionPopupForm form label {
  display: none;
}

.subscriptionPopupForm #PUConfirmationMsg {
  display: none;
  line-height: 1.5em;
}

.subscriptionPopupForm #PUConfirmationMsg .rteCopy {
  margin-bottom: 0;
}

@media screen and (min-width:768px) {
  .subscriptionPopupForm {
    font-size: 16px;
    scroll-margin-top: 200px;
  }
}

/* ----------------------------------------------------
		Start Labor Law Poster Popup Form
------------------------------------------------------- */