.et_pb_module.dipi_advanced_tabs_item {
    width: 100%;
}
.dipi-advanced-tabs {
    position: relative;
}
.dipi-at-panel-content,
.dipi-at-tabs-container,
.dipi-at-tabs,
.dipi-at-container,
.dipi-at-panels {
    display: flex;
}
.dipi-at-panel-content.dipi-at-panel-content--lib {
    display: block;
}
.dipi-at-container {
    width: 100%;
}
.dipi-at-panels {
    border-style: solid;
    z-index: 1;
    overflow: hidden;
    /* width: 100%; This causes the panels section to overflow the content area */
}
.dipi-at-tabs-container {
    flex: 1;
    max-width: 100%;
    width: 100%;
    z-index: 2;
}
.dipi-at-tabs {
    max-width: 100%;
    flex: 1;
    border-style: solid;
    overflow: visible;
}
.dipi-at-tab {
    cursor: pointer;
    display: flex;
    position: relative;
    border-style: solid;
    overflow: visible;
}
/* Base look + keyframes live in Base/AutoplayProgressBar/style.css; these rules only map
   this module's active-tab state to the shared bar's fill (the class toggle restarts it). */
.dipi-at-tab.dipi-at-tab--active .dipi-apb--bottom::after,
.dipi-at-tab.dipi-at-tab--active .dipi-apb--top::after {
    animation-name: dipiAutoplayProgress;
}
.dipi-at-tab.dipi-at-tab--active .dipi-apb--left::after,
.dipi-at-tab.dipi-at-tab--active .dipi-apb--right::after {
    animation-name: dipiAutoplayProgressV;
}
/* Autoplay pauses while the tab items are hovered — pause the fill with it. */
.dipi-at-tabs:hover .dipi-autoplay-progress-bar::after {
    animation-play-state: paused;
}
.dipi_advanced_tabs_item {
    display: none;
}
.dipi_advanced_tabs_item.dipi-at-panel--active {
    display: block;
}

.dipi-at-tabs.has-arrow .dipi-at-tab {
    position: relative;
}
.dipi-at-tabs.has-arrow .dipi-at-tab svg {
    position: absolute;
    height: auto !important;
    opacity: 0;
    transition: all 0.1s ease-in-out;
}
.dipi-at-tab.dipi-at-tab--active {
    border-style: solid;
}
.dipi-at-tabs.has-arrow .dipi-at-tab.dipi-at-tab--active svg {
    display: block;
    opacity: 1;
    transition: all 0.3s ease-in-out 0.2s;
}

.dipi-tab-media.dipi-tab-media--normal {
    display: block;
}
.dipi-tab-media.dipi-tab-media--active {
    display: none;
}
.dipi-at-tab.dipi-at-tab--active .dipi-tab-media.dipi-tab-media--active {
    display: block;
}
.dipi-at-tab.dipi-at-tab--active .dipi-tab-media.dipi-tab-media--normal {
    display: none;
}

.dipi-at-tabs.arrow-place-top .dipi-at-tab svg {
    top: 90%;
}
.dipi-at-tabs.arrow-place-top .dipi-at-tab.dipi-at-tab--active svg {
    top: 100%;
}

.dipi-at-tabs.arrow-place-top.arrow-allign-start .dipi-at-tab svg {
    left: 0;
}
.dipi-at-tabs.arrow-place-top.arrow-allign-end .dipi-at-tab svg {
    right: 0;
}
.dipi-at-tabs.arrow-place-top.arrow-allign-center .dipi-at-tab svg {
    left: 50%;
    transform: translateX(-50%);
}

.dipi-at-tabs.arrow-place-bottom .dipi-at-tab svg {
    bottom: 90%;
}
.dipi-at-tabs.arrow-place-bottom .dipi-at-tab.dipi-at-tab--active svg {
    bottom: 100%;
}
.dipi-at-tabs.arrow-place-bottom.arrow-allign-start .dipi-at-tab svg {
    left: 0;
}
.dipi-at-tabs.arrow-place-bottom.arrow-allign-end .dipi-at-tab svg {
    right: 0;
}
.dipi-at-tabs.arrow-place-bottom.arrow-allign-center .dipi-at-tab svg {
    left: 50%;
    transform: translateX(-50%);
}

.dipi-at-tabs.arrow-place-left .dipi-at-tab svg {
    left: 90%;
}
.dipi-at-tabs.arrow-place-left .dipi-at-tab.dipi-at-tab--active svg {
    left: 100%;
}
.dipi-at-tabs.arrow-place-left.arrow-allign-start .dipi-at-tab svg {
    top: 0;
}
.dipi-at-tabs.arrow-place-left.arrow-allign-end .dipi-at-tab svg {
    bottom: 0;
}
.dipi-at-tabs.arrow-place-left.arrow-allign-center .dipi-at-tab svg {
    top: 50%;
    transform: translateY(-50%);
}

.dipi-at-tabs.arrow-place-right .dipi-at-tab svg {
    right: 90%;
}
.dipi-at-tabs.arrow-place-right .dipi-at-tab.dipi-at-tab--active svg {
    right: 100%;
}
.dipi-at-tabs.arrow-place-right.arrow-allign-start .dipi-at-tab svg {
    top: 0;
}
.dipi-at-tabs.arrow-place-right.arrow-allign-end .dipi-at-tab svg {
    bottom: 0;
}
.dipi-at-tabs.arrow-place-right.arrow-allign-center .dipi-at-tab svg {
    top: 50%;
    transform: translateY(-50%);
}

.dipi-at-btn-wrap {
    display: flex;
}

.dipi-at-tab-container {
    width: 100%;
}
/* .dipi-at-horz-media{
    display:flex;
    flex-direction: row;
} */

.dipi_advanced_tabs_item {
    opacity: 0;
    transition: opacity;
}
.dipi_advanced_tabs_item.dipi-at-panel--active {
    opacity: 1;
}
.dipi_advanced_tabs_item.dipi-at-panel--active.animateOut {
    opacity: 0;
}
.dipi_advanced_tabs_item.animateIn {
    opacity: 1;
}
.dipi-at-tab {
    transition-property: border, border-radius, box-shadow, font-size, line-height, color, background-color, padding, margin !important;
    transition-duration: 500ms;
    transition-delay: 0ms;
    transition-timing-function: ease;
}
.dipi-at-panel-container .dipi_advanced_tabs_item {
    display: block;
    height: 100%;
}
.dipi-at-panel-container {
    display: none;
    width: 100%;
}
.dipi-at-panel-container.dipi-at-panel--active {
    display: block;
}
.dipi-at-panel-container.dipi-at-panel--active .dipi_advanced_tabs_item {
    opacity: 1;
}

.dipi_advanced_tabs_item,
.dipi_advanced_tabs_item .et_pb_module_inner,
.dipi_advanced_tabs_item .et_pb_module_inner .dipi-at-panel,
.dipi_advanced_tabs_item .et_pb_module_inner .dipi-at-panel .dipi-at-panel-content {
    height: 100%;
}
/* .dipi-at-panel-content .et_pb_section {flex: 1;} */
.et_gf_fontawesome {
    font-family: "FontAwesome" !important;
}

.dipi-at-tab .at-media-wrap {
    box-sizing: content-box;
    flex-shrink: 0;
}
.dipi-at-tab.dipi-at-tab--active .dipi-tab-media--active .et-pb-icon.dipi-tab-media,
.dipi-at-tab:not(.dipi-at-tab--active) .dipi-tab-media--normal .et-pb-icon.dipi-tab-media {
    display: block;
}

.dipi-at-tab .at-media-wrap img {
    border-style: solid;
}
@media only screen and (max-width: 980px) {
    .dipi-at-tabs .dipi-at-tab svg,
    .dipi-at-tabs .dipi-at-tab.dipi-at-tab--active svg {
        display: none !important;
    }
}

.dipi-at-panel-content .dipi-at-panel-image {
    border-style: solid;
    margin: 10px;
    object-fit: cover;
}

.dipi-at-panel-content .dipi-at-panel-image img {
    width: 100%;
}
@media (min-width: 981px) {
    .et_pb_gutters3 .et_pb_column_4_4 .et_pb_module.dipi_advanced_tabs_item,
    .et_pb_gutters3.et_pb_row .et_pb_column_4_4 .et_pb_module.dipi_advanced_tabs_item {
        margin-bottom: 0%;
    }
}

/* Tabs Slider */
.dipi-at-tabs-prev,
.dipi-at-tabs-next {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    top: 0px;
    content: attr(data-icon);
    font-family: ETmodules;
}

.dipi-at-tabs-prev:after,
.dipi-at-tabs-next:after {
    content: attr(data-icon);
    display: block;
    font-family: ETmodules;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}
.dipi-at-tabs-prev {
    left: 0;
}
.dipi-at-tabs-next {
    right: 0;
}

.dipi-at-tabs-slider {
    display: flex;
}
.dipi-at-tabs-slider-container {
    width: 100%;
    display: block;
    overflow: hidden;
}
.ds-at-panels .et_pb_module.ds_advanced_tabs_item {
    margin-bottom: 0;
}

.dipi_advanced_tabs_item .dipi_faq .dipi-faq-wrapper {
    display: block !important;
}

.dipi_advanced_tabs_item .dipi_faq .dipi-faq-wrapper .dipi-faq-content {
    display: none;
}

.dipi_advanced_tabs_item .dipi_faq .dipi-faq-wrapper .dipi-faq-icon-open {
    display: none;
}

.dipi_advanced_tabs_item .dipi_faq .dipi-faq-wrapper .dipi-faq-entry.open .dipi-faq-icon-open {
    display: flex !important;
}

.dipi-advanced-tabs .dipi-tab-media.dipi-tab-media--normal {
    display: block;
}
.dipi-advanced-tabs .dipi-tab-media.dipi-tab-media--active {
    display: none;
}
.dipi-advanced-tabs .dipi-at-tab.dipi-at-tab--active .dipi-tab-media.dipi-tab-media--active {
    display: block;
}
.dipi-advanced-tabs .dipi-at-tab.dipi-at-tab--active .dipi-tab-media.dipi-tab-media--normal {
    display: none;
}

/*
 * Shared autoplay progress bar (used by AdvancedTabs, HoverGallery).
 *
 * Structure: the element itself is the track (visible on every item when a track color is
 * set; transparent by default), the ::after pseudo-element is the animated fill. The fill
 * is inert (no animation-name) until the consuming module's CSS activates it under its own
 * "active" parent selector, picking the keyframes matching the bar orientation, e.g.:
 *   .dipi-at-tab--active .dipi-apb--bottom::after { animation-name: dipiAutoplayProgress; }
 * The parent class toggling is what restarts the fill on every switch; adding the
 * .dipi-apb--reset class (plus a reflow) force-restarts it from JS.
 *
 * Customization comes via custom properties set by module styles / inline render:
 *   --dipi-apb-duration     fill duration (the autoplay interval), inline at render
 *   --dipi-apb-weight       bar thickness
 *   --dipi-apb-track-color  track color (default / not active)
 *   --dipi-apb-color        fill color (active)
 */
.dipi-autoplay-progress-bar {
	position: absolute;
	background-color: var(--dipi-apb-track-color, transparent);
	pointer-events: none;
}
.dipi-apb--bottom {
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--dipi-apb-weight, 3px);
}
.dipi-apb--top {
	left: 0;
	right: 0;
	top: 0;
	height: var(--dipi-apb-weight, 3px);
}
.dipi-apb--left {
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--dipi-apb-weight, 3px);
}
.dipi-apb--right {
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--dipi-apb-weight, 3px);
}
.dipi-autoplay-progress-bar::after {
	content: "";
	display: block;
	background-color: var(--dipi-apb-color, #2ea3f2);
	animation-duration: var(--dipi-apb-duration, 5000ms);
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.dipi-apb--bottom::after,
.dipi-apb--top::after {
	height: 100%;
	width: 0%;
}
.dipi-apb--left::after,
.dipi-apb--right::after {
	width: 100%;
	height: 0%;
}
@keyframes dipiAutoplayProgress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}
@keyframes dipiAutoplayProgressV {
	from {
		height: 0%;
	}
	to {
		height: 100%;
	}
}
.dipi-apb--reset::after {
	animation-name: none !important;
}

.dipi-layoutcomponent-notice {
    background-color: #fff9f9;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #888;
    border: 1px solid #ffe6e6;
    margin-bottom: 15px;
}

.tippy-box[data-theme='dipi-balloon-theme'][data-theme='dipi-balloon-theme'] {
    position: relative;
    background-color: transparent;
    border-radius: 0px;
    outline: 0;
    color: initial;
    font-size: initial;
    line-height: initial;
    transition-property: initial;
}

.tippy-box[data-theme='dipi-balloon-theme'] .et_pb_section.dipi_balloon-inner {
    padding: 0 !important;
    margin: 0 !important;
}

.tippy-box[data-theme='dipi-balloon-theme'] .tippy-content {
    position: relative;
    padding: 0;
}

.tippy-box[data-theme='dipi-balloon-theme'] .tippy-content .et_pb_section.dipi_balloon-inner {
    background: transparent !important;
}

.dipi-ballon-on-top {
    z-index: 9999 !important;
}

.dipi-ballon-on-top-removing {
    z-index: 9990 !important;
}

.dipi-ballon-on-top header .et_builder_inner_content {
    z-index: 10000;
}

.dipi_balloon-inner {
    display: flex;
    justify-content: center;
}

.dipi_balloon-inner>.dipi_balloon {
    flex-shrink: 0;
}

.dipi-balloon-wrap {
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-style: solid;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}

.dipi-alignment-left {
    align-items: flex-start;
    text-align: left;
}

.dipi-alignment-center {
    align-items: center;
    text-align: center;
}

.dipi-alignment-right {
    align-items: flex-end;
    text-align: right;
}

.dipi-balloon-image-icon {
    line-height: 0;
}

.dipi-balloon-image-icon:not(:last-child),
.dipi-balloon-icon:not(:last-child),
.dipi-balloon-description:not(:last-child),
.dipi-balloon-cta-wrap:not(:last-child) {
    margin-bottom: 15px;
}

.dipi-balloon-title {
    margin-bottom: 0;
}

.dipi-balloon-title:last-child {
    padding-bottom: 0;
}

.dipi-balloon-image {
    border-style: solid;
}

body.et-fb .tippy-arrow {
    left: 50% !important;
    transform: translate(0px, 0px) !important;
    position: absolute;
    width: 16px;
}

[data-tippy-root] {
    max-width: calc(100vw - 10px)
}


.tippy-box[data-theme='dipi-balloon-theme'] .tippy-arrow {
    width: 16px;
    height: 16px;
}

.tippy-box[data-theme='dipi-balloon-theme'] .tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid
}

.tippy-box[data-theme='dipi-balloon-theme'][data-placement^=top]>.tippy-arrow {
    bottom: 0
}

.tippy-box[data-theme='dipi-balloon-theme'][data-placement^=top]>.tippy-arrow:before {
    bottom: -8px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top;
}

.tippy-box[data-theme='dipi-balloon-theme'][data-placement^=bottom]>.tippy-arrow {
    top: 0;
}

.tippy-box[data-theme='dipi-balloon-theme'] .tippy-box-bottom {
    width: 100%;
    height: 0px;
}

.tippy-box[data-theme='dipi-balloon-theme'][data-placement^=bottom]>.tippy-arrow:before,
.tippy-box[data-theme='dipi-balloon-theme'] .tippy-box-bottom.tippy-arrow:before {
    top: -8px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom;
}

.tippy-box[data-theme='dipi-balloon-theme'] .tippy-box-bottom.tippy-arrow:before {
    margin-left: -8px;
}

.tippy-box[data-theme='dipi-balloon-theme'][data-placement^=left]>.tippy-arrow {
    right: 1px;
}

.tippy-box[data-theme='dipi-balloon-theme'][data-placement^=left]>.tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -8px;
    transform-origin: center left;
}

.tippy-box[data-theme='dipi-balloon-theme'][data-placement^=right]>.tippy-arrow {
    left: 1px;
}

.tippy-box[data-theme='dipi-balloon-theme'][data-placement^=right]>.tippy-arrow:before {
    left: -8px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right;
}

/**
 * Animations
 */
.tippy-box[data-theme='dipi-balloon-theme'][data-animation=fade][data-state=hidden] {
    opacity: 0
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation=scale][data-placement^=top] {
    transform-origin: bottom
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation=scale][data-placement^=bottom] {
    transform-origin: top
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation=scale][data-placement^=left] {
    transform-origin: right
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation=scale][data-placement^=right] {
    transform-origin: left
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation=scale][data-state=hidden] {
    transform: scale(.5);
    opacity: 0
}

/**
 * Dummy Element
 */
.dipi_balloon.et_pb_module {
    margin: 0 auto !important;
    height: auto;
}

.dipi_balloon .et-waypoint:not(.et_pb_counters),
.dipi-balloon .et-waypoint:not(.et_pb_counters) {
    opacity: 1 !important;
}

.dipi_balloon .et_pb_section,
.dipi-balloon .et_pb_section {
    width: 100%;
}

.dipi-balloon-alert {
    background-color: #fff9f9;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #888;
    border: 1px solid #ffe6e6;
    margin-bottom: 15px;
}


#top-menu>li:last-of-type {
    padding-right: 0;
}

.tippy-box[data-theme='dipi-balloon-theme'] .tippy-arrow {
    z-index: 99
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-fadeInUp'][data-state='hidden'],
.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-fadeInDown'][data-state='hidden'],
.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-fadeInLeft'][data-state='hidden'],
.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-fadeInRight'][data-state='hidden'],
.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-scale'][data-state='hidden'] {
    opacity: 0;
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-fadeInUp'][data-state='hidden'] {
    transform: translateY(10px);
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-fadeInDown'][data-state='hidden'] {
    transform: translateY(-10px);
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-fadeInRight'][data-state='hidden'] {
    transform: translateX(-10px);
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-fadeInLeft'][data-state='hidden'] {
    transform: translateX(10px);
}

.tippy-box[data-theme='dipi-balloon-theme'][data-animation='dipi-scale'][data-state='hidden'] {
    transform: scale(.95);
}

.dipi_balloon .dipi_counter_number_wrapper,
.tippy-box[data-theme='dipi-balloon-theme'] .dipi-balloon-wrap .dipi_counter_number_wrapper {
    display: block !important;
    opacity: 1 !important;
}

.et_pb_section .et_pb_row .et_pb_column .et_pb_module.dipi-balloon-last-element {
    margin-bottom: 0;
}

.dipi_balloon .et_animated {
    opacity: 1;
}

/* Phone: never let a balloon be wider than the viewport, whatever width the user set. */
@media (max-width: 767px) {
    .tippy-box[data-theme='dipi-balloon-theme'][data-theme='dipi-balloon-theme'] {
        max-width: calc(100vw - 20px) !important;
    }
}

.dipi-anim-preload .dipi_before_after_slider * {
    transition: none !important;
}

.dipi-anim-preload .dipi-before-after-slider-container {
    display: none !important;
}

.dipi-before-after-slider-container, 
.dipi-before-after-slider-content, 
.dipi-before-after-slider-hover {
    width: 100%;
}

.dipi-before-after-slider-container {
    position: relative;
    perspective: 1000px;
    overflow: hidden;
    transition: 1.3s;
    border-style: solid;
}

.dipi-before-after-slider-inner-wrapper {
    position: relative;
    transition: 1.3s;
    border-style: solid;
}
 .dipi-before-after-slider-content, 
 .dipi-before-after-slider-hover {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    padding: 30px;
    border-style: solid;
    transition: 1s;
}

.dipi-before-after-slider-container .dipi-before-after-slider-content > div,
.dipi-before-after-slider-container .dipi-before-after-slider-hover > div {
  width: 100%;
}

.dipi-before-after-slider-container .dipi-before-after-slider-content .dipi-image-wrap,
.dipi-before-after-slider-container .dipi-before-after-slider-hover .dipi-image-wrap {
    width: 100%;
    margin: auto;
    position: relative;
}

.dipi-before-after-slider-container .dipi-before-after-slider-content .dipi-image-wrap img, 
.dipi-before-after-slider-container .dipi-before-after-slider-hover .dipi-image-wrap img {
    border-style: solid;
}

.dipi_before_after_slider  .et_pb_section_video_bg video {
    object-fit: cover;
    transition: 1.3s;
}

.et-fb-all-modules .dipi_before_after_slider:before {
    content: "\64" !important;
}

.et-fb-all-modules .dipi_before_after_slider {
    background-color: #3949ab !important;
    color: white !important;
    overflow: visible !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.et-fb-all-modules .dipi_before_after_slider span {
    font-size: 10px !important;
}

.dipi_before_after_slider_horizontal .dipi_before_after_slider_handle:before, 
.dipi_before_after_slider_horizontal .dipi_before_after_slider_handle:after, 
.dipi_before_after_slider_vertical .dipi_before_after_slider_handle:before, 
.dipi_before_after_slider_vertical .dipi_before_after_slider_handle:after {
    content: " ";
    display: block;
    background: white;
    position: absolute;
    z-index: 30;
    border-style: solid;
    border-width: 0;
}

.dipi_before_after_slider_horizontal .dipi_before_after_slider_handle:before,
.dipi_before_after_slider_horizontal .dipi_before_after_slider_handle:after {
    width: 4px;
    height: 9999px;
    left: 50%;
    /* Centers the line on the handle whatever its width/border is. Uses the
       `translate` property so the generated `transform: translateY(...)` gap
       offset keeps working. */
    translate: -50%;
}

.dipi_before_after_slider_vertical .dipi_before_after_slider_handle:before,
.dipi_before_after_slider_vertical .dipi_before_after_slider_handle:after {
    width: 9999px;
    height: 4px;
    top: 50%;
    translate: 0 -50%;
}

.dipi_before_after_slider_before_label_span,
.dipi_before_after_slider_after_label_span,
.dipi_before_after_slider_overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.dipi_before_after_slider_before_label_span,
.dipi_before_after_slider_after_label_span {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    line-height: 38px;
    padding: 0 20px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #ffffff;
    font-size: 13px;
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    cursor: pointer;
    width: auto;
    height: auto;
}

.dipi_before_after_slider_horizontal .dipi_before_after_slider_before_label_span, 
.dipi_before_after_slider_horizontal .dipi_before_after_slider_after_label_span {
    top: 50%;
    transform: translateY(-50%);
}

.dipi_before_after_slider_vertical .dipi_before_after_slider_before_label_span,
.dipi_before_after_slider_vertical .dipi_before_after_slider_after_label_span {
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
}

.dipi_before_after_slider_left_arrow,
.dipi_before_after_slider_right_arrow,
.dipi_before_after_slider_up_arrow,
.dipi_before_after_slider_down_arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
}

.dipi_before_after_slider_left_arrow,
.dipi_before_after_slider_right_arrow {
    top: 50%;
    transition: all .1s ease-out 0s;
}

.dipi_before_after_slider_up_arrow,
.dipi_before_after_slider_down_arrow {
    left: 50%;
    transition: all .1s ease-out 0s;
}

.dipi_before_after_slider_container {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 0;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.dipi_before_after_slider_container img {
    max-width: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    display: block;
}

.dipi_before_after_slider_before {
    text-align: left;
}

.dipi_before_after_slider_after {
    text-align: right;
}

.dipi_before_after_slider_container.active .dipi_before_after_slider_overlay, 
.dipi_before_after_slider_container.active:hover .dipi_before_after_slider_overlay {
    background: rgba(0, 0, 0, 0);
}

.dipi_before_after_slider_container.active .dipi_before_after_slider_overlay .dipi_before_after_slider_before_label_span,
.dipi_before_after_slider_container.active .dipi_before_after_slider_overlay .dipi_before_after_slider_after_label_span,
.dipi_before_after_slider_container.active:hover.dipi_before_after_slider_overlay .dipi_before_after_slider_before_label_span,
.dipi_before_after_slider_container.active:hover.dipi_before_after_slider_overlay .dipi_before_after_slider_after_label_span {
    opacity: 0;
}


.dipi_before_after_slider_container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.dipi_before_after_slider_horizontal .dipi_before_after_slider_before_label_span {
    left: 10px;
}

.dipi_before_after_slider_horizontal .dipi_before_after_slider_after_label_span {
    right: 10px;
}

.dipi_before_after_slider_vertical .dipi_before_after_slider_before_label_span {
    top: 10px;
}

.dipi_before_after_slider_vertical .dipi_before_after_slider_after_label_span {
    bottom: 10px;
    top:auto;
}

.dipi_before_after_slider_overlay {
    -webkit-transition-property: background;
    -moz-transition-property: background;
    transition-property: background;
    background: rgba(0, 0, 0, 0);
    z-index: 25;
}

.dipi_before_after_slider_overlay:hover .dipi_before_after_slider_after_label_span,
.dipi_before_after_slider_overlay:hover .dipi_before_after_slider_before_label_span {
    opacity: 1;
}

.dipi_before_after_slider_before {
    z-index: 20;
}

.dipi_before_after_slider_after {
    z-index: 10;
}

.dipi_before_after_slider_handle {
    height: 38px;
    width: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid white;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    border-radius: 1000px;
    z-index: 40;
    cursor: pointer;
}
.dipi_before_after_slider_container.no_circle_handle .dipi_before_after_slider_handle {
    background: transparent !important;
    box-shadow: unset !important;
    border: none !important;
}
.dipi_before_after_slider_container.no_circle_handle .dipi_before_after_slider_handle:before,
.dipi_before_after_slider_container.no_circle_handle .dipi_before_after_slider_handle:after {
    transform: translate(0) !important;
    margin: 0 !important;
    box-shadow: unset !important;
}
.dipi_before_after_slider_horizontal .dipi_before_after_slider_handle:before {
    bottom: 50%;
    transform: translateY(-19px);
    margin-bottom: 4px;
}

.dipi_before_after_slider_horizontal .dipi_before_after_slider_handle:after {
    top: 50%;
    transform: translateY(19px);
    margin-top: 4px;
}

.dipi_before_after_slider_vertical .dipi_before_after_slider_handle:before {
    left: 50%;
    margin-left: 22px;
}

.dipi_before_after_slider_vertical .dipi_before_after_slider_handle:after {
    right: 50%;
    margin-right: 22px;
}

.dipi_before_after_slider_left_arrow {
    border-right: 6px solid white;
    left: calc(50% - 6px);
    transform: translate(-100%, -50%);
}

.dipi_before_after_slider_right_arrow {
    border-left: 6px solid white;
    right: calc(50% - 6px);
    transform: translate(100%, -50%);
}

.dipi_before_after_slider_up_arrow {
    border-bottom: 6px solid white;
    top: calc(50% - 6px);
    transform: translate(-50%, -100%);
}

.dipi_before_after_slider_down_arrow {
    border-top: 6px solid white;
    bottom: calc(50% - 6px);
    transform: translate(-50%, 100%);
}
.dipi_before_after_slider_container.arrow-handle_icon .dipi_before_after_slider_up_arrow,
.dipi_before_after_slider_container.arrow-handle_icon .dipi_before_after_slider_down_arrow,
.dipi_before_after_slider_container.arrow-handle_icon .dipi_before_after_slider_left_arrow,
.dipi_before_after_slider_container.arrow-handle_icon .dipi_before_after_slider_right_arrow {
    width: 6px;
    height: 6px;
    border: 3px solid white;
}
.dipi_before_after_slider_container.arrow-handle_icon .dipi_before_after_slider_left_arrow {
    transform: translate(-50%, -50%) rotate(45deg);
    left: calc(100% - 6px);
    border-top: none;
    border-right: none;
}
.dipi_before_after_slider_container.arrow-handle_icon .dipi_before_after_slider_right_arrow {
    transform: translate(50%, -50%) rotate(45deg);
    border-left: none;
    right: calc(100% - 6px);
    border-bottom: none;
}
.dipi_before_after_slider_container.arrow-handle_icon .dipi_before_after_slider_up_arrow {
    transform: translate(-50%, -50%) rotate(225deg);
    top: calc(100% - 6px);
    border-left: none;
    border-top: none;
}
.dipi_before_after_slider_container.arrow-handle_icon .dipi_before_after_slider_down_arrow {
    transform: translate(-50%, 50%) rotate(225deg);
    bottom: calc(100% - 6px);
    border-right: none;
    border-bottom: none;
}
.dipi_before_after_slider_container:not(.active) img,
.dipi_before_after_slider_container:not(.active) .dipi_before_after_slider_label,
.dipi_before_after_slider_container:not(.active) .dipi_before_after_slider_before_label_span,
.dipi_before_after_slider_container:not(.active) .dipi_before_after_slider_after_label_span,
.dipi_before_after_slider_container:not(.active) .dipi_before_after_slider_handle {
    transition: all 0.7s; 
}

/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */


:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}

.dipi_blog_slider .preloading {
    display: none;
}

.dipi_blog_slider .dipi-blog-post {
    border-style: solid;
    display: flex;
    flex-direction: column;
    position: relative;
}

.dipi_blog_slider .dipi-entry-featured-image-url {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0 !important;
}

.dipi_blog_slider .dipi-entry-featured-image-url > img.wp-post-image {
    position: relative;
    border-style: solid;
    cursor: pointer;
    transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
    transition-duration: 1s;
}

.dipi_blog_slider .dipi-entry-featured-image-url > img.wp-post-image:not(.lazyload) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dipi-blog-post .dipi-blog-post-overlay {
    display: flex;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    padding: 20px;
    width: 100%;
    height: 100%;
    border-style: solid;
    line-height: 0 !important;
    transition: all 0.6s ease-in-out;
}

.dipi-blog-post:hover .dipi-blog-post-overlay {
    transition: all 0.6s ease-in-out;
}

.dipi_blog_slider .dipi-blog-post-overlay .dipi-author {
    align-self: flex-end;
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.dipi_blog_slider .dipi-author .author {
    display: flex;
    align-items: center;
}

.dipi_blog_slider .dipi-author .author,
.dipi_blog_slider .dipi-author .author a {
    color: #f1f1f1;
}

.dipi_blog_slider .dipi-author .author > img {
    height: 24px;
    width: 24px;
    border-radius: 100px;
    margin: 0 5px;
}

.dipi_blog_slider .dipi-date {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    line-height: 1.4 !important;
    right: 0;
    top: 0;
    position: absolute;
    z-index: 9;
    background: #fff;
    color: #000;
}

.dipi_blog_slider .dipi-blog-post-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.dipi_blog_slider .dipi-blog-post-meta .dipi-author {
    margin-top: 10px;
    margin-left: 20px;
}

.dipi_blog_slider .dipi-blog-post-meta .dipi-date {
    position: relative;
    display: flex;
    background: #000;
    color: #fff;
    padding: 2px;
}

.dipi_blog_slider .dipi-date .dipi-month {
    font-size: 11px;
    line-height: 0.9;
}

.dipi_blog_slider .dipi-date .dipi-day {
    font-size: 24px;
    line-height: 1;
}

.dipi_blog_slider .dipi-date .dipi-year {
    font-size: 11px;
    line-height: 0.9;
}

.dipi_blog_slider .dipi-post-content {
    padding: 20px;
    position: relative;
}

.dipi_blog_slider .dipi-post-content .dipi-categories {
    display: block;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

.dipi_blog_slider .dipi-post-content .dipi-categories a {
    padding-right: 0px !important;
}

.dipi_blog_slider .dipi-post-content .dipi-categories a:after {
    content: none;
}

.dipi_blog_slider .dipi-post-content .dipi-post-text {
    line-height: 1.4;
}

.dipi_blog_slider .dipi-bottom-content {
    position: relative;
    flex-grow: 1;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
}

.dipi_blog_slider .dipi-bottom-content a {
    margin-top: auto;
}

.dipi_blog_slider .dipi-bottom-content .dipi-comments {
    display: flex;
    align-items: center;
    margin-top: auto;
    justify-content: flex-end;
}

.dipi_blog_slider .dipi-bottom-content .dipi-comments span {
    line-height: 1;
}

.dipi_blog_slider .dipi-bottom-content .dipi-comments .comment-icon {
    margin-right: 5px;
    width: 16px;
}

.dipi-blog-post:hover .dipi-entry-featured-image-url.dipi-zoomin img.wp-post-image {
    transform: scale(1.1);
}

.dipi-entry-featured-image-url.dipi-zoomout img.wp-post-image {
    transform: scale(1.1);
}

.dipi-blog-post:hover .dipi-entry-featured-image-url.dipi-zoomout img.wp-post-image {
    transform: scale(1);
}

.dipi-entry-featured-image-url.dipi-rotate img.wp-post-image {
    height: 100%;
    width: 100%;
}

.dipi-blog-post:hover .dipi-entry-featured-image-url.dipi-rotate img.wp-post-image {
    transform: scale(1.1) rotate(2deg);
}

.dipi-entry-featured-image-url.dipi-move-up img.wp-post-image {
    transform: scale(1.15);
}

.dipi-blog-post:hover .dipi-entry-featured-image-url.dipi-move-up img.wp-post-image {
    transform: scale(1.15) translateY(-10px);
}

.dipi-entry-featured-image-url.dipi-move-down img.wp-post-image {
    transform: scale(1.15);
}

.dipi-blog-post:hover .dipi-entry-featured-image-url.dipi-move-down img.wp-post-image {
    transform: scale(1.15) translateY(10px);
}

.dipi-entry-featured-image-url.dipi-move-right img.wp-post-image {
    transform: scale(1.1);
}

.dipi-blog-post:hover .dipi-entry-featured-image-url.dipi-move-right img.wp-post-image {
    transform: scale(1.1) translateX(10px);
}

.dipi-entry-featured-image-url.dipi-move-left img.wp-post-image {
    transform: scale(1.1);
}

.dipi-blog-post:hover .dipi-entry-featured-image-url.dipi-move-left img.wp-post-image {
    transform: scale(1.1) translateX(-10px);
}

.dipi-blog-post-overlay-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
}

.dipi_blog_slider .swiper-container .dipi-blog-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    flex-wrap: nowrap;
    overflow: visible;
    transform-style: preserve-3d;
}

.dipi_blog_slider .swiper-pagination {
    text-align: center;
    width: 100%;
}

.dipi_blog_slider .swiper-pagination .swiper-pagination-bullet {
    margin: 0 4px;
    width: 8px;
    height: 8px;
}

.dipi_blog_slider .swiper-pagination-bullets {
    left: 50% !important;
    width: 100%;
    transform: translateX(-50%) !important;
    white-space: nowrap;
}

.dipi_blog_slider .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0;
}

.dipi_blog_slider .swiper-button-next,
.dipi_blog_slider .swiper-button-prev {
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 50px;
    margin-top: 0;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}

.dipi_blog_slider .swiper-button-next:after,
.dipi_blog_slider .swiper-button-prev:after {
    content: attr(data-icon);
    display: block;
    font-family: ETmodules;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

.dipi_blog_slider .swiper-button-prev {
    left: -66px;
}

.dipi_blog_slider .swiper-button-next {
    right: -66px;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    cursor: pointer;
    pointer-events: all;
}

.dipi_blog_slider .swiper-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: start;
}

.dipi_blog_slider.et_pb_module .swiper-arrow-button.show_on_hover {
    opacity: 0;
}

.dipi_blog_slider .swiper-button-prev.swiper-arrow-button.show_on_hover {
    left: 0 !important;
}

.dipi_blog_slider:hover .swiper-button-prev.swiper-arrow-button.show_on_hover {
    left: -66px !important;
}

.dipi_blog_slider .swiper-button-next.swiper-arrow-button.show_on_hover {
    right: 0 !important;
}

.dipi_blog_slider:hover .swiper-button-next.swiper-arrow-button.show_on_hover {
    right: -66px !important;
}

.dipi_blog_slider.et_pb_module:hover .swiper-arrow-button.show_on_hover,
.dipi_blog_slider.et_pb_module .swiper-arrow-button.show_on_hover:hover {
    opacity: 1;
}

.dipi_blog_slider .swiper-button-prev.swiper-arrow-button.show_on_hover:before,
.dipi_blog_slider .swiper-button-next.swiper-arrow-button.show_on_hover:before {
    width: 100%;
    height: 100%;
    opacity: 1;
    content: " ";
    position: absolute;
}

.dipi_blog_slider .swiper-button-prev.swiper-arrow-button.show_on_hover:before {
    left: 50%;
}

.dipi_blog_slider .swiper-button-next.swiper-arrow-button.show_on_hover:before {
    right: 50%;
}

.dipi-blog-slider-main {
    overflow: hidden;
}

.dipi_blog_slider .dipi-bottom-content .dipi-more-link {
    margin-top: auto;
}

@media only screen and (min-width: 981px) {
    .dipi_blog_slider .hide_on_desktop {
        display: none !important;
    }
    .dipi_blog_slider .show_on_desktop_flex {
        display: flex !important;
    }
    .dipi_blog_slider .show_on_desktop_block {
        display: block !important;
    }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
    .dipi_blog_slider .hide_on_tablet {
        display: none !important;
    }
    .dipi_blog_slider .show_on_tablet_flex {
        display: flex !important;
    }
    .dipi_blog_slider .show_on_tablet_block {
        display: block !important;
    }
}

@media only screen and (max-width: 767px) {
    .dipi_blog_slider .hide_on_phone {
        display: none !important;
    }
    .dipi_blog_slider .show_on_phone_flex {
        display: flex !important;
    }
    .dipi_blog_slider .show_on_phone_block {
        display: block !important;
    }
}

/* Breadcrumbs list styles - remove bullets and make items inline */
.dipi_breadcrumbs .dipi-breadcrumbs > ul,
.dipi-breadcrumbs > ul {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

.dipi_breadcrumbs .dipi-breadcrumbs > ul > li,
.dipi-breadcrumbs > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.dipi-breadcrumbs-container,
.dipi-breadcrumbs-content,
.dipi-breadcrumbs-hover {
    width: 100%;
}

.dipi-breadcrumbs-container {
    position: relative;
    perspective: 1000px;
    overflow: hidden;
    transition: 1.3s;
    border-style: solid;
}

.dipi-breadcrumbs-inner-wrapper {
    position: relative;
    transition: 1.3s;
    border-style: solid;
}

.dipi-breadcrumbs-content,
.dipi-breadcrumbs-hover {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    padding: 30px;
    border-style: solid;
    transition: 1s;
}

.dipi-hover-button:after {
    font-size: inherit !important;
    line-height: inherit !important;
}

.dipi-hover-button[data-icon]:not([data-icon=""]):after {
    content: attr(data-icon);
}

.dipi-breadcrumbs-slide-top .dipi-breadcrumbs-hover {
    transform: translateX(0) translateY(100%);
    backface-visibility: hidden;
}

.dipi_breadcrumbs:hover .dipi-breadcrumbs-slide-top .dipi-breadcrumbs-hover {
    transform: translateX(0) translateY(0);
}

.dipi-breadcrumbs-slide-bottom .dipi-breadcrumbs-hover {
    transform: translateX(0) translateY(-100%);
    backface-visibility: hidden;
}

.dipi_breadcrumbs:hover .dipi-breadcrumbs-slide-bottom .dipi-breadcrumbs-hover {
    transform: translateX(0) translateY(0);
}

.dipi-breadcrumbs-slide-left .dipi-breadcrumbs-hover {
    transform: translateX(-100%) translateY(0);
    backface-visibility: hidden;
}

.dipi_breadcrumbs:hover .dipi-breadcrumbs-slide-left .dipi-breadcrumbs-hover {
    transform: translateX(0) translateY(0);
}

.dipi-breadcrumbs-slide-right .dipi-breadcrumbs-hover {
    transform: translateX(100%) translateY(0);
    backface-visibility: hidden;
}

.dipi_breadcrumbs:hover .dipi-breadcrumbs-slide-right .dipi-breadcrumbs-hover {
    transform: translateX(0) translateY(0);
}

.dipi-breadcrumbs-fade .dipi-breadcrumbs-content,
.dipi_breadcrumbs:hover .dipi-breadcrumbs-fade .dipi-breadcrumbs-hover {
    opacity: 1;
}

.dipi_breadcrumbs:hover .dipi-breadcrumbs-fade .dipi-breadcrumbs-content,
.dipi-breadcrumbs-fade .dipi-breadcrumbs-hover {
    opacity: 0;
}

.dipi-breadcrumbs-zoom .dipi-breadcrumbs-content,
.dipi_breadcrumbs:hover .dipi-breadcrumbs-zoom .dipi-breadcrumbs-hover {
    opacity: 1;
    transform: scale(1);
}

.dipi_breadcrumbs:hover .dipi-breadcrumbs-zoom .dipi-breadcrumbs-content,
.dipi-breadcrumbs-zoom .dipi-breadcrumbs-hover {
    opacity: 0;
    transform: scale(.8);
}

.dipi_breadcrumbs:hover .dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-breadcrumbs-content-innner {
    opacity: 0;
    transition: opacity .3s linear;
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-breadcrumbs-content-innner {
    transition: opacity .3s linear;
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content>div,
.dipi-breadcrumbs-container .dipi-breadcrumbs-hover>div {
    width: 100%;
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-icon-wrap,
.dipi-breadcrumbs-container .dipi-breadcrumbs-hover .dipi-icon-wrap {
    padding: 15px 0 0
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-image-wrap,
.dipi-breadcrumbs-container .dipi-breadcrumbs-hover .dipi-image-wrap {
    width: 100%;
    margin: auto;
    position: relative;
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-image-wrap img,
.dipi-breadcrumbs-container .dipi-breadcrumbs-hover .dipi-image-wrap img {
    border-style: solid;
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-content-icon-circle,
.dipi-breadcrumbs-container .dipi-breadcrumbs-hover .dipi-hover-icon-circle {
    padding: 25px;
    border-radius: 100%;
    line-height: 1;
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-content-icon-border,
.dipi-breadcrumbs-container .dipi-breadcrumbs-hover .dipi-hover-icon-border {
    border: 3px solid
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-text,
.dipi-breadcrumbs-container .dipi-breadcrumbs-hover .dipi-text {
    padding: 15px 0
}

.dipi-breadcrumbs-container .dipi-breadcrumbs-content .dipi-breadcrumbs-heading,
.dipi-breadcrumbs-container .dipi-breadcrumbs-hover .dipi-breadcrumbs-heading {
    margin: 0;
    font-weight: 700;
    font-size: 20px
}

.dipi-breadcrumbs-container .dipi-content-button,
.dipi-breadcrumbs-container .dipi-hover-button {
    display: inline-block;
    transition: all .2s !important;
}

.dipi-breadcrumbs-container .dipi-content-button:hover:after,
.dipi-breadcrumbs-container .dipi-hover-button:hover:after {
    font-size: inherit !important;
}

.dipi-breadcrumbs-container .dipi-content-button:hover:before,
.dipi-breadcrumbs-container .dipi-hover-button:hover:before {
    font-size: inherit !important;
}

/**
 * Alignment : Top;
 */
.breadcrumbs_align_front_top .dipi-breadcrumbs-content,
.breadcrumbs_align_front_top_left .dipi-breadcrumbs-content,
.breadcrumbs_align_front_top_right .dipi-breadcrumbs-content {
    align-items: flex-start !important;
}

.breadcrumbs_align_front_top .dipi-breadcrumbs-content-innner {
    text-align: center;
}

.breadcrumbs_align_front_top_left .dipi-breadcrumbs-content-innner {
    text-align: left;
}

.breadcrumbs_align_front_top_right .dipi-breadcrumbs-content-innner {
    text-align: right;
}

.breadcrumbs_align_front_top .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.breadcrumbs_align_front_top_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.breadcrumbs_align_front_top_right .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/**
 * Letf, Center, Right
 */
.breadcrumbs_align_front_left .dipi-breadcrumbs-content-innner {
    text-align: left;
}

.breadcrumbs_align_front_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.breadcrumbs_align_front_center .dipi-breadcrumbs-content-innner {
    text-align: center;
}

.breadcrumbs_align_front_right .dipi-breadcrumbs-content-innner {
    text-align: right;
}

.breadcrumbs_align_front_right .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/**
 * Bottom
 */
.breadcrumbs_align_front_bottom .dipi-breadcrumbs-content,
.breadcrumbs_align_front_bottom_left .dipi-breadcrumbs-content,
.breadcrumbs_align_front_bottom_right .dipi-breadcrumbs-content {
    align-items: flex-end !important;
}

.breadcrumbs_align_front_bottom .dipi-breadcrumbs-content-innner {
    text-align: center;
}

.breadcrumbs_align_front_bottom_left .dipi-breadcrumbs-content-innner {
    text-align: left;
}

.breadcrumbs_align_front_bottom_right .dipi-breadcrumbs-content-innner {
    text-align: right;
}

.breadcrumbs_align_front_bottom .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.breadcrumbs_align_front_bottom_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.breadcrumbs_align_front_bottom_right .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/**
 * Alignment Bacl : Top;
 */
.breadcrumbs_align_back_top .dipi-breadcrumbs-hover,
.breadcrumbs_align_back_top_left .dipi-breadcrumbs-hover,
.breadcrumbs_align_back_top_right .dipi-breadcrumbs-hover {
    align-items: flex-start !important;
}

.breadcrumbs_align_back_top .dipi-breadcrumbs-hover-innner {
    text-align: center;
}

.breadcrumbs_align_back_top_left .dipi-breadcrumbs-hover-innner {
    text-align: left;
}

.breadcrumbs_align_back_top_right .dipi-breadcrumbs-hover-innner {
    text-align: right;
}

.breadcrumbs_align_back_top .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.breadcrumbs_align_back_top_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.breadcrumbs_align_back_top_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/**
 * Letf, Center, Right
 */
.breadcrumbs_align_back_left .dipi-breadcrumbs-hover-innner {
    text-align: left;
}

.breadcrumbs_align_back_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.breadcrumbs_align_back_center .dipi-breadcrumbs-hover-innner {
    text-align: center;
}

.breadcrumbs_align_back_right .dipi-breadcrumbs-hover-innner {
    text-align: right;
}

.breadcrumbs_align_back_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/**
 * Bottom
 */
.breadcrumbs_align_back_bottom .dipi-breadcrumbs-hover,
.breadcrumbs_align_back_bottom_left .dipi-breadcrumbs-hover,
.breadcrumbs_align_back_bottom_right .dipi-breadcrumbs-hover {
    align-items: flex-end !important;
}

.breadcrumbs_align_back_bottom .dipi-breadcrumbs-hover-innner {
    text-align: center;
}

.breadcrumbs_align_back_bottom_left .dipi-breadcrumbs-hover-innner {
    text-align: left;
}

.breadcrumbs_align_back_bottom_right .dipi-breadcrumbs-hover-innner {
    text-align: right;
}

.breadcrumbs_align_back_bottom .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.breadcrumbs_align_back_bottom_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.breadcrumbs_align_back_bottom_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.dipi_breadcrumbs .et_pb_section_video_bg video {
    object-fit: cover;
    transition: 1.3s;
}

/* Home icon content */
.dipi_breadcrumbs .dipi-breadcrumb-home .dipi-home-icon:before,
.dipi-breadcrumb-home .dipi-home-icon:before {
    content: "\e074";
}

/* Home icon + text vertical centering (Divi 4 parity) */
.dipi-breadcrumb-home a span {
    display: flex;
    align-items: center;
}

.dipi-breadcrumb-home .dipi-home-icon {
    font-size: 14px;
    margin-right: 10px;
}

/* Smooth hover transitions (Divi 4 parity) */
.dipi-breadcrumbs .dipi-breadcrumb-item,
.dipi-breadcrumbs .dipi-breadcrumb-item a,
.dipi-breadcrumbs .dipi-separator-icon,
.dipi-breadcrumb-home .dipi-home-icon:before {
    transition: all .3s ease-in-out;
}

/* Fix for different height of active item and other items when padding is used */
.dipi-breadcrumbs .dipi-breadcrumb-item > a,
.dipi-breadcrumbs .dipi-breadcrumb-item > span a {
    display: inline-block;
}

/* Fix for separator icon not aligning vertically centered */
.dipi_breadcrumbs .dipi-breadcrumbs .dipi-separator-icon {
    display: block;
}
.dipi-button-grid-container {
    display: flex;
}

.dipi_button_grid .dipi-button-grid-container {
    height: 100%;
}

.dipi_button_grid .et-vb-module-options.et-vb-ui {
    max-height: 26px;
}
.dipi_button_grid_child  .dipi-button-wrap:hover,
.dipi_button_grid_child  .dipi-button-wrap {
    transition: all .3s ease 0ms !important;
}

body #page-container .dipi_button_grid_child  .dipi-button-wrap:after,
body #page-container .dipi_button_grid_child  .dipi-button-wrap:before {
    line-height: inherit;
    font-size: inherit !important;
}
.et_pb_module.dipi_button_grid_child ,
div.dipi_button_grid.et_pb_module .dipi-button-grid-container div.dipi_button_grid_child.et_pb_module {
    margin: 0.5em;
}
/* D5 renders no .et_pb_module_inner wrapper, so the module element itself has to be the
   flex container. Without it .et_pb_button stays display:inline, its padding does not grow
   the line box and wrapped rows overlap on the frontend. */
.dipi_button_grid_child {
    display: flex;
}
.dipi-button-grid[data-icon]:not([data-icon=""]):after {
    content: attr(data-icon);
}
/*
 * Pixel Card Stack — scroll-driven card stack.
 * Cards are the direct child modules of .dipi-card-stack__cards; no per-card wrapper, so a
 * looped child yields one card per loop instance. Every card has the same resting slot — the
 * single grid cell of the box, later cards above earlier ones in DOM order — so the box is exactly
 * as tall as the tallest card plus its padding; the pushed-up stack and the waiting queue overflow
 * it. Custom properties are scoped to the module wrapper, never :root.
 * Settings feed them through the style system (ModuleStylesTrait.php / module-styles.tsx):
 *   --dipi-card-stack-offset  Top Offset (cards.advanced.offset), 10vh default
 *   --dipi-card-stack-pinned  Pinned Stack (cards.advanced.pinnedStack): off (default) / on
 *   --dipi-card-stack-offset-target  Offset Target (cards.advanced.offsetTarget): card (default) / stack
 *   --dipi-card-stack-detect-menu  Detect Menu (cards.advanced.detectMenu): on (default) / off; the admin bar is always detected
 *   --dipi-card-stack-scroll-speed  Scroll Speed (cards.advanced.scrollSpeed): animation px per scrolled px, or with Auto Scroll the glide speed (column too), 100% default
 *   --dipi-card-stack-auto-scroll  Auto Scroll (cards.advanced.autoScroll): off (default) / on, one card per scroll gesture
 *   --dipi-card-stack-align   Equalize Card Height (cards.advanced.equalHeight): stretch (default) / start
 *   .dipi-card-stack--column  Column Layout (cards.advanced.column): cards in flow, sticky at the pin line
 *   Entry Animation: --dipi-card-stack-first-stacked / -overlap / -entry-direction / -entry-size / -entry-spacing /
 *     -entry-tilt-angle / -entry-tilt-origin / -entry-scale / -entry-fade / -entry-blur / -entry-fade-length
 *   Exit Animation:  --dipi-card-stack-exit-direction / -size / -step / -exit-length / -tilt-angle /
 *     -tilt-origin / -exit-scale / -exit-fade / -exit-blur / -exit-fade-length
 * public/js/CardStack.js (frontend + Visual Builder) drives:
 *   --dipi-card-stack-header  viewport pixels covered by fixed/sticky bars (admin bar, and menus with Detect Menu)
 *   --dipi-card-stack-inset   the box's top border + padding: Top Offset applies to the box edge,
 *                             the cards rest that much lower
 *   --dipi-card-stack-room / -room-bottom  room above / below the resting slot for the full stack:
 *                             around the pinned card, or above it with Offset Target = stack, else 0
 *   --dipi-card-stack-stick   how far below the pin line the column cards stick: the top room, 0 when pinned
 *   --dipi-card-stick         per column card of a pinned stack: how far below the pin line it sticks (its place)
 *   --dipi-card-room / -room-above  per column card of a pinned stack: bottom margin that ends every card's
 *                             margin box on the stack's end; the previous card's, taken off the top margin
 *   --dipi-card-x/-y/-rotate/-scale/-opacity/-visibility/-z  per card: its pose in the entry queue
 *                             until it lands, then in the exit stack (depth = cards on top)
 *   --dipi-card-stack-z       on the ancestors of every stack: earlier stacks above later ones, so a
 *                             stack's waiting cards hang over the rows that follow it
 * .dipi-card-stack--active marks the stack that is animating, so its ancestors win the z-order.
 * While a deck animates the runtime holds the page still and consumes the scroll input itself.
 * Without JS (or with reduced motion) the cards render as a plain pile in the resting slot.
 */
.dipi_card_stack {
    --dipi-card-stack-offset: 10vh;
    --dipi-card-stack-pinned: off;
    --dipi-card-stack-offset-target: card;
    --dipi-card-stack-detect-menu: on;
    --dipi-card-stack-scroll-speed: 100%;
    --dipi-card-stack-auto-scroll: off;
    --dipi-card-stack-first-stacked: on;
    --dipi-card-stack-overlap: on;
    --dipi-card-stack-entry-direction: 180deg;
    --dipi-card-stack-entry-size: 3;
    --dipi-card-stack-entry-spacing: 5vh;
    --dipi-card-stack-entry-tilt-angle: 0deg;
    --dipi-card-stack-entry-tilt-origin: 50% 50%;
    --dipi-card-stack-entry-scale: 2%;
    --dipi-card-stack-entry-fade: on;
    --dipi-card-stack-entry-fade-length: 100px;
    --dipi-card-stack-entry-blur: 0px;
    --dipi-card-stack-exit-direction: 0deg;
    --dipi-card-stack-size: 3;
    --dipi-card-stack-step: 3vh;
    --dipi-card-stack-exit-length: 100px;
    --dipi-card-stack-tilt-angle: 0deg;
    --dipi-card-stack-tilt-origin: 50% 50%;
    --dipi-card-stack-exit-scale: -5%;
    --dipi-card-stack-exit-fade: on;
    --dipi-card-stack-exit-fade-length: 100px;
    --dipi-card-stack-exit-blur: 0px;
    position: relative;
}

/*
 * Hidden probes: the JS reads their resolved `top` / `left` to get the length settings in px
 * whatever unit was used (% of `top` is the box height, of `left` the box width).
 */
.dipi_card_stack::before,
.dipi_card_stack::after,
.dipi-card-stack__cards::before,
.dipi-card-stack__cards::after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Pin line. */
.dipi_card_stack::before {
    top: calc(var(--dipi-card-stack-header, 0px) + var(--dipi-card-stack-offset));
}

/* Exit: card distance / fade length. */
.dipi_card_stack::after {
    top: var(--dipi-card-stack-step);
    left: var(--dipi-card-stack-exit-fade-length);
}

/* Entry: card spacing / fade length. */
.dipi-card-stack__cards::before {
    top: var(--dipi-card-stack-entry-spacing);
    left: var(--dipi-card-stack-entry-fade-length);
}

/* Exit: animation length. */
.dipi-card-stack__cards::after {
    top: var(--dipi-card-stack-exit-length);
}

/*
 * The box. module.json routes background, border, box shadow and spacing here, so the visible
 * box is what stays pinned. Rows 1 and 3 are the room for the stack beyond the resting slot (0 unless
 * pinned or Offset Target is the stack), row 2 holds every card (same cell, tallest wins).
 */
.dipi-card-stack__cards {
    position: relative;
    /* Above the page content the flying cards cross; fixed headers sit far higher. */
    z-index: 10;
    display: grid;
    grid-template-rows: var(--dipi-card-stack-room, 0px) auto var(--dipi-card-stack-room-bottom, 0px);
    align-items: var(--dipi-card-stack-align, stretch);
}

/* Individual transform properties, so a Transform set on the card module itself still composes. */
.dipi-card-stack__cards > .et_pb_module {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    z-index: var(--dipi-card-z, auto);
    translate: var(--dipi-card-x, 0px) var(--dipi-card-y, 0px);
    rotate: var(--dipi-card-rotate, 0deg);
    scale: var(--dipi-card-scale, 1);
    opacity: var(--dipi-card-opacity, 1);
    visibility: var(--dipi-card-visibility, visible);
}

/*
 * Column layout: the cards sit in flow with Card Spacing between them, so the module is as tall
 * as all of them, and each card sticks at the pin line while the next one scrolls in; the
 * pushed-up stack rises above the pin line — or, with the offset applied to the top of the stack, into
 * the room the first card leaves above itself. The box is the sticky containing block, so the whole stack
 * scrolls away once the last card has landed.
 */
.dipi-card-stack--column .dipi-card-stack__cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.dipi-card-stack--column .dipi-card-stack__cards > .et_pb_module {
    position: sticky;
    top: calc(var(--dipi-card-stack-header, 0px) + var(--dipi-card-stack-offset) + var(--dipi-card-stack-inset, 0px) + var(--dipi-card-stack-stick, 0px) + var(--dipi-card-stick, 0px));
}

.dipi-card-stack--column .dipi-card-stack__cards > .et_pb_module:first-child {
    margin-top: var(--dipi-card-stack-room, 0px);
}

/*
 * Card Spacing is the whole gap: the card's own bottom margin is replaced by the pinned stack's
 * per-card room (all margin boxes end on one line, so the cards let go of the pin line together),
 * which the next card's top margin takes back out of the flow.
 */
.dipi-card-stack--column .dipi-card-stack__cards > .et_pb_module {
    margin-bottom: var(--dipi-card-room, 0px);
}

.dipi-card-stack--column .dipi-card-stack__cards > .et_pb_module + .et_pb_module {
    margin-top: calc(var(--dipi-card-stack-entry-spacing) - var(--dipi-card-room-above, 0px));
}

/*
 * The box and the cards waiting in line below it float over the rows and sections that follow.
 * Divi gives every column its own stacking context (z-index: 2), so the stack's ancestors are
 * lifted above their later siblings — and above the ancestors of later stacks, whose own waiting
 * cards start further down (JS writes the descending --dipi-card-stack-z; 10 without it).
 */
.et_pb_section:has(.dipi_card_stack),
.et_pb_row:has(.dipi_card_stack),
.et_pb_row_inner:has(.dipi_card_stack),
.et_pb_column:has(.dipi_card_stack),
.et_pb_column_inner:has(.dipi_card_stack) {
    position: relative;
    z-index: var(--dipi-card-stack-z, 10);
}

/*
 * A scaled-up card can be wider than the page; clipped at the section edge it can not widen the
 * page into a horizontal scroll. `clip` (not hidden) keeps the section out of scroll-container
 * duty, so the column layout's sticky cards and the vertical overhang of the waiting cards stay.
 */
.et_pb_section:has(.dipi_card_stack) {
    overflow-x: clip;
}

/*
 * Not around the column layout: WebKit (Safari, every iOS browser) only moves a sticky box with the
 * scroll itself — on the scrolling thread — while no ancestor clips its overflow. Under any clipping
 * ancestor, `clip` included, the stuck cards are placed by the main thread a frame or two behind the
 * finger and shake by a few px with every change of speed. The page is clipped sideways at the
 * viewport instead (the body rule below), which is no ancestor in that sense.
 */
.et_pb_section:has(.dipi-card-stack--column) {
    overflow-x: visible;
}

/*
 * Divi's animation script sets `overflow-y: hidden` inline on #page-container (and `overflow-x: hidden`
 * on body) as soon as any module on the page has an entrance animation, and never takes it back. That
 * turns #page-container into a scroll container that never scrolls, so the column cards stop sticking.
 * Divi's own stylesheet lays the same trap on #et-boc below 980px (`overflow-x: hidden`, which makes
 * the other axis compute to `auto`) and on #et-main-area, so the cards stop sticking on phones and in
 * the builder's small previews while desktop looks fine — all three get the same treatment.
 * `visible`, not `clip`: a clipping ancestor of any kind takes the sticky cards off WebKit's scrolling
 * thread (see the section rule above). Divi's point — no sideways scrollbar from slide-in animations —
 * is kept by the body rule below, which clips at the viewport. !important because the overflow is an
 * inline style.
 *
 * Never in the Visual Builder's own window (`et-vb-root-ancestor` on its body; the preview frame is
 * `et-vb-app-ancestor` and still gets this): there the builder locks #page-container with
 * `overflow: hidden` while a settings modal is open, and an author !important would outrank that
 * inline lock and leave the modal unscrollable. Layouts whose stacks render in that window would
 * otherwise match it.
 */
body:not(.et-vb-root-ancestor):has(.dipi-card-stack--column) #page-container,
body:not(.et-vb-root-ancestor):has(.dipi-card-stack--column) #et-boc,
body:not(.et-vb-root-ancestor):has(.dipi-card-stack--column) #et-main-area {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/*
 * Same trap one level up in the Visual Builder: at tablet width and below Divi's builder CSS puts
 * `overflow-x: hidden` on <html>, and the theme script's inline `overflow-x: hidden` on <body> then
 * no longer propagates to the viewport — body becomes a scroll container that never scrolls and
 * the column cards stop sticking in the tablet, phone wide and phone previews. `clip` keeps the
 * sideways clipping without the scroll container, in the builder and on the frontend alike. On the
 * frontend it propagates to the viewport, so the body is no clipping ancestor of the sticky cards and
 * this is where the whole page — the wrappers above included — is clipped sideways.
 *
 * Only the horizontal axis: `clip` on one axis makes the other compute to `clip` as well, so this
 * clips without a scroll container on its own. Forcing `overflow-y` here would outrank the inline
 * `overflow: hidden` the builder locks the page with while a settings panel is open (author
 * !important beats inline), and the panel's own list would stop scrolling.
 */
body:not(.et-vb-root-ancestor):has(.dipi-card-stack--column) {
    overflow-x: clip !important;
    /*
     * iOS does not hold a finger to that clip: the waiting cards, scaled up past the page edge (their
     * section must not clip, see above), make the document a few px wider than the screen, and every
     * iOS browser then pans it sideways under a touch — most visibly during pull-to-refresh. With no
     * clipping ancestor allowed, the pan itself is ruled out instead. Scroll containers inside the page
     * (carousels, tables) keep their own sideways pan: touch-action stops at the nearest one.
     */
    touch-action: pan-y pinch-zoom;
}

/* The stack that is animating right now goes above every other stack's ancestors. */
.et_pb_section:has(.dipi-card-stack--active),
.et_pb_row:has(.dipi-card-stack--active),
.et_pb_row_inner:has(.dipi-card-stack--active),
.et_pb_column:has(.dipi-card-stack--active),
.et_pb_column_inner:has(.dipi-card-stack--active) {
    z-index: 100;
}

@media (prefers-reduced-motion: reduce) {
    .dipi-card-stack__cards > .et_pb_module {
        z-index: auto;
        visibility: visible;
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
        scale: 1;
    }
}

.dipi_carousel .et_pb_main_blurb_image .et-waypoint {
    opacity: 1 !important;
}

/* .dipi_carousel .dipi_carousel_child {
    border-style: solid;
    transition: all .3s ease-in-out !important;
  }
  
  .dipi_carousel .dipi_carousel_child:hover {
    transition: all .3s ease-in-out;
  } */

.dipi_carousel_child.swiper-slide .dipi_carousel_child {
    width: 100%;
}

.dipi_carousel .swiper-container .dipi_carousel_child {
    display: flex;
    position: relative;
    font-size: 14px;
    justify-content: flex-start;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    flex-direction: column;
    float: none !important;
    clear: none !important;
    height: auto;
    transition-property: transform;
    overflow: hidden;
    /* Added to fix not click card in safari*/
    pointer-events: auto;
    transform: translate(0);
}

/* Has been moved below. Check if this causes any issues. */
/* .dipi_carousel .swiper-container-3d .dipi-carousel-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  } */

/* Removed 'width: 0' code to fix issue of not showing carousel in firefox 
  when percentage of max-width setting is used in child module.
  Not sure when we need width: 0.
  * @since 20240810
  * @Author Roberto
  * @ticket 26651931 */
/* @-moz-document url-prefix() {
    .dipi_carousel .dipi-carousel-main[data-effect="coverflow"] .swiper-container .dipi-carousel-wrapper {
      width: 0 !important;
    }
  } */

.dipi_carousel .swiper-container .dipi-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    flex-wrap: nowrap;
    overflow: visible;
    /* FIXME: Maybe only use in .swiper-container-3d? */
    transform-style: preserve-3d;
    /* Added to fix not click card in safari*/
    pointer-events: none;
    /* Should be generated by npm */
    /* display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-transition-property: transform;
    -ms-flex-wrap: none; */
}

.dipi_carousel .swiper-pagination {
    text-align: center;
    width: 100%;
}

.dipi_carousel .swiper-pagination .swiper-pagination-bullets {
    bottom: 10px;
    left: 0;
    width: 100%;
}

.dipi_carousel .swiper-pagination .swiper-pagination-bullet {
    margin: 0 4px;
    width: 8px;
    height: 8px;
}

.dipi_carousel .swiper-pagination-bullets {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    /* -webkit-transform: translateX(-50%); */
}

.dipi_carousel .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0;
}

.dipi_carousel .swiper-button-next,
.dipi_carousel .swiper-button-prev {
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 50px;
    margin-top: 0;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;

    /* display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-transform: translateY(-50%);
    -webkit-transition: all .3s;
    -moz-transition:  all .3s;
    -o-transition:  all .3s; */
}

.dipi_carousel .swiper-button-next:after,
.dipi_carousel .swiper-button-prev:after {
    content: attr(data-icon);
    display: block;
    font-family: ETmodules;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.dipi_carousel .swiper-button-prev {
    left: -66px;
}

.dipi_carousel .swiper-button-next {
    right: -66px;
}

.dipi_carousel .swiper-button-next.swiper-button-disabled,
.dipi_carousel .swiper-button-prev.swiper-button-disabled {
    cursor: pointer;
    pointer-events: all;
}

.dipi_carousel .swiper-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: start;

    /* display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start; */
}

.dipi_carousel .swiper-container {
    overflow: hidden;
}

@media only screen and (min-width: 981px) {
    .dipi_carousel .hide_on_desktop {
        display: none !important;
    }

    .dipi_carousel .show_on_desktop_flex {
        display: flex !important;
    }

    .dipi_carousel .show_on_desktop_block {
        display: block !important;
    }

    .dipi_carousel.et_pb_module .swiper-arrow-button.show_on_hover {
        opacity: 0;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover {
        left: 0 !important;
    }

    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover {
        right: 0 !important;
    }

    .dipi_carousel.et_pb_module:hover .swiper-arrow-button.show_on_hover,
    .dipi_carousel.et_pb_module .swiper-arrow-button.show_on_hover:hover {
        opacity: 1;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover:before,
    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover:before {
        width: 100%;
        height: 100%;
        opacity: 1;
        content: " ";
        position: absolute;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover:before {
        left: 50%;
    }

    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover:before {
        right: 50%;
    }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
    .dipi_carousel .hide_on_tablet {
        display: none !important;
    }

    .dipi_carousel .show_on_tablet_flex {
        display: flex !important;
    }

    .dipi_carousel .show_on_tablet_block {
        display: block !important;
    }

    .dipi_carousel.et_pb_module .swiper-arrow-button.show_on_hover_t {
        opacity: 0;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover_t {
        left: 0 !important;
    }

    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover_t {
        right: 0 !important;
    }

    .dipi_carousel.et_pb_module:hover .swiper-arrow-button.show_on_hover_t,
    .dipi_carousel.et_pb_module .swiper-arrow-button.show_on_hover_t:hover {
        opacity: 1;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover_t:before,
    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover_t:before {
        width: 100%;
        height: 100%;
        opacity: 1;
        content: " ";
        position: absolute;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover_t:before {
        left: 50%;
    }

    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover_t:before {
        right: 50%;
    }
}

@media only screen and (max-width: 767px) {
    .dipi_carousel .hide_on_phone {
        display: none !important;
    }

    .dipi_carousel .show_on_phone_flex {
        display: flex !important;
    }

    .dipi_carousel .show_on_phone_block {
        display: block !important;
    }

    .dipi_carousel.et_pb_module .swiper-arrow-button.show_on_hover_p {
        opacity: 0;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover_p {
        left: 0 !important;
    }

    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover_p {
        right: 0 !important;
    }

    .dipi_carousel.et_pb_module:hover .swiper-arrow-button.show_on_hover_p,
    .dipi_carousel.et_pb_module .swiper-arrow-button.show_on_hover_p:hover {
        opacity: 1;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover_p:before,
    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover_p:before {
        width: 100%;
        height: 100%;
        opacity: 1;
        content: " ";
        position: absolute;
    }

    .dipi_carousel .swiper-button-prev.swiper-arrow-button.show_on_hover_p:before {
        left: 50%;
    }

    .dipi_carousel .swiper-button-next.swiper-arrow-button.show_on_hover_p:before {
        right: 50%;
    }
}
.dipi_carousel_child {
    display: flex;
    align-items: center;
}


.dipi-image-wrap {
    display: flex;
    position: relative;
    width: 100%;
}

.dipi_carousel .swiper-container .dipi-carousel-wrapper .dipi-carousel-image,
.dipi_carousel_child .dipi-carousel-child-wrapper {
    width: 100%;
}

.dipi-carousel-icon {
    transition: 0.3s;
}

.dipi-carousel-icon-circle-border {
    border: 3px solid;
}

.dipi-carousel-icon-circle {
    padding: 25px;
    border-radius: 100%;
    font-size: 48px;
}

.dipi_carousel_child .dipi-carousel-image {
    display: block;
    overflow: hidden;
    border-style: solid;
}

.dipi_carousel_child .dipi-carousel-image img {
    position: relative;
    border-style: solid;
    height: auto;
    display: block;
    width: 100%;
}

.dipi_carousel_child .dipi-carousel-item-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    border-style: solid;
    position: relative;
}

.dipi_carousel_child .dipi-carousel-item-title {
    margin-bottom: 15px;
    padding: 0;
}

.dipi_carousel_child .dipi-carousel-item-desc {
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 15px;
}

.dipi_carousel_child .dipi-carousel-button-wrapper {
    flex: 1;
}

.dipi_carousel_child .dipi-carousel-button {
    font-size: 20px;
    display: inline-block;
    border-style: solid;
}

.dipi_carousel_child .dipi-carousel-button:hover:after,
.dipi_carousel_child .dipi-carousel-button:hover:before {
    font-size: inherit !important;
    line-height: inherit;
}

.dipi_carousel .dipi-carousel-child-wrapper>a,
.et_pb_menu .et-menu-nav li .dipi_carousel .dipi-carousel-child-wrapper>a,
.et_pb_menu .et-menu-nav li ul.sub-menu .dipi_carousel .dipi-carousel-child-wrapper>a {
    height: auto;
}

.dipi-carousel-child-wrapper .dipi-carousel-image img {
    transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
    transition-duration: 1s;
}

.dipi-carousel-child-wrapper:hover .dipi-carousel-image.dipi-zoomin img {
    transform: scale(1.1);
}

.dipi-carousel-image.dipi-zoomout img {
    transform: scale(1.1);
}

.dipi-carousel-child-wrapper:hover .dipi-carousel-image.dipi-zoomout img {
    transform: scale(1);
}

.dipi-carousel-image.dipi-rotate img {
    height: 100%;
    width: 100%;
}

.dipi-carousel-child-wrapper:hover .dipi-carousel-image.dipi-rotate img {
    transform: scale(1.1) rotate(2deg);
}

.dipi-carousel-image.dipi-move-up img {
    transform: scale(1.15);
}

.dipi-carousel-child-wrapper:hover .dipi-carousel-image.dipi-move-up img {
    transform: scale(1.15) translateY(-10px);
}

.dipi-carousel-image.dipi-move-down img {
    transform: scale(1.15);
}

.dipi-carousel-child-wrapper:hover .dipi-carousel-image.dipi-move-down img {
    transform: scale(1.15) translateY(10px);
}

.dipi-carousel-image.dipi-move-right img {
    transform: scale(1.1);
}

.dipi-carousel-child-wrapper:hover .dipi-carousel-image.dipi-move-right img {
    transform: scale(1.1) translateX(10px);
}

.dipi-carousel-image.dipi-move-left img {
    transform: scale(1.1);
}

.dipi-carousel-child-wrapper:hover .dipi-carousel-image.dipi-move-left img {
    transform: scale(1.1) translateX(-10px);
}

.dipi-carousel-image {
    position: relative;
}

.dipi_carousel_child .dipi-carousel-image img.dipi-c-hover-img {
    position: absolute;
    top: 0;
}

.dipi-carousel-image.dipi-c-has-hover .dipi-c-img {
    transition: all .5;
    z-index: 1;
}

.dipi-carousel-image.dipi-c-has-hover:hover .dipi-c-img {
    opacity: 0;
}

.dipi_carousel_child .dipi-carousel-item-desc p:empty {
    padding: 0;
}
.circular_text_wrapper {
  --circular-text-speed: 10s;
  --circular-text-starting-offset: 0deg;
  --circular-text-direction: 1;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.circular_text_ring {
  position: relative;
}

.circular_text_center_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  max-width: unset;
}

.circular_text_center_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circular_text_rotator {
  transform-origin: center;
  rotate: var(--circular-text-starting-offset);
}

.circular_text_rotator.animate_continous {
  animation: circular-text-spin var(--circular-text-speed) linear infinite;
}

@keyframes circular-text-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(calc(360deg * var(--circular-text-direction)));
  }
}

.circular_text_bg_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.dipi_content_slider .dipi-content-slider {
    display: flex;
    flex-direction: column;
    position: relative;
    direction: ltr;
}
.dipi_content_slider .dipi-content-slider .dipi-navigation {
    position: absolute;
    width: 100%;
    z-index: 1;
}
.dipi_content_slider .dipi-content-slider .dipi-navigation .dipi-nav-button {
    justify-content: center;
    align-items: center;
}
.dipi_content_slider .dipi-content-slider .dipi-navigation .dipi-prev-button{
    cursor: pointer;
    transform:translate(-100%, -50%);
    position: absolute;
    left: 0px;
}
.dipi_content_slider .dipi-content-slider .dipi-navigation .dipi-next-button{
    cursor: pointer;
    transform:translate(100%, -50%);
    position: absolute;
    right: 0px;
}
.dipi_content_slider .dipi-next-button:after,
.dipi_content_slider .dipi-prev-button:after {
    content: attr(data-icon);
    display: block;
    font-family: ETmodules;
    box-sizing: border-box;
    transition: all .2s ease-in-out;
}
.dipi_content_slider.et_pb_module .dipi-nav-button.show_on_hover {
    opacity: 0;
}
.dipi_content_slider .dipi-prev-button.dipi-nav-button.show_on_hover {
    left: 0 !important;
}
.dipi_content_slider .dipi-next-button.dipi-nav-button.show_on_hover {
    right: 0 !important;
}
.dipi_content_slider.et_pb_module:hover .dipi-nav-button.show_on_hover,
.dipi_content_slider.et_pb_module .dipi-nav-button.show_on_hover:hover
{
  opacity: 1;
}
.dipi_content_slider .dipi-nav-button.dipi-cs-nav-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
    pointer-events: none;
}
.dipi_content_slider.et_pb_module:hover .dipi-nav-button.dipi-cs-nav-disabled.show_on_hover {
    opacity: 0.5 !important;
}
.dipi_content_slider .dipi-content-slider.label-top .dipi-progress-line,
.dipi_content_slider .dipi-content-slider.label-top .content-slider-gradations-wrapper
{
    order: 2;
}
.dipi_content_slider .dipi-content-slider-items {
    display: flex;
    justify-content: space-between;
}
.dipi_content_slider .dipi-content-slider.dipi-cs-paged {
    --dipi-cs-items-per-view: 1;
}
.dipi_content_slider .dipi-content-slider.dipi-cs-paged .dipi-content-slider-items {
    position: relative;
    display: block;
    width: 100%;
}
.dipi_content_slider .dipi-content-slider.dipi-cs-paged .dipi-content-slider-items > .et_pb_module,
.dipi_content_slider .dipi-content-slider.dipi-cs-paged .dipi_content_slider_child {
    box-sizing: border-box;
    will-change: left, transform, opacity;
    max-width: calc(100% / var(--dipi-cs-items-per-view)) !important;
    min-width: 0;
}
.dipi_content_slider .dipi-content-slider.dipi-cs-slide-next .dipi-content-slider-items > .et_pb_module,
.dipi_content_slider .dipi-content-slider.dipi-cs-slide-next .dipi_content_slider_child {
    transition:
        left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease-out;
}
.dipi_content_slider .dipi-content-slider.dipi-cs-slide-prev .dipi-content-slider-items > .et_pb_module,
.dipi_content_slider .dipi-content-slider.dipi-cs-slide-prev .dipi_content_slider_child {
    transition:
        left 0.5s cubic-bezier(0.33, 0, 0.1, 1),
        transform 0.5s cubic-bezier(0.33, 0, 0.1, 1),
        opacity 0.42s ease-in;
}
.dipi_content_slider .dipi-content-slider.dipi-cs-paged .content-slider-item {
    transform: none;
    width: 100%;
    max-width: 100%;
    align-items: center;
}
.dipi_content_slider .dipi-content-slider.dipi-cs-paged .dipi_content_slider_child .content-slider-label,
.dipi_content_slider .dipi-content-slider.dipi-cs-paged .dipi_content_slider_child .content-slider-desc,
.dipi_content_slider .dipi-content-slider.dipi-cs-paged .dipi-content-slider-items > .et_pb_module .content-slider-label,
.dipi_content_slider .dipi-content-slider.dipi-cs-paged .dipi-content-slider-items > .et_pb_module .content-slider-desc {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    max-width: 100%;
}

.dipi_content_slider .dipi-progress-line {
    background: #d8d8d8;
    width: 100%;
    height: 7px;
    position: relative;
    display: flex;
    align-items: center;
    border-style: solid;
}
.dipi_content_slider div.dipi-content-slider  .dipi-progress-line {
    overflow: visible;
}
.dipi_content_slider .dipi-progress-line-active {
    background: #FF4200;
    width: 50%;
    height: 7px;
    transition: all 0.3s;
    border-style: solid;
}
.dipi_content_slider .dipi-progress-line-event-placeholder {
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.dipi_content_slider .dipi-content-slider.slider_with_pin .dipi-slider-pin,
.dipi_content_slider .dipi-content-slider.slider_with_line .dipi-progress-line,
.dipi_content_slider .dipi-content-slider.slider_with_line .dipi-progress-line-active,
.dipi_content_slider .dipi-content-slider.slider_with_line .dipi-progress-line-event-placeholder,
.dipi_content_slider .dipi-content-slider.slider_with_label .content-slider-item {
    cursor: pointer;
}
.dipi_content_slider .dipi-slider-pin {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 7px solid #FF4200;
    background: white;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    z-index: 1;
}
.dipi_content_slider .dipi_content_slider_child.et_pb_module {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    margin-bottom: 0;
}
.dipi_content_slider .dipi_content_slider_child:last-child {
    width: 0;
    flex-grow: 0;
}
.dipi_content_slider .content-slider-item {
    transform: translateX(-50%);
    width: fit-content;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.dipi_content_slider .content-slider-gradations-wrapper {
    transition: all 0.3s;
}
.dipi_content_slider .content-slider-gradations {
    width: 1px;
    height: 10px;
    background: #FF4200;
    display: block;
    margin: auto;
    transition: all 0.3s;
}
.dipi_content_slider .content-slider-item.active .content-slider-gradations {
    width: 1px;
    height: 10px;
}
.dipi_content_slider  .content-slider-label {
    display: block;
    text-align: center;
    border-style: solid;
    padding: 4px 8px;
    transition: all 0.3s;
}
.dipi_content_slider .content-slider-desc {
    flex-grow: 1;
    border-style: solid;
    padding: 4px 8px;
    transition: all 0.3s;
}
.dipi_content_slider_child {
    margin-bottom: 0!important;
}
/* D5 removed global .et_pb_blurb_position_top centering — restore it for library layouts */
.dipi-layout-content .et_pb_blurb_position_top .et_pb_main_blurb_image {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.dipi-layout-content .et_pb_blurb_position_top .et_pb_blurb_content {
    text-align: center;
}

.dipi-anim-preload .dipi_content_toggle * {
    transition: none !important;
}

.dipi-anim-preload .dipi-content-toggle-container {
    display: none !important;
}

/* Toggle Switch Button Styles */
.dipi-content-toggle__button-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 30px;
}

.dipi-content-toggle__button {
    position: relative;
    display: inline-block;
    width: 4.4em;
    height: 2.2em;
    vertical-align: middle;
}

input.dipi-content-toggle__switch {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.dipi-content-toggle__slider {
    background-color: #d3d3d3;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 100em;
}

.dipi-content-toggle__slider:before {
    position: absolute;
    content: "";
    height: 1.8em;
    width: 1.8em;
    left: 0.2em;
    bottom: .2em;
    -webkit-transition: .4s;
    transition: .4s;
    background-color: #fff;
    border-radius: 50%;
}

input.dipi-content-toggle__switch:checked + .dipi-content-toggle__slider {
    background: #ff4200;
}

input.dipi-content-toggle__switch:checked + .dipi-content-toggle__slider:before {
    transform: translateX(2.2em);
}

.dipi-content-toggle__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.dipi-content-toggle__text h1,
.dipi-content-toggle__text h2,
.dipi-content-toggle__text h3,
.dipi-content-toggle__text h4,
.dipi-content-toggle__text h5,
.dipi-content-toggle__text h6 {
    margin: 0;
    padding: 0;
}

.dipi-content-toggle__first-text {
    margin-right: 12px;
    cursor: pointer;
}

.dipi-content-toggle_second-text {
    margin-left: 12px;
    cursor: pointer;
}

.dipi-content-toggle__second-layout {
    display: none;
}

.dipi-content-toggle-container, .dipi-content-toggle-content, .dipi-content-toggle-hover {
    width: 100%;
}

.dipi-content-toggle-container {
    position: relative;
    perspective: 1000px;
    /*overflow: hidden;*/
    transition: 1.3s;
    border-style: solid;
}

.dipi-content-toggle-inner-wrapper {
    position: relative;
    transition: 1.3s;
    border-style: solid;
}
 .dipi-content-toggle-content, 
 .dipi-content-toggle-hover {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    padding: 30px;
    border-style: solid;
    transition: 1s;
}

.dipi-hover-button:after {
    font-size: inherit !important; 
    line-height: inherit !important;
}
.dipi-hover-button[data-icon]:not([data-icon=""]):after{
    content: attr(data-icon);
}

.dipi-content-toggle-slide-top .dipi-content-toggle-hover {
    transform: translateX(0) translateY(100%);
    backface-visibility: hidden;
}

.dipi_content_toggle:hover .dipi-content-toggle-slide-top .dipi-content-toggle-hover {
    transform: translateX(0) translateY(0);
}

.dipi-content-toggle-slide-bottom .dipi-content-toggle-hover {
    transform: translateX(0) translateY(-100%);
    backface-visibility: hidden;
}

.dipi_content_toggle:hover .dipi-content-toggle-slide-bottom .dipi-content-toggle-hover {
    transform: translateX(0) translateY(0);
}

.dipi-content-toggle-slide-left .dipi-content-toggle-hover {
    transform: translateX(-100%) translateY(0);
    backface-visibility: hidden;
}

.dipi_content_toggle:hover .dipi-content-toggle-slide-left .dipi-content-toggle-hover {
    transform: translateX(0) translateY(0);
}

.dipi-content-toggle-slide-right .dipi-content-toggle-hover {
    transform: translateX(100%) translateY(0);
    backface-visibility: hidden;
}

.dipi_content_toggle:hover .dipi-content-toggle-slide-right .dipi-content-toggle-hover {
    transform: translateX(0) translateY(0);
}

.dipi-content-toggle-fade .dipi-content-toggle-content,
.dipi_content_toggle:hover .dipi-content-toggle-fade .dipi-content-toggle-hover {
    opacity: 1;
}

.dipi_content_toggle:hover .dipi-content-toggle-fade .dipi-content-toggle-content,
.dipi-content-toggle-fade .dipi-content-toggle-hover {
    opacity: 0;
}

.dipi-content-toggle-zoom .dipi-content-toggle-content,
.dipi_content_toggle:hover .dipi-content-toggle-zoom .dipi-content-toggle-hover {
    opacity: 1;
    transform: scale(1);
}

.dipi_content_toggle:hover .dipi-content-toggle-zoom .dipi-content-toggle-content,
.dipi-content-toggle-zoom .dipi-content-toggle-hover {
    opacity: 0;
    transform: scale(.8);
}

.dipi_content_toggle:hover .dipi-content-toggle-container .dipi-content-toggle-content .dipi-content-toggle-content-innner {
    opacity: 0;
    transition: opacity .3s linear;
}
.dipi-content-toggle-container .dipi-content-toggle-content .dipi-content-toggle-content-innner {
    transition: opacity .3s linear;
}

.dipi-content-toggle-container .dipi-content-toggle-content > div,
.dipi-content-toggle-container .dipi-content-toggle-hover > div {
  width: 100%;
}

.dipi-content-toggle-container .dipi-content-toggle-content .dipi-icon-wrap, 
.dipi-content-toggle-container .dipi-content-toggle-hover .dipi-icon-wrap {
    padding: 15px 0 0
}

.dipi-content-toggle-container .dipi-content-toggle-content .dipi-image-wrap,
.dipi-content-toggle-container .dipi-content-toggle-hover .dipi-image-wrap {
    width: 100%;
    margin: auto;
    position: relative;
}

.dipi-content-toggle-container .dipi-content-toggle-content .dipi-image-wrap img, 
.dipi-content-toggle-container .dipi-content-toggle-hover .dipi-image-wrap img {
    border-style: solid;
}

.dipi-content-toggle-container .dipi-content-toggle-content .dipi-content-icon-circle,
.dipi-content-toggle-container .dipi-content-toggle-hover .dipi-hover-icon-circle {
    padding: 25px;
    border-radius: 100%;
    line-height: 1;
}

.dipi-content-toggle-container .dipi-content-toggle-content .dipi-content-icon-border,
.dipi-content-toggle-container .dipi-content-toggle-hover .dipi-hover-icon-border {
    border: 3px solid
}

.dipi-content-toggle-container .dipi-content-toggle-content .dipi-text,
.dipi-content-toggle-container .dipi-content-toggle-hover .dipi-text {
    padding: 15px 0
}

.dipi-content-toggle-container .dipi-content-toggle-content .dipi-content-toggle-heading, 
.dipi-content-toggle-container .dipi-content-toggle-hover .dipi-content-toggle-heading {
    margin: 0;
    font-weight: 700;
    font-size: 20px
}

.dipi-content-toggle-container .dipi-content-button,
.dipi-content-toggle-container .dipi-hover-button {
    display: inline-block;
    transition: all .2s !important;
}

.dipi-content-toggle-container .dipi-content-button:hover:after,
.dipi-content-toggle-container .dipi-hover-button:hover:after {
  font-size: inherit  !important;
}

.dipi-content-toggle-container .dipi-content-button:hover:before,
.dipi-content-toggle-container .dipi-hover-button:hover:before {
  font-size: inherit !important;
}

/**
 * Alignment : Top;
 */
.content_toggle_align_front_top .dipi-content-toggle-content,
.content_toggle_align_front_top_left .dipi-content-toggle-content,
.content_toggle_align_front_top_right .dipi-content-toggle-content {
    align-items: flex-start !important;
}

.content_toggle_align_front_top .dipi-content-toggle-content-innner {
    text-align: center;
}

.content_toggle_align_front_top_left .dipi-content-toggle-content-innner {
    text-align: left;
}

.content_toggle_align_front_top_right .dipi-content-toggle-content-innner {
    text-align: right;
}

.content_toggle_align_front_top .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.content_toggle_align_front_top_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.content_toggle_align_front_top_right .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}
/**
 * Letf, Center, Right
 */
.content_toggle_align_front_left .dipi-content-toggle-content-innner {
    text-align: left;
}

.content_toggle_align_front_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important; 
    margin-right: auto !important;
}

.content_toggle_align_front_center .dipi-content-toggle-content-innner {
    text-align: center;
}

.content_toggle_align_front_right .dipi-content-toggle-content-innner {
    text-align: right;
}

.content_toggle_align_front_right .dipi-content-image-icon-wrap {
    margin-left: auto !important; 
    margin-right: 0 !important;
}

/**
 * Bottom
 */
.content_toggle_align_front_bottom .dipi-content-toggle-content,
.content_toggle_align_front_bottom_left .dipi-content-toggle-content,
.content_toggle_align_front_bottom_right .dipi-content-toggle-content {
    align-items: flex-end !important;
}

.content_toggle_align_front_bottom .dipi-content-toggle-content-innner {
    text-align: center;
}

.content_toggle_align_front_bottom_left .dipi-content-toggle-content-innner {
    text-align: left;
}

.content_toggle_align_front_bottom_right .dipi-content-toggle-content-innner {
    text-align: right;
}

.content_toggle_align_front_bottom .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.content_toggle_align_front_bottom_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.content_toggle_align_front_bottom_right .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/**
 * Alignment Bacl : Top;
 */
.content_toggle_align_back_top .dipi-content-toggle-hover,
.content_toggle_align_back_top_left .dipi-content-toggle-hover,
.content_toggle_align_back_top_right .dipi-content-toggle-hover {
    align-items: flex-start !important;
}

.content_toggle_align_back_top .dipi-content-toggle-hover-innner {
    text-align: center;
}

.content_toggle_align_back_top_left .dipi-content-toggle-hover-innner {
    text-align: left;
}

.content_toggle_align_back_top_right .dipi-content-toggle-hover-innner {
    text-align: right;
}

.content_toggle_align_back_top .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.content_toggle_align_back_top_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.content_toggle_align_back_top_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}
/**
 * Letf, Center, Right
 */
.content_toggle_align_back_left .dipi-content-toggle-hover-innner {
    text-align: left;
}

.content_toggle_align_back_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important; 
    margin-right: auto !important;
}

.content_toggle_align_back_center .dipi-content-toggle-hover-innner {
    text-align: center;
}

.content_toggle_align_back_right .dipi-content-toggle-hover-innner {
    text-align: right;
}

.content_toggle_align_back_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important; 
    margin-right: 0 !important;
}

/**
 * Bottom
 */
.content_toggle_align_back_bottom .dipi-content-toggle-hover,
.content_toggle_align_back_bottom_left .dipi-content-toggle-hover,
.content_toggle_align_back_bottom_right .dipi-content-toggle-hover {
    align-items: flex-end !important;
}

.content_toggle_align_back_bottom .dipi-content-toggle-hover-innner {
    text-align: center;
}

.content_toggle_align_back_bottom_left .dipi-content-toggle-hover-innner {
    text-align: left;
}

.content_toggle_align_back_bottom_right .dipi-content-toggle-hover-innner {
    text-align: right;
}

.content_toggle_align_back_bottom .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.content_toggle_align_back_bottom_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.content_toggle_align_back_bottom_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.dipi_content_toggle  .et_pb_section_video_bg video {
    object-fit: cover;
    transition: 1.3s;
}
/**
 * Pixel Conversation — chat mockup styles.
 *
 * Every skin is expressed as custom properties on the conversation wrapper and consumed by
 * single-class rules. Divi writes the user's own design settings against the module order class,
 * which always wins on specificity, so any skin default can be overridden from the module settings.
 *
 * Layout uses logical properties throughout so RTL mirrors without a single `[dir]` override.
 *
 * One thing is deliberately not here: the conversation paints no background of its own. It sits
 * inside the module's padding, so a colour on it stops at the padding edge and leaves a band of the
 * module's own background around it — which is exactly what a chat surface must not do. The skins
 * that want a coloured surface seed `module.decoration.background` instead (see
 * `visual-builder/callbacks/on-skin-change.ts`), which paints the whole module box, padding
 * included, and is the same field Content > Background offers the user.
 */

.dipi-conversation {
    --dipi-conv-max-width: 80%;

    /**
     * How narrow a text bubble is allowed to get. A bubble hugs its text, which for "Ok" or a single
     * emoji is a sliver barely wider than its own corner radius — real chat apps keep a floor under
     * it so a short reply still reads as a bubble. A skin that wants more room under a rounder corner
     * can restate it the way it restates every other value here.
     */
    --dipi-conv-min-width: 56px;
    --dipi-conv-gap: 8px;

    /* A run from the same sender stays tight whatever the message spacing — that closeness is what
       makes a run read as one burst — but never looser than the spacing itself, so Design > Message
       List > Message Spacing below 5px tightens runs too, down to nothing at 0. */
    --dipi-conv-group-gap: min(5px, var(--dipi-conv-gap));
    --dipi-conv-avatar-size: 34px;
    --dipi-conv-avatar-radius: 50%;

    /**
     * How far the typing indicator is set in from the edge: the skin's avatar column. Resolved here,
     * on the wrapper, so it is fixed at the skin's size — a message that resizes its own avatar
     * redeclares `--dipi-conv-avatar-size` on itself, and would otherwise drag the indicator of that
     * one message sideways with it.
     */
    --dipi-conv-typing-indent: calc(var(--dipi-conv-avatar-size) + 8px);

    /* The letter that stands in when a message has no avatar picture. Each skin restates these,
       which is what makes the fallback follow the chat style out of the box. */
    --dipi-conv-initial-bg: #8c8c93;
    --dipi-conv-initial-color: #ffffff;
    --dipi-conv-initial-size: 14px;
    --dipi-conv-initial-weight: 600;
    --dipi-conv-media-size: 89px;
    --dipi-conv-radius: 18px;
    --dipi-conv-radius-tight: 6px;
    --dipi-conv-pad-block: 8px;
    --dipi-conv-pad-inline: 13px;
    --dipi-conv-font-size: 15px;
    --dipi-conv-line-height: 1.45;
    --dipi-conv-in-bg: #ececee;
    --dipi-conv-in-color: #1b1b1f;
    --dipi-conv-out-bg: #d8dce1;
    --dipi-conv-out-color: #1b1b1f;
    --dipi-conv-bubble-shadow: none;
    --dipi-conv-bubble-border: 0 solid transparent;
    --dipi-conv-sender-color: rgba(0, 0, 0, 0.62);
    --dipi-conv-sender-size: 12px;
    --dipi-conv-meta-color: rgba(0, 0, 0, 0.45);
    --dipi-conv-meta-size: 11px;
    --dipi-conv-status-color: rgba(0, 0, 0, 0.4);
    --dipi-conv-status-read-color: #3b9cf0;
    --dipi-conv-reaction-bg: #ffffff;
    --dipi-conv-reaction-border: rgba(0, 0, 0, 0.08);
    --dipi-conv-reaction-size: 13px;

    /**
     * How tall the reaction chip comes out: its line box, plus a pixel of padding and a pixel of
     * border on each side. Derived rather than measured, because it has to be known before the chip
     * is laid out — the chip is taken out of flow, so the space it hangs in has to be reserved for
     * it by the row above. Kept in step with the `line-height` and the padding in
     * `.dipi-conversation-message__reactions`.
     */
    --dipi-conv-reaction-height: calc(var(--dipi-conv-reaction-size) * 1.5 + 4px);
    --dipi-conv-tail-size: 7px;

    /* How far a message rises into place. Read by the keyframes and by the room the list keeps. */
    --dipi-conv-rise: 14px;

    /* How far it carries past its resting place before settling — the "pop". */
    --dipi-conv-pop: 5px;

    /**
     * A Height set in the Design tab gives the module box a definite size, which is what this
     * percentage resolves against — the conversation then hands that height down to the list, which
     * scrolls. With no height set it resolves to `auto` and the whole arrangement collapses back to
     * a plain column that grows with its messages, so nothing scrolls that does not have to.
     */
    display: flex;
    flex-direction: column;
    block-size: 100%;
}

.dipi-conversation__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--dipi-conv-gap);

    /**
     * `flex-grow: 0` with `margin-block-start: auto` is what pins the messages to the bottom, and it
     * has to be the list itself rather than anything inside it. An `auto` margin on the first child
     * lives *inside* the scroll container, where it counts towards scroll height: a conversation of
     * two messages reported 14px more scrollHeight than clientHeight and showed a scrollbar with
     * nothing to scroll. Out here the margin is laid out by the conversation, not the scroller, so a
     * list that fits reports no overflow at all.
     *
     * `min-block-size: 0` is what allows a flex item to shrink below its content; without it the
     * list keeps its full height and spills past the module instead of scrolling.
     */
    flex: 0 1 auto;
    min-block-size: 0;
    margin-block-start: auto;
    overflow-y: auto;

    /**
     * Scrolls, but shows no scrollbar. A chat surface is a piece of artwork on the page rather than
     * a pane of the interface, and a system scrollbar down the side of a phone mockup gives that
     * away immediately. The list still scrolls by wheel, drag, touch, keyboard and by the player
     * following the message it is revealing — only the indicator is gone.
     *
     * Two declarations because the standard property and the WebKit pseudo-element are answers to
     * the same question from different eras; a browser that understands neither simply keeps its
     * scrollbar, which is a visible default rather than a broken one.
     */
    scrollbar-width: none;

    /**
     * Bubble tails are drawn a few pixels outside the list box. Scrolling one axis promotes the
     * other from `visible` to `auto`, so an outgoing tail would raise a horizontal scrollbar and an
     * incoming one would be sliced off. Reserving the tail width as padding brings both back inside
     * the scroll container, and the matching negative margin cancels that padding again so every
     * bubble sits exactly where it did before.
     */
    padding-inline: var(--dipi-conv-tail-size);
    margin-inline: calc(var(--dipi-conv-tail-size) * -1);
}

.dipi-conversation__list::-webkit-scrollbar {
    display: none;
}

/**
 * Divi puts a bottom margin on every module in a column — 2.75% of the row's width, so the wider the
 * row the bigger it gets — and the messages are modules. Here the spacing between messages is the
 * list's own gap (Design > Message List > Message Spacing), so that margin comes off.
 *
 * `!important` because one version of Divi's rule (inside a Theme Builder layout) carries an ID the
 * selector cannot outweigh; `:where()` keeps the selector itself as light as possible, so a margin
 * set in a message's own Design > Spacing — also written with `!important`, against its order
 * class — still wins.
 */
:where(.dipi-conversation__list) > .dipi-conversation-message {
    margin-block-end: 0 !important;
}

/**
 * Nothing in the list shrinks to fit it — the list scrolls instead.
 *
 * A flex column with a constrained height squashes its items to make room, and a squashed message
 * keeps drawing its bubble at full height because its own overflow is visible. The result is
 * messages painted on top of each other rather than a scrollbar. Applied to every child so anything
 * the user drops between the messages is safe too.
 */
.dipi-conversation__list > * {
    flex: 0 0 auto;
}

/**
 * The module takes the full width of its column, for every style that is not a phone.
 *
 * A Divi 5 column lays its modules out with flex, where a module with no width of its own is only
 * as wide as its content — and while the conversation plays in, the messages that have not landed
 * yet take up no room. The module started narrow and widened as each message arrived. The phone
 * frame asks for the full width itself (see `:has(> .dipi-conversation-device)`); this does the same
 * for the chat panel and the plain conversation.
 *
 * `:where()` keeps it a default at no specificity at all, so a Width or Max Width from
 * Design > Sizing replaces it.
 */
:where(:has(> .dipi-conversation-panel), :has(> .dipi-conversation)) {
    inline-size: 100%;
}

/* -------------------------------------------------------------------------- */
/* Phone mockup — what the iOS, Material and Green Messenger styles look like  */
/* -------------------------------------------------------------------------- */

/**
 * The mockup is chrome only: a status bar, a title bar and a dead input row around the real
 * conversation. Everything is expressed as custom properties so the two platforms share one set of
 * rules and differ only in the values further down.
 *
 * The frame wraps `.dipi-conversation` rather than living inside it, so none of the skin variables
 * or design settings on the conversation itself are disturbed by it.
 *
 * The values below are the iOS ones; the Material block at the end of this section overrides the
 * handful that differ. Only these two chat styles draw a frame at all.
 *
 * Border, corner radius and box shadow are deliberately absent here: `on-skin-change.ts` seeds them
 * onto the module's own Design > Border / Box Shadow fields instead (`border-radius` below just
 * `inherit`s the result), the same fields every other chat style already uses for its card. That
 * keeps them editable in the Design panel instead of fixed in this file — the one thing still fixed
 * here is which two chat styles get a frame at all.
 */

/**
 * That border/shadow paints on the module box the frame sits inside, not the frame itself — and a
 * column can be wider than a phone, which would draw the outline around the full column width while
 * a narrower, centred phone sat inside it. The frame fills this box and this box is what is capped
 * and centred, so the outline is always flush against the frame.
 *
 * The 420px here is a fallback only: picking a phone style seeds the same number as the module's own
 * Max Width, which is written against the module order class and outranks this rule, so the user can
 * raise it and the frame grows with it. This keeps a module that somehow has no Max Width — one saved
 * before that seed existed, or one the user cleared — from stretching to a full-column phone.
 *
 * The module box is also the frame's layout context, and it is a flex column for one reason: it is
 * the only way to hand the frame a module Height without a percentage. A `block-size: 100%` on the
 * frame is a percentage against this box, and a percentage that resolves against a box sized by its
 * own contents comes back as the contents' height — a definite height, which beats `aspect-ratio`
 * outright. That is what kept the phone growing with each message that played in and shrinking back
 * while the conversation was empty. As a flex item the frame needs no percentage at all: with no
 * Height set there is no free space to take, so the ratio sizes it; with a Height set this box is
 * definite and `flex-grow` fills it.
 *
 * `<style>` and `<noscript>` are the only other children here and both are `display: none`, so they
 * generate no flex items and the frame is laid out alone.
 *
 * `inline-size: 100%` is the width half of the same care. A ratio can only work out a height from a
 * width it can actually measure, and a box left to shrink to fit takes its width from its contents —
 * which would put the widest message bubble back in charge of how big the phone is, empty chat
 * narrow and short, first message wider and taller. Asking for the full width of whatever this sits
 * in gives the ratio a number that has nothing to do with the messages, in every layout Divi might
 * drop the module into.
 */
:has(> .dipi-conversation-device) {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 420px;
    margin-inline: auto;

    /**
     * The module clips the frame, rather than the frame rounding itself. A box's own clip follows
     * the inner edge of its border — the outer radius less the border width — so the bars meet the
     * module's rounded edge exactly, whatever Border width and radius are set. A frame that took the
     * module's radius for its own was rounder than that inner edge by the border width, and left a
     * sliver of the module's background showing in each corner.
     */
    overflow: hidden;
}

.dipi-conversation-device {
    --dipi-device-line: rgba(0, 0, 0, 0.09);
    --dipi-device-ink: #111114;
    --dipi-device-muted: #8a8f98;
    --dipi-device-accent: #007aff;
    --dipi-device-control-bg: #eceff3;
    --dipi-device-pad: 16px;

    display: flex;
    flex-direction: column;
    /**
     * The frame takes the module box's width rather than capping itself: how wide the phone is, and
     * therefore how tall, is the module's own Max Width, seeded at 420px when a phone style is picked
     * (see `PHONE_WIDTH` in `visual-builder/callbacks/on-skin-change.ts`) and editable from
     * Design > Sizing like any other. The 420px on the module box above is only a fallback for a
     * module that has no Max Width of its own — a Divi module's own rules outrank it, so raising Max
     * Width still grows the phone.
     */
    inline-size: 100%;
    /**
     * A real phone screen is portrait, so the frame defaults to one instead of whatever height it
     * happens to inherit. Nothing inside it is allowed a say in that: `flex-basis: auto` with no
     * `block-size` leaves the ratio to size the frame off its own (capped) width, and
     * `min-block-size: 0` keeps the automatic minimum of a flex item — which is the height of its
     * contents — from pushing past the ratio once the messages are in. The frame is therefore the
     * same box whether the conversation is empty, playing in or complete; the screen below shrinks to
     * fit it and the message list scrolls, exactly as it does when a Height is set on a frameless
     * chat style.
     *
     * `flex-grow` is what still lets a module Height (the user's own, from Design > Sizing) win: it
     * makes this box definite, and the frame takes the room it opens up. See the module box above.
     */
    aspect-ratio: 9 / 16;
    flex: 1 1 auto;
    min-block-size: 0;
    /* No screen colour of its own: the module's Content > Background is the phone's screen, seeded
       per platform in on-skin-change.ts, so it can be recoloured like any other chat style. */
    /* The corners are the module's: its Design > Border > Radius, seeded per platform in
       on-skin-change.ts, clips the frame (see the module box above). */
}

.dipi-conversation-device__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--dipi-device-pad) 6px;
    color: var(--dipi-device-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.dipi-conversation-device__status-icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--dipi-device-ink);
}

.dipi-conversation-device__status-icons svg {
    display: block;
    block-size: 11px;
    inline-size: auto;
    fill: currentColor;
}

/**
 * Title bar. The three-column grid is what centres the title against the whole bar rather than
 * against the space left over by the back control, which is how a real title bar reads.
 */
.dipi-conversation-device__bar {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    padding: 8px var(--dipi-device-pad) 12px;
    border-block-end: 1px solid var(--dipi-device-line);
}

.dipi-conversation-device__back {
    display: inline-flex;
    align-items: center;
    color: var(--dipi-device-accent);
}

.dipi-conversation-device__back svg {
    display: block;
    block-size: 16px;
    inline-size: auto;
}

.dipi-conversation-device__title {
    grid-column: 2;
    text-align: center;
    color: var(--dipi-device-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

/**
 * The screen. It is the part of the frame that absorbs the difference between an empty conversation
 * and a full one: `flex: 1 1 auto` lets it take the room the chrome leaves and give it back again,
 * and `min-block-size: 0` is what allows the giving back — a floor here would be handed straight on
 * to the frame as a taller box the moment the messages outgrew it, which is the resizing the ratio
 * above exists to prevent. An empty screen still reads as a real one because the frame is sized by
 * its ratio rather than by what is in it, so there is nothing left to collapse.
 */
.dipi-conversation-device__screen {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    padding: 0 12px;
}

/**
 * Inside the frame the conversation is sized by flex layout, so the `block-size: 100%` it carries
 * for a frameless chat style is taken back off: it is another percentage against a box sized by its
 * contents, and it would put the messages' own height back into the chain the frame's ratio exists
 * to keep them out of.
 */
.dipi-conversation-device__screen > .dipi-conversation {
    flex: 1 1 auto;
    block-size: auto;
    min-block-size: 0;
}

/**
 * The screen's breathing room above and below the messages lives inside the scrolling list, not on
 * the screen around it. On the screen it was a band the list could not scroll into, so a long
 * conversation was cut off 14px short of the title bar and the compose bar instead of scrolling
 * under them.
 *
 * The bottom padding also takes over from the room the sequenced list reserves for the rise (see
 * `.dipi-conversation--sequenced .dipi-conversation__list`): it is at least as tall, so the rising
 * message still stays inside the scroll area, and dropping the negative margin keeps the list from
 * reaching down over the compose bar.
 */
.dipi-conversation-device__screen .dipi-conversation .dipi-conversation__list {
    padding-block: 14px max(14px, var(--dipi-conv-rise));
    margin-block-end: 0;
}

.dipi-conversation-device__compose {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--dipi-device-pad) 16px;
    border-block-start: 1px solid var(--dipi-device-line);
}

.dipi-conversation-device__plus,
.dipi-conversation-device__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background-color: var(--dipi-device-control-bg);
    color: var(--dipi-device-muted);
    font-size: 19px;
    line-height: 1;
}

.dipi-conversation-device__send svg {
    display: block;
    block-size: 15px;
    inline-size: auto;
    fill: currentColor;
}

/* The dead input. A span rather than an input so nothing in the mockup is focusable or submittable. */
.dipi-conversation-device__field {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 8px 14px;
    border: 1px solid var(--dipi-device-line);
    border-radius: 999px;
    color: var(--dipi-device-muted);
    font-size: 14px;
    line-height: 1.4;
    /* A long placeholder truncates instead of wrapping the row onto two lines. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------- */
/* Phone mockup — Material                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Material differs in shape and weight rather than in structure: a tighter corner radius (seeded
 * onto the module's own Border > Radius by on-skin-change.ts, same as the iOS one), a left-aligned
 * title, a filled send button and no attachment control.
 */
.dipi-conversation-device--android {
    --dipi-device-accent: #1b1b1f;
    --dipi-device-control-bg: #e8def8;
    --dipi-device-pad: 14px;
}

.dipi-conversation-device--android .dipi-conversation-device__status {
    font-size: 13px;
    font-weight: 500;
}

.dipi-conversation-device--android .dipi-conversation-device__bar {
    grid-template-columns: 28px 1fr;
    gap: 10px;
    border-block-end: 0;
}

.dipi-conversation-device--android .dipi-conversation-device__title {
    grid-column: 2;
    text-align: start;
    font-size: 16px;
    font-weight: 500;
}

.dipi-conversation-device--android .dipi-conversation-device__compose {
    border-block-start: 0;
}

.dipi-conversation-device--android .dipi-conversation-device__field {
    background-color: #f3edf7;
    border-color: transparent;
}

.dipi-conversation-device--android .dipi-conversation-device__send {
    inline-size: 34px;
    block-size: 34px;
    color: #21005d;
}

/* -------------------------------------------------------------------------- */
/* Phone mockup — iOS and Material, Dark                                       */
/* -------------------------------------------------------------------------- */

/**
 * The same frame with its status bar, title bar and input row drawn for a dark screen. Only the
 * chrome changes: the screen is the module's Content > Background (seeded dark when the style is
 * picked), and the messages keep their own settings.
 *
 * Every fill and line here is white at some opacity rather than a solid dark grey, so the controls
 * are tinted by whatever screen colour is behind them — navy, brown or black alike — instead of
 * sitting on it as grey patches.
 */
.dipi-conversation-device--dark {
    --dipi-device-ink: #ffffff;
    --dipi-device-muted: rgba(255, 255, 255, 0.6);
    --dipi-device-line: rgba(255, 255, 255, 0.18);
    --dipi-device-accent: #0a84ff;
    --dipi-device-control-bg: rgba(255, 255, 255, 0.16);
}

/* iOS dark mode's own input row: an outlined, lightly filled field, so it still reads as a field. */
.dipi-conversation-device--ios.dipi-conversation-device--dark .dipi-conversation-device__field {
    border-color: var(--dipi-device-line);
    background-color: rgba(255, 255, 255, 0.08);
}

.dipi-conversation-device--ios.dipi-conversation-device--dark :is(.dipi-conversation-device__plus, .dipi-conversation-device__send) {
    color: rgba(255, 255, 255, 0.85);
}

.dipi-conversation-device--android.dipi-conversation-device--dark {
    --dipi-device-accent: rgba(255, 255, 255, 0.9);
    --dipi-device-muted: rgba(255, 255, 255, 0.7);
}

.dipi-conversation-device--android.dipi-conversation-device--dark .dipi-conversation-device__field {
    background-color: rgba(255, 255, 255, 0.1);
}

.dipi-conversation-device--android.dipi-conversation-device--dark .dipi-conversation-device__send {
    color: rgba(255, 255, 255, 0.9);
}

/* -------------------------------------------------------------------------- */
/* Phone mockup — Green Messenger                                              */
/* -------------------------------------------------------------------------- */

/**
 * The iOS frame, re-dressed: the chat wallpaper runs behind the bars as well as the messages, the
 * title bar names the contact (see `DeviceSkinTrait::device_contact()`) and its controls float as
 * white pills, and the input row carries the camera and a green microphone.
 */
.dipi-conversation-device--whatsapp {
    --dipi-device-ink: #0b141a;
    --dipi-device-accent: #0b141a;
    --dipi-device-muted: #54656f;
    --dipi-device-control-bg: #ffffff;
    --dipi-device-line: rgba(11, 20, 26, 0.08);
    --dipi-device-bar-bg: #f6f5f3;
    --dipi-device-green: #25d366;
}

.dipi-conversation-device--whatsapp .dipi-conversation-device__status,
.dipi-conversation-device--whatsapp .dipi-conversation-device__bar,
.dipi-conversation-device--whatsapp .dipi-conversation-device__compose {
    background-color: var(--dipi-device-bar-bg);
}

.dipi-conversation-device--whatsapp .dipi-conversation-device__bar {
    grid-template-columns: 34px 34px minmax(0, 1fr) auto;
    gap: 10px;
    padding-block: 6px 10px;
    border-block-end: 1px solid var(--dipi-device-line);
}

/* The back chevron and the call buttons sit on white pills, the way the app floats them. */
.dipi-conversation-device--whatsapp .dipi-conversation-device__back,
.dipi-conversation-device--whatsapp .dipi-conversation-device__actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 34px;
    border-radius: 999px;
    background-color: var(--dipi-device-control-bg);
    box-shadow: 0 1px 3px rgba(11, 20, 26, 0.12);
}

.dipi-conversation-device--whatsapp .dipi-conversation-device__back svg {
    block-size: 14px;
}

.dipi-conversation-device--whatsapp .dipi-conversation-device__actions {
    gap: 16px;
    padding-inline: 12px;
    color: var(--dipi-device-ink);
}

.dipi-conversation-device--whatsapp .dipi-conversation-device__actions svg {
    display: block;
    inline-size: 19px;
    block-size: 19px;
}

.dipi-conversation-device__avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background-color: #c9d4cc;
    color: #3b4a54;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.dipi-conversation-device__avatar img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.dipi-conversation-device--whatsapp .dipi-conversation-device__title {
    grid-column: auto;
    overflow: hidden;
    font-size: 15px;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dipi-conversation-device--whatsapp .dipi-conversation-device__compose {
    gap: 10px;
    border-block-start: 0;
}

/* A bare plus, not the grey disc iOS draws. */
.dipi-conversation-device--whatsapp .dipi-conversation-device__plus {
    inline-size: auto;
    background-color: transparent;
    color: var(--dipi-device-ink);
    font-size: 26px;
    font-weight: 300;
}

/* An empty white pill with the sticker icon at its far end, instead of placeholder text. */
.dipi-conversation-device--whatsapp .dipi-conversation-device__field {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-block-size: 34px;
    padding-block: 0;
    padding-inline-end: 10px;
    background-color: var(--dipi-device-control-bg);
    color: var(--dipi-device-muted);
}

.dipi-conversation-device__sticker,
.dipi-conversation-device__camera svg {
    display: block;
    inline-size: 20px;
    block-size: 20px;
}

.dipi-conversation-device__camera {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--dipi-device-ink);
}

.dipi-conversation-device--whatsapp .dipi-conversation-device__send {
    inline-size: 34px;
    block-size: 34px;
    background-color: var(--dipi-device-green);
    color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Phone mockup — Blue Messenger                                               */
/* -------------------------------------------------------------------------- */

/**
 * The iOS frame, re-dressed: a white-to-blue wash behind the status and title bars, the contact
 * with a presence dot and "Active now" in the title bar, blue call icons, and the input row's own
 * tools, "Aa" field and thumbs-up.
 */
.dipi-conversation-device--messenger {
    --dipi-device-ink: #050505;
    --dipi-device-accent: #0866ff;
    --dipi-device-muted: #65676b;
    --dipi-device-control-bg: #f0f0f0;
    --dipi-device-line: transparent;
}

/* One horizontal gradient on both bars, so the two read as one header. */
.dipi-conversation-device--messenger .dipi-conversation-device__status,
.dipi-conversation-device--messenger .dipi-conversation-device__bar {
    background-image: linear-gradient(90deg, #ffffff 40%, #d4e4ff 100%);
}

.dipi-conversation-device--messenger .dipi-conversation-device__bar {
    grid-template-columns: 16px 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding-block: 6px 10px;
}

.dipi-conversation-device--messenger .dipi-conversation-device__avatar {
    inline-size: 40px;
    block-size: 40px;
}

/* Presence dot, ringed in white so it reads against the picture. */
.dipi-conversation-device--messenger .dipi-conversation-device__avatar::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-end: -1px;
    inline-size: 11px;
    block-size: 11px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: #31a24c;
}

.dipi-conversation-device--messenger .dipi-conversation-device__title {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
    text-align: start;
}

.dipi-conversation-device__name {
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dipi-conversation-device__subtitle {
    color: var(--dipi-device-muted);
    font-size: 12px;
    font-weight: 400;
}

.dipi-conversation-device--messenger .dipi-conversation-device__actions {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    color: var(--dipi-device-accent);
}

.dipi-conversation-device--messenger .dipi-conversation-device__actions svg {
    display: block;
    inline-size: 22px;
    block-size: 22px;
    fill: currentColor;
}

.dipi-conversation-device--messenger .dipi-conversation-device__compose {
    gap: 12px;
    padding-inline: 12px;
}

.dipi-conversation-device__tools {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    color: var(--dipi-device-accent);
}

.dipi-conversation-device__tools svg {
    display: block;
    inline-size: 22px;
    block-size: 22px;
    fill: currentColor;
}

/* A grey pill with "Aa" at the start and the emoji button at the end. */
.dipi-conversation-device--messenger .dipi-conversation-device__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-block: 6px;
    padding-inline: 14px 8px;
    border-color: transparent;
    background-color: var(--dipi-device-control-bg);
}

.dipi-conversation-device__placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dipi-conversation-device__emoji {
    display: block;
    flex: 0 0 auto;
    inline-size: 22px;
    block-size: 22px;
    fill: var(--dipi-device-accent);
}

/* The thumbs-up stands on its own, with no disc behind it. */
.dipi-conversation-device--messenger .dipi-conversation-device__send {
    inline-size: auto;
    block-size: auto;
    background-color: transparent;
    color: var(--dipi-device-accent);
}

.dipi-conversation-device--messenger .dipi-conversation-device__send svg {
    block-size: 24px;
}

/* -------------------------------------------------------------------------- */
/* Message row                                                                 */
/* -------------------------------------------------------------------------- */

/**
 * A message is a column: the avatar/bubble row, then the meta row. The sender name sits in the
 * bubble's column inside that row, directly above the bubble.
 *
 * The avatar shares the row with the bubble column and nothing else. That is what makes it align
 * to the bottom of the bubble rather than the bottom of the whole message, and what lets a larger
 * avatar grow upwards beside the name instead of pushing the name away from the bubble.
 */
.dipi-conversation-message {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 100%;

    /**
     * Every part of a message is as wide as it needs to be and no wider. The two rules below pick
     * the side it hugs; this is what a message falls back to when neither applies — without it the
     * default `stretch` hands the row the full width of the list, the row hands it to the bubble, and
     * a two-word message is drawn as a full-width slab.
     */
    align-items: flex-start;
}

.dipi-conversation-message--left {
    align-items: flex-start;
    text-align: start;
}

.dipi-conversation-message--right {
    align-items: flex-end;
    text-align: end;
}

.dipi-conversation-message__row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-inline-size: var(--dipi-conv-max-width);
}

.dipi-conversation-message--left .dipi-conversation-message__row {
    flex-direction: row;
}

.dipi-conversation-message--right .dipi-conversation-message__row {
    flex-direction: row-reverse;
}

/* One line of text: centre the avatar on the bubble. Measured in JS, because whether the text
   wraps depends on the available width. With no JavaScript the class is absent and the avatar
   bottom-aligns, which is the correct fallback. */
.dipi-conversation-message--single-line .dipi-conversation-message__row {
    align-items: center;
}

/**
 * Reactions overhang the bubble; padding on the row reserves the room they hang in, so the message
 * below is not sat on. The avatar aligns to the end of the row's content box, so the reservation
 * leaves it level with the bottom of the bubble rather than pushing it down with the chip.
 *
 * Exactly the overhang, no more: the chip's top edge is pinned to the bottom of the text (see the
 * rule further down), so what hangs below the bubble is the rest of the chip once the bubble's own
 * bottom padding is taken off it.
 */
.dipi-conversation-message--has-reactions .dipi-conversation-message__row {
    padding-block-end: calc(var(--dipi-conv-reaction-height) - var(--dipi-conv-pad-block));
}

/**
 * A centred avatar is centred on the bubble column, and the sender name above the bubble is part of
 * that column — so the avatar would sit half a name too high. A top margin as tall as the name takes
 * it back down onto the bubble's own centre. Only where the name is actually drawn: a message that
 * continues a run from the same side hides it (see the grouping rules further down).
 */
.dipi-conversation-message--single-line:not(.dipi-conversation-message--left + .dipi-conversation-message--left):not(.dipi-conversation-message--right + .dipi-conversation-message--right) .dipi-conversation-message__row:has(> .dipi-conversation-message__body > .dipi-conversation-message__sender) > .dipi-conversation-message__avatar-wrap {
    margin-block-start: calc(var(--dipi-conv-sender-size) * 1.3 + 3px);
}

/**
 * The slot the avatar occupies, and the empty slot a grouped message keeps so its bubbles stay
 * aligned. `--dipi-conv-avatar-size` is the single source of truth for the avatar column: the skin
 * sets it, and a message that overrides the Avatar size redeclares it on itself (see the child's
 * ModuleStylesTrait). `min-block-size` rather than `block-size` so an avatar given a taller custom
 * height grows the slot with it instead of overflowing, while an empty slot keeps the full square.
 */
.dipi-conversation-message__avatar-wrap {
    flex: 0 0 auto;
    inline-size: var(--dipi-conv-avatar-size);
    min-block-size: var(--dipi-conv-avatar-size);
}

.dipi-conversation-message__avatar {
    display: block;
    inline-size: var(--dipi-conv-avatar-size);
    block-size: var(--dipi-conv-avatar-size);
    border-radius: var(--dipi-conv-avatar-radius);
    object-fit: cover;
}

/**
 * The initial fills the same square the picture would, so a thread of messages lines up whether or
 * not each one has an avatar. Everything here is a skin default: the Avatar Initial design group
 * writes against the module order class, which outranks these single-class rules.
 */
.dipi-conversation-message__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--dipi-conv-avatar-size);
    block-size: var(--dipi-conv-avatar-size);
    border-radius: var(--dipi-conv-avatar-radius);
    background-color: var(--dipi-conv-initial-bg);
    color: var(--dipi-conv-initial-color);
    font-size: var(--dipi-conv-initial-size);
    font-weight: var(--dipi-conv-initial-weight);
    line-height: 1;
    /* One letter in a small circle: no room for a descender to push it off centre. */
    text-align: center;
    text-transform: uppercase;
    user-select: none;
}

/**
 * Wraps the bubble only — the row above owns the max width.
 *
 * `align-items` is the same story as on the message itself: a flex column stretches its items by
 * default, and the bubble is one, so anything that made this box wider than the text — a reaction
 * hanging off the corner, a media group, a row the avatar had already sized — was passed straight on
 * to the bubble. Hugging the message's own side instead leaves the bubble sized by its content.
 */
.dipi-conversation-message__body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    max-inline-size: 100%;
}

.dipi-conversation-message--left .dipi-conversation-message__body {
    align-items: flex-start;
}

.dipi-conversation-message--right .dipi-conversation-message__body {
    align-items: flex-end;
}

.dipi-conversation-message__sender {
    display: block;
    margin-block-end: 3px;
    margin-inline: 4px;
    color: var(--dipi-conv-sender-color);
    font-size: var(--dipi-conv-sender-size);
    line-height: 1.3;
}

/* -------------------------------------------------------------------------- */
/* Bubble                                                                      */
/* -------------------------------------------------------------------------- */

.dipi-conversation-message__bubble {
    position: relative;
    display: inline-block;
    /**
     * `min()` rather than the variable alone: the floor must never outgrow the ceiling, or a bubble
     * in a column narrower than the floor would push its way out of the conversation instead of
     * wrapping inside it.
     */
    min-inline-size: min(var(--dipi-conv-min-width), 100%);
    max-inline-size: 100%;
    padding: var(--dipi-conv-pad-block) var(--dipi-conv-pad-inline);
    border: var(--dipi-conv-bubble-border);
    border-radius: var(--dipi-conv-radius);
    box-shadow: var(--dipi-conv-bubble-shadow);
    font-size: var(--dipi-conv-font-size);
    line-height: var(--dipi-conv-line-height);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/**
 * Everything a chat style gives the bubble — colours here, padding, border, radius and shadow on
 * the rule above — is a default the message's own Design > Bubble settings replace. Those are
 * written against the message's order class, so the side is wrapped in `:where()` to keep these
 * rules at a single class: any value set in the settings wins, whatever the style.
 */
:where(.dipi-conversation-message--left) .dipi-conversation-message__bubble {
    background-color: var(--dipi-conv-in-bg);
    color: var(--dipi-conv-in-color);
}

:where(.dipi-conversation-message--right) .dipi-conversation-message__bubble {
    background-color: var(--dipi-conv-out-bg);
    color: var(--dipi-conv-out-color);
}

/**
 * The one corner that is not the settings' to round: the one a tail is drawn from. The tail's sharp
 * vertex is drawn to meet a square corner exactly, so any rounding there — the style's or the
 * settings' — would peel it away and leave a sliver of background between the two. Deliberately
 * more specific than the settings, and only where a tail is actually drawn: not with the tail
 * switched off, not on stickers and images, and not on a bubble that continues a run (only the last
 * one of a run has a tail). Neutral, Light, Dark and Minimal Messenger draw one only where the
 * message asks for it (Show Bubble Tail: Show). Every other corner takes the radius from the
 * settings.
 */
:where(.dipi-conversation:not(.dipi-conversation--neutral, .dipi-conversation--wechat, .dipi-conversation--dark, .dipi-conversation--minimal)) .dipi-conversation-message--left:not(.dipi-conversation-message--no-tail, .dipi-conversation-message--sticker, .dipi-conversation-message--image, :has(+ .dipi-conversation-message--left)) .dipi-conversation-message__bubble,
:where(.dipi-conversation--neutral, .dipi-conversation--wechat, .dipi-conversation--dark, .dipi-conversation--minimal) .dipi-conversation-message--left.dipi-conversation-message--tail:not(.dipi-conversation-message--sticker, .dipi-conversation-message--image, :has(+ .dipi-conversation-message--left)) .dipi-conversation-message__bubble {
    border-end-start-radius: 0;
}

:where(.dipi-conversation:not(.dipi-conversation--neutral, .dipi-conversation--wechat, .dipi-conversation--dark, .dipi-conversation--minimal)) .dipi-conversation-message--right:not(.dipi-conversation-message--no-tail, .dipi-conversation-message--sticker, .dipi-conversation-message--image, :has(+ .dipi-conversation-message--right)) .dipi-conversation-message__bubble,
:where(.dipi-conversation--neutral, .dipi-conversation--wechat, .dipi-conversation--dark, .dipi-conversation--minimal) .dipi-conversation-message--right.dipi-conversation-message--tail:not(.dipi-conversation-message--sticker, .dipi-conversation-message--image, :has(+ .dipi-conversation-message--right)) .dipi-conversation-message__bubble {
    border-end-end-radius: 0;
}

.dipi-conversation-message__text > *:first-child {
    margin-block-start: 0;
    padding-block-start: 0;
}

.dipi-conversation-message__text > *:last-child {
    margin-block-end: 0;
    padding-block-end: 0;
}

/**
 * Tail — drawn in the bubble's own background colour, so recolouring a bubble carries over.
 *
 * `--dipi-conv-tail-color` is written onto the message by the Bubble group's background colour (see
 * `ModuleStylesTrait.php` and its Visual Builder twin). A border colour cannot be inherited from the
 * box the triangle hangs off, so it has to be handed over like this; the skin's own colour is the
 * fallback, which is what a bubble filled with a gradient or an image falls back to as well.
 *
 * The box sits flush against the bubble's tail-side corner (that corner is squared off above): one
 * border is the outward-facing inline side (transparent),
 * the other is the block-end (coloured), and together they form a right triangle whose vertical
 * edge runs flush along the bubble and whose point hangs below, outside it — verified by rendering
 * this exact rule in a browser rather than by eye, since this shape is easy to get mirror-swapped.
 */
.dipi-conversation-message__bubble::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inline-size: 0;
    block-size: 0;
    pointer-events: none;
}

.dipi-conversation-message--left .dipi-conversation-message__bubble::after {
    inset-inline-start: calc(var(--dipi-conv-tail-size) * -1);
    border-inline-start: var(--dipi-conv-tail-size) solid transparent;
    border-block-end: var(--dipi-conv-tail-size) solid var(--dipi-conv-tail-color, var(--dipi-conv-in-bg));
}

.dipi-conversation-message--right .dipi-conversation-message__bubble::after {
    inset-inline-end: calc(var(--dipi-conv-tail-size) * -1);
    border-inline-end: var(--dipi-conv-tail-size) solid transparent;
    border-block-end: var(--dipi-conv-tail-size) solid var(--dipi-conv-tail-color, var(--dipi-conv-out-bg));
}

.dipi-conversation-message--no-tail .dipi-conversation-message__bubble::after,
.dipi-conversation-message--sticker .dipi-conversation-message__bubble::after {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* Consecutive messages from the same side read as one group                   */
/* -------------------------------------------------------------------------- */

.dipi-conversation-message--left + .dipi-conversation-message--left,
.dipi-conversation-message--right + .dipi-conversation-message--right {
    margin-block-start: calc(var(--dipi-conv-group-gap) - var(--dipi-conv-gap));
}

.dipi-conversation-message--left + .dipi-conversation-message--left .dipi-conversation-message__sender,
.dipi-conversation-message--right + .dipi-conversation-message--right .dipi-conversation-message__sender {
    display: none;
}

/**
 * Keep the slot so the bubbles stay aligned, but only the last message of a run shows the face —
 * the end of the run is where a real chat puts it, alongside the tail, which the rule below keeps
 * on that same message. The sender name stays at the top of the run, where the name of whoever is
 * about to speak belongs.
 *
 * "Last" means last *on screen*, not last in the markup. While a conversation plays in, the
 * messages that have not landed yet take up no space at all, so the face has to sit on the newest
 * message of the run and move down as the next one lands — which is what a live chat does. The test
 * is therefore on `.is-shown`, the class the player adds as each message arrives, rather than on
 * markup order: a run of three reads as one message with a face, then two, then three, with the
 * face travelling down.
 *
 * A message being typed does not take the face yet. Its row is hidden while the indicator is in the
 * box (see the `is-typing` rule further down), so there would be nothing to move the face onto; it
 * stays on the message before until the typed one actually lands.
 *
 * Without JavaScript nothing carries `.is-shown` and every face would show, so the `<noscript>`
 * block in `RenderCallbackTrait` restates this against markup order instead.
 */
.dipi-conversation-message--left:has(+ .dipi-conversation-message--left.is-shown) :is(.dipi-conversation-message__avatar, .dipi-conversation-message__initial),
.dipi-conversation-message--right:has(+ .dipi-conversation-message--right.is-shown) :is(.dipi-conversation-message__avatar, .dipi-conversation-message__initial) {
    visibility: hidden;
}

/* Only the last bubble of a run keeps its tail. Browsers without :has() keep every tail, which
   is a harmless fallback rather than a broken layout. */
.dipi-conversation-message--left:has(+ .dipi-conversation-message--left) .dipi-conversation-message__bubble::after,
.dipi-conversation-message--right:has(+ .dipi-conversation-message--right) .dipi-conversation-message__bubble::after {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* Media, stickers and reactions                                               */
/* -------------------------------------------------------------------------- */

/**
 * Sticker and image messages render at a fixed square by default. This is only the default: the
 * Image / Sticker design group writes width, height and object-fit against the module order class,
 * which outranks these single-class rules, so the size stays fully adjustable per message.
 */
.dipi-conversation-message__media {
    display: block;
    inline-size: var(--dipi-conv-media-size);
    block-size: var(--dipi-conv-media-size);
    max-inline-size: 100%;
    /* A photo in a bubble reads as a thumbnail, so it fills the square. */
    object-fit: cover;
    /* No frame of our own, and none inherited from a theme that borders every img. */
    border: 0;
    /* The picture now carries the bubble shape itself, so it takes the full radius. */
    border-radius: var(--dipi-conv-radius);
}

/**
 * Several pictures in one bubble, arranged the way a chat app groups a photo burst.
 *
 * The images are laid out but never resized here: each one keeps the size from the rule above, and
 * therefore keeps whatever the Image / Sticker design group writes over it. Restating a size on the
 * group would tie with that rule on specificity and turn the outcome into a question of stylesheet
 * order, so the tracks are `auto` and the pictures size the grid rather than the other way round.
 */
.dipi-conversation-message__media-group {
    /* Three across is the widest arrangement; the counts that read better narrower say so below. */
    --dipi-conv-media-columns: 3;

    display: grid;
    grid-template-columns: repeat(var(--dipi-conv-media-columns), auto);
    gap: var(--dipi-conv-media-gap, 4px);
    /* Shrink to the pictures so the bubble does not stretch to the full message width. */
    inline-size: fit-content;
    max-inline-size: 100%;
}

.dipi-conversation-message__media-group[data-count="1"] {
    --dipi-conv-media-columns: 1;
}

/* Two side by side, and four as a square — both read better than a single row of four. */
.dipi-conversation-message__media-group[data-count="2"],
.dipi-conversation-message__media-group[data-count="4"] {
    --dipi-conv-media-columns: 2;
}

/**
 * A group can outgrow a narrow bubble, so the pictures give up their fixed square there. `min-width`
 * on a grid item defaults to its content size, which would keep the images at full width and push
 * the group past the bubble instead of letting the columns shrink.
 */
.dipi-conversation-message__media-group > .dipi-conversation-message__media {
    min-inline-size: 0;
    max-inline-size: 100%;
}

/**
 * Image and sticker messages carry no bubble chrome — no padding ring, no background, no border,
 * no shadow and no tail. The picture is the message, so anything drawn around it reads as a frame.
 */
:where(.dipi-conversation-message--image, .dipi-conversation-message--sticker) .dipi-conversation-message__bubble {
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;

    /* The picture is the message, so there is no bubble to keep a minimum width under. */
    min-inline-size: 0;
}

.dipi-conversation-message--image .dipi-conversation-message__bubble::after {
    display: none;
}

.dipi-conversation-message--sticker .dipi-conversation-message__media {
    /* A sticker is artwork on a transparent ground — fit it whole rather than cropping it. */
    object-fit: contain;
    border-radius: 0;
}

/**
 * The chip is anchored by its top edge to where the text ends, not by its bottom edge to the
 * bubble's. Hung from the bottom it rode up over the last line of the message; from here it sits in
 * the bubble's own bottom padding and hangs the rest of the way out, clear of every line of text.
 *
 * `100%` of an absolutely positioned child's containing block is the bubble's padding box, so
 * taking the bubble's bottom padding off it lands exactly on the last line's baseline box — which
 * means a restyled bubble padding or a resized reaction moves the chip with it rather than eating
 * into the message.
 */
.dipi-conversation-message__reactions {
    position: absolute;
    inset-block-start: calc(100% - var(--dipi-conv-pad-block));
    inset-inline-end: 8px;
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--dipi-conv-reaction-border);
    border-radius: 999px;
    background-color: var(--dipi-conv-reaction-bg);
    font-size: var(--dipi-conv-reaction-size);
    line-height: 1.5;
    white-space: nowrap;
}

.dipi-conversation-message--left .dipi-conversation-message__reactions {
    inset-inline-end: auto;
    inset-inline-start: 8px;
}

/* -------------------------------------------------------------------------- */
/* Meta row: timestamp + read status                                           */
/* -------------------------------------------------------------------------- */

/**
 * The meta row hangs from the bottom of the bubble column rather than sitting in it. In flow it
 * would be part of what the avatar is aligned against, and the avatar would line up with the
 * timestamp instead of the bubble. Out of flow it stays directly under the bubble — under the
 * reaction chip, when there is one — however large the avatar grows beside it.
 *
 * Being out of flow, it needs its room reserved: the message keeps a strip below the row as tall as
 * the meta line (its line box plus its top margin). Derived from the skin variable, like the
 * reaction height, because it has to be known before the meta row is laid out.
 */
.dipi-conversation-message__meta {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-block-start: 3px;
    margin-inline: 4px;
    color: var(--dipi-conv-meta-color);
    font-size: var(--dipi-conv-meta-size);
    line-height: 1.3;
}

.dipi-conversation-message--right .dipi-conversation-message__meta {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* The chip overhangs the bubble into the row's bottom padding, so the meta row goes below that. */
.dipi-conversation-message--has-reactions .dipi-conversation-message__meta {
    inset-block-start: calc(100% + var(--dipi-conv-reaction-height) - var(--dipi-conv-pad-block));
}

.dipi-conversation-message:has(.dipi-conversation-message__meta):not(.is-typing) {
    padding-block-end: calc(var(--dipi-conv-meta-size) * 1.3 + 3px);
}

.dipi-conversation-message__time {
    color: inherit;
    font-size: inherit;
}

.dipi-conversation-message__status {
    display: inline-flex;
    color: var(--dipi-conv-status-color);
    font-size: inherit;
    letter-spacing: -0.25em;
    padding-inline-end: 0.25em;
}

.dipi-conversation-message__status[data-status="sent"]::before {
    content: "\2713";
}

.dipi-conversation-message__status[data-status="delivered"]::before {
    content: "\2713\2713";
}

.dipi-conversation-message__status[data-status="read"]::before {
    content: "\2713\2713";
    color: var(--dipi-conv-status-read-color);
}

/* -------------------------------------------------------------------------- */
/* Typing simulation                                                           */
/* -------------------------------------------------------------------------- */

/**
 * While the module is armed, a message that has not been reached yet takes up no space at all.
 * That is what makes the conversation build the way a live chat does: each message lands at the
 * bottom and pushes the ones before it up, instead of fading in on ground already reserved for it.
 *
 * The rendered HTML always contains every message, which keeps the content available for search
 * engines and for visitors without JavaScript (see the `<noscript>` override the render callback
 * prints, which only has to put this one `display` back).
 */
.dipi-conversation--sequenced .dipi-conversation-message:not(.is-shown):not(.is-typing) {
    display: none;
}

/**
 * A message enters when its typing indicator lands in it, or -- for a message that does not type --
 * when it is shown. Both selectors carry the same animation, so a message that types first and then
 * reveals its content keeps the one entrance rather than starting over halfway through.
 */
/* Scaling from the bubble's own bottom corner makes it look like it grows out of the thread,
   rather than shrinking away from the edge it is aligned to. */
.dipi-conversation--sequenced .dipi-conversation-message--left.is-typing,
.dipi-conversation--sequenced .dipi-conversation-message--left.is-shown {
    transform-origin: 0 100%;
}

.dipi-conversation--sequenced .dipi-conversation-message--right.is-typing,
.dipi-conversation--sequenced .dipi-conversation-message--right.is-shown {
    transform-origin: 100% 100%;
}

.dipi-conversation--sequenced .dipi-conversation-message.is-typing,
.dipi-conversation--sequenced .dipi-conversation-message.is-shown {
    animation: dipi-conversation-rise 0.42s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/**
 * Room for the rise, so it does not make the list scroll.
 *
 * A message starts `--dipi-conv-rise` below where it comes to rest, and a transform counts towards
 * scrollable overflow — so a conversation far too short to scroll still put a scrollbar on the list
 * for as long as anything was animating, which across a sequence is most of the time. Reserving the
 * distance as padding keeps the displaced message inside the scroll area, and the matching negative
 * margin takes the reservation back out of the layout so nothing moves. Same trick the list already
 * uses across its inline axis to make room for the bubble tails.
 */
:where(.dipi-conversation--sequenced) .dipi-conversation__list {
    padding-block-end: var(--dipi-conv-rise);
    margin-block-end: calc(var(--dipi-conv-rise) * -1);
}

/**
 * The plain conversation (Neutral, Auto): the room above the first message and below the last
 * lives inside the scrolling list, not in the module's padding — which picking the style seeds with
 * the sides only. In the padding it was a band at the top and bottom that the list could not scroll
 * into, and messages were cut off short of the card's edges.
 *
 * The bottom is at least as tall as the room the sequenced list keeps for the rise, which it
 * replaces. One class, and later in the file than the sequenced rule, so it replaces that — and
 * Design > Message List > Spacing, written against the order class, replaces this in turn.
 */
:where(:has(> .dipi-conversation) > .dipi-conversation) .dipi-conversation__list {
    padding-block: 24px max(24px, var(--dipi-conv-rise));
    margin-block-end: 0;
}

/**
 * While a message is being typed only the indicator is in the box, so the bubble is indicator-sized
 * and grows into the real message when the content lands.
 *
 * `is-typing` is added by the script and never rendered by the server, which is what keeps this
 * rule from ever applying without JavaScript -- so nothing here has to be undone for `<noscript>`,
 * and the grouped-message rule that hides a repeated sender name is left alone.
 */
.dipi-conversation--sequenced .dipi-conversation-message.is-typing > .dipi-conversation-message__row {
    display: none;
}

/**
 * The message pops into place rather than merely sliding: it starts small and low, carries a little
 * past where it belongs, then settles.
 *
 * The overshoot is on the block axis only, and `scale` never passes 1. That is not a stylistic
 * choice — a transform counts towards scrollable overflow, and the list scrolls on one axis, which
 * makes the other scroll too. A bubble scaled to even 1.05 sticks out further than the 7px the list
 * reserves for tails and raises a horizontal scrollbar on a conversation with nothing to scroll.
 * Growing up to 1 and overshooting upwards both stay inside room that is already reserved.
 */
@keyframes dipi-conversation-rise {
    0% {
        opacity: 0;
        transform: translateY(var(--dipi-conv-rise)) scale(0.88);
    }

    55% {
        opacity: 1;
        transform: translateY(calc(var(--dipi-conv-pop) * -1)) scale(1);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/**
 * The read status and a reaction are things that happen after the message is sent, so the player
 * treats each as a beat of its own: one Delay Between Messages after the message lands it adds
 * `is-read`, one more and it adds `is-reacted`, and each pops in with a small overshoot.
 *
 * Hidden by scale rather than `display`, so each keeps its room and nothing shifts when it appears.
 * Keyed on `is-shown`, which only the script adds, so without JavaScript both are simply there. The
 * 1.1 overshoot stays well inside that room, so it raises no scrollbar.
 */
.dipi-conversation--sequenced .dipi-conversation-message.is-shown:not(.is-read) .dipi-conversation-message__status,
.dipi-conversation--sequenced .dipi-conversation-message.is-shown:not(.is-reacted) .dipi-conversation-message__reactions {
    transform: scale(0);
}

.dipi-conversation--sequenced .dipi-conversation-message.is-read .dipi-conversation-message__status,
.dipi-conversation--sequenced .dipi-conversation-message.is-reacted .dipi-conversation-message__reactions {
    animation: dipi-conversation-react 0.45s ease-out both;
}

@keyframes dipi-conversation-react {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


/**
 * In flow, not absolute: the message it sits in has collapsed to nothing, so the indicator is what
 * gives the bubble its size while the message is being typed.
 */
.dipi-conversation__typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px var(--dipi-conv-pad-inline);
    border-radius: var(--dipi-conv-radius);
    background-color: var(--dipi-conv-tail-color, var(--dipi-conv-in-bg));
    box-shadow: var(--dipi-conv-bubble-shadow);

    /* The dots are drawn in the text colour of the message being typed (see the dot rule). */
    color: var(--dipi-conv-text-color, var(--dipi-conv-in-color));
}

/* The message is a flex column that already aligns its children to the correct edge, so the
   indicator needs no side of its own -- only the outgoing colour. Both follow a colour set in
   Design > Bubble through `--dipi-conv-tail-color`, the same way the tail does, so the indicator is
   drawn in the colour of the bubble it turns into. */
.dipi-conversation-message--right .dipi-conversation__typing {
    background-color: var(--dipi-conv-tail-color, var(--dipi-conv-out-bg));
    color: var(--dipi-conv-text-color, var(--dipi-conv-out-color));
}

/* Clear the avatar column per message, so a message that hides its own avatar still lines up.
   Always the skin's column, whatever size this message gives its avatar (see the variable). */
.dipi-conversation-message--with-avatar.dipi-conversation-message--left .dipi-conversation__typing {
    margin-inline-start: var(--dipi-conv-typing-indent);
}

.dipi-conversation-message--with-avatar.dipi-conversation-message--right .dipi-conversation__typing {
    margin-inline-end: var(--dipi-conv-typing-indent);
}

.dipi-conversation__typing-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;

    /**
     * The message's own text colour at half strength, so the dots read on whatever bubble they sit
     * in — light on the dark outgoing bubbles, dark on the light ones, and in step with a colour set
     * in Design > Message Text. The bounce animates opacity on top of this, so a dot peaks at half
     * the text colour and rests at a sixth of it. Browsers without `color-mix()` keep the plain text
     * colour, which the animation still dims.
     */
    background-color: currentColor;
    background-color: color-mix(in srgb, currentColor 50%, transparent);
    animation: dipi-conversation-typing 1.2s infinite ease-in-out;
}

.dipi-conversation__typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.dipi-conversation__typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes dipi-conversation-typing {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/**
 * Reduced motion: no reveal choreography and no bouncing dots — everything is simply there.
 * Declared after the arming rules so it wins at equal specificity.
 */
@media (prefers-reduced-motion: reduce) {
    .dipi-conversation--sequenced .dipi-conversation-message:not(.is-shown):not(.is-typing) {
        display: flex;
    }

    .dipi-conversation--sequenced .dipi-conversation-message.is-typing,
    .dipi-conversation--sequenced .dipi-conversation-message.is-shown,
    .dipi-conversation--sequenced .dipi-conversation-message.is-read .dipi-conversation-message__status,
    .dipi-conversation--sequenced .dipi-conversation-message.is-reacted .dipi-conversation-message__reactions {
        animation: none;
    }

    .dipi-conversation__typing {
        display: none;
    }

    .dipi-conversation__typing-dot {
        animation: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Skins                                                                       */
/* -------------------------------------------------------------------------- */

/* Auto renders as Material until the client resolves the real device, so the swap to iOS on an
   Apple device is the only visible change and page caching stays intact. */
.dipi-conversation--android,
.dipi-conversation--auto {
    --dipi-conv-radius: 18px;
    --dipi-conv-radius-tight: 4px;
    --dipi-conv-in-bg: #e8def8;
    --dipi-conv-in-color: #1d192b;
    --dipi-conv-out-bg: #d3e3fd;
    --dipi-conv-out-color: #041e49;
    --dipi-conv-pad-block: 10px;
    --dipi-conv-pad-inline: 16px;
    --dipi-conv-meta-color: rgba(29, 25, 43, 0.55);
    --dipi-conv-status-read-color: #0b57d0;
}

.dipi-conversation--ios {
    --dipi-conv-initial-bg: #c7c7cc;
    --dipi-conv-initial-color: #ffffff;
    --dipi-conv-radius: 20px;
    --dipi-conv-radius-tight: 6px;
    --dipi-conv-in-bg: #e9e9eb;
    --dipi-conv-in-color: #000000;
    --dipi-conv-out-bg: #0b93f6;
    --dipi-conv-out-color: #ffffff;
    --dipi-conv-pad-block: 8px;
    --dipi-conv-pad-inline: 14px;
    --dipi-conv-font-size: 16px;
    --dipi-conv-tail-size: 8px;
    --dipi-conv-meta-color: rgba(60, 60, 67, 0.6);
    --dipi-conv-status-read-color: #0b93f6;
}

.dipi-conversation--whatsapp {
    --dipi-conv-initial-bg: #c9d4cc;
    --dipi-conv-initial-color: #3b4a54;
    --dipi-conv-radius: 8px;
    --dipi-conv-radius-tight: 2px;
    --dipi-conv-in-bg: #ffffff;
    --dipi-conv-in-color: #111b21;
    --dipi-conv-out-bg: #d9fdd3;
    --dipi-conv-out-color: #111b21;
    --dipi-conv-bubble-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    --dipi-conv-tail-size: 6px;
    --dipi-conv-pad-block: 6px;
    --dipi-conv-pad-inline: 9px;
    --dipi-conv-meta-color: rgba(17, 27, 33, 0.45);
    --dipi-conv-status-read-color: #53bdeb;
    --dipi-conv-gap: 6px;
}

/* Text reads from the start of the bubble on both sides, as it does in the app. */
.dipi-conversation--whatsapp .dipi-conversation-message__text,
.dipi-conversation--messenger .dipi-conversation-message__text {
    text-align: start;
}

.dipi-conversation--messenger {
    --dipi-conv-initial-bg: #c4d3ec;
    --dipi-conv-initial-color: #050505;
    --dipi-conv-radius: 20px;
    --dipi-conv-radius-tight: 4px;
    --dipi-conv-in-bg: #f0f0f0;
    --dipi-conv-in-color: #050505;
    --dipi-conv-out-bg: #0866ff;
    --dipi-conv-out-color: #ffffff;
    --dipi-conv-pad-block: 8px;
    --dipi-conv-pad-inline: 13px;
    --dipi-conv-font-size: 16px;
    --dipi-conv-avatar-size: 28px;
    --dipi-conv-meta-color: rgba(5, 5, 5, 0.45);
    --dipi-conv-status-read-color: #0866ff;
    --dipi-conv-reaction-bg: #f0f0f0;
    --dipi-conv-reaction-border: #ffffff;
    --dipi-conv-gap: 6px;
}

/**
 * A Messenger run reads as one block: the corners where two bubbles from the same side meet
 * tighten, and the outer corners of the run stay round. The last bubble of the run carries the tail,
 * unless the message switches it off.
 */
.dipi-conversation--messenger .dipi-conversation-message--left:has(+ .dipi-conversation-message--left) .dipi-conversation-message__bubble {
    border-end-start-radius: var(--dipi-conv-radius-tight);
}

.dipi-conversation--messenger .dipi-conversation-message--right:has(+ .dipi-conversation-message--right) .dipi-conversation-message__bubble {
    border-end-end-radius: var(--dipi-conv-radius-tight);
}

.dipi-conversation--messenger .dipi-conversation-message--left + .dipi-conversation-message--left .dipi-conversation-message__bubble {
    border-start-start-radius: var(--dipi-conv-radius-tight);
}

.dipi-conversation--messenger .dipi-conversation-message--right + .dipi-conversation-message--right .dipi-conversation-message__bubble {
    border-start-end-radius: var(--dipi-conv-radius-tight);
}

/* Only the other person has a face in Messenger; your own messages run to the edge. */
.dipi-conversation--messenger .dipi-conversation-message--right .dipi-conversation-message__avatar-wrap {
    display: none;
}

.dipi-conversation--messenger .dipi-conversation-message--right .dipi-conversation__typing {
    margin-inline-end: 0;
}

/* A reaction hangs off the bubble's far corner on both sides. */
.dipi-conversation--messenger .dipi-conversation-message--left .dipi-conversation-message__reactions {
    inset-inline-start: auto;
    inset-inline-end: 8px;
}

.dipi-conversation--wechat {
    --dipi-conv-tail-outline: #e2e4e8;
    --dipi-conv-radius: 12px;
    --dipi-conv-radius-tight: 12px;
    --dipi-conv-bubble-border: 1px solid #e2e4e8;
    --dipi-conv-avatar-radius: 10px;
    --dipi-conv-initial-bg: #e6ecfb;
    --dipi-conv-initial-color: #394a5f;
    --dipi-conv-in-bg: #f9f9f9;
    --dipi-conv-in-color: #394a5f;
    --dipi-conv-out-bg: #6b93ff;
    --dipi-conv-out-color: #ffffff;
    --dipi-conv-avatar-size: 34px;
    --dipi-conv-pad-block: 10px;
    --dipi-conv-pad-inline: 14px;
    --dipi-conv-sender-color: #394a5f;
    --dipi-conv-meta-color: rgba(57, 74, 95, 0.6);
    --dipi-conv-status-color: rgba(57, 74, 95, 0.5);
    --dipi-conv-status-read-color: #6b93ff;
    --dipi-conv-reaction-bg: #ffffff;
    --dipi-conv-reaction-border: #e2e4e8;
    --dipi-conv-gap: 8px;
}

.dipi-conversation--dark {
    --dipi-conv-tail-outline: #172b54;
    --dipi-conv-radius: 12px;
    --dipi-conv-radius-tight: 12px;
    --dipi-conv-bubble-border: 1px solid #172b54;
    --dipi-conv-avatar-radius: 10px;
    --dipi-conv-initial-bg: #22365f;
    --dipi-conv-initial-color: #e4eaf6;
    --dipi-conv-in-bg: #13254a;
    --dipi-conv-in-color: #c9d2e3;
    --dipi-conv-out-bg: #6b93ff;
    --dipi-conv-out-color: #ffffff;
    --dipi-conv-avatar-size: 34px;
    --dipi-conv-pad-block: 10px;
    --dipi-conv-pad-inline: 14px;
    --dipi-conv-sender-color: #c9d2e3;
    --dipi-conv-meta-color: rgba(201, 210, 227, 0.5);
    --dipi-conv-status-color: rgba(201, 210, 227, 0.5);
    --dipi-conv-status-read-color: #8fadff;
    --dipi-conv-reaction-bg: #1b3160;
    --dipi-conv-reaction-border: #0f1b35;
    --dipi-conv-gap: 8px;
}

.dipi-conversation--minimal {
    --dipi-conv-tail-outline: #e3e3ea;
    --dipi-conv-initial-bg: #ebebf3;
    --dipi-conv-initial-color: #3d3d5c;
    --dipi-conv-radius: 0px;
    --dipi-conv-radius-tight: 0px;
    --dipi-conv-in-bg: #ffffff;
    --dipi-conv-in-color: #3d3d5c;
    --dipi-conv-out-bg: #ebebf3;
    --dipi-conv-out-color: #3d3d5c;
    --dipi-conv-bubble-border: 1px solid #e3e3ea;
    --dipi-conv-pad-block: 12px;
    --dipi-conv-pad-inline: 20px;
    --dipi-conv-font-size: 16px;
    --dipi-conv-line-height: 1.6;
    --dipi-conv-sender-color: #3d3d5c;
    --dipi-conv-meta-color: rgba(61, 61, 92, 0.5);
    --dipi-conv-status-color: rgba(61, 61, 92, 0.45);
    --dipi-conv-status-read-color: #4fc3a1;
    --dipi-conv-reaction-bg: #ffffff;
    --dipi-conv-reaction-border: #e3e3ea;
    --dipi-conv-gap: 8px;
}

/* Minimal Messenger's outgoing block is a flat fill: its edge takes the fill's own colour. Like
   every style default, it gives way to the message's own Design > Bubble border. */
:where(.dipi-conversation--minimal) :where(.dipi-conversation-message--right) .dipi-conversation-message__bubble {
    border-color: var(--dipi-conv-out-bg);
}

/**
 * Light and Dark Messenger are desktop chat panels: one radius all round, and the outgoing bubble
 * edged in a deeper shade of its own blue rather than the grey hairline. Like every style default,
 * the edge gives way to the message's own Design > Bubble border.
 */

:where(.dipi-conversation--wechat, .dipi-conversation--dark) :where(.dipi-conversation-message--right) .dipi-conversation-message__bubble {
    --dipi-conv-tail-outline: #5a84f5;

    border-color: #5a84f5;
}

/**
 * A bordered bubble's tail is outlined too. A border triangle cannot carry a border of its own, so
 * the outline is a pair of 1px shadows of the triangle itself, one out to the side and one down,
 * which trace its two outer edges; its inner edge overlaps the bubble's border, so bubble and tail
 * read as one outlined shape. Minimal's outgoing block has no visible edge, so its tail outline is
 * its own fill.
 */
:where(.dipi-conversation--wechat, .dipi-conversation--dark, .dipi-conversation--minimal) :where(.dipi-conversation-message--left) .dipi-conversation-message__bubble::after {
    filter: drop-shadow(-1px 0 0 var(--dipi-conv-tail-outline)) drop-shadow(0 1px 0 var(--dipi-conv-tail-outline));
}

:where(.dipi-conversation--minimal) :where(.dipi-conversation-message--right) .dipi-conversation-message__bubble {
    --dipi-conv-tail-outline: var(--dipi-conv-out-bg);
}

:where(.dipi-conversation--wechat, .dipi-conversation--dark, .dipi-conversation--minimal) :where(.dipi-conversation-message--right) .dipi-conversation-message__bubble::after {
    filter: drop-shadow(1px 0 0 var(--dipi-conv-tail-outline)) drop-shadow(0 1px 0 var(--dipi-conv-tail-outline));
}

/* Neutral, Light, Dark and Minimal Messenger draw no tail by default; a message set to Show still
   gets one. */
:is(.dipi-conversation--neutral, .dipi-conversation--wechat, .dipi-conversation--dark, .dipi-conversation--minimal) .dipi-conversation-message:not(.dipi-conversation-message--tail) .dipi-conversation-message__bubble::after {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* Chat panel header — Light and Dark Messenger                                */
/* -------------------------------------------------------------------------- */

/**
 * A desktop messenger's title bar above the messages: who the chat is with (see
 * `DeviceSkinTrait::device_contact()`), a presence dot, and the call buttons. It sits in the flow
 * above the conversation, which takes the rest of the module's height and scrolls as before.
 */
.dipi-conversation-panel {
    --dipi-panel-ink: #394a5f;
    --dipi-panel-muted: rgba(57, 74, 95, 0.75);
    --dipi-panel-line: rgba(0, 0, 0, 0.08);
    --dipi-panel-accent: #6b93ff;
    --dipi-panel-ring: #ffffff;

    display: flex;
    flex-direction: column;
    block-size: 100%;
}

.dipi-conversation-panel--dark {
    --dipi-panel-ink: #e4eaf6;
    --dipi-panel-muted: rgba(201, 210, 227, 0.8);
    --dipi-panel-line: rgba(255, 255, 255, 0.1);
    --dipi-panel-ring: #0f1b35;
}

.dipi-conversation-panel > .dipi-conversation {
    flex: 1 1 auto;
    block-size: auto;
    min-block-size: 0;
}

/**
 * The room below the last message lives inside the scrolling list, not in the module's padding
 * (which picking the style seeds without a bottom). In the padding it was a band the list could not
 * scroll into, and messages were cut off short of the card's edge. At least as tall as the room the
 * sequenced list keeps for the rise, which it replaces — as in the phone screen. Kept to one
 * class, so Design > Message List > Spacing still replaces it.
 */
:where(.dipi-conversation-panel .dipi-conversation) .dipi-conversation__list {
    padding-block-end: max(24px, var(--dipi-conv-rise));
    margin-block-end: 0;
}

.dipi-conversation-panel__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    margin-block-end: 16px;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--dipi-panel-line);
    color: var(--dipi-panel-ink);
}

.dipi-conversation-panel__avatar {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background-color: #e6ecfb;
    color: #394a5f;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
}

.dipi-conversation-panel__avatar img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.dipi-conversation-panel__avatar::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 10px;
    block-size: 10px;
    border: 2px solid var(--dipi-panel-ring);
    border-radius: 50%;
    background-color: var(--dipi-panel-accent);
}

.dipi-conversation-panel__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.dipi-conversation-panel__name {
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dipi-conversation-panel__subtitle {
    color: var(--dipi-panel-muted);
    font-size: 13px;
    line-height: 1.3;
}

.dipi-conversation-panel__actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 20px;
    margin-inline-start: auto;
}

.dipi-conversation-panel__actions svg {
    display: block;
    inline-size: 20px;
    block-size: 20px;
    fill: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Chat panel — Minimal Messenger                                              */
/* -------------------------------------------------------------------------- */

/**
 * A back chevron on the left; the contact's name, a presence ring and a small uppercase status on
 * the right, beside a large avatar; and a grey input row along the bottom. The card is seeded
 * without padding so the header and the input row run edge to edge, and the messages keep their
 * own room at the sides instead.
 */
.dipi-conversation-panel--minimal {
    --dipi-panel-ink: #3d3d5c;
    --dipi-panel-muted: rgba(61, 61, 92, 0.55);
    --dipi-panel-line: transparent;
    --dipi-panel-accent: #4fc3a1;
}

.dipi-conversation-panel--minimal > .dipi-conversation {
    margin-inline: 24px;
}

/**
 * The module clips the panel, so the input row's square corners follow the card's rounded ones —
 * the same way the phone frame is clipped (see `:has(> .dipi-conversation-device)`). The row runs
 * edge to edge here, which is what puts its corners in the card's corners.
 */
:has(> .dipi-conversation-panel--minimal) {
    overflow: hidden;
}

.dipi-conversation-panel--minimal .dipi-conversation-panel__header {
    margin-block-end: 8px;
    padding: 20px 24px;
    border-block-end: 0;
}

.dipi-conversation-panel__back {
    display: inline-flex;
    color: var(--dipi-panel-muted);
}

.dipi-conversation-panel__back svg {
    display: block;
    block-size: 18px;
    inline-size: auto;
}

/* Name and status to the right, stacked status-first and aligned to the avatar that follows. */
.dipi-conversation-panel--minimal .dipi-conversation-panel__title {
    align-items: flex-end;
    margin-inline-start: auto;
    text-align: end;
}

.dipi-conversation-panel--minimal .dipi-conversation-panel__subtitle {
    order: -1;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dipi-conversation-panel--minimal .dipi-conversation-panel__name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 400;
}

/* Presence is a ring beside the name, not a dot on the avatar. */
.dipi-conversation-panel--minimal .dipi-conversation-panel__name::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 8px;
    block-size: 8px;
    border: 2px solid var(--dipi-panel-accent);
    border-radius: 50%;
}

.dipi-conversation-panel--minimal .dipi-conversation-panel__avatar {
    order: 1;
    inline-size: 56px;
    block-size: 56px;
    background-color: #ebebf3;
    color: #3d3d5c;
}

.dipi-conversation-panel--minimal .dipi-conversation-panel__avatar::after {
    display: none;
}

/**
 * The input row. Translucent rather than a solid grey, so it is tinted by the card colour it sits
 * on, like the dark phone chrome.
 */
.dipi-conversation-panel__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background-color: rgba(61, 61, 92, 0.08);
    color: var(--dipi-panel-muted);
    font-size: 16px;
    line-height: 1.4;
}

.dipi-conversation-panel__camera {
    display: block;
    flex: 0 0 auto;
    inline-size: 24px;
    block-size: 24px;
}

/* -------------------------------------------------------------------------- */
/* Misc                                                                        */
/* -------------------------------------------------------------------------- */

.dipi-conversation-message__meta:empty {
    display: none;
}

/**
 * Builder-only affordance. A message with no text (or no image, for the sticker and image types)
 * is dropped from the frontend HTML entirely, so this hint never reaches a visitor — it only tells
 * the editor why the module they are looking at will not appear on the live page.
 */
.dipi-conversation-message--empty .dipi-conversation-message__bubble {
    border: 1px dashed currentColor;
    opacity: 0.6;
}

.dipi-conversation-message__empty-hint {
    display: inline-block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}

.dipi_countdown .flip_clock .face {
   display: inline-block;
   margin: 5px;
}

.dipi_countdown .flip_clock .time {
   border-radius: 5px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
   display: inline-block;
   text-align: center;
   position: relative;
   height: 95px;
   width: 65px;
   -webkit-perspective: 479px;
   -moz-perspective: 479px;
   -ms-perspective: 479px;
   -o-perspective: 479px;
   perspective: 479px;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.dipi_countdown .flip_clock .count {
   /* background: #202020; */
   color: #f8f8f8;
   display: block;
   font-family: 'Oswald', sans-serif;
   font-weight: 400;
   line-height: 2.25em;
   font-size: 3em;
   overflow: hidden;
   position: absolute;
   text-align: center;
   /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); */
   top: 0;
   width: 100%;
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-transform-style: flat;
   -moz-transform-style: flat;
   -ms-transform-style: flat;
   -o-transform-style: flat;
   transform-style: flat;
}

.dipi_countdown .flip_clock {
   text-align: center;
}

.dipi_countdown .flip_clock .count.top {
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 5px 5px 0 0;
   height: 50%;
   -webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -o-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
}

.dipi_countdown .flip_clock .count.bottom {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   background-image: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   border-radius: 0 0 5px 5px;
   line-height: 0 !important;
   height: 50%;
   top: 50%;
   -webkit-transform-origin: 50% 0;
   -moz-transform-origin: 50% 0;
   -ms-transform-origin: 50% 0;
   -o-transform-origin: 50% 0;
   transform-origin: 50% 0;
}

.dipi_countdown .block_clock .face_wrapper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap;
}

.dipi_countdown .block_clock .face {
   text-align: center;
   padding: 20px;
   margin: 5px;
}

.dipi_countdown .block_clock .label {
   color: #ffffff;
   font-size: normal;
   margin-top: 5px;
   margin-bottom: 5px;
   word-break: break-all;
}

.dipi_countdown .block_clock .time {
   color: #ffffff;
   font-size: 4em;
   line-height: 1;
   margin-top: 5px;
   margin-bottom: 5px;
}

.dipi_countdown .flip_clock .label {
   font-size: normal;
   margin-top: 5px;
   margin-bottom: 5px;
   display: block;
}


/* Animation start */

.dipi_countdown .flip_clock .count.curr.top {
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
   z-index: 3;
}

.dipi_countdown .flip_clock .count.next.bottom {
   -webkit-transform: rotateX(90deg);
   -moz-transform: rotateX(90deg);
   -ms-transform: rotateX(90deg);
   -o-transform: rotateX(90deg);
   transform: rotateX(90deg);
   z-index: 2;
}


/* Animation end */

.dipi_countdown .flip_clock .flip .count.curr.top {
   -webkit-transition: all 250ms ease-in-out;
   -moz-transition: all 250ms ease-in-out;
   -ms-transition: all 250ms ease-in-out;
   -o-transition: all 250ms ease-in-out;
   transition: all 250ms ease-in-out;
   -webkit-transform: rotateX(-90deg);
   -moz-transform: rotateX(-90deg);
   -ms-transform: rotateX(-90deg);
   -o-transform: rotateX(-90deg);
   transform: rotateX(-90deg);
}

.dipi_countdown .flip_clock .flip .count.next.bottom {
   -webkit-transition: all 250ms ease-in-out 250ms;
   -moz-transition: all 250ms ease-in-out 250ms;
   -ms-transition: all 250ms ease-in-out 250ms;
   -o-transition: all 250ms ease-in-out 250ms;
   transition: all 250ms ease-in-out 250ms;
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
}

.dipi_countdown .flip_clock .face_wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.dipi_countdown .forwarding_wrapper {
   display: none;
}

.dipi_countdown .disabled .forwarding_wrapper {
   display: block;
}

@media all and (max-width: 767px) {
   .dipi_countdown .flip_clock {
       width: 100%;
   }
   .dipi_countdown .flip_clock .face {
       margin: 1px;
   }
   .dipi_countdown .flip_clock .time {
       height: 70px;
       width: 48px;
   }
   .dipi_countdown .flip_clock .count {
       font-size: 1.5em;
       line-height: 68px;
   }
   .dipi_countdown .flip_clock .label {
       font-size: 0.8em;
       top: 72px;
   }
   .dipi_countdown .block_clock .face {
       padding: 2px;
       margin: 1px;
   }
   .dipi_countdown .block_clock .time {
       font-size: 2.5em;
   }
}

.et_fb_preview_active--responsive_preview--phone_preview .dipi_countdown .flip_clock {
   width: 100%;
}

.et_fb_preview_active--responsive_preview--phone_preview .dipi_countdown .flip_clock .face {
   margin: 1px;
}

.et_fb_preview_active--responsive_preview--phone_preview .dipi_countdown .flip_clock .time {
   height: 70px;
   width: 48px;
}

.et_fb_preview_active--responsive_preview--phone_preview .dipi_countdown .flip_clock .count {
   font-size: 1.5em;
   line-height: 68px;
}

.et_fb_preview_active--responsive_preview--phone_preview .dipi_countdown .flip_clock .label {
   font-size: 0.8em;
   top: 72px;
}

.et_fb_preview_active--responsive_preview--phone_preview .dipi_countdown .block_clock .face {
   padding: 2px;
   margin: 1px;
}

.et_fb_preview_active--responsive_preview--phone_preview .dipi_countdown .block_clock .time {
   font-size: 2.5em;
}
.dipi-counter-container{position: relative;}
.dipi_counter {
	position: relative;
	/* display: -webkit-box; */
	display: -webkit-inline-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.dipi_counter {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.dipi_counter .circle .dipi_counter_number,
.dipi_counter .half_circle .dipi_counter_number {
	position: absolute;
	width: 100%;
	display: inline-block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.dipi_counter .half_circle .dipi_counter_number {
	transform: translate(-50%, 0);
}

.dipi_counter_number_wrapper {
	width: 100%;
}
.dipi_counter .half_circle svg.circle-container {
	fill: transparent;
}
.dipi_counter .half_circle svg.circle-container .circle-text {
	visibility: hidden;
}
.dipi_counter .half_circle svg.circle-container .foreground-circle {
	stroke: transparent;
}

.dipi_counter .half_circle .circle-container {
	overflow: visible;
}
.dipi_counter .half_circle .dipi_label {
	position: absolute;
	top: 50%;
	transform: translateY(100%);
}

.dipi_counter .half_circle .dipi_label.dipi_start_label {
	left: 0;
}
.dipi_counter .half_circle .dipi_label.dipi_end_label {
	right: 0;
}
.dipi_counter .dipi_counter_number_wrapper.half_circle {
	margin: auto;
	position: relative;
}

.dipi_counter .et-vb-module-options.et-vb-ui {
    max-width: 80px;
}

.dipi-pixel-divider{
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 auto;    
}

.dipi-td-first,
.dipi-td-second {
    /* flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;  */
    max-width: 100%;
    display: flex;
    overflow: hidden;
}

.dipi-td-first:not(.dipi-td-decoration-line),
.dipi-td-second:not(.dipi-td-decoration-line) {
    border-style: solid;
}

.dipi-td-first img,
.dipi-td-second img{
    width: 100%;
}

.dipi-td-content{
    border-style: solid;
}

.dipi-td-left img,
.dipi-td-right img{
    display: block;
    width:auto;
    height: auto;
}

.dipi-pixel-divider.dipi-pixel-divider-row .dipi-td-decoration-line{
    flex-grow: 1;
    flex-shrink: 1;
    /* width: 100%; */
}
.dipi-pixel-divider.dipi-pixel-divider-column{
    flex-direction: column;
}
.dipi-pixel-divider.dipi-pixel-divider-row .dipi-td-decoration-icon {
    flex: 0 1 auto;
}
.dipi-pixel-divider.dipi-pixel-divider-column .dipi-td-decoration-line,
.dipi-pixel-divider.dipi-pixel-divider-column .dipi-td-decoration-image{
    width: 100%;
}
.dipi-pixel-divider.dipi-pixel-divider-column .dipi-td-decoration-line {
    flex:1 !important;
}
.dipi-pixel-divider.dipi-pixel-divider-column.dipi-pixel-divider-mirror .dipi-td-second{
    transform: scaleY(-1);
}
.dipi-pixel-divider.dipi-pixel-divider-row.dipi-pixel-divider-mirror .dipi-td-second{
    transform: scaleX(-1);
}

.dipi-td-content .dipi-td-lottie{width:100%;}

.dipi-pixel-divider .et-pb-icon{
    display: block;
}

.et-vb-code .CodeMirror-scroll {
    max-height: 400px !important;
}
/* Divi Builder Module selection popup */
ul>li.dipi_dual_heading:before {
    color: white;
}

ul>li.dipi_dual_heading {
    background-color: #2c3d49 !important;
    color: white !important;
    overflow: visible !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

ul>li.dipi_dual_heading:hover {
    background-color: #1f2b33 !important;
}

ul>li.dipi_dual_heading span {
    font-size: 10px !important;
}

ul>li.dipi_dual_heading .et-fb-icon.et-fb-icon--svg {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: -3px auto 5px auto !important;
}

:root {
    --background-text-content: '';
  }
.dipi-dh-main{
    display: flex;
}
.dipi-dual-heading .dipi-dh-main::before{
    content: var(--background-text-content);
    z-index: 1;
    position: absolute;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    text-align: center;
    border-style: solid;
    border-width: 0;
}

.dipi-dual-heading .dipi-dh-first-heading,
.dipi-dual-heading .dipi-dh-second-heading{
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: inline-block;
}

.dipi-dual-heading .dipi-dh-main .dipi-dh-second-heading:before,
.dipi-dual-heading .dipi-dh-main .dipi-dh-first-heading:before{
    display: block;
    width: 0%;
    height: 0%;
    background: #eeeeee;
    position: absolute;
    z-index: 1;
}

.dipi-dual-heading.dipi-dh-waypoint .dipi-dh-first-heading:before,
.dipi-dual-heading.dipi-dh-waypoint .dipi-dh-second-heading:before {
    animation-timing-function: ease;
    animation-fill-mode: forwards;
 }
 .dipi-dual-heading .dipi-dh-first-heading .dipi-dh-bg-container,
 .dipi-dual-heading .dipi-dh-second-heading .dipi-dh-bg-container{
    display: block;
 }
 .dipi-dual-heading.dipi-dh-waypoint .dipi-dh-first-heading .dipi-dh-animation-container,
.dipi-dual-heading.dipi-dh-waypoint .dipi-dh-second-heading .dipi-dh-animation-container{
    animation-fill-mode: forwards;
    visibility: hidden;
}

.et-fb.et-bfb .dipi-dual-heading.dipi-dh-waypoint .dipi-dh-first-heading .dipi-dh-animation-container,
.et-fb.et-bfb .dipi-dual-heading.dipi-dh-waypoint .dipi-dh-second-heading .dipi-dh-animation-container{
    visibility: visible;
}
/* Reveal Effects */
@keyframes dipiDHreveal {
    0% {  visibility: hidden;}
    35% { visibility: hidden;}
    70% { visibility: hidden;}
    100% {  visibility: visible;}
}
@keyframes dipiDHSlideLeft {
    0%   { height: 100%;width: 0;   top:0;left:0;right:auto;}
    35%  { height: 100%;width: 100%;top:0;left:0;right:auto;}
    75%  { height: 100%;width: 100%;top:0;right:0;left:auto;}
    100% { height: 100%;width: 0;   top:0;right:0;left:auto; }
}
@keyframes dipiDHSlideRight {
    0%   { height: 100%;width: 0;   top:0;right:0;left:auto;}
    35%  { height: 100%;width: 100%;top:0;right:0;left:auto;}
    75%  { height: 100%;width: 100%;top:0;left:0;right:auto;}
    100% { height: 100%;width: 0;   top:0;left:0;right:auto;}
}
@keyframes dipiDHFadeOut {
    0%   { height: 100%;width: 100%;opacity: 0 }
    35%  { height: 100%;width: 100%;opacity: 1 }
    70%  { height: 100%;width: 100%;opacity: 1 }
    100% { height: 100%;width: 100%;opacity: 0; }
}
@keyframes dipiDHSlideUp {
    0%   { height: 0%;  width: 100%;  left:0;bottom:0;top:auto;}
    35%  { height: 100%;width: 100%;  left:0;bottom:0;top:auto;}
    75%  { height: 100%;width: 100%;  left:0;bottom:auto;top:0;}
    100% { height: 0%;  width: 100%;  left:0;bottom:auto;top:0;}
}
@keyframes dipiDHSlideDown {
    0%   { height: 0%;  width: 100%;  left:0;top:0;bottom:auto;}
    35%  { height: 100%;width: 100%;  left:0;top:0;bottom:auto;}
    75%  { height: 100%;width: 100%;  left:0;top:auto;bottom:0;}
    100% { height: 0%;  width: 100%;  left:0;top:auto;bottom:0;}
}
/* End of Reveal Effects */

@keyframes dipiBGLeftToRight {
    0%   { background-position: 0 0 ; }
    100% { background-position: -100% 0; }
}
@keyframes dipiBGRightToLeft {
    0%   { background-position: 0 0 ; }
    100% { background-position: 100% 0; }
}
@keyframes dipiBGTopToBottom {
    0%   { background-position: 0 0 ; }
    100% { background-position: 0 -100%; }
}
@keyframes dipiBGBottomToTop {
    0%   { background-position: 0 0 ; }
    100% { background-position: 0 100%; }
}

@keyframes dipiBGHorizontal {
    0%   { background-position: 0 0 ; }
    50% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}

@keyframes dipiBGVertical {
    0%   { background-position: 0 0 ; }
    50% { background-position: 0 100%; }
    100% { background-position: 0 0; }
}

h1.dipi-dh-main,
h2.dipi-dh-main,
h3.dipi-dh-main,
h4.dipi-dh-main,
h5.dipi-dh-main,
h6.dipi-dh-main{
    padding-bottom: 0;
}

.dipi-dual-heading-typography-tabs .et-vb-group-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dipi_expanding_cta .dipi-content-image-icon-wrap,
.dipi_expanding_cta .dipi_expanding_cta_container .dipi_expanding_cta-content-wrapper {
    border-style: solid;
}

.dipi_expanding_cta .dipi_expanding_cta_container .dipi_expanding_cta-content-wrapper,
.dipi_expanding_cta_container {
    position: relative;
    z-index: 1;
}

.dipi_expanding_cta .dipi-content-image-icon-wrap.dipi-icon-wrap {
    width: fit-content;
}

.dipi_expanding_cta .dipi_extending_cta-overlay {
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

/* Styling of Expanded CTA & Overlay */
.dipi_expanding_cta .dipi_expanding_cta_container .dipi_expanding_cta_container-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: normal;
    border-style: solid;
}

.dipi_expanding_cta .dipi_expanding_cta_container .dipi_expanding_cta_container-background,
.dipi_expanding_cta .dipi_expanding_cta_container .dipi_expanding_cta-content-wrapper,
.dipi_expanding_cta .dipi_expanding_cta_container>.et_parallax_bg_wrap {
    transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out !important;
    /* without !important, transition won't work when border is set*/
}

.dipi_expanding_cta.dipi-expanded-cta .dipi_expanding_cta_container .dipi_expanding_cta_container-background,
.dipi_expanding_cta.dipi-expanded-cta .dipi_expanding_cta_container .dipi_expanding_cta-content-wrapper {
    transform: scale(1.2);
}

.dipi_expanding_cta.dipi-expanded-cta .dipi_extending_cta-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
}

/* Animated CTA Section slide out menu and back to top button */
.dipi-has-expanding-cta-body header#main-header {
    transition: all 500ms ease-in-out !important;
}

.dipi-has-expanding-cta-body .et_pb_scroll_top {
    transition: all .5s ease-in-out;
}

/* Non theme builder header */
body.dipi-expanded-body.dipi-hide_header_in-expanded-body header#main-header {
    margin-top: -100px;
}

/* Theme builder header */
.dipi-has-expanding-cta-body .et-l--header .et_pb_section_0_tb_header,
.dipi-has-expanding-cta-body .et-l--header .et_pb_sticky {
    transition: all .5s ease-in-out;
}

body.dipi-expanded-body.dipi-hide_header_in-expanded-body .et-l--header .et_pb_section--fixed,
body.dipi-expanded-body.dipi-hide_header_in-expanded-body .et-l--header .et_pb_sticky {
    top: -100% !important;
}

body.dipi-expanded-body.dipi-hide_btt_in-expanded-body .et_pb_scroll_top {
    right: -100%;
}

/* hide the horizontal scrollbar when CTA section expands */

body.dipi-expanded-body #et-main-area {
    /* overflow-x:hidden causing the issue of not showing expanding cta in mobile */
    overflow-x: clip;
    /* use overflow-x: clip since 20240420 */
}

.dipi-expanded-body .et-l.et-l--header,
body.dipi-expanding_cta-on-top-removing .et-l.et-l--header,
body.dipi-has-expanding-cta-body #theme-builder-area--et_header_layout {
    z-index: 99999;
}

.dipi-expanding_cta-on-top {
    z-index: 9999 !important;
}

.dipi-expanding_cta-on-top-removing {
    z-index: 9990 !important;
}

.dipi_expanding_cta .dipi-content-heading,
.dipi_expanding_cta .dipi-desc,
.dipi_expanding_cta .dipi_expanding_cta-content-wrapper .dipi-button-wrapper {
    text-align: center;
}

.dipi_expanding_cta .dipi_extending_cta-overlay {
    background-color: rgba(12, 113, 195, 0.63);
}

.dipi_expanding_cta .dipi_expanding_cta-content {
    margin: auto;
}

.dipi_content_button,
.dipi_second_button {
    display: inline-block;
}

.dipi_expanding_cta .dipi_expanding_cta_container .dipi_expanding_cta-content-wrapper {
    overflow: hidden;
}

.dipi-fancy-text-container .fancy-text-wrap {
    position: relative;
}

.fancy-text-wrap.dipi_morphext {
    visibility: visible;
}

.fancy-text-wrap {
    visibility: hidden;
    text-decoration: inherit;
}

.fancy-text-wrap .animated {
    text-decoration: inherit;
    display: inline-block;
}

.fancy-text-suffix,
.fancy-text-wrap,
.fancy-text-prefix {
    display: inline-block;
}
.dipi_fancy_text .fancy-text-prefix {
    white-space: break-spaces;
}

/* .dipi_faq .dipi-faq-wrapper * {
    border-style: solid;
} */

.dipi_faq .dipi-faq-entry:last-of-type {
    margin-bottom: 0;
}

.dipi-faq-entry {
    transition: all .3s ease, height 0s;
    border: 1px solid #d9d9d9;
}

.dipi-faq-title {
    transition: all .3s ease, height 0s;
    font-size: 16px;
    position: relative;
    display: flex;
    align-items: center;
}

.dipi-faq-title h1,
.dipi-faq-title h2,
.dipi-faq-title h3,
.dipi-faq-title h4,
.dipi-faq-title h5,
.dipi-faq-title h6 {
    padding: 0;
    margin: 0;
}

.dipi-faq-title span,
.dipi-faq-title p,
.dipi-faq-title h1,
.dipi-faq-title h2,
.dipi-faq-title h3,
.dipi-faq-title h4,
.dipi-faq-title h5,
.dipi-faq-title h6 {
    display: flex;
    width: 100%;
    align-items: center;
}

.dipi-faq-accordion .dipi-faq-title,
.dipi-faq-toggles .dipi-faq-title {
    cursor: pointer;
}

.dipi-faq-accordion.dipi-faq-accordion-not-closable .dipi-faq-title {
    cursor: inherit;
}

.dipi-faq-title:before,
.dipi-faq-title:after,
.dipi-faq-title .dipi-faq-icon-open,
.dipi-faq-title .dipi-faq-icon-closed {
    transition: all .3s ease;
    font-family: ETmodules !important;
    font-style: normal;
    font-weight: 400;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0;
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;

    /* FIXME: Make Configurable ltr/rtl */
    right: 20px;
    left: auto;
}

/* :before = closed icon */
.open .dipi-faq-title:before,
.open .dipi-faq-title .dipi-faq-icon-closed {
    opacity: 0;
}

/* :after = open icon */
.closed .dipi-faq-title:after,
.closed .dipi-faq-title .dipi-faq-icon-open {
    opacity: 0;
}

.dipi-faq-accordion-not-closable .open .dipi-faq-title .dipi-faq-icon-open,
.dipi-faq-accordion-not-closable .open .dipi-faq-title:after {
    opacity: 0;
}

.dipi-faq-content {
    transition: all .3s ease, height 0s, padding-top 0s, padding-bottom 0s;
    border-style: solid;
}

.dipi-faq-plain .dipi-faq-icon-open,
.dipi-faq-plain .dipi-faq-icon-closed {
    display: none;
}

.dipi-faq-plain .dipi-faq-content {
    display: block !important;
}

.dipi_faq .dipi-faq-entry {
    overflow: hidden;
}

.dipi_filterable_gallery .dipi-filter-bar {
    display: flex;
    flex-wrap: wrap;
    border-style: solid;
    transition: all 500ms ease 0ms;
  }
  @media(min-width: 981px) {
    .dipi_filterable_gallery .sticky_filter_bar .dipi-filter-bar{
      position: sticky;
      z-index: 1;
    }
  }
   .dipi-filter-bar-item {
    border-style: solid;
    cursor: pointer;
    align-self: center;
    
  }
  .dipi_filterable_gallery .grid-item.hidden {
    display: none;
  }
  .dipi-filterable-gallery-icon{
    padding: 20px;
    font-size: 18px;
    color: #FFFFFF;
    transition: all .3s;
  }
  .dipi-filterable-gallery-icon.dipi-filterable-gallery-icon-circle {
    background-color: rgba(255,255,255,0.22);
  }
  .dipi_filterable_gallery_overlay.background-hover {
    background-color: rgba(10,0,0,0.45);
  }
  .dipi_filterable_gallery .dipi-pagination {
    display: flex;
    justify-content: center;
    gap:5px;
    margin-top: 30px;
    padding: 12px;
  }
  .dipi_filterable_gallery .dipi-pagination.long-mobile {
    overflow-x: auto;
    width: 100%;
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(to right,rgb(0,0,0) 86%,transparent 100%);
    mask-image: linear-gradient(to right,rgb(0,0,0) 86%,transparent 100%);
  }
  .dipi_filterable_gallery .dipi-pagination .dipi-pagination-btn{
    font-weight: bold;
    cursor: pointer;
    border-style: solid;
    padding: 5px 12px;
    flex-shrink: 0;
  }
  .dipi_filterable_gallery .dipi-pagination .dipi-pagination-btn.active
  {
    border-style: solid;
    background: #ff4200;
    color: #ffffff;
  }
  .dipi_filterable_gallery .dipi-loadmore-btn {
    cursor: pointer;
    border-style: solid;
    padding: 5px 12px;
  }
  .watch_end_of_grid {
    min-height: 10px;
    margin: 0;
  }
  .dipi-fg-lighbox-opened img.mfp-img {
    padding: 0;
    margin: 40px auto;
    max-height: calc(100vh - 80px) !important;
    object-fit: contain;
    min-width: 300px;
  }
  .dipi-fg-lighbox-opened .mfp-figure {
    max-height: 100vh;
    overflow:auto;
  }
  .dipi-fg-lighbox-opened .mfp-bottom-bar {
    position: relative;
  }
  .dipi-fg-lighbox-opened .mfp-figure:after {
    content: unset;
  }
  .dipi-fg-lighbox-opened .mfp-figure figure {
    position: relative;
  }
  .dipi-fg-lighbox-opened .mfp-figure figure figcaption {
    position: absolute;
    width: 100%;
  }
  .dipi-fg-lighbox-opened .mfp-img {
    position: relative;
  }
  .dipi-fg-lighbox-opened .mfp-img{
    box-shadow: 0 0 8px rgba(0,0,0,.6);
    background: #444;
  }
  @media(max-width: 980px ) and (min-width: 768px) {
    .dipi_filterable_gallery .grid-item.tablet_show {
        display: block;   
    }
    .dipi_filterable_gallery .grid-item.tablet_hidden {
        display: none;
    }
  }
  @media(max-width: 767px ) {
    .dipi_filterable_gallery .grid-item.phone_show {
        display: block;   
    }
    .dipi_filterable_gallery .grid-item.phone_hidden {
        display: none;
    }
  }
  
  .dipi_filterable_gallery .dipi-filter-bar .dipi-filter-bar-item {
    transition: all 500ms ease 0ms;
  }
  .dipi_filterable_gallery .dipi-filtered-gallery-container {
    border-style: solid;
  }
  .dipi_filterable_gallery .dipi-filtered-gallery-item {
    display: none;
  }
  .dipi_filterable_gallery  .grid-item > a > .img-container,
  .dipi_filterable_gallery  .grid-item > .img-container {
    overflow: hidden;
    position: relative;
  }
  .dipi_filterable_gallery .dipi-filtered-gallery-item.active {
    display: block;
  }
  .dipi_filterable_gallery .dipi-filter-bar {
    gap: 20px;
  }
  .dipi_filterable_gallery .alert {
    display: none;
  }
  body.et-fb .dipi_filterable_gallery .alert,
  body.et-bfb .dipi_filterable_gallery .alert{
    display: block;
    background-color: #fff9f9;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #888;
    border: 1px solid #ffe6e6;
    margin-bottom: 15px;
  }
  .dipi_filterable_gallery .dipi-filter-bar-item-title {
    display: flex;
    gap: 0.5em;
  }
  .dipi_filterable_gallery .dipi-filter-bar-count:before {
    content: "(";
  }
  .dipi_filterable_gallery .dipi-filter-bar-count:after {
    content: ")";
  }
  .dipi_filterable_gallery .dipi_filterable_gallery_wrapper.layout_grid .grid{
    display: flex;
    flex-wrap: wrap;
  }
  .dipi_filterable_gallery .dipi_lightbox_link_icon {
    display: flex;
    gap: 10px;
  }
  .dipi_filterable_gallery .dipi_overlay_icons_row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  .dipi_filterable_gallery .dipi_overlay_icons_row .dipi_lightbox_link_icon {
    margin-bottom: 0;
  }
  .dipi_filterable_gallery .dipi_overlay_icons_row .dipi-filterable-gallery-icon,
  .dipi_filterable_gallery .dipi_overlay_icons_row .dipi-overlay-icon-static,
  .dipi_filterable_gallery .dipi_overlay_icons_row .dipi-overlay-icon-animated {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .dipi_filterable_gallery .dipi_overlay_icons_row a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
  }
  .dipi_filterable_gallery .dipi_overlay_title_caption {
    display: flex;
    flex-direction: column;
  }
  .dipi_filterable_gallery .dipi_lightbox_link_icon a.lightbox-icon {
    text-decoration: none;
    color: inherit;
    align-items: center;
    justify-content: center;
  }
  .dipi_filterable_gallery .dipi_filterable_gallery_wrapper.layout_grid .grid-sizer,
  .dipi_filterable_gallery .dipi_filterable_gallery_wrapper.layout_grid .gutter-sizer {
    display: none;
  }
  .dipi_filterable_gallery .dipi_filterable_gallery_wrapper.layout_grid .grid img {
    width: 100%;
    object-fit: cover;
  }
  .dipi_filterable_gallery .dipi_filterable_gallery_wrapper.layout_grid .grid .grid-item {
    position: relative;
  }
  
  .dipi_filterable_gallery .grid-item img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .dipi_filterable_gallery .grid .grid-item {
    border-style: solid;
  }
  
  .dipi_filterable_gallery_overlay {
      /* z-index: -1; */
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: all .6s;
  }
  .dipi_filterable_gallery_overlay.background {
      /* background: rgba(21,2,42,0.3); */
      -webkit-transition: all .6s;
      opacity: 1;
      transition: all .6s;
  }
  .dipi_filterable_gallery_overlay.background-hover {
      /* background: rgba(21,2,42,0.3); */
      -webkit-transition: all .6s;
      opacity: 0;
      transition: all .6s;
  }
  .dipi_filterable_gallery_overlay.content {
      background: transparent;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-font-smoothing: antialiased;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      flex-direction: column;
  }
  .dipi-filterable-gallery-icon-circle {
      padding: 15px;
      border-radius: 100%;
  }
  .dipi_filterable_gallery .dipi-filterable-gallery-icon-circle-border,
  .dipi_filterable_gallery.et_pb_with_border .dipi-filterable-gallery-icon-circle-border {
      border: 2px solid;
  }
  .dipi_filterable_gallery  .grid.hide_lightbox .grid-item > a > .img-container .dipi_lightbox_link_icon,
  .dipi_filterable_gallery  .grid.hide_lightbox .grid-item > .img-container .dipi_lightbox_link_icon{
      display: none;
  }
  .dipi_filterable_gallery  .grid.hide_lightbox .grid-item > a > .img-container,
  .dipi_filterable_gallery  .grid.hide_lightbox .grid-item > .img-container{
      cursor: auto;
  }
  .dipi_filterable_gallery  .grid.show_lightbox .grid-item > a > .img-container .dipi_lightbox_link_icon,
  .dipi_filterable_gallery  .grid.show_lightbox .grid-item > .img-container .dipi_lightbox_link_icon{
      display: flex;
  }
  .dipi_filterable_gallery  .grid.show_lightbox .grid-item > a > .img-container,
  .dipi_filterable_gallery  .grid.show_lightbox .grid-item > .img-container{
      cursor: pointer;
  }
  .dipi-filterable-gallery-icon {
      margin-bottom: 20px;
      transition: all .3s;
  }

  .dipi_filterable_gallery .dipi_filterable_gallery_overlay.content .dipi-overlay-icon-static {
      display: none !important;
  }

  .dipi_filterable_gallery .grid.show_overlay .dipi_filterable_gallery_overlay  {
      display: flex;
  }
  .dipi_filterable_gallery .grid.hide_overlay .dipi_filterable_gallery_overlay  {
      display: none;
  }
  @media (max-width: 980px) {
      .dipi_filterable_gallery .grid.show_overlay_tablet .dipi_filterable_gallery_overlay  {
          display: flex;
      }
      .dipi_filterable_gallery .grid.hide_overlay_tablet .dipi_filterable_gallery_overlay  {
          display: none;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_tablet .dipi_filterable_gallery_overlay.content {
          opacity: 1 !important;
          z-index: 3;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_tablet .dipi-overlay-icon-static {
          display: block !important;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_tablet .dipi-overlay-icon-animated {
          display: none !important;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_tablet .dipi_lightbox_link_icon {
          opacity: 1;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_tablet .dipi_overlay_title_caption {
          opacity: 0;
          transition: none;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_gallery_overlay.background-hover,
      .dipi_filterable_gallery .grid.always_show_overlay_icon_tablet .grid-item.in-view .dipi_overlay_title_caption {
          opacity: 1;
          z-index: 3;
      }
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_tablet .dipi-overlay-icon-static {
          display: none !important;
      }
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_tablet .dipi-overlay-icon-animated {
          display: block !important;
      }
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_gallery_overlay.background,
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_gallery_overlay.background-hover,
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_gallery_overlay.content {
          opacity: 1;
          z-index: 3;
      }
      .dipi_filterable_gallery  .grid.hide_lightbox_tablet .grid-item > a > .img-container,
      .dipi_filterable_gallery  .grid.hide_lightbox_tablet .grid-item > .img-container{
          cursor: auto;
      }
      .dipi_filterable_gallery  .grid.hide_lightbox_tablet .grid-item > a > .img-container .dipi_lightbox_link_icon,
      .dipi_filterable_gallery  .grid.hide_lightbox_tablet .grid-item > .img-container .dipi_lightbox_link_icon{
          display: none;
      }
      .dipi_filterable_gallery  .grid.show_lightbox_tablet .grid-item > a > .img-container,
      .dipi_filterable_gallery  .grid.show_lightbox_tablet .grid-item > .img-container{
          cursor: pointer;
      }
      .dipi_filterable_gallery  .grid.show_lightbox_tablet .grid-item > a > .img-container .dipi_lightbox_link_icon,
      .dipi_filterable_gallery  .grid.show_lightbox_tablet .grid-item > .img-container .dipi_lightbox_link_icon{
          display: flex;
      }
      .dipi_filterable_gallery .sticky_filter_bar_tablet .dipi-filter-bar{
        position: sticky;
        z-index: 1;
      }
  }
  
  @media (max-width: 767px) {
      .dipi_filterable_gallery .grid.show_overlay_phone .dipi_filterable_gallery_overlay  {
          display: flex;
      }
      .dipi_filterable_gallery .grid.hide_overlay_phone .dipi_filterable_gallery_overlay  {
          display: none;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_phone .dipi_filterable_gallery_overlay.content {
          opacity: 1 !important;
          z-index: 3;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_phone .dipi-overlay-icon-static {
          display: block !important;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_phone .dipi-overlay-icon-animated {
          display: none !important;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_phone .dipi_lightbox_link_icon {
          opacity: 1;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_phone .dipi_overlay_title_caption {
          opacity: 0;
          transition: none;
      }
      .dipi_filterable_gallery .grid.always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_gallery_overlay.background-hover,
      .dipi_filterable_gallery .grid.always_show_overlay_icon_phone .grid-item.in-view .dipi_overlay_title_caption {
          opacity: 1;
          z-index: 3;
      }
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_phone .dipi-overlay-icon-static {
          display: none !important;
      }
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_phone .dipi-overlay-icon-animated {
          display: block !important;
      }
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_gallery_overlay.background,
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_gallery_overlay.background-hover,
      .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_gallery_overlay.content {
          opacity: 1;
          z-index: 3;
      }
      .dipi_filterable_gallery  .grid.hide_lightbox_phone .grid-item > a > .img-container,
      .dipi_filterable_gallery  .grid.hide_lightbox_phone .grid-item > .img-container{
          cursor: auto;
      }
      .dipi_filterable_gallery  .grid.hide_lightbox_phone .grid-item > a > .img-container .dipi_lightbox_link_icon,
      .dipi_filterable_gallery  .grid.hide_lightbox_phone .grid-item > .img-container .dipi_lightbox_link_icon{
          display: none;
      }
      .dipi_filterable_gallery  .grid.show_lightbox_phone .grid-item > a > .img-container,
      .dipi_filterable_gallery  .grid.show_lightbox_phone .grid-item > .img-container{
          cursor: pointer;
      }
      .dipi_filterable_gallery  .grid.show_lightbox_phone .grid-item > a > .img-container .dipi_lightbox_link_icon,
      .dipi_filterable_gallery  .grid.show_lightbox_phone .grid-item > .img-container .dipi_lightbox_link_icon{
          display: flex;
      }
      .dipi_filterable_gallery .sticky_filter_bar_phone .dipi-filter-bar{
        position: sticky;
        z-index: 1;
      }
  }
  
  body.noscroll {
      overflow: hidden;
  }
  
  .img-container.dipi-fg-animation img{transition: all ease-in-out;transition-duration: .5s;}
  .img-container.dipi-fg-animation.dipi-fg-zoom-out img{transform: scale(1.05);}
  .img-container.dipi-fg-animation.dipi-fg-move-up img{transform: scale(1.1);}
  .img-container.dipi-fg-animation.dipi-fg-move-down img{transform: scale(1.1);}
  .img-container.dipi-fg-animation.dipi-fg-move-right img{transform: scale(1.1);}
  .img-container.dipi-fg-animation.dipi-fg-move-left img{transform: scale(1.1);}
  .img-container.dipi-fg-animation.dipi-fg-rotate img{transform: scale(1.1);}
  
  .dipi_filterable_gallery .grid-item {
    overflow: hidden;
  }

/* Desktop hover effects */
@media (min-width: 981px) {
  .dipi_filterable_gallery .grid .grid-item:hover {
    transition: all .3s ease;
  }

  .dipi_filterable_gallery .grid .grid-item .dipi_filterable_gallery_overlay .dipi-filterable-gallery-icon.dipi-filterable-gallery-icon-circle:hover {
    background-color: rgba(255,255,255,0.36) !important;
  }

  .img-container.dipi-fg-animation.dipi-fg-zoom-in:hover img { transform: scale(1.05); }

  .img-container.dipi-fg-animation.dipi-fg-zoom-out img { transform: scale(1.05); }
  .img-container.dipi-fg-animation.dipi-fg-zoom-out:hover img { transform: scale(1); }

  .img-container.dipi-fg-animation.dipi-fg-move-up img { transform: scale(1.1); }
  .img-container.dipi-fg-animation.dipi-fg-move-up:hover img { transform: scale(1.1) translateY(-10px); }

  .img-container.dipi-fg-animation.dipi-fg-move-down img { transform: scale(1.1); }
  .img-container.dipi-fg-animation.dipi-fg-move-down:hover img { transform: scale(1.1) translateY(10px); }

  .img-container.dipi-fg-animation.dipi-fg-move-right img { transform: scale(1.1); }
  .img-container.dipi-fg-animation.dipi-fg-move-right:hover img { transform: scale(1.1) translateX(10px); }

  .img-container.dipi-fg-animation.dipi-fg-move-left img { transform: scale(1.1); }
  .img-container.dipi-fg-animation.dipi-fg-move-left:hover img { transform: scale(1.1) translateX(-10px); }

  .img-container.dipi-fg-animation.dipi-fg-rotate img { transform: scale(1.1); }
  .img-container.dipi-fg-animation.dipi-fg-rotate:hover img { transform: scale(1.2) rotate(5deg); }

  .dipi_filterable_gallery .grid.always_show_overlay_icon .dipi_filterable_gallery_overlay.content {
      opacity: 1 !important;
      z-index: 3;
  }

  .dipi_filterable_gallery .grid.always_show_overlay_icon .dipi-overlay-icon-static {
      display: block !important;
  }

  .dipi_filterable_gallery .grid.always_show_overlay_icon .dipi-overlay-icon-animated {
      display: none !important;
  }

  .dipi_filterable_gallery .grid.always_show_overlay_icon .dipi_lightbox_link_icon {
      opacity: 1;
  }

  .dipi_filterable_gallery .grid.always_show_overlay_icon .dipi_overlay_title_caption {
      opacity: 0;
      transition: none;
  }

  .dipi_filterable_gallery .grid.always_show_overlay_icon .grid-item:hover .dipi_overlay_title_caption {
      opacity: 1;
  }

  .dipi_filterable_gallery .grid.hide_always_show_overlay_icon .dipi-overlay-icon-static {
      display: none !important;
  }

  .dipi_filterable_gallery .grid.hide_always_show_overlay_icon .dipi-overlay-icon-animated {
      display: block !important;
  }

  .dipi_filterable_gallery .grid-item:hover .dipi_filterable_gallery_overlay.background,
  .dipi_filterable_gallery .grid-item:hover .dipi_filterable_gallery_overlay.background-hover,
  .dipi_filterable_gallery .grid-item:hover .dipi_filterable_gallery_overlay.content {
      opacity: 1;
      z-index: 3;
  }
}

  /* Mobile/tablet: .in-view from tap. */
@media (max-width: 980px) {
  .dipi_filterable_gallery .grid .dipi_filterable_gallery_overlay {
    transition: opacity 0.3s ease;
  }

  .dipi_filterable_gallery .grid .grid-item:not(.in-view) .dipi_filterable_gallery_overlay {
    pointer-events: none;
  }

  /* Tap reveal — mirrors desktop :hover */
  .dipi_filterable_gallery .grid .grid-item.in-view .dipi_filterable_gallery_overlay.background,
  .dipi_filterable_gallery .grid .grid-item.in-view .dipi_filterable_gallery_overlay.background-hover,
  .dipi_filterable_gallery .grid .grid-item.in-view .dipi_filterable_gallery_overlay.content {
    opacity: 1;
    z-index: 3;
  }

  /* Overlay icon mode: swap base background on tap */
  .dipi_filterable_gallery .grid.always_show_overlay_icon .grid-item.in-view .dipi_filterable_gallery_overlay.background,
  .dipi_filterable_gallery .grid.always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_gallery_overlay.background,
  .dipi_filterable_gallery .grid.always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_gallery_overlay.background,
  .dipi_filterable_gallery .grid.hide_always_show_overlay_icon .grid-item.in-view .dipi_filterable_gallery_overlay.background,
  .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_gallery_overlay.background,
  .dipi_filterable_gallery .grid.hide_always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_gallery_overlay.background {
    opacity: 0;
  }

  /* Tap-to-reveal: play animate.css classes only while .in-view (no JS restart). */
  .dipi_filterable_gallery .grid .grid-item:not(.in-view) .dipi-filterable-gallery-title.animated,
  .dipi_filterable_gallery .grid .grid-item:not(.in-view) .dipi-filterable-gallery-caption.animated,
  .dipi_filterable_gallery .grid:not(.always_show_overlay_icon):not(.always_show_overlay_icon_tablet):not(.always_show_overlay_icon_phone) .grid-item:not(.in-view) .dipi-overlay-icon-animated.animated,
  .dipi_filterable_gallery .grid:not(.always_show_overlay_icon):not(.always_show_overlay_icon_tablet):not(.always_show_overlay_icon_phone) .grid-item:not(.in-view) .dipi_lightbox_link_icon .lightbox-icon.animated,
  .dipi_filterable_gallery .grid:not(.always_show_overlay_icon):not(.always_show_overlay_icon_tablet):not(.always_show_overlay_icon_phone) .grid-item:not(.in-view) .dipi_lightbox_link_icon .link-icon.animated {
    animation: none !important;
  }
}

/*** Filter Bar ***/
.dipi_filterable_grid .dipi-filter-bar {
  display: flex;
  flex-wrap: wrap;
  border-style: solid;
  transition: all 300ms ease 0ms;
}

.dipi_filterable_grid .dipi-filter-bar {
  gap: 20px;
}

.dipi_filterable_grid .dipi-post-meta {
  margin: 10px;
}

.dipi_filterable_grid .dipi-author>img {
  height: 24px;
  width: 24px;
  border-radius: 100px;
  margin-bottom: -6px;
}

.dipi_filterable_grid .dipi-fg-readmore-button {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
}

.dipi-filter-bar-item {
  border-style: solid;
  cursor: pointer;
  align-self: center;
}

@media(min-width: 981px) {
  .dipi_filterable_grid .sticky_filter_bar .dipi-filter-bar {
    position: sticky;
    z-index: 1;
  }
}

.dipi_filterable_grid .dipi-filter-bar-item,
.dipi_filterable_grid .dipi-filter-bar-item.active {
  transition: all 300ms ease 0ms !important;
}

.dipi_filterable_grid .dipi-filter-bar-item-desc {
  font-size: 0.8em
}

.dipi_filterable_grid .grid-item.hidden {
  display: none;
}

.dipi-filterable-grid-icon {
  padding: 20px;
  font-size: 18px;
  color: #FFFFFF;
  transition: all .3s;
}

.dipi-filterable-grid-icon.dipi-filterable-grid-icon-circle {
  background-color: rgba(255, 255, 255, 0.22);
}

.dipi_filterable_grid_overlay.background-hover {
  background-color: rgba(10, 0, 0, 0.45);
}

.dipi_filterable_grid .dipi-pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 30px;
  padding: 12px;
  position: relative;
  z-index: 1;
}

.dipi_filterable_grid .dipi-pagination.long-mobile {
  overflow-x: auto;
  width: 100%;
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 86%, transparent 100%);
  mask-image: linear-gradient(to right, rgb(0, 0, 0) 86%, transparent 100%);
}

@media (max-width: 767px) {
  .dipi_filterable_grid .dipi-pagination .dipi-pagination-btn:not(.active):not(.active-prev):not(.active-next):not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)):not(:last-child) {
    display: none;
  }

  .dipi_filterable_grid .dipi-pagination .dipi-pagination-btn.active-prev:not(:nth-child(2)):not(:nth-child(3)):before {
    content: "...";
    margin-right: 1em;
  }

  /* commented by Roberto
    This code is causing the issue when deactivated pagination button is having background.
    .dipi_filterable_grid .dipi-pagination .dipi-pagination-btn.active-prev {
      padding-left: 0 !important;
    }
    .dipi_filterable_grid .dipi-pagination .dipi-pagination-btn.active-next {
      padding-right: 0 !important;
    }*/
  .dipi_filterable_grid .dipi-pagination .dipi-pagination-btn.active-next:not(:nth-last-child(2)):not(:nth-last-child(3)):after {
    content: "...";
    margin-left: 1em;
  }
}

.dipi_filterable_grid .dipi-pagination .dipi-pagination-btn {
  font-weight: bold;
  cursor: pointer;
  border-style: solid;
  padding: 5px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dipi_filterable_grid .dipi-pagination .dipi-pagination-btn.active {
  border-style: solid;
  background: #ff4200;
  color: #ffffff;
}

.dipi_filterable_grid .dipi-loadmore-btn {
  cursor: pointer;
  border-style: solid;
  padding: 5px 12px;

}

.watch_end_of_grid {
  min-height: 10px;
  margin: 0;
}

@media(max-width: 980px) and (min-width: 768px) {
  .dipi_filterable_grid .grid-item.tablet_show {
    display: block;
  }

  .dipi_filterable_grid .grid-item.tablet_hidden {
    display: none;
  }

  .dipi_filterable_grid .sticky_filter_bar .dipi-filter-bar {
    position: sticky;
    z-index: 1;
  }
}

@media(max-width: 767px) {
  .dipi_filterable_grid .grid-item.phone_show {
    display: block;
  }

  .dipi_filterable_grid .grid-item.phone_hidden {
    display: none;
  }
}

.dipi_filterable_grid .dipi-filtered-posts-container {
  border-style: solid;
}

.dipi_filterable_grid .dipi-filtered-posts-item {
  display: none;
}

.dipi_filterable_grid .grid-item>a>.img-container,
.dipi_filterable_grid .grid-item>.img-container {
  overflow: hidden;
  position: relative;
}

.dipi_filterable_grid .dipi-filtered-posts-item.active {
  display: block;
}

.dipi_filterable_grid .alert {
  display: none;
}

body.et-fb .dipi_filterable_grid .alert,
body.et-bfb .dipi_filterable_grid .alert {
  display: block;
  background-color: #fff9f9;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #888;
  border: 1px solid #ffe6e6;
  margin-bottom: 15px;
}

.dipi_filterable_grid .dipi-filtered-posts-item .grid {
  transition: all .2s ease-in-out;
}

.dipi_filterable_grid .dipi-filter-bar-item-title {
  gap: 0.5em;
  display: flex;
}

.dipi_filterable_grid .dipi-filter-bar-count:before {
  content: "(";
}

.dipi_filterable_grid .dipi-filter-bar-count:after {
  content: ")";
}

.dipi_filterable_grid .dipi_filterable_grid_wrapper.layout_grid .grid {
  display: flex;
  flex-wrap: wrap;
}

.dipi_filterable_grid .dipi_lightbox_link_icon {
  display: flex;
  gap: 10px;
}
.dipi_filterable_grid .dipi_overlay_icons_row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.dipi_filterable_grid .dipi_overlay_icons_row .dipi_lightbox_link_icon {
  margin-bottom: 0;
}
.dipi_filterable_grid .dipi_overlay_icons_row .dipi-filterable-grid-icon,
.dipi_filterable_grid .dipi_overlay_icons_row .dipi-overlay-icon-static,
.dipi_filterable_grid .dipi_overlay_icons_row .dipi-overlay-icon-animated {
  margin-bottom: 0;
  flex-shrink: 0;
}
.dipi_filterable_grid .dipi_overlay_icons_row a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.dipi_filterable_grid .dipi_overlay_title_caption {
  display: flex;
  flex-direction: column;
}

.dipi_filterable_grid .dipi_lightbox_link_icon a.lightbox-icon {
  text-decoration: none;
  color: inherit;
  align-items: center;
  justify-content: center;
}

.dipi_filterable_grid .dipi_filterable_grid_wrapper.layout_grid .grid-sizer,
.dipi_filterable_grid .dipi_filterable_grid_wrapper.layout_grid .gutter-sizer {
  display: none;
}

.dipi_filterable_grid .dipi_filterable_grid_wrapper.layout_grid .grid .img-container img {
  width: 100%;
  object-fit: cover;
}

.dipi_filterable_grid .dipi_filterable_grid_wrapper.layout_grid .grid .grid-item {
  position: relative;
}

/*.dipi_filterable_grid:not(.et_fb_element_controls_visible),*/
.dipi_filterable_grid .grid-item {
  overflow: hidden !important;
}

.dipi_filterable_grid .grid-item .img-container img {
  display: block;
  width: 100%;
}

.dipi_filterable_grid .grid .grid-item {
  border-style: solid;
}

.dipi_filterable_grid .grid .grid-item {
  transition: all .3s ease;
}

.dipi_filterable_grid_overlay {
  /* z-index: -1; */
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.dipi_filterable_grid_overlay.background {
  /* background: rgba(21,2,42,0.3); */
  -webkit-transition: all .6s;
  opacity: 1;
  transition: all .6s;
}

.dipi_filterable_grid_overlay.background-hover {
  /* background: rgba(21,2,42,0.3); */
  -webkit-transition: all .6s;
  opacity: 0;
  transition: all .6s;
}

.dipi_filterable_grid_overlay.content {
  background: transparent;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.dipi-filterable-grid-icon-circle {
  padding: 15px;
  border-radius: 100%;
}

.dipi_filterable_grid .dipi-filterable-grid-icon-circle-border,
.dipi_filterable_grid.et_pb_with_border .dipi-filterable-grid-icon-circle-border {
  border: 2px solid;
}

.dipi_filterable_grid .grid.hide_lightbox .grid-item>.img-container {
  cursor: auto;
}

.dipi_filterable_grid .grid.hide_lightbox .grid-item>a>.img-container,
.dipi_filterable_grid .grid.show_lightbox:not(.use_post_link) .grid-item>.img-container,
.dipi_filterable_grid .lightbox-icon {
  cursor: pointer;
}

.dipi-filterable-grid-icon {
  margin-bottom: 20px;
  transition: all .3s;
}

.dipi_filterable_grid .dipi_filterable_grid_overlay.content .dipi-overlay-icon-static {
  display: none !important;
}

.dipi_filterable_grid .grid.show_overlay .dipi_filterable_grid_overlay {
  display: flex;
}

.dipi_filterable_grid .grid.hide_overlay .dipi_filterable_grid_overlay {
  display: none;
}

@media (max-width: 980px) {
  .dipi_filterable_grid .grid.show_overlay_tablet .dipi_filterable_grid_overlay {
    display: flex;
  }

  .dipi_filterable_grid .grid.hide_overlay_tablet .dipi_filterable_grid_overlay {
    display: none;
  }

  .dipi_filterable_grid .grid.always_show_overlay_icon_tablet .dipi_filterable_grid_overlay.content {
    opacity: 1 !important;
    z-index: 3;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_tablet .dipi-overlay-icon-static {
    display: block !important;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_tablet .dipi-overlay-icon-animated {
    display: none !important;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_tablet .dipi_lightbox_link_icon {
    opacity: 1;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_tablet .dipi_overlay_title_caption {
    opacity: 0;
    transition: none;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_grid_overlay.background-hover,
  .dipi_filterable_grid .grid.always_show_overlay_icon_tablet .grid-item.in-view .dipi_overlay_title_caption {
    opacity: 1;
    z-index: 3;
  }
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_tablet .dipi-overlay-icon-static {
    display: none !important;
  }
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_tablet .dipi-overlay-icon-animated {
    display: block !important;
  }
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_grid_overlay.background,
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_grid_overlay.background-hover,
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_tablet .grid-item.in-view .dipi_filterable_grid_overlay.content {
    opacity: 1;
    z-index: 3;
  }

  .dipi_filterable_grid .grid.show_lightbox_tablet .grid-item>a>.img-container,
  .dipi_filterable_grid .grid.hide_lightbox_tablet .grid-item>.img-container {
    cursor: auto;
  }

  .dipi_filterable_grid .grid.hide_lightbox_tablet .grid-item>a>.img-container,
  .dipi_filterable_grid .grid.show_lightbox_tablet .grid-item>.img-container {
    cursor: pointer;
  }
}

@media (max-width: 767px) {
  .dipi_filterable_grid .grid.show_overlay_phone .dipi_filterable_grid_overlay {
    display: flex;
  }

  .dipi_filterable_grid .grid.hide_overlay_phone .dipi_filterable_grid_overlay {
    display: none;
  }

  .dipi_filterable_grid .grid.always_show_overlay_icon_phone .dipi_filterable_grid_overlay.content {
    opacity: 1 !important;
    z-index: 3;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_phone .dipi-overlay-icon-static {
    display: block !important;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_phone .dipi-overlay-icon-animated {
    display: none !important;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_phone .dipi_lightbox_link_icon {
    opacity: 1;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_phone .dipi_overlay_title_caption {
    opacity: 0;
    transition: none;
  }
  .dipi_filterable_grid .grid.always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_grid_overlay.background-hover,
  .dipi_filterable_grid .grid.always_show_overlay_icon_phone .grid-item.in-view .dipi_overlay_title_caption {
    opacity: 1;
    z-index: 3;
  }
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_phone .dipi-overlay-icon-static {
    display: none !important;
  }
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_phone .dipi-overlay-icon-animated {
    display: block !important;
  }
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_grid_overlay.background,
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_grid_overlay.background-hover,
  .dipi_filterable_grid .grid.hide_always_show_overlay_icon_phone .grid-item.in-view .dipi_filterable_grid_overlay.content {
    opacity: 1;
    z-index: 3;
  }

  .dipi_filterable_grid .grid.hide_lightbox_phone .grid-item>a>.img-container,
  .dipi_filterable_grid .grid.hide_lightbox_phone .grid-item>.img-container {
    cursor: auto;
  }

  .dipi_filterable_grid .grid.show_lightbox_phone .grid-item>a>.img-container,
  .dipi_filterable_grid .grid.show_lightbox_phone .grid-item>.img-container {
    cursor: pointer;
  }

  .dipi_filterable_grid .sticky_filter_bar_phone .dipi-filter-bar {
    position: sticky;
    z-index: 1;
  }
}

body.noscroll {
  overflow: hidden;
}

.dipi_filterable_grid .img-container.dipi-fg-animation img {
  transition: all ease-in-out;
  transition-duration: .5s;
}

.dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-zoom-out img {
  transform: scale(1.05);
}

.dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-move-up img {
  transform: scale(1.1);
}

.dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-move-down img {
  transform: scale(1.1);
}

.dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-move-right img {
  transform: scale(1.1);
}

.dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-move-left img {
  transform: scale(1.1);
}

.dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-rotate img {
  transform: scale(1.1);
}

.dipi-grid-item-excerpt {
  word-break: break-word;
}


/* Desktop hover effects */
@media (min-width: 981px) {
  .dipi-filterable-grid-icon:hover {
    background-color: rgba(21, 2, 42, 0.5);
  }

  .dipi_filterable_grid .grid .grid-item .dipi_filterable_grid_overlay .dipi-filterable-grid-icon.dipi-filterable-grid-icon-circle:hover {
    background-color: rgba(255, 255, 255, 0.36) !important;
  }

  .dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-zoom-in:hover img {
    transform: scale(1.05);
  }

  .dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-zoom-out:hover img {
    transform: scale(1);
  }

  .dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-move-up:hover img {
    transform: scale(1.1) translateY(-10px);
  }

  .dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-move-down:hover img {
    transform: scale(1.1) translateY(10px);
  }

  .dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-move-right:hover img {
    transform: scale(1.1) translateX(10px);
  }

  .dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-move-left:hover img {
    transform: scale(1.1) translateX(-10px);
  }

  .dipi_filterable_grid .img-container.dipi-fg-animation.dipi-fg-rotate:hover img {
    transform: scale(1.2) rotate(5deg);
  }

  .dipi_filterable_grid .grid-item:hover .dipi_filterable_grid_overlay.background {
    opacity: 0;
  }

  .dipi_filterable_grid .grid-item:hover .dipi_filterable_grid_overlay.background-hover,
  .dipi_filterable_grid .grid-item:hover .dipi_filterable_grid_overlay.content {
    opacity: 1;
    z-index: 3;
  }

  .dipi_filterable_grid .grid.always_show_overlay_icon .dipi_filterable_grid_overlay.content {
    opacity: 1 !important;
    z-index: 3;
  }

  .dipi_filterable_grid .grid.always_show_overlay_icon .dipi-overlay-icon-static {
    display: block !important;
  }

  .dipi_filterable_grid .grid.always_show_overlay_icon .dipi-overlay-icon-animated {
    display: none !important;
  }

  .dipi_filterable_grid .grid.always_show_overlay_icon .dipi_lightbox_link_icon {
    opacity: 1;
  }

  .dipi_filterable_grid .grid.always_show_overlay_icon .dipi_overlay_title_caption {
    opacity: 0;
    transition: none;
  }

  .dipi_filterable_grid .grid.always_show_overlay_icon .grid-item:hover .dipi_overlay_title_caption {
    opacity: 1;
  }

  .dipi_filterable_grid .grid.hide_always_show_overlay_icon .dipi-overlay-icon-static {
    display: none !important;
  }

  .dipi_filterable_grid .grid.hide_always_show_overlay_icon .dipi-overlay-icon-animated {
    display: block !important;
  }
}

/* Mobile/tablet: .in-view from tap. */
@media (max-width: 980px) {
  .dipi_filterable_grid .grid .dipi_filterable_grid_overlay {
    transition: opacity 0.3s ease;
  }

  .dipi_filterable_grid .grid .grid-item:not(.in-view) .dipi_filterable_grid_overlay {
    pointer-events: none;
  }

  /* Tap reveal — mirrors desktop :hover */
  .dipi_filterable_grid .grid .grid-item.in-view .dipi_filterable_grid_overlay.background {
    opacity: 0;
  }

  .dipi_filterable_grid .grid .grid-item.in-view .dipi_filterable_grid_overlay.background-hover,
  .dipi_filterable_grid .grid .grid-item.in-view .dipi_filterable_grid_overlay.content {
    opacity: 1;
    z-index: 3;
  }

  /* Tap-to-reveal: play animate.css classes only while .in-view (no JS restart). */
  .dipi_filterable_grid .grid .grid-item:not(.in-view) .dipi-filterable-grid-title.animated,
  .dipi_filterable_grid .grid .grid-item:not(.in-view) .dipi-filterable-grid-excerpt.animated,
  .dipi_filterable_grid .grid:not(.always_show_overlay_icon):not(.always_show_overlay_icon_tablet):not(.always_show_overlay_icon_phone) .grid-item:not(.in-view) .dipi-overlay-icon-animated.animated,
  .dipi_filterable_grid .grid:not(.always_show_overlay_icon):not(.always_show_overlay_icon_tablet):not(.always_show_overlay_icon_phone) .grid-item:not(.in-view) .dipi_lightbox_link_icon .lightbox-icon.animated,
  .dipi_filterable_grid .grid:not(.always_show_overlay_icon):not(.always_show_overlay_icon_tablet):not(.always_show_overlay_icon_phone) .grid-item:not(.in-view) .dipi_lightbox_link_icon .link-icon.animated {
    animation: none !important;
  }
}
/* Fix for Safari bug with revealing footer */
/* .et_pb_row {
    -webkit-transform: translateZ(0);
} */



/* Fix fox backface shining through when using image background */
.dipi-flip-box-front-side-wrapper,
.dipi-flip-box-back-side-wrapper {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Fix for module settings buttons in VB partially coverd by module while flipping */
.dipi_flip_box .et-fb-component-settings--module, .dipi_flip_box .et-pb-draggable-spacing, .dipi_flip_box .et-fb-module-button-wrap--add {
    -webkit-transform: translateZ(10000px);
    transform: translateZ(10000px);
}

/* Fix for 3d flip box translateZ issue */ 
.dipi_flip_box .dipi-3d-flip-box .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper,
.dipi_flip_box .dipi-3d-flip-box .dipi-flip-box-back-side .dipi-flip-box-back-side-wrapper {
    overflow: visible;
}
.dipi_flip_box .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper, 
.dipi_flip_box .dipi-flip-box-back-side .dipi-flip-box-back-side-wrapper {
    border-style: solid;
    border-width: 0;
}
/* Safari Bug */
.dipi-flip-box-front-side,
.dipi-flip-box-back-side {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.dipi-flip-box-inner-wrapper,
/*@since 20240430
* @author Roberto
Commented to showing backside in safari
.dipi-flip-box-front-side,
.dipi-flip-box-back-side,*/
.dipi-flip-box-front-side-wrapper,
.dipi-flip-box-back-side-wrapper,
.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-inner-wrapper {
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}

/* @since 20240805
    *author Roberto
    Add to support 3D Content Effect */
.dipi-3d-flip-box .dipi-flip-box-front-side,
.dipi-3d-flip-box .dipi-flip-box-back-side {
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}

/* Module CSS */
.dipi-flip-box-front-side-innner, .dipi-flip-box-back-side-innner {
    padding: 20px;
}

.dipi_flip_box>.dipi-flip-box-container * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.dipi-flip-box-container .dipi-flip-box-inner {
    position: relative;
    margin: 0;
    padding: 0;
    -moz-perspective: 1000;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-inner-wrapper {
    position: relative;
}

.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-front-side, 
.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-back-side {
    top: 0;
    right: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    background-position: center;
    background-clip: padding-box;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.dipi-flip-box-front-side-wrapper, .dipi-flip-box-back-side-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dipi-flip-box-container .dipi-flip-box-front-side-innner, .dipi-flip-box-container .dipi-flip-box-back-side-innner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-front-side {
    position: relative;
    bottom: 0;
}

.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-back-side {
    position: absolute;
}

.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-top-bottom .dipi-flip-box-front-side, 
.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-inner.dipi-flip-top-bottom:hover .dipi-flip-box-back-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-top-bottom.dipi-flip-box-flipped .dipi-flip-box-back-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top .dipi-flip-box-back-side, 
.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-inner.dipi-flip-bottom-top:hover .dipi-flip-box-back-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top.dipi-flip-box-flipped .dipi-flip-box-back-side {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    transform: rotateX(0deg) rotateY(0deg);
}

.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-inner.dipi-flip-top-bottom:hover .dipi-flip-box-front-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-top-bottom.dipi-flip-box-flipped .dipi-flip-box-front-side {
    -webkit-transform: rotateX(180deg) rotateY(0);
    transform: rotateX(180deg) rotateY(0);
}

.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-top-bottom .dipi-flip-box-back-side {
    -webkit-transform: rotateX(-180deg) rotateY(0);
    transform: rotateX(-180deg) rotateY(0);
}

.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-inner.dipi-flip-bottom-top:hover .dipi-flip-box-front-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top.dipi-flip-box-flipped .dipi-flip-box-front-side {
    -webkit-transform: rotateX(-180deg) rotateY(0);
    transform: rotateX(-180deg) rotateY(0)
}

.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top .dipi-flip-box-back-side {
    -webkit-transform: rotateX(180deg) rotateY(0);
    transform: rotateX(180deg) rotateY(0);
}

.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-left-right .dipi-flip-box-front-side, 
.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-inner.dipi-flip-left-right:hover .dipi-flip-box-back-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-left-right.dipi-flip-box-flipped .dipi-flip-box-back-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-right-left .dipi-flip-box-front-side, 
.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-inner.dipi-flip-right-left:hover .dipi-flip-box-back-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-right-left.dipi-flip-box-flipped .dipi-flip-box-back-side {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    transform: rotateX(0deg) rotateY(0deg);
}

.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-inner.dipi-flip-left-right:hover .dipi-flip-box-front-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-left-right.dipi-flip-box-flipped .dipi-flip-box-front-side {
    -webkit-transform: rotateX(0deg) rotateY(180deg);
    transform: rotateX(0deg) rotateY(180deg);
}

.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-left-right .dipi-flip-box-back-side {
    -webkit-transform: rotateX(0deg) rotateY(-180deg);
    transform: rotateX(0deg) rotateY(-180deg);
}

.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-inner.dipi-flip-right-left:hover .dipi-flip-box-front-side, 
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-right-left.dipi-flip-box-flipped .dipi-flip-box-front-side {
    -webkit-transform: rotateX(0deg) rotateY(-180deg);
    transform: rotateX(0deg) rotateY(-180deg);
}

.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-right-left .dipi-flip-box-back-side {
    -webkit-transform: rotateX(0deg) rotateY(180deg);
    transform: rotateX(0deg) rotateY(180deg);
}

.dipi-flip-box-container .dipi-3d-flip-box .dipi-flip-box-front-side .dipi-flip-box-front-side-innner, 
.dipi-flip-box-container .dipi-3d-flip-box .dipi-flip-box-back-side .dipi-flip-box-back-side-innner {
    -webkit-transform: translateZ(90px) scale(.91);
    transform: translateZ(90px) scale(.91);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube {
    -webkit-transition: .5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
    -o-transition: .5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
    transition: .5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ttb .dipi-flip-box-inner-wrapper {
    -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(90deg);
    transform: rotateX(-90deg) translateY(50%) rotateX(90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ttb .dipi-flip-box-front-side {
    -webkit-transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
    transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ttb .dipi-flip-box-back-side {
    -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg);
    transform: rotateX(-90deg) translateY(50%) rotateX(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ttb .dipi-flip-box-3d-flank {
    -webkit-transform: translateY(-50%) rotateX(90deg);
    transform: translateY(-50%) rotateX(90deg);
}

.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-3d-cube.dipi-flip-ttb:hover .dipi-flip-box-inner-wrapper, 
.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ttb.dipi-flip-box-flipped .dipi-flip-box-inner-wrapper {
    -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg);
    transform: rotateX(-90deg) translateY(50%) rotateX(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-btt .dipi-flip-box-inner-wrapper {
    -webkit-transform: rotateX(90deg) translateY(-50%) rotateX(-90deg);
    transform: rotateX(90deg) translateY(-50%) rotateX(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-btt .dipi-flip-box-front-side {
    -webkit-transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
    transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-btt .dipi-flip-box-back-side {
    -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg);
    transform: rotateX(-90deg) translateY(50%) rotateX(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-btt .dipi-flip-box-3d-flank {
    -webkit-transform: translateY(50%) rotateX(-90deg);
    transform: translateY(50%) rotateX(-90deg);
}

.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-3d-cube.dipi-flip-btt:hover .dipi-flip-box-inner-wrapper, 
.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-btt.dipi-flip-box-flipped .dipi-flip-box-inner-wrapper {
    -webkit-transform: rotateX(90deg) translateY(-50%) rotateX(90deg);
    transform: rotateX(90deg) translateY(-50%) rotateX(90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ltr .dipi-flip-box-inner-wrapper {
    -webkit-transform: rotateY(90deg) translateX(50%) rotateY(-90deg);
    transform: rotateY(90deg) translateX(50%) rotateY(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ltr .dipi-flip-box-front-side {
    -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);
    transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ltr .dipi-flip-box-back-side {
    -webkit-transform: rotateY(90deg) translateX(50%) rotateY(90deg);
    transform: rotateY(90deg) translateX(50%) rotateY(90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ltr .dipi-flip-box-3d-flank {
    -webkit-transform: translateX(-50%) rotateY(-90deg);
    transform: translateX(-50%) rotateY(-90deg);
}

.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-3d-cube.dipi-flip-ltr:hover .dipi-flip-box-inner-wrapper, 
.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-ltr.dipi-flip-box-flipped .dipi-flip-box-inner-wrapper {
    -webkit-transform: rotateY(90deg) translateX(50%) rotateY(90deg);
    transform: rotateY(90deg) translateX(50%) rotateY(90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-rtl .dipi-flip-box-inner-wrapper {
    -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg);
    transform: rotateY(-90deg) translateX(-50%) rotateY(90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-rtl .dipi-flip-box-front-side {
    -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);
    transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-rtl .dipi-flip-box-back-side {
    -webkit-transform: rotateY(90deg) translateX(50%) rotateY(90deg);
    transform: rotateY(90deg) translateX(50%) rotateY(90deg);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-rtl .dipi-flip-box-3d-flank {
    -webkit-transform: translateX(50%) rotateY(90deg);
    transform: translateX(50%) rotateY(90deg);
}

.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-3d-cube.dipi-flip-rtl:hover .dipi-flip-box-inner-wrapper, 
.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-rtl.dipi-flip-box-flipped .dipi-flip-box-inner-wrapper {
    -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg);
    transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg);
}

.dipi-flip-box-3d-flank {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.dipi-flip-box-3d-flank, .dipi-flip-box-inner, .dipi-flip-box-inner-wrapper, .dipi-flip-box-3d-cube .dipi-flip-box-inner-wrapper, .dipi-flip-box-front-side, .dipi-flip-box-back-side {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: inherit;
    -o-transition-duration: inherit;
    transition-duration: inherit;
}

.dipi-flip-box-3d-flank, .dipi-flip-box-inner, .dipi-flip-box-inner-wrapper, .dipi-flip-box-front-side, .dipi-flip-box-back-side {
    -webkit-transition-timing-function: cubic-bezier(.785, .135, .15, .86);
    -o-transition-timing-function: cubic-bezier(.785, .135, .15, .86);
    transition-timing-function: cubic-bezier(.785, .135, .15, .86);
}

.dipi-flip-box-container .dipi-flip-box-3d-cube .dipi-flip-box-front-side, 
.dipi-flip-box-container:not(.dipi-flip-box-click-mode) .dipi-flip-box-3d-cube:hover .dipi-flip-box-back-side, 
.dipi-flip-box-container .dipi-flip-box-3d-cube.dipi-flip-box-flipped .dipi-flip-box-back-side {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transition: all .5s linear 0s;
    -o-transition: all .5s linear 0s;
    transition: all .5s linear 0s;
}

.dipi-flip-box-container .dipi-flip-box-3d-cube .dipi-flip-box-3d-flank {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    background-color: #ddd;
    position: absolute;
    left: 0;
    top: 0;
    border-style: solid;
    border-width: 0;
}

.dipi-flip-box-container .dipi-flip-box-front-side>div, .dipi-flip-box-container .dipi-flip-box-back-side>div {
    width: 100%;
}

.dipi-flip-box-container .dipi-flip-box-front-side .dipi-image-wrap, .dipi-flip-box-container .dipi-flip-box-back-side .dipi-image-wrap {
    /* Carousel Child ships an unscoped `.dipi-image-wrap { display: flex }`
       that leaks into every module sharing the class. As a flex item the
       image ignores the text-align that drives Front/Back Horizontal Align,
       so it always pinned left. Keep this wrap a block. */
    display: block;
    width: 100%;
    margin: auto;
    position: relative;
}

.dipi-flip-box-container .dipi-flip-box-front-side .dipi-image-wrap img, .dipi-flip-box-container .dipi-flip-box-back-side .dipi-image-wrap img {
    border-style: solid;
    -o-object-fit: contain;
    object-fit: contain;
    vertical-align: middle;
}

.dipi-flip-box-container .dipi-flip-box-front-side .dipi-front-icon-circle, .dipi-flip-box-container .dipi-flip-box-back-side .dipi-back-icon-circle {
    padding: 25px;
    border-radius: 100%;
    line-height: 1;
}

.dipi-flip-box-container .dipi-flip-box-front-side .dipi-front-icon-border, .dipi-flip-box-container .dipi-flip-box-back-side .dipi-back-icon-border {
    border: 3px solid;
}

.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-front-side .dipi-text, .dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-back-side .dipi-text {
    padding: 15px 0 0;
}

.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-front-side .dipi-text .dipi-desc, .dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-back-side .dipi-text .dipi-desc {
    margin-bottom: 15px;
}

.dipi-flip-box-container .dipi-flip-box-front-side .dipi-flip-box-heading, .dipi-flip-box-container .dipi-flip-box-back-side .dipi-flip-box-heading {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
}

.dipi-flip-box-container .dipi-front-button, .dipi-flip-box-container .dipi-back-button {
    display: inline-block;
    -webkit-transition: all .2s !important;
    -o-transition: all .2s !important;
    transition: all .2s !important;
}

/* .dipi-flip-box-container .dipi-front-button:hover:after,
.dipi-flip-box-container .dipi-back-button:hover:after {
    font-size: inherit !important;
}

.dipi-flip-box-container .dipi-front-button:hover:before,
.dipi-flip-box-container .dipi-back-button:hover:before {
    font-size: inherit !important;
} */

/* Activate on Click */
.dipi-flip-box-container.dipi-flip-box-click-mode .dipi-flip-box-inner {
    cursor: pointer;
}

.dipi-flip-box-container.dipi-flip-box-click-mode .dipi-flip-box-inner:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dipi-floating-multi-images {
    height: 460px;
}
div.dipi_floating_multi_images_child {
    position: absolute;
    display: inline-block;
    margin: 0;
    transition: .3s;
    line-height: 0;
    will-change: transform;
    animation-name: dipi-updown-effect;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    transform-style: preserve-3d;
    -webkit-animation-name: dipi-updown-effect;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-transform-style: preserve-3d;
}

.dipi_floating_multi_images_child .dipi-fi-icon,
.dipi_floating_multi_images_child img {
    border-style: solid;
}


@keyframes dipi-updown-effect {
    0% {
        transform: translate3d(0, 10px, 0)
    }

    100% {
        transform: translate3d(0, -10px, 0)
    }
}

@-webkit-keyframes dipi-updown-effect {
    0% {
        -webkit-transform: translate3d(0, 10px, 0)
    }

    100% {
        -webkit-transform: translate3d(0, -10px, 0)
    }
}


@keyframes dipi-leftright-effect {
    0% {
        transform: translate3d(10px, 0, 0)
    }

    100% {
        transform: translate3d(-10px, 0, 0)
    }
}

@-webkit-keyframes dipi-leftright-effect {
    0% {
        -webkit-transform: translate3d(10px, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(-10px, 0, 0)
    }
}


@keyframes dipi-topleftright-effect {
    0% {
        transform: translate3d(-10px, -10px, 0) scale3d(0.95, 0.95, 1) rotate3d(1, 0, 0, 0deg)
    }

    100% {
        transform: translate3d(10px, 10px, 0) scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)
    }
}

@-webkit-keyframes dipi-topleftright-effect {
    0% {
        -webkit-transform: translate3d(-10px, -10px, 0) scale3d(0.95, 0.95, 1) rotate3d(1, 0, 0, 0deg)
    }

    100% {
        -webkit-transform: translate3d(10px, 10px, 0) scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)
    }
}


@keyframes dipi-toprightleft-effect {
    0% {
        transform: translate3d(10px, 0, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        transform: translate3d(-10px, 10px, 0) scale3d(1, 1, 1)
    }
}

@-webkit-keyframes dipi-toprightleft-effect {
    0% {
        -webkit-transform: translate3d(10px, 0, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        -webkit-transform: translate3d(-10px, 10px, 0) scale3d(1, 1, 1)
    }
}


@keyframes dipi-rotate-effect {
    0% {
        transform: rotate3d(0, 0, 1, 5deg)
    }

    100% {
        transform: rotate3d(0, 0, 1, -5deg)
    }
}

@-webkit-keyframes dipi-rotate-effect {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg)
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg)
    }
}


@keyframes dipi-zoom-effect {
    0% {
        transform: scale3d(0.9, 0.9, 1)
    }

    100% {
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes dipi-zoom-effect {
    0% {
        -webkit-transform: scale3d(0.9, 0.9, 1)
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1)
    }
}


@keyframes dipi-zoomrotate-effect {
    0% {
        transform: translate3d(0, 5px, 0) scale3d(0.95, 0.95, 1) rotate3d(0, 0, 1, 5deg)
    }

    100% {
        transform: translate3d(0, -5px, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, -5deg)
    }
}

@-webkit-keyframes dipi-zoomrotate-effect {
    0% {
        -webkit-transform: translate3d(0, 5px, 0) scale3d(0.95, 0.95, 1) rotate3d(0, 0, 1, 5deg)
    }

    100% {
        -webkit-transform: translate3d(0, -5px, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, -5deg)
    }
}


@keyframes dipi-zoomtop-effect {
    0% {
        transform: translate3d(0, 10px, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        transform: translate3d(0, -10px, 0) scale3d(1, 1, 1)
    }
}

@-webkit-keyframes dipi-zoomtop-effect {
    0% {
        -webkit-transform: translate3d(0, 10px, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        -webkit-transform: translate3d(0, -10px, 0) scale3d(1, 1, 1)
    }
}


@keyframes dipi-zoombottom-effect {
    0% {
        transform: translate3d(0, -10px, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        transform: translate3d(0, 10px, 0) scale3d(1, 1, 1)
    }
}

@-webkit-keyframes dipi-zoombottom-effect {
    0% {
        -webkit-transform: translate3d(0, -10px, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        -webkit-transform: translate3d(0, 10px, 0) scale3d(1, 1, 1)
    }
}


@keyframes dipi-zoomleft-effect {
    0% {
        transform: translate3d(10px, 0, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        transform: translate3d(-10px, 0, 0) scale3d(1, 1, 1)
    }
}

@-webkit-keyframes dipi-zoomleft-effect {
    0% {
        -webkit-transform: translate3d(10px, 0, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        -webkit-transform: translate3d(-10px, 0, 0) scale3d(1, 1, 1)
    }
}


@keyframes dipi-zoomright-effect {
    0% {
        transform: translate3d(-10px, 0, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        transform: translate3d(10px, 0, 0) scale3d(1, 1, 1)
    }
}

@-webkit-keyframes dipi-zoomright-effect {
    0% {
        -webkit-transform: translate3d(-10px, 0, 0) scale3d(0.95, 0.95, 1)
    }

    100% {
        -webkit-transform: translate3d(10px, 0, 0) scale3d(1, 1, 1)
    }
}
.dipi_gravity_forms_styler .alert {
    display: none;
}

body.et-fb .dipi_gravity_forms_styler .alert,
body.et-bfb .dipi_gravity_forms_styler .alert {
    display: block;
    background-color: #fff9f9;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #888;
    border: 1px solid #ffe6e6;
    margin-bottom: 15px;
}

.dipi_gravity_forms_styler .dipi_gf_styler_wrapper,
.dipi_gravity_forms_styler .gf_progressbar,
.dipi_gravity_forms_styler .gf_progressbar .gf_progressbar_percentage,
.dipi_gravity_forms_styler .gsection,
.dipi_gravity_forms_styler .gfield_html,
.dipi_gravity_forms_styler .dipi_gravity_forms_styler .gfield_html,
.dipi_gravity_forms_styler .gform_wrapper .gfield {
    border-style: solid;
    border-width: 0;
}

.dipi_gravity_forms_styler .gform_wrapper fieldset {
    border-width: 0;
}

.dipi_gravity_forms_styler .gform_wrapper .gf_progressbar_percentage {
    max-height: 100%;
}

.dipi_gravity_forms_styler .ginput_container_select,
.dipi_gravity_forms_styler .gform_wrapper .ginput_container_address .ginput_address_country {
    position: relative;
}

.dipi_gravity_forms_styler .ginput_container_select:after,
.dipi_gravity_forms_styler .gform_wrapper .ginput_container_address .ginput_address_country:after {
    content: "";
    top: 0;
    right: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    height: 100%;
    width: 1em;
}

.dipi_gravity_forms_styler .ginput_container_select:has(select.medium):after {
    right: calc(50% + 8px);
}

.dipi_gravity_forms_styler .ginput_container_select:has(select.small):after {
    right: calc(75% + 12px);
}


/* Style arrow of country selector */
.dipi_gravity_forms_styler .gform_wrapper .ginput_container_address .ginput_address_country:after {
    right: 1.9608%;
}

.dipi_gravity_forms_styler .gform_wrapper .gfield--type-address:not(.field_sublabel_hidden_label) .ginput_container_address .ginput_address_country:after {
    height: calc(100% - 1.7em - 5px);
}

.dipi_gravity_forms_styler .gform_wrapper .gfield--type-address.field_sublabel_above:not(.field_sublabel_hidden_label) .ginput_container_address .ginput_address_country:after {
    bottom: 0;
    top: auto;
}

.dipi_gravity_forms_styler .ginput_container_select:not(.et_pb_custom_button_icon):after,
.dipi_gravity_forms_styler .gform_wrapper .ginput_container_address .ginput_address_country:not(.et_pb_custom_button_icon):after {
    background-image: url("data:image/svg+xml,<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"rgba%280,0,0,.54%29\" d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"></path></svg>");
}

.dipi_gravity_forms_styler .gform_wrapper .ginput_container_select.et_pb_custom_button_icon[data-icon]:not([data-icon=""]):after,
.dipi_gravity_forms_styler .gform_wrapper .ginput_container_address .ginput_address_country[data-icon]:not([data-icon=""]):after {
    content: attr(data-icon);
}

.dipi_gravity_forms_styler .gform_wrapper .ginput_container_address .ginput_address_country.et_pb_custom_button_icon label {
    position: absolute;
    /* To exclude from height of custom arrow */
}

.dipi_gravity_forms_styler .gform_wrapper .ginput_container_time.gfield_time_ampm {
    flex-basis: auto;
    max-width: unset;
}

.gform_wrapper {
    display: block!important;
}

.gform-theme--framework .gf_progressbar_title {
    margin-bottom: var(--gf-field-pg-prog-title-margin-y-end)!important;
}

/* 
.gform_wrapper .gfield .ginput_container_select select.gfield_select {
    height: fit-content;
} */

.dipi-anim-preload .dipi_hover_box * {
    transition: none !important;
}

.dipi-anim-preload .dipi-hover-box-container {
    display: none !important;
}

.dipi-hover-box-container, .dipi-hover-box-content, .dipi-hover-box-hover {
    width: 100%;
}

.dipi-hover-box-container {
    position: relative;
    perspective: 1000px;
    overflow: hidden;
    transition: 1.3s;
    transition-property: all!important;
    border-style: solid;
}

.dipi-hover-box-inner-wrapper {
    position: relative;
    transition: 1.3s;
    border-style: solid;
    transition-property: all!important;
}
 .dipi-hover-box-content, 
 .dipi-hover-box-hover {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    padding: 30px;
    border-style: solid;
    transition: 1s;
    transition-property: all!important;
}

.dipi-hover-button:after {
    font-size: inherit !important; 
    line-height: inherit !important;
}
.dipi-hover-button[data-icon]:not([data-icon=""]):after{
    content: attr(data-icon);
}

.dipi-hover-box-slide-top .dipi-hover-box-hover {
    transform: translateX(0) translateY(100%);
    backface-visibility: hidden;
}

.dipi_hover_box:hover .dipi-hover-box-slide-top .dipi-hover-box-hover {
    transform: translateX(0) translateY(0);
}

.dipi-hover-box-slide-bottom .dipi-hover-box-hover {
    transform: translateX(0) translateY(-100%);
    backface-visibility: hidden;
}

.dipi_hover_box:hover .dipi-hover-box-slide-bottom .dipi-hover-box-hover {
    transform: translateX(0) translateY(0);
}

.dipi-hover-box-slide-left .dipi-hover-box-hover {
    transform: translateX(-100%) translateY(0);
    backface-visibility: hidden;
}

.dipi_hover_box:hover .dipi-hover-box-slide-left .dipi-hover-box-hover {
    transform: translateX(0) translateY(0);
}

.dipi-hover-box-slide-right .dipi-hover-box-hover {
    transform: translateX(100%) translateY(0);
    backface-visibility: hidden;
}

.dipi_hover_box:hover .dipi-hover-box-slide-right .dipi-hover-box-hover {
    transform: translateX(0) translateY(0);
}

.dipi-hover-box-fade .dipi-hover-box-content,
.dipi_hover_box:hover .dipi-hover-box-fade .dipi-hover-box-hover {
    opacity: 1;
}

.dipi_hover_box:hover .dipi-hover-box-fade .dipi-hover-box-content,
.dipi-hover-box-fade .dipi-hover-box-hover {
    opacity: 0;
}

.dipi-hover-box-zoom .dipi-hover-box-content,
.dipi_hover_box:hover .dipi-hover-box-zoom .dipi-hover-box-hover {
    opacity: 1;
    transform: scale(1);
}

.dipi_hover_box:hover .dipi-hover-box-zoom .dipi-hover-box-content,
.dipi-hover-box-zoom .dipi-hover-box-hover {
    opacity: 0;
    transform: scale(.8);
}

.dipi_hover_box:hover .dipi-hover-box-container .dipi-hover-box-content .dipi-hover-box-content-innner {
    opacity: 0;
    transition: opacity .3s linear;
    transition-property: all!important;
}
.dipi-hover-box-container .dipi-hover-box-content .dipi-hover-box-content-innner {
    transition: opacity .3s linear;
    transition-property: all!important;
}

.dipi-hover-box-container .dipi-hover-box-content > div,
.dipi-hover-box-container .dipi-hover-box-hover > div {
  width: 100%;
}

.dipi-hover-box-container .dipi-hover-box-content .dipi-icon-wrap, 
.dipi-hover-box-container .dipi-hover-box-hover .dipi-icon-wrap {
    padding: 15px 0 0
}

.dipi-hover-box-container .dipi-hover-box-content .dipi-image-wrap,
.dipi-hover-box-container .dipi-hover-box-hover .dipi-image-wrap {
    width: 100%;
    margin: auto;
    position: relative;
}

.dipi-hover-box-container .dipi-hover-box-content .dipi-image-wrap img, 
.dipi-hover-box-container .dipi-hover-box-hover .dipi-image-wrap img {
    border-style: solid;
}

.dipi-hover-box-container .dipi-hover-box-content .dipi-content-icon-circle,
.dipi-hover-box-container .dipi-hover-box-hover .dipi-hover-icon-circle {
    padding: 25px;
    border-radius: 100%;
    line-height: 1;
}

.dipi-hover-box-container .dipi-hover-box-content .dipi-content-icon-border,
.dipi-hover-box-container .dipi-hover-box-hover .dipi-hover-icon-border {
    border: 3px solid
}

.dipi-hover-box-container .dipi-hover-box-content .dipi-text,
.dipi-hover-box-container .dipi-hover-box-hover .dipi-text {
    padding: 15px 0
}

.dipi-hover-box-container .dipi-hover-box-content .dipi-hover-box-heading, 
.dipi-hover-box-container .dipi-hover-box-hover .dipi-hover-box-heading {
    margin: 0;
    font-weight: 700;
    font-size: 20px
}

.dipi-hover-box-container .dipi-content-button,
.dipi-hover-box-container .dipi-hover-button {
    display: inline-block;
    transition: all .2s !important;
    transition-property: all!important;
}

.dipi-hover-box-container .dipi-content-button:hover:after,
.dipi-hover-box-container .dipi-hover-button:hover:after {
  font-size: inherit  !important;
}

.dipi-hover-box-container .dipi-content-button:hover:before,
.dipi-hover-box-container .dipi-hover-button:hover:before {
  font-size: inherit !important;
}

/**
 * Alignment : Top;
 */
.hover_box_align_front_top .dipi-hover-box-content,
.hover_box_align_front_top_left .dipi-hover-box-content,
.hover_box_align_front_top_right .dipi-hover-box-content {
    align-items: flex-start !important;
}

.hover_box_align_front_top .dipi-hover-box-content-innner {
    text-align: center;
}

.hover_box_align_front_top_left .dipi-hover-box-content-innner {
    text-align: left;
}

.hover_box_align_front_top_right .dipi-hover-box-content-innner {
    text-align: right;
}

.hover_box_align_front_top .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hover_box_align_front_top_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.hover_box_align_front_top_right .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}
/**
 * Letf, Center, Right
 */
.hover_box_align_front_left .dipi-hover-box-content-innner {
    text-align: left;
}

.hover_box_align_front_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important; 
    margin-right: auto !important;
}

.hover_box_align_front_center .dipi-hover-box-content-innner {
    text-align: center;
}

.hover_box_align_front_right .dipi-hover-box-content-innner {
    text-align: right;
}

.hover_box_align_front_right .dipi-content-image-icon-wrap {
    margin-left: auto !important; 
    margin-right: 0 !important;
}

/**
 * Bottom
 */
.hover_box_align_front_bottom .dipi-hover-box-content,
.hover_box_align_front_bottom_left .dipi-hover-box-content,
.hover_box_align_front_bottom_right .dipi-hover-box-content {
    align-items: flex-end !important;
}

.hover_box_align_front_bottom .dipi-hover-box-content-innner {
    text-align: center;
}

.hover_box_align_front_bottom_left .dipi-hover-box-content-innner {
    text-align: left;
}

.hover_box_align_front_bottom_right .dipi-hover-box-content-innner {
    text-align: right;
}

.hover_box_align_front_bottom .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hover_box_align_front_bottom_left .dipi-content-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.hover_box_align_front_bottom_right .dipi-content-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/**
 * Alignment Bacl : Top;
 */
.hover_box_align_back_top .dipi-hover-box-hover,
.hover_box_align_back_top_left .dipi-hover-box-hover,
.hover_box_align_back_top_right .dipi-hover-box-hover {
    align-items: flex-start !important;
}

.hover_box_align_back_top .dipi-hover-box-hover-innner {
    text-align: center;
}

.hover_box_align_back_top_left .dipi-hover-box-hover-innner {
    text-align: left;
}

.hover_box_align_back_top_right .dipi-hover-box-hover-innner {
    text-align: right;
}

.hover_box_align_back_top .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hover_box_align_back_top_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.hover_box_align_back_top_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}
/**
 * Letf, Center, Right
 */
.hover_box_align_back_left .dipi-hover-box-hover-innner {
    text-align: left;
}

.hover_box_align_back_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important; 
    margin-right: auto !important;
}

.hover_box_align_back_center .dipi-hover-box-hover-innner {
    text-align: center;
}

.hover_box_align_back_right .dipi-hover-box-hover-innner {
    text-align: right;
}

.hover_box_align_back_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important; 
    margin-right: 0 !important;
}

/**
 * Bottom
 */
.hover_box_align_back_bottom .dipi-hover-box-hover,
.hover_box_align_back_bottom_left .dipi-hover-box-hover,
.hover_box_align_back_bottom_right .dipi-hover-box-hover {
    align-items: flex-end !important;
}

.hover_box_align_back_bottom .dipi-hover-box-hover-innner {
    text-align: center;
}

.hover_box_align_back_bottom_left .dipi-hover-box-hover-innner {
    text-align: left;
}

.hover_box_align_back_bottom_right .dipi-hover-box-hover-innner {
    text-align: right;
}

.hover_box_align_back_bottom .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hover_box_align_back_bottom_left .dipi-hover-image-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.hover_box_align_back_bottom_right .dipi-hover-image-icon-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.dipi_hover_box  .et_pb_section_video_bg video {
    object-fit: cover;
    transition: 1.3s;
    transition-property: all!important;
}
:root{
	--dipi-hg-grid-columns: 3;
}
.dipi_hover_gallery {
	overflow: hidden;
}
.et-vb-group-tab--active {
	color: #326bff !important;
	font-weight: 700;
}
.dipi_hover_gallery .dipi-hover-gallery {
	height: inherit;
	min-height: inherit;
	max-height: inherit;
}

/* VB (#42): inherited height for inner wrappers / image layer — exclude grid so "Grid Full Height" works */
.dipi_hover_gallery.et-animated--vb > div:not(.dipi-hg__items) {
	height: inherit;
}

/* Beats legacy `.et-animated--vb > div { height: inherit }` if that sheet still loads elsewhere */
.dipi_hover_gallery.et-animated--vb > div.dipi-hg__items {
	height: auto;
	min-height: 0;
}

.dipi-hover-gallery {
	height: 100%;
	border-style: solid;
}
.dipi_hover_gallery.et_pb_module > div.dipi-hg__images {
	height: 100%;
}
/* .et-fb .dipi_hover_gallery.et_pb_module> div:not(.et-fb-component-settings--module):not(.et-vb-module-options){
	height: 100%;
} */

.dipi-hg__images,
.dipi-hg__images .dipi-hg-image {
	position: absolute;
	width: 100%;
	height: 100%;

	z-index: 1;
	overflow: hidden;
}

.dipi-hg__images .dipi-hg-image > div {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
.dipi-hg__images .dipi-hg-image {
	animation-duration: var(--dipi-hg-animation-speed);
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

.dipi-hg__images .dipi-hg-image.dipi-hg-FadeIn,
.dipi-hg__images .dipi-hg-image.dipi-hg-ZoomIn {
	transition: opacity var(--dipi-hg-animation-speed)
		cubic-bezier(0.24, 0.85, 0.2, 1);
	opacity: 0;
}
.dipi-hg__images .dipi-hg-image > div {
	transition: transform var(--dipi-hg-animation-speed)
		cubic-bezier(0.24, 0.85, 0.2, 1);
}
.dipi-hg__images .dipi-hg-image.dipi-hg-ZoomIn.active,
.dipi-hg__images .dipi-hg-image.dipi-hg-FadeIn.active {
	opacity: 1;
}
.dipi-hg__images
	.dipi-hg-image:not(.dipi-hg-SliceAnim):not(.dipi-hg-FadeIn).active
	> div {
	transform: scale(1.2);
	pointer-events: none;
}

.dipi-hg__images .dipi-hg-image.dipi-hg-FadeRight {
	animation-name: dipi-hg-faderight;
}
.dipi-hg__images .dipi-hg-image.dipi-hg-FadeRight.active {
	animation-name: dipi-hg-faderight-active;
}
.dipi-hg__images .dipi-hg-image.dipi-hg-FadeUp {
	animation-name: dipi-hg-fadetop;
}
.dipi-hg__images .dipi-hg-image.dipi-hg-FadeUp.active {
	animation-name: dipi-hg-fadetop-active;
}
.dipi-hg__images .dipi-hg-image.dipi-hg-FadeDown {
	animation-name: dipi-hg-fadebottom;
}
.dipi-hg__images .dipi-hg-image.dipi-hg-FadeDown.active {
	animation-name: dipi-hg-fadebottom-active;
}
.dipi-hg__images .dipi-hg-image.dipi-hg-FadeLeft {
	animation-name: dipi-hg-fadeleft;
}
.dipi-hg__images .dipi-hg-image.dipi-hg-FadeLeft.active {
	animation-name: dipi-hg-fadeleft-active;
}

.dipi-hg__images .dipi-hg-image.dipi-hg-ZoomInZoomOut {
	animation-name: dipi-hg-ZoomInZoomOut;
}
.dipi-hg__images .dipi-hg-image.dipi-hg-ZoomInZoomOut.active {
	animation-name: dipi-hg-ZoomInZoomOut-active;
}

@keyframes dipi-hg-faderight-active {
	0% {
		opacity: 0;
		left: 100%;
	}
	100% {
		opacity: 1;
		left: 0%;
	}
}
@keyframes dipi-hg-faderight {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes dipi-hg-fadeleft-active {
	0% {
		opacity: 0;
		right: 100%;
	}
	100% {
		opacity: 1;
		right: 0%;
	}
}
@keyframes dipi-hg-fadeleft {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes dipi-hg-fadetop-active {
	0% {
		opacity: 0;
		bottom: 100%;
	}
	100% {
		opacity: 1;
		bottom: 0%;
	}
}
@keyframes dipi-hg-fadetop {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes dipi-hg-fadebottom-active {
	0% {
		opacity: 0;
		top: 100%;
	}
	100% {
		opacity: 1;
		top: 0%;
	}
}
@keyframes dipi-hg-fadebottom {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes dipi-hg-ZoomInZoomOut-active {
	0% {
		transform: scale(1);
		opacity: 0;
	}
	50% {
		transform: scale(1.5);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes dipi-hg-ZoomInZoomOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.dipi-hover-gallery {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dipi_hover_gallery .dipi-hg__items {
	position: relative;
	z-index: 2;
	display: grid;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	width: 100%;
	grid-template-columns: repeat(var(--dipi-hg-grid-columns), 1fr);
	width: 80%;
}

.dipi-hg-button {
	display: inline-block;
	align-self: flex-start;
}

.dipi-hg__items .et_pb_module.dipi_hover_gallery_item {
	margin-bottom: 0 !important;
	min-height: unset;
}
.dipi-hg__item {
	display: flex;
	flex-direction: column;
}

.dipi_hover_gallery_item {
	background-color: #ffffffff;
	padding: 20px;
	border-radius: 0px;
	border-style: solid;
}
.dipi_hover_gallery_item.active {
	border-style: solid;
}

.dipi_hover_gallery_item .dipi-hg__item {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.dipi-hg__item .dipi-content-icon-border,
.dipi-hg__item .dipi-hover-icon-border {
	border: 3px solid;
}
.dipi-image-wrap img {
	border-style: solid;
}
.dipi-hg__item__content p:last-of-type,
.dipi-hg__item__content p:empty {
	padding-bottom: 0;
}

.dipi-hover-box-content-icon {
	border-style: solid;
}
.dipi-hg-title,
.dipi-hg__item__content,
.dipi-content-image-icon-wrap .dipi-hover-box-content-icon,
.dipi-content-image-icon-wrap .dipi-image-wrap,
.dipi_hover_gallery .dipi_hover_gallery_item.active:hover,
.dipi_hover_gallery .dipi_hover_gallery_item:hover,
.dipi_hover_gallery .dipi_hover_gallery_item,
.dipi_hover_gallery .dipi_hover_gallery_item.active {
	transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
	.dipi-hg__items {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 480px) {
	.dipi-hg__items {
		grid-template-columns: repeat(1, 1fr);
	}
}

.dipi-hg-slice-clones {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: stretch;
}
.dipi-hg-slice-clones .dipi-hg-slice {
	width: 20%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.dipi-hg-slice-clones .dipi-hg-slice img {
	position: relative;
	object-fit: cover;
	max-width: none;
}
.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(1) {
	animation-delay: 0ms;
}
.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(2) {
	animation-delay: 150ms;
}
.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(3) {
	animation-delay: 300ms;
}
.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(4) {
	animation-delay: 450ms;
}
.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(5) {
	animation-delay: 600ms;
}

.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(2) img {
	left: -100%;
}
.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(3) img {
	left: -200%;
}
.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(4) img {
	left: -300%;
}
.dipi-hg-slice-clones .dipi-hg-slice:nth-of-type(5) img {
	left: -400%;
}

.dipi-hg-SliceAnim:not(.active) {
	z-index: 3;
}
.dipi-hg-SliceAnim:not(.active).prev {
	z-index: 2;
}
.dipi-hg-SliceAnim.active .dipi-hg-slice-clones .dipi-hg-slice {
	animation-name: dipi-hg-slice-active;
	animation-duration: var(--dipi-hg-animation-speed);
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
.dipi-hg-SliceAnim:not(.active) .dipi-hg-slice-clones .dipi-hg-slice {
	animation-name: dipi-hg-slice;
	animation-duration: var(--dipi-hg-animation-speed);
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}

/* CSS animation animate  */
@keyframes dipi-hg-slice {
	0% {
		top: 0%;
	}
	99.999% {
		top: -100%;
	}
	100% {
		top: 100%;
	}
}
/* CSS animation animate  */
@keyframes dipi-hg-slice-active {
	0% {
		top: 100%;
	}
	100% {
		top: 0%;
	}
}

.dipi_hover_gallery .dipi_hover_gallery_item .dipi-hg-title,
.dipi_hover_gallery .dipi_hover_gallery_item .dipi-hg__item__content,
.dipi_hover_gallery .dipi_hover_gallery_item .dipi-hg-button-wrapper {
	width: 100%;
}

.dipi_hover_gallery .dipi_hover_gallery_item .dipi-content-image-icon-wrap {
	overflow: hidden;
}

.dipi_hover_gallery .dipi_hover_gallery_item .dipi-image-wrap img{
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.dipi_hover_gallery .dipi_hover_gallery_item.active .dipi-image-wrap img {
    transition: all 0.3s ease-in-out;
}

.dipi_hover_gallery .et-vb-module-options.et-vb-ui {
    max-height: 26px;
}


/* Autoplay progress bar — base look + keyframes live in Base/AutoplayProgressBar/style.css;
   these rules only map this module's active-item state to the shared bar's fill. */
.dipi_hover_gallery_item {
	position: relative;
}
.dipi_hover_gallery_item.active .dipi-apb--bottom::after,
.dipi_hover_gallery_item.active .dipi-apb--top::after {
	animation-name: dipiAutoplayProgress;
}
.dipi_hover_gallery_item.active .dipi-apb--left::after,
.dipi_hover_gallery_item.active .dipi-apb--right::after {
	animation-name: dipiAutoplayProgressV;
}
/* Autoplay pauses while the grid items are hovered — pause the fill with it. */
.dipi-hg__items:hover .dipi-autoplay-progress-bar::after {
	animation-play-state: paused;
}


/* Fixes */

.dipi_image_accordion_wrapper {
    overflow: hidden;
}


/* Fixes */


/* Parent Styles */

.dipi_image_accordion_wrapper {
    width: 100%;
    position: relative;
    height: 50vh;
    display: flex;
    flex-direction: column;
}

/* Child Styles */
.dipi_image_accordion_child .dipi-ia-image-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dipi_image_accordion_child {
    position: relative;
    flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    text-align: center;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: flex .4s ease-in-out;
    margin-bottom: 0 !important;
    overflow: hidden;
}

.dipi_clickable .dipi_image_accordion_child {
    cursor: pointer;
}

.dipi_image_accordion_child.dipi-active {
    flex: 5 0 auto;
}

.dipi_image_accordion_bg,
.dipi_image_accordion_bg_hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all .4s ease-in-out !important;
}

.dipi_image_accordion_child.dipi-active .dipi_image_accordion_bg.dipi_hide_on_hover,
.dipi_image_accordion_child:hover .dipi_image_accordion_bg.dipi_hide_on_hover,
.dipi_image_accordion_bg_hover {
    opacity: 0;
}

.dipi_image_accordion_bg,
.dipi_image_accordion_child.dipi-active .dipi_image_accordion_bg_hover,
.dipi_image_accordion_child:hover .dipi_image_accordion_bg_hover {
    opacity: 1;
}

.dipi_image_accordion_child .dipi-accordion-content {
    opacity: 0;
    position: relative;
    transform: translateY(30px);
    transition: all .1s;
}

.dipi_image_accordion_child.dipi-active .dipi-accordion-content {
    opacity: 1;
    transform: translateY(0);
    transition: all .5s ease-in-out .2s !important;
}

.dipi_image_accordion_child .dipi-ia-image-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: background-color .5s;
}

.dipi_image_accordion_child .dipi-accordion-image-icon {
    opacity: 0;
    transition: all .1s;
}

.dipi_image_accordion_child.dipi-active .dipi-accordion-image-icon {
    opacity: 1;
    margin-bottom: 15px;
    transition: all .5s ease-in-out .3s;
}

.dipi_image_accordion_child .dipi-accordion-image-icon>img {
    border-style: solid;
    height: auto;
}

.dipi_image_accordion_child .dipi-accordion-title {
    opacity: 0;
    font-size: 22px;
    color: #333;
    padding-bottom: 10px;
    line-height: 1em;
    font-weight: 500;
    transition: all .1s;
}

.dipi_image_accordion_child.dipi-active .dipi-accordion-title {
    opacity: 1;
    transition: all .5s ease-in-out .3s;
}


/* FIXME: Was macht das? */

.dipi_image_accordion_child .dipi-accordion-description {
    opacity: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5em;
    margin-bottom: 20px;
    transition: all .1s;
}

.dipi_image_accordion_child.dipi-active .dipi-accordion-description {
    opacity: 1;
    transition: all .5s ease-in-out .3s;
}

.dipi_image_accordion_child .dipi-accordion-button-wrap {
    display: flex;
    opacity: 0;
    transition: all .1s;
}

.dipi_image_accordion_child.dipi-active .dipi-accordion-button-wrap {
    opacity: 1;
    transition: all .5s ease-in-out .3s;
}


/*.dipi_image_accordion_child .dipi_accordion_button {
    display: flex;
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    align-items: center;
}
.dipi_image_accordion_child .dipi_accordion_button:after {
    right: 1.4em;
    font-size: inherit !important;
}
.dipi_image_accordion_child .dipi_accordion_button:hover:after {
    right: 1em;
}*/


.dipi-align-horizontal-left,
.dipi-align-horizontal-center,
.dipi-align-horizontal-right,
.dipi-align-vertical-top,
.dipi-align-vertical-center,
.dipi-align-vertical-bottom {
    display: flex;
    width: 100%;
    height: 100%;
    /* Fix for Hover Gradient */
    z-index: 20;
}

.dipi-align-horizontal-left {
    justify-content: flex-start;
}

.dipi-align-horizontal-center {
    justify-content: center;
}

.dipi-align-horizontal-right {
    justify-content: flex-end;
}

.dipi-align-horizontal-left .dipi-accordion-content {
    text-align: left;
}

.dipi-align-horizontal-left .dipi-accordion-content .dipi-accordion-button-wrap {
    justify-content: flex-start;
}

.dipi-align-horizontal-center .dipi-accordion-content {
    text-align: center;
}

.dipi-align-horizontal-center .dipi-accordion-content .dipi-accordion-button-wrap {
    justify-content: center;
}

.dipi-align-horizontal-right .dipi-accordion-content {
    text-align: right;
}

.dipi-align-horizontal-right .dipi-accordion-content .dipi-accordion-button-wrap {
    justify-content: flex-end;
}

.dipi-align-vertical-top {
    align-items: flex-start;
}

.dipi-align-vertical-center {
    align-items: center;
}

.dipi-align-vertical-bottom {
    align-items: flex-end;
}
.dipi_image_accordion_child .et-vb-module-options.et-vb-ui {
    max-height: 26px;
}
.swiper.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
/* Cube slide shadows start */
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Cube slide shadows end */

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
/* Flip slide shadows start */
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Flip slide shadows end */

:root {
    --dipi-ig-popup-speed: 500ms;
}

/* Match D4: direct children of gallery fill height so layout doesn't grow */
.dipi_image_gallery_child > div:not(.et-pb-draggable-spacing),
.dipi_image_gallery > div:not(.et-pb-draggable-spacing) {
    height: 100% !important;
}

.dipi-carousel-wrapper {
    height: 100%;
}

/* Inner gallery fills module root when root has explicit height (D4 behavior) */
.dipi_image_gallery .dipi-image-gallery {
    height: 100%;
}

.dipi-image-gallery .swiper-container {
    width: 100%;
    margin: 0px auto;
}

.swiper-slide-container {
    height: 100%;
    max-width: 100%;
    margin: auto;
    background-position: center;
}

.dipi-image-gallery-top {
    width: 100%;
    flex: 1;
    position: relative;
}

.dipi-image-gallery-top .swiper-slide,
.dipi-image-gallery-top .swiper-slide .dipi_image_gallery_child,
.dipi-image-gallery-top .swiper-container {
    height: 100%;
}

.dipi-image-gallery-thumbs {
    position: relative;
}

.dipi-image-gallery-thumbs .swiper-container {
    height: 100%;
    width: 100%;
}

.dipi-image-gallery-thumbs .swiper-arrow-button.show_on_hover {
    opacity: 0;
    transition: opacity .5s;
}

.dipi-image-gallery-thumbs:hover .swiper-arrow-button.show_on_hover {
    opacity: 1;
}

.dipi-image-gallery-thumbs .swiper-arrow-button:after {
    content: attr(data-icon);
    font-family: ETmodules;
}

.dipi-image-gallery-top .swiper-arrow-button.show_on_hover {
    opacity: 0;
    transition: opacity .5s;
}

.dipi-image-gallery-top:hover .swiper-arrow-button.show_on_hover {
    opacity: 1;
}

.dipi-image-gallery-top .swiper-arrow-button:after {
    content: attr(data-icon);
    font-family: ETmodules;
}

.gallery-thumbs {
    box-sizing: border-box;
    flex: none;
    height: 100%;
}

.dipi-ig-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.dipi-ig-main-content {
    z-index: 10;
    position: absolute;
}

@media only screen and (max-width: 980px) {
    .dipi-ig-float-hz-left-tablet .dipi-image-gallery-thumbs {
        left: 0;
        right: auto;
        transform: none;
    }

    .dipi-ig-float-hz-right-tablet .dipi-image-gallery-thumbs {
        right: 0;
        left: auto;
        transform: none;
    }

    .dipi-ig-float-vr-top-tablet .dipi-image-gallery-thumbs {
        top: 0;
        bottom: auto;
    }

    .dipi-ig-float-vr-bottom-tablet .dipi-image-gallery-thumbs {
        bottom: 0;
        top: auto;
    }

    .dipi-ig-float-hz-center-tablet .dipi-image-gallery-thumbs {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }

    .dipi-ig-float-vr-center-tablet .dipi-image-gallery-thumbs {
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
    }

    .dipi-ig-float-hz-center-tablet.dipi-ig-float-vr-center-tablet .dipi-image-gallery-thumbs {
        transform: translate(-50%, -50%);
    }
}

@media only screen and (max-width: 767px) {
    .dipi-ig-float-hz-center-tablet.dipi-ig-float-vr-center-tablet .dipi-image-gallery-thumbs {
        transform: none;
    }

    .dipi-ig-float-hz-left-phone .dipi-image-gallery-thumbs {
        left: 0;
        right: auto;
        transform: none;
    }

    .dipi-ig-float-hz-right-phone .dipi-image-gallery-thumbs {
        right: 0;
        left: auto;
        transform: none;
    }

    .dipi-ig-float-vr-top-phone .dipi-image-gallery-thumbs {
        top: 0;
        bottom: auto;
        transform: none;
    }

    .dipi-ig-float-vr-bottom-phone .dipi-image-gallery-thumbs {
        bottom: 0;
        top: auto;
        transform: none;
    }

    .dipi-ig-float-hz-center-phone .dipi-image-gallery-thumbs {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }

    .dipi-ig-float-vr-center-phone .dipi-image-gallery-thumbs {
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
    }

    .dipi-ig-float-hz-center-phone.dipi-ig-float-vr-center-phone .dipi-image-gallery-thumbs {
        transform: translate(-50%, -50%);
    }
}

.dipi-image-gallery-top .dipi_image_gallery_child {
    height: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

.gallery-top .dipi_image_gallery_child {
    padding: 10px;
    box-sizing: border-box;
}

.dipi-image-gallery-thumbs .dipi_image_gallery_child {
    height: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-bottom: 0;
}

.dipi-image-gallery-thumbs .dipi-thumbs-horizontal .dipi_image_gallery_child {
    margin-bottom: 0 !important;
}

.dipi-image-gallery-thumbs .dipi_image_gallery_child .swiper-slide-container {
    cursor: pointer;
    height: 100%;
    background-position: center;
    opacity: 0.7;
}

.dipi-image-gallery-thumbs .dipi_image_gallery_child .swiper-slide-container {
    transition: opacity 0.7s;
}

.dipi-image-gallery-thumbs .dipi_image_gallery_child .swiper-slide-container:hover {
    opacity: 1;
}

.dipi-image-gallery-thumbs .dipi-ig-main-content,
.dipi-image-gallery-thumbs .dipi-ig-overlay {
    display: none !important;
}

.dipi-image-gallery-thumbs .swiper-slide-thumb-active .swiper-slide-container {
    opacity: 1;
}

.dipi-image-gallery-top .swiper-arrow-button,
.dipi-image-gallery-thumbs .swiper-arrow-button {
    box-sizing: content-box;
    text-align: center;
    line-height: 0;
}

.dipi-image-gallery-thumbs .swiper-arrow-button:after {
    vertical-align: middle;
}

.dipi-image-gallery-top .swiper-button-prev,
.dipi-image-gallery-thumbs .swiper-button-prev {
    left: 60px;
}

.dipi-image-gallery-top .swiper-button-next,
.dipi-image-gallery-thumbs .swiper-button-next {
    right: 60px;
}

/* Override D5 VB's pointer-events:none on all module content so gallery buttons and thumbs are clickable */
.dipi-image-gallery .swiper-button-next,
.dipi-image-gallery .swiper-button-prev,
.dipi-image-gallery .swiper-slide {
    pointer-events: auto !important;
}

.dipi-image-gallery-thumbs .et-vb-module-mousetrap {
    pointer-events: none !important;
}
.dipi-image-gallery-thumbs .dipi_image_gallery_child .swiper-slide-container {
    pointer-events: auto !important;
}

.dipi-image-gallery {
    display: flex;
    flex-direction: column;
}

.dipi-image-gallery.dipi-ig-vertical {
    flex-direction: row;
    align-items: stretch;
}

.dipi-image-gallery.dipi-ig-vertical .gallery-top {
    flex: 1;
}

.dipi-image-gallery.dipi-ig-vertical .gallery-top {
    height: 100%;
}

.dipi-ig-button {
    display: inline-block;
}

.dipi-back-button:after {
    font-size: inherit !important;
    line-height: inherit !important;
}

.dipi-ig-animation-container.dipi-animated {
    opacity: 0;
}

.dipi-ig-animation-container.dipi-animated.animated {
    opacity: 1;
}

.dipi-ig-main-content--description {
    padding-bottom: 20px;
}


/* The child renders .et_pb_module_inner in the VB only, so every level of both structures
   needs preserve-3d — a single flattening ancestor kills the coverflow effect. */
.dipi_image_gallery .swiper-container-3d .dipi_image_gallery_child,
.dipi_image_gallery .swiper-container-3d .dipi_image_gallery_child .et_pb_module_inner,
.dipi_image_gallery .swiper-container-3d .dipi_image_gallery_child .swiper-slide-container {
    transform-style: preserve-3d;
}

.et-db #et-boc .et-l .et-fb-component-settings--module {
    height: auto !important;
}


/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;


    transition: all var(--dipi-ig-popup-speed) ease-out;
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: all var(--dipi-ig-popup-speed) ease-out;
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.dipi-ig-popup .dipi-image-gallery-top .dipi_image_gallery_child {
    cursor: pointer;
}

.dipi_image_gallery .et-vb-module-options.et-vb-ui {
    max-height: 26px;
}

.dipi-image-hotspot > img {
    width: 100%;
    display: block;
}
.dipi_image_hotspot  .dipi-image-hotspot img {
  border-style: solid;
}
.dipi-image-hotspot-on-top {
  z-index: 9999 !important;
  }
  .ds-image-hotspot-on-top-removing {
  z-index: 9990 !important;
  }
  .dipi-image-hotspot-on-top header .et_builder_inner_content {
    z-index: 10000;
  }
@media all and (max-width: 767px){
    .dipi-image-hotspot {
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .dipi_image_hotspot_child .dipi-tooltip-wrap.dipi-tooltip-wrap {
        max-width: calc(100vw - 20px);
        position: fixed; 
        transform: translateY(-40%) translateX(-50%);
        margin: 0;
        left: 50%;
        bottom: auto;
    }
    [class^='dipi-image-hotspot-zindex'],
    .dipi-image-hotspot-on-top-removing,
    .dipi-image-hotspot-on-top {
      filter: none !important; /* To make position:fixed working */
    }
}
/*
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

 
.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
}
*/
@keyframes fadeInUpShortXCenter {
  from {
    opacity: 0;
    transform: translate3d(-50%, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@-webkit-keyframes fadeInUpShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }
}


.dipi-tooltip-position-top.fadeInUpShort,
.dipi-tooltip-position-bottom.fadeInUpShort
{
  -webkit-animation-name: fadeInUpShortXCenter;
  animation-name: fadeInUpShortXCenter;
}


@keyframes fadeInDownShortXCenter {
  from {
    opacity: 0;
    transform: translate3d(-50%, -10px, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
  
@-webkit-keyframes fadeInDownShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }
}

.dipi-tooltip-position-top.fadeInDownShort,
.dipi-tooltip-position-bottom.fadeInDownShort
 {
  animation-name: fadeInDownShortXCenter;
  -webkit-animation-name: fadeInDownShortXCenter;
}

@keyframes fadeInLeftShortXCenter {
  from {
    opacity: 0;
    transform: translate3d(calc(-10px - 50%), 0, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@-webkit-keyframes fadeInLeftShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(calc(-10px - 50%), 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }
}
.dipi-tooltip-position-top.fadeInLeftShort,
.dipi-tooltip-position-bottom.fadeInLeftShort
{
  animation-name: fadeInLeftShortXCenter;
  -webkit-animation-name: fadeInLeftShortXCenter;
}

@keyframes fadeInRightShortXCenter {
  from {
    opacity: 0;
    transform: translate3d(calc(10px - 50%), 0, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@-webkit-keyframes fadeInRightShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(calc(10px - 50%), 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }
}
.dipi-tooltip-position-top.fadeInRightShort,
.dipi-tooltip-position-bottom.fadeInRightShort {
  animation-name: fadeInRightShortXCenter;
  -webkit-animation-name: fadeInRightShortXCenter;
}

@keyframes zoomInShortXCenter {
  from {
    opacity: 0;
    transform: translateX(-50%)  scale3d(.95, .95, .95);
  }

  50% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomInShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale3d(.95, .95, .95);
  }

  50% {
    opacity: 1;
  }
}
.dipi-tooltip-position-top.zoomInShort,
.dipi-tooltip-position-bottom.zoomInShort {
  animation-name: zoomInShortXCenter;
  -webkit-animation-name: zoomInShortXCenter;
}


@keyframes fadeInUpShortYCenter {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-50% + 10px), 0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}
@-webkit-keyframes fadeInUpShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, calc(-50% + 10px), 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}


.dipi-tooltip-position-left.fadeInUpShort,
.dipi-tooltip-position-right.fadeInUpShort
{
  -webkit-animation-name: fadeInUpShortYCenter;
  animation-name: fadeInUpShortYCenter;
}


@keyframes fadeInDownShortYCenter {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-50% - 10px), 0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}
  
@-webkit-keyframes fadeInDownShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, calc(-50% - 10px), 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}

.dipi-tooltip-position-left.fadeInDownShort,
.dipi-tooltip-position-right.fadeInDownShort
 {
  animation-name: fadeInDownShortYCenter;
  -webkit-animation-name: fadeInDownShortYCenter;
}

@keyframes fadeInLeftShortYCenter {
  from {
    opacity: 0;
    transform: translate3d(-10px, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@-webkit-keyframes fadeInLeftShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10px, -50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}
.dipi-tooltip-position-left.fadeInLeftShort,
.dipi-tooltip-position-right.fadeInLeftShort
{
  animation-name: fadeInLeftShortYCenter;
  -webkit-animation-name: fadeInLeftShortYCenter;
}

@keyframes fadeInRightShortYCenter {
  from {
    opacity: 0;
    transform: translate3d(10px, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}
@-webkit-keyframes fadeInRightShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10px, -50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}
.dipi-tooltip-position-left.fadeInRightShort,
.dipi-tooltip-position-right.fadeInRightShort {
  animation-name: fadeInRightShortYCenter;
  -webkit-animation-name: fadeInRightShortYCenter;
}

@keyframes zoomInShortYCenter {
  from {
    opacity: 0;
    transform: translateY(-50%)  scale3d(.95, .95, .95);
  }

  50% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomInShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50%) scale3d(.95, .95, .95);
  }

  50% {
    opacity: 1;
  }
}
.dipi-tooltip-position-left.zoomInShort,
.dipi-tooltip-position-right.zoomInShort {
  animation-name: zoomInShortYCenter;
  -webkit-animation-name: zoomInShortYCenter;
}

@media (max-width: 767px) {
  /*@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-40%) translateX(-50%);
    }
  
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }*/
  @keyframes fadeInUpShortXCenter
  {
    from {
      opacity: 0;
      transform: translate3d(-50%, 10px, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInDownShortXCenter
  {
    from {
      opacity: 0;
      transform: translate3d(-50%, -10px, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInLeftShortXCenter
  {
    from {
      opacity: 0;
      transform: translate3d(calc(-10px - 50%), 0, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInRightShortXCenter
  {
    from {
      opacity: 0;
      transform: translate3d(calc(10px - 50%), 0, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInUpShortYCenter
  {
    from {
      opacity: 0;
      transform: translate3d(0, calc(-50% + 10px), 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInDownShortYCenter
  {
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInLeftShortYCenter
  {
    from {
      opacity: 0;
      transform: translate3d(0, calc(-50% - 10px), 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInRightShortYCenter
  {
    from {
      opacity: 0;
      transform: translate3d(20px, -50%, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
}

.dipi_image_hotspot .dipi-tooltip-on-top {
  z-index: 9999 !important;
}


.dipi-hidetooltip-on .dipi-tooltip-wrap {
  display: none !important;
}




.dipi_image_hotspot .dipi-hotspot{
    cursor: pointer;
    line-height: 100%;
}

.dipi_image_hotspot .dipi_image_hotspot_child {
	position: absolute !important;
}

.dipi_image_hotspot_child .dipi-hotspot-icon {
	font-size: 24px;
    position: relative;
    z-index: 2;
}

.dipi_image_hotspot_child .dipi-tooltip-icon {
    font-size: 40px;
}

.dipi_image_hotspot_child .dipi-hotspot > img {
    border-style: solid;
    width: 100px;
    height: auto;
}

.dipi_image_hotspot .dipi-tooltip-wrap {
    width: 300px;
    padding: 10px;
    /*visibility: hidden;*/
    display: none;
    background: #fff;
    position: absolute;
    transform: translate(-50%);
    z-index: 99999999999;
    border-style: solid;
    transition: all 0.3s ease-in-out;
    overflow: visible !important;
}

/*.dipi-image-hotspot-child:hover .dipi-tooltip-wrap {
	opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
} */
.dipi-image-hotspot-child .dipi-tooltip-wrap {
    transition: all 0.3s ease-in-out;
}

.dipi_image_hotspot .dipi-tooltip-arrow::before {
    border: 10px solid transparent;
    content: '';
    position: absolute;
    display: block;    
    width: 0px;
}

.dipi_image_hotspot .dipi-tooltip-arrow-left::before {
    border-right: 0;
    border-left: 10px solid #000;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
}

.dipi_image_hotspot .dipi-tooltip-arrow-right::before {
    border-left: 0;
    border-right: 10px solid #000;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
}

.dipi_image_hotspot .dipi-tooltip-arrow-top::before {
    left: 50%;
    bottom: 0;
    border-bottom: 0;
    border-top: 10px solid #000;
    transform: translate(-50%, 100%);
}

.dipi_image_hotspot .dipi-tooltip-arrow-bottom::before {
    left: 50%;
    top: 0;
    border-top: 0;
    border-bottom: 10px solid #000;
    transform: translate(-50%, -100%);
}

.dipi_image_hotspot .dipi-tooltip-position-left {
    transform: translateY(-50%);
    right: 100%;
    top: 50%;
    margin-right: 15px;
}

.dipi_image_hotspot .dipi-tooltip-position-right {
    transform: translateY(-50%);
    top: 50%;
    left: 100%;
    margin-left: 15px;
}

.dipi_image_hotspot .dipi-tooltip-position-top {
    transform: translateX(-50%);
    bottom: 100%;
    left: 50%;
    margin-bottom: 15px;
}

.dipi_image_hotspot .dipi-tooltip-position-bottom {
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    margin-top: 15px;
}

.dipi_image_hotspot .dipi-tooltip-image-icon,
.dipi_image_hotspot .dipi-tooltip-desc,
.dipi_image_hotspot .dipi-tooltip-button-wrap {
	margin-bottom: 15px !important;
}

.dipi_image_hotspot .dipi-tooltip-image-icon > img {
    border-style: solid;
    width: 100px;
    height: auto;
}

.dipi_image_hotspot .dipi-tooltip-button-wrap {
    width: 100%;
}
.dipi_image_hotspot .dipi_image_hotspot_child .dipi-hotspot img.dipi-hotspot-image[src=""] {
    width: 0 !important
}
@media (max-width: 767px) {
    .dipi_image_hotspot  .dipi-tooltip-position-right {
        transform: translateX(-50%);
        top: 100%;
        left: 0;
        margin-top: 20px;
    }
    .dipi_image_hotspot .dipi-tooltip-position-left {
        transform: translateX(-50%);
        top: 100%;
        left: 50%;
        margin-top: 20px;
    }
    .dipi_image_hotspot .dipi-tooltip-arrow-right:before, 
    .dipi_image_hotspot .dipi-tooltip-arrow-left:before,
    .dipi_image_hotspot .dipi-tooltip-arrow-top:before, 
    .dipi_image_hotspot .dipi-tooltip-arrow-bottom:before,
    .dipi_image_hotspot .dipi-tooltip-arrow::before {  
        display: none;  
    }
}


.dipi_image_hotspot  .dipi-tooltip-wrap.animated {
    animation-duration: 0.8s;
    animation-fill-mode: both;
  }

/* interactivity */
.dipi_image_hotspot  .dipi-tooltip-wrap:after {
    content: " ";
    position: absolute;
    display: block;
}
.dipi_image_hotspot  .dipi-tooltip-wrap.dipi-tooltip-position-right:after {
    width: 15px;
    height: 100%;
    top: 0;
    left: -15px;
}
.dipi_image_hotspot  .dipi-tooltip-wrap.dipi-tooltip-position-left:after {
    width: 15px;
    height: 100%;
    top: 0;
    right: -15px;
}
.dipi_image_hotspot  .dipi-tooltip-wrap.dipi-tooltip-position-top:after {
    width: 100%;
    height: 15px;
    left: 0;
    bottom: -15px;
}

.dipi_image_hotspot  .dipi-tooltip-wrap.dipi-tooltip-position-bottom:after{
    width: 100%;
    height: 15px;
    left: 0;
    top: -15px;
}

.dipi-svg-sonar-container
{
        pointer-events: none;
    position: absolute;
    top: 51%;
    left: 51%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.dipi-sonar-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;

    border-radius: 50%;
    border: 1px solid #fff;

    width: 20px;
    height: 20px;

    animation-name: dipi-svg-sonar-animation;
    opacity: 0;
    animation-duration: 1.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 0 0;
}
 
.dipi-sonar-circle:nth-child(2) {animation-delay: .6s;}
.dipi-sonar-circle:nth-child(3) {animation-delay: 1.2s;}
.dipi-sonar-circle:nth-child(4) {animation-delay: 1.8s;}


@keyframes dipi-svg-sonar-animation{
    0% {
        transform: scale(0) translate(-50%,-50%);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) translate(-50%,-50%);
        opacity: 0.5;
    }
    100% {
        transform: scale(3) translate(-50%,-50%);
        opacity: 0;
    }
}
  
/* .dipi-svg-sonar-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.dipi-svg-sonar g{
    animation-name: dipi-svg-sonar-animation;
    opacity: 0;
    animation-duration: 1.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .dipi-svg-sonar g:nth-child(2){animation-delay: .6s;}
  .dipi-svg-sonar g:nth-child(3){animation-delay: 1.2s;}
  .dipi-svg-sonar g:nth-child(4){animation-delay: 1.8s;}
  @keyframes dipi-svg-sonar-animation{
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 1;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    }
    100% {
      -webkit-transform: scale(3);
      transform: scale(3);
      opacity: 0;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
  } */
.dipi-image-magnifier .magnify {
	display: block !important;
}

.dipi-image-magnifier img {
	width: 100%;
	height: auto;
}

.dipi-image-mask{position: relative;overflow:visible;}
.dipi-image-mask--mask {
  z-index: 2;
  position: relative;
}
.dipi-image-mask--mask svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dipi-image-mask--image {
  height:100%;
  position: absolute;  top:0;left:0;
  top:0;
  left:0;
  z-index: 1;
  width: 100%;
}

.dipi-imageselect-checkboxes-wrap {
  display: flex;
  flex-wrap: wrap;
  height: 250px;
  overflow-y: scroll;
}

/* Scrollbar style */
.dipi-imageselect-checkboxes-wrap::-webkit-scrollbar {
  width: 5px;
}

.dipi-imageselect-checkboxes-wrap::-webkit-scrollbar-track {
  background-color: transparent;
}

.dipi-imageselect-checkboxes-wrap::-webkit-scrollbar-thumb {
  background: #2b87da;
  border-radius: 5px;
}

.dipi-imageselect-checkbox {
  width: 25%;
  padding: 4px;
}

.dipi-imageselect-checkbox .dipi-imageselect-img img {
  max-width: 100%;
}

.dipi-imageselect-checkbox .dipi-imageselect-img i.dipi-imageselect-checkmark {
  transform: scale(0);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 5px;
  right: 5px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c3ZnanM9Imh0dHA6Ly9zdmdqcy5jb20vc3ZnanMiIHZlcnNpb249IjEuMSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAzMzAgMzMwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Ik0xNjUsMEM3NC4wMTksMCwwLDc0LjAxOSwwLDE2NXM3NC4wMTksMTY1LDE2NSwxNjVzMTY1LTc0LjAxOSwxNjUtMTY1UzI1NS45ODEsMCwxNjUsMHogTTE2NSwzMDAgICBjLTc0LjQ0LDAtMTM1LTYwLjU2MS0xMzUtMTM1UzkwLjU2LDMwLDE2NSwzMHMxMzUsNjAuNTYxLDEzNSwxMzVTMjM5LjQzOSwzMDAsMTY1LDMwMHoiIGZpbGw9IiM1ZWIzNGIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiLz4KCTxwYXRoIGQ9Ik0yMjYuODcyLDEwNi42NjRsLTg0Ljg1NCw4NC44NTNsLTM4Ljg5LTM4Ljg5MWMtNS44NTctNS44NTctMTUuMzU1LTUuODU4LTIxLjIxMy0wLjAwMSAgIGMtNS44NTgsNS44NTgtNS44NTgsMTUuMzU1LDAsMjEuMjEzbDQ5LjQ5Niw0OS40OThjMi44MTMsMi44MTMsNi42MjgsNC4zOTQsMTAuNjA2LDQuMzk0YzAuMDAxLDAsMCwwLDAuMDAxLDAgICBjMy45NzgsMCw3Ljc5My0xLjU4MSwxMC42MDYtNC4zOTNsOTUuNDYxLTk1LjQ1OWM1Ljg1OC01Ljg1OCw1Ljg1OC0xNS4zNTUsMC0yMS4yMTMgICBDMjQyLjIyNywxMDAuODA3LDIzMi43MywxMDAuODA2LDIyNi44NzIsMTA2LjY2NHoiIGZpbGw9IiM1ZWIzNGIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=);
  background-size: contain;
}

.dipi-imageselect-img {
  position: relative;
  background-color: #eef2f6;
  border-radius: 6px;
  transition: all .2s ease;
  padding: 25%;
  opacity: 0.8;
}

.dipi-imageselect-img img {
  display: block;
}

.dipi-imageselect-checkbox:hover .dipi-imageselect-img {
  opacity: 1;
}

.dipi-imageselect-checkbox input[type='checkbox']:checked+.dipi-imageselect-img {
  background: #fff;
  box-shadow: 0 5px 5px rgba(152, 167, 184, 0.1), 0px 0px 5px rgba(152, 167, 184, 0.15);
  opacity: 1;
}

.dipi-imageselect-checkbox input[type='checkbox']:checked+.dipi-imageselect-img .dipi-imageselect-checkmark {
  transform: scale(1);
  transition: transform .3s ease;
}

.dipi-imageselect-checkbox input[type='checkbox'] {
  visibility: hidden;
  position: absolute;
}

.dipi_image_rotator .hidden {
    display: none;
}

.dipi_image_rotator .dipi-image-rotator-playpause-buttons {
    position: relative;
    z-index: 2;
}

.dipi_image_rotator .dipi-image-rotator-images {
    position: relative;
    line-height: 0;
}

.dipi_image_rotator .rotate_on_wheel .dipi-image-rotator-images {
    cursor: all-scroll;
}

.dipi_image_rotator .rotate_on_drag .dipi-image-rotator-images {
    cursor: grab;
}

.dipi_image_rotator .rotate_on_drag.dragging .dipi-image-rotator-images {
    cursor: grabbing;
}

.dipi_image_rotator .dipi-image-rotator .dipi-image-rotator-images img {
    width: 100%;
    height: auto
}

.dipi_image_rotator .dipi-image-rotator img.indicator-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    z-index: 1;
}

.dipi_image_rotator .dipi-img-rotator-play,
.dipi_image_rotator .dipi-img-rotator-pause {
    cursor: pointer;
    display: inline-block;
}

.dipi_image_rotator .dipi-image-rotator-inner {
    display: flex;
    flex-direction: column;
}

.dipi_image_rotator .dipi-image-rotator.button-pos-bottom .dipi-image-rotator-inner {
    flex-direction: column-reverse;
}

.dipi-image-rotator-preload {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dipi-image-rotator {
    position: relative!important;
}

.dipi-image-rotator-loaded .dipi-image-rotator-preload {
    display: none;
}

.dipi-mockup {
    width: 100%;
    position: relative;
}
.dipi-mockup picture,
.dipi-mockup>picture>img {
    width: 100%;
}

.dipi-mockup-screen>img {
    width: 100%;
    height: 100%;
}

.dipi-mockup-screen {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    position: absolute;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
    
}
.dipi-mockup[data-mockup='iphone-pro-front'],
.dipi-mockup[data-mockup='iphone-pro-right'],
.dipi-mockup[data-mockup='iphone-pro-left'] {overflow: hidden;}
.dipi-mockup[data-mockup='iphone-pro-front'] .dipi-mockup-screen ,
.dipi-mockup[data-mockup='iphone-pro-right'] .dipi-mockup-screen,  
.dipi-mockup[data-mockup='iphone-pro-left'] .dipi-mockup-screen {
    border-radius: 40px;
}

.dipi-mockup-screen.transformed {
    opacity: 1;
}

.dipi-mockup-screen .swiper-container {
    width: 100%;
    height: 100%;
}

.dipi-image-showcase-wrapper,
.dipi_image_showcase_child {
    height: 100%;
}

.dipi_image_showcase .dipi-mockup-img {
    /* z-index: 2; */
    position: relative;
}
.dipi_image_showcase_child>.et_pb_module_inner img{
    width:100%;height: 100%;
}
.dipi-mockup-vs .dipi_image_showcase_child>.et_pb_module_inner img{
    width:100%;
    height: auto;
    transition: all .3s ease-in-out;
}


.dipi_image_showcase_child{height: 100%;}
.dipi_image_showcase_child  > .et_pb_module_inner {
    width: 100%;
    height: 100%;
}

.dipi_image_showcase_child .et-vb-module-options.et-vb-ui {
    max-height: 26px;
}

.dipi_info_circle .dipi-info-circle-out {
  width: 100%;
  height: 100%;
  background-color: transparent;
  left: 50%;
  top: 50%;
}

.dipi_info_circle .dipi-info-circle,
.dipi_info_circle .dipi_info_circle_container:before {
  border-radius: 50%;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  border-style: solid;
  border-width: 0;
}

.dipi_info_circle .dipi_info_circle-in {
  width: 80%;
  height: 80%;
  background-color: #f8f8f8;
  left: 50%;
  top: 50%;
  overflow: hidden;
  display: flex;
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity;
  border-style: solid;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: normal;
}

.dipi_info_circle .dipi_info_circle_container {
  margin: auto;
  width: 400px;
  height: 400px;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
}

.dipi_info_circle .dipi_info_circle_container .dipi-info-circle-items .dipi_info_circle_item_container,
.dipi_info_circle .dipi_info_circle_container .dipi-info-circle-items .dipi_info_circle_item_container:hover {
  /* border of list */
  border-style: none;
}

/*.dipi_info_circle .dipi_info_circle_container:before{
  content: ' ';
  width: calc(80% + 1px);
  height: calc(80% + 1px);
  left: 50%;
  top: 50%;
  z-index: 1;
  position: absolute;
  pointer-events: none;
}*/

.dipi_info_circle .dipi-info-circle.dipi_info_circle-small {
  text-align: center;
  z-index: 5;
  cursor: pointer;
}

.dipi_info_circle .dipi_info_circle_container.icon_ani .dipi-info-circle.dipi_info_circle-small {
  visibility: hidden;
  line-height: 1em;
}

.dipi_info_circle .dipi-info-circle.dipi_info_circle-small,
.dipi_info_circle .dipi-info-circle.dipi_info_circle-small .dipi-info-icon {
  transition-duration: 300ms;
  transition-timing-function: ease;
}

.dipi_info_circle .dipi_info_circle_item-info_image_icon-wrapper {
  line-height: 100%;
}

.dipi_info_circle .dipi_info_circle_item .dipi_info_circle_item_container .dipi-info-image-icon-wrap.dipi-image-wrapper,
.dipi_info_circle .dipi_info_circle_item .dipi_info_circle_item_container .dipi-info-image-icon-wrap.dipi-image-wrapper:hover {
  transition-duration: .3s;
  transition-property: all;
  transition-timing-function: ease-in-out;
}

.dipi_info_circle .dipi-info-circle.dipi_info_circle-small .dipi-info-image-icon-wrap.dipi-image-wrapper {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.dipi_info_circle .dipi-info-circle.dipi_info_circle-small .dipi-info-image-icon-wrap.dipi-image-wrapper .dipi-info-image {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.dipi_info_circle .dipi_info_circle_item_container.active .dipi_info_circle-in {
  z-index: 2 !important;
  opacity: 1;
  transition-duration: 1000ms;
}

.dipi_info_circle .dipi_info_circle_item_container .dipi_info_circle-in .content_link {
  width: 100%;
  height: 100%;
}

/* Animation code */
.dipi_info_circle .bounceInInfoCircle {
  animation-name: bounceInInfoCircle;
}

/* Show as list */
@media only screen and (min-width: 981px) {
  .dipi_info_circle .dipi_info-circle_list .dipi-info-circle-out {
    display: none;
  }

  .dipi_info_circle .dipi_info-circle_list .dipi-info-circle,
  .dipi_info_circle .dipi_info-circle_list .dipi_info_circle_container:before {
    position: unset;
    border-radius: unset!important;
    transform: unset;
  }

  .dipi_info_circle .dipi_info-circle_list .dipi_info_circle-in {
    width: unset!important;
    height: unset!important;
    left: 0 !important;
    top: 0 !important;
    opacity: 1;
    position: relative;
  }

  .dipi_info_circle .dipi_info-circle_list .dipi_info_circle_container {
    width: auto;
    height: auto;
  }

  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list .dipi-info-circle-items .dipi_info_circle_item_container,
  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list .dipi-info-circle-items .dipi_info_circle_item_container:hover {
    /* border of list */
    border-style: solid;
  }

  .dipi_info_circle .dipi_info-circle_list .dipi_info_circle_container:before {
    content: '';
  }

  .dipi_info_circle .dipi_info-circle_list .dipi-info-circle.dipi_info_circle-small {
    transform: unset;
  }

  /* Animation code */
  .dipi_info_circle .dipi_info-circle_list .bounceInInfoCircle {
    animation-name: bounceIn;
  }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
  .dipi_info_circle .dipi_info-circle_list_tablet .dipi-info-circle-out {
    display: none;
  }

  .dipi_info_circle .dipi_info-circle_list_tablet .dipi-info-circle,
  .dipi_info_circle .dipi_info-circle_list_tablet .dipi_info_circle_container:before {
    position: unset;
    border-radius: unset!important;
    transform: unset;
  }

  .dipi_info_circle .dipi_info-circle_list_tablet .dipi_info_circle-in {
    width: unset!important;
    height: unset!important;
    left: 0 !important;
    top: 0 !important;
    opacity: 1;
    position: relative;
  }

  .dipi_info_circle .dipi_info-circle_list_tablet .dipi_info_circle_container {
    width: auto;
    height: auto;
  }

  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list_tablet .dipi-info-circle-items .dipi_info_circle_item_container,
  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list_tablet .dipi-info-circle-items .dipi_info_circle_item_container:hover {
    /* border of list */
    border-style: solid;
  }

  .dipi_info_circle .dipi_info-circle_list_tablet .dipi_info_circle_container:before {
    content: '';
  }

  .dipi_info_circle .dipi_info-circle_list_tablet .dipi-info-circle.dipi_info_circle-small {
    transform: unset;
  }

  /* Animation code */
  .dipi_info_circle .dipi_info-circle_list_tablet .bounceInInfoCircle {
    animation-name: bounceIn;
  }
}



@media only screen and (max-width: 767px) {
  .dipi_info_circle .dipi_info-circle_list_phone .dipi-info-circle-out {
    display: none;
  }

  .dipi_info_circle .dipi_info-circle_list_phone .dipi-info-circle,
  .dipi_info_circle .dipi_info-circle_list_phone .dipi_info_circle_container:before {
    position: unset;
    border-radius: unset!important;
    transform: unset;
  }

  .dipi_info_circle .dipi_info-circle_list_phone .dipi_info_circle-in {
    width: unset!important;
    height: unset!important;
    left: 0 !important;
    top: 0 !important;
    opacity: 1;
    position: relative;
  }

  .dipi_info_circle .dipi_info-circle_list_phone .dipi_info_circle_container {
    width: auto;
    height: auto;
  }

  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list_phone .dipi-info-circle-items .dipi_info_circle_item_container,
  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list_phone .dipi-info-circle-items .dipi_info_circle_item_container:hover {
    /* border of list */
    border-style: solid;
  }

  .dipi_info_circle .dipi_info-circle_list_phone .dipi_info_circle_container:before {
    content: '';
  }

  .dipi_info_circle .dipi_info-circle_list_phone .dipi-info-circle.dipi_info_circle-small {
    transform: unset;
  }

  /* Animation code */
  .dipi_info_circle .dipi_info-circle_list_phone .bounceInInfoCircle {
    animation-name: bounceIn;
  }
}

@keyframes bounceInInfoCircle {

  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale3d(.6, .6, .6);
  }

  20% {
    transform: translateX(-50%) translateY(-50%) scale3d(1.05, 1.05, 1.05);
  }

  40% {
    transform: translateX(-50%) translateY(-50%) scale3d(.95, .95, .95);
  }

  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale3d(1.02, 1.02, 1.02);
  }

  80% {
    transform: translateX(-50%) translateY(-50%) scale3d(.98, .98, .98);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale3d(1, 1, 1);
  }
}

@media only screen and (min-width: 981px) {
  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list {
      height: auto!important;
  }
}

@media only screen and (max-width: 980px) {
  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list_tablet {
      height: auto!important;
  }
}

@media only screen and (max-width: 767px) {
  .dipi_info_circle .dipi_info_circle_container.dipi_info-circle_list_phone {
      height: auto!important;
  }
}

.et-db #et-boc .et-l #et-fb-app .dipi_info_circle .dipi_info_circle_item,
.dipi_info_circle .dipi_info_circle_item {
  position: unset !important;
}

.dipi_info_circle .dipi_info_circle_item>.et_parallax_bg_wrap {
  display: none;
}

.dipi_info_circle .dipi_info_circle_item-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 0;
  animation-delay: 400ms;
}

.dipi_info_circle .dipi_info_circle_item .dipi-content-text {
  text-align: center;
}
.dipi-lottie-wrapper {
    display: flex;
    flex-direction: column;
}

.dipi-lottie-content {
    padding: 20px;
}

.dipi-lottie-desc {
    font-size: 14px;
    line-height: 15px;
    padding-bottom: 30px;
}

@media (min-width: 981px) {
    .dipi-lottie-wrapper.dipi_lottie_placement_left {
        flex-direction: row;
    }

    .dipi-lottie-wrapper.dipi_lottie_placement_right {
        flex-direction: row-reverse;
    }
}

@media(max-width: 980px) {
    .dipi-lottie-wrapper.dipi_lottie_placement_left_tablet {
        flex-direction: row;
    }

    .dipi-lottie-wrapper.dipi_lottie_placement_right_tablet {
        flex-direction: row-reverse;
    }
}

@media(max-width: 767px) {
    .dipi-lottie-wrapper.dipi_lottie_placement_left_phone {
        flex-direction: row !important;
    }

    .dipi-lottie-wrapper.dipi_lottie_placement_top_phone {
        flex-direction: column !important;
    }

    .dipi-lottie-wrapper.dipi_lottie_placement_right_phone {
        flex-direction: row-reverse !important;
    }
}

.et-vb-code .CodeMirror-scroll {
    max-height: 400px !important;
}
/* .et-db #et-boc .et-fb-modules-list ul>li.dipi_masonry_gallery {
    background-color: #2c3d49 !important;
    color: white !important;
    overflow: visible !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.et-db #et-boc .et-fb-modules-list ul>li.dipi_masonry_gallery span {
    font-size: 10px !important;
} */

.dipi_masonry_gallery,
.dipi_masonry_gallery .grid-item {
    overflow: hidden !important;
    border-style: solid;
}

.dipi_masonry_gallery .grid-item.hidden {
    display: none;
}

.dipi_masonry_gallery .dipi-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 30px;
    padding: 12px;
}

.dipi_masonry_gallery .dipi-pagination.long-mobile {
    overflow-x: auto;
    width: 100%;
    justify-content: flex-start;
    mask-image: linear-gradient(to right, rgb(0, 0, 0) 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 86%, transparent 100%);
}

.dipi_masonry_gallery .dipi-pagination .dipi-pagination-btn {
    font-weight: bold;
    cursor: pointer;
    border-style: solid;
    padding: 5px 12px;
    flex-shrink: 0;
}

.dipi_masonry_gallery .dipi-pagination .dipi-pagination-btn.active {
    border-style: solid;
    background: #ff4200;
    color: #ffffff;
}

.dipi_masonry_gallery .dipi-loadmore-btn {
    cursor: pointer;
    border-style: solid;
    padding: 5px 12px;
}

.watch_end_of_grid {
    min-height: 10px;
    margin: 0;
}

@media(max-width: 980px) and (min-width: 768px) {
    .dipi_masonry_gallery .grid-item.tablet_show {
        display: block;
    }

    .dipi_masonry_gallery .grid-item.tablet_hidden {
        display: none;
    }
}

@media(max-width: 767px) {
    .dipi_masonry_gallery .grid-item.phone_show {
        display: block;
    }

    .dipi_masonry_gallery .grid-item.phone_hidden {
        display: none;
    }
}

.dipi_masonry_gallery .grid-item img {
    display: block;
    width: 100%;
}

.dipi_masonry_gallery_overlay {
    /* z-index: -1; */
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.dipi_masonry_gallery_overlay.background {
    /* background: rgba(21,2,42,0.3); */
    -webkit-transition: all .6s;
    opacity: 1;
    transition: all .6s;
}

.dipi_masonry_gallery_overlay.background-hover {
    /* background: rgba(21,2,42,0.3); */
    -webkit-transition: all .6s;
    opacity: 0;
    transition: all .6s;
}

.dipi_masonry_gallery_overlay.content {
    background: transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.et_pb_gallery_image:hover .dipi_masonry_gallery_overlay.background {
    opacity: 0;
}

.et_pb_gallery_image:hover .dipi_masonry_gallery_overlay.background-hover,
.et_pb_gallery_image:hover .dipi_masonry_gallery_overlay.content {
    opacity: 1;
    z-index: 3;
}

.dipi-mansonry-gallery-icon-circle {
    padding: 15px;
    border-radius: 100%;
}

.dipi_masonry_gallery .dipi-mansonry-gallery-icon-circle-border,
.dipi_masonry_gallery.et_pb_with_border .dipi-mansonry-gallery-icon-circle-border {
    border: 2px solid;
}

.dipi_masonry_gallery .grid.hide_lightbox .grid-item>.img-container {
    cursor: auto;
}

.dipi_masonry_gallery .grid.show_lightbox .grid-item>.img-container {
    cursor: pointer;
}

.dipi-mansonry-gallery-icon {
    margin-bottom: 20px;
}

.dipi_masonry_gallery .grid.show_overlay .dipi_masonry_gallery_overlay {
    display: flex;
}

.dipi_masonry_gallery .grid.hide_overlay .dipi_masonry_gallery_overlay {
    display: none;
}

@media (max-width: 980px) {
    .dipi_masonry_gallery .grid.show_overlay_tablet .dipi_masonry_gallery_overlay {
        display: flex;
    }

    .dipi_masonry_gallery .grid.hide_overlay_tablet .dipi_masonry_gallery_overlay {
        display: none;
    }

    .dipi_masonry_gallery .grid.hide_lightbox_tablet .grid-item>.img-container {
        cursor: auto;
    }

    .dipi_masonry_gallery .grid.show_lightbox_tablet .grid-item>.img-container {
        cursor: pointer;
    }
}

@media (max-width: 767px) {
    .dipi_masonry_gallery .grid.show_overlay_phone .dipi_masonry_gallery_overlay {
        display: flex;
    }

    .dipi_masonry_gallery .grid.hide_overlay_phone .dipi_masonry_gallery_overlay {
        display: none;
    }

    .dipi_masonry_gallery .grid.hide_lightbox_phone .grid-item>.img-container {
        cursor: auto;
    }

    .dipi_masonry_gallery .grid.show_lightbox_phone .grid-item>.img-container {
        cursor: pointer;
    }
}

body.noscroll {
    overflow: hidden;
}

.img-container.dipi-mg-animation img {
    transition: all ease-in-out;
    transition-duration: .5s;
}

.img-container.dipi-mg-animation.dipi-mg-zoom-in:hover img {
    transform: scale(1.05);
}

.img-container.dipi-mg-animation.dipi-mg-zoom-out img {
    transform: scale(1.05);
}

.img-container.dipi-mg-animation.dipi-mg-zoom-out:hover img {
    transform: scale(1);
}

.img-container.dipi-mg-animation.dipi-mg-move-up img {
    transform: scale(1.1);
}

.img-container.dipi-mg-animation.dipi-mg-move-up:hover img {
    transform: scale(1.1) translateY(-10px);
}

.img-container.dipi-mg-animation.dipi-mg-move-down img {
    transform: scale(1.1);
}

.img-container.dipi-mg-animation.dipi-mg-move-down:hover img {
    transform: scale(1.1) translateY(10px);
}

.img-container.dipi-mg-animation.dipi-mg-move-right img {
    transform: scale(1.1);
}

.img-container.dipi-mg-animation.dipi-mg-move-right:hover img {
    transform: scale(1.1) translateX(10px);
}

.img-container.dipi-mg-animation.dipi-mg-move-left img {
    transform: scale(1.1);
}

.img-container.dipi-mg-animation.dipi-mg-move-left:hover img {
    transform: scale(1.1) translateX(-10px);
}

.img-container.dipi-mg-animation.dipi-mg-rotate img {
    transform: scale(1.1);
}

.img-container.dipi-mg-animation.dipi-mg-rotate:hover img {
    transform: scale(1.2) rotate(5deg);
}
/* Pannellum 2.5.6, https://github.com/mpetroff/pannellum */
.pnlm-container{margin:0;padding:0;overflow:hidden;position:relative;cursor:default;width:100%;height:100%;font-family:Helvetica,"Nimbus Sans L","Liberation Sans",Arial,sans-serif;background:#f4f4f4 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A") repeat;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;outline:0;line-height:1.4;contain:content}.pnlm-container *{box-sizing:content-box}.pnlm-ui{position:absolute;width:100%;height:100%;z-index:1}.pnlm-grab{cursor:grab;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A") 12 8,default}.pnlm-grabbing{cursor:grabbing;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A") 12 8,default}.pnlm-sprite{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A")}.pnlm-container:-moz-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-webkit-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-ms-fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-render-container{cursor:inherit;position:absolute;height:100%;width:100%}.pnlm-controls{margin-top:4px;background-color:#fff;border:1px solid #999;border-color:rgba(0,0,0,0.4);border-radius:3px;cursor:pointer;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-control:hover{background-color:#f8f8f8}.pnlm-controls-container{position:absolute;top:0;left:4px;z-index:1}.pnlm-zoom-controls{width:26px;height:52px}.pnlm-zoom-in{width:100%;height:50%;position:absolute;top:0;border-radius:3px 3px 0 0}.pnlm-zoom-out{width:100%;height:50%;position:absolute;bottom:0;background-position:0 -26px;border-top:1px solid #ddd;border-top-color:rgba(0,0,0,0.10);border-radius:0 0 3px 3px}.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,.pnlm-hot-spot-debug-indicator{width:26px;height:26px}.pnlm-hot-spot-debug-indicator{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background-color:rgba(255,255,255,0.5);border-radius:13px;display:none}.pnlm-orientation-button-inactive{background-position:0 -156px}.pnlm-orientation-button-active{background-position:0 -182px}.pnlm-fullscreen-toggle-button-inactive{background-position:0 -52px}.pnlm-fullscreen-toggle-button-active{background-position:0 -78px}.pnlm-panorama-info{position:absolute;bottom:4px;background-color:rgba(0,0,0,0.7);border-radius:0 3px 3px 0;padding-right:10px;color:#fff;text-align:left;display:none;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-title-box{position:relative;font-size:20px;display:table;padding-left:5px;margin-bottom:3px}.pnlm-author-box{position:relative;font-size:12px;display:table;padding-left:5px}.pnlm-load-box{position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:rgba(0,0,0,0.7);border-radius:3px;text-align:center;font-size:20px;display:none;color:#fff}.pnlm-load-box p{margin:20px 0}.pnlm-lbox{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;display:none}.pnlm-loading{animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-name:pnlm-mv;-webkit-animation-name:pnlm-mv;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;height:10px;width:10px;background-color:#fff;position:relative}@keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}@-webkit-keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}.pnlm-load-button{position:absolute;top:50%;left:50%;width:200px;height:100px;margin:-50px 0 0 -100px;background-color:rgba(0,0,0,.7);border-radius:3px;text-align:center;font-size:20px;display:table;color:#fff;cursor:pointer}.pnlm-load-button:hover{background-color:rgba(0,0,0,.8)}.pnlm-load-button p{display:table-cell;vertical-align:middle}.pnlm-info-box{font-size:15px;position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:#000;border-radius:3px;display:table;text-align:center;color:#fff;table-layout:fixed}.pnlm-info-box a,.pnlm-author-box a{color:#fff;word-wrap:break-word;overflow-wrap:break-word}.pnlm-info-box p{display:table-cell;vertical-align:middle;padding:0 5px 0 5px}.pnlm-error-msg{display:none}.pnlm-about-msg{font-size:11px;line-height:11px;color:#fff;padding:5px 8px 5px 8px;background:rgba(0,0,0,0.7);border-radius:3px;position:absolute;top:50px;left:50px;display:none;opacity:0;-moz-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;z-index:1}.pnlm-about-msg a:link,.pnlm-about-msg a:visited{color:#fff}.pnlm-about-msg a:hover,.pnlm-about-msg a:active{color:#eee}.pnlm-hotspot-base{position:absolute;visibility:hidden;cursor:default;vertical-align:middle;top:0;z-index:1}.pnlm-hotspot{height:26px;width:26px;border-radius:13px}.pnlm-hotspot:hover{background-color:rgba(255,255,255,0.2)}.pnlm-hotspot.pnlm-info{background-position:0 -104px}.pnlm-hotspot.pnlm-scene{background-position:0 -130px}div.pnlm-tooltip span{visibility:hidden;position:absolute;border-radius:3px;background-color:rgba(0,0,0,0.7);color:#fff;text-align:center;max-width:200px;padding:5px 10px;margin-left:-220px;cursor:default}div.pnlm-tooltip:hover span{visibility:visible}div.pnlm-tooltip:hover span:after{content:'';position:absolute;width:0;height:0;border-width:10px;border-style:solid;border-color:rgba(0,0,0,0.7) transparent transparent transparent;bottom:-20px;left:-10px;margin:0 50%}.pnlm-compass{position:absolute;width:50px;height:50px;right:4px;bottom:4px;border-radius:25px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2250%22%20width%3D%2250%22%3E%0A%3Cpath%20d%3D%22m24.5078%206-3.2578%2018h7.5l-3.25781-18h-0.984376zm-3.2578%2020%203.2578%2018h0.9844l3.2578-18h-7.5zm1.19531%200.9941h5.10938l-2.5547%2014.1075-2.5547-14.1075z%22%2F%3E%0A%3C%2Fsvg%3E%0A");cursor:default;display:none}.pnlm-world{position:absolute;left:50%;top:50%}.pnlm-face{position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0}.pnlm-dragfix,.pnlm-preview-img{position:absolute;height:100%;width:100%}.pnlm-preview-img{background-size:cover;background-position:center}.pnlm-lbar{width:150px;margin:0 auto;border:#fff 1px solid;height:6px}.pnlm-lbar-fill{background:#fff;height:100%;width:0}.pnlm-lmsg{font-size:12px}.pnlm-fade-img{position:absolute;top:0;left:0}.pnlm-pointer{cursor:pointer}
.dipi_panorama {
    overflow: hidden !important;
    position: relative;
}

.pnlm-container {
    height: 100% !important;
}

.dipi_panorama .dipi-panorama-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition:
        visibility 0.3s linear,
        opacity 0.3s linear !important;
    visibility: visible;
    opacity: 1;
}

.dipi_panorama:hover .dipi-panorama-overlay {
    visibility: hidden;
    opacity: 0;
}
.dipi_panorama .dipi-panorama-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
}

.dipi_panorama .loaded .pnlm-load-button {
    display: none;
}

.dipi_panorama .dipi-scroll-icon {
    background-size: 100% 100%;
    margin-right: 8px !important;
    width: 30px;
    height: 40px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxlbGxpcHNlIGNsYXNzPSJzdDAiIGN4PSIyNTUuNiIgY3k9IjI1NC45IiByeD0iMTY3LjUiIHJ5PSIyMzYiLz4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjU2LDBDMTU2LjYsMCw3NS43LDgyLjEsNzUuNywxODMuMXYxNDUuOGMwLDEwMSw4MC45LDE4My4xLDE4MC4zLDE4My4xYzk5LjQsMCwxODAuMy04MS45LDE4MC4zLTE4Mi41VjE4My4xDQoJCQlDNDM2LjMsODIuMSwzNTUuNCwwLDI1NiwweiBNNDAyLjQsMzI5LjVjMCw4Mi02NS43LDE0OC42LTE0Ni40LDE0OC42Yy04MC43LDAtMTQ2LjQtNjYuOS0xNDYuNC0xNDkuMlYxODMuMQ0KCQkJYzAtODIuMyw2NS43LTE0OS4yLDE0Ni40LTE0OS4yYzgwLjcsMCwxNDYuNCw2Ni45LDE0Ni40LDE0OS4yVjMyOS41eiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjU2LDE0MC4xYy05LjQsMC0xNyw3LjYtMTcsMTd2NTkuM2MwLDkuNCw3LjYsMTcsMTcsMTdjOS40LDAsMTctNy42LDE3LTE3di01OS4zQzI3MywxNDcuNywyNjUuNCwxNDAuMSwyNTYsMTQwLjF6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=);
}

.dipi_panorama .dipi-hand-icon {
    width: 25px;
    height: 30px;
    background-size: 100% 100%;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDM5Ni41IDQ2OS4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzOTYuNSA0NjkuMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGRkZGRjtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPGc+DQoJPGc+DQoJCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTMsMjc0LjggMTg2LjgsNDQ4LjYgMjkzLjksNDQ4LjYgMzQwLjUsNDQ4LjYgMzYyLjMsNDI2LjggMzgxLjMsMzg0LjYgMzg1LjYsMjk2LjIgMzg1LjYsMjI0LjkgDQoJCQkzNTguNSwyMDYuOSAzMjIuNCwyMDQgMjk3LjIsMTgxLjIgMjY2LjMsMTg1LjUgMjMyLjEsMTY0LjYgMTk4LjIsMTYxLjcgMTkwLjMsNzIuNCAxNTgsNTUuMiAxMzAuNCw3MC45IDEzMS40LDEzNC42IDEyOSwxODQgDQoJCQkxMjkuOSwyMTUuNCAxMjkuNSwyMzQuNiAxMjcuNiwyNTguNyAxMjYuMSwyNzcuNyA0OS42LDI0MC4xIDE4LjcsMjQ1LjMgCQkiLz4NCgkJPHBhdGggZD0iTTM1My44LDE5MmMtOC44LDAtMTYuOSwyLjctMjMuNyw3LjJjLTUuOC0xNi42LTIxLjctMjguNS00MC4zLTI4LjVjLTguOCwwLTE2LjksMi43LTIzLjcsNy4yDQoJCQljLTUuOC0xNi42LTIxLjctMjguNS00MC4zLTI4LjVjLTcuOCwwLTE1LjEsMi4xLTIxLjMsNS43Vjg1LjNjMC0yMy41LTE5LjEtNDIuNy00Mi43LTQyLjdzLTQyLjcsMTkuMS00Mi43LDQyLjd2MTgxLjNMODIsMjM4LjgNCgkJCWMtMjItMTYuNS01My4zLTE0LjMtNzIuNyw1LjJjLTEyLjUsMTIuNS0xMi41LDMyLjgsMCw0NS4ybDE1MS45LDE1MS45YzE4LjEsMTguMSw0Mi4yLDI4LjEsNjcuOSwyOC4xaDUwDQoJCQljNjQuNywwLDExNy4zLTUyLjYsMTE3LjMtMTE3LjNWMjM0LjdDMzk2LjUsMjExLjEsMzc3LjQsMTkyLDM1My44LDE5MnogTTM3NS4yLDM1MmMwLDUyLjktNDMuMSw5Ni05Niw5NmgtNTANCgkJCWMtMTkuOSwwLTM4LjctNy44LTUyLjgtMjEuOUwyNC41LDI3NC4yYy00LjItNC4yLTQuMi0xMC45LDAtMTUuMWM2LjYtNi42LDE1LjQtMTAsMjQuMy0xMGM3LjIsMCwxNC40LDIuMiwyMC41LDYuOGw1NC4xLDQwLjYNCgkJCWMzLjIsMi40LDcuNiwyLjgsMTEuMiwxczUuOS01LjUsNS45LTkuNVY4NS4zYzAtMTEuOCw5LjYtMjEuMywyMS4zLTIxLjNjMTEuOCwwLDIxLjMsOS42LDIxLjMsMjEuM3YxNjBjMCw1LjksNC44LDEwLjcsMTAuNywxMC43DQoJCQlzMTAuNy00LjgsMTAuNy0xMC43VjE5MmMwLTExLjgsOS42LTIxLjMsMjEuMy0yMS4zYzExLjgsMCwyMS4zLDkuNiwyMS4zLDIxLjN2NTMuM2MwLDUuOSw0LjgsMTAuNywxMC43LDEwLjcNCgkJCWM1LjksMCwxMC43LTQuOCwxMC43LTEwLjd2LTMyYzAtMTEuOCw5LjYtMjEuMywyMS4zLTIxLjNzMjEuMyw5LjYsMjEuMywyMS4zdjMyYzAsNS45LDQuOCwxMC43LDEwLjcsMTAuN3MxMC43LTQuOCwxMC43LTEwLjcNCgkJCXYtMTAuN2MwLTExLjgsOS42LTIxLjMsMjEuMy0yMS4zczIxLjMsOS42LDIxLjMsMjEuM0wzNzUuMiwzNTJMMzc1LjIsMzUyeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTYxLjgsMGMtNDcuMSwwLTg1LjMsMzguMy04NS4zLDg1LjNjMCwxNC4yLDMuNywyOC4xLDExLDQxLjNjMiwzLjUsNS42LDUuNSw5LjMsNS41YzEuNywwLDMuNS0wLjQsNS4yLTEuMw0KCQkJYzUuMS0yLjksNy05LjQsNC4xLTE0LjVjLTUuNS05LjktOC4zLTIwLjQtOC4zLTMwLjljMC0zNS4zLDI4LjctNjQsNjQtNjRzNjQsMjguNyw2NCw2NGMwLDUuMS0wLjgsMTAuNC0yLjUsMTYuNw0KCQkJYy0xLjYsNS43LDEuOCwxMS41LDcuNSwxMy4xYzUuNiwxLjYsMTEuNS0xLjgsMTMuMS03LjVjMi4yLTguMiwzLjMtMTUuMywzLjMtMjIuNEMyNDcuMiwzOC4zLDIwOC45LDAsMTYxLjgsMHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==);
}

.dipi_panorama .dipi-panorama-overlay.light {
    color: #fff;
}
.dipi_panorama .dipi-panorama-overlay.dark {
    color: #000;
}
.dipi-panorma-wrapper .dipi-panorama-overlay-content {
    opacity: 0;
}
.dipi-panorma-wrapper.loaded .dipi-panorama-overlay-content {
    opacity: 1;
}

.dipi-panorma-wrapper .fluid-width-video-wrapper {
    padding-top: 0 !important;
    height: 100%;
}

.dipi_panorama .vjs-control-bar {
    z-index: 1;
}

.dipi_panorama .et-vb-module-options.et-vb-ui {
    max-height: 26px;
}

.dipi-panorma-image2d {
    overflow: hidden;
    position: relative;
}

.dipi-parallax-images {
    position: relative;
}

.dipi-parallax-images .dipi_parallax_images_item {
    position: absolute !important;
    top: 0;
    left: 0;
}

.dipi_parallax_images .dipi-parallax-images {
    height: 100%;
}

/* .dipi-parallax-images .dipi_parallax_images_item:first-child,
.dipi-parallax-images .dipi_parallax_images_item img {
    position: relative !important;
} */

/* .dipi-parallax-images .dipi_parallax_images_item.et_pb_module:first-child {
    left:auto;
    translate: auto;
} */

.dipi-parallax-images .dipi_parallax_images_item .dipi-pi-item-image {
    height: 100%;
}

.dipi-pi-item-image {
    border-style: solid;
    position: relative;
}

.dipi-pi-item-image img {
    display: block;
}

.dipi-pi-content-text {
    pointer-events: auto;
}

.dipi-pi-item-image a {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dipi_parallax_images_item .dipi-pi-content-text > * {
	display: block;
}

.dipi_parallax_images_item .dipi-pi-content-text .dipi-pi-button {
	position: relative;
	display: inline-block;
	width: auto;
}


/*
 * Base design tokens shared by every Poll instance on the page. These are
 * fixed brand defaults (not per-instance user data), so sharing them on the
 * `.dipi-poll` type class - rather than scoping to each instance's own order
 * class - is correct: every value here is still fully overridable per
 * instance via the Design panel's own Background/Border/Font/etc. fields,
 * which render *after* this stylesheet in the cascade.
 */
.dipi-poll {
	--dipi-poll-accent: #4f46e5;
	--dipi-poll-accent-hover: #4338ca;
	--dipi-poll-accent-soft: #eef2ff;
	--dipi-poll-accent-border: #c7d2fe;
	--dipi-poll-text: #0f172a;
	--dipi-poll-muted: #64748b;
}

.dipi-poll__question {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--dipi-poll-text);
}

.dipi-poll__description {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dipi-poll-muted);
}

/* Schedule line plus its status - the countdown while voting runs, the notice when it
   does not (never both) - on one row between the description and the options. Wraps to a
   second line only when the two cannot fit side by side. */
.dipi-poll__schedule-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 16px;
}

.dipi-poll__schedule {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dipi-poll-muted);
}

/* Same chip treatment as the notice (they occupy the same spot, one at a time), in the
   module's accent instead of the notice's warning colour. */
.dipi-poll__countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	max-width: 100%;
	padding: 6px 14px;
	border: 1px solid var(--dipi-poll-accent-border, #c7d2fe);
	border-radius: 999px;
	background: var(--dipi-poll-accent-soft, #eef2ff);
	font-size: 13px;
	line-height: 1.4;
	color: #3730a3;
}

.dipi-poll__countdown[hidden] {
	display: none;
}

.dipi-poll__countdown-label {
	font-weight: 600;
}

.dipi-poll__countdown-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* A status chip, deliberately unlike an option: shrink-to-fit and in its own colour.
   Full-width on the option's own background it read as one more - empty - option row
   instead of as a notice. */
.dipi-poll__notice {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid #fcd34d;
	border-radius: 999px;
	background: #fffbeb;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #92400e;
}

/* Nothing to submit before it opens or after it closes. */
.dipi-poll[data-schedule-state="before"] .dipi-poll__submit,
.dipi-poll[data-schedule-state="closed"] .dipi-poll__submit {
	display: none;
}

/* `!important` because Divi's theme rules for content lists
   (`#left-area ul`, `.entry-content ul`, ... { padding: 0 0 23px 1em })
   outrank a single class and would add a gap under the list and an indent. */
.dipi-poll__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* The submit button is Divi's button element (`.et_pb_button`): its look - colors,
   border, radius, font, spacing, box shadow, icon, incl. hover - comes from Design >
   Button (defaults in module.json; "Use Custom Styles For Button" is on by default so
   Divi prints them instead of the Theme Customizer's site-wide button look), and the
   hover lift from Design > Button > Transform. Only behavior lives here. */
.dipi-poll__submit:focus-visible {
	outline: 2px solid var(--dipi-poll-accent);
	outline-offset: 3px;
}

/* Disabled until an option is chosen. Opacity rather than a fixed color, so the
   button keeps the colors set in its design settings. `!important` on transform
   because the hover Transform setting prints with a stronger selector - a disabled
   button shouldn't react to hover. */
.dipi-poll__submit:disabled {
	opacity: 0.5;
	transform: none !important;
	cursor: not-allowed;
}

/* Once a vote is recorded, the poll never goes back to its pre-vote state
   (a vote can't be changed) - the form stays in the DOM (inputs/button
   disabled server- and client-side) rather than being removed, so results
   stay reachable by the same markup either way. */
.dipi-poll--voted .dipi-poll__submit {
	display: none;
}

/* Total votes sits next to the submit button, on its text baseline (baseline rather
   than center, so the button's own vertical margin doesn't shift it), and wraps
   under it when the row runs out of room. */
.dipi-poll__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 20px;
}

/* With the button hidden (voted, or outside the voting window) the total takes its
   place, keeping the button's default top margin from the options. */
.dipi-poll--voted .dipi-poll__meta,
.dipi-poll[data-schedule-state="before"] .dipi-poll__meta,
.dipi-poll[data-schedule-state="closed"] .dipi-poll__meta {
	margin-top: 24px;
}

.dipi-poll__total-votes {
	font-size: 13px;
	font-weight: 500;
	color: var(--dipi-poll-muted);
	font-variant-numeric: tabular-nums;
}

/* Announces vote/error outcomes (Poll.js) to assistive tech without displaying
   visible text - visually-hidden ("clip") technique, not `display: none`, since
   that would also remove it from the accessibility tree. */
.dipi-poll__status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dipi-poll__submit {
		transition: none !important;
	}
}

/*
 * Background, border, radius, padding, the hover look and the selected look
 * (`.is-selected`, toggled by Poll.js on selection and rendered server-side for the
 * voted option) are not set here - they're real defaults on the Poll module's
 * Design > Option group (Default / Selected tabs),
 * printed with a `:where()` selector weaker than any option's own rule, so each
 * option's own Background/Border/Spacing still overrides them (a rule here
 * would outrank the Poll-wide values). The state colors fall back to the same
 * values Poll.css defines on `.dipi-poll` in case a PollOption is ever
 * rendered outside one - e.g. the Builder's isolated block preview.
 */
.dipi-poll-option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	/* `!important` because each option is an `.et_pb_module`, and Divi's column rules
	   (`.et_pb_column .et_pb_module { margin-bottom: 30px }`, `.et_pb_gutters3 ...
	   .et_pb_module { margin-bottom: 2.75% }`, up to five classes deep) would stack on
	   top of the list's own `gap` (Poll > Design > Option > Option Spacing). */
	margin-bottom: 0 !important;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.dipi-poll-option__label {
	display: flex;
	/* Center the input and image against the full row height, which grows
	   once an option has an image and/or description. */
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.dipi-poll-option__input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	/* Reset theme/browser radio margins so they don't push it off-center. */
	margin: 0;
	/* Native control, brand-colored via `accent-color` rather than a fully
	   custom-drawn radio/checkbox - keeps real OS/browser check semantics
	   (and free high-contrast-mode support) while still matching the
	   module's own accent instead of the browser's default blue. */
	accent-color: var(--dipi-poll-accent, #4f46e5);
	cursor: pointer;
}

.dipi-poll-option__input:focus-visible {
	outline: 2px solid var(--dipi-poll-accent, #4f46e5);
	outline-offset: 2px;
}

.dipi-poll-option__input:disabled {
	cursor: not-allowed;
}

.dipi-poll-option__input:disabled ~ .dipi-poll-option__content {
	opacity: 0.85;
}

.dipi-poll-option__label:has(.dipi-poll-option__input:disabled) {
	cursor: default;
}

.dipi-poll-option__image {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	-o-object-fit: cover;
	   object-fit: cover;
}

.dipi-poll-option__content {
	flex: 1 1 auto;
	min-width: 0;
}

.dipi-poll-option__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #0f172a;
}

.dipi-poll-option__description {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.5;
	/* 4.5:1 or more on white, the Selected tint and the Filled Row track and fill. */
	color: #475569;
}

.dipi-poll-option__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin-top: 2px;
	padding-left: 30px;
}

.dipi-poll-option__result-bar-track {
	flex: 1 1 100%;
	position: relative;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background-color: #eef1f6;
	overflow: hidden;
}

.dipi-poll-option__result-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	border-radius: inherit;
	/* From a lighter tint of the Accent Color to the color itself (solid where
	   color-mix() is unsupported). */
	background: var(--dipi-poll-accent, #4f46e5);
	background: linear-gradient(90deg, color-mix(in srgb, var(--dipi-poll-accent, #4f46e5) 82%, #fff), var(--dipi-poll-accent, #4f46e5));
}

@media (prefers-reduced-motion: no-preference) {
	.dipi-poll-option__result-bar-fill {
		/* 0.8s matches REVEAL_DURATION in Poll.js (results filling up on scroll-in). */
		transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
}

.dipi-poll-option__result-percentage {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
}

/* `line-height: 1`: otherwise it inherits the theme's body line-height (e.g. 26px), and
   that taller box on a 12px baseline grows the title line - in the bar style the count
   sits right after the title, so showing results made every row ~1.5px taller. */
.dipi-poll-option__result-count {
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	/* Same contrast reasoning as the description. */
	color: #475569;
	font-variant-numeric: tabular-nums;
}

/* "Show Percentage" off. Visually-hidden rather than removed: the fill band is
   `aria-hidden`, so this span is the only result a screen reader can read. */
.dipi-poll-option__result-percentage--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The option this visitor actually voted for gets its percentage called out
   in the accent color once results are showing, so the visitor's own choice
   stays visually findable in the list rather than looking identical to
   every other result row. */
.dipi-poll-option.is-selected .dipi-poll-option__result-percentage {
	color: var(--dipi-poll-selected-color, var(--dipi-poll-accent, #4f46e5));
}

@media (max-width: 480px) {
	.dipi-poll-option__result {
		padding-left: 0;
	}
}

/*
 * Result style "bar" (Design > Results > Result Style). The whole row becomes the
 * progress bar: a tinted band fills it from the left, the title/vote count sit on
 * top of it and the percentage closes the row. Selected by the parent's
 * `data-result-style` attribute, which Poll renders on `.dipi-poll` - everything
 * below stays inert for the default "card" style.
 */
/* The row background is this style's track. Its color comes from
   `--dipi-poll-row-track`, which Track Color sets (on the Poll, inherited by every
   option, or on one option); only the fallback lives here, so a value set on the
   Poll isn't masked by a default declared on each option. */
/* The row's padding is the option's own (Design > Option > Spacing, or an option's
   Spacing), as in the card style; the fill band below covers it edge to edge. */
.dipi-poll[data-result-style="bar"] .dipi-poll-option {
	/* Clips the fill to the row's own rounded corners. */
	overflow: hidden;
	background: var(--dipi-poll-row-track, #f1f5f9);
}

/* The radio is hidden in this style, so the chosen / voted option also gets a check
   mark - a cue that doesn't rely on the border color alone. Hidden from screen
   readers (the input stays checked for them). */
.dipi-poll[data-result-style="bar"] .dipi-poll-option.is-selected .dipi-poll-option__title::before {
	content: "\2713";
	content: "\2713" / "";
	margin-right: 6px;
	font-weight: 700;
	color: var(--dipi-poll-selected-color, var(--dipi-poll-accent, #4f46e5));
}

.dipi-poll[data-result-style="bar"] .dipi-poll-option__label {
	align-items: center;
	gap: 10px;
}

/* The whole row stays clickable, padding included. */
.dipi-poll[data-result-style="bar"] .dipi-poll-option__label::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The radio/checkbox is what the row still submits, so it is hidden the
   visually-hidden way rather than with `display: none`. */
.dipi-poll[data-result-style="bar"] .dipi-poll-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* With no visible control to outline, the row itself carries the focus ring. */
.dipi-poll[data-result-style="bar"] .dipi-poll-option:focus-within {
	outline: 2px solid var(--dipi-poll-accent, #4f46e5);
	outline-offset: 2px;
}

.dipi-poll[data-result-style="bar"] .dipi-poll-option__bar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

/* `:where()` keeps this at the base rule's weight (it still wins by coming later), so a
   Bar Color/Radius set on the Poll or on an option overrides it in this style too. */
:where(.dipi-poll[data-result-style="bar"] .dipi-poll-option__bar) .dipi-poll-option__result-bar-fill {
	/* Flat tint rather than the card style's gradient: this one sits behind text. */
	background: var(--dipi-poll-row-fill, #dbe4ff);
	border-radius: 0;
}

/* The fill is the whole row here - Bar Height (card style only) must not shrink it. */
.dipi-poll[data-result-style="bar"] .dipi-poll-option .dipi-poll-option__bar .dipi-poll-option__result-bar-fill {
	height: 100%;
}

.dipi-poll[data-result-style="bar"] .dipi-poll-option__image,
.dipi-poll[data-result-style="bar"] .dipi-poll-option__content,
.dipi-poll[data-result-style="bar"] .dipi-poll-option__result-percentage {
	position: relative;
	z-index: 1;
}

/* Title and vote count share one line, the way a filled row reads. */
.dipi-poll[data-result-style="bar"] .dipi-poll-option__title {
	display: inline;
}

.dipi-poll[data-result-style="bar"] .dipi-poll-option__result-count {
	margin-left: 8px;
}

/* `:where()` keeps this at the base rule's weight, so a Percentage Text font set on
   the Poll (Design > Results) or on an option still applies in the bar style. */
:where(.dipi-poll[data-result-style="bar"]) .dipi-poll-option__result-percentage {
	margin-left: auto;
	padding-left: 12px;
	font-size: 15px;
}


.dipi_price_list_item .dipi_price_list_item_wrapper {
	display: flex;
}

.dipi_price_list_item .dipi_price_list_text_wrapper {
	padding: 2%;
	width: 100%;
	flex: 1;
	overflow-wrap: break-word;
}

.dipi_price_list_item .dipi_price_list_header {
	display: flex;
}

.dipi_price_list_item .dipi_price_list_separator {
	flex: 1;
	flex-basis: 10%;
}

.dipi_price_list_item .dipi_price_list_image_wrapper img {
	display: block;
	width: 100%;
	border-style: solid;
}

.dipi_price_list_separator {
	border-bottom-style: dotted;
}

.dipi_pricing_table {
	border-style: solid;
}
.dipi_pricing_table.et_pb_module .et_pb_module.dipi_pricing_table_item {
	margin-bottom: 10px;
}
.dipi-pt-ribbon {
	position: absolute;
	top: 0;
	left: 0;
}
.dipi-pt-feature {
	justify-content: center;
	align-items: center;
}
.dipi-pt-btn-wrap {
	text-align: center;
}
.dipi-pt-feature-icon {
	margin-right: 5px;
}
.et_pb_module.dipi_pricing_table {
	position: relative;
	overflow: visible;
}
.dipi-pt-feature,
.dipi-pt-image,
.dipi-pt-icon {
	display: flex;
}

.dipi-pt-image .et_pb_image_wrap {
	display: block;
}
.dipi-pt-image .et_pb_image_wrap img {
	width: 100%;
	display: block;
	border-style: solid;
}

/* Default Style */
.dipi-pt-price-container {
	text-align: center;
}
.dipi-pt-price {
	font-size: 80px;
	line-height: 1.03em;
	font-weight: 300;
	vertical-align: middle;
}
.dipi-pt-price-prefix,
.dipi-pt-price-suffix {
	font-size: 16px;
	color: #999;
}
.dipi-pt-price-prefix {
	vertical-align: top;
}
.dipi-pt-price-suffix {
	vertical-align: bottom;
}
/* .dipi-pt-feature,
.dipi-pt-feature .dipi-pt-feature-icon {
	font-size: 16px;
} */

.dipi_pricing_table p:empty {
	display: none;
}
.dipi_pricing_table p:not(.has-background):last-of-type {
	padding-bottom: 0;
}
.dipi-pt-btn-wrap a {
	display: inline-block;
}

.dipi-pt-feature-icon {
	border-style: solid;
}

.dipi_pricing_table_item.dipi-pt-item--Ribbon {
	position: absolute !important;
}

.dipi-pt-item--ribbon-top_left {
	top: 0;
	left: 0;
}
.dipi-pt-item--ribbon-top_right {
	top: 0;
	right: 0;
}
.dipi-pt-item--ribbon-bottom_left {
	bottom: 0;
	left: 0;
}
.dipi-pt-item--ribbon-bottom_right {
	bottom: 0;
	right: 0;
}
.et_pb_image_wrap {
	overflow: hidden;
}

.dipi-pt-ribbon-image {
	z-index: 1;
}

.dipi-reading-progress-wrap .dipi-reading-progress {
    position: fixed;
    width: 100%;
    left: 0;
    height: 5px;
    z-index: 100000;
}

.et-tb-has-header .dipi-reading-progress-wrap .dipi-reading-progress-main {
    position: relative;
}

.dipi-reading-progress-wrap .dipi-reading-progress-top {
    top: 0;
}

.admin-bar .dipi-reading-progress-wrap .dipi-reading-progress-top {
    top: 30px;
}

@media (max-width: 782px) {
    .admin-bar .dipi-reading-progress-wrap .dipi-reading-progress-top {
        top: 46px;
    }
}

.dipi-reading-progress-wrap .dipi-reading-progress-bottom {
    bottom: 0;
}

.dipi-reading-progress-wrap-builder .dipi-reading-progress {
    position: unset;
    margin-top: 20px;
    background-color: aliceblue;
}

.dipi-reading-progress-wrap .dipi-reading-progress .dipi-reading-progress-fill {
    height: 5px;
    width: 0%;
    transition: width 50ms ease;
}

.dipi-builder-reading-progress-fill {
    width: 27.5% !important;
}

.dipi-builder-reading-progress-bar-preview {
    background-color: bisque;
    border-radius: 3px;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
    position: relative;
}

.dipi-builder-reading-progress-bar-preview:before {
    content: '';
    position: absolute;
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    border-top: 12px solid bisque;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

@-webkit-keyframes bars {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes bars {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

.dipi-progress-striped {
    animation: bars 5s linear infinite;
    background-size: 40px 40px;
    background-image: linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%, #fff 50%, transparent 50%, transparent);
}
.dipi_reveal .dipi-reveal-button {
   cursor: pointer;
   display: inline-block;
}
.dipi_reveal .dipi-reveal {
   text-align: center;
   transition: all 0.8s;
}
.dipi-reveal-container-parent,
.dipi-reveal-container {
   overflow: hidden !important;
   position: relative;
   transition: height 0.8s, padding 0.8s;
}
.dipi_reveal .dipi-reveal-button:before,
.dipi_reveal .dipi-reveal-button:after
{
   content: attr(data-icon);
}
.dipi-reveal-container-parent .dipi-reveal-container.dipi-reveal-oa-html ~ .dipi-reveal-overlay,
.dipi-reveal-container.dipi-reveal-oa-html .dipi-reveal-overlay,
.dipi-reveal-container.dipi-reveal-oa-css:after {
   position: absolute;
   left: 0;
   top: 0;
   right:0;
   bottom: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: all 0.8s;
   visibility: visible;
   pointer-events: none;
}
.dipi-reveal-container-parent .dipi-reveal-container-collapsed.dipi-reveal-oa-html ~ .dipi-reveal-overlay,
.dipi-reveal-container-collapsed.dipi-reveal-oa-html .dipi-reveal-overlay,
.dipi-reveal-container-collapsed:not(.et_pb_hovered_child):after {
  z-index:0; /* 2 is same value as default z-index of column */
}
.dipi-reveal-container-parent .dipi-reveal-container-collapsed.dipi-reveal-oa-html ~ .dipi-reveal-overlay,
.dipi-reveal-container-collapsed.dipi-reveal-oa-html .dipi-reveal-overlay,
.dipi-reveal-container-collapsed.dipi-reveal-oa-css:after {
   opacity: 1;
}

/* Show Reveal module on top alway in visual builder */
.et-db #et-boc .et-l #et-fb-app  .et_pb_hovered.dipi_reveal.et_fb_element_controls_visible {
   z-index: 9999999999;
}

.dipi_scroll_image {
    transition: all 500ms;
    overflow: hidden!important;
}

.dipi-scroll-image {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.dipi-scroll-image .dipi-image-scroll-container {
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.dipi-scroll-image .dipi-image-scroll-content:hover {
    display: none;
}

.dipi-image-scroll-container .dipi-image-scroll-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    transition: all 600ms;
}

.dipi-image-scroll-container .dipi-image-scroll-overlay:hover {
   -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.dipi-image-scroll-container .dipi-image-scroll-overlay,
.dipi-image-scroll-container .dipi-image-scroll-content {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    z-index: 4;
}
.dipi-image-scroll-container:hover .dipi-image-scroll-overlay:not(.reveal),
.dipi-image-scroll-container:hover .dipi-image-scroll-overlay.reveal_fade,
.dipi-image-scroll-container:hover .dipi-image-scroll-content {
    opacity: 0 !important;
    z-index: -1;
}
.dipi-image-scroll-container:hover .dipi-image-scroll-overlay.reveal_top {
    transform: translateY(-100%);
}
.dipi-image-scroll-container:hover .dipi-image-scroll-overlay.reveal_bottom {
    transform: translateY(100%);
}
.dipi-image-scroll-container:hover .dipi-image-scroll-overlay.reveal_left {
    transform: translateX(-100%);
}
.dipi-image-scroll-container:hover .dipi-image-scroll-overlay.reveal_right {
    transform: translateX(100%);
}
.dipi-image-scroll-container .dipi-image-scroll-overlay.reveal_top,
.dipi-image-scroll-container .dipi-image-scroll-overlay.reveal_bottom,
.dipi-image-scroll-container .dipi-image-scroll-overlay.reveal_left,
.dipi-image-scroll-container .dipi-image-scroll-overlay.reveal_right {
    transition: 0.6s ease;
}

.dipi-image-scroll-container:hover .dipi-image-scroll-content .dipi-image-scroll-icon {
    display: none;
}

.dipi-image-scroll-container .dipi-image-scroll-image img {
    transition: all 10s;
}

.dipi_scroll_image .dipi-container-scroll-anim-reset .dipi-image-scroll-image img {
    transition: all 0s !important;
}

.dipi-image-scroll-icon {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.dipi-image-scroll-container .dipi-image-scroll-vertical.dipi-image-scroll-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.dipi-image-scroll-container .dipi-image-scroll-horizontal {
    position: relative;
    width: 100%;
    height: 100%;
}

.dipi-image-scroll-container .dipi-image-scroll-horizontal.dipi-image-scroll-image img {
    max-width: none;
    height: 100%;
}

.dipi-image-scroll-content {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    z-index: 6 !important;
    height: auto;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.dipi-image-scroll-content > img {
    cursor: pointer;
    border-style: solid;
}

.dipi-image-container-scroll {
    overflow: auto;
}
.dipi-image-scroll-horizontal .dipi-image-container-scroll {
    overflow-y: hidden;
}
.dipi-image-container-scroll img {
    display: block;
}

.dipi-icon-animate.dipi-image-scroll-vertical .dipi-image-scroll-icon,
.dipi-icon-animate.dipi-image-scroll-vertical .dipi-image-scroll-content > img {
    -webkit-animation-name: dp-scroll-vertical;
    animation-name: dp-scroll-vertical;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes dp-scroll-vertical {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
        transform: translateY(5px);
    }
}

@keyframes dp-scroll-vertical {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
        transform: translateY(5px);
    }
}

.dipi-icon-animate.dipi-image-scroll-horizontal .dipi-image-scroll-icon,
.dipi-icon-animate.dipi-image-scroll-horizontal .dipi-image-scroll-content > img {
    -webkit-animation-name: dp-scroll-horizontal;
    animation-name: dp-scroll-horizontal;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes dp-scroll-horizontal {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }
}

@keyframes dp-scroll-horizontal {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }
}

.dipi-star-rating span {
    display: inline-block;
    position: relative;
    font-style: normal;
    cursor: default;
    line-height: 0.8; /* Need to avoid showing gap in large start rating */
}

.dipi-star-rating span.dipi-star-full:before {
    content: "\2605";
    display: block;
    font-size: inherit;
    font-family: inherit;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.dipi-star-rating span.dipi-star-1:before{ width: 10%; }
.dipi-star-rating span.dipi-star-2:before{ width: 20%; }
.dipi-star-rating span.dipi-star-3:before{ width: 30%; }
.dipi-star-rating span.dipi-star-4:before{ width: 40%; }
.dipi-star-rating span.dipi-star-5:before{ width: 50%; }
.dipi-star-rating span.dipi-star-6:before{ width: 60%; }
.dipi-star-rating span.dipi-star-7:before{ width: 70%; }
.dipi-star-rating span.dipi-star-8:before{ width: 80%; }
.dipi-star-rating span.dipi-star-9:before{ width: 90%; }

.dipi_star_rating .dipi-description{
    margin-top: 10px;
    margin-bottom: 10px;
}

.display-type-inline .dipi-title {
    margin-right: 8px;
}

.display-type-block .dipi-star-rating, .display-type-block .dipi-title {
    display: block;
}

.display-type-inline .dipi-star-rating, .display-type-inline .dipi-title {
    display: inline-block;
}

.dipi-svg-animator-inner-wrapper {
    display: flex;
}

.dipi_svg_animator .dipi-svg-animator-container svg {
    display: block;
}
.dipi-toc__title {
    font-size: 20px;
    font-weight: 600;

    color: #fff;
    background-color: #3484cb;
    padding: 20px;
}

.dipi-toc__title h1,
.dipi-toc__title h2,
.dipi-toc__title h3,
.dipi-toc__title h4,
.dipi-toc__title h5,
.dipi-toc__title h6 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.dipi-toc__collapse {
    overflow: hidden;
    transition: height 200ms;
}

.dipi-toc__list {
    padding: 20px;
    margin: 0;
}
.dipi-toc__list li a {
    color: #000;
    display: flex;
    align-items: flex-start;
}
.entry-content .dipi-toc__list ul,
#main-content .dipi-toc__list ul,
#et_pb_root .dipi-toc__list ul,
.et_pb_root .dipi-toc__list ul {
    padding-bottom: 0px;
    margin: 0;
    list-style: none;
    list-style-type: none !important;
}

/* .dipi-toc_header-icon{display: block;float: left;}
 */
.dipi-toc__title h1,
.dipi-toc__title h2,
.dipi-toc__title h3,
.dipi-toc__title h4,
.dipi-toc__title h5,
.dipi-toc__title h6 {
    display: flex;
    align-items: center;
    color: #fff;
}
.dipi-toc_header-icon.dip-content_header-icon-right {
    order: 2;
}
.dipi-toc__title .dipi-toc_header-content {
    width: 100%;
}

.dipi-toc.open .dipi-toc-header-icon-closed {
    display: none;
}
.dipi-toc.open .dipi-toc-header-icon-open {
    display: block;
}
.dipi-toc:not(.open) .dipi-toc-header-icon-closed {
    display: block;
}
.dipi-toc:not(.open) .dipi-toc-header-icon-open {
    display: none;
}

.dipi-toc_header-icon {
    border-style: solid;
}
.dipi-toc__title {
    cursor: pointer;
}
.dipi-toc_header-icon,
.dipi-toc_header-content {
    vertical-align: middle;
}
.dipi-toc__sublist {
    border-style: solid;
}

.dipi-testimonial-main .swiper-container {
    height: auto;
    display: flex;
    align-items: start;
    overflow: hidden !important;
}

.dipi-testimonial-review-popup-open .dipi-testimonial-item,
.dipi-testimonial-main .dipi-testimonial-item {
    border-style: solid;
}

.dipi-testimonial-main .dipi-testimonial-img {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    border-style: solid;
    overflow: hidden;
}

.dipi-testimonial-main .dipi-testimonial-img>img,
.dipi-review-popup-text .dipi-testimonial-img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dipi-testimonial-rating {
    margin-bottom: 20px;
}

.dipi-testimonial-text {
    margin-bottom: 10px;
}

.dipi-testimonial-name {
    margin-bottom: 10px;
}

.dipi-company-name {
    margin-bottom: 10px;
}

.dipi-profile-info>div {
    margin-bottom: 0 !important;
    line-height: 1.2;
}

.dipi-testimonial-main .swiper-3d .dipi-testimonial-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.dipi-testimonial-main .swiper-container .dipi-testimonial-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    flex-wrap: nowrap;
    overflow: visible
}

.dipi-testimonial-main .swiper-container .dipi-testimonial-item {
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0 !important;
    flex-direction: column;
    float: none !important;
    clear: none !important;
    flex-shrink: 0;
    width: 100%;
    height: auto;
    position: relative;
    transition-property: -webkit-transform;
    transition-property: transform;
    overflow: hidden;
}

.dipi-testimonial-main .swiper-pagination {
    text-align: center;
    width: 100%;
}

.dipi-testimonial-main .swiper-pagination .swiper-pagination-bullets {
    bottom: 10px;
    left: 0;
    width: 100%;
}

.dipi-testimonial-main .swiper-pagination .swiper-pagination-bullet {
    margin: 0 4px;
    width: 8px;
    height: 8px;
}

.dipi-testimonial-main .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.dipi-testimonial-main .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0
}

.dipi-testimonial-rating {
    font-size: 20px;
}

.dipi-testimonial-rating span {
    display: inline-block;
    position: relative;
    font-style: normal;
    cursor: default;
}

.dipi-testimonial-main .swiper-button-next,
.dipi-testimonial-main .swiper-button-prev {
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 50px;
    margin-top: 0;
    transform: translateY(-50%);
    transition: all .3s ease-in-out;
}

.dipi-testimonial-main .swiper-button-next:after,
.dipi-testimonial-main .swiper-button-prev:after {
    content: attr(data-icon);
    display: block;
    font-family: ETmodules;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
}

.dipi-testimonial-main .swiper-button-prev {
    left: -66px;
}

.dipi-testimonial-main .swiper-button-next {
    right: -66px;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    cursor: pointer;
    pointer-events: all;
}

.dipi-review-popup-text {
    width: 620px;
    margin: 60px auto;
    padding: 30px;
    background: #fff;
    position: relative;
}

@media only screen and (max-width: 768px) {
    .dipi-review-popup-text {
        width: 90% !important;
    }
}

@media only screen and (max-width: 420px) {
    .dipi-review-popup-text {
        margin-top: 20%;
    }
}

.dipi-review-popup-text .mfp-close {
    top: -15px;
    right: -15px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    opacity: 1;
    background: #000;
    color: #fff;
}

.mfp-wrap .mfp-container .dipi-review-popup-text .mfp-close:hover {
    background: #000 !important;
    color: #fff !important;
}

.mfp-wrap .mfp-container .dipi-review-popup-text .mfp-close:active {
    top: -15px !important;
}

.dipi-testimonial-review-popup-open .dipi-review-popup-bottom {
    margin-top: 30px;
}

.dipi-testimonial-review-popup-open .dipi-review-popup-bottom .dipi-testimonial-img {
    margin-right: 10px;
}

.dipi-testimonial-review-popup-open .dipi-review-popup-bottom {
    display: flex;
    align-items: center;
}

.dipi-mfp-with-zoom .dipi-review-popup-text {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(0.8);
}

.dipi-mfp-with-zoom.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.dipi-mfp-with-zoom.mfp-ready .dipi-review-popup-text {
    opacity: 1;
    transform: scale(1);
}

.dipi-mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.dipi-mfp-with-zoom.mfp-removing .dipi-review-popup-text {
    transform: scale(0.8);
    opacity: 0;
}

.dipi-mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}


.dipi_testimonial.et_pb_module .swiper-arrow-button.show_on_hover {
    opacity: 0;
}

.dipi_testimonial .swiper-button-prev.swiper-arrow-button.show_on_hover {
    left: 0 !important;
}

.dipi_testimonial .swiper-button-next.swiper-arrow-button.show_on_hover {
    right: 0 !important;
}

.dipi_testimonial.et_pb_module:hover .swiper-arrow-button.show_on_hover,
.dipi_testimonial.et_pb_module .swiper-arrow-button.show_on_hover:hover {
    opacity: 1;
}

.dipi_testimonial .swiper-button-prev.swiper-arrow-button.show_on_hover:before,
.dipi_testimonial .swiper-button-next.swiper-arrow-button.show_on_hover:before {
    width: 100%;
    height: 100%;
    opacity: 1;
    content: " ";
    position: absolute;
}

.dipi_testimonial .swiper-button-prev.swiper-arrow-button.show_on_hover:before {
    left: 50%;
}

.dipi_testimonial .swiper-button-next.swiper-arrow-button.show_on_hover:before {
    right: 50%;
}

.dipi-testimonial-review-popup-open .dipi-testimonial-img {
    overflow: hidden;
}

@media only screen and (min-width: 981px) {
    .dipi_testimonial .hide_on_desktop {
        display: none!important;
    }
    .dipi_testimonial .show_on_desktop_flex {
        display: flex!important;
    }
    .dipi_testimonial .show_on_desktop_block {
        display: block!important;
    }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
    .dipi_testimonial .hide_on_tablet {
        display: none!important;
    }
    .dipi_testimonial .show_on_tablet_flex {
        display: flex!important;
    }
    .dipi_testimonial .show_on_tablet_block {
        display: block!important;
    }
}

@media only screen and (max-width: 767px) {
    .dipi_testimonial .hide_on_phone {
        display: none!important;
    }
    .dipi_testimonial .show_on_phone_flex {
        display: flex!important;
    }
    .dipi_testimonial .show_on_phone_block {
        display: block!important;
    }
}

.dipi_text_highlighter .dipi-text-highlight-wrapper {
    overflow: visible;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
    z-index: 1;
}

.dipi_text_highlighter .dipi-text-affixes {
    vertical-align: middle;
    z-index: 2;
    position: relative;
}

.dipi_text_highlighter .dipi-text-highlight-text {
    z-index: 1;
    position: relative;
}

.dipi_text_highlighter .dipi-text-highlight-wrapper svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: visible;
    stroke-linecap: round;
    /* stroke-linejoin: round; */
}

.dipi_text_highlighter .dipi-text-highlight-wrapper path {
    fill: none;
}
.dipi-text-reveal {
    --tr-blur-amount: 12px;
    --tr-initial-opacity: 0.2;
    --tr-final-opacity: 1;
    --tr-unrevealed-color: #999999;
    --tr-revealed-color: currentColor;
    --tr-highlight-bg: #ffeb3b;
    --tr-highlight-padding: 2px;
    --tr-highlight-radius: 2px;
    --tr-slide-distance: 0.4em;
    --tr-slide-scale: 0.25;
    position: relative;
    width: 100%;
}

/*
 * Line height lives on the reveal units, not here.
 *
 * A line box can never be shorter than the strut of its block container, so a
 * `line-height` coming from a child module (an inline span inside this wrapper)
 * could never shrink the rendered line. Zeroing the strut hands control to the
 * inline-block units, which the parent Text group and each child's Text group
 * both target for `line-height` (see `propertySelectors` in module.json), so a
 * per-child value now takes effect in both directions.
 *
 * The strut is an implementation detail here, never a user-facing value, so it is
 * forced: a stray theme rule on the wrapper tag would otherwise reinstate the floor.
 */
.dipi-text-reveal__text {
    margin: 0;
    line-height: 0 !important;
}

/*
 * Builder-scoped copy of the strut reset. Inside the builder the theme's heading
 * rules are re-emitted with an `#et-boc .et-l` prefix, whose id outranks a plain
 * class selector even when both are `!important`.
 */
#et-boc .et-l .dipi-text-reveal__text {
    line-height: 0 !important;
}

.dipi-text-reveal__text > .et_pb_module {
    display: inline;
}

.dipi-text-reveal__text > .et_pb_module:has(.dipi-text-reveal__unit--line) {
    display: block;
    width: 100%;
}

/*
 * A child that owns its lines — the only child, or one that starts on a new line —
 * is a paragraph, not a mid-sentence fragment, so it gets a real block box. On the
 * inline children the box model only ever acts on the start and end edges (a left
 * margin indents just the first line), which makes the Design > Spacing settings
 * useless there; as blocks all four margin and padding sides behave as expected.
 */
.dipi-text-reveal__text > .et_pb_module:only-child,
.dipi-text-reveal__text > .et_pb_module:has(.dipi-text-reveal__child-segment--new-line) {
    display: block;
}

.dipi-text-reveal__child-segment {
    display: inline;
}

.dipi-text-reveal__child-segment:has(.dipi-text-reveal__unit--line) {
    display: block;
    width: 100%;
}

.dipi-text-reveal__child-segment--new-line {
    display: block;
}

.dipi-text-reveal__child-text {
    position: relative;
}

.dipi-text-reveal__child-segment:has(.dipi-text-reveal__unit--line) .dipi-text-reveal__child-text {
    display: block;
    width: 100%;
}

.dipi-text-reveal__empty {
    opacity: 0.45;
    font-style: italic;
    line-height: 1.4;
}

/*
 * Units stay inline, never inline-block. A line may break between any two atomic
 * inline boxes, so boxed units used to chop words in half and, because a boxed
 * space cannot collapse, strand that space at the head of the next line as a stray
 * indent. As inline text the units break exactly where the same sentence breaks
 * without spans: at its spaces, and between CJK characters. Line height still
 * lives here so a child's font setting reaches the reveal units (see the text
 * wrapper above); an inline box contributes its own line height to the line box.
 */
.dipi-text-reveal__unit {
    display: inline;
    line-height: 1.4;
    --progress: 0;
}

/*
 * Slide/Fade is the one effect drawn with transforms, and transforms do not apply to
 * non-replaced inline boxes — so its units get their boxes back. Whitespace units stay
 * inline: a space inside its own inline-block collapses to nothing, while an inline
 * space keeps separating the words and still collapses at the end of a wrapped line.
 */
.dipi-text-reveal__child-segment[data-effect="slide_fade"] .dipi-text-reveal__unit {
    display: inline-block;
}

.dipi-text-reveal__child-segment[data-effect="slide_fade"] .dipi-text-reveal__unit--space {
    display: inline;
}

/*
 * A line may break between any two inline-block units, which chops a word in half when
 * each unit is a single letter. The renderer wraps the letter runs that plain text
 * keeps together in this box; CJK, kana and Hangul letters are left out of it,
 * because plain text wraps between those characters too.
 */
.dipi-text-reveal__word {
    white-space: nowrap;
}

/*
 * Split units carry their own spacing, so only the unsplit `block` unit needs authored
 * whitespace preserved. Keeping `pre-wrap` off the text wrapper stops markup indentation
 * between child modules from rendering as gaps.
 */
.dipi-text-reveal__child-segment[data-split-by="block"] .dipi-text-reveal__unit {
    white-space: pre-wrap;
}

.dipi-text-reveal__unit--line {
    display: block;
    width: 100%;
}

/*
 * Measurement only needs wrap positions, so it keeps a fixed line height: it
 * must never inherit the zeroed wrapper strut, which would stack every wrapped
 * row at the same `offsetTop` and break line detection.
 */
.dipi-text-reveal__line-measure {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: pre-wrap;
    line-height: 1.4;
}

.dipi-text-reveal__line-measure-word {
    display: inline-block;
}

/**
 * The full sentence, for screen readers only.
 *
 * The visible reveal units are split into one span per word or letter and are
 * marked aria-hidden, so this carries the readable text. It must stay in the
 * accessibility tree, which rules out `display: none` and `visibility: hidden`.
 */
.dipi-text-reveal__sr-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.dipi-text-reveal[data-effect="blur"] .dipi-text-reveal__unit,
.dipi-text-reveal__child-segment[data-effect="blur"] .dipi-text-reveal__unit {
    filter: blur(calc(var(--tr-blur-amount) * (1 - var(--progress))));
}

.dipi-text-reveal[data-effect="fade"] .dipi-text-reveal__unit,
.dipi-text-reveal__child-segment[data-effect="fade"] .dipi-text-reveal__unit {
    opacity: calc(var(--tr-initial-opacity) + (var(--tr-final-opacity) - var(--tr-initial-opacity)) * var(--progress));
}

.dipi-text-reveal[data-effect="color"] .dipi-text-reveal__unit,
.dipi-text-reveal__child-segment[data-effect="color"] .dipi-text-reveal__unit {
    color: color-mix(in srgb, var(--tr-unrevealed-color) calc((1 - var(--progress)) * 100%), var(--tr-revealed-color) calc(var(--progress) * 100%));
}

.dipi-text-reveal[data-effect="highlight"] .dipi-text-reveal__unit,
.dipi-text-reveal__child-segment[data-effect="highlight"] .dipi-text-reveal__unit {
    color: color-mix(in srgb, var(--tr-unrevealed-color) calc((1 - var(--progress)) * 100%), var(--tr-revealed-color) calc(var(--progress) * 100%));
    background-image: linear-gradient(var(--tr-highlight-bg), var(--tr-highlight-bg));
    background-repeat: no-repeat;
    padding: 0 var(--tr-highlight-padding);
    border-radius: var(--tr-highlight-radius);
    /* A unit that wraps (a hyphenated word, a CJK run) paints a highlight per line
       rather than one box sliced across both. */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.dipi-text-reveal[data-effect="highlight"][data-highlight-mode="background_expand"] .dipi-text-reveal__unit,
.dipi-text-reveal__child-segment[data-effect="highlight"][data-highlight-mode="background_expand"] .dipi-text-reveal__unit {
    background-size: calc(var(--progress) * 100%) 100%;
}

.dipi-text-reveal[data-effect="highlight"][data-highlight-mode="opacity"] .dipi-text-reveal__unit,
.dipi-text-reveal__child-segment[data-effect="highlight"][data-highlight-mode="opacity"] .dipi-text-reveal__unit {
    background-size: 100% 100%;
    background-color: color-mix(in srgb, transparent calc((1 - var(--progress)) * 100%), var(--tr-highlight-bg) calc(var(--progress) * 100%));
    background-image: none;
}

/*
 * Slide/Fade.
 *
 * Progress keeps its shared meaning — 1 is the assembled text, 0 is dropped away and
 * gone — so scrolling down assembles the line and scrolling back up drops it, starting
 * with the bottom-most unit whose cascade slot sits at the end of the timeline.
 *
 * Only offered for word and letter splits: a line or an unsplit block is too large a
 * thing to recede without the text looking like it is being resized.
 *
 * A unit recedes rather than falls: it shrinks and fades on the spot, with only a slight
 * drift downwards. Travelling a couple of line heights (as this first did) threw the
 * trailing words clear of their own line and broke the block of text apart, which reads
 * as a layout fault rather than as an effect. Shrinking keeps every unit inside the line
 * it belongs to; because a transform never reflows, each one holds its full-size slot, so
 * the gaps open up between the receding units and the staircase stays legible.
 *
 * All three properties track progress linearly, which is what spaces the units of the
 * staircase into even steps instead of bunching the first few together.
 */
.dipi-text-reveal[data-effect="slide_fade"] .dipi-text-reveal__unit,
.dipi-text-reveal__child-segment[data-effect="slide_fade"] .dipi-text-reveal__unit {
    opacity: var(--progress);
    transform: translateY(calc((1 - var(--progress)) * var(--tr-slide-distance))) scale(calc(1 - (1 - var(--progress)) * var(--tr-slide-scale)));
}

.dipi-text-reveal.dipi-text-reveal--revealed .dipi-text-reveal__unit,
.dipi-text-reveal[data-fallback-revealed="on"].dipi-text-reveal--no-js .dipi-text-reveal__unit {
    --progress: 1;
    filter: none;
}

.dipi-text-reveal.dipi-text-reveal--disabled .dipi-text-reveal__unit {
    --progress: 1;
    filter: none;
    opacity: 1;
    transform: none;
}

.dipi-text-reveal__preview {
    margin-top: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed rgba(50, 107, 255, 0.35);
    border-radius: 6px;
    background: rgba(50, 107, 255, 0.05);
}

.dipi-text-reveal__preview-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}

.dipi-text-reveal__preview-play {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #2b6df8;
    color: #fff;
    cursor: pointer;
    line-height: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.dipi-text-reveal__preview-play:hover {
    background: #1b57d8;
}

.dipi-text-reveal__preview-play:focus-visible {
    outline: 2px solid #1b57d8;
    outline-offset: 2px;
}

.dipi-text-reveal__preview-slider {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 20px;
}

.dipi-text-reveal__preview-track {
    position: absolute;
    inset: 0;
    height: 6px;
    margin: auto 0;
    border-radius: 999px;
    background: #d7e3ff;
    overflow: hidden;
    pointer-events: none;
}

.dipi-text-reveal__preview-track-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2b6df8;
}

.dipi-text-reveal__preview-range {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 20px;
    margin: 0;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.dipi-text-reveal__preview-range::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.dipi-text-reveal__preview-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2b6df8;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.dipi-text-reveal__preview-range::-moz-range-track {
    height: 6px;
    border: 0;
    background: transparent;
}

.dipi-text-reveal__preview-range::-moz-range-progress {
    background: transparent;
}

.dipi-text-reveal__preview-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2b6df8;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.dipi-text-reveal__preview-value {
    flex-shrink: 0;
    min-width: 36px;
    font-size: 11px;
    font-weight: 600;
    color: #2b6df8;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .dipi-text-reveal .dipi-text-reveal__unit {
        --progress: 1 !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.dipi_tile_scroll {
    overflow: hidden;
}

.dipi-tile-scroll-items {}

.dipi_tile_scroll .dipi_tile_scroll_container {
    display: flex;
    overflow: hidden;
    margin: auto;
}

.dipi_tile_scroll .dipi-tile-scroll-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.dipi_tile_scroll .dipi-tile-scroll-content {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dipi_tile_scroll .dipi-content-image-icon-wrap,
.dipi_tile_scroll .dipi-content-heading,
.dipi_tile_scroll .dipi-desc,
.dipi_tile_scroll .dipi-button-wrapper {
    text-align: center;
}

.dipi_tile_scroll .dipi-content-image {
    display: inline-flex;
}

.dipi_tile_scroll .dipi-content-image img {
    height: auto!important;
}

.dipi_tile_scroll .dipi-tile-scroll-content-wrapper {
    border-style: solid;
}

.dipi_tile_scroll .content-ico-circle {
    border-radius: 100% !important;
    border-style: solid;
    background: #eee;
}

.dipi_tile_scroll .dipi_content_button[data-icon]:not([data-icon=""]):after {
    content: attr(data-icon);
}

.dipi_tile_scroll .dipi-tile-scroll-items {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dipi_tile_scroll .anim_direct_row .dipi-tile-scroll-items {
    flex-direction: column;
}

.dipi_tile_scroll .anim_direct_column .dipi-tile-scroll-items .dipi_tile_scroll_item_container {
    flex-direction: column;
}

.dipi_tile_scroll .dipi-tile-scroll-items>.et_pb_module {
    margin: 0 !important;
    min-height: auto!important;
}

.dipi_tile_scroll_item_container {
    display: flex;
}

.dipi_tile_scroll_item .dipi-tile-scroll__line-img {
    border-style: solid;
    background-size: cover;
    background-position: 50% 50%;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}
.dipi-tilt-image--has-parallax .dipi-tilt-image {
	transform-style: preserve-3d;
}

.dipi_tilt_image {
	display: block;
	margin: 0;
	padding: 0;
	margin-right: auto;
	margin-left: auto;
	line-height: 0 !important;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.dipi_tilt_image .dipi-tilt-overlay-icon-circle {
	padding: 10px;
	border-radius: 100%;
}

.et-pb-icon.dipi-tilt-overlay-icon.dipi-tilt-overlay-image-icon-wrap.dipi-tilt-overlay-icon-circle.dipi-tilt-overlay-icon-border {
	border: 3px solid;
}

.dipi-tilt-overlay-desc {
	font-size: 14px;
	line-height: 15px;
	padding-bottom: 30px;
}

.dipi_tilt_image .dipi-tilt-image {
	border-style: solid;
}

.dipi-tilt-image-wrap > img {
	position: relative;
	border-style: solid;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dipi-tilt-image-wrap {
	display: inline-block;
	position: relative;
	width: 100%;
	overflow: visible !important;
	transform-style: preserve-3d !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/** This creates issue where button gets full width **/
/*.dipi-tilt-image-wrap a {
	width: 100%;
}*/

.dipi-tilt-image-overlay {
	box-sizing: border-box;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.3s;
	/* Safari Overlay Fix ohne Z? */
	/* transform: translateZ(0); */
	backface-visibility: hidden;
	border-style: solid;
}

.dipi-tilt-overlay {
	box-sizing: border-box;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.3s;
	transform: translateZ(0);
	backface-visibility: hidden;
	border-style: solid;
	display: flex;
	align-items: center;
}

.dipi-tilt-overlay-wrap {
	width: 100%;
	padding: 20px;
	margin: 20px;
}

.dipi-tilt-overlay-icon {
	margin-bottom: 20px;
}

.dipi-tilt-overlay-image-icon-wrap {
	padding: 0 0 15px 0;
	margin: auto;
	position: relative;
}

.dipi-tilt-overlay-image-icon-wrap img {
	border-style: solid;
}

.dipi-tilt-overlay-btn {
	display: block;
}

.dipi_tilt_image .dipi-tilt-overlay-btn:hover:after {
	font-size: inherit !important;
}

.dipi_tilt_image .dipi-tilt-overlay-btn:hover:before {
	font-size: inherit !important;
}
.dipi_tilt_image .js-tilt-glare {
	transform: translateZ(10px);
	-webkit-transform: translateZ(10px);
}
/* Fix for Divi Advanced Font Settings default */
.dipi_tilt_image h1.dipi-tilt-overlay-title {
	font-size: 30px;
}

.dipi_tilt_image h2.dipi-tilt-overlay-title {
	font-size: 26px;
}

.dipi_tilt_image h3.dipi-tilt-overlay-title {
	font-size: 22px;
}

.dipi_tilt_image h4.dipi-tilt-overlay-title {
	font-size: 18px;
}

.dipi_tilt_image h5.dipi-tilt-overlay-title {
	font-size: 16px;
}

.dipi_tilt_image h6.dipi-tilt-overlay-title {
	font-size: 14px;
}

.dipi-tilt-overlay-wrap .dipi-tilt-overlay-btn .dipi-overlay-button:after {
	line-height: inherit;
	font-size: inherit !important;
	margin-left: -1em;
	left: auto;
	opacity: 0;
	display: inline-block;
}

.dipi_timeline_container {
    position: relative;
}

.dipi-timeline-line__active,
.dipi-timeline-line {
    border-style: solid;
    border-width: 2px;
    position: absolute;
    border-left: none !important;
    z-index: 0;
}

.dipi_timeline .ribbon-icon {
    font-size: 20px;
    transition: color 300ms ease 0ms, background-color 300ms ease 0ms;
}

.dipi_timeline .ribbon-icon img {
    width: 100%;
}

.dipi-timeline-line {
    overflow: inherit !important;
    border-color: #eaebec;
}

.dipi_timeline .dipi_timeline_custom_classes:not(.dipi_timeline_show-card-arrow) .dipi_timeline_item_card:after {
    border-style: hidden;
}

.dipi_timeline_layout_left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item_container,
.dipi_timeline_layout_mixed.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
.dipi_timeline_layout_mixed.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container {
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.dipi_timeline_layout_mixed.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container>.dipi_timeline_ribbon,
.dipi_timeline_layout_mixed.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container>.dipi_timeline_ribbon {
    /*text-align: right;*/
    justify-content: flex-end;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;

}

.dipi_timeline_layout_left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
.dipi_timeline_layout_left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
.dipi_timeline_layout_mixed.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
.dipi_timeline_layout_mixed.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
}

.dipi_timeline_layout_mixed .dipi-timeline-line__active,
.dipi_timeline_layout_mixed .dipi-timeline-line {
    /*border-right-width: 0 !important;*/
    left: 50%;
    right: auto;
    transform: translateX(-50%);

}

.dipi_timeline_layout_left .dipi-timeline-line__active,
.dipi_timeline_layout_left .dipi-timeline-line {
    left: auto;
}

.dipi_timeline_layout_right .dipi_timeline_item_container>.dipi_timeline_ribbon,
.dipi_timeline_layout_left .dipi_timeline_item_container>.dipi_timeline_ribbon {
    display: none;
}

.dipi_timeline_layout_mixed .dipi_timeline_item_card .dipi_timeline_ribbon {
    display: none;
}

.dipi_timeline_layout_left .dipi_timeline_item_card .dipi_timeline_ribbon,
.dipi_timeline_layout_right .dipi_timeline_item_card .dipi_timeline_ribbon {
    display: flex;
}

/*
 * In left/right layouts, the timeline line is positioned using "Line Area Size".
 * If the icon column is allowed to flex-grow, its rendered width diverges from
 * "Line Area Size" (more noticeable at larger values), which makes the line
 * drift away from the icon center. Keep the icon column fixed-width so the
 * line always stays centered on the icons.
 */
.dipi_timeline_layout_right .dipi_timeline_item .ribbon-icon-wrap,
.dipi_timeline_layout_left .dipi_timeline_item .ribbon-icon-wrap {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    overflow: visible;
}

@media only screen and (max-width: 980px) {

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container {
        -webkit-box-direction: reverse;
        -webkit-box-orient: horizontal;
        -moz-box-direction: reverse;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container {
        flex-direction: row;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container>.dipi_timeline_ribbon {
        justify-content: flex-end;
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: flex-end;
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_container .dipi-timeline-line__active,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_container .dipi-timeline-line,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_container .dipi-timeline-line__active,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_container .dipi-timeline-line {
        /*border-right-width: 0 !important;*/
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-line__active,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-line,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-line__active,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-line {
        /* left: calc(16px); */
        /* line_area_size / 2 */
        right: auto;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-line__active,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-line,
    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-line__active,
    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-line {
        /* right: calc(16px - 4px); */
        /* line_area_size/2 - borderwidth * 2 */
        left: auto;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_item_container>.dipi_timeline_ribbon {
        display: none;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_item_card .dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_item_card .dipi_timeline_ribbon {
        display: none;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_item_container>.dipi_timeline_ribbon {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_item_card .dipi_timeline_ribbon,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_item_card .dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_item_card .dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_item_card .dipi_timeline_ribbon {
        display: flex;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_item .ribbon-icon-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_item .ribbon-icon-wrap,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_item .ribbon-icon-wrap,
    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_item .ribbon-icon-wrap {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        overflow: visible;
    }
}

@media only screen and (max-width: 767px) {

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container {
        -webkit-flex-direction: row-reverse !important;
        -moz-box-orient: horizontal !important;
        -moz-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container {
        flex-direction: row !important;
        -webkit-box-direction: normal !important;
        -webkit-box-orient: horizontal !important;
        -moz-box-direction: normal !important;
        -moz-box-orient: horizontal !important;
        -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container>.dipi_timeline_ribbon,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container>.dipi_timeline_ribbon,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container>.dipi_timeline_ribbon {
        justify-content: flex-end !important;
        -webkit-box-pack: end !important;
        -moz-box-pack: end !important;
        -ms-flex-pack: end !important;
        -webkit-justify-content: flex-end !important;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    div.et_pb_module .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    div.et_pb_module .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: flex-end !important;
        -webkit-box-pack: end !important;
        -moz-box-pack: end !important;
        -ms-flex-pack: end !important;
        -webkit-justify-content: flex-end !important;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    div.et_pb_module .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    div.et_pb_module .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card-wrap,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card-wrap {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_container .dipi-timeline-line__active,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_container .dipi-timeline-line,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_container .dipi-timeline-line__active,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_container .dipi-timeline-line {
        /*border-right-width: 0 !important;*/
        left: 50%;
        right: auto !important;
        transform: translateX(-50%);
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-line__active,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-line,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-line__active,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-line {
        /* left: calc(16px); */
        /* line_area_size / 2 */
        right: auto !important;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-line__active,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-line,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-line__active,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-line {
        /* right: calc(16px - 4px); */
        /* line_area_size/2 - borderwidth * 2 */
        left: auto !important;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_item_container>.dipi_timeline_ribbon,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_item_container>.dipi_timeline_ribbon,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_item_container>.dipi_timeline_ribbon,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_item_container>.dipi_timeline_ribbon {
        display: none;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_item_card .dipi_timeline_ribbon,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_item_card .dipi_timeline_ribbon {
        display: none;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_item_container>.dipi_timeline_ribbon,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_item_container>.dipi_timeline_ribbon {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_item_card .dipi_timeline_ribbon,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_item_card .dipi_timeline_ribbon,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_item_card .dipi_timeline_ribbon,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_item_card .dipi_timeline_ribbon {
        display: flex;
    }

    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_item .ribbon-icon-wrap,
    .et-bfb:not(.et-bfb) #et-boc .et-l div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_item .ribbon-icon-wrap,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_item .ribbon-icon-wrap,
    div.et_pb_module.dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_item .ribbon-icon-wrap {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        overflow: visible;
    }
}

.dipi_timeline_item {
    z-index: 1;
}

.dipi_timeline_item_content {
    position: relative;
}

.dipi_timeline_item_button {
    display: inline-block;
}

.dipi_timeline .dipi_timeline_item_image .et_pb_image_wrap {
    display: block;
}

.dipi_timeline {
    word-wrap: break-word;
}

.dipi_timeline_item_image {
    border: 0 solid #333;
    text-align: center;
}

.dipi_timeline_item_container {
    margin: 0 auto;
    position: relative;
    width: 100%;
    display: table;
}

.et_pb_sticky_module .dipi_timeline_item_image .et_pb_image_wrap {
    width: 100%;
    max-width: 100%;
}

.dipi_timeline_item.et_pb_text_align_left .dipi_timeline_item_container .dipi_timeline_item_content {
    text-align: left;
}

.dipi_timeline_item.et_pb_text_align_right .dipi_timeline_item_container .dipi_timeline_item_content {
    text-align: right;
}

.dipi_timeline_item.et_pb_text_align_justified .dipi_timeline_item_container .dipi_timeline_item_content {
    text-align: justify;
}

.dipi_timeline_item.et_pb_text_align_center .dipi_timeline_item_container .dipi_timeline_item_content {
    text-align: center;
}

.dipi_timeline_item_container p:last-of-type {
    padding-bottom: 0;
}

.dipi_timeline_item_image {
    /* display: inline-block; */
    /* remove this code to make icon placement working*/
    margin-bottom: 30px;
    line-height: 0;
    max-width: 100%;
}

.dipi_timeline_ribbon_text {
    border-style: solid;
    border-color: #333333;
    border-width: 0;
}

.dipi_timeline_item .et_pb_module_header a,
.dipi_timeline_item h4 a {
    text-decoration: none;
}

.dipi_timeline_item .dipi_timeline_item_image .et_pb_image_wrap {
    display: block;
    margin: auto;
}

.dipi_timeline_item .et_pb_button_wrapper {
    white-space: nowrap;
    margin-top: 20px;
}

.dipi_timeline_item_position_left .dipi_timeline_item_image,
.dipi_timeline_item_position_right .dipi_timeline_item_image {
    width: 60px;
    display: table-cell;
    line-height: 0;
}

.dipi_timeline_item_position_left .dipi_timeline_item_image img,
.dipi_timeline_item_position_right .dipi_timeline_item_image img {
    width: inherit;
}

.dipi_timeline_item .ribbon-icon {
    line-height: 1;
}

.dipi_timeline_item .ribbon-icon,
.dipi_timeline_item_position_left .et-pb-icon,
.dipi_timeline_item_position_right .et-pb-icon {
    display: inline-flex;
}

.dipi_timeline_item .ribbon-icon,
.dipi_timeline_item_position_left .et-pb-icon-circle,
.dipi_timeline_item_position_right .et-pb-icon-circle {
    padding: 15px;
}

.et-db #et-boc .et-l .dipi_timeline_item .ribbon-icon-circle-border,
.et-db #et-boc .et-l .dipi_timeline_item_position_left .et-pb-icon-circle-border,
.et-db #et-boc .et-l .dipi_timeline_item_position_right .et-pb-icon-circle-border,
.dipi_timeline_item .ribbon-icon-circle-border,
.dipi_timeline_item_position_left .et-pb-icon-circle-border,
.dipi_timeline_item_position_right .et-pb-icon-circle-border {
    border: 2px solid;
}

.et-db #et-boc .et-l .dipi_timeline .dipi_timeline_item .ribbon-ico-circle,
.et-db #et-boc .et-l .dipi_timeline .dipi_timeline_item_card-wrap .et-pb-icon-circle,
.dipi_timeline .dipi_timeline_item .ribbon-ico-circle,
.dipi_timeline .dipi_timeline_item_card-wrap .et-pb-icon-circle {
    border-radius: 100%;
}

.et-db #et-boc .et-l .dipi_timeline .dipi_timeline_item .ribbon-ico-circle-border,
.et-db #et-boc .et-l .dipi_timeline .dipi_timeline_item_card-wrap .et-pb-icon-circle-border,
.dipi_timeline .dipi_timeline_item .ribbon-ico-circle-border,
.dipi_timeline .dipi_timeline_item_card-wrap .et-pb-icon-circle-border {
    border: 2px solid;
}

.dipi_timeline_item_position_left .dipi_timeline_item_content,
.dipi_timeline_item_position_right .dipi_timeline_item_content {
    display: table-cell;
    vertical-align: top;
}

.dipi_timeline_item_position_left .dipi_timeline_item_content {
    padding-left: 15px;
}

.dipi_timeline_item_position_left .dipi_timeline_item_container {
    text-align: left;
}

.dipi_timeline_item_position_right .dipi_timeline_item_content {
    padding-right: 15px;
}

.dipi_timeline_item_position_right .dipi_timeline_item_container {
    text-align: right;
}

.dipi_timeline_item_position_right .dipi_timeline_item_image {
    left: auto;
    right: 0;
}

.dipi_timeline_item_position_right .et-pb-icon {
    margin-right: 0;
    margin-left: 20px;
}

.ribbon-icon {
    font-family: ETmodules;
}

.dipi_timeline_item .ribbon-icon:after {
    line-height: inherit;
    font-size: inherit !important;
    content: attr(data-icon);
    line-height: 1;
}

.et-db #et-boc .et-l .dipi_timeline_item:hover .ribbon-icon,
.et-db #et-boc .et-l .dipi_timeline_item .ribbon-icon.active,
.dipi_timeline_item:hover .ribbon-icon,
.dipi_timeline_item .ribbon-icon.active {
    color: #ffffff;
}

/*.et-db #et-boc .et-l .dipi_timeline_item:hover .ribbon-icon.ribbon-icon-circle,*/
.et-db #et-boc .et-l .dipi_timeline_item .ribbon-icon.ribbon-icon-circle.active,
/*.dipi_timeline_item:hover .ribbon-icon.ribbon-icon-circle,*/
.dipi_timeline_item .ribbon-icon.ribbon-icon-circle.active {
    background-color: #2C3D49;
}

.et-db #et-boc .et-l .dipi_timeline_item .ribbon-icon-circle,
.dipi_timeline_item .ribbon-icon-circle {
    border-radius: 100%;
}

/* Center icon column with card column so timeline icon lines up with card + arrow when the card has vertical margin. */
.dipi_timeline_item_container {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.dipi_timeline_ribbon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.dipi_timeline .dipi_timeline_item_card-wrap.need_animation {
    opacity: 0;
}

.dipi_timeline_layout_mixed .dipi_timeline_ribbon,
.dipi_timeline_layout_mixed .dipi_timeline_item_card-wrap {
    /*
     * In mixed layout the icon column is a fixed-width flex item sitting between
     * ribbon (left column) and card-wrap (right column). Using 50% basis for
     * both side columns makes the icon column drift off-center; using equal flex
     * on both sides keeps the icon column perfectly centered so the timeline
     * line (at 50%) always passes through the icons.
     */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 0;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
}

.dipi_timeline_item .ribbon-icon-wrap {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex-grow: 0;
    -webkit-flex-grow: 0;
    flex-grow: 0;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 1;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin: 1rem;
    position: relative;
    overflow: visible;
}

/* .et-db #et-boc .et-l .dipi_timeline_item .dipi_timeline_item_card, Commented since 20240213: With this code, background, border, box-shadow setting of child module is not working in backend builder*/
.dipi_timeline_item .dipi_timeline_item_card {
    position: relative;
    border-style: solid;
    background: #F2F3F3;
    border-width: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: visible !important;
}

/* Row aligns icon column with the card column (see .dipi_timeline_item_container). Card-wrap centers the card.
   Arrow on .dipi_timeline_item_card:after so it stays on the card edge when the card has horizontal margin. */
.dipi_timeline_item_card-wrap {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-basis: 100%;
    --dipi-timeline-wrap-mt: 0px;
    --dipi-timeline-wrap-mb: 0px;
}

.dipi_timeline_item_card-wrap:after {
    content: none !important;
    display: none !important;
}

.dipi_timeline_item_card:after {
    content: '';
    /* Match flex-aligned icon when wrap has unequal top/bottom margin (vars set on .dipi_timeline_item_card-wrap). */
    top: calc(50% + (var(--dipi-timeline-wrap-mb, 0px) - var(--dipi-timeline-wrap-mt, 0px)) / 2);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    display: inline;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.dipi_timeline_layout_left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item .dipi_timeline_item_container .dipi_timeline_item_card:after {
    right: -12px;
    border-left-style: solid;
    /* border-left-width: 12px; */
}

.dipi_timeline_layout_right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item .dipi_timeline_item_container .dipi_timeline_item_card:after {
    left: -12px;
    border-right-style: solid;
    /* border-right-width: 12px; */
}

@media (min-width: 981px) {

    .dipi_timeline_layout_mixed.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card:after,
    .dipi_timeline_layout_mixed.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card:after {
        right: -12px;
        border-left-style: solid;
        /* border-left-width: 12px; */
    }

    .dipi_timeline_layout_mixed.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card:after,
    .dipi_timeline_layout_mixed.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card:after {
        left: -12px;
        border-right-style: solid;
        /* border-right-width: 12px; */
    }
}

@media (max-width:980px) {

    .dipi_timeline_item .dipi_timeline_item_position_left_tablet .dipi_timeline_item_image,
    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .dipi_timeline_item_image {
        width: 60px;
        display: table-cell;
        line-height: 0;
    }

    .dipi_timeline_item .dipi_timeline_item_position_left_tablet .dipi_timeline_item_image img,
    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .dipi_timeline_item_image img {
        width: inherit;
    }

    .dipi_timeline_item .ribbon-icon,
    .dipi_timeline_item .dipi_timeline_item_position_left_tablet .et-pb-icon,
    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .et-pb-icon {
        display: inline-flex;
    }

    .dipi_timeline_item .ribbon-icon-circle,
    .dipi_timeline_item .dipi_timeline_item_position_left_tablet .et-pb-icon-circle,
    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .et-pb-icon-circle {
        padding: 10px;
    }

    .dipi_timeline_item .ribbon-icon-circle-border,
    .dipi_timeline_item .dipi_timeline_item_position_left_tablet .et-pb-icon-circle-border,
    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .et-pb-icon-circle-border {
        border: 2px solid;
    }

    .dipi_timeline_item .dipi_timeline_item_position_left_tablet .dipi_timeline_item_content,
    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .dipi_timeline_item_content {
        display: table-cell;
        vertical-align: top;
    }

    .dipi_timeline_item .dipi_timeline_item_position_left_tablet .dipi_timeline_item_content {
        padding-left: 15px
    }

    .dipi_timeline_item .dipi_timeline_item_position_left_tablet .dipi_timeline_item_container {
        text-align: left;
    }

    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .dipi_timeline_item_content {
        padding-right: 15px;
    }

    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .dipi_timeline_item_container {
        padding-right: 52px;
        text-align: right;
    }

    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .dipi_timeline_item_image {
        left: auto;
        right: 0;
    }

    .dipi_timeline_item .dipi_timeline_item_position_right_tablet .et-pb-icon {
        margin-right: 0;
        margin-left: 20px;
    }

    .dipi_timeline_item .dipi_timeline_item_position_top_tablet .dipi_timeline_item_image {
        display: inline-block;
        width: auto;
    }

    .dipi_timeline_item .ribbon-icon,
    .dipi_timeline_item .dipi_timeline_item_position_top_tablet .et-pb-icon {
        display: inline-flex;
    }

    .dipi_timeline_item .ribbon-icon-circle,
    .dipi_timeline_item .dipi_timeline_item_position_top_tablet .et-pb-icon-circle {
        padding: 10px;
    }

    .dipi_timeline_item .dipi_timeline_item_position_top_tablet .dipi_timeline_item_content {
        padding-left: 0;
        padding-right: 0;
        display: block;
    }

    .dipi_timeline_item .dipi_timeline_item_position_top_tablet .dipi_timeline_item_container {
        /* text-align: center; */
        padding-right: 0;
    }

    .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet .dipi_timeline_item_card-wrap {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 0;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
    }

    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_item_card-wrap,
    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_item_card-wrap {
        flex-basis: auto;
        -webkit-flex-basis: auto;
    }

    .dipi_timeline .dipi_timeline_layout_left_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item .dipi_timeline_item_container .dipi_timeline_item_card:after {
        right: -12px;
        border-left-style: solid;
        /* border-left-width: 12px; */
        border-right-style: none;
        left: auto;
    }

    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card:after,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card:after {
        right: -12px;
        border-left-style: solid;
        /* border-left-width: 12px; */
        border-right-style: none;
        left: auto;
    }

    .dipi_timeline .dipi_timeline_layout_right_tablet .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item .dipi_timeline_item_container .dipi_timeline_item_card:after {
        left: -12px;
        border-right-style: solid;
        /* border-right-width: 12px; */
        border-left-style: none;
        right: auto;
    }

    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card:after,
    .dipi_timeline .dipi_timeline_layout_mixed_tablet.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card:after {
        left: -12px;
        border-right-style: solid;
        /* border-right-width: 12px; */
        border-left-style: none;
        right: auto;
    }
}

@media (max-width:767px) {

    .dipi_timeline_item .dipi_timeline_item_position_left_phone .dipi_timeline_item_image,
    .dipi_timeline_item .dipi_timeline_item_position_right_phone .dipi_timeline_item_image {
        width: 60px;
        display: table-cell;
        line-height: 0;
    }

    .dipi_timeline_item .dipi_timeline_item_position_left_phone .dipi_timeline_item_image img,
    .dipi_timeline_item .dipi_timeline_item_position_right_phone .dipi_timeline_item_image img {
        width: inherit;
    }

    .dipi_timeline_item .ribbon-icon,
    .dipi_timeline_item .dipi_timeline_item_position_left_phone .et-pb-icon,
    .dipi_timeline_item .dipi_timeline_item_position_right_phone .et-pb-icon {
        display: inline-flex;
    }

    .dipi_timeline_item .ribbon-icon-circle,
    .dipi_timeline_item .dipi_timeline_item_position_left_phone .et-pb-icon-circle,
    .dipi_timeline_item .dipi_timeline_item_position_right_phone .et-pb-icon-circle {
        padding: 10px;
    }

    .dipi_timeline .dipi_timeline_item .ribbon-icon-circle-border,
    .dipi_timeline_item .dipi_timeline_item_position_left_phone .et-pb-icon-circle-border,
    .dipi_timeline_item .dipi_timeline_item_position_right_phone .et-pb-icon-circle-border {
        border: 2px solid;
    }

    .dipi_timeline_item .dipi_timeline_item_position_left_phone .dipi_timeline_item_content,
    .dipi_timeline_item .dipi_timeline_item_position_right_phone .dipi_timeline_item_content {
        display: table-cell;
        vertical-align: top;
    }

    .dipi_timeline_item .dipi_timeline_item_position_left_phone .dipi_timeline_item_content {
        padding-left: 15px;
    }

    .dipi_timeline_item .dipi_timeline_item_position_left_phone .dipi_timeline_item_container {
        text-align: left;
    }

    .dipi_timeline_item .dipi_timeline_item_position_right_phone .dipi_timeline_item_content {
        padding-right: 15px;
    }

    .dipi_timeline_item .dipi_timeline_item_position_right_phone .dipi_timeline_item_container {
        padding-right: 52px;
        text-align: right;
    }

    .dipi_timeline_item .dipi_timeline_item_position_right_phone .dipi_timeline_item_image {
        left: auto;
        right: 0;
    }

    .dipi_timeline_item .dipi_timeline_item_position_right_phone .et-pb-icon {
        margin-right: 0;
        margin-left: 20px;
    }

    .dipi_timeline_item .dipi_timeline_item_position_top_phone .dipi_timeline_item_image {
        display: inline-block;
        width: auto
    }

    .dipi_timeline_item .ribbon-icon,
    .dipi_timeline_item .dipi_timeline_item_position_top_phone .et-pb-icon {
        display: inline-flex;
    }

    .dipi_timeline_item .ribbon-icon-circle,
    .dipi_timeline_item .dipi_timeline_item_position_top_phone .et-pb-icon-circle {
        padding: 10px;
    }

    .dipi_timeline_item_position_top_phone .dipi_timeline_item_content {
        padding-left: 0;
        padding-right: 0;
        display: block;
    }

    .dipi_timeline_item .dipi_timeline_item_position_top_phone .dipi_timeline_item_container {
        /* text-align: center; */
        padding-right: 0;
    }

    .dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_ribbon,
    .dipi_timeline .dipi_timeline_layout_mixed_phone .dipi_timeline_item_card-wrap {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 0;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
    }

    .dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_item_card-wrap,
    .dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_item_card-wrap {
        flex-basis: auto;
        -webkit-flex-basis: auto;
    }

    .dipi_timeline .dipi_timeline_layout_left_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item .dipi_timeline_item_container .dipi_timeline_item_card:after {
        right: -12px;
        border-left-style: solid;
        /* border-left-width: 12px; */
        border-right-style: none;
        left: auto;
    }

    .dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card:after,
    .dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card:after {
        right: -12px;
        border-left-style: solid;
        /* border-left-width: 12px; */
        border-right-style: none;
        left: auto;
    }

    .dipi_timeline .dipi_timeline_layout_right_phone .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item .dipi_timeline_item_container .dipi_timeline_item_card:after {
        left: -12px;
        border-right-style: solid;
        /* border-right-width: 12px; */
        border-left-style: none;
        right: auto;
    }

    .dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-right .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(odd) .dipi_timeline_item_container .dipi_timeline_item_card:after,
    .dipi_timeline .dipi_timeline_layout_mixed_phone.startpos-left .dipi_timeline_container .dipi-timeline-items .dipi_timeline_item:nth-child(even) .dipi_timeline_item_container .dipi_timeline_item_card:after {
        left: -12px;
        border-right-style: solid;
        /* border-right-width: 12px; */
        border-left-style: none;
        right: auto;
    }
}

.dipi-typing {
	display: flex;
	flex-direction: row;
}

.dipi-typing-wrap {
	border-style: solid;
}

.dipi-typing-text-prefix {
	border-style: solid;
}

.dipi-typing-text-suffix {
	border-style: solid;
}
.dipi_horizontal_timeline_d5 .et_pb_main_blurb_image .et-waypoint {
  opacity: 1 !important;
}

/*
 * Item inner layout (matches HorizontalTimelineItem.css loaded in VB only).
 * Without display:flex on .dipi_htl_item_container, mixed/top/bottom flex-direction
 * rules in this file have no effect on the front-end — DOM order stays ribbon → icon → card.
 */
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .dipi_htl_item_container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.dipi_horizontal_timeline_d5 .dipi_timeline_ribbon {
  display: flex;
  align-items: center;
}

.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .ribbon-ico-wrap {
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin: 1rem 0;
}

.dipi_horizontal_timeline_d5 .dipi_htl_item_card-wrap {
  width: 100%;
  position: relative;
  display: flex;
  flex-basis: 100%;
}

.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .dipi_htl_item_card {
  border-style: solid;
  background: #f2f3f3;
  position: relative;
  width: 100%;
}

/* .dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item {
  border-style: solid;
  transition: all .3s ease-in-out !important;
}

.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item:hover {
  transition: all .3s ease-in-out;
} */

/* Swiper Styling */
.dipi_horizontal_timeline_d5 .dipi_htl_container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.dipi_horizontal_timeline_item.swiper-slide .dipi_horizontal_timeline_item {
  width: 100%;
}

.dipi_horizontal_timeline_d5 .dipi_htl_container .dipi_horizontal_timeline_item {
  display: flex;
  position: relative;
  font-size: 14px;
  justify-content: flex-start;
  /* text-align: center; */
  margin-bottom: 0 !important;
  flex-shrink: 0;
  flex-direction: column;
  float: none !important;
  clear: none !important;
  height: auto;
  transition-property: transform;
  overflow: visible;
}

/* Has been moved below. Check if this causes any issues. */
/* .dipi_horizontal_timeline_d5 .dipi_htl_container-3d .dipi-htl-items {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
} */

.dipi_horizontal_timeline_d5 .dipi_htl_container .dipi-htl-items {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  flex-wrap: nowrap;
  overflow: visible;
  /* FIXME: Maybe only use in .dipi_htl_container-3d? */
  transform-style: preserve-3d;

  /* Should be generated by npm */
  /* display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  -webkit-transition-property: transform;
  -ms-flex-wrap: none; */
}

.dipi_horizontal_timeline_d5 .swiper-pagination {
  text-align: center;
  width: 100%;
}

.dipi_horizontal_timeline_d5 .swiper-pagination .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.dipi_horizontal_timeline_d5 .swiper-pagination .swiper-pagination-bullet {
  margin: 0 4px;
  width: 8px;
  height: 8px;
}

.dipi_horizontal_timeline_d5
  .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  /* -webkit-transform: translateX(-50%); */
}

.dipi_horizontal_timeline_d5
  .swiper-pagination
  .swiper-pagination-bullet:last-child {
  margin-right: 0;
}

.dipi_horizontal_timeline_d5 .swiper-button-next,
.dipi_horizontal_timeline_d5 .swiper-button-prev {
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: 50px;
  margin-top: 0;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;

  /* display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-transform: translateY(-50%);
  -webkit-transition: all .3s;
  -moz-transition:  all .3s;
  -o-transition:  all .3s; */
}

.dipi_horizontal_timeline_d5 .swiper-button-next:after,
.dipi_horizontal_timeline_d5 .swiper-button-prev:after {
  content: attr(data-icon);
  display: block;
  font-family: ETmodules;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
}

.dipi_horizontal_timeline_d5 .swiper-button-prev {
  left: -66px;
}
.dipi_horizontal_timeline_d5 .swiper-button-next {
  right: -66px;
}

/* Navigation visibility per breakpoint (parity with dipi_carousel / SwiperRenderTrait). */
@media only screen and (min-width: 981px) {
  .dipi_horizontal_timeline_d5 .hide_on_desktop {
    display: none !important;
  }

  .dipi_horizontal_timeline_d5 .show_on_desktop_flex {
    display: flex !important;
  }
}

@media only screen and (max-width: 980px) and (min-width: 768px) {
  .dipi_horizontal_timeline_d5 .hide_on_tablet {
    display: none !important;
  }

  .dipi_horizontal_timeline_d5 .show_on_tablet_flex {
    display: flex !important;
  }
}

@media only screen and (max-width: 767px) {
  .dipi_horizontal_timeline_d5 .hide_on_phone {
    display: none !important;
  }

  .dipi_horizontal_timeline_d5 .show_on_phone_flex {
    display: flex !important;
  }
}

.dipi_horizontal_timeline_d5 .swiper-button-next.swiper-button-disabled,
.dipi_horizontal_timeline_d5 .swiper-button-prev.swiper-button-disabled {
  cursor: pointer;
  pointer-events: all;
}

.dipi_horizontal_timeline_d5 .dipi-carousel-main.hide_lightbox .dipi_htl_item_image_popup {
  cursor: auto;
}

.dipi_horizontal_timeline_d5 .dipi-carousel-main.show_lightbox .dipi_htl_item_image_popup,
.dipi_horizontal_timeline_d5 .dipi-carousel-main.show_lightbox .dipi_htl_item_image_popup img {
  cursor: pointer;
}

@media (max-width: 980px) {
  .dipi_horizontal_timeline_d5 .dipi-carousel-main.hide_lightbox_tablet .dipi_htl_item_image_popup {
    cursor: auto;
  }

  .dipi_horizontal_timeline_d5 .dipi-carousel-main.show_lightbox_tablet .dipi_htl_item_image_popup,
  .dipi_horizontal_timeline_d5 .dipi-carousel-main.show_lightbox_tablet .dipi_htl_item_image_popup img {
    cursor: pointer;
  }
}

@media (max-width: 767px) {
  .dipi_horizontal_timeline_d5 .dipi-carousel-main.hide_lightbox_phone .dipi_htl_item_image_popup {
    cursor: auto;
  }

  .dipi_horizontal_timeline_d5 .dipi-carousel-main.show_lightbox_phone .dipi_htl_item_image_popup,
  .dipi_horizontal_timeline_d5 .dipi-carousel-main.show_lightbox_phone .dipi_htl_item_image_popup img {
    cursor: pointer;
  }
}

.dipi_horizontal_timeline_d5 .dipi_htl_container {
  width: 100%;
  height: auto;
  display: flex;
  align-items: start;

  /* display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start; */
}

.dipi_horizontal_timeline_d5.et_pb_module .swiper-arrow-button.show_on_hover {
  opacity: 0;
}
.dipi_horizontal_timeline_d5
  .swiper-button-prev.swiper-arrow-button.show_on_hover {
  left: 0 !important;
}
.dipi_horizontal_timeline_d5
  .swiper-button-next.swiper-arrow-button.show_on_hover {
  right: 0 !important;
}
.dipi_horizontal_timeline_d5.et_pb_module:hover .swiper-arrow-button.show_on_hover,
.dipi_horizontal_timeline_d5.et_pb_module
  .swiper-arrow-button.show_on_hover:hover {
  opacity: 1;
}
.dipi_horizontal_timeline_d5
  .swiper-button-prev.swiper-arrow-button.show_on_hover:before,
.dipi_horizontal_timeline_d5
  .swiper-button-next.swiper-arrow-button.show_on_hover:before {
  width: 100%;
  height: 100%;
  opacity: 1;
  content: " ";
  position: absolute;
}

.dipi_horizontal_timeline_d5
  .swiper-button-prev.swiper-arrow-button.show_on_hover:before {
  left: 50%;
}

.dipi_horizontal_timeline_d5
  .swiper-button-next.swiper-arrow-button.show_on_hover:before {
  right: 50%;
}

.dipi_horizontal_timeline_d5 .dipi-htl-items {
  display: flex;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  overflow: visible;
}
.dipi_horizontal_timeline_d5 .dipi-htl-items {
  align-items: baseline;
}

/* Timeline Styling */

.dipi_horizontal_timeline_d5 .dipi_htl_container {
  position: relative;
}

.dipi_horizontal_timeline_d5 .dipi-htl-line__active,
.dipi_horizontal_timeline_d5 .dipi-htl-line {
  border-style: solid;
  border-width: 2px;
  position: absolute;
  z-index: -1;
  border-top: none !important;
  left: 0;
  right: 0;
}

.dipi_horizontal_timeline_d5 .ribbon-ico {
  font-size: 20px;
  transition: color 300ms ease 0ms, background-color 300ms ease 0ms;
}
.dipi_horizontal_timeline_d5 .dipi-htl-line {
  overflow: inherit !important;
  border-color: #eaebec;
}

.dipi_horizontal_timeline_d5
  .dipi_htl_custom_classes:not(.dipi_timeline_show-card-arrow)
  .dipi_htl_item_card-wrap:after {
  border-style: hidden;
}

.dipi_horizontal_timeline_d5
  .dipi_htl_layout_top
  .dipi_htl_item_container,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-bottom
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-top
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container {
  -webkit-flex-direction: column-reverse;
  -moz-box-orient: horizontal;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.dipi_horizontal_timeline_d5
  .dipi_htl_layout_bottom
  .dipi_htl_item_container,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-bottom
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-top
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container {
  flex-direction: column;
}

.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-bottom
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container
  > .dipi_timeline_ribbon,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-top
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container
  > .dipi_timeline_ribbon {
  justify-content: flex-end;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
}
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_top
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_top
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-bottom
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-top
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
}

.dipi_horizontal_timeline_d5 .dipi_htl_ribbon-wrapper {
  position: absolute;
}
.dipi_horizontal_timeline_d5 .dipi_htl_layout_top .dipi_htl_container {
  /* padding-bottom: 100px; */
  padding: 30px;
}
.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom .dipi_htl_container {
  /* padding-top: 100px; */
}
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_bottom
  .dipi_horizontal_timeline_item
  .dipi_htl_item_container
  > .dipi_htl_ribbon-wrapper,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-bottom
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container
  > .dipi_htl_ribbon-wrapper,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-top
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container
  > .dipi_htl_ribbon-wrapper {
  bottom: 100%;
}

.dipi_horizontal_timeline_d5
  .dipi_htl_layout_top
  .dipi_horizontal_timeline_item
  .dipi_htl_item_container
  > .dipi_htl_ribbon-wrapper,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-bottom
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container
  > .dipi_htl_ribbon-wrapper,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-top
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container
  > .dipi_htl_ribbon-wrapper {
  top: 100%;
}
.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed .swiper-arrow-button,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed
  .dipi-htl-line__active,
.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed .dipi-htl-line {
  /*border-right-width: 0 !important;*/
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom .swiper-arrow-button,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_bottom
  .dipi-htl-line__active,
.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom .dipi-htl-line {
  bottom: auto;
}

.dipi_horizontal_timeline_d5 .dipi_htl_layout_top .swiper-arrow-button,
.dipi_horizontal_timeline_d5 .dipi_htl_layout_top .dipi-htl-line__active,
.dipi_horizontal_timeline_d5 .dipi_htl_layout_top .dipi-htl-line {
  top: auto;
}
.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom .swiper-arrow-button,
.dipi_horizontal_timeline_d5 .dipi_htl_layout_top .swiper-arrow-button {
  transform: translateY(0);
}
/*.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom .dipi_htl_item_container > .dipi_timeline_ribbon,
.dipi_horizontal_timeline_d5 .dipi_htl_layout_top .dipi_htl_item_container > .dipi_timeline_ribbon {
  display: none;
}
.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed .dipi_htl_item_card .dipi_timeline_ribbon {
  display: none;
}*/
/*.dipi_horizontal_timeline_d5 .dipi_htl_item_card .dipi_timeline_ribbon {
  display: none;
}
.dipi_horizontal_timeline_d5 .dipi_htl_layout_top .dipi_htl_item_card .dipi_timeline_ribbon,
.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom .dipi_htl_item_card .dipi_timeline_ribbon {
  display: flex;
}*/
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_bottom
  .dipi_horizontal_timeline_item
  .ribbon-ico-wrap,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_top
  .dipi_horizontal_timeline_item
  .ribbon-ico-wrap {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  flex-grow: 1;
}
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_bottom
  .dipi_horizontal_timeline_item
  .ribbon-ico-wrap {
  margin-top: 0;
}
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_top
  .dipi_horizontal_timeline_item
  .ribbon-ico-wrap {
  margin-bottom: 0;
}
@media only screen and (max-width: 980px) {
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-direction: reverse;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container {
    flex-direction: column;
  }

  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    > .dipi_timeline_ribbon,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    > .dipi_timeline_ribbon {
    justify-content: flex-end;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
  }
  .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap,
  .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
  }

  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_htl_container {
    /* padding-bottom: 100px; */
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_htl_container {
    /* padding-top: 100px; */
  }

  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper {
    bottom: 100%;
    top: auto;
  }

  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper {
    top: 100%;
    bottom: auto;
  }

  /* !Remove code. 
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_tablet.startpos-bottom .dipi_htl_container .dipi-htl-items .dipi_horizontal_timeline_item:nth-child(odd) .dipi_htl_item_container .dipi_htl_item_card-wrap,
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_tablet.startpos-top .dipi_htl_container .dipi-htl-items .dipi_horizontal_timeline_item:nth-child(even) .dipi_htl_item_container .dipi_htl_item_card-wrap,
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_tablet .dipi_htl_container .dipi-htl-items .dipi_horizontal_timeline_item:nth-child(odd) .dipi_htl_item_container .dipi_htl_item_card-wrap,
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_tablet .dipi_htl_container .dipi-htl-items .dipi_horizontal_timeline_item:nth-child(even) .dipi_htl_item_container .dipi_htl_item_card-wrap
  {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
*/
.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_tablet .swiper-arrow-button,
.et_pb_module.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed_tablet
  .dipi_htl_container
  .dipi-htl-line__active,
.et_pb_module.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed_tablet
  .dipi_htl_container
  .dipi-htl-line {
  /*border-right-width: 0 !important;*/
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_tablet .swiper-arrow-button,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_htl_container
    .dipi-htl-line__active,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_htl_container
    .dipi-htl-line {
    bottom: auto;
  }
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_top_tablet .swiper-arrow-button,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-line__active,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-line {
    top: auto;
  }
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_tablet .swiper-arrow-button,
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_top_tablet .swiper-arrow-button
  {
    transform: translateY(0);
  }
  /* .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_tablet .dipi_htl_item_container > .dipi_timeline_ribbon,
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_top_tablet .dipi_htl_item_container > .dipi_timeline_ribbon {
    display: none;
  }
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_tablet .dipi_htl_item_card .dipi_timeline_ribbon {
    display: none;
  }
*/
  /*.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_tablet .dipi_htl_item_container > .dipi_timeline_ribbon{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }  
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_tablet .dipi_htl_item_card .dipi_timeline_ribbon,
  .et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_top_tablet .dipi_htl_item_card .dipi_timeline_ribbon {
    display: flex;
  }
  */
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_horizontal_timeline_item
    .ribbon-ico-wrap,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_horizontal_timeline_item
    .ribbon-ico-wrap {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
    margin-left: 0;
    margin-right: 0;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_horizontal_timeline_item
    .ribbon-ico-wrap {
    margin-top: 0;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_horizontal_timeline_item
    .ribbon-ico-wrap {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 767px) {
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container {
    -webkit-flex-direction: column-reverse !important;
    -moz-box-orient: horizontal !important;
    -moz-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container {
    flex-direction: column !important;
  }

  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    > .dipi_timeline_ribbon,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    > .dipi_timeline_ribbon {
    justify-content: flex-end !important;
    -webkit-box-pack: end !important;
    -moz-box-pack: end !important;
    -ms-flex-pack: end !important;
    -webkit-justify-content: flex-end !important;
  }
  div.et_pb_module
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap,
  div.et_pb_module
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end !important;
    -webkit-box-pack: end !important;
    -moz-box-pack: end !important;
    -ms-flex-pack: end !important;
    -webkit-justify-content: flex-end !important;
  }

  .dipi_horizontal_timeline_d5 .dipi_htl_layout_top_phone .dipi_htl_container {
    /* padding-bottom: 100px !important; */
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_htl_container {
    /*padding-top: 100px !important;*/
  }

  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper,
  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper,
  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper {
    bottom: 100% !important;
    top: auto !important;
  }

  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper,
  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper,
  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    > .dipi_htl_ribbon-wrapper {
    top: 100% !important;
    bottom: auto !important;
  }

  /*div.et_pb_module .dipi_htl_layout_bottom_phone .dipi_htl_container .dipi-htl-items .dipi_horizontal_timeline_item:nth-child(even) .dipi_htl_item_container .dipi_htl_item_card-wrap,
  div.et_pb_module .dipi_htl_layout_bottom_phone .dipi_htl_container .dipi-htl-items .dipi_horizontal_timeline_item:nth-child(odd) .dipi_htl_item_container .dipi_htl_item_card-wrap,
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_phone.startpos-bottom .dipi_htl_container .dipi-htl-items .dipi_horizontal_timeline_item:nth-child(odd) .dipi_htl_item_container .dipi_htl_item_card-wrap,
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_phone.startpos-top .dipi_htl_container .dipi-htl-items .dipi_horizontal_timeline_item:nth-child(even) .dipi_htl_item_container .dipi_htl_item_card-wrap {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
*/
div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_phone .swiper-arrow-button,
div.et_pb_module.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed_phone
  .dipi_htl_container
  .dipi-htl-line__active,
div.et_pb_module.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed_phone
  .dipi_htl_container
  .dipi-htl-line {
    /*border-right-width: 0 !important;*/
    top: 50%;
    bottom: auto !important;
    transform: translateY(-50%);
  }
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_phone .swiper-arrow-button,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_htl_container
    .dipi-htl-line__active,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_htl_container
    .dipi-htl-line {
    bottom: auto !important;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_top_phone .swiper-arrow-button,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-line__active,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-line {
    top: auto !important;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_phone .swiper-arrow-button,
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_top_phone .swiper-arrow-button {
    transform: translateY(0);
  }
  /*div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_phone .dipi_htl_item_container > .dipi_timeline_ribbon,
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_top_phone .dipi_htl_item_container > .dipi_timeline_ribbon {
    display: none;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_phone .dipi_htl_item_card .dipi_timeline_ribbon {
    display: none;
  }*/
  /*div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_mixed_phone .dipi_htl_item_container > .dipi_timeline_ribbon{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }  
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_bottom_phone .dipi_htl_item_card .dipi_timeline_ribbon,
  div.et_pb_module.dipi_horizontal_timeline_d5 .dipi_htl_layout_top_phone .dipi_htl_item_card .dipi_timeline_ribbon {
    display: flex;
  }*/
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_horizontal_timeline_item
    .ribbon-ico-wrap,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_horizontal_timeline_item
    .ribbon-ico-wrap {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
    margin-left: 0;
    margin-right: 0;
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_horizontal_timeline_item
    .ribbon-ico-wrap {
    margin-top: 0 !important;
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_horizontal_timeline_item
    .ribbon-ico-wrap {
    margin-bottom: 0 !important;
  }
}

.dipi_horizontal_timeline_item {
  display: flex;
  align-items: center;
}
/* D5 has no .et_pb_module_inner: the item's own wrapper div is the flex item now. */
.dipi_horizontal_timeline_item > div {
  width: 100%;
}
.dipi_horizontal_timeline_d5 .dipi-image-wrap {
  display: block;
  position: relative;
  width: 100%;
}
.dipi_horizontal_timeline_d5 .dipi-carousel-icon {
  transition: 0.3s;
}
.dipi_horizontal_timeline_d5 .dipi-carousel-icon-circle-border {
  border: 3px solid;
}
.dipi_horizontal_timeline_d5 .dipi-carousel-icon-circle {
  padding: 25px;
  border-radius: 100%;
  font-size: 48px;
}
.dipi_horizontal_timeline_item .dipi_htl_item_image_popup {
  display: block;
  margin: auto;
  overflow: hidden;
}

.dipi_horizontal_timeline_item .dipi-carousel-item-content {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  padding: 20px;
  border-style: solid;
  position: relative;
}
.dipi_horizontal_timeline_item .dipi-carousel-item-title {
  margin-bottom: 15px;
  padding: 0;
}
.dipi_horizontal_timeline_item .dipi-carousel-item-desc {
  font-size: 14px;
  line-height: 15px;
  margin-bottom: 15px;
}
.dipi_horizontal_timeline_item .dipi-carousel-button-wrapper {
  flex: 1;
}
.dipi_horizontal_timeline_item .dipi-carousel-button {
  font-size: 20px;
  display: inline-block;
  border-style: solid;
}
.dipi_horizontal_timeline_item .dipi-carousel-button:hover:after,
.dipi_horizontal_timeline_item .dipi-carousel-button:hover:before {
  font-size: inherit !important;
  line-height: inherit;
}
.dipi_horizontal_timeline_d5 .dipi-carousel-child-wrapper .dipi_htl_item_image_popup img {
  transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
  transition-duration: 1s;
}
.dipi_horizontal_timeline_d5 .dipi-carousel-child-wrapper:hover
  .dipi_htl_item_image_popup.dipi-zoomin
  img {
  transform: scale(1.1);
}
.dipi_htl_item_image_popup.dipi-zoomout img {
  transform: scale(1.1);
}
.dipi_horizontal_timeline_d5 .dipi-carousel-child-wrapper:hover
  .dipi_htl_item_image_popup.dipi-zoomout
  img {
  transform: scale(1);
}
.dipi_htl_item_image_popup.dipi-rotate img {
  height: 100%;
  width: 100%;
}
.dipi_horizontal_timeline_d5 .dipi-carousel-child-wrapper:hover
  .dipi_htl_item_image_popup.dipi-rotate
  img {
  transform: scale(1.1) rotate(2deg);
}
.dipi_htl_item_image_popup.dipi-move-up img {
  transform: scale(1.15);
}
.dipi_horizontal_timeline_d5 .dipi-carousel-child-wrapper:hover
  .dipi_htl_item_image_popup.dipi-move-up
  img {
  transform: scale(1.15) translateY(-10px);
}
.dipi_htl_item_image_popup.dipi-move-down img {
  transform: scale(1.15);
}
.dipi_horizontal_timeline_d5 .dipi-carousel-child-wrapper:hover
  .dipi_htl_item_image_popup.dipi-move-down
  img {
  transform: scale(1.15) translateY(10px);
}
.dipi_htl_item_image_popup.dipi-move-right img {
  transform: scale(1.1);
}
.dipi_horizontal_timeline_d5 .dipi-carousel-child-wrapper:hover
  .dipi_htl_item_image_popup.dipi-move-right
  img {
  transform: scale(1.1) translateX(10px);
}
.dipi_htl_item_image_popup.dipi-move-left img {
  transform: scale(1.1);
}
.dipi_horizontal_timeline_d5 .dipi-carousel-child-wrapper:hover
  .dipi_htl_item_image_popup.dipi-move-left
  img {
  transform: scale(1.1) translateX(-10px);
}

/* Styling of Timeline*/
.dipi_horizontal_timeline_d5 .dipi_htl_item_content {
  position: relative;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_button {
  display: inline-block;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_button[data-icon]:not([data-icon=""]):after{
  content: attr(data-icon);
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_image .et_pb_image_wrap {
  display: block;
  border-style: solid;
  overflow: visible;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_image .et_pb_image_wrap img{ width: 100%; }
.dipi_horizontal_timeline_d5 {
  word-wrap: break-word;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_image {
  border: 0 solid #333;
  text-align: center;
  position: relative;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_container {
  margin: 0 auto;
  position: relative;
  width: 100%;
  display: table;
  overflow-y: visible;
}
.et_pb_sticky_module .dipi_htl_item_image .et_pb_image_wrap {
  width: 100%;
  max-width: 100%;
}
.dipi_horizontal_timeline_d5 .et_pb_text_align_left
{
  text-align: left;
}
.dipi_horizontal_timeline_d5 .et_pb_text_align_right
 {
  text-align: right;
}
.dipi_horizontal_timeline_d5 .et_pb_text_align_justified
{
  text-align: justify;
}
.dipi_horizontal_timeline_d5 .et_pb_text_align_center
{
  text-align: center;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_container p:last-of-type {
  padding-bottom: 0;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_image {
  /* display: inline-block;
     */
  /* remove this code to make icon placement working*/
  line-height: 0;
  max-width: 100%;
}
.dipi_horizontal_timeline_d5 .dipi_timeline_ribbon_text {
  border-style: solid;
  border-color: #333333;
}
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .et_pb_module_header a,
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item h4 a {
  text-decoration: none;
}
.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item
  .dipi_htl_item_image {
  display: flex;
  justify-content: center;
}
.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item
  .dipi_htl_item_image
  .et_pb_image_wrap {
  display: block;
  margin: 0 0 30px 0;
}
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .et_pb_button_wrapper {
  white-space: nowrap;
  margin-top: 20px;
}
.dipi_horizontal_timeline_d5 .ribbon-ico {
  font-family: ETmodules;
}
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .ribbon-ico:after {
  line-height: inherit;
  font-size: inherit !important;
  content: attr(data-icon);
  line-height: 1;
}
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item:hover .ribbon-ico,
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .ribbon-ico.active {
  color: #ffffff;
}
.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item:hover
  .ribbon-ico.ribbon-ico-circle,
.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item
  .ribbon-ico.ribbon-ico-circle.active {
  background-color: #2c3d49;
}
.dipi_horizontal_timeline_d5 .ribbon-ico-circle {
  border-radius: 100%;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_container {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.dipi_horizontal_timeline_d5 .dipi_timeline_ribbon {
  display: flex;
  align-items: center;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_card-wrap {
  width: 100%;
}
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .ribbon-ico-wrap {
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  margin: 1rem 0;
  position: relative;
}
.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item
  .dipi_htl_item_card {
  border-style: solid;
  background: #f2f3f3;
  position: relative;
}
/* Arrow Setting */
.dipi_horizontal_timeline_d5 .dipi_htl_item_card-wrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-basis: 100%;
}
.dipi_horizontal_timeline_d5 .dipi_htl_item_card-wrap:after {
  content: "";
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  display: inline;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .ribbon-ico {
  display: inline-flex;
}
.dipi_horizontal_timeline_d5 .dipi_horizontal_timeline_item .ribbon-ico-circle,
.dipi_horizontal_timeline_d5 .dipi_htl_item_card-wrap .et-pb-icon-circle {
  /* padding: 15px; *//* this is causing issue with timeline icon padding in D5 */
  border-radius: 100%;
}
.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item
  .ribbon-ico-circle-border,
.dipi_horizontal_timeline_d5
  .dipi_htl_item_card-wrap
  .et-pb-icon-circle-border {
  border-width: 2px;
  border-style: solid;
}
@media (min-width: 981px) {
  
  .dipi_horizontal_timeline_d5 .dipi_htl_item_position_left .dipi_htl_item_image,
  .dipi_horizontal_timeline_d5 .dipi_htl_item_position_right .dipi_htl_item_image {
    /* width: 60px; */
    line-height: 0;
  }

  /* Comment this styling code
  Not showing svg image when position is left or right
  @since 20240811
  @author Roberto */
  /* .dipi_horizontal_timeline_d5
  .dipi_htl_item_position_left
  .dipi_htl_item_image
  img,
  .dipi_horizontal_timeline_d5
  .dipi_htl_item_position_right
  .dipi_htl_item_image
  img {
    width: inherit;
  }
  */
  .dipi_horizontal_timeline_d5 .dipi_htl_item_position_left .et-pb-icon,
  .dipi_horizontal_timeline_d5 .dipi_htl_item_position_right .et-pb-icon {
    display: inline-flex;
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_item_position_left
    .dipi_htl_item_card,
  .dipi_horizontal_timeline_d5
    .dipi_htl_item_position_right
    .dipi_htl_item_card {
    display: flex;
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_item_position_left
    .dipi_htl_item_content {
    padding-left: 15px;
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_item_position_left
    .dipi_htl_item_container {
    text-align: left;
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_item_position_right
    .dipi_htl_item_content {
    padding-right: 15px;
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_item_position_right
    .dipi_htl_item_container {
    text-align: right;
  }
  .dipi_horizontal_timeline_d5
    .dipi_htl_item_position_right
    .dipi_htl_item_image {
    left: auto;
    right: 0;
  }
  .dipi_horizontal_timeline_d5 .dipi_htl_item_position_right .et-pb-icon {
    margin-right: 0;
    margin-left: 20px;
  }
}
.dipi_horizontal_timeline_d5
  .dipi_timeline_card_arrow_end
  .dipi_htl_item_card-wrap:after {
  right: 0;
  left: unset;
  transform: unset;
}
.dipi_horizontal_timeline_d5
  .dipi_timeline_card_arrow_start
  .dipi_htl_item_card-wrap:after {
  right: unset;
  left: 0;
  transform: unset;
}
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_top
  .dipi_horizontal_timeline_item
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap:after,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-bottom
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap:after,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-top
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap:after {
  bottom: -12px;
  border-top-style: solid;
  border-top-width: 12px;
}
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_bottom
  .dipi_horizontal_timeline_item
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap:after,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-bottom
  .dipi_horizontal_timeline_item[data-htl-parity="even"]
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap:after,
.dipi_horizontal_timeline_d5
  .dipi_htl_layout_mixed.startpos-top
  .dipi_horizontal_timeline_item[data-htl-parity="odd"]
  .dipi_htl_item_container
  .dipi_htl_item_card-wrap:after {
  top: -12px;
  border-bottom-style: solid;
  border-bottom-width: 12px;
}
.dipi_horizontal_timeline_item > .et_parallax_bg_wrap {
  display: none;
}
@media (max-width: 980px) and (min-width:768px) {
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_tablet
    .dipi_htl_item_image,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_tablet
    .dipi_htl_item_image {
    /* width: 60px; */
    line-height: 0;
  }

  /* Comment this styling code
  Not showing svg image when position is left or right
  @since 20240811
  @author Roberto */
  /* .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_tablet
    .dipi_htl_item_image
    img,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_tablet
    .dipi_htl_item_image
    img {
    width: inherit;
  }*/

  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_tablet
    .et-pb-icon,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_tablet
    .et-pb-icon {
    display: inline-flex;
  }

  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_tablet
    .dipi_htl_item_card,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_tablet
    .dipi_htl_item_card {
    display: flex;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_tablet
    .dipi_htl_item_content {
    padding-left: 15px;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_tablet
    .dipi_htl_item_container {
    text-align: left;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_tablet
    .dipi_htl_item_content {
    padding-right: 15px;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_tablet
    .dipi_htl_item_container {
    padding-right: 52px;
    text-align: right;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_tablet
    .dipi_htl_item_image {
    left: auto;
    right: 0;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_tablet
    .et-pb-icon {
    margin-right: 0;
    margin-left: 20px;
  }

   /* Comment this styling code
   Image Alignment is not working when image placement is top
  @since 20240811
  @author Roberto */
  /*.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_top_tablet
    .dipi_htl_item_image {
    display: inline-block;
    width: auto;
  }*/
  
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_top_tablet
    .et-pb-icon {
    display: inline-flex;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_top_tablet
    .dipi_htl_item_content {
    padding-left: 0;
    padding-right: 0;
    display: block;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_position_top_tablet
    .dipi_htl_item_container {
    text-align: center;
    padding-right: 0;
  }
}
@media (max-width: 980px) {
  .et_pb_module.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item
  .ribbon-ico {
    display: inline-flex;
  }
  /*.et_pb_module.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item
  .ribbon-ico-circle,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_card-wrap
    .et-pb-icon-circle {
    padding: 10px;
  }*/
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .ribbon-ico-circle-border,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_horizontal_timeline_item
    .dipi_htl_item_card-wrap
    .et-pb-icon-circle-border {
      border-width: 2px;
      border-style: solid;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
  .dipi_horizontal_timeline_item
  .ribbon-ico {
    display: inline-flex;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_timeline_card_arrow_end_tablet
    .dipi_htl_item_card-wrap:after {
    right: 0;
    left: unset;
    transform: unset;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_timeline_card_arrow_start_tablet
    .dipi_htl_item_card-wrap:after {
    right: unset;
    left: 0;
    transform: unset;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_timeline_card_arrow_center_tablet
    .dipi_htl_item_card-wrap:after {
    left: 50%;
    transform: translateX(-50%);
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after {
    bottom: -12px;
    border-top-style: solid;
    border-top-width: 12px;
    border-bottom-style: none;
    top: auto;
  }
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_tablet
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  .et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_tablet.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    .dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after {
    top: -12px;
    border-bottom-style: solid;
    border-bottom-width: 12px;
    border-top-style: none;
    bottom: auto;
  }

}
@media (max-width: 767px) {
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_phone
    .dipi_htl_item_image,
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_phone
    .dipi_htl_item_image {
    /* width: 60px; */
    line-height: 0;
  }

  /* Comment this styling code
  Not showing svg image when position is left or right
  @since 20240811
  @author Roberto */
  /* div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_phone
    .dipi_htl_item_image
    img,
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_phone
    .dipi_htl_item_image
    img {
    width: inherit;
  }*/

  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_phone
    .et-pb-icon,
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_phone
    .et-pb-icon {
    display: inline-flex;
  }

  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_phone
    .dipi_htl_item_card,
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_phone
    .dipi_htl_item_card {
    display: flex;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_phone
    .dipi_htl_item_content {
    padding-left: 15px;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_left_phone
    .dipi_htl_item_container {
    text-align: left;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_phone
    .dipi_htl_item_content {
    padding-right: 15px;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_phone
    .dipi_htl_item_container {
    padding-right: 52px;
    text-align: right;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_phone
    .dipi_htl_item_image {
    left: auto;
    right: 0;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_right_phone
    .et-pb-icon {
    margin-right: 0;
    margin-left: 20px;
  }


  /* Comment this styling code
  Image Alignment is not working when image placement is top
  @since 20240811
  @author Roberto */
  /*
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_top_phone
    .dipi_htl_item_image {
    display: inline-block;
    width: auto;
  }*/

  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_top_phone
    .et-pb-icon {
    display: inline-flex;
  }
  /*div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_top_phone
    .et-pb-icon-circle {
    padding: 10px;
  }*/
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_item_position_top_phone
    .dipi_htl_item_content {
    padding-left: 0;
    padding-right: 0;
    display: block;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_position_top_phone
    .dipi_htl_item_container {
    text-align: center;
    padding-right: 0;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
  div.dipi_horizontal_timeline_item
  .ribbon-ico {
    display: inline-flex;
  }
  /*div.et_pb_module.dipi_horizontal_timeline_d5
  div.dipi_horizontal_timeline_item
  .ribbon-ico-circle {
    padding: 10px;
  }*/
  div.et_pb_module.dipi_horizontal_timeline_d5
  div.dipi_horizontal_timeline_item
  .ribbon-ico{
    display: inline-flex;
  }
  /*div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .ribbon-ico-circle,
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_card-wrap
    .et-pb-icon-circle {
    padding: 10px;
  }*/
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .ribbon-ico-circle-border,
  div.et_pb_module.dipi_horizontal_timeline_d5
    div.dipi_horizontal_timeline_item
    .dipi_htl_item_card-wrap
    .et-pb-icon-circle-border {
      border-width: 2px;
      border-style: solid;
  }

  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_timeline_card_arrow_end_phone
    .dipi_htl_item_card-wrap:after {
    right: 0;
    left: unset;
    transform: unset;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_timeline_card_arrow_start_phone
    .dipi_htl_item_card-wrap:after {
    right: unset;
    left: 0;
    transform: unset;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_timeline_card_arrow_center_phone
    .dipi_htl_item_card-wrap:after {
    left: 50%;
    transform: translateX(-50%);
  }

  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_top_phone
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item.dipi_htl_item_custom-card-arrow
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after {
    bottom: -12px;
    border-top-style: solid;
    border-top-width: 12px;
    border-bottom-style: none;
    top: auto !important;
  }
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_bottom_phone
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-bottom
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item[data-htl-parity="even"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after,
  div.et_pb_module.dipi_horizontal_timeline_d5
    .dipi_htl_layout_mixed_phone.startpos-top
    .dipi_htl_container
    .dipi-htl-items
    div.dipi_horizontal_timeline_item[data-htl-parity="odd"]
    .dipi_htl_item_container
    .dipi_htl_item_card-wrap:after {
    top: -12px;
    border-bottom-style: solid;
    border-bottom-width: 12px;
    border-top-style: none;
    bottom: auto !important;
  }
}

.dipi_htl_item_image .et_pb_image_wrap {
  overflow: hidden;
}
.dipi_table_maker .dipi-table-maker table {
  border-width: 0;
  height: 1px; /* https://limebrains.com/blog/2021-03-02T13:00-heigh-100-inside-table-td/ */
}

.dipi_table_maker .dipi-table-maker.show_lightbox .dipi-content-image{
  cursor: zoom-in;
}
.dipi_table_maker .dipi-table-maker .dipi-cell {
  border-style: solid;
}
.dipi_table_maker .dipi-table-maker  table th,
.dipi_table_maker .dipi-table-maker table td {
  padding: 0;
  border-width: 0;
  border-style: solid;
}
.dipi_table_maker .dipi-table-maker .dipi-col-header {
  display: none;
}
.dipi_table_maker .dipi-content-image-icon-wrap {
  line-height: 1;
  border-style: solid;
}
.dipi_table_maker .dipi-table-maker.icon_image_place_left .dipi_table_item-content,
.dipi_table_maker .dipi-table-maker.icon_image_place_right .dipi_table_item-content
{
  display: flex;
}
.dipi_table_maker .dipi-table-maker.icon_image_place_right .dipi_table_item-content {
  flex-direction: row-reverse;
}
.dipi_table_maker .dipi_table_item-content-wrapper,
.dipi_table_maker .dipi_table_item-content
{
  height: 100%;
}

.dipi_table_maker .dipi-table-maker.icon_image_place_left .dipi-content-wrapper {
  padding-left: 15px;
}
.dipi_table_maker .dipi-table-maker.icon_image_place_right .dipi-content-wrapper {
  padding-right: 15px;
}
.dipi_table_maker .dipi-table-maker:not(.icon_image_place_top) .dipi_table_item-content-wrapper .dipi-content-image-icon-wrap,
.dipi_table_maker .dipi-table-maker .dipi_table_maker_child:not(.icon_image_place_top):not(.icon_image_place_parent) .dipi_table_item-content-wrapper .dipi-content-image-icon-wrap
{
  margin: unset;
}

.dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_top  .dipi_table_item-content {
  display: block;
}

.dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_left .dipi_table_item-content,
.dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right .dipi_table_item-content
{
  display: flex;
}

.dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right .dipi_table_item-content {
  flex-direction: row-reverse;
}
.dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_left .dipi-content-wrapper {
  padding-left: 15px;
}
.dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right .dipi-content-wrapper {
  padding-right: 15px;
}


/* Responsive row headers layout - Desktop */
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) table
{
  height: auto;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) table,
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) th
{
  display: block;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) tr {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) thead{
  display: none;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) tbody {
  display: grid;
  gap: 10px;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) td{
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  transition: all 0.3s;
  overflow: hidden;
  margin-top: -1px;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) tr td:first-child .dipi-col-header {
  display: none;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) tr td:first-child .dipi-cell {
  width: 100%;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-col-header {
  display: flex;
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child)  .dipi-col-header > div {
  flex: 1;
  height: 100%;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-cell {
  width: 50%;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-cell.dipi-table-maker-no-header {
  width: 100%;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) .js-accordion {
  cursor: pointer;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"]:not([data-collapsed-by="column_headers"]) .js-accordion:not(.opened) ~ td {
  height: 0;
  border: none;
}

/* Responsive column headers layout - Desktop */
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] table {
  display: flex;
  flex-direction: column;
  height: auto;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] thead,
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] tbody,
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] tr {
  display: contents;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] th,
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] td {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  position: relative;
  transition: height 0.3s, min-height 0.3s, flex 0.3s;
  overflow: hidden;
  margin-top: -1px;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] .dipi-column-group-start[data-col-index="0"] {
  margin-top: 0;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] .dipi-column-group-start:not([data-col-index="0"]) {
  margin-top: 10px;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] .dipi-col-header {
  display: none !important;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] .dipi-cell {
  width: 100%;
  flex: 1 1 auto;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] .dipi_table_item-content-wrapper,
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] .dipi_table_item-content {
  height: auto;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"] .js-accordion {
  cursor: pointer;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"][data-display="accordion"] tbody td.dipi-column-collapsed {
  height: 0;
  min-height: 0;
  overflow: hidden;
  border: none;
  padding: 0;
  margin-top: 0;
  flex: 0 0 0;
}
.dipi_table_maker .dipi-table-maker[data-break="desktop"][data-collapsed-by="column_headers"][data-display="accordion"] tbody td.dipi-column-collapsed .dipi-cell {
  border-width: 0;
}
@media (max-width: 980px) {
  .dipi_table_maker .dipi-table-maker.icon_image_place_top_tablet .dipi-content-image-icon-wrap {
      display: block; /* For alignment changed inline-block to block */
  }
  .dipi_table_maker .dipi-table-maker.hide_lightbox_tablet .dipi-content-image{
      cursor: unset;
  }
  .dipi_table_maker .dipi-table-maker.show_lightbox_tablet .dipi-content-image{
      cursor: zoom-in;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_top_tablet .dipi_table_item-content {
      display: block;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_top_tablet .dipi-content-wrapper {
      padding-left: 0;
      padding-right: 0;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_left_tablet  .dipi_table_item-content,
  .dipi_table_maker .dipi-table-maker.icon_image_place_right_tablet  .dipi_table_item-content
  {
      display: flex;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_right_tablet .dipi_table_item-content {
      flex-direction: row-reverse;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_left_tablet .dipi-content-wrapper {
      padding-left: 15px;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_right_tablet .dipi-content-wrapper {
      padding-right: 15px;
  }
  .dipi_table_maker .dipi_table_maker_child.icon_image_place_top_tablet .dipi-content-image-icon-wrap {
      display: block;
  }
  .dipi_table_maker .dipi-table-maker:not(.icon_image_place_top_tablet) .dipi_table_item-content-wrapper .dipi-content-image-icon-wrap,
  .dipi_table_maker .dipi_table_maker_child:not(.icon_image_place_top_tablet):not(.icon_image_place_parent_tablet) .dipi_table_item-content-wrapper .dipi-content-image-icon-wrap
  {
      margin: unset;
  }
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_top_tablet  .dipi_table_item-content {
      display: block;
  }
  .dipi_table_maker .dipi_table_maker_child.icon_image_place_top_tablet .dipi-content-wrapper {
      padding-left: 0;
      padding-right: 0;
  }
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_left_tablet .dipi_table_item-content ,
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right_tablet .dipi_table_item-content 
  {
      display: flex;
  }
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right_tablet .dipi_table_item-content {
      flex-direction: row-reverse;
  }

  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_left_tablet .dipi-content-wrapper {
      padding-left: 15px;
  }
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right_tablet .dipi-content-wrapper {
      padding-right: 15px;
  }

  /* Responsive row headers layout - tablet */
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) table {
      height: auto;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) table,
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) th
  {
      display: block;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) tr {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) thead{
      display: none;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) tbody {
      display: grid;
      gap: 10px;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) td{
      display: flex;
      padding: 0;
      align-items: center;
      justify-content: flex-end;
      position: relative;
      transition: all 0.3s;
      overflow: hidden;
      margin-top: -1px;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) tr td:first-child .dipi-col-header {
      display: none;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) tr td:first-child .dipi-cell {
      width: 100%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-col-header {
      display: flex;
      position: absolute;
      left: 0;
      width: 50%;
      height: 100%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child)  .dipi-col-header > div {
      flex: 1;
      height: 100%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-cell {
      width: 50%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-cell.dipi-table-maker-no-header {
      width: 100%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) .js-accordion {
      cursor: pointer;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"]:not([data-collapsed-by="column_headers"]) .js-accordion:not(.opened) ~ td {
    height: 0;
    border: none;
  }

  /* Responsive column headers layout - tablet */
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] table {
      display: flex;
      flex-direction: column;
      height: auto;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] thead,
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] tbody,
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] tr {
      display: contents;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] th,
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] td {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      width: 100%;
      padding: 0;
      position: relative;
      transition: height 0.3s, min-height 0.3s, flex 0.3s;
      overflow: hidden;
      margin-top: -1px;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] .dipi-column-group-start[data-col-index="0"] {
      margin-top: 0;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] .dipi-column-group-start:not([data-col-index="0"]) {
      margin-top: 10px;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] .dipi-col-header {
      display: none !important;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] .dipi-cell {
      width: 100%;
      flex: 1 1 auto;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] .dipi_table_item-content-wrapper,
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] .dipi_table_item-content {
      height: auto;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"] .js-accordion {
      cursor: pointer;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"][data-display="accordion"] tbody td.dipi-column-collapsed {
      height: 0;
      min-height: 0;
      overflow: hidden;
      border: none;
      padding: 0;
      margin-top: 0;
      flex: 0 0 0;
  }
  .dipi_table_maker .dipi-table-maker[data-break="tablet"][data-collapsed-by="column_headers"][data-display="accordion"] tbody td.dipi-column-collapsed .dipi-cell {
      border-width: 0;
  }
}
@media (max-width: 767px) {
  .dipi_table_maker .dipi-table-maker.icon_image_place_top_phone .dipi-content-image-icon-wrap {
      display: block;
  }
  .dipi_table_maker .dipi-table-maker.hide_lightbox_phone .dipi-content-image{
      cursor: unset;
  }
  .dipi_table_maker .dipi-table-maker.show_lightbox_phone .dipi-content-image{
      cursor: zoom-in;
  }
  
  .dipi_table_maker .dipi-table-maker.icon_image_place_top_phone .dipi_table_item-content {
      display: block;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_top_phone .dipi-content-wrapper {
      padding-left: 0;
      padding-right: 0;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_left_phone  .dipi_table_item-content,
  .dipi_table_maker .dipi-table-maker.icon_image_place_right_phone  .dipi_table_item-content
  {
      display: flex;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_right_phone .dipi_table_item-content {
      flex-direction: row-reverse;
  }

  .dipi_table_maker .dipi-table-maker.icon_image_place_left_phone .dipi-content-wrapper {
      padding-left: 15px;
  }
  .dipi_table_maker .dipi-table-maker.icon_image_place_right_phone .dipi-content-wrapper {
      padding-right: 15px;
  }


  .dipi_table_maker .dipi_table_maker_child.icon_image_place_top_phone .dipi-content-image-icon-wrap {
      display: block; /* Changed from inline-block to block for image alignment */;
  }
  .dipi_table_maker .dipi-table-maker:not(.icon_image_place_top_phone) .dipi_table_item-content-wrapper .dipi-content-image-icon-wrap,
  .dipi_table_maker .dipi_table_maker_child:not(.icon_image_place_top_phone):not(.icon_image_place_parent_phone) .dipi_table_item-content-wrapper .dipi-content-image-icon-wrap {
      margin: unset;
  }
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_top_phone  .dipi_table_item-content {
      display: block;
  }
  .dipi_table_maker .dipi_table_maker_child.icon_image_place_top_phone .dipi-content-wrapper {
      padding-left: 0;
      padding-right: 0;
  }
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_left_phone .dipi_table_item-content ,
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right_phone .dipi_table_item-content 
  {
      display: flex;
  }
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right_phone .dipi_table_item-content {
      flex-direction: row-reverse;
  }

  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_left_phone .dipi-content-wrapper {
      padding-left: 15px;
  }
  .dipi_table_maker .dipi-table-maker .dipi_table_maker_child.icon_image_place_right_phone .dipi-content-wrapper {
      padding-right: 15px;
  }
  /* Responsive row headers layout - mobile */
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) table {
      height: auto;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) table,
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) th
  {
      display: block;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) tr {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) thead{
      display: none;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) tbody {
      display: grid;
      gap: 10px;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) td{
      display: flex;
      padding: 0;
      align-items: center;
      justify-content: flex-end;
      position: relative;
      transition: all 0.3s;
      overflow: hidden;
      margin-top: -1px;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) tr td:first-child .dipi-col-header {
      display: none;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) tr td:first-child .dipi-cell {
      width: 100%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-col-header {
      display: flex;
      position: absolute;
      left: 0;
      width: 50%;
      height: 100%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child)  .dipi-col-header > div {
      flex: 1;
      height: 100%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-cell {
      width: 50%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) tr td:not(first-child) .dipi-cell.dipi-table-maker-no-header {
      width: 100%;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) .js-accordion {
      cursor: pointer;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"]:not([data-collapsed-by="column_headers"]) .js-accordion:not(.opened) ~ td {
    height: 0;
    border: none;
  }

  /* Responsive column headers layout - mobile */
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] table {
      display: flex;
      flex-direction: column;
      height: auto;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] thead,
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] tbody,
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] tr {
      display: contents;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] th,
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] td {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      width: 100%;
      padding: 0;
      position: relative;
      transition: height 0.3s, min-height 0.3s, flex 0.3s;
      overflow: hidden;
      margin-top: -1px;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] .dipi-column-group-start[data-col-index="0"] {
      margin-top: 0;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] .dipi-column-group-start:not([data-col-index="0"]) {
      margin-top: 10px;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] .dipi-col-header {
      display: none !important;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] .dipi-cell {
      width: 100%;
      flex: 1 1 auto;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] .dipi_table_item-content-wrapper,
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] .dipi_table_item-content {
      height: auto;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"] .js-accordion {
      cursor: pointer;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"][data-display="accordion"] tbody td.dipi-column-collapsed {
      height: 0;
      min-height: 0;
      overflow: hidden;
      border: none;
      padding: 0;
      margin-top: 0;
      flex: 0 0 0;
  }
  .dipi_table_maker .dipi-table-maker[data-break="mobile"][data-collapsed-by="column_headers"][data-display="accordion"] tbody td.dipi-column-collapsed .dipi-cell {
      border-width: 0;
  }
}
.dipi_table_maker .dipi_table_item-content-wrapper {
  border-style: solid;
}
.dipi_table_maker .dipi-content-image-icon-wrap.dipi-icon-wrap {
  width: fit-content;
}
.dipi_table_maker .dipi-cell .dipi_table_item-content .dipi-content-wrapper {
  width: 100%;
}
/*
 * Pixel WhatsApp Chat.
 *
 * Every default is wrapped in :where() so it has the specificity of a single class at most: any design
 * setting (printed on the module's order class) wins, whatever order the stylesheets load in.
 * Custom properties are scoped to .dipi-wa, never :root:
 *   --dipi-wa-offset-x / -y  Horizontal / Vertical Offset of the floating widget (widget.advanced.offsetX/Y)
 *   --dipi-wa-align          Inline alignment (widget.advanced.alignment): flex-start | center | flex-end
 *   --dipi-wa-box-margin     the matching inline margin of the inline chat box: 0 auto | auto | auto 0
 * Floating: .dipi-wa is position: fixed; public/js/WhatsAppChat.js lifts it into the top layer (popover) so
 * transforms/filters/animations on any ancestor cannot re-anchor it. Logical properties mirror it on RTL sites.
 */

/*
 * Floating: the module wrapper leaves no gap in the layout — out of flow, so it is no flex/grid item either
 * (no column gap). !important: the wrapper's own Position/Sizing/Spacing settings must not bring the gap back.
 */
.dipi_whatsapp_chat.dipi_whatsapp_chat--floating {
    position: absolute !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

:where(.dipi_whatsapp_chat) .dipi-wa,
:where(.dipi_whatsapp_chat) .dipi-wa *,
:where(.dipi_whatsapp_chat) .dipi-wa *::before,
:where(.dipi_whatsapp_chat) .dipi-wa *::after {
    box-sizing: border-box;
}

:where(.dipi_whatsapp_chat) .dipi-wa {
    --dipi-wa-offset-x: 20px;
    --dipi-wa-offset-y: 20px;
    --dipi-wa-online: #25d366; /* These three: Status Dot defaults, mirrored in module.json statusDot defaultPrintedStyle. */
    --dipi-wa-offline: #a0a7ad;
    --dipi-wa-dot-size: 12px;
    --dipi-wa-focus: #25d366; /* Fields Focus Color default, mirrored in module.json field defaultPrintedStyle. */
    --dipi-wa-align: flex-start;
    display: flex;
    gap: 16px;
    font-size: 16px;
    line-height: 1.4;
    text-align: start;
}

/* Floating widget: overrides the UA [popover] styles (inset, margin, border, padding, colors, overflow) too. */
:where(.dipi_whatsapp_chat) .dipi-wa--floating {
    position: fixed;
    z-index: 2147483000;
    inset: auto;
    inset-block-end: var(--dipi-wa-offset-y);
    inset-inline-end: var(--dipi-wa-offset-x);
    flex-direction: column;
    align-items: flex-end;
    width: auto;
    max-width: calc(100vw - 2 * var(--dipi-wa-offset-x));
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
    /* Only the button and the open box take clicks; the page underneath stays clickable. */
    pointer-events: none;
}

:where(.dipi_whatsapp_chat) .dipi-wa--floating > * {
    pointer-events: auto;
}

/* Inline widget: the chat box drops down over the following content, or opens upwards (Chat Box Position). */
:where(.dipi_whatsapp_chat) .dipi-wa--inline {
    position: relative;
    flex-direction: row;
    justify-content: var(--dipi-wa-align);
}

/* Absolute with both inline insets at 0 and a set width: the auto margin aligns it like the button. */
:where(.dipi_whatsapp_chat) .dipi-wa--inline .dipi-wa__box {
    position: absolute;
    z-index: 999;
    inset-block-start: var(--dipi-wa-box-start, calc(100% + 12px));
    inset-block-end: var(--dipi-wa-box-end, auto);
    inset-inline: 0;
    margin-inline: var(--dipi-wa-box-margin, 0 auto);
}

/* Button ---------------------------------------------------------------- */

:where(.dipi_whatsapp_chat) .dipi-wa__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: none;
    min-width: 56px;
    min-height: 56px;
    margin: 0;
    /* Padding, radius, background and shadow: Button Style defaults, mirrored in module.json button defaultPrintedStyle. */
    padding: 14px;
    border: 0;
    border-radius: 999px;
    background-color: #25d366;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

:where(.dipi_whatsapp_chat) .dipi-wa__button:hover {
    transform: translateY(-2px);
}

:where(.dipi_whatsapp_chat) .dipi-wa__button:focus-visible,
:where(.dipi_whatsapp_chat) .dipi-wa__send:focus-visible,
:where(.dipi_whatsapp_chat) .dipi-wa__close:focus-visible {
    outline: 3px solid #128c7e;
    outline-offset: 3px;
}

:where(.dipi_whatsapp_chat) .dipi-wa__icon {
    display: inline-flex;
    flex: none;
    width: 28px; /* Icon Size / Color defaults: mirrored in module.json icon defaultPrintedStyle. */
    height: 28px;
    color: inherit;
}

:where(.dipi_whatsapp_chat) .dipi-wa__icon svg,
:where(.dipi_whatsapp_chat) .dipi-wa__close svg,
:where(.dipi_whatsapp_chat) .dipi-wa__send svg {
    display: block;
    width: 100%;
    height: 100%;
}

:where(.dipi_whatsapp_chat) .dipi-wa__label {
    display: inline-block;
    padding-inline-end: 6px;
    white-space: nowrap;
}

/*
 * Label: On Hover — collapsed, but still read by screen readers (no display: none).
 * The label sits in a 0fr → 1fr grid track, so it grows to exactly its own width (a max-width cap would finish
 * early on expand and stall on collapse). It stays one line tall throughout, so the button height never moves.
 */
:where(.dipi_whatsapp_chat) .dipi-wa--label-hover .dipi-wa__button {
    display: inline-grid;
    grid-template-columns: auto 0fr;
    column-gap: 0;
    transition: grid-template-columns 0.3s ease, column-gap 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

:where(.dipi_whatsapp_chat) .dipi-wa--label-hover .dipi-wa__button:hover,
:where(.dipi_whatsapp_chat) .dipi-wa--label-hover .dipi-wa__button:focus-visible {
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    /* The label growing out is the hover effect here; the lift on top of it reads as a jump in size. */
    transform: none;
}

:where(.dipi_whatsapp_chat) .dipi-wa--label-hover .dipi-wa__label {
    min-width: 0;
    padding-inline-end: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, padding 0.3s ease;
}

:where(.dipi_whatsapp_chat) .dipi-wa--label-hover .dipi-wa__button:hover .dipi-wa__label,
:where(.dipi_whatsapp_chat) .dipi-wa--label-hover .dipi-wa__button:focus-visible .dipi-wa__label {
    padding-inline-end: 6px;
    opacity: 1;
}

/* Label: Never — icon only, the label stays the accessible name. */
:where(.dipi_whatsapp_chat) .dipi-wa--label-hidden .dipi-wa__label,
:where(.dipi_whatsapp_chat) .dipi-wa__offline,
:where(.dipi_whatsapp_chat) .dipi-wa__live,
:where(.dipi_whatsapp_chat) .dipi-wa:not(.dipi-wa--field-labels) .dipi-wa-field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* One Agent, direct link, offline and chatting while offline not allowed: greyed out like a list entry; its offline
   text (tooltip) is read only then. */
:where(.dipi_whatsapp_chat) .dipi-wa__button[aria-disabled="true"] {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.6;
}

:where(.dipi_whatsapp_chat) .dipi-wa__button[aria-disabled="true"]:hover {
    transform: none;
}

:where(.dipi_whatsapp_chat) .dipi-wa__button:not([aria-disabled="true"]) .dipi-wa__offline {
    display: none;
}

/* Background, padding, border and radius are Badge Style defaults (module.json badge default); flex keeps the count centred whatever they are. */
:where(.dipi_whatsapp_chat) .dipi-wa__badge {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 26px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

:where(.dipi_whatsapp_chat) .dipi-wa--seen .dipi-wa__badge {
    display: none;
}

/* Chat box -------------------------------------------------------------- */

:where(.dipi_whatsapp_chat) .dipi-wa__box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    overflow: hidden;
    border-radius: 16px;
    background-color: #fff;
    color: #111b21;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); /* Mirrored in module.json chatBox defaultPrintedStyle. */
    font-size: 15px;
}

/* Inline, the box drops down within the module: no wider than its column (360px fits most). After the base rule,
   with the specificity of a single class, so Chat Box > Sizing still wins. */
:where(.dipi_whatsapp_chat .dipi-wa--inline) .dipi-wa__box {
    max-width: min(100%, calc(100vw - 32px));
}

:where(.dipi_whatsapp_chat) .dipi-wa__box[hidden] {
    display: none;
}

:where(.dipi_whatsapp_chat) .dipi-wa--open .dipi-wa__box {
    animation: dipi-wa-open 0.2s ease-out;
}

@keyframes dipi-wa-open {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

:where(.dipi_whatsapp_chat) .dipi-wa__header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    min-height: 56px;
    padding: 14px 16px;
    background-color: #075e54;
    color: #fff;
}

:where(.dipi_whatsapp_chat) .dipi-wa__avatar {
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

:where(.dipi_whatsapp_chat) .dipi-wa__heading {
    flex: 1 1 auto;
    min-width: 0;
}

:where(.dipi_whatsapp_chat) .dipi-wa__name {
    color: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

:where(.dipi_whatsapp_chat) .dipi-wa__status {
    color: inherit;
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.85;
}

:where(.dipi_whatsapp_chat) .dipi-wa__close,
:where(.dipi_whatsapp_chat) .dipi-wa__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin: 0 -6px 0 auto;
    margin-inline: auto -6px;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: inherit; /* White by default: Close & Back Icon Color default in module.json closeButton defaultPrintedStyle. */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

:where(.dipi_whatsapp_chat) .dipi-wa__close:hover,
:where(.dipi_whatsapp_chat) .dipi-wa__back:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* The button is its icon plus the padding (32px by default), so Close & Back Icon Size can grow it. */
:where(.dipi_whatsapp_chat) .dipi-wa__close svg,
:where(.dipi_whatsapp_chat) .dipi-wa__back svg {
    flex: none;
    width: 20px; /* Close & Back Icon Size default: mirrored in module.json closeButton defaultPrintedStyle. */
    height: 20px;
}

/* The back button sits at the start of the header; its arrow points the other way on RTL sites. */
:where(.dipi_whatsapp_chat) .dipi-wa__back {
    margin: 0;
    margin-inline: -6px 0;
}

:where(.dipi_whatsapp_chat) .dipi-wa__back:dir(rtl) svg {
    transform: scaleX(-1);
}

:where(.dipi_whatsapp_chat) .dipi-wa__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 20px 16px 16px;
    overflow-y: auto;
    background-color: #efeae2;
}

:where(.dipi_whatsapp_chat) .dipi-wa__greeting {
    position: relative;
    align-self: flex-start;
    max-width: 88%;
    margin-inline-start: 8px;
    border-radius: 0 8px 8px 8px;
    border-start-start-radius: 0;
    border-start-end-radius: 8px;
    color: #111b21;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Bubble tail: takes the bubble's background color. */
:where(.dipi_whatsapp_chat) .dipi-wa__greeting::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -8px;
    width: 8px;
    height: 13px;
    background: inherit;
    background-clip: border-box;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

:where(.dipi_whatsapp_chat) .dipi-wa__greeting:dir(rtl)::before {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

:where(.dipi_whatsapp_chat) .dipi-wa__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

:where(.dipi_whatsapp_chat) .dipi-wa__fields:empty {
    display: none;
}

/* Agent list ------------------------------------------------------------ */

:where(.dipi_whatsapp_chat) .dipi-wa__list-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: none;
    padding: 18px 16px 18px 20px;
    padding-inline: 20px 16px;
    background-color: #075e54;
    color: #fff;
}

:where(.dipi_whatsapp_chat) .dipi-wa__list-avatar {
    display: block;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

:where(.dipi_whatsapp_chat) .dipi-wa__list-heading {
    flex: 1 1 auto;
    min-width: 0;
}

:where(.dipi_whatsapp_chat) .dipi-wa__list-title {
    color: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

:where(.dipi_whatsapp_chat) .dipi-wa__list-intro {
    margin-top: 4px;
    color: inherit;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    white-space: pre-line;
}

:where(.dipi_whatsapp_chat) .dipi-wa__agents {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* !important: Divi's column rules (e.g. .et_pb_gutters3 .et_pb_column_1_2.et_block_column .et_pb_module) add a
   margin-bottom to every module; Agents have no Spacing settings, so nothing of ours is overridden. */
:where(.dipi_whatsapp_chat) .dipi-wa__agents > * {
    margin: 0 !important;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    /* Padding, border and background (with :hover): Item Style defaults, mirrored in module.json listItem defaultPrintedStyle. */
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid #f0f2f5;
    background-color: #fff;
    color: #111b21;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__item:hover {
    background-color: #f5f6f6;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__item:focus-visible {
    outline: 3px solid #128c7e;
    outline-offset: -3px;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__avatar {
    display: block;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__avatar--glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background-color: #25d366;
    color: #fff;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__avatar--glyph svg {
    display: block;
    width: 100%;
    height: 100%;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__role {
    color: #667781;
    font-size: 12px;
    line-height: 1.3;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

/*
 * List or chat window (behavior, so not in :where()): one Agent shows its chat window; two or more (--multi)
 * show the list until an Agent is opened (--agent-open + --active, public/js/WhatsAppChat.js / edit.jsx).
 */
.dipi-wa .dipi-wa-agent__panel {
    display: none;
}

.dipi-wa:not(.dipi-wa--multi) .dipi-wa-agent__panel,
.dipi-wa .dipi-wa-agent--active .dipi-wa-agent__panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dipi-wa:not(.dipi-wa--multi) .dipi-wa-agent__item,
.dipi-wa:not(.dipi-wa--multi) .dipi-wa__back,
.dipi-wa.dipi-wa--agent-open .dipi-wa__list-header,
.dipi-wa.dipi-wa--agent-open .dipi-wa-agent__item,
.dipi-wa.dipi-wa--agent-open .dipi-wa-agent:not(.dipi-wa-agent--active) {
    display: none;
}

/* A chat window scrolls its own body. */
.dipi-wa:not(.dipi-wa--multi) .dipi-wa__agents,
.dipi-wa.dipi-wa--agent-open .dipi-wa__agents {
    overflow: hidden;
}

/*
 * Online status ---------------------------------------------------------
 * .dipi-wa-agent--online / --offline come from the Agent's Availability (PHP first, public/js/WhatsAppChat.js every
 * minute). The dot and the screen reader text only with Show Online Status (.dipi-wa--status); the offline look and
 * the "Available from …" line always. The greyed-out look only for --blocked: offline and chatting while offline is
 * not allowed; an offline Agent that allows chatting looks normal apart from its dot and line.
 */

:where(.dipi_whatsapp_chat) .dipi-wa-agent__avatar-wrap {
    position: relative;
    display: inline-flex;
    flex: none;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__dot {
    position: absolute;
    inset-block-end: 1px;
    inset-inline-end: 1px;
    width: var(--dipi-wa-dot-size);
    height: var(--dipi-wa-dot-size);
    border: 2px solid #fff; /* Mirrored in module.json statusDot defaultPrintedStyle. */
    border-radius: 50%;
    background-color: var(--dipi-wa-offline);
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent--online .dipi-wa-agent__dot {
    background-color: var(--dipi-wa-online);
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__availability {
    color: inherit;
    font-size: 12px;
    font-style: italic;
    line-height: 1.3;
    opacity: 0.8;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent--blocked .dipi-wa-agent__item {
    background-color: #f7f8f9;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent--blocked .dipi-wa-agent__avatar,
:where(.dipi_whatsapp_chat) .dipi-wa-agent--blocked .dipi-wa-agent__text {
    opacity: 0.55;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent--blocked .dipi-wa-agent__avatar {
    filter: grayscale(1);
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__item[aria-disabled="true"],
:where(.dipi_whatsapp_chat) .dipi-wa__send:disabled {
    cursor: not-allowed;
}

:where(.dipi_whatsapp_chat) .dipi-wa__send:disabled {
    opacity: 0.5;
}

:where(.dipi_whatsapp_chat) .dipi-wa-agent__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Behavior (not in :where()): which parts show for the current state. */
.dipi-wa:not(.dipi-wa--status) .dipi-wa-agent__dot,
.dipi-wa:not(.dipi-wa--status) .dipi-wa-agent__sr,
.dipi-wa .dipi-wa-agent--online .dipi-wa-agent__availability,
.dipi-wa .dipi-wa-agent--online .dipi-wa-agent__sr--offline,
.dipi-wa .dipi-wa-agent--offline .dipi-wa-agent__sr--online {
    display: none;
}

/* Fields ---------------------------------------------------------------- */

:where(.dipi_whatsapp_chat) .dipi-wa-field {
    margin: 0;
}

:where(.dipi_whatsapp_chat) .dipi-wa-field__label {
    display: block;
    margin: 0 0 4px;
    color: #3b4a54;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

:where(.dipi_whatsapp_chat) .dipi-wa-field--required .dipi-wa-field__label::after {
    content: " *";
    color: #b3261e;
}

/*
 * "form <tag>.dipi-wa-field__input" has the specificity (0,1,2), its states (0,2,2): above the theme's own
 * input[type=text] / select / textarea rules (0,1,1) and their :focus (0,2,1), which otherwise restyle the text input,
 * and still below the Fields design settings on the module's order class (0,2,0) / (0,3,0).
 */
:where(.dipi_whatsapp_chat) form input.dipi-wa-field__input,
:where(.dipi_whatsapp_chat) form textarea.dipi-wa-field__input,
:where(.dipi_whatsapp_chat) form select.dipi-wa-field__input {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 11px 14px;
    background-color: #fff;
    color: #111b21;
    font: inherit;
    /* 16px: iOS Safari zooms the page into any focused field set smaller. */
    font-size: 16px;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(.dipi_whatsapp_chat) form textarea.dipi-wa-field__input {
    min-height: 96px;
    resize: vertical;
}

/*
 * Dropdown: the native arrow is replaced by a chevron that sits as far from the end edge as the text sits from the
 * start edge (14px), so the two mirror each other; on RTL sites both swap sides.
 */
:where(.dipi_whatsapp_chat) form select.dipi-wa-field__input {
    padding-inline-end: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27%3E%3Cpath fill=%27none%27 stroke=%27%2354656f%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M1 1.5l5 5 5-5%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}

:where(.dipi_whatsapp_chat) form select.dipi-wa-field__input:dir(rtl) {
    background-position: left 14px center;
}

/*
 * The open list. A native <select> popup cannot be styled; browsers with customizable selects (appearance:
 * base-select — Chromium 134+) get a card that matches the chat box, all others keep the native list. Still a native
 * <select>: keyboard, screen readers and form behavior are unchanged, no JS.
 */
@supports (appearance: base-select) {
    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input,
    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input::picker(select) {
        appearance: base-select;
    }

    /* The field keeps its own chevron (background image above). */
    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input::picker-icon {
        display: none;
    }

    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input::picker(select) {
        margin-block: 6px;
        padding: 6px;
        border: 1px solid #e2e6e9;
        border-radius: 12px;
        background-color: #fff;
        color: #111b21;
        box-shadow: 0 12px 32px rgba(11, 20, 26, 0.16);
    }

    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.4;
        cursor: pointer;
    }

    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input option:hover,
    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input option:focus-visible {
        background-color: #f0f2f5;
        outline: none;
    }

    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input option:checked {
        background-color: rgba(37, 211, 102, 0.12);
        color: #075e54;
        font-weight: 600;
    }

    /* The checkmark at the end of the selected option. */
    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input option::checkmark {
        order: 1;
        margin-inline-start: auto;
        color: #25d366;
    }

    /* The empty first entry (the placeholder). */
    :where(.dipi_whatsapp_chat) form select.dipi-wa-field__input option[value=""] {
        color: #667781;
        font-weight: 400;
    }
}

:where(.dipi_whatsapp_chat) form input.dipi-wa-field__input::placeholder,
:where(.dipi_whatsapp_chat) form textarea.dipi-wa-field__input::placeholder,
:where(.dipi_whatsapp_chat) form select.dipi-wa-field__input::placeholder {
    /* 4.5:1 on the white field - with Show Label off (the default) it's the only visible label. */
    color: #667781;
    opacity: 1;
}

:where(.dipi_whatsapp_chat) form input.dipi-wa-field__input:focus,
:where(.dipi_whatsapp_chat) form textarea.dipi-wa-field__input:focus,
:where(.dipi_whatsapp_chat) form select.dipi-wa-field__input:focus {
    border-color: var(--dipi-wa-focus);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dipi-wa-focus) 20%, transparent);
}

:where(.dipi_whatsapp_chat) form input.dipi-wa-field__input[aria-invalid="true"],
:where(.dipi_whatsapp_chat) form textarea.dipi-wa-field__input[aria-invalid="true"],
:where(.dipi_whatsapp_chat) form select.dipi-wa-field__input[aria-invalid="true"] {
    border-color: #d93025;
}

:where(.dipi_whatsapp_chat) form input.dipi-wa-field__input[aria-invalid="true"]:focus,
:where(.dipi_whatsapp_chat) form textarea.dipi-wa-field__input[aria-invalid="true"]:focus,
:where(.dipi_whatsapp_chat) form select.dipi-wa-field__input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    :where(.dipi_whatsapp_chat) form .dipi-wa-field__input {
        transition: none;
    }
}

:where(.dipi_whatsapp_chat) .dipi-wa-field__error {
    margin: 4px 0 0;
    /* 4.5:1 on the chat background (#efeae2). */
    color: #b3261e;
    font-size: 12px;
    line-height: 1.3;
}

:where(.dipi_whatsapp_chat) .dipi-wa-field__error[hidden] {
    display: none;
}

/* Chat button ----------------------------------------------------------- */

:where(.dipi_whatsapp_chat) .dipi-wa__send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

:where(.dipi_whatsapp_chat) .dipi-wa__send svg {
    flex: none;
    width: 20px;
    height: 20px;
}

@media (prefers-reduced-motion: reduce) {
    :where(.dipi_whatsapp_chat) .dipi-wa__button,
    :where(.dipi_whatsapp_chat) .dipi-wa__label,
    :where(.dipi_whatsapp_chat) .dipi-wa__send,
    :where(.dipi_whatsapp_chat) .dipi-wa__close {
        transition: none;
    }

    :where(.dipi_whatsapp_chat) .dipi-wa__button:hover {
        transform: none;
    }

    :where(.dipi_whatsapp_chat) .dipi-wa--open .dipi-wa__box {
        animation: none;
    }
}

/*
 * Pixel WhatsApp Chat: Visual Builder only (imported by edit.jsx, so it never ships to the frontend stylesheet).
 */

/* Visual Builder only: hint when there is no usable number, and the in-flow handle of a floating widget. */
:where(.dipi_whatsapp_chat) .dipi-wa-vb-hint,
:where(.dipi_whatsapp_chat) .dipi-wa-vb-handle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px dashed #25d366;
    border-radius: 8px;
    background-color: rgba(37, 211, 102, 0.08);
    color: #075e54;
    font-size: 13px;
    line-height: 1.4;
}

:where(.dipi_whatsapp_chat) .dipi-wa-vb-hint svg,
:where(.dipi_whatsapp_chat) .dipi-wa-vb-handle svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: #25d366;
}

/*
 * Visual Builder: Divi makes everything inside a module click-through until it is edited (its mousetrap takes the
 * clicks), but a floating button lies outside the module's box. Let clicks reach it (edit.jsx opens the settings).
 */
#page-container .et-fb-root-area .dipi-wa--floating[data-dipi-wa-vb] .dipi-wa__button {
    pointer-events: auto;
}

/* In the Visual Builder the floating wrapper keeps its handle (or the hint) in the layout so it stays selectable. */
.dipi_whatsapp_chat.dipi_whatsapp_chat--floating:has(.dipi-wa-vb-handle, .dipi-wa-vb-hint) {
    position: relative !important;
    width: auto !important;
    height: auto !important;
}

/* width: 100% - in the VB the module element is a flex row, which would
   otherwise size this wrapper to its content (Carousel's scrolling track
   has almost none, so the whole module shrank there). */
.dipi-vote-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

.dipi-vote__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.dipi-vote__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

/* Colors, spacing, radius, shadow and text of the toggle are the Vote
   module's Design > Vote / Results Toggle settings (their defaults recreate
   the original look) - only structure lives here. */
.dipi-vote__view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dipi-vote__view-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dipi-vote__view-btn:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.dipi-vote__voters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dipi-vote__voters-avatars {
    display: flex;
}

.dipi-vote__voters-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--dipi-vote-voters-border, #fff);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    object-fit: cover;
    background: #f1f5f9;
}

.dipi-vote__voters-avatars .dipi-vote__voters-avatar + .dipi-vote__voters-avatar {
    margin-left: -10px;
}

.dipi-vote__voters-avatar--guest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

/* Real Gravatar covers the initial-letter fallback once it loads; if it
   404s (no Gravatar registered) its onerror removes the <img>, revealing
   the colored initial underneath - no extra request needed either way. */
.dipi-vote__voters-avatar--user {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dipi-vote__voters-avatar-initial {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.dipi-vote__voters-avatar--user img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Font/color: the Vote module's Design > Voters > Voters Text. */
.dipi-vote__voters-count {
    white-space: nowrap;
}

/* Both the Vote view and the Results view are always rendered - only the
   active one shows, so switching is instant with no extra request. */
/* Both views share one grid cell (see .dipi-vote-item__views) and the
   inactive one is only made invisible - not display:none - so the item is
   always as tall as the taller view and doesn't jump when switching.
   visibility:hidden also removes it from clicks, tabbing and screen readers. */
.dipi-vote-wrapper[data-active-view='vote'] .dipi-vote-item__result,
.dipi-vote-wrapper[data-active-view='results'] .dipi-vote-item__actions {
    visibility: hidden;
}

.dipi-vote {
    display: grid;
    gap: 24px;
}

.dipi-vote--grid {
    grid-template-columns: repeat(var(--dipi-vote-columns, 3), minmax(0, 1fr));
}

.dipi-vote--list {
    grid-template-columns: minmax(0, 1fr);
}

.dipi-vote--list .dipi-vote-item__content {
    flex-direction: row;
}

/* Image column: Image Width, 33% of the card when empty. Same width on
   every item so the text column lines up. */
.dipi-vote--list .dipi-vote-item__image:not(.dipi-vote-item__image--icon) {
    flex: 0 0 auto;
    width: var(--dipi-vote-image-width, 33%);
    align-self: stretch;
}

/* Leaderboard: a ranked, dense single-line-per-item row - built for scanning
   many items at once (small image, description as a second line), vote button pinned
   to the far right. The rank number is a pure-CSS counter, not extra markup,
   so it stays in sync with whatever order the items render in - pairs well
   with "Sort By: Most Votes". */
.dipi-vote--leaderboard {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    counter-reset: dipi-vote-rank;
}

/* The item (not .content) is the positioning box here, so the Results fill,
   rank and ribbons span its full area - including any Spacing an item adds
   on the outer .dipi-vote-item. isolation keeps the fill (z-index: -1) above
   the item's own background but under its content; overflow clips it to
   the item's border radius. */
.dipi-vote--leaderboard .dipi-vote-item {
    counter-increment: dipi-vote-rank;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.dipi-vote--leaderboard .dipi-vote-item__content {
    flex-direction: row;
    align-items: center;
    position: static;
    padding-left: 44px;
}

.dipi-vote--leaderboard .dipi-vote-item__content::before {
    content: counter(dipi-vote-rank);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    font-size: 16px;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
}

/* Always a square thumbnail, Image Width wide (48px when empty) - the
   Fixed Image Height option doesn't apply to this layout. */
.dipi-vote--leaderboard .dipi-vote-item__image:not(.dipi-vote-item__image--icon) {
    flex: 0 0 auto;
    width: var(--dipi-vote-image-width, 48px);
    max-width: 40%;
    align-self: center;
}

.dipi-vote--leaderboard .dipi-vote-item__image-inner {
    position: relative;
}

.dipi-vote--leaderboard .dipi-vote-item__image-inner::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.dipi-vote--leaderboard .dipi-vote-item__image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

/* Icon instead of an image: no square thumbnail box, just the icon,
   vertically centered in the row (List keeps it at the text's top inset). */
.dipi-vote--list .dipi-vote-item__image--icon,
.dipi-vote--leaderboard .dipi-vote-item__image--icon {
    width: auto;
    max-width: none;
}

.dipi-vote--list .dipi-vote-item__image--icon {
    padding: 22px 0 22px 22px;
}

.dipi-vote--leaderboard .dipi-vote-item__image--icon {
    padding: 0;
    align-self: center;
}

/* List on phones: image on top at full width (like Grid), text below -
   a side-by-side row leaves the text column too narrow there. Kept after
   the List icon rule so the icon gets Grid's top inset back.
   ponytail: Divi's default phone breakpoint; a custom Phone width setting
   doesn't move it. */
@media (max-width: 767px) {
    .dipi-vote--list .dipi-vote-item__content {
        flex-direction: column;
    }

    .dipi-vote--list .dipi-vote-item__image:not(.dipi-vote-item__image--icon) {
        width: var(--dipi-vote-image-width, 100%);
        align-self: center;
    }

    .dipi-vote--list .dipi-vote-item__image--icon {
        padding: 22px 22px 0;
    }
}

/* Title with the (optional) description under it on the left, votes on the
   right spanning both lines - row-gap 0 so a row without a description
   keeps the title vertically centered against the votes. */
.dipi-vote--leaderboard .dipi-vote-item__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 0;
    padding: 14px 20px;
}

/* Leaderboard is a dense one-row list: its own tight title/description
   spacing (one class stronger than the Vote module's Item Text defaults; a
   Vote Item's own Title/Description Spacing still overrides it). */
.dipi-vote--leaderboard .dipi-vote-item .dipi-vote-item__title {
    margin: 0;
}

.dipi-vote--leaderboard .dipi-vote-item .dipi-vote-item__description {
    margin: 2px 0 0;
}

.dipi-vote--leaderboard .dipi-vote-item__title {
    grid-column: 1;
    font-size: 15px;
}

.dipi-vote--leaderboard .dipi-vote-item__description {
    grid-column: 1;
    font-size: 13px;
}

/* "Above Title" ribbon sits in the text column, as a third row. */
.dipi-vote--leaderboard .dipi-vote-ribbon {
    grid-column: 1;
    justify-self: start;
}

.dipi-vote--leaderboard .dipi-vote-item__views {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
    padding-top: 0;
}

.dipi-vote--leaderboard .dipi-vote-item__actions {
    justify-content: flex-end;
}

/* Leaderboard on phones: the votes move under the text (one column) so the
   title/description get the row's full width, and the rank + thumbnail
   shrink to leave it room. Placed after the Leaderboard rules it overrides.
   ponytail: Divi's default phone breakpoint, same as List above. */
@media (max-width: 767px) {
    .dipi-vote--leaderboard .dipi-vote-item__content {
        padding-left: 34px;
    }

    .dipi-vote--leaderboard .dipi-vote-item__content::before {
        left: 8px;
    }

    .dipi-vote--leaderboard .dipi-vote-item__image:not(.dipi-vote-item__image--icon) {
        max-width: 28%;
    }

    .dipi-vote--leaderboard .dipi-vote-item__body {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 14px;
    }

    .dipi-vote--leaderboard .dipi-vote-item__views {
        grid-column: 1;
        grid-row: auto;
        margin-top: 10px;
    }

    .dipi-vote--leaderboard .dipi-vote-item__actions {
        justify-content: flex-start;
    }
}

/* Results view: instead of a separate bar under the text, the whole item box
   fills with its result color up to its own percentage - the bar/track
   markup stays in the DOM (every other layout still uses it) but is hidden
   here. transparent is deliberate for the unfilled portion: it reveals
   whatever background the item's own Design panel setting already paints,
   rather than hardcoding a second color here. */
/* The result shares the views cell with the (taller) vote buttons - keep
   its percentage/count vertically centered in that height. */
.dipi-vote--leaderboard .dipi-vote-item__result {
    flex: 1;
    justify-content: center;
}

.dipi-vote--leaderboard .dipi-vote-item__result-bar {
    display: none;
}

/* Drawn by .content (which carries --dipi-vote-result-percentage/-color)
   but positioned against the item, so it fills the item edge to edge. */
.dipi-vote-wrapper[data-active-view='results'] .dipi-vote--leaderboard .dipi-vote-item__content::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: var(--dipi-vote-result-percentage, 0%);
    background: var(--dipi-vote-result-color, #c7d2fe);
    pointer-events: none;
}

/* Carousel: a horizontally scrolling track with CSS scroll-snap - it already
   works via touch/wheel/scrollbar with no JS at all; Vote.js's nav buttons
   are just a convenience shortcut on top of that native scroll. */
.dipi-vote-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The track must take the space between the nav buttons (not shrink to its
   content), otherwise item widths - a % of the track - depend on how many
   items there are. */
.dipi-vote--carousel {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Gap between the cards and the native scrollbar under them. */
    padding-bottom: 16px;
}

.dipi-vote--carousel .dipi-vote-item {
    flex: 0 0 auto;
    width: calc((100% - (var(--dipi-vote-columns, 3) - 1) * var(--dipi-vote-gap, 20px)) / var(--dipi-vote-columns, 3));
    scroll-snap-align: start;
}

.dipi-vote__carousel-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.dipi-vote__carousel-nav:hover:not(:disabled) {
    background: #f8fafc;
}

.dipi-vote__carousel-nav:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Columns per breakpoint: --dipi-vote-columns is printed by the module's
   own responsive styles (ModuleStylesTrait / module-styles.tsx) for every
   enabled Divi breakpoint, so no media queries here. */

/*
 * VB settings panel only. Tabbed groups (Vote / Vote Item Text, Vote Button,
 * Results) have tabs of different lengths: switching to a short tab can drop
 * the panel's scrollbar, the panel gets ~12px wider and Divi's tab row
 * stretches - every tab label visibly shifts. Always reserving the scrollbar
 * space while a tabbed group is shown keeps the width constant.
 */
.et-vb-modal-panel:has(.et-vb-field-input-button-options-wrap--tab-ui) {
    scrollbar-gutter: stable;
}

/* Background, border radius and box shadow are no longer set here - they're
   real defaults on the Vote module's Design > Item group, printed once with
   a selector weaker than any item's own rule, so each item's own
   Background/Border/Box Shadow still overrides them.
   No height: 100% - grid/carousel already stretch cards to equal height,
   and in the VB it resolved too tall, leaving a gap under the description. */
/* The card itself (not .content) positions the badge / corner ribbons, so
   they sit in the card's corner even when Item padding insets the content. */
.dipi-vote-item {
    position: relative;
    display: flex;
}

/* Corner Ribbon: clipped by the card's own rounded corners. */
.dipi-vote--ribbon-corner .dipi-vote-item {
    overflow: hidden;
}

/* VB only: items get .et_pb_module there, which picks up Divi's column
   module margin-bottom (2.75% / 30px) on top of Item Spacing. Frontend
   items don't carry .et_pb_module, so this changes nothing there. */
.et_pb_row .et_pb_column .dipi-vote .dipi-vote-item.et_pb_module {
    margin-bottom: 0;
}

.dipi-vote-item__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: inherit;
    overflow: hidden;
}

/* Status ribbon (item Status other than Open, or an Open item's own Ribbon
   Text). Colors per status are the Vote module's Design > Status Ribbon
   defaults; position comes from its Ribbon Position (.dipi-vote--ribbon-*). */
.dipi-vote-ribbon {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background-color: #f1f5f9;
    color: #334155;
}

.dipi-vote-ribbon--planned {
    background-color: #e0e7ff;
    color: #3730a3;
}

.dipi-vote-ribbon--in_progress {
    background-color: #fef3c7;
    color: #92400e;
}

.dipi-vote-ribbon--completed {
    background-color: #dcfce7;
    color: #166534;
}

.dipi-vote-ribbon--declined {
    background-color: #fee2e2;
    color: #991b1b;
}

.dipi-vote--ribbon-top_left .dipi-vote-ribbon,
.dipi-vote--ribbon-top_right .dipi-vote-ribbon,
.dipi-vote--ribbon-corner .dipi-vote-ribbon {
    position: absolute;
    z-index: 2;
    margin: 0;
}

.dipi-vote--ribbon-top_left .dipi-vote-ribbon {
    top: 12px;
    left: 12px;
}

.dipi-vote--ribbon-top_right .dipi-vote-ribbon {
    top: 12px;
    right: 12px;
}

/* Diagonal band across the top-right corner (clipped by the content's
   overflow: hidden). Fixed width - very long Ribbon Text is cut off. */
.dipi-vote--ribbon-corner .dipi-vote-ribbon {
    top: 26px;
    right: -44px;
    width: 170px;
    padding: 5px 0;
    border-radius: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: rotate(45deg);
}

/* Image Width (--dipi-vote-image-width, Vote module > Design > Item Image &
   Icon, responsive) - empty = full card width here; List / Leaderboard set
   their own fallbacks in Vote.css. A narrower image is centered. The outer
   .dipi-vote-item__image takes the Image Margin/Padding settings. */
.dipi-vote-item__image:not(.dipi-vote-item__image--icon) {
    width: var(--dipi-vote-image-width, 100%);
    max-width: 100%;
    align-self: center;
}

/* Default: each image at its own proportions. */
.dipi-vote-item__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* Vote module's Image Fit overrides this */
}

/* Use Fixed Image Height: every image box gets Image Height
   (--dipi-vote-image-height, responsive) via ::before padding, so fixed
   units give that height and % is relative to the box's own width
   (75% = 4:3); the image fills it per Image Fit. */
.dipi-vote--fixed-image .dipi-vote-item__image-inner {
    position: relative;
}

.dipi-vote--fixed-image .dipi-vote-item__image-inner::before {
    content: "";
    display: block;
    padding-top: var(--dipi-vote-image-height);
}

.dipi-vote--fixed-image .dipi-vote-item__image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

/* "Use Icon": the icon takes the image slot but not its Image Height box -
   it sits at the content's 22px inset so it lines up with the title. Size
   and color come from Icon Size / Icon Color (Vote module defaults 48px). */
.dipi-vote-item__image--icon {
    padding: 22px 22px 0;
    line-height: 1;
}

/* span.class (0,1,1): beats Divi's .et-pb-icon size (0,1,0) but loses to the
   Vote module's Icon Size ({{selector}} .dipi-vote-item__icon, 0,2,0) - an
   equal-weight default here would win, as this stylesheet prints later. */
span.dipi-vote-item__icon {
    display: inline-block;
    font-size: 48px;
    line-height: 1;
}

.dipi-vote-item__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
    /* No gap: the space under the title / description is their own Spacing
       setting (Vote module > Item Text, defaults 20px / 10px). */
}

.dipi-vote-item__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.dipi-vote-item__title a {
    color: inherit;
    text-decoration: none;
}

.dipi-vote-item__description {
    margin: 0;
    overflow-wrap: anywhere;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

/* Vote and Results views stacked in one cell (only the active one is
   visible - see Vote.css), so switching views never changes item height. */
.dipi-vote-item__views {
    display: grid;
    margin-top: auto;
    padding-top: 18px;
}

.dipi-vote-item__views > .dipi-vote-item__actions,
.dipi-vote-item__views > .dipi-vote-item__result {
    grid-area: 1 / 1;
    min-width: 0;
}

/* Each vote type's action (icon + progress) spans the full row width, so by
   default multiple vote types stack as separate rows rather than competing
   for space side by side - except exactly 2 (Like + Dislike), which share
   one row via the --split modifier below instead of stacking. */
.dipi-vote-item__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

/* Both actions sit in one row, each keeping half the width - the second one
   gets .dipi-vote-action--end (below) to mirror its icon onto the right. */
.dipi-vote-item__actions--split {
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.dipi-vote-item__actions--split .dipi-vote-action {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.dipi-vote-item__result {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--dipi-vote-result-color, #0f172a);
}

/* Percentage/count live in their own row above the bar - not sharing a flex
   row with it - so the bar track below is always the container's full width,
   the same length for every item regardless of digit count. */
.dipi-vote-item__result-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.dipi-vote-item__result-percentage {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.dipi-vote-item__result-count {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
}

/* Results settings (Bar Color / Track Color / Bar Height) set these vars on
   .dipi-vote-item__content - read by both the Results view bar and the Vote
   view bar (.dipi-vote-progress__*). */
.dipi-vote-item__result-bar {
    width: 100%;
    height: var(--dipi-vote-bar-height, 8px);
    border-radius: 999px;
    background: var(--dipi-vote-bar-track, #eef1f6);
    overflow: hidden;
}

.dipi-vote-item__result-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--dipi-vote-result-color, linear-gradient(90deg, #6366f1, #4f46e5));
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Icon button and its count/percentage are separate sibling elements (see
   .dipi-vote-action) rather than icon+numbers crammed into one small pill -
   the button itself now holds only the icon, sized as its own round chip. */
.dipi-vote-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* The second action when Like + Dislike share one row - mirrors the icon
   onto the right by reversing this action's own flex order, so the icons
   end up on the outside of the shared row and the data faces inward. */
.dipi-vote-action--end {
    flex-direction: row-reverse;
}

/* No button chrome at all - just the icon itself, clickable. Voted/hover
   feedback comes from transform/filter on the icon rather than a
   background, since a bare emoji or custom image can't usefully take one. */
.dipi-vote-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.25s ease-out, opacity 0.2s ease;
    /* Own compositor layer: the icon is a text glyph (emoji / icon font), which
       otherwise gets re-rasterized every frame while scaling and jitters. */
    will-change: transform;
    backface-visibility: hidden;
}

.dipi-vote-btn:hover:not(:disabled) {
    transform: scale(1.2);
}

.dipi-vote-btn:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 3px;
    border-radius: 4px;
}

.dipi-vote-btn:active:not(:disabled) {
    transform: scale(0.9);
}

/* !important because something outside this stylesheet - the browser's own
   UA default for disabled buttons in some browsers, or the Builder canvas's
   own styling for disabled controls - was still dimming this after the
   opacity rule that used to live here was removed. The VB preview button is
   always rendered `disabled` (Vote.js doesn't run in the Builder), so this
   is the only place that dimming could be coming from for VB specifically. */
.dipi-vote-btn:disabled {
    cursor: not-allowed;
    opacity: 1 !important;
}

/* Voting closed by the item's Status: counts stay, the button just isn't one. */
.dipi-vote-item__content--closed .dipi-vote-btn {
    cursor: default;
}

.dipi-vote-btn.is-voted {
    transform: scale(1.15);
}

.dipi-vote-btn.dipi-is-loading {
    pointer-events: none;
}

/* --dipi-vote-icon-size is set once on the Vote module's own wrapper (Icon
   Size setting) and cascades down to every item rendered inside it, so it's
   read here rather than passed through per-button. */
.dipi-vote-icon {
    display: inline-flex;
    font-size: var(--dipi-vote-icon-size, 16px);
    line-height: 1;
}

/* Divi icon: .et-pb-icon carries Divi's own large default size. */
.dipi-vote-icon .dipi-vote-icon-font {
    font-size: inherit;
    line-height: 1;
}

.dipi-vote-icon-img {
    display: inline-block;
    width: var(--dipi-vote-icon-size, 16px);
    height: var(--dipi-vote-icon-size, 16px);
    object-fit: contain;
}

/* Same percentage-over-a-bar format as the Results view's own
   .dipi-vote-item__result-* (percentage/count sit in their own row above
   the bar so the track below is always the same length regardless of digit
   count) - a separate class set rather than reusing those classes directly,
   since .dipi-vote-item__result is hidden outright in Vote view and
   Leaderboard specifically restyles it for its background-fill technique;
   sharing the classes would pull this per-button block into both. */
.dipi-vote-progress {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    /* min-width:0 lets a flex item shrink below its content's natural width -
       without it, the bar's own text content would set a floor that keeps
       this from actually reaching the full row width. */
    min-width: 0;
    width: 100%;
}

.dipi-vote-progress__text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.dipi-vote-progress__bar {
    width: 100%;
    height: var(--dipi-vote-bar-height, 8px);
    border-radius: 999px;
    background: var(--dipi-vote-bar-track, #eef1f6);
    overflow: hidden;
}

.dipi-vote-progress__fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--dipi-vote-result-color, linear-gradient(90deg, #6366f1, #4f46e5));
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dipi-vote-percentage {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.dipi-vote-count {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.dipi-vote-btn.is-voted ~ .dipi-vote-progress .dipi-vote-percentage,
.dipi-vote-btn.is-voted ~ .dipi-vote-count {
    color: var(--dipi-vote-voted-text, #4338ca);
}

.dipi-vote-error {
    display: block;
    font-size: 12px;
    color: #dc2626;
    margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .dipi-vote-btn {
        transition: none;
    }

    .dipi-vote-btn:active:not(:disabled) {
        transform: none;
    }

    .dipi-vote-item__result-fill {
        transition: none;
    }

    .dipi-vote-progress__fill {
        transition: none;
    }
}

/*
 * Divi 5 Add Module modal: the Divi Pixel folder tile.
 *
 * Scoped to the folder button only (value="divi-pixel", exact match) so module
 * tiles (button[value^="dipi/"]) keep their own icon colors. Colors come from
 * the picker's theme variables, matching the standard module tiles.
 */
.et-vb-module-picker-option[value="divi-pixel"] {
    background-color: var(--dipi-vb-module-selection-background-color) !important;
    color: var(--dipi-vb-module-selection-text-color) !important;
    font-size: 10px !important;
    padding: 10px 5px !important;
    border-color: transparent !important;
}

.et-vb-module-picker-option[value="divi-pixel"].et-vb-module-picker-option--selected {
    background-color: hsl(from var(--dipi-vb-module-selection-background-color) h s l / 0.9) !important;
    border-color: var(--dipi-vb-module-selection-border-color) !important;
}

.et-vb-module-picker-option[value="divi-pixel"] svg {
    fill: var(--dipi-vb-module-selection-icon-color) !important;
    scale: 0.8;
    stroke: var(--dipi-vb-module-selection-icon-color) !important;
    stroke-width: 0;
}