<mj-attributes>
  <mj-raw><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700" rel="stylesheet" type="text/css"></link></mj-raw>
  <mj-text font-family="Open Sans, sans-serif" align="center" />
  <mj-button font-family="Open Sans, sans-serif" background-color="#FFFFFF" border-radius="4px" padding="0px" />
  <mj-image alt="" align="center" />
  <mj-class name="email" align="center" padding="24px" background-color="#FFFFFF" border-radius="8px" />
  <mj-class name="logo" width="132px" height="21.76px" padding="0px" />
</mj-attributes>

<mj-style>
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
  
  .emailBody {
    background:#F3F3F3 !important;
  }

  .emailBody a{
    text-decoration:none !important;
    color:#166DE0 !important;
  }

  .title div {
    font-weight:600 !important;
    font-size:28px !important;
    line-height:36px !important;
    letter-spacing:-0.02em !important;
    color:#3D3C40 !important;
  }

  .subTitle div {
    font-size:16px !important;
    line-height:24px !important;
    color:rgba(61, 60, 64, 0.64) !important;
  }

  .button a {
    background-color:#166DE0 !important;
    font-weight:600 !important;
    font-size:16px !important;
    line-height:18px !important;
    color:#FFFFFF !important;
    padding:15px 24px !important;
  }

  .info div {
    font-size:14px !important;
    line-height:20px !important;
    color:#3D3C40 !important;
    padding:40px 0px !important;
  }

  .footerTitle div {
    font-weight:600 !important;
    font-size:16px !important;
    line-height:24px !important;
    color:#3D3C40 !important;
    padding:0px 0px 4px 0px !important;
  }

  .footerInfo div {
    font-size:14px !important;
    line-height:20px !important;
    color:#3D3C40 !important;
    padding:0px 48px 0px 48px !important;
  }

  .footerInfo a {
    color:#166DE0 !important;
  }

  .appDownloadButton a{
    background-color:#FFFFFF !important;
    border:1px solid #166DE0 !important;
    box-sizing: border-box !important;
    color:#166DE0 !important;
    padding:13px 20px !important;
    font-weight:600 !important;
    font-size:14px !important;
    line-height:14px !important;
  }

  .emailFooter div {
    font-size:12px !important;
    line-height:16px !important;
    color:rgba(61, 60, 64, 0.56) !important;
    padding:8px 24px 8px 24px !important;
  }

  .postCard {
    padding:0px 24px 40px 24px !important;
  }

  .messageCard {
    background:#FFFFFF !important;
    border:1px solid rgba(61, 60, 64, 0.08) !important;
    box-sizing:border-box !important;
    box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12) !important;
    border-radius:4px !important;
    padding:32px !important;
  }

  .messageAvatar img {
    width:32px !important;
    height:32px !important;
    padding:0px !important;
    border-radius:32px !important;
  }

  .messageAvatarCol {
    width:32px !important;
  }

  .senderName div {
    text-align:left !important;
    font-weight:600 !important;
    font-size:14px !important;
    line-height:20px !important;
    color:#3D3C40 !important;
    padding:0px 0px 4px 0px !important;
  }

  .senderMessage div {
    text-align:left !important;
    font-size:14px !important;
    line-height:20px !important;
    color:#3D3C40 !important;
    padding:0px !important;
  }

  .senderInfoCol {
    width:394px !important;
    padding:0px 0px 0px 12px !important;
  }

  @media all and (min-width: 541px) {
    .emailBody {
      padding:32px !important;
    }
  }

  @media all and (max-width: 540px) and (min-width: 401px) {
    .emailBody {
      padding:16px !important;
    }

    .messageCard {
      padding:16px !important;
    }

    .senderInfoCol {
      width:80% !important;
      padding:0px 0px 0px 12px !important;
    }
  }

  @media all and (max-width: 400px) {
    .emailBody {
      padding:0px !important;
    }

    .footerInfo div {
      padding:0px !important;
    }

    .messageCard {
      padding:16px !important;
    }

    .postCard {
      padding:0px 0px 40px 0px !important;
    }
    
    .senderInfoCol {
      width:80% !important;
      padding:0px 0px 0px 12px !important;
    }
  }

</mj-style>
