/*  
 *  Micódigo MX Main Stylesheet
 *  March, 2025
 *  Edited: Help center - May, 2025
 *  All rights reserved.
 *
 *  
 *  Index:
 *   - Definition: Body;
 *   - Definition: Color classes;
 *   - Definition: Estructure;
 *   - Definition: Typography;
 *   - Definition: Buttons;
 *
 *   - Page: Home;
 *   - Page: Prices;
 *   - Page: Contact;
 *   - Page: Privacy;
 *   - Page: System;
 *   - Page: Help - index;
 *   - Page: Help - search;
 *   - Page: Help - question;
*/

:root {
    --MCMX-10: #E0F5F1;
    --MCMX-20: #CCEFE8;
    --MCMX-30: #98DFD1;
    --MCMX-40: #65CEBB;
    --MCMX-50: #32BEA4;
    --MCMX-60: #008575;
    --MCMX-70: #025F54;
    --MCMX-80: #04463E;
    --MCMX-Blue-Deep: #002f5b;
    --MCMX-Blue-King: #0066C4;

    --MCMX-White: #FFFFFF;
    --MCMX-Dark: #333333;
    --MCMX-Gray-10: #f4f7f7;
    --MCMX-Gray-20: #E7EBEC;
    --MCMX-Gray-30: #C1C7D0;
    --MCMX-Gray-40: #97A0AF;
    --MCMX-Gray-50: #606164;

    --MCMX-Success: #109E54;
    --MCMX-Error: #DF3330;
    --MCMX-Warning: #F8C81F;
    --MCMX-Success-BG: #D2FDE7;
    --MCMX-Error-BG: #FFE2E1;
    --MCMX-Warning-BG: #FFF1BE;

    --MCMX-gradient-green: linear-gradient(90deg, #008575 0%, #025F54 100%);
    --MCMX-gradient-blue: linear-gradient(180deg, #008575 0%, #002F5B 100%);
    --shadow-linear: 0px 1px 3px rgba(190,201,212, .40);
    --shadow-medium: 0px 3px 8px rgba(28,28,28, .20);
    --shadow-large: 2px 6px 16px rgba(85,89,94, .20);
    --focus: 0px 0px 6px rgba(101,206,187, .30);
}

/* "Kids, you tried your best and you failed miserably. The lesson is, never try."
    - Homer Simpson
 */


/* ==========================================
 * Definition: Body;
 * ========================================== */
html {
    position: relative;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: default;
    color: var(--MCMX-Dark);
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
    background-color: var(--MCMX-White);
}


/* ==========================================
 * Definition: Color classes;
 * ========================================== */
/* ---- Text color ---- */
.text-10 { color: var(--MCMX-10); }
.text-20 { color: var(--MCMX-20); }
.text-30 { color: var(--MCMX-30); }
.text-40 { color: var(--MCMX-40); }
.text-50 { color: var(--MCMX-50); }
.text-60 { color: var(--MCMX-60); }
.text-70 { color: var(--MCMX-70); }
.text-80 { color: var(--MCMX-80); }
.text-blue-deep { color: var(--MCMX-Blue-Deep); }
.text-blue-king { color: var(--MCMX-Blue-King); }
.text-gray-10 { color: var(--MCMX-Gray-10); }
.text-gray-20 { color: var(--MCMX-Gray-20); }
.text-gray-30 { color: var(--MCMX-Gray-30); }
.text-gray-40 { color: var(--MCMX-Gray-40); }
.text-gray-50 { color: var(--MCMX-Gray-50); }

/* ---- Background color ---- */
.bg-10 { background-color: var(--MCMX-10); }
.bg-gray-10 { background-color: var(--MCMX-Gray-10); }
.bg-success { background-color: var(--MCMX-Success-BG); }
.bg-error { background-color: var(--MCMX-Error-BG); }
.bg-warning { background-color: var(--MCMX-Warning-BG); }
.bg-gradient-green { background: var(--MCMX-gradient-green)!important; }
.bg-gradient-blue { background: var(--MCMX-gradient-blue)!important; }


/* ==========================================
 * Definition: Estructure;
 * ========================================== */
/* ---- BOOTSTRAP: PADDING ---- */
.pt-10 { padding-top: 6rem !important; }
.pb-10 { padding-bottom: 6rem !important; }
.py-10 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-8 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (max-width: 991px) {
    .pt-10 { padding-top: 4.5rem !important; }
    .pb-10 { padding-bottom: 4.5rem !important; }
    .py-10 {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

/* ---- BOOTSTRAP: BG IMAGE ---- */
.bg-img-cover {
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ---- MAGICSCROLL: FADE ANIMATION ---- */
.animate {
    opacity: 0;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.animate.left {
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px);
}
.animate.right {
    -webkit-transform: translateX(102%);
    -moz-transform: translateX(102%);
    -ms-transform: translateX(102%);
    -o-transform: translateX(102%);
    transform: translateX(102%);
}
.animate.visible {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}


/* ==========================================
 * Definition: Typography;
 * ========================================== */
h1 {
    margin: 0;
    font-size: 64px;
    line-height: 74px;
    font-weight: 700;
    font-family: 'Lexend', sans-serif;
}
h1.small { font-size: 40px; line-height: 48px; }
@media all and (max-width: 767px) {
    h1 { font-size: 40px; line-height: 48px; }
}
h2 {
    margin: 0;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    font-family: 'Lexend', sans-serif;
}
@media all and (max-width: 767px) {
    h2 { font-size: 28px; line-height: 32px; }
}
h3 {
    margin: 0;
    font-size: 26px;
    line-height: 36px;
    font-weight: 800;
    font-family: 'Lexend', sans-serif;
}
h4 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    font-family: 'Lexend', sans-serif;
}
@media all and (max-width: 767px) {
    h4 { font-size: 20px; line-height: 24px; }
}
h5 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    font-family: 'Lexend', sans-serif;
}
@media all and (max-width: 767px) {
    h5 { font-size: 16px; line-height: 22px; }
}
h6 {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    font-family: 'Lexend', sans-serif;
}
p, ul { margin: 0; }
p, ul li {
    font-size: 20px;
    line-height: 26px;
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
}
@media all and (max-width: 767px) {
    p, ul li { font-size: 16px; line-height: 22px; }
}
.text-small {
    font-size: 12px!important;
    line-height: 18px!important;
}
.text-medium {
    font-size: 16px!important;
    line-height: 22px!important;
}

.material-symbols-rounded {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    font-size: 20px;
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}


/* ==========================================
 * Definition: Buttons;
 * ========================================== */
/* ---- SECTION: ANCHORS; ---- */
a:not(.button),
a:not(.button):visited {
    display: inline-block;
    margin: 0;
    color: var(--MCMX-60);
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}
a:not(.button):not(.disabled):active,
a:not(.button):not(.disabled):hover {
    color: var(--MCMX-70);
    text-decoration: underline;
}
a.disabled { opacity: .5; cursor: not-allowed; }
a:focus,
a:focus-visible {
    outline: var(--MCMX-20) auto 1px !important;
    box-shadow: var(--focus); !important;
}

/* ---- SECTION: BUTTONS; ---- */
.button {
    position: relative;
    display: inline-block;
    margin: 0;
    min-width: 120px;
    padding: 8px 16px;

    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    text-decoration: none;

    border: 2px solid transparent;
    border-radius: 12px;
    transition: 0.3s;
}
.button:hover { text-decoration: none!important; }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button:focus,
.button:focus-visible {
    outline: var(--MCMX-20) auto 1px !important;
    box-shadow: var(--focus); !important;
}

/* ---- Filled ---- */
.button.button-primary { color: var(--MCMX-White); background-color: var(--MCMX-60); }
.button.button-primary:not(:disabled):hover { color: var(--MCMX-White); background-color: var(--MCMX-70); }
.button.button-secondary { color: var(--MCMX-White); background-color: var(--MCMX-Blue-Deep); }
.button.button-secondary:not(:disabled):hover { color: var(--MCMX-White); background-color: #305272; }

/* ---- Linear ---- */
.button.button-primary-linear {
    color: var(--MCMX-60);
    background-color: transparent;
    border-color: var(--MCMX-60);
}
.button.button-primary-linear:not(:disabled):hover {
    color: var(--MCMX-60);
    background-color: rgba(0,133,117,.1);
    border-color: var(--MCMX-60);
}


/* ==========================================
 * Page: Home;
 * ========================================== */
/* ---- SECTION: HERO ---- */
#hero .shape {
  position: relative;
  bottom: -48px;
  height: 40px;
  overflow: hidden;
}
#hero .shape::before {
  position: absolute;
  content: '';
  right: -80px;
  left: -80px;
  bottom: -80px;
  top: 0;
  background: var(--MCMX-gradient-green);
  border-radius: 100%;
}

/* ---- SECTION: INTRO ---- */
#intro img { max-width: 200px; }
#intro .icon-arrow {
    display: block;
    text-align: center;
    font-size: 48px;
}

/* ---- SECTION: EXAMPLE ---- */
#example img { max-width: 500px; }

/* ---- SECTION: SERVICES ---- */
#services img { display: block; max-width: 280px; margin: 0 auto; }
@media (max-width: 991px) {
    #services img { max-width: 160px; margin: 0 0 24px; }
    #services .animate-responsive .animate:not(.visible).right {
        -webkit-transform: translateX(-40px);
        -moz-transform: translateX(-40px);
        -ms-transform: translateX(-40px);
        -o-transform: translateX(-40px);
        transform: translateX(-40px);
    }
    #services .animate-responsive .animate:not(.visible).left {
        -webkit-transform: translateX(102%);
        -moz-transform: translateX(102%);
        -ms-transform: translateX(102%);
        -o-transform: translateX(102%);
        transform: translateX(102%);
    }
}

