.embla,
.editor-embla {
position: relative;
} .embla,
.is-editor-preview {
--embla-button-icon-color: var(--wp--custom--brandy--slider--nav-icon-color, #122940);
--embla-button-icon-color-hover: var(--wp--custom--brandy--slider--nav-icon-color-hover, #808890);
--embla-button-background-color: var(--wp--custom--brandy--slider--nav-bg, #ffffff);
--embla-button-background-color-hover: var(--wp--custom--brandy--slider--nav-bg-hover, #eff2f4);
--embla-pagination-bullet-color: var(--wp--custom--brandy--slider--dot-color, #d3dce5);
--embla-pagination-bullet-color-active: var(--wp--custom--brandy--slider--dot-active-color, #122940); --embla-pagination-bullet-track-color: var(
--wp--custom--brandy--slider--dot-track-color,
rgba(0, 0, 0, 0.12)
);
} .embla__controls {
display: flex;
align-items: center;
justify-content: center;
column-gap: var(--embla-controls-gap, 1.2rem);
} .embla__controls .embla__button {
position: relative;
top: auto;
transform: none;
} .embla__controls .embla__button:disabled {
display: inline-flex;
opacity: 0.35;
pointer-events: none;
}
.embla__controls .embla__dots {
margin-top: 0;
}  [data-controls-placement="grouped-bottom"] > .embla__controls {
position: absolute;
inset-inline: 0;
bottom: var(--embla-controls-offset, 3rem);
pointer-events: none;
}
[data-controls-placement="grouped-bottom"] > .embla__controls > * {
pointer-events: auto;
} [data-controls-placement="grouped-below"] > .embla__controls {
margin-top: var(--embla-controls-offset, 2rem);
}
@media screen and (max-width: 767.98px) {
[data-controls-placement="grouped-bottom"] > .embla__controls {
--embla-controls-offset: 2rem;
}
} .embla.embla--static .embla__controls {
display: none;
} .is-editor-preview[data-controls-placement] {
position: relative;
}
.is-editor-preview .embla__dots {
display: flex;
} @media (hover: hover) and (pointer: fine) { [data-controls-reveal="hover"] .embla__buttons .embla__button,
[data-controls-reveal="hover"] > .embla__dots,
[data-controls-reveal="hover"] > .embla__progress,
[data-controls-reveal="hover"] > .embla__controls {
opacity: 0; transition:
opacity var(--embla-reveal-duration, 0.35s) ease,
translate var(--embla-reveal-duration, 0.35s) cubic-bezier(0.4, 0, 0.2, 1);
} [data-controls-reveal="hover"] .embla__buttons .embla__button--prev {
translate: calc(var(--embla-reveal-distance, 1rem) * -1) 0;
}
[data-controls-reveal="hover"] .embla__buttons .embla__button--next {
translate: var(--embla-reveal-distance, 1rem) 0;
}
[data-controls-reveal="hover"] > .embla__dots,
[data-controls-reveal="hover"] > .embla__progress,
[data-controls-reveal="hover"] > .embla__controls {
translate: 0 var(--embla-reveal-distance, 1rem);
} [data-controls-reveal="hover"]:hover .embla__buttons .embla__button,
[data-controls-reveal="hover"]:focus-within .embla__buttons .embla__button,
[data-controls-reveal="hover"]:hover > .embla__dots,
[data-controls-reveal="hover"]:focus-within > .embla__dots,
[data-controls-reveal="hover"]:hover > .embla__progress,
[data-controls-reveal="hover"]:focus-within > .embla__progress,
[data-controls-reveal="hover"]:hover > .embla__controls,
[data-controls-reveal="hover"]:focus-within > .embla__controls {
opacity: 1;
translate: 0 0;
}
} @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
[data-controls-reveal="hover"] .embla__buttons .embla__button,
[data-controls-reveal="hover"] > .embla__dots,
[data-controls-reveal="hover"] > .embla__progress,
[data-controls-reveal="hover"] > .embla__controls {
translate: none;
transition: opacity var(--embla-reveal-duration, 0.35s) ease;
}
} .embla__viewport,
.editor-embla { --embla-shadow-room: 20px;
overflow: hidden !important;
padding: var(--embla-shadow-room);
margin-left: calc(var(--embla-shadow-room) * -1);
width: calc(100% + var(--embla-shadow-room) * 2);
} .embla {
display: flow-root;
} .embla__viewport {
margin-block: calc(var(--embla-shadow-room) * -1);
} .embla.embla--fade-edges .embla__viewport {
--embla-fade-in-from: calc(
var(--embla-fade-room, var(--embla-shadow-room)) * var(--embla-fade-start, 0)
);
--embla-fade-in-to: calc(
(var(--embla-fade-room, var(--embla-shadow-room)) + var(--embla-fade-size, 48px)) *
var(--embla-fade-start, 0)
);
--embla-fade-out-from: calc(
(var(--embla-fade-room, var(--embla-shadow-room)) + var(--embla-fade-size, 48px)) *
var(--embla-fade-end, 0)
);
--embla-fade-out-to: calc(
var(--embla-fade-room, var(--embla-shadow-room)) * var(--embla-fade-end, 0)
);
-webkit-mask-image: linear-gradient(
var(--embla-fade-direction, to right),
transparent var(--embla-fade-in-from),
#000 var(--embla-fade-in-to),
#000 calc(100% - var(--embla-fade-out-from)),
transparent calc(100% - var(--embla-fade-out-to))
);
mask-image: linear-gradient(
var(--embla-fade-direction, to right),
transparent var(--embla-fade-in-from),
#000 var(--embla-fade-in-to),
#000 calc(100% - var(--embla-fade-out-from)),
transparent calc(100% - var(--embla-fade-out-to))
);
} .embla.embla--fade-edges.is-fade-start {
--embla-fade-start: 1;
}
.embla.embla--fade-edges.is-fade-end {
--embla-fade-end: 1;
}
.embla__container,
.editor-embla ul {
display: flex !important;
touch-action: pan-y pinch-zoom;
gap: 0 !important;
max-width: unset !important;
margin-left: calc(var(--embla-gap, 30px) * -1);
flex-wrap: nowrap !important;
}
.wp-block-brandy-testimonials .embla__container {
margin-left: 0;
}
.embla__container:not(.block-editor-block-list__layout) {
user-select: none;
}
.embla__slide,
.editor-embla ul li {
transform: translate3d(0, 0, 0);
min-width: 0;
}
.embla__slide:not(.wp-block-brandy-testimonial-card),
.editor-embla ul li {
flex: 0 0 calc(100% / var(--embla-slides-desktop, 4));
padding-left: var(--embla-gap, 30px);
}
.wp-block-brandy-testimonial-card {
flex: 0 0
calc(
(100% - var(--embla-gap, 30px) * (var(--embla-slides-desktop, 4) - 1)) /
var(--embla-slides-desktop, 4)
);
margin-right: var(--embla-gap, 30px) !important;
}
@media screen and (min-width: 480px) and (max-width: 1023px) {
.embla__slide:not(.wp-block-brandy-testimonial-card),
.editor-embla ul li {
flex: 0 0 calc(100% / var(--embla-slides-tablet, 3));
}
.wp-block-brandy-testimonial-card {
flex: 0 0
calc(
(100% - var(--embla-gap, 30px) * (var(--embla-slides-tablet, 3) - 1)) /
var(--embla-slides-tablet, 3)
);
}
}
@media screen and (max-width: 479px) {
.embla__slide:not(.wp-block-brandy-testimonial-card),
.editor-embla ul li {
flex: 0 0 calc(100% / var(--embla-slides-mobile, 2));
}
.wp-block-brandy-testimonial-card {
flex: 0 0
calc(
(100% - var(--embla-gap, 30px) * (var(--embla-slides-mobile, 2) - 1)) /
var(--embla-slides-mobile, 2)
);
}
}  .embla.embla--axis-y-desktop {
--embla-fade-direction: to bottom;
--embla-fade-room: 0px;
}
.embla.embla--axis-y-desktop .embla__container { margin-left: 0;
width: 100%;
}
.embla.embla--axis-y-desktop .embla__viewport {
height: var(--embla-viewport-height, 600px); padding-block: 0;
margin-block: 0;
}
.embla.embla--axis-y-desktop .embla__container {
flex-direction: column;
margin-top: calc(var(--embla-gap, 30px) * -1);
height: 100%;
touch-action: pan-x pinch-zoom;
}
.embla.embla--axis-y-desktop .embla__container > * {
flex: 0 0 calc(100% / var(--embla-slides-desktop, 4));
padding-left: 0;
padding-top: var(--embla-gap, 30px);
}
@media screen and (min-width: 480px) and (max-width: 1023px) { .embla.embla--axis-y-tablet {
--embla-fade-direction: to bottom;
--embla-fade-room: 0px;
}
.embla.embla--axis-y-tablet .embla__container { margin-left: 0;
width: 100%;
}
.embla.embla--axis-y-tablet .embla__viewport {
height: var(--embla-viewport-height, 600px); padding-block: 0;
margin-block: 0;
}
.embla.embla--axis-y-tablet .embla__container {
flex-direction: column;
margin-top: calc(var(--embla-gap, 30px) * -1);
height: 100%;
touch-action: pan-x pinch-zoom;
}
.embla.embla--axis-y-tablet .embla__container > * {
flex: 0 0 calc(100% / var(--embla-slides-tablet, 3));
padding-left: 0;
padding-top: var(--embla-gap, 30px);
} .embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) {
--embla-fade-direction: to right;
--embla-fade-room: var(--embla-shadow-room, 20px);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) .embla__viewport {
height: auto; padding-block: var(--embla-shadow-room);
margin-block: calc(var(--embla-shadow-room) * -1);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) .embla__container {
flex-direction: row;
margin-top: 0;
margin-left: calc(var(--embla-gap, 30px) * -1);
height: auto;
touch-action: pan-y pinch-zoom;
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) .embla__container > * {
padding-top: 0;
padding-left: var(--embla-gap, 30px);
}
}
@media screen and (max-width: 479px) { .embla.embla--axis-y-mobile {
--embla-fade-direction: to bottom;
--embla-fade-room: 0px;
}
.embla.embla--axis-y-mobile .embla__container { margin-left: 0;
width: 100%;
}
.embla.embla--axis-y-mobile .embla__viewport {
height: var(--embla-viewport-height, 600px); padding-block: 0;
margin-block: 0;
}
.embla.embla--axis-y-mobile .embla__container {
flex-direction: column;
margin-top: calc(var(--embla-gap, 30px) * -1);
height: 100%;
touch-action: pan-x pinch-zoom;
}
.embla.embla--axis-y-mobile .embla__container > * {
flex: 0 0 calc(100% / var(--embla-slides-mobile, 2));
padding-left: 0;
padding-top: var(--embla-gap, 30px);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) {
--embla-fade-direction: to right;
--embla-fade-room: var(--embla-shadow-room, 20px);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) .embla__viewport {
height: auto; padding-block: var(--embla-shadow-room);
margin-block: calc(var(--embla-shadow-room) * -1);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) .embla__container {
flex-direction: row;
margin-top: 0;
margin-left: calc(var(--embla-gap, 30px) * -1);
height: auto;
touch-action: pan-y pinch-zoom;
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) .embla__container > * {
padding-top: 0;
padding-left: var(--embla-gap, 30px);
}
} .embla.embla--axis-y-desktop .embla__buttons .embla__button--prev,
.embla.embla--axis-y-desktop > .embla__button--prev {
top: calc(var(--embla-button-height, 50px) / 2 * -1);
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.embla.embla--axis-y-desktop .embla__buttons .embla__button--next,
.embla.embla--axis-y-desktop > .embla__button--next {
top: auto;
bottom: calc(var(--embla-button-height, 50px) / 2 * -1);
left: 50%;
right: auto;
transform: translateX(-50%);
}
.embla.embla--axis-y-desktop .embla__button svg {
transform: rotate(90deg);
}
.embla.embla--axis-y-desktop > .embla__dots {
position: absolute;
top: 50%;
right: calc(var(--embla-pagination-bullet-size, 12px) * -1 - 12px);
flex-direction: column;
margin-top: 0;
transform: translateY(-50%);
} @media (hover: hover) and (pointer: fine) {
.embla.embla--axis-y-desktop[data-controls-reveal="hover"]
.embla__buttons
.embla__button--prev {
translate: 0 calc(var(--embla-reveal-distance, 1rem) * -1);
}
.embla.embla--axis-y-desktop[data-controls-reveal="hover"]
.embla__buttons
.embla__button--next {
translate: 0 var(--embla-reveal-distance, 1rem);
}
.embla.embla--axis-y-desktop[data-controls-reveal="hover"] > .embla__dots {
translate: var(--embla-reveal-distance, 1rem) 0;
}
.embla.embla--axis-y-desktop[data-controls-reveal="hover"]:hover
> .embla__dots,
.embla.embla--axis-y-desktop[data-controls-reveal="hover"]:focus-within
> .embla__dots {
translate: 0 0;
}
}
@media screen and (min-width: 480px) and (max-width: 1023px) {
.embla.embla--axis-y-tablet .embla__buttons .embla__button--prev,
.embla.embla--axis-y-tablet > .embla__button--prev {
top: calc(var(--embla-button-height, 50px) / 2 * -1);
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.embla.embla--axis-y-tablet .embla__buttons .embla__button--next,
.embla.embla--axis-y-tablet > .embla__button--next {
top: auto;
bottom: calc(var(--embla-button-height, 50px) / 2 * -1);
left: 50%;
right: auto;
transform: translateX(-50%);
}
.embla.embla--axis-y-tablet .embla__button svg {
transform: rotate(90deg);
}
.embla.embla--axis-y-tablet > .embla__dots {
position: absolute;
top: 50%;
right: calc(var(--embla-pagination-bullet-size, 12px) * -1 - 12px);
flex-direction: column;
margin-top: 0;
transform: translateY(-50%);
} .embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) .embla__buttons .embla__button--prev,
.embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) > .embla__button--prev {
top: 50%;
bottom: auto;
left: -20px;
right: auto;
transform: translateY(-50%);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) .embla__buttons .embla__button--next,
.embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) > .embla__button--next {
top: 50%;
bottom: auto;
left: auto;
right: -20px;
transform: translateY(-50%);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) .embla__button svg {
transform: none;
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-tablet) > .embla__dots {
position: static;
flex-direction: row;
margin-top: 20px;
transform: none;
}
}
@media screen and (max-width: 479px) {
.embla.embla--axis-y-mobile .embla__buttons .embla__button--prev,
.embla.embla--axis-y-mobile > .embla__button--prev {
top: -20px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.embla.embla--axis-y-mobile .embla__buttons .embla__button--next,
.embla.embla--axis-y-mobile > .embla__button--next {
top: auto;
bottom: -20px;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.embla.embla--axis-y-mobile .embla__button svg {
transform: rotate(90deg);
}
.embla.embla--axis-y-mobile > .embla__dots {
position: absolute;
top: 50%;
right: calc(var(--embla-pagination-bullet-size, 12px) * -1 - 8px);
flex-direction: column;
margin-top: 0;
transform: translateY(-50%);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) .embla__buttons .embla__button--prev,
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) > .embla__button--prev {
top: 50%;
bottom: auto;
left: -20px;
right: auto;
transform: translateY(-50%);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) .embla__buttons .embla__button--next,
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) > .embla__button--next {
top: 50%;
bottom: auto;
left: auto;
right: -20px;
transform: translateY(-50%);
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) .embla__button svg {
transform: none;
}
.embla.embla--axis-y-desktop:not(.embla--axis-y-mobile) > .embla__dots {
position: static;
flex-direction: row;
margin-top: 20px;
transform: none;
}
} .embla--no-loop
.embla__container
> .wp-block-brandy-testimonial-card:last-child {
margin-right: 0 !important;
} .embla.embla--static .embla__dots,
.embla.embla--static .embla__progress {
display: none;
}
.embla__buttons {
display: flex;
gap: 0.6rem;
align-items: center;
}
.embla__button {
cursor: pointer;
display: inline-flex;
width: var(--embla-button-width, 50px);
height: var(--embla-button-height, 50px); background: var(--embla-nav-bg-color, var(--embla-button-background-color, #ffffff));
color: var(--embla-nav-icon-color, var(--embla-button-color, #122940));
border: var(--embla-button-border, none);
border-radius: var(--embla-button-radius, 50%);
box-shadow: var(--embla-button-shadow, 0px 10px 25px 0px #377e620d);
align-items: center;
justify-content: center;
transition: background var(--theme-component-transition-duration, 0.2s)
ease-in-out,
border var(--theme-component-transition-duration, 0.2s) ease-in-out,
box-shadow var(--theme-component-transition-duration, 0.2s) ease-in-out;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.embla__button:disabled {
display: none;
}
.embla__button__svg {
width: var(--embla-button-icon-width, 14px);
height: var(--embla-button-icon-height, 14px);
}
.embla__button__svg path {
stroke: var(--embla-nav-icon-color, var(--embla-button-icon-color, #808890));
fill: var(--embla-button-icon-fill-color, transparent);
transition: all ease-in-out var(--theme-component-transition-duration, 0.2s);
}
.embla__button:hover {
background: var(
--embla-nav-bg-color-hover,
var(--embla-button-background-color-hover, #edf3f9)
);
box-shadow: var(--embla-button-shadow-hover, 0px 10px 25px 0px #12294026);
border: var(--embla-button-border-hover, none);
color: var(
--embla-nav-icon-color-hover,
var(--embla-button-color-hover, #122940)
);
}
.embla__button:hover .embla__button__svg path {
stroke: var(
--embla-nav-icon-color-hover,
var(--embla-button-icon-color-hover, #122940)
);
fill: var(--embla-button-icon-fill-color-hover, transparent);
}
.embla__button--prev {
left: calc(var(--embla-button-width, 50px) / 2 * -1);
}
.embla__button--next {
right: calc(var(--embla-button-width, 50px) / 2 * -1);
}
@media screen and (max-width: 783px) {
.embla__button--prev {
left: -20px;
}
.embla__button--next {
right: -20px;
}
} .embla__dots {
display: var(--embla-pagination-display, none);
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 40px;
gap: var(--embla-pagination-bullet-spacing, 10px);
}
.embla__dot {
appearance: none; background-color: var(
--embla-dots-color,
var(--embla-pagination-bullet-color, #d3dce5)
);
touch-action: manipulation;
display: inline-flex;
text-decoration: none;
cursor: pointer;
border: 0;
padding: 0;
margin: 0;
width: var(--embla-pagination-bullet-size, 15px);
height: var(--embla-pagination-bullet-size, 15px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.embla__dot--selected {
background-color: var(
--embla-dots-color-active,
var(--embla-pagination-bullet-color-active, #122940)
);
}
.embla__progress {
display: var(--embla-scrollbar-display, none);
border-radius: 10px;
background-color: var(--embla-scrollbar-bg-color);
position: relative;
height: 9px;
justify-self: flex-end;
align-self: center;
width: 100%;
overflow: hidden; margin-top: 40px;
}
.embla__progress__bar {
background-color: var(--embla-scrollbar-drag-bg-color);
position: absolute;
width: 100%;
top: 0;
bottom: 0;
left: -100%;
border-radius: 10px;
} .embla__dots--fraction {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
font-size: var(--embla-pagination-fraction-size, 16px);
letter-spacing: 0.05em; color: var(
--embla-dots-color-active,
var(--embla-pagination-bullet-color-active, #122940)
);
} @media (min-width: 768px) { .embla[data-dim-inactive].is-dim-ready
.embla__container
> *:not(.is-center) {
opacity: var(--embla-slide-dim-opacity, 0.2);
}
}