@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
  /* === desktop styling === */

  body {
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
  }

  img {
    display: block;
    border: 0;
    vertical-align: bottom;
  }

  ul,
  li {
    margin: 0;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    vertical-align: top;
  }

  p {
    padding: 0;
    margin: 0;
  }

  .snippet {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #444444;
    font-weight: 600;
    font-size: 14px;
  }

  .snippetColors {
    background-color: #f6f6f6;
  }

  .title-20 {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #444444;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }

  .title-16 {
    font-family: 'Open Sans','Arial', sans-serif;
    color: #444444;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
  }

  .title-14 {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #444444;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
  }

  .whiteTitle-20 {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
  }

  .greenTitle-30 {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #04a64a;
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
  }

  .greenTitle-30 a {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #04a64a;
    font-weight: 700;
    font-size: 30px;
    text-decoration: none;
  }

  .text {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #444444;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
  }

  .productSpec {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #444444;
    font-weight: 400;
    font-size: 12px;
    font-style: italic;
    line-height: 14px;
  }

  .priceBefore {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #444444;
    font-weight: 600;
    font-size: 12px;
    font-style: italic;
    text-decoration: line-through;
  }

  .priceAfter {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #A72886;
    font-weight: 700;
    font-size: 20px;
  }

  .whiteLink,
  .whiteLink a {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
  }

  .greenLink,
  .greenLink a {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #04a64a;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    font-style: italic;
  }

  .disclosureText {
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #444444;
    font-weight: 400;
    font-size: 11px;
    text-decoration: none;
  }

  /* use this class on elements that need to be hidden on desktop, but have to be visible on mobile. Add this class on the td's */

  .mobile,
  .mobile img {
    display: none;
    max-height: 0;
    font-size: 0;
    line-height: 0;
    float: left;
    mso-hide: all;
    overflow: hidden!important;
    width: 0;
    height: 0;
    visibility: hidden;
  }

  a.fullWidthButton {
    display: block;
    height: 30px;
    width: 100%;
    line-height: 240%;
    background-color: #A72886;
    border-radius: 3px;
    font-family: 'Open Sans', 'Arial', sans-serif;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
  }

  /* === mobile stying === */

  @media only screen and (max-width: 600px) {
    /* use this class on elements that need to be hidden on desktop, but have to be visible on mobile. Add this class on the td's */
    .mobile,
    .mobile img {
      display: table!important;
      max-height: none!important;
      line-height: normal!important;
      float: none!important;
      width: 100%!important;
      height: auto!important;
      visibility: visible!important;
    }
    /* use this class on elements that need to be visible on desktop, but have to be hidden on mobile. Add this class on the td's */
    .desktop,
    .desktop img {
      display: none!important;
      max-height: 0!important;
      font-size: 0!important;
      line-height: 0!important;
      float: left;
      mso-hide: all;
      overflow: hidden!important;
      width: 0;
      height: 0;
      visibility: hidden;
    }
    /*  use these classes to reset width on mobile view */
    .responsive-width {
      width: 100%!important;
      height: auto!important;
    }
    .responsive-width-90 {
      width: 90%!important;
      height: auto!important;
    }
    .responsive-image,
    .responsive-image img {
      width: 100%!important;
      height: auto!important;
    }
    .column {
      float: left!important;
      width: 100%!important;
    }
    .snippet {
      color: #ffffff!important;
    }
    .snippetColors {
      background-color: #04a64a!important;
    }
    .centerItem img {
      margin: 0 auto!important;
    }
  }