/* ---- SECTION: DOC INTEGRATION ---- */
#document .doc-card {
    padding: 40px;
    border: 2px solid var(--MCMX-50);
    border-radius: 32px;
}
#document .doc-card img { max-width: 160px; }
@media (max-width: 991px) {
    #document .doc-card { padding: 24px 40px; }
}
@media (max-width: 575px) {
    #document .doc-card img { max-width: 120px; margin-bottom: 24px }
}

/* ---- SECTION: FAQ ---- */
#faq .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--MCMX-60);
    border-radius: 0;
}
#faq .accordion-button {
    padding: 24px 0;
    color: var(--MCMX-Blue-Deep);
    font-size: 28px;
    line-height: 34px;
    background-color: transparent;
    box-shadow: none;
}
#faq .accordion-item:first-child .accordion-button { padding-top: 0; }
#faq .accordion-button:not(.collapsed)::after,
#faq .accordion-button::after {
    background-image: url(https://www.micodigomx.com/hubfs/MiCodigoMX%202025/icon_arrow_down.png)!important;
    width: 32px;
    height: 32px;
    background-size: contain;
}
#faq .accordion-body {
    padding: 0 0 24px;
    color: var(--MCMX-Blue-Deep);
}
#faq .accordion-body p a {
    font-size: 20px;
    line-height: 24px;
    text-decoration: underline;
}
@media all and (max-width: 767px) {
    #faq .accordion-button { font-size: 20px; line-height: 24px; }
    #faq .accordion-body p a {
        font-size: 16px;
        line-height: 22px;
    }
}

