/* --- CSS for Marketing Pages --- */
/*--- in the order of how things appear on the page ---*/

/*--- Homepage CSS --*/


/*--- old ---*/
 Pastels and Color Pallette
--------------------------------------------------
Pastels
Blue - #51b7e0
Yellow - #f5cb0a
Pink - #f763ac
Green - #17e0bc

BG Colors
hero lite blue - #d6e8ecg

/* Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.clearfix:before, .clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}

/*--- Support Page CSS ---*/

.cs-image { position: absolute; opacity: .5; right: 200px; }
.cs-image-lines { position: absolute; opacity: .5; right: -170px; top:-200px; }

.cs-accountsubtitles { font-weight:900; text-align: left; font-size: 1.4rem; }
.support-li { padding-bottom:30px; list-style:none; }


/* --- Form popover management --- */
#editCover{ position:fixed; top:0; left:0; background:rgba(0,0,0,.6); z-index:5; width:100%; height:100%; display:none; }
#purchaseScreen:target, #purchaseScreen:target + #editCover{ display:block; opacity:2; }
#renewScreen:target, #renewScreen:target + #editCover{ display:block; opacity:2; }
#autorenewScreen:target, #autorenewScreen:target + #editCover{ display:block; opacity:2; }
#trialScreen:target, #trialScreen:target + #editCover{ display:block; opacity:2; }
#thirtydaytrialScreen:target, #thirtydaytrialScreen:target + #editCover{ display:block; opacity:2; }

  #purchaseform{
	width:100%;
	margin:0 auto;
	padding-top:40px;
  }
  #purchaseform .dialog-layout{ padding:40px; width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .dialog-thankyou-layout{ padding:40px; width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .dialog-centered-layout{ padding:40px; width:360px; margin:0 auto; background: #fff; color:#333; border-radius: 10px; text-align:center;} /* -- No border on mobile + full background --*/
  #purchaseform .title {color:#333; font-size:2.4rem; font-weight:300; text-align:center; margin-top:-20px; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
  #purchaseform .sub-title {text-align:justify; padding-bottom:20px; width:100%; line-height: 2rem; white-space: pre-wrap;}
  #purchaseform .dialog-centered-layout .sub-title {text-align:center; padding-bottom:20px; width:100%;}
  #purchaseform .post-button-text {padding-top:15px; margin-bottom:-10px;}
  #purchaseform .context{ font-size:11px; color:#aaa; margin:-8px; padding-bottom:20px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
  #purchaseform .error{ font-size:1.4rem; color:red; padding:0px 10px 20px 10px; white-space: pre-wrap;}
  #purchaseform .input-title{ font-size:1.1rem; color:#999; padding-left:10px; text-transform:uppercase; text-align:left; padding-bottom:1px;}
  #purchaseform .textarea-title{ font-size:1.1rem; color:#999; padding-left:10px; text-transform:uppercase; text-align:left; padding-bottom:1px;}
  #purchaseform .input-row { color:#333; background: #fff; font-size:2rem; display:block; margin-bottom:15px; font-weight:300; padding-right:5px;}
  #purchaseform .multi-value-input {display: flex;}
  #purchaseform .input-checkbox-row {color:#333; background: #fff; font-size:2rem; display:flex; margin-bottom:15px; font-weight:300;}
  #purchaseform .input-row > input { border:solid 1px #ccc; width: 100%; font-weight:300; }
  #purchaseform .input-row input:focus { outline: none; border:solid 1px #45a0c4;}
  #purchaseform .input-row .no-input-text-field { text-align: left; padding-left: 9px; width: 100%; font-weight:300; }
  #purchaseform .textarea-row { color:#333; background: #fff; font-size:2rem; display:block; margin-bottom:20px; font-weight:300;}
  #purchaseform .textarea-row > textarea { border:solid 1px #ccc; width: 100%; font-weight:300; }
  #purchaseform .textarea-row textarea:focus { outline: none; border:solid 1px #45a0c4;}
  #purchaseform .spaces-email-textarea-row { color:#333; background: #fff; font-size:2rem; display:block; margin-bottom:20px; font-weight:300; }
  #purchaseform .spaces-email-textarea-row > textarea { border:solid 1px #ccc; width: 100%; font-weight:300; }
  #purchaseform .spaces-email-textarea-row textarea:focus { outline: none; border:solid 1px #45a0c4;}
  #purchaseform .formbutton { text-align:center; margin-top:10px; margin-bottom:0px; }
  #purchaseform .formbutton .disabled { opacity: 0.6; }
  #purchaseform .formbutton .submitting { opacity: 0.6; }
  #purchaseform .cancel {text-align:center; padding-top:20px; margin-bottom:0px;}
  #purchaseform .process-action-status { color:#333; font-size:2.0rem; font-weight:300; text-align:center; padding-bottom:40px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

  .purchase-thankyou-title {color:#333; font-size:4.2rem; font-weight:300; text-align:center; margin-top:0px; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
  .purchase-thankyou-title-medium {color:#333; font-size:3.2rem; font-weight:300; text-align:center; margin-top:0px; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
  .purchase-thankyou-subtitle {color:#333; font-size:1.4rem; font-weight:400; text-align:justify; padding-bottom:25px; width:100%;}
  .purchase-thankyou-subtitle-center {color:#333; font-size:1.4rem; font-weight:400; text-align:center; padding-bottom:15px; width:100%;}
  .purchase-thankyou-image-div { }
  .purchase-thankyou-image-img { width: 100%; margin-bottom: 20px; }
  .purchase-enable-title {color:#333; font-size:2.4rem; font-weight:500; text-align:center; margin-top:0px; padding-bottom:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
  .purchase-enable-subtitle {color:#333; font-size:1.4rem; font-weight:400; text-align:justify; padding-bottom:25px; width:100%;}
  .button-purchase-thankyou { width:200px; margin-top:0px;}
  .button-purchase-thankyou .submitting { opacity: 0.6; cursor: none; }

  .button-disabled { opacity: 0.6; cursor: none; }
  .button-disabled:hover { opacity: 0.6; background-color: #51b7e0; cursor: none; }

  .expire-text {text-align:center; margin-top:-20px; color: #333; font-size:1.4rem; font-weight:400; padding-bottom:5px;}

  .landing-video { width:560px; height:315px; }

  .main-video-holder { margin:0 auto; width:100%; text-align:left; }


/*--- Pricing ---*/
  .pricing-holder { margin:0 auto; text-align:center; max-width:750px; }

  .colorblack { color: #000000; }
      .black-top-border { border-top: solid 2px #000000; }
  .colorlblue { color: #116cd6; }
      .lblue-top-border { border-top: solid 2px #116cd6; }
  .colordblue { color: #34368f; }
      .dblue-top-border { border-top: solid 2px #34368f; }
  .colorpurple { color: #8b2d91; }
      .purple-top-border { border-top: solid 2px #8b2d91; }
  .colorgreen { color: #8da43c; }
      .green-top-border { border-top: solid 2px #8da43c; }
  .colorpink { color: #d31d7a; }
      .pink-top-border { border-top: solid 2px #d31d7a; }
  .colordeeporange { color: #ff7d27; }
      .deep-orange-top-border { border-top: solid 2px #ff7d27; }
  .colororange { color: #f79429; }
      .orange-top-border { border-top: solid 2px #f79429; }
  .colorsblue { color: #51b7e0; }
      .sblue-top-border { border-top: solid 2px #51b7e0; }
  .colordgrey { color: #333333; }
      .dgrey-top-border { border-top: solid 2px #333333; }
  .colorred{ color: #e21e26; }
      .red-top-border { border-top: solid 2px #e21e26; }


  #pricing .pricing-title { font-size:4rem; font-weight:900; text-align:left; padding:40px 20px 5px 20px; }
  .pricing-promo { font-size:2rem; font-weight:400; line-height:2.2rem; padding:0 20px 20px 20px; text-align:center; color:#FF2B96; }
  .pricing-promo-terms { font-size:1.2rem; font-weight:400; line-height:2.2rem; padding:0 20px 20px 20px; text-align:left; color:gray; }
  .pricing-whatsincluded { text-align:left; font-size:2rem; font-weight:900; padding:20px 0 10px 20px; }
  .pricing-price { font-size:2.4rem; font-weight:900; text-align:center;  }
  .pricing-subtitle { font-size:1.4rem; font-weight:400; text-align:center; margin:0 0 23px 0; }
  .pricing-subcategory { font-size: 2rem; font-weight:900; padding:25px 20px 10px 20px; text-align:left; }
  .pricing-subcategory-premium { font-size: 2rem; font-weight:900; padding:25px 20px 10px 20px; text-align:left; }
  .pricing-description { font-size:1.6rem; font-weight:400; line-height:2.2rem; padding:0 20px 20px 20px; text-align:left; }
  .pricing-spacer { width:80%; }
  .pricing-month { font-size:1.8rem; font-weight:400; }
  .pricing-list-check { width:20px; }
  .pricing-list-black { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-business-black.png'); }
  .pricing-list-purple { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-purple.png'); }
  .pricing-list-pink { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-pink.png'); }
  .pricing-list-deep-orange { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-deep-orange.png'); }
  .pricing-list-dblue { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-dblue.png'); }
  .pricing-list-lblue { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-lblue.png'); }
  .pricing-list-red { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-red.png'); }
  .pricing-list-orange { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-orange.png'); }
  .pricing-list-green { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-green.png'); }
  .pricing-list-green-circle { padding-left:20px; list-style-image: url('/images/homepage/pricing/check-premium-green-circle.png'); }
  .pricing-big-tab { width:180px; }
  .pricing-list-green2 { padding-left:20px; list-style-type: circle; color:#8da43c; }

  .pricing-button { text-align:center; margin-bottom:25px; }
  .pricing-button2 { text-align: center; padding:0 60px; }

  .pricing-faq-space { padding-top:40px; }
  .pricing-faq-subtitle { font-size:1.7rem; font-weight:900; line-height:2.5rem; text-align:left; padding:40px 0 5px 0; }
  .pricing-faq-text { font-size:1.6rem; font-weight:400; line-height:2rem; text-align:left; padding:0 0 20px 0; }
  .pricing-faq-link { color:#51b7e0; }

  .pricing-tab { text-align:right; position: relative; top:30px; right:0; margin-top: -30px; }


/*--- Org Access Subscription ---*/
  .org-access-subtitle { font-size:2.4rem; font-weight:900; text-align:center; padding-bottom:25px; }
  .org-access-button { text-align:center; margin-bottom:35px; }
  .org-access-button2 { text-align: center; padding:0 60px; }


/*---- Media tags ----*/

@media (min-width: 320px) {
  .landing-video { width:300px; height:169px; }
}

@media (min-width: 400px) {
  .landing-video { width:380px; height:214px; }
}

@media (min-width: 550px) {
  .landing-video { width:530px; height:298px; }
}

@media (min-width: 590px) {
  .landing-video { width:560px; height:315px; }
}

@media (min-width: 600px){

}

@media (min-width: 750px) {
  .landing-video { width:640px; height:360px; }
}

@media (min-width: 1000px) {
  .landing-video { width:900px; height:506px; text-align:center;}
}

@media (min-width: 1200px) {

}