/* Divi Mobi First - Intentional Scroll Utilities
 * Updated in 2.47.0. Scroll is now activated per breakpoint by the selected
 * item-width class. Example: dmf-scroll-columns + dmf-scroll-tablet-70 +
 * dmf-scroll-phone-80 scrolls only on tablet and phone; desktop remains normal.
 */

.dmf-scroll-columns,
.dmf-scroll-modules {
  --dmf-scroll-width: 80%;
  --dmf-scroll-gap: 24px;
  --dmf-scroll-snap-align: start;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: auto;
}

/* Snap and scrollbar helpers. These only become meaningful when a breakpoint
 * scroll-width class activates the scroll track.
 */
.dmf-scroll-snap-start { --dmf-scroll-snap-align: start; scroll-snap-type: x mandatory; }
.dmf-scroll-snap-center { --dmf-scroll-snap-align: center; scroll-snap-type: x mandatory; }
.dmf-scrollbar-hide { scrollbar-width: none; }
.dmf-scrollbar-hide::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Gap helpers. */
.dmf-scroll-gap-none { --dmf-scroll-gap: 0px; }
.dmf-scroll-gap-small { --dmf-scroll-gap: 12px; }
.dmf-scroll-gap-medium { --dmf-scroll-gap: 24px; }
.dmf-scroll-gap-large { --dmf-scroll-gap: 36px; }

/* Common activated scroll track rules. These are intentionally wrapped inside
 * breakpoint media queries below so that a view with no selected width stays
 * as Divi's normal layout.
 */
@media (min-width: 981px) {
  .dmf-scroll-desktop-20 { --dmf-scroll-width: 20%; }
  .dmf-scroll-desktop-25 { --dmf-scroll-width: 25%; }
  .dmf-scroll-desktop-30 { --dmf-scroll-width: 30%; }
  .dmf-scroll-desktop-35 { --dmf-scroll-width: 35%; }
  .dmf-scroll-desktop-40 { --dmf-scroll-width: 40%; }
  .dmf-scroll-desktop-45 { --dmf-scroll-width: 45%; }
  .dmf-scroll-desktop-50 { --dmf-scroll-width: 50%; }
  .dmf-scroll-desktop-60 { --dmf-scroll-width: 60%; }
  .dmf-scroll-desktop-70 { --dmf-scroll-width: 70%; }
  .dmf-scroll-desktop-80 { --dmf-scroll-width: 80%; }
  .dmf-scroll-desktop-90 { --dmf-scroll-width: 90%; }
  .dmf-scroll-desktop-100 { --dmf-scroll-width: 100%; }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-desktop-"],
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-desktop-"],
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-desktop-"],
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-desktop-"] {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--dmf-scroll-width) !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    column-gap: var(--dmf-scroll-gap) !important;
    row-gap: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity;
  }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-desktop-"]::after,
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-desktop-"]::after,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-desktop-"]::after,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-desktop-"]::after { display: none !important; content: none !important; }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-desktop-"] > .et_pb_column,
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-desktop-"] > .et_pb_column,
  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-desktop-"] > [class*="et_pb_column_"],
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-desktop-"] > [class*="et_pb_column_"] {
    width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important; scroll-snap-align: var(--dmf-scroll-snap-align);
  }

  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-desktop-"] > .et_pb_column,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-desktop-"] > .et_pb_column,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-desktop-"] > [class*="et_pb_column_"],
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-desktop-"] > [class*="et_pb_column_"] {
    display: contents !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important;
  }

  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-desktop-"] > .et_pb_column > .et_pb_module,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-desktop-"] > .et_pb_column > .et_pb_module,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-desktop-"] > [class*="et_pb_column_"] > .et_pb_module,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-desktop-"] > [class*="et_pb_column_"] > .et_pb_module {
    width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; scroll-snap-align: var(--dmf-scroll-snap-align);
  }
}

@media (min-width: 480px) and (max-width: 980px) {
  .dmf-scroll-tablet-20 { --dmf-scroll-width: 20%; }
  .dmf-scroll-tablet-25 { --dmf-scroll-width: 25%; }
  .dmf-scroll-tablet-30 { --dmf-scroll-width: 30%; }
  .dmf-scroll-tablet-35 { --dmf-scroll-width: 35%; }
  .dmf-scroll-tablet-40 { --dmf-scroll-width: 40%; }
  .dmf-scroll-tablet-45 { --dmf-scroll-width: 45%; }
  .dmf-scroll-tablet-50 { --dmf-scroll-width: 50%; }
  .dmf-scroll-tablet-60 { --dmf-scroll-width: 60%; }
  .dmf-scroll-tablet-70 { --dmf-scroll-width: 70%; }
  .dmf-scroll-tablet-80 { --dmf-scroll-width: 80%; }
  .dmf-scroll-tablet-90 { --dmf-scroll-width: 90%; }
  .dmf-scroll-tablet-100 { --dmf-scroll-width: 100%; }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-tablet-"],
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-tablet-"],
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-tablet-"],
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-tablet-"] {
    display: grid !important; grid-auto-flow: column !important; grid-auto-columns: var(--dmf-scroll-width) !important; grid-template-columns: none !important; align-items: stretch !important; column-gap: var(--dmf-scroll-gap) !important; row-gap: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x proximity;
  }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-tablet-"]::after,
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-tablet-"]::after,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-tablet-"]::after,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-tablet-"]::after { display: none !important; content: none !important; }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-tablet-"] > .et_pb_column,
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-tablet-"] > .et_pb_column,
  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-tablet-"] > [class*="et_pb_column_"],
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-tablet-"] > [class*="et_pb_column_"] {
    width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important; scroll-snap-align: var(--dmf-scroll-snap-align);
  }

  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-tablet-"] > .et_pb_column,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-tablet-"] > .et_pb_column,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-tablet-"] > [class*="et_pb_column_"],
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-tablet-"] > [class*="et_pb_column_"] {
    display: contents !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important;
  }

  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-tablet-"] > .et_pb_column > .et_pb_module,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-tablet-"] > .et_pb_column > .et_pb_module,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-tablet-"] > [class*="et_pb_column_"] > .et_pb_module,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-tablet-"] > [class*="et_pb_column_"] > .et_pb_module {
    width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; scroll-snap-align: var(--dmf-scroll-snap-align);
  }
}