/* ---- SECTION: CONTACT OPTIONS ---- */
#contact-options:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 5%;
    width: 45%;
    height: 100%;
    background-image: url(https://www.micodigomx.com/hubfs/MiCodigoMX%202025/mcmx_pattern.png);
    background-attachment: scroll;
    background-position: top right;
    background-size: cover;
    background-repeat: repeat-y;
    z-index: 1;
}
@media all and (max-width: 991px) {
    #contact-options:after { width: 100%; left: 0%!important; }
}
.ctc-card {
    padding: 32px 40px;
    background-color: var(--MCMX-White);
    border-radius: 32px;
}
.ctc-card .ctc-icon {
    display: inline-block;
    padding-top: 12px;
    width: 48px;
    height: 48px;
    color: var(--MCMX-White);
    background-color: var(--MCMX-60);
    text-align: center;
    border-radius: 50%;
}
.ctc-card .ctc-icon.whats { padding-top: 10px; background-color: #25D366; }
.ctc-card .ctc-icon span { font-size: 24px; }
.ctc-card .ctc-icon img { width: 24px; }

@media all and (max-width: 1199px) {
    .ctc-card {
        padding: 24px 16px;
        border-radius: 24px;
    }
}
@media all and (min-width: 992px) and (max-width: 1200px) {
    .ctc-card .col-9 {
        padding: 0!important;
    }
}


/* ==========================================
 * Page: Prices;
 * ========================================== */
/* ---- PRICES: CARD ACTIVE ---- */
.card-white {
    height: 100%;
    padding: 24px;
    background-color: var(--MCMX-White);
    box-shadow: var(--shadow-large);
    border-radius: 32px;
}
.card-white p,
.card-white ul li { font-size: 16px; line-height: 20px; }
.card-white a:not(.button) { font-size: 14px; line-height: 18px; }
.card-white .tag {
    display: inline-block;
    padding: 8px 16px;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    color: var(--MCMX-60);
    background-color: var(--MCMX-10);
    border-radius: 24px;
}
.card-white .price-amount {
    font-size: 56px;
    line-height: 72px;
    font-weight: 500;
    color: var(--MCMX-Blue-Deep);
}
.card-white .price-amount span {
    display: inline-block;
    padding-left: 4px;
    font-size: 18px;
    line-height: 22px;
}
.card-white .price-list-title {
    font-weight: 600;
    color: var(--MCMX-Gray-40);
}
.card-white .price-list { list-style-type: none; }
.card-white .price-list li { position: relative; }
.card-white .price-list li:before {
  position: absolute;
  left: -32px;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(https://www.micodigomx.com/hubfs/MiCodigoMX%202025/icon-check.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---- PRICES: CARD DISABLED ---- */
.card-white.card-disabled {
    background-color: #D9E4E8;
    border: 2px dashed var(--MCMX-Gray-40);
}
.card-white.card-disabled p,
.card-white.card-disabled ul li { color: var(--MCMX-Gray-40); }
.card-white.card-disabled .tag {
    opacity: 0.7;
}
.card-white.card-disabled .price-list li:before {
    opacity: 0.7;
}


/* ==========================================
 * Page: Contact;
 * ========================================== */
/* ---- SECTION: CONTACT FORMS ---- */
form .hs-form-field { margin: 0 0 16px; }

/* ---- Labels ---- */
form label {
    display: block;
    margin: 0;
    padding: 0 0 4px;
    color: var(--MCMX-Dark);
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
}
form .hs-form-required { padding-left: 4px; color: var(--MCMX-Error); }

/* ---- Main input style and textbox ---- */
form .input .hs-input {
    min-width: 95%;
    margin: 0;
    padding: 6px 12px!important;

    color: var(--MCMX-Dark);
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    background-color: var(--MCMX-White);
    border: 1px solid var(--MCMX-Gray-40);
    border-radius: 8px;
}
form .input textarea.hs-input {
    min-height: 100px;
    resize: none;
}
form .input .hs-input::placeholder {
    color: var(--MCMX-Gray-40);
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
}
form .input .hs-input:not(:disabled):focus,
form .input .hs-input:not(:disabled):active {
    border-color: var(--MCMX-60)!important;
    outline: 0;
    box-shadow: var(--focus);
}
form .input .hs-input:disabled,
form .input input.hs-input:read-only,
form .input .hs-input:read-only:focus {
    background-color: var(--MCMX-Gray-10);
    outline: 0;
    cursor: default;
}
form .input .hs-input:read-only:active {
    background-color: var(--MCMX-Gray-10);
}
form input:-internal-autofill-selected {
    background-color: var(--MCMX-10);
}

/* ---- Input error ---- */
form .input .hs-input.error,
form .input .hs-input.error:not(:disabled):active,
form .input .hs-input.error:not(:disabled):focus {
    border-color: var(--MCMX-Error);
}
form .hs-error-msgs {
    padding: 0;
    margin-top: 4px;
    list-style-type: none;
}
form .hs-error-msgs label {
    color: var(--MCMX-Error);
    font-size: 12px;
    line-height: 18px;
    font-weight: 300;
    background-color: transparent;
}

/* ---- Submit button ---- */
form input[type="submit"] {
    position: relative;
    display: block;
    margin: 32px 0 0;
    width: 100%;
    padding: 8px 12px;

    color: var(--MCMX-White);
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    text-decoration: none;

    background-color: var(--MCMX-60);
    border: none;
    border-radius: 12px;
    transition: 0.3s;
}
form input[type="submit"]:hover,
form input[type="submit"]:active {
    color: var(--MCMX-White);
    background-color: var(--MCMX-70);
}
form input[type="submit"]:focus,
form input[type="submit"]:focus-visible {
    outline: var(--MCMX-20) auto 1px !important;
    box-shadow: var(--focus); !important;
}

/* ---- Alert ---- */
.hbspt-form .submitted-message {
    max-width: 640px;
    margin: 32px auto;
    padding: 48px 24px;
    text-align: center;
}
.hbspt-form .submitted-message h5 {
    margin: 16px 0 8px;
    font-weight: 700;
}
.hbspt-form .submitted-message p {
    font-size: 18px;
    line-height: 24px;
}
@media (max-width: 767px) {
    .hbspt-form .submitted-message { padding: 32px 24px; }
}

.hs_error_rollup {
    margin-top: 40px;
    padding: 16px 24px;
}
.hs_error_rollup ul { margin-bottom: 0!important; }
.hs_error_rollup  .hs-error-msgs label {
    font-size: 14px;
    font-weight: 300;
}


/* ==========================================
 * Page: Privacy;
 * ========================================== */
#privacy-content p,
#privacy-content ul li {
    font-size: 16px!important;
    line-height: 22px!important;
}/*
#privacy-content a,
#privacy-content a:visited { color: var(--MCMX-Error); }
#privacy-content a:hover,
#privacy-content a:active { color: #C31411; }*/

#privacy-content p:not(:last-child),
#privacy-content ul {
    margin-bottom: 16px!important;
}

@media all and (min-width: 768px) {
    #privacy-content a,
    #privacy-content a:visited {
      font-size: 16px!important;
      line-height: 22px!important;
    }
}


