/*
 * Roft Builder: základní frontend styly (úkol B3, doplňky B9).
 * Rozvržení (sekce, sloupce, vnitřní sekce), vrstvy pozadí (parallax, video, překryv), tvarové oddělovače,
 * výchozí mezery mezi sloupci podle tokenu layout.gutter, viditelnost podle zařízení, vstupní animace,
 * přichycené sekce. Zařízení odpovídají Style\Breakpoints:
 *   desktop >= 992 px, tablet 768–991.98 px, mobil <= 767.98 px.
 */

/* ---------- Sekce ---------- */
.rb-w-section {
	position: relative;
}

/*
 * Větší mezera mezi sloupci (g-4, g-5, vlastní --bs-gutter-x na .rb-row, i ve vnitřní sekci) zvětší záporné okraje
 * řádku, ale kontejner si drží vlastní vnitřní okraj 12 px. Řádek pak vyčnívá z kontejneru a na mobilu vznikne
 * vodorovný posuvník. Sekce proto vodorovný přesah ořízne: vyčnívá jen prázdný vnitřní okraj krajních sloupců
 * (pozadí sloupce je až na .rb-column-inner), obsah zůstává na místě a rozvržení na širokém okně se nemění.
 * clip na rozdíl od hidden nevytváří rolovací kontejner, takže svislý přesah (rozbalovací menu) i position: sticky
 * fungují dál. Nulová specificita, aby přednost měl control sekce „Přetečení obsahu“.
 */
:where(.rb-w-section) {
	overflow-x: clip;
}

.rb-w-section > .rb-container,
.rb-w-inner_section > .rb-row {
	position: relative;
}

/* Na výšku okna: výška platí pro řádek, aby fungovalo svislé zarovnání sloupců. */
.rb-w-section.rb-section-fit-screen > .rb-container > .rb-row,
.rb-w-inner_section.rb-section-fit-screen > .rb-row {
	min-height: 100vh;
	min-height: 100svh;
}

/* Roztažená sekce: šířku a posun dopočítá builder.js podle skutečné šířky okna (bez posuvníku). */
.rb-section-stretched {
	max-width: none;
}

/* Přes obsah pod sebou (např. průhledná hlavička nad hero obrázkem). */
.rb-section-absolute {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1020;
}

/* Přichycení při rolování (třídu a odsazení nastavuje builder.js). */
.rb-sticky-active {
	position: fixed !important;
	top: var(--rb-sticky-top, 0px);
	left: 0;
	right: 0;
	z-index: 1030;
}