@media (max-width: 479px) {
  .dmf-scroll-phone-20 { --dmf-scroll-width: 20%; }
  .dmf-scroll-phone-25 { --dmf-scroll-width: 25%; }
  .dmf-scroll-phone-30 { --dmf-scroll-width: 30%; }
  .dmf-scroll-phone-35 { --dmf-scroll-width: 35%; }
  .dmf-scroll-phone-40 { --dmf-scroll-width: 40%; }
  .dmf-scroll-phone-45 { --dmf-scroll-width: 45%; }
  .dmf-scroll-phone-50 { --dmf-scroll-width: 50%; }
  .dmf-scroll-phone-60 { --dmf-scroll-width: 60%; }
  .dmf-scroll-phone-70 { --dmf-scroll-width: 70%; }
  .dmf-scroll-phone-80 { --dmf-scroll-width: 80%; }
  .dmf-scroll-phone-90 { --dmf-scroll-width: 90%; }
  .dmf-scroll-phone-100 { --dmf-scroll-width: 100%; }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-phone-"],
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-phone-"],
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-phone-"],
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-phone-"] {
    display: grid !important; grid-auto-flow: column !important; grid-auto-columns: var(--dmf-scroll-width) !important; grid-template-columns: none !important; align-items: stretch !important; column-gap: var(--dmf-scroll-gap) !important; row-gap: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x proximity;
  }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-phone-"]::after,
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-phone-"]::after,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-phone-"]::after,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-phone-"]::after { display: none !important; content: none !important; }

  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-phone-"] > .et_pb_column,
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-phone-"] > .et_pb_column,
  .dmf-scroll-columns.et_pb_row[class*="dmf-scroll-phone-"] > [class*="et_pb_column_"],
  .et_pb_row.dmf-scroll-columns[class*="dmf-scroll-phone-"] > [class*="et_pb_column_"] {
    width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important; scroll-snap-align: var(--dmf-scroll-snap-align);
  }

  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-phone-"] > .et_pb_column,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-phone-"] > .et_pb_column,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-phone-"] > [class*="et_pb_column_"],
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-phone-"] > [class*="et_pb_column_"] {
    display: contents !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important;
  }

  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-phone-"] > .et_pb_column > .et_pb_module,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-phone-"] > .et_pb_column > .et_pb_module,
  .dmf-scroll-modules.et_pb_row[class*="dmf-scroll-phone-"] > [class*="et_pb_column_"] > .et_pb_module,
  .et_pb_row.dmf-scroll-modules[class*="dmf-scroll-phone-"] > [class*="et_pb_column_"] > .et_pb_module {
    width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; scroll-snap-align: var(--dmf-scroll-snap-align);
  }
}

/* 2.48.0 - Section intentional scroll. The Section is the scroll parent;
 * its real Divi Rows become the swipeable items. Width classes are reused so
 * users can control Desktop, Tablet and Phone independently.
 */
.dmf-section-scroll-rows {
  --dmf-scroll-width: 80%;
  --dmf-scroll-gap: 24px;
  --dmf-scroll-snap-align: start;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

@media (min-width: 981px) {
  .et_pb_section.dmf-section-scroll-rows[class*="dmf-scroll-desktop-"],
  .dmf-section-scroll-rows.et_pb_section[class*="dmf-scroll-desktop-"] {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--dmf-scroll-width) !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    column-gap: var(--dmf-scroll-gap) !important;
    row-gap: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity;
  }
  .et_pb_section.dmf-section-scroll-rows[class*="dmf-scroll-desktop-"] > .et_pb_row,
  .dmf-section-scroll-rows.et_pb_section[class*="dmf-scroll-desktop-"] > .et_pb_row {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    clear: none !important;
    scroll-snap-align: var(--dmf-scroll-snap-align);
  }
}

@media (min-width: 480px) and (max-width: 980px) {
  .et_pb_section.dmf-section-scroll-rows[class*="dmf-scroll-tablet-"],
  .dmf-section-scroll-rows.et_pb_section[class*="dmf-scroll-tablet-"] {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--dmf-scroll-width) !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    column-gap: var(--dmf-scroll-gap) !important;
    row-gap: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity;
  }
  .et_pb_section.dmf-section-scroll-rows[class*="dmf-scroll-tablet-"] > .et_pb_row,
  .dmf-section-scroll-rows.et_pb_section[class*="dmf-scroll-tablet-"] > .et_pb_row {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    clear: none !important;
    scroll-snap-align: var(--dmf-scroll-snap-align);
  }
}

@media (max-width: 479px) {
  .et_pb_section.dmf-section-scroll-rows[class*="dmf-scroll-phone-"],
  .dmf-section-scroll-rows.et_pb_section[class*="dmf-scroll-phone-"] {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--dmf-scroll-width) !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    column-gap: var(--dmf-scroll-gap) !important;
    row-gap: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity;
  }
  .et_pb_section.dmf-section-scroll-rows[class*="dmf-scroll-phone-"] > .et_pb_row,
  .dmf-section-scroll-rows.et_pb_section[class*="dmf-scroll-phone-"] > .et_pb_row {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    clear: none !important;
    scroll-snap-align: var(--dmf-scroll-snap-align);
  }
}