/* ----- ACTUALIZACIÓN MAYO 2025 ----- */

/* ==========================================
 * Definition: System;
 * ========================================== */
/* ---- SECTION: SYSTEM ERROR PAGES ---- */
.help-error-img {
    display: block;
    margin: 0 auto;
    width: 90%;
    max-width: 150px;
}

/* ---- SECTION: PASSWORD REQUIRED ---- */
.pass-container { max-width: 420px; margin: 0 auto; }
.pass-container input[type="password"] {
    height: auto!important;
    margin: 0!important;
    padding: 12px;
    width: 100%;
    color: var(--MCMX-Dark);
    font-size: 16px;
    border: 1px solid var(--MCMX-Gray-40);
    border-radius: 8px;
}
.pass-container input[type="password"]::placeholder {
    color: var(--MCMX-Gray-50);
}
.pass-container input[type="password"]:focus,
.pass-container input[type="password"]:active {
    border-color: var(--MCMX-60)!important;
    outline: 4px solid rgba(101,206,187, .30);
    box-shadow: var(--focus);
}

.pass-container form input[type="submit"] { font-size: 16px!important; }


/* ==========================================
 * Definition: Help - index;
 * ========================================== */
/* ---- SECTION: SEARCH BAR ---- */
#help-search { padding: 150px 24px 80px; }
#help-search .search-bar {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 420px;
}

