.cinza-slider,
.cinza-slider .flickity-viewport {
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;

}

.cinza-slider .static-cell,
.cinza-slider .slider-cell-content,
.cinza-slider .slider-cell-link {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cinza-slider .static-cell {
    z-index: 1;
}

.cinza-slider.is-draggable .static-cell {
	pointer-events: none;
}

.cinza-slider .slider-cell {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.cinza-slider .slider-cell>picture,
.cinza-slider .slider-cell .slider-cell-image {
    width: 100%;
	height: 100%;
    object-position: center;
    display: block;
}

.cinza-slider .slider-cell-content-inner {
    position: relative;
    z-index: 1;
}

.cinza-slider .slider-cell-link {
    z-index: 2;
}

.cinza-slider .slider-cell-content,
.cinza-slider .flickity-prev-next-button, 
.cinza-slider .flickity-page-dots {
    z-index: 2;
}

.cinza-slider .flickity-prev-next-button {
    color: #FFF;
    background: transparent;
    transition: 0.3s all ease-in-out;
}

.cinza-slider .flickity-prev-next-button:hover {
	opacity: 1;
    color: #FFF;
    background: transparent;
}

.cinza-slider .flickity-page-dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 0%);
    width: auto;
    transition: 0.3s all ease-in-out;
}

.cinza-slider .flickity-page-dots .dot {
	opacity: 1;
    background: rgba(255, 255, 255, 0.5);
    transition: 0.3s all ease-in-out;
}

.cinza-slider .flickity-page-dots .dot:hover, 
.cinza-slider .flickity-page-dots .dot.is-selected {
    background: #FFF;
}

a.slider-cell-link {
	transition: 0.3s all ease-in-out;
}

.cinza-slider .slider-cell[aria-hidden=true] a[href],
.cinza-slider .slider-cell[aria-hidden=true] area[href], 
.cinza-slider .slider-cell[aria-hidden=true] input:not([disabled]), 
.cinza-slider .slider-cell[aria-hidden=true] select:not([disabled]), 
.cinza-slider .slider-cell[aria-hidden=true] textarea:not([disabled]), 
.cinza-slider .slider-cell[aria-hidden=true] button:not([disabled]), 
.cinza-slider .slider-cell[aria-hidden=true] [tabindex]:not([disabled]), 
.cinza-slider .slider-cell[aria-hidden=true] [contenteditable=true]:not([disabled]){
    visibility: hidden;
}

/* No focus ring on mouse or touch use, including Flickity's own blue one. */
.cinza-slider .flickity-button:focus {
    box-shadow: none;
}

/* Keyboard focus rings (WCAG 2.4.7, since 2.1.0). A white ring with a dark edge shows on
   light and dark slides alike. They show only after a key press: frontend-script.js adds
   .cinza-keyboard to <html> on keydown and removes it on any mouse or touch press, because
   some browsers (Arc, Safari) match :focus-visible after clicks or on page load. */
.cinza-keyboard .cinza-slider .flickity-button:focus-visible,
.cinza-keyboard .cinza-slider .flickity-page-dots:focus-visible,
.cinza-keyboard .cinza-slider .flickity-page-dots .dot:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #1a1a1a !important;
}

/* The slides paint over anything drawn on the slider box itself, so its ring is an overlay. */
.cinza-slider:focus-visible {
    outline: none !important;
}

.cinza-keyboard .cinza-slider:focus-visible::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    border-radius: inherit;
    box-shadow: inset 0 0 0 3px #1a1a1a, inset 0 0 0 6px #fff, inset 0 0 0 9px #1a1a1a;
    pointer-events: none;
}

.cinza-keyboard .cinza-slider a.slider-cell-link:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: -6px;
    box-shadow: inset 0 0 0 9px #1a1a1a; /* dark, white, dark from the edge in */
}

@media (forced-colors: active) {
    .cinza-keyboard .cinza-slider:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px;
    }

    .cinza-keyboard .cinza-slider .flickity-button:focus-visible,
    .cinza-keyboard .cinza-slider .flickity-page-dots:focus-visible,
    .cinza-keyboard .cinza-slider a.slider-cell-link:focus-visible {
        outline-color: Highlight !important;
    }
}

/* Autoplay control. Shown on every autoplaying slider unless hidden in its settings. */
.cinza-slider[data-cinza-play-pause="true"] {
    position: relative;
}

.cinza-slider .cinza-slider-play-pause {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
    touch-action: manipulation;
}

.cinza-slider .cinza-slider-play-pause[hidden] {
    display: none;
}

.cinza-slider .cinza-slider-play-pause:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

.cinza-keyboard .cinza-slider .cinza-slider-play-pause:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.8);
}

.cinza-slider .cinza-slider-play-pause svg {
    display: block;
    width: 14px;
    height: 14px;
    fill: currentColor;
    pointer-events: none;
}

.cinza-slider .cinza-slider-play-pause[data-cinza-state="playing"] .cinza-play-icon,
.cinza-slider .cinza-slider-play-pause[data-cinza-state="stopped"] .cinza-pause-icon {
    display: none;
}

@media (forced-colors: active) {
    .cinza-slider .cinza-slider-play-pause {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .cinza-keyboard .cinza-slider .cinza-slider-play-pause:focus-visible {
        outline-color: Highlight;
    }
}