/* import method for outlook */

    @font-face {
      font-family: 'Whitney';
      font-style: normal;
      font-weight: normal;
      src: local('Whitney'), url(https://cdn2.hubspot.net/hubfs/120237/assets/webfonts/Whitney-Medium-Pro.woff?t=1531933601338) format('woff');
    }

    @font-face {
      font-family: 'Whitney';
      font-style: normal;
      font-weight: 600;
      src: local('Whitney-Semi600'), url(https://cdn2.hubspot.net/hubfs/120237/assets/webfonts/Whitney-Semi600-Pro.woff?t=1531933601338) format('woff');
    }
    /* Style for the logo image */
    .preheader-logo {
        display: block; /* Ensures it's a block-level element */
        width: 80%; /* Set the width to 80% */
        height: auto; /* Allows the image to scale proportionally */
        max-height: 3%; /* Set the maximum height to 5% of the viewport height */
        margin: 0 auto; /* Centers the image horizontally */
    }
    
    /* Optional: Add some spacing around the logo */
    .preheader-logo-container {
        padding: 10px; /* Adjust as needed */
    }
  

    #outlook a {
      padding: 0;
    }

    .ReadMsgBody {
      width: 100%;
    }

    .ExternalClass * {
      line-height: 125% !important
    }

    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 125% !important;
    }

    body,
    table,
    td,
    p,
    a,
    li,
    blockquote {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    body {
      margin: 0;
      padding: 0
    }

    img {
      -ms-interpolation-mode: bicubic;
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }

    table {
      border-collapse: collapse !important;
    }

    body,
    #backgroundTable,
    #bodyCell {
      height: 100% !important;
      width: 100% !important;
      margin: 0;
      padding: 0;
    }

    a:link,
    a:visited {
      text-decoration: none;
      border-bottom: none;
    }

    .appleFooter a {
      color: #999999 !important;
      text-decoration: none !important;
    }

    .appleLink a {
      color: #ffffff !important;
      text-decoration: none !important;
    }

    /* Non-obligatory stuff */

    #bodyCell {
      padding: 75px 20px 20px;
    }

    #bl #bodyCell {
      padding: 20px 20px 0;
    }

    body,
    #backgroundTable {
      background-color: #fff;
      font-family: 'Whitney', system, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    }

    #bl #backgroundTable {
      background-color: #ffffff;
    }

    table td {
      font-family: 'Whitney', system, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    }

    table th {
      margin: 0 !important;
      vertical-align: middle;
      font-weight: normal;
    }

    #templateContainer {
      width: 600px;
      background-color: #ffffff;
    }

    #templateBody {
      background-color: #ffffff;
    }

    .templateContent {
      color: #444444;
      font-family: 'Whitney', system, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 20px;
      /* border-bottom:2px solid #1F8EED; */
      padding: 10px 115px 30px 115px;
    }

    .templateContent a:link,
    .templateContent a:visited,
    .templateContent a .yshortcuts {
      color: #1F8EED;
      text-decoration: none;
      border-bottom: none;
    }

    /* Sectioned Template Type, otherwise 115px */

    .templateContent.sections {
      padding-right: 70px;
      padding-left: 70px;
    }

    /* Blogletter Template Type */

    #bl .templateContent {
      border-bottom: none;
      padding: 20px 50px 0;
    }

    /* font family to all the things */

    body,
    table,
    td,
    p,
    a,
    a span,
    strong {
      font-family: 'Whitney', system, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
      text-decoration: none;
      border-bottom: none;
    }

    a {
      color: #1F8EED;
    }

    p {
      color: #444444;
      margin: 0;
      padding: 0;
      line-height: 24px;
      mso-line-height-rule: exactly;
    }

    p+p {
      margin-top: 20px;
    }

    p a {
      color: #1F8EED;
      font-weight: normal;
    }

    strong {
      font-weight: 600;
      letter-spacing: .25px;
    }

    span.preheader {
      display: none !important;
    }

    #templatetagline {
      background-color: #ffffff;
    }

    .tagline {
      /* border-top:2px solid #1F8EED; */
      padding-top: 30px;
    }

    #bl .tagline {
      border-top: none;
      padding-top: 15px;
    }

    .taglineContent {
      color: #1F8EED;
      font-size: 11px;
      line-height: 16px;
      font-weight: 600;
      letter-spacing: .2px;
    }

    .taglineContent a,
    .taglineContent a:link,
    .taglineContent a:visited,
    .taglineContent a .yshortcuts {
      color: #1F8EED;
      text-decoration: none;
      border-bottom: none;
    }

    .logo {
      padding-top: 20px;
      padding-bottom: 20px;
    }

    .footerLogo {
      padding-top: 35px;
      padding-bottom: 20px;
    }

    .headerContent {
      color: #1F8EED;
      font-size: 32px;
      line-height: 43px;
      padding: 0 20px 20px 20px;
      font-weight: 300;
    }

    #bl .headerContent {
      color: #161D25;
      font-size: 20px;
      line-height: 28px;
      font-weight: 600;
      padding-top: 30px;
    }

    .subheaderContent {
      color: #5B6B7F;
      font-size: 15px;
      line-height: 24px;
      padding: 0 20px 40px 20px;
    }

    .subheaderContent a {
      color: #1F8EED !important;
      text-decoration: none !important;
      border-bottom: none !important;
    }

    .ctaContent {
      padding-top: 35px;
      padding-bottom: 25px;
    }

    #bl .ctaContent {
      padding-top: 25px;
    }

    .footer {
      border-top: 1px solid #efefef;
      padding-right: 20px;
      padding-left: 20px;
    }

    #bl .footer {
      padding: 30px 20px 30px;
    }

    #footerSettings {
      background-color: #F4F6F8;
    }

    #bl #footerSettings {
      background-color: #F9F9F9;
    }

    .footerContent,
    .footerSettingsContent {
      color: #9ca8b7;
      font-size: 12px;
      line-height: 18px;
      text-align: center;
    }

    .footerSettingsContent a:link,
    .footerSettingsContent a:visited,
    .footerSettingsContent a .yshortcuts {
      color: #1F8EED;
      text-decoration: none;
    }

    #bl .footerSettingsContent a:link,
    #bl .footerSettingsContent a:visited,
    #bl .footerSettingsContent a .yshortcuts {
      color: ;
      text-decoration: underline;
    }

    .footer a.socialMediaIcon {
      padding-right: 5px;
    }

    /* Call Out Banner styles */

    #calloutBanner {
      background-color: #1F8EED;
    }

    .templateContent.callout {
      padding-right: 70px;
      padding-left: 70px;
      border-bottom: 2px solid #363945;
    }

    .calloutHeader,
    .calloutHeader a {
      color: #ffffff;
      font-size: 18px;
      line-height: 26px;
      font-weight: 600;

      letter-spacing: 1px;
    }

    .calloutContent,
    .calloutContent p {
      color: #ffffff;
    }

    /* Letter styles */

    .letterContent {
      color: #1F8EED;
      font-size: 16px;
      line-height: 24px;
      padding-top: 30px;
    }

    /* Letter styles if no template image */

    .letterContent.no-image {
      padding-top: 0px;
    }

    /* Section 123 styles */

    .sectionsWrapper {
      margin-bottom: 20px;
    }

    .sectionHeader,
    .sectionHeader a {
      color: #1F8EED;
      font-size: 12px;
      line-height: 20px;
      font-weight: 600;

      letter-spacing: 1px;
    }

    .sectionContent {
      color: #5B6B7F;
      font-size: 13px;
      line-height: 19px;
      font-weight: normal;
      padding: 10px 0 5px 0;
    }

    .sectionContent a {
      color: #1F8EED;
    }

    .section1 {
      /* background-color:#F3F9FE; */
    }

    .section2 {
      /* background-color:#DDF9F1; */
    }

    .section3 {
      /* background-color:#F3F0FE; */
    }

    .section4 {
      background-color: #FFF2F7;
    }

    .sectionImage {
      padding: 35px 0px 30px;
    }

    .sectionBody {
      padding: 35px 0 30px 30px;
    }

    /* Indented section contents */

    .paddedContent {
      padding: 0 25px;
      border-top: 1px solid #efefef;
    }

    .paddingBottom {
      padding-bottom: 30px;
    }

    /* Blog post styles */

    .blogpostContent,
    .featuredPostContent {
      color: ;
      font-size: 14px;
      line-height: 20px;
      padding-top: 30px;
    }

    .blogTopic,
    .blogAuthor,
    .blogletterTitle,
    .featuredPostHeader,
    .featuredPostHeader a {
      font-size: 16px;
      line-height: 22px;
      font-weight: 600;
    }

    .blogAuthor {
      color: ;
    }

    .blogletterTitle,
    .featuredPostHeader,
    .featuredPostHeader a {
      color: ;
    }

    .blogletterTitle {
      padding: 30px 0 20px;
    }

    .blogletterDescription {
      padding: 0 0 20px;
      color: ;
    }

    /* Featured Post Styles */

    .featuredPostsWrapper {
      margin-bottom: 20px;
    }

    .featuredPostContent {
      padding: 10px 0 5px 0;
    }

    .featuredPostContent p {
      color: ;
      font-size: 13px;
      line-height: 20px;
      font-weight: normal;
    }

    .featuredPostContent p+p {
      margin-top: 10px;
    }

    .featuredPostContent a {
      color: #1F8EED;
    }

    a.featuredPostReadMore {
      font-weight: 600;
    }

    .featuredPostImage {
      padding: 0 0 40px;
    }

    .featuredPostBody {
      padding: 0 0 40px 25px;
    }

    /* Editors post styles */

    .rectangleBorder {
      border-collapse: separate;
      border: 1px solid #efefef;
      -moz-border-radius: 4px;
      border-radius: 4px;
      padding: 0 25px;
    }

    .editorsPost {
      border-bottom: 1px solid #efefef;
      padding: 25px 0 20px;
    }

    .editorsPostHeader,
    .editorsPostReadMoreLink {
      color: ;
      font-size: 14px;
      line-height: 21px;
      font-weight: 600;
    }

    a.editorsPostReadMoreLink {
      color: #1F8EED;
    }

    .editorsPostSource {
      color: ;
      font-size: 12px;

      padding-top: 5px;
    }

    .editorsPostSource a:-webkit-any-link {
      color: inherit !important;
    }

    /* Editor Bios */

    .editor {
      padding-bottom: 20px;
    }

    .editorBio {
      color: ;
      font-size: 14px;
      line-height: 21px;
      padding: 5px 0 25px;
    }

    .editorImage {
      padding-right: 20px;
    }

    .editorContent {
      font-size: 12px;
      line-height: 16px;
    }

    .editorTitle {
      color: ;
    }

    /* Modifiers */

    .no-border {
      border-top: none;
      border-bottom: none;
    }
  </style>
  <style type="text/css">
    @media screen and (min-width:600px) {
      .desktop-hide {
        display: none !important;
      }
    }

    @media screen and (max-width:650px) {
      #backgroundTable {
        width: 100% !important;
        min-width: 100% !important;
      }
      #templateContainer {
        max-width: 600px !important;
        width: 100% !important;
        min-width: 100% !important;
      }
    }

    @media only screen and (max-width:520px) {
      body,
      table,
      td,
      p,
      a,
      li,
      blockquote {
        -webkit-text-size-adjust: none !important;
      }
      body {
        width: 100% !important;
        min-width: 100% !important;
      }
      #bodyCell {
        padding: 0 !important;
      }
      .tagline {
        border-top: 0 !important;
        padding-top: 20px !important;
      }
      .templateContent {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }
      .headerContent {
        font-size: 28px !important;
        line-height: 38px !important;
      }
      #bl .headerContent {
        font-size: 18px !important;
        line-height: 24px !important;
        padding-top: 10px !important;
      }
      .subheaderContent {
        padding-bottom: 25px !important;
      }
      .sectionHeader,
      .sectionContent {
        text-align: center !important;
      }
      .letterContent {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .calloutHeader {
        padding-top: 30px !important;
      }
      .ctaContent.callout {
        padding-bottom: 10px !important;
      }
      .footerContent,
      .footerSettingsContent {
        font-size: 12px !important;
      }
      a.mobile-button {
        font-size: 14px !important;
      }
      .mob-column {
        float: none !important;
        display: block !important;
        width: 100% !important;
      }
      .featuredPostImage img,
      .blogpostImage img {
        width: 100% !important;
        max-height: 100% !important;
      }
      .mob-hide {
        display: none !important;
      }
      .mob-center {
        text-align: center !important;
      }
      .paddedContent {
        padding: 0 !important;
      }
      .paddedContent.mob-no-border {
        border-top: none !important;
      }
      .paddedContent.paddingBottom {
        padding-bottom: 30px !important;
      }
      td.templateContent.sections,
      .sectionImage,
      .sectionBody,
      .featuredPostBody,
      .featuredPostImage {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .sectionImage {
        padding-top: 30px !important;
        padding-bottom: 0 !important;
      }
      .sectionBody {
        padding-top: 15px !important;
      }
      .featuredPostBody {
        padding-bottom: 30px !important;
      }
      .featuredPostImage {
        padding-bottom: 20px !important;
      }
      .featuredPostContent {
        padding-top: 5px !important;
      }
      .editorsPostContent {
        width: 90% !important;
      }
      .editorsPostReadMore {
        width: 10% !important;
      }
      .blogTopic,
      .blogAuthor,
      .blogletterTitle,
      .featuredPostHeader,
      .featuredPostHeader a {
        font-size: 14px !important;
        line-height: 20px !important;
      }
      .paddingBottom {
        padding-bottom: 30px !important;
      }
    }

    @media only screen and (max-width:440px) {
      p.smallText {
        font-size: 13px !important;
      }
    }