/* ---- SECTION: CATEGORIES LIST ---- */
.card.cate-card,
.help-card {
    height: 100%;
    padding: 24px;
    color: var(--MCMX-Dark);
    background-color: var(--MCMX-White);
    border: none;
    border-radius: 16px;
}
.help-card .card-header {
    padding: 0 0 24px;
    background-color: transparent;
    border: none;
}
.help-card img.cate-icon {
    display: inline-block;
    width: 40px;
}
.help-card .card-body {
    background-color: transparent;
    border: none;
}
.help-card .card-body p:not(:last-child) { margin-bottom: 8px; }
.help-card .card-body p a {
    color: var(--MCMX-Blue-King)!important;
    font-size: 16px!important;
    line-height: 22px!important;
    font-weight: 400!important;
    transition: 0.1s!important;
}
.help-card .card-body p a:hover,
.help-card .card-body p a:active {
    color: var(--MCMX-Blue-King)!important;
    font-weight: 500!important;
}

/* ---- SECTION: CONTACT ---- */
#help-contact .row {
    padding: 16px 12px;
    border: 1px solid var(--MCMX-30);
    border-radius: 16px;
}
#help-contact .row img { width: 100%; max-width: 160px; }


/* ==========================================
 * Definition: Help - search;
 * ========================================== */
/* ---- SECTION: SEARCH RESULTS LIST ---- */
#help-search .search-list li:not(:last-child) { margin-bottom: 32px; }
#help-search .result-category span.material-symbols-rounded {
    font-size: 18px!important;
}
#help-search .result-link {
    font-size: 20px;
    line-height: 28px;
    text-decoration: underline;
}
#help-search .search-empty img { width: 90%; max-width: 120px; }


/* ==========================================
 * Definition: Help - article;
 * ========================================== */
#help-article { padding: 96px 0 48px; }
.article-divider {
    margin: 24px 0 0;
    width: 100%;
    height: 1px;
    border: none;
    background-color: var(--MCMX-Gray-30);
}

/* ---- SECTION: ARTICLE CONTENT ---- */
#help-article-content p,
#help-article-content ul li,
#help-article-content ol li {
    font-size: 16px!important;
    line-height: 22px!important;
}
#help-article-content h1,
#help-article-content h2,
#help-article-content h3,
#help-article-content h4:not(.article-title),
#help-article-content h5,
#help-article-content h6 {
    margin-top: 40px;
    margin-bottom: 16px;
}
#help-article-content strong { font-weight: 700!important; }
#help-article-content p { margin: 16px 0; }
#help-article-content ul,
#help-article-content ol { margin: 16px 0; }
#help-article-content ul li:not(:last-child),
#help-article-content ol li:not(:last-child) {
    margin-bottom: 8px;
}
#help-article-content img {
    display: block;
    margin: 32px auto;
    width: 90%;
    max-width: 90%!important;
}
@media all and (min-width: 768px) {
  #help-article-content img {
      max-width: 600px!important;
  }
}