[data-rb-scroll] {
	transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

/*
 * Výchozí mezera mezi sloupci, když se zařízení liší (LayoutWidget::gapClasses): každá třída platí jen
 * pro rozsah šířek svého zařízení, takže přebije Bootstrap třídu menšího zařízení (g-2 platí i výš)
 * a nekoliduje s třídami většího zařízení (g-lg-3). Řádek bez tříd má mezeru z GlobalStyles (--rb-gutter).
 */
@media (max-width: 767.98px) {
	.rb-row.rb-g-xs-default {
		--bs-gutter-x: var(--rb-gutter, 1.5rem);
		--bs-gutter-y: 0;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.rb-row.rb-g-md-default {
		--bs-gutter-x: var(--rb-gutter, 1.5rem);
		--bs-gutter-y: 0;
	}
}

@media (min-width: 992px) {
	.rb-row.rb-g-lg-default {
		--bs-gutter-x: var(--rb-gutter, 1.5rem);
		--bs-gutter-y: 0;
	}
}

/* ---------- Sloupec ---------- */
.rb-w-column {
	display: flex;
	min-width: 0;
}

.rb-column-inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	width: 100%;
	min-width: 0;
	gap: var(--rb-widget-gap, 20px);
}

/*
 * Vlastní šířka sloupce (GAP, fáze 4; Column width = 'custom', proměnná --rb-col-w z controlu width_custom):
 * třída rb-col-{xs|md|lg}-custom platí jen v rozsahu šířek svého zařízení, takže nekoliduje s Bootstrap
 * třídami ostatních zařízení. Divi sloupce 1/5, 2/5, 3/5 a vlastní poměry.
 */
@media (max-width: 767.98px) {
	.rb-w-column.rb-col-xs-custom {
		flex: 0 0 auto;
		width: var(--rb-col-w, auto);
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.rb-w-column.rb-col-md-custom {
		flex: 0 0 auto;
		width: var(--rb-col-w, auto);
	}
}

@media (min-width: 992px) {
	.rb-w-column.rb-col-lg-custom {
		flex: 0 0 auto;
		width: var(--rb-col-w, auto);
	}
}

/* Prvky ve sloupci zabírají celou šířku; nulová specificita, aby je přepsala vlastní šířka prvku (_width). */
:where(.rb-column-inner) > :where(.rb-el) {
	width: 100%;
	min-width: 0;
}

/*
 * Řazení prvků „Vždy pod sebou“ (Column content_flow = stack, BX): jako bloky v Divi. Prvky se roztahují na šířku
 * sloupce (záporný boční okraj je rozšíří), max. šířka nepustí další prvek vedle, záporný horní okraj vytáhne
 * další prvek. Vlastní šířka prvku (_width) má přednost.
 */
.rb-column-inner.rb-flow-stack {
	flex-direction: column;
	flex-wrap: nowrap;
}

:where(.rb-column-inner.rb-flow-stack) > :where(.rb-el) {
	/* šířka sloupce mínus okraje (i záporné), jako blok: s max. šířkou a margin auto zůstane max. šířka */
	width: auto;
	width: -moz-available;
	width: -webkit-fill-available;
	width: stretch;
}

/*
 * Prvek bez dat (např. počítadlo s empty_behavior, BX) vypíše značku a CSS skryje svůj sloupec nebo sekci.
 * Sloupec jen přímý (prvek přímo ve sloupci), sekce i vnitřní sekce nejbližší i nadřazené.
 */
.rb-w-column:has(> .rb-column-inner > .rb-el > .rb-empty-hide-column),
.rb-w-section:has(.rb-empty-hide-section),
.rb-w-inner_section:has(.rb-empty-hide-section) {
	display: none !important;
}

/* ---------- Vrstvy pozadí ---------- */
.rb-bg-layered {
	position: relative;
}

.rb-bg-video,
.rb-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
}

.rb-bg-video {
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.rb-bg-video video.rb-bg-video-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* iframe (YouTube, Vimeo) přes celou plochu se zachováním 16:9; přesné rozměry dopočítá builder.js. */
.rb-bg-video iframe.rb-bg-video-el {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	max-width: none;
}

/* Obsah nad vrstvami; nulová specificita, aby šel přepsat z-index prvku (_z_index). */
:where(.rb-bg-layered) > :where(:not(.rb-bg-video):not(.rb-bg-overlay):not(.rb-bg-parallax):not(.rb-shape)) {
	position: relative;
	z-index: 1;
}

/*
 * Parallax pozadí (LayoutWidget, background_parallax = js): obrázek pozadí je na vnitřní vrstvě, která
 * přesahuje o --rb-parallax-range nahoru i dolů a builder.js ji při rolování posouvá (translate3d).
 * Bez JS, na dotyku a se sníženým pohybem zůstane vrstva v klidu ve velikosti prvku.
 */
.rb-bg-parallax {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

.rb-bg-parallax-img {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--rb-parallax-range, 0px));
	bottom: calc(-1 * var(--rb-parallax-range, 0px));
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.rb-parallax-on > .rb-bg-parallax-img {
	will-change: transform;
}

/*
 * Parallax jako Divi (background_parallax_anchor = divi, BX): vrstva je o rozsah (30 % výšky okna) vyšší než
 * prvek a ukotvená dole; builder.js ji posouvá o 0,3 × (rolování + výška okna − horní hrana prvku), takže
 * při načtení začíná obrázek přesně u horní hrany prvku. Bez parallaxu (dotyk, snížený pohyb, bez JS) zůstane
 * první snímek Divi: vrstva stejně vysoká (prvek + 30vh), obrázek začíná u horní hrany. Pozice obrázku z controlu pozadí (specificita 0,3,0) má přednost.
 */
.rb-parallax-divi > .rb-bg-parallax-img {
	top: 0;
	bottom: auto;
	height: calc(100% + 30vh);
	background-position: center top;
}

.rb-parallax-divi.rb-parallax-on > .rb-bg-parallax-img {
	top: calc(-1 * var(--rb-parallax-range, 0px));
	bottom: 0;
	height: auto;
}


/* Pevné pozadí (background_parallax = fixed); dotyková zařízení ho neumí (iOS), tam se vypne. */
.rb-bg-fixed {
	background-attachment: fixed;
}

@media (hover: none) and (pointer: coarse) {
	.rb-bg-fixed {
		background-attachment: scroll;
	}
}

/* ---------- Tvarové oddělovače sekce (Section::SHAPES) ---------- */
.rb-shape {
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	direction: ltr;
	z-index: 0;
	pointer-events: none;
}

.rb-shape-top {
	top: -1px;
}

.rb-shape-bottom {
	bottom: -1px;
	transform: rotate(180deg);
}

.rb-shape svg {
	display: block;
	position: relative;
	left: 50%;
	width: calc(100% + 1.3px);
	height: 50px;
	transform: translateX(-50%);
}

.rb-shape-flip svg {
	transform: translateX(-50%) rotateY(180deg);
}

.rb-shape-fill {
	fill: #fff;
}

.rb-shape-front {
	z-index: 2;
}

/* ---------- Viditelnost podle zařízení ---------- */
@media (min-width: 992px) {
	.rb-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.rb-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767.98px) {
	.rb-hide-mobile {
		display: none !important;
	}
}

/* ---------- Animace při zobrazení ----------
 * Prvek se skryje jen se zapnutým JS (třída rb-js z headTags) a mimo editor (prvky s data-rb-id).
 * builder.js přidá rb-animated, když prvek vjede do okna.
 * Délka --rb-anim-dur a intenzita --rb-anim-i (0–1) jdou z Rendereru inline. Jako Divi: posun = 2 × intenzita
 * v % velikosti prvku, přiblížení = měřítko 1 − intenzita, otočení = 90° × intenzita.
 */
.rb-js .rb-anim:not(.rb-animated):not([data-rb-id]) {
	opacity: 0;
}

.rb-anim.rb-animated {
	animation-duration: var(--rb-anim-dur, .8s);
	/* --rb-anim-ease: control _animation_easing (GAP); bez něj dosavadní křivka */
	animation-timing-function: var(--rb-anim-ease, cubic-bezier(.2, .65, .3, 1));
	animation-fill-mode: both;
	animation-delay: var(--rb-delay, 0ms);
}

.rb-anim-fade-in.rb-animated { animation-name: rb-fade-in; }
.rb-anim-fade-up.rb-animated { animation-name: rb-fade-up; }
.rb-anim-fade-down.rb-animated { animation-name: rb-fade-down; }
.rb-anim-fade-left.rb-animated { animation-name: rb-fade-left; }
.rb-anim-fade-right.rb-animated { animation-name: rb-fade-right; }
.rb-anim-zoom-in.rb-animated { animation-name: rb-zoom-in; }

.rb-anim-fade.rb-animated,
.rb-anim-slide-bottom.rb-animated,
.rb-anim-slide-top.rb-animated,
.rb-anim-slide-left.rb-animated,
.rb-anim-slide-right.rb-animated,
.rb-anim-zoom.rb-animated,
.rb-anim-flip.rb-animated { animation-name: rb-enter; }
.rb-anim-bounce.rb-animated { animation-name: rb-bounce; }

/* GAP (fáze 4): směrové varianty Divi. Rozložení (fold) = otočení kolem hrany, odraz (bounce) = příjezd s dokmitem. */
.rb-anim-fold-top.rb-animated,
.rb-anim-fold-bottom.rb-animated,
.rb-anim-fold-left.rb-animated,
.rb-anim-fold-right.rb-animated { animation-name: rb-enter; }
.rb-anim-fold-top { transform-origin: top; --rb-anim-from: perspective(2000px) rotateX(calc(var(--rb-anim-i, .5) * -90deg)); }
.rb-anim-fold-bottom { transform-origin: bottom; --rb-anim-from: perspective(2000px) rotateX(calc(var(--rb-anim-i, .5) * 90deg)); }
.rb-anim-fold-left { transform-origin: left; --rb-anim-from: perspective(2000px) rotateY(calc(var(--rb-anim-i, .5) * 90deg)); }
.rb-anim-fold-right { transform-origin: right; --rb-anim-from: perspective(2000px) rotateY(calc(var(--rb-anim-i, .5) * -90deg)); }
.rb-anim-bounce-top.rb-animated { animation-name: rb-bounce-dir; --rb-bounce-x: 0; --rb-bounce-y: -1; }
.rb-anim-bounce-bottom.rb-animated { animation-name: rb-bounce-dir; --rb-bounce-x: 0; --rb-bounce-y: 1; }
.rb-anim-bounce-left.rb-animated { animation-name: rb-bounce-dir; --rb-bounce-x: -1; --rb-bounce-y: 0; }
.rb-anim-bounce-right.rb-animated { animation-name: rb-bounce-dir; --rb-bounce-x: 1; --rb-bounce-y: 0; }

@keyframes rb-bounce-dir {
	from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0% { opacity: 0; transform: translate3d(calc(var(--rb-bounce-x) * 200px), calc(var(--rb-bounce-y) * 200px), 0); }
	60% { transform: translate3d(calc(var(--rb-bounce-x) * -25px), calc(var(--rb-bounce-y) * -25px), 0); }
	75% { transform: translate3d(calc(var(--rb-bounce-x) * 10px), calc(var(--rb-bounce-y) * 10px), 0); }
	90% { transform: translate3d(calc(var(--rb-bounce-x) * -5px), calc(var(--rb-bounce-y) * -5px), 0); }
	to { opacity: 1; transform: none; }
}

.rb-anim-slide-bottom { --rb-anim-from: translate3d(0, calc(var(--rb-anim-i, .5) * 200%), 0); }
.rb-anim-slide-top { --rb-anim-from: translate3d(0, calc(var(--rb-anim-i, .5) * -200%), 0); }
.rb-anim-slide-left { --rb-anim-from: translate3d(calc(var(--rb-anim-i, .5) * -200%), 0, 0); }
.rb-anim-slide-right { --rb-anim-from: translate3d(calc(var(--rb-anim-i, .5) * 200%), 0, 0); }
.rb-anim-zoom { --rb-anim-from: scale3d(calc(1 - var(--rb-anim-i, .5)), calc(1 - var(--rb-anim-i, .5)), 1); }
.rb-anim-flip { --rb-anim-from: perspective(2000px) rotateX(calc(var(--rb-anim-i, .5) * 90deg)); }

@keyframes rb-enter {
	from { opacity: 0; transform: var(--rb-anim-from, none); }
	to { opacity: 1; transform: none; }
}

@keyframes rb-bounce {
	from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0% { opacity: 0; transform: scale3d(.3, .3, .3); }
	20% { transform: scale3d(1.1, 1.1, 1.1); }
	40% { transform: scale3d(.9, .9, .9); }
	60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80% { transform: scale3d(.97, .97, .97); }
	to { opacity: 1; transform: none; }
}

@keyframes rb-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes rb-fade-up {
	from { opacity: 0; transform: translate3d(0, 40px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes rb-fade-down {
	from { opacity: 0; transform: translate3d(0, -40px, 0); }
	to { opacity: 1; transform: none; }
}

/* Zleva = prvek přijíždí z levé strany. */
@keyframes rb-fade-left {
	from { opacity: 0; transform: translate3d(-40px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes rb-fade-right {
	from { opacity: 0; transform: translate3d(40px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes rb-zoom-in {
	from { opacity: 0; transform: scale3d(.85, .85, .85); }
	to { opacity: 1; transform: none; }
}

/* ---------- Nekonečná animace (GAP, fáze 4: _loop_animation => rb-loopfx rb-loopfx-{typ}) ----------
 * Délka --rb-loopfx-dur (výchozí 3 s), vzdálenost --rb-loopfx-dist (výchozí 15 px). Animuje transform, takže se skládá
 * s posunem, měřítkem a otočením prvku (samostatné vlastnosti translate, scale, rotate).
 */
.rb-loopfx {
	animation: rb-loopfx var(--rb-loopfx-dur, 3s) ease-in-out infinite;
}

.rb-loopfx-float-up { --rb-loopfx-to: translate3d(0, calc(-1 * var(--rb-loopfx-dist, 15px)), 0); }
.rb-loopfx-float-down { --rb-loopfx-to: translate3d(0, var(--rb-loopfx-dist, 15px), 0); }
.rb-loopfx-float-left { --rb-loopfx-to: translate3d(calc(-1 * var(--rb-loopfx-dist, 15px)), 0, 0); }
.rb-loopfx-float-right { --rb-loopfx-to: translate3d(var(--rb-loopfx-dist, 15px), 0, 0); }

@keyframes rb-loopfx {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: var(--rb-loopfx-to, none); }
}

@media (prefers-reduced-motion: reduce) {
	.rb-js .rb-anim:not(.rb-animated):not([data-rb-id]) {
		opacity: 1;
	}

	.rb-anim.rb-animated {
		animation: none;
	}

	.rb-loopfx {
		animation: none;
	}

	[data-rb-scroll] {
		transition: none;
	}
}

/* ---------- Efekty GAP (fáze 4): třídy přidává Renderer::effectClasses podle nastavených controlů ---------- */
.rb-translate-fx {
	translate: var(--rb-tx, 0px) var(--rb-ty, 0px);
}

.rb-filter-fx {
	filter: opacity(var(--rb-f-op, 100%)) brightness(var(--rb-f-bri, 100%)) contrast(var(--rb-f-con, 100%))
		saturate(var(--rb-f-sat, 100%)) grayscale(var(--rb-f-gray, 0%)) blur(var(--rb-f-blur, 0px));
}

/* Přechod pro změny při najetí (Divi: 300 ms ease); u sloupce i pro .rb-column-inner (pozadí, rámeček, stín). */
.rb-hover-fx,
.rb-w-column.rb-hover-fx > .rb-column-inner {
	transition-property: translate, scale, rotate, filter, opacity, background-color, border-color, box-shadow, color;
	transition-duration: var(--rb-hover-dur, 300ms);
	transition-timing-function: ease;
}

/* ---------- Odkaz celého prvku (GAP, fáze 4: _link => <a class="rb-link-overlay"> přes celý prvek) ---------- */
:where(.rb-has-link) {
	position: relative;
}

.rb-link-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	border-radius: inherit;
}

.rb-link-overlay:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Proměnné transformací, filtrů a přechodů z controlů GAP (_translate_*, _filter_*, _opacity, _hover_*, _loop_*,
 * _animation_easing, width_custom) se nedědí: prvek bez vlastní hodnoty nepřevezme posun nebo filtr rodiče.
 */
@property --rb-tx { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --rb-ty { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --rb-f-op { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --rb-f-bri { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --rb-f-con { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --rb-f-sat { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --rb-f-gray { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --rb-f-blur { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --rb-hover-dur { syntax: '<time>'; inherits: false; initial-value: 300ms; }
@property --rb-loopfx-dur { syntax: '<time>'; inherits: false; initial-value: 3s; }
@property --rb-loopfx-dist { syntax: '<length>'; inherits: false; initial-value: 15px; }
@property --rb-anim-ease { syntax: '*'; inherits: false; }
@property --rb-col-w { syntax: '*'; inherits: false; }

/* ---------- Hlášky v editoru (neznámý prvek, chyba, nepovolené vnoření, chybějící šablona) ---------- */
.rb-notice,
.rb-template-missing {
	padding: 12px 16px;
	border: 1px dashed #dc3545;
	border-radius: 4px;
	background: rgba(220, 53, 69, .06);
	color: #b02a37;
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Vysouvací panel (sekce s nastavením „Vysouvací panel“): skrytý u okraje okna, otevře ho odkaz na kotvu sekce. */
.rb-panel {
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1060;
	width: min(var(--rb-panel-w, 520px), 100vw);
	max-width: 100vw;
	margin: 0 !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: #fff;
	box-shadow: -16px 0 48px rgba(0, 0, 0, .12);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .35s ease, visibility 0s linear .35s;
}

.rb-panel-start {
	right: auto;
	left: 0;
	box-shadow: 16px 0 48px rgba(0, 0, 0, .12);
	transform: translateX(-100%);
}

.rb-panel.is-open {
	transform: none;
	visibility: visible;
	transition: transform .35s ease, visibility 0s;
}

.rb-panel:focus {
	outline: none;
}

.rb-panel-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f3f4f6;
	color: #111827;
	cursor: pointer;
}

.rb-panel-close > span::before,
.rb-panel-close > span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 12px;
	width: 16px;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transform: rotate(45deg);
}

.rb-panel-close > span::after {
	transform: rotate(-45deg);
}

.rb-panel-close:hover {
	background: #e5e7eb;
}

.rb-panel-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1059;
	background: rgba(0, 0, 0, .4);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.rb-panel-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s;
}

html.rb-panel-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.rb-panel,
	.rb-panel-backdrop {
		transition: none !important;
	}
}