@charset "UTF-8";
    /* CSS Document */

    /* ===========  CONTAINERS  =========== */

    html,
    body,
    .white-bgcolor {
      height: 100%;
      font-family: 'Salesforce', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: #2B2826
    }

    .container-limit,
    .header-headlines,
    .top-banner-bg {
      margin: 0 auto;
    }

    .salesforce-header-logo {
      padding: 30px 0 0 0;
    }

    .salesforce-header-logo img {
      width: 80px;
      height: auto
    }

    .header-headlines {
      padding: 0
    }

    .topbanner h1,
    .topbanner p {
      padding: 0px 10px 14px 0px;
      margin: 0px
    }

    .topbanner h1 {
      font-weight: bold;
      margin: 0;
      width: 98%;
      color: #215CA0;
      padding: 20px 0 0 0;
      font-size: 42px;
      line-height: 54px;
    }

    .topbanner p {
      font-size: 18px;
      font-weight: normal;
      line-height: 24px;
      color: #222222;
      margin: 0;
    }

    .top-banner-bg {
      vertical-align: top
    }

    .top-banner-bg img {
      width: 100%;
      height: auto
    }

    .main-section {
      padding: 40px 0;
    }

    .body-copy-headline {
      font-size: 36px;
      font-weight: 200;
      line-height: 48px;
      color: #215CA0;
      border: none;
      padding: 0 0 20px 0;
    }

    .body-copy-columns {
      padding: 20px 25px 0 0;
      font-size: 16px;
      line-height: 24px;
      color: #706E6B;
    }

    .page-titles {
      color: #1589EE;
      font-size: 36px;
      font-weight: 200;
      line-height: 48px
    }

    .pullquote-gradient {
      height: 100%;
      padding: 40px 20px;
      margin-left: 25px;
      background-image: linear-gradient(to bottom right, #E0E9F8, white 100%);
      border-radius: 10px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
    }

    .pullquote-gradient h3 {
      font-size: 30px;
      line-height: 38px;
      margin-top: 40px;
      color: #476DAD;
    }

    .pullquote-gradient p {
      font-size: 16px;
      line-height: 21px;
      text-transform: uppercase;
      color: #8DA3CC;
    }

    .cta-button {
      display: block;
      border: medium solid #0070D2;
      border-width: 1px;
      border-radius: 8px;
      color: #0070D2;
      padding: 10px 20px;
      margin-top: 30px;
      margin-bottom: 40px;
      font-size: 14px;
      line-height: 18px;
      background: #FFF;
      margin-left: auto;
      margin-right: auto;
    }

    .quote-box {
      display: flex;
      justify-content: center;
      border-radius: 10px;
      width: 207px;
      text-align: center;
      vertical-align: bottom;
      flex-flow: column;
    }

    .cta-boxes {
      display: flex;
      justify-content: center;
      height: 200px;
      border-radius: 10px;
      background-color: #FFF;
      text-align: center;
      vertical-align: bottom;
      flex-flow: column;
      box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
      width: 214px;
      margin-bottom: 20px;
    }

    .cta-boxes p {
      font-size: 14px;
      line-height: 18px;
      color: #0070D2;
    }

    .cta-box-1 {
      background-image: url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/9/column-1-BG.png');
      background-position: top;
      background-size: 100% auto;
      background-repeat: no-repeat;
      margin-right: 20px;
    }

    .cta-box-2 {
      background-image: url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/9/column-2-BG.png');
      background-position: top;
      background-size: 100% auto;
      background-repeat: no-repeat;
      margin-right: 20px;
    }

    .cta-box-3 {
      background-image: url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/9/community_bg_mobile.png');
      background-position: top;
      background-size: 100% auto;
      background-repeat: no-repeat
    }

    .letter-btn {
      display: flex;
    }

    .cta-button:hover {
      color: #0070D2 !important;
    }

    p.para1,
    p.para2 {
      text-align: left
    }


    /*  Top Banner  */
    .topbanner {
      margin: 0;
      background-image: url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/9/padlock_banner_v1.png');
      background-color: #E3F7FE;
      height: 350px;
      background-position: bottom;
      background-repeat: repeat-x;
      background-size: 100% auto;
      padding: 0 20px;
    }

    .col-padding {
      padding: 0 !important;
    }

    .image-div {
      padding-right: 25px;
    }

    .image-container {
      width: 214px;
      display: block;
    }

    .cta-boxes img {
      width: auto;
      height: 118px;
      margin-top: 20px;
    }

    .main-section section {
      padding-bottom: 50px;
      display: flex;
    }

    .row {
      margin-left: 0 !important;
      margin-right: 0 !important
    }


    .blue-banner {
      background: #032E61;
      display: flex;
      justify-content: center;
    }

    .blue-banner p {
      font-size: 20px;
      line-height: 26px;
      color: #FFFFFF;
      padding: 17px 0;
      text-align: center;
      margin: 0;
    }

    .best-practice-header p {
      color: #215CA0;
      font-size: 24px;
      line-height: 31px;
    }

    .resource-copy span {
      color: #222222;
      font-size: 16px;
      line-height: 24px;
    }

    .resource-copy a {
      color: #0777BC;
    }

    .best-practice-header {
      padding: 40px 0 20px 0 !important;
    }

    .right-container {
      padding: 30px 0 0 40px;
    }

    .resource-span-copy {
      color: #215CA0;
      font-size: 24px;
      line-height: 31px;
      font-weight: bold;
      display: block;
      text-align: center;
      margin-bottom: 15px;
    }


    .cta-box-4 {
      background: #8CD3F8;
      height: auto;
    }

    .cta-box-4 .wrapper-div {
      padding: 46px 0;
    }

    .box4copy1 {
      color: #032E61 !important;
      font-size: 22px !important;
      line-height: 28px !important;
      font-weight: bold !important;
    }

    .box4copy2 {
      color: #0777BC !important;
      font-size: 16px !important;
      line-height: 21px !important;
      font-weight: bold !important;
    }

    .right-brace {
      font-size: 12px;
      vertical-align: text-bottom;
      padding-left: 5px;
    }

    .single-col-div {
      padding: 25px 10px;
      background: #FFFFFF;
      margin-right: 18px;
      border-top: 4px solid #249EDF;
      width: 234px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 256px;
      margin-bottom: 20px;
    }

    .multi-col-div {
      display: flex;
      flex-wrap: wrap;
    }

    .single-col-div .main-page-btn {
      color: #0777BC;
      font-size: 16px;
      line-height: 21px;
      display: block;
      text-align: center;
    }

    .single-col-div .main-page-btn:focus,
    .single-col-div .main-page-btn:hover {
      color: #0777BC !important;
      cursor: pointer;
    }

    .webinar-div {
      background: #EBC4DD;
      padding: 40px 0;
      width: 140px;
      margin-right: 30px;
    }

    .webinar-div img {
      display: block;
      margin: auto;
    }

    .toolst-copy {
      margin-bottom: 50px;
    }

    .right-webinar-div {
      width: 77%;
      padding: 10px 0 !important;
    }

    .right-webinar-div .para1 {
      font-size: 20px;
      line-height: 26px;
      font-weight: bold;
      color: #215CA0;
      margin-bottom: 6px;
    }

    .right-webinar-div .para2 {
      font-size: 14px;
      line-height: 18px;
      color: #222222;
      margin-bottom: 30px;
    }

    .right-webinar-div .secondary-btn-covid {
      font-size: 16px;
      line-height: 21px;
      color: #0777BC;
    }

    .event-rows-tools {
      padding-bottom: 30px;
    }

    .event-rows-tools:last-child {
      padding-bottom: 0;
    }

    .trailmix-div {
      background-color: #C2E8FF;
    }

    .two-col-wrapper {
      display: flex;
    }


    /* ===========  MEDIA QUERIES  =========== */

    @media screen and (min-width: 320px) and (max-width: 767px) {

      .topbanner {
        padding: 0;
        height: 260px;
        min-height: 185px;
        text-align: center;
        color: #ffffff;
      }

      .salesforce-header-logo img {
        width: 60px;
      }

      .salesforce-header-logo {
        padding: 30px 0 0 0;
      }

      .topbanner h1 {
        padding: 20px 20px 0 20px;
        font-size: 24px;
        line-height: 31px;
      }

      .topbanner p {
        font-size: 14px;
        line-height: 17px;
        padding: 10px 20px 0 20px;
        ;
        margin: 0
      }

      .main-section {
        padding: 20px;
      }

      .body-copy-headline {
        font-size: 22px;
        line-height: 26px;
        padding: 0 0 10px 0;
        font-weight: normal;
        text-align: center;
      }

      .pullquote-gradient h3 {
        font-size: 24px;
        line-height: 31px;
        margin-top: 0;
        margin-bottom: 20px;
      }

      .pullquote-gradient {
        padding: 15px 20px;
        height: auto;
        margin-top: 10px;
        margin-left: 0;
      }

      .pullquote-gradient p {
        font-size: 14px;
        line-height: 18px;
        margin-top: 0;
      }

      .body-copy-columns {
        padding: 0;
        margin-top: 15px;
      }

      .cta-button {
        margin-top: 30px;
        width: 100%;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 21px;
      }

      .image-div {
        padding-right: 15px;
      }

      .cta-boxes {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
      }

      .quote-box {
        width: 100%;
        margin-bottom: 30px;
        margin-right: 0;
      }

      .image-container {
        flex-wrap: wrap;
        width: 100%;
      }

      .cta-boxes img {
        display: block;
        margin: auto;
        margin-top: 76px;
        height: 106px;
      }

      .cta-box-1,
      .cta-box-2,
      .cta-box-3 {
        height: 226px;
        min-height: 226px;
        background-size: 100% 60%;
      }

      .cta-boxes p {
        display: block;
        margin: auto;
        margin-bottom: 25px;
      }

      .main-section section {
        padding-bottom: 20px;
        display: block;
      }

      .blue-banner p {
        font-size: 16px;
        line-height: 21px;
        padding: 20px 10px;
      }

      .best-practice-header p {
        font-size: 20px;
        line-height: 26px;
        text-align: center;
      }

      .best-practice-header {
        padding: 20px 0 10px 0 !important;
      }

      .multi-col-div {
        display: block;
      }

      .single-col-div {
        width: 100%;
        height: 164px;
        padding: 20px 20px 25px 20px;
      }

      .resource-span-copy {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 20px;
      }

      .right-container {
        padding: 15px 0 0 0;
      }

      .box4copy1 {
        margin-bottom: 10px !important;
      }

      .box4copy2 {
        margin-bottom: 0 !important;
      }

      .right-webinar-div {
        width: 100%;
        padding: 20px !important;
        background: #FFFFFF;
      }

      .right-webinar-div .para1 {
        text-align: center;
        font-size: 16px;
        line-height: 21px;
      }

      .right-webinar-div .para2 {
        line-height: 24px;
        margin-bottom: 10px;
      }

      .right-webinar-div .secondary-btn-covid {
        display: block;
        text-align: center;
      }

      .webinar-div {
        width: 100%;
        margin-right: 0;
      }

      .two-col-wrapper {
        display: block;
      }

      .resource-copy span {
        font-size: 18px;
        line-height: 26px;
      }

      .toolst-copy {
        margin-bottom: 30px;
      }
    }


    @media screen and (min-width: 768px) and (max-width: 1023px) {

      .topbanner {
        height: 300px;
      }

      .topbanner h1 {
        font-size: 24px;
        line-height: 31px;
      }

      .topbanner p {
        font-size: 14px;
        line-height: 17px;
        ;
        margin: 0
      }

      .main-section {
        padding: 20px !important;
      }

      .body-copy-headline {
        font-size: 22px;
        line-height: 26px;
        font-weight: normal;
      }

      .pullquote-gradient h3 {
        font-size: 24px;
        line-height: 31px;
        margin-top: 0;
        margin-bottom: 20px;
      }

      .pullquote-gradient {
        padding: 15px 20px;
        height: auto;
        margin-top: 10px;
        margin-left: 0;
      }

      .pullquote-gradient p {
        font-size: 14px;
        line-height: 18px;
        margin-top: 0;
      }

      .body-copy-columns {
        padding: 0;
        margin-top: 15px;
      }

      .cta-button {
        margin-top: 30px;
        width: 100%;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 21px;
      }

      .image-div {
        padding-right: 15px;
      }

      .quote-box {
        width: 100%;
        margin-bottom: 30px;
        margin-right: 0;
      }

      .cta-boxes {
        width: 100%;
      }

      .main-section section {
        padding-bottom: 30px;
      }

      .right-container {
        padding: 30px 0 0 25px;
      }

      .webinar-div {
        width: auto;
        margin-right: 0;
      }

      .two-col-wrapper {
        display: block;
      }

      .right-webinar-div .para1 {
        text-align: center;
      }

      .right-webinar-div .secondary-btn-covid {
        display: block;
        text-align: center;
      }

      .right-webinar-div {
        width: auto;
      }

      .right-webinar-div .para2 {
        margin-bottom: 20px;
      }

      .single-col-div {
        width: 100%;
        height: auto;
      }

      .single-col-div .resource-span-copy {
        margin-bottom: 50px;
      }
    }


    @media screen and (min-width: 940px) and (max-width: 1139px) {

      .container-limit,
      .header-headlines,
      .salesforce-header-logo {
        max-width: 960px;
      }


    }


    @media screen and (min-width: 1140px) {

      .container-limit,
      .header-headlines,
      .salesforce-header-logo {
        max-width: 1030px;
      }
    }


    /* iPhone Xr Portrait   */

    @media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait) {

      .topbanner p {
        font-size: 18px;
        line-height: 22px;
        margin-right: 20px;
        margin-left: 20px
      }

      .blue-banner p {
        font-size: 18px;
        line-height: 22px
      }

      .best-practice-header p {
        font-size: 22px;
        line-height: 28px
      }

      .best-practice-header {
        padding: 30px 0 15px 0 !important;
      }

      .resource-span-copy {
        font-size: 21px !important;
        line-height: 26px !important
      }

      a.resource-link,
      p.resource-link {
        font-size: 21px;
        line-height: 24px;
      }

      .box4copy1 {
        font-size: 28px !important;
        line-height: 34px !important
      }

      .box4copy2 {
        font-size: 21px !important;
        line-height: 24px !important
      }

      .single-col-div .main-page-btn {
        font-size: 21px !important;
        line-height: 24px !important;
      }

      .right-webinar-div .secondary-btn-covid {
        font-size: 21px !important;
        line-height: 24px !important;
      }

    }


    /*  iPhone Xr Landscape  */
    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
      .topbanner h1 {
        font-size: 26px;
        line-height: 32px;
      }

      a.resource-link,
      p.resource-link {
        font-size: 18px;
        line-height: 22px
      }
    }


    @media screen and (min-width: 1024px) and (max-width: 1380px) {
      .single-col-div {
        width: 220px;
      }
    }


    @media screen and (min-width: 1200px) {
      .topbanner {
        background-size: 100% 50%;
      }
    }




    /* Footer CSS */

    footer.bottom {
      position: relative;
      margin-top: -25px;
      background-color: #54698D;
      color: #ffffff
    }

    footer>.fa,
    .fas {
      font-weight: 600;
    }

    .columns-wrapper {
      position: relative;
      display: block
    }

    a,
    a:focus,
    a:hover {
      text-decoration: none;
    }

    a {
      color: #ffffff
    }

    a {
      background-color: transparent;
    }

    .li-wrap {
      padding: 0px 5px;
      margin: 0;
      line-height: 12px
    }

    .li-wrap a,
    .text-night,
    .text-night a,
    .phone-lead,
    .text-salesforce-gray,
    .header-text {
      color: #ffffff
    }

    .li-wrap a:hover,
    .li-wrap a:focus {
      color: #e2e7ee
    }

    .margin-40-top-lg {
      margin-top: 40px;
    }

    .margin-40-bottom-lg {
      margin-bottom: 40px;
    }

    .img-responsive {
      display: block;
      max-width: 80px;
    }

    img {
      vertical-align: middle;
    }

    img {
      border: 0;
    }

    .footer-social-links {
      text-align: left;
    }

    .margin-10-bottom-lg {
      margin-bottom: 10px;
    }

    .footer-social-links .social-media-links a {
      margin-right: 16px;
    }

    .social-media-links a {
      font-size: 26px;
    }

    .footer-social-links {
      font-size: 28px;
    }

    .salesforce-social-icon {
      background-size: contain;
      height: 30px;
      width: 30px;
      display: inline-block;
    }

    .footer-phone-number {
      font-size: 20px;
      color: #ffffff;
      line-height: 40px;
    }


    @media (max-width: 1311px) and (min-width: 1024px) {
      .hidden-md {
        display: none !important;
      }
    }

    .text-left {
      text-align: left;
    }

    .margin-60-top-lg {
      margin-top: 60px;
    }

    .margin-20-bottom-lg {
      margin-bottom: 20px;
    }

    .generic-links {
      list-style-type: none;
      padding-left: inherit;
    }

    ul.generic-links {
      padding-left: 0;
      list-style: none;
    }

    .margin-40-bottom-lg {
      margin-bottom: 40px;
    }

    ol,
    ul {
      margin-top: 0;
      margin-bottom: 5px;
    }

    ul.generic-links .li-wrap {
      position: relative;
    }

    .generic-links>li {
      padding: 0 0 5px;
      margin: 0;
    }

    ul.generic-links li {
      margin-bottom: 5px;
      font-size: 15px;
      color: #59575c;
    }

    .generic-links>li a {
      font-size: 12px;
    }

    .text-cirrus,
    .text-link {
      color: #215ca0;
    }

    .salesforce-icon {
      background-size: contain !important;
      font-weight: 200;
      color: #cdcdcd
    }

    body>footer.bottom .footerNavigationComponent,
    body>footer.bottom .powerFooterNavigationComponent {
      z-index: 103;
      position: relative;
      background-color: #032e61;
    }

    .page-footer {
      display: table;
      width: 100%;
      background-color: #032e61;
      padding-bottom: 20px;
      max-width: 1140px;
      margin: 0 auto;
    }

    .region-selector {
      visibility: hidden;
      width: 33.3%;
      position: relative;
    }

    .footerNavigationComponent .region-selector_button {
      width: unset;
      float: left;
      text-align: left;
      cursor: default;
      line-height: 85px;
      margin-right: 30px;
    }

    .footerNavigationComponent .region-selector_button .btn {
      cursor: pointer;
      padding: 11px 24px;
      min-width: 144px;
      height: 42px;
      line-height: 0;
    }

    .footerNavigationComponent .region-selector_icon {
      font-size: 20px;
    }

    .region-selector_icon {
      font-size: 20px;
      margin: 0 0 5px;
    }

    .region-selector_caret,
    .region-selector_icon {
      vertical-align: middle;
    }

    .region-selector_label {
      font-size: 14px;
      line-height: 18px;
      margin: 0 8px;
    }

    .region-selector_label {
      font-size: 11px;
      line-height: 85px;
      letter-spacing: .5px;
    }

    .footerNavigationComponent .region-selector_caret {
      font-size: 10px;
    }

    .region-selector_caret {
      font-size: 8px;
    }

    .region-selector_caret,
    .region-selector_icon {
      vertical-align: middle;
    }

    .footerNavigationComponent .region-selector_dialog {
      right: unset;
      left: 0;
      bottom: -17px;
    }

    .region-selector_dialog {
      display: none;
      position: absolute;
      right: -4px;
      bottom: -20px;
      z-index: 5;
      width: 710px;
      box-shadow: 0 0 8px #c1b9b4;
      background-color: #fff;
    }

    .border-white,
    .border-white:hover {
      border-color: #fff;
    }

    .region-selector_button {
      display: table-cell;
      width: 160px;
      height: 85px;
      float: right;
      text-align: right;
      vertical-align: middle;
      color: #fff;
      cursor: pointer;
      overflow: hidden;
    }

    .page-footer_content {
      display: inline;
      overflow: hidden;
    }

    .page-footer_legal {
      color: #fff;
    }

    .page-footer_legal,
    .page-footer_links {
      font-size: 11px;
      margin: 20px 50px;
    }

    @media screen and (max-width: 768px) {

      .page-footer_legal,
      .page-footer_links p {
        margin: 0 0 10.5px;
        font-size: 11px;
      }

      .page-footer_legal,
      .page-footer_links {
        max-width: 100%;
        margin: 14px auto;
        padding-left: 24px;
        padding-right: 24px;
        text-align: center;
      }

      .region-selector {
        display: none;
        overflow: hidden;
      }
    }

    .cq-wcm-foundation-aria-description,
    .cq-wcm-foundation-aria-visuallyhidden {
      display: block;
      height: 1px;
      width: 1px;
      overflow: hidden;
      position: absolute;
      top: -10px
    }

    .page-footer_content a {
      color: #00a1e0;
      cursor: pointer;
    }

    .page-footer_legal,
    .page-footer_links p {
      font-size: 11px;
    }

    .page-footer_links_list {
      padding: 0 0 7px;
      margin: 0;
    }

    .page-footer_links_item:first-child {
      margin-left: 0;
    }

    .page-footer_links_item {
      display: inline-block;
      margin: 0 20px 10.5px 0;
    }

    .page-footer_content a {
      color: #00a1e0;
      cursor: pointer;
    }