/* -------------------------------------
    RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */

table[class=body]{ 
  @media only screen and (max-width: $width+40) {   
    font-size: $body-font-size-sm !important;

    p,
    ul,
    ol {
      font-size: $body-font-size-sm !important;
      margin-bottom: 15px !important;
    }

    .et-btn {
      margin-bottom: 15px;
    }

    h1 {
      font-size: 1.3 * $body-font-size !important;
    }
    h2 {
      font-size: 1.2 * $body-font-size !important;
    }
    h3 {
      font-size: 1.1 * $body-font-size !important;
    }
    h4 {
      font-size: 1.05 * $body-font-size !important;
    }
    h5 {
      font-size: 0.9 * $body-font-size !important;
    }
    h6 {
      font-size: 0.85 * $body-font-size !important;
    }

    h1, h2 {
      margin-bottom: $body-font-size !important;
      margin-top: $body-font-size !important;
    }
  
    // Spacing
    .container, .content {
      width: 100% !important;
      max-width: 100% !important;
    }

    .content,
    .wrapper {
      padding: 10px !important;
    }

    .container {
      padding: 0 !important;
      width: 100% !important;
    }

    // Buttons
    .btn table,
    .btn a {
      width: 100% !important;
    }
  }
}
