/*
 Theme Name:        DIVI per Ryoga
 Theme URI:         https://cloudfactory.it
 Description:       Child Theme sviluppato da Cloudfactory S.r.l.
 Author:            Cloudfactory S.r.l.
 Author URI:        https://cloudfactory.it
 Template:          Divi
 Version:           1.3.1
 Requires at least: 6.5
 Text Domain:       divi-ryoga
*/

/*
 * 1.3.1 — Menu desktop: Prova come pulsante, Accedi come link con icona.
 *         Icona hamburger viola anche a menu chiuso (prima bianca in home).
 *         Barra mobile: logo a sinistra; Accedi, Prova e hamburger a destra
 *         (markup da functions.php); il menu si apre da destra.
 *         Menu mobile aperto: più spazio, niente righe, frecce SVG sui sottomenu,
 *         Voci del menu mobile in grigio chiaro (Lato 400), in nero se attive o al tocco.
 *         X di chiusura in SVG. A menu aperto la riga header (logo, Prova, Accedi, X)
 *         resta visibile e diventa bianca; il menu si apre sotto.
 *         Hero home:
 *         niente pulsanti (Prova e Accedi stanno nel menu): "Welcome to Ryoga" e H1
 *         "Yoga, pilates e barre a Roma e Torino". Stile della hero dentro il modulo.
 *         Menu desktop: testo 17px (prima 19px); tra 1336 e 1599px logo, voci e
 *         spazi più compatti perché tutto stia su una riga.
 *         Font: Lato ospitato nel child theme (/fonts) e precaricato, con fallback
 *         Arial misurato su Lato (@font-face stampati da functions.php).
 *         Header che riappare scorrendo verso l'alto (classi da functions.php).
 *         Riquadri studio: la foto si apre in un lightbox invece di ricaricare la pagina;
 *         tolti i bordi viola; testo dei riquadri forzato in bianco.
 *         Slider Studi e Team: altezza in CSS (senza script); su mobile foto come
 *         sfondo di tutta la slide e box viola semitrasparente; link in bianco; puntini;
 *         niente animazioni di apertura né dissolvenza tra una slide e l'altra.
 *         Menu mobile aperto/chiuso solo con html.mobile-menu-open (nuovo script in
 *         Integrazione): risolto il menu che si richiudeva da solo.
 * 1.3.0 — Consolidamento: tutto il CSS custom è in questo file.
 * Il campo "CSS personalizzato" delle Opzioni del tema Divi va lasciato VUOTO.
 * Rimossi blocchi senza riscontro sul sito (healcloudfactory, Shortcodes Ultimate,
 * featherlight, griglie 5–10 colonne, vecchi slider/pricing home, page-id-449…).
 */


/* Versione di questo file, leggibile dalla console del browser con:
 * getComputedStyle(document.documentElement).getPropertyValue('--ry-css') */
:root {
	--ry-css: "1.3.1 / 2026-10-02 10:35";
}

/* =========================================================================
 * FONT — Lato ospitato nel child theme (cartella /fonts), niente Google Fonts.
 * Gli @font-face (Lato e "Lato Fallback") e il preload sono stampati nell'<head>
 * da functions.php, con indirizzi assoluti: così funzionano anche quando
 * WP Rocket sposta o riscrive questo foglio di stile.
 * ========================================================================= */

/* Il CSS di Divi dichiara 'Lato', Helvetica, Arial: qui si aggiunge il fallback
 * misurato. "html body" serve a vincere sul CSS di Divi, caricato dopo. */
html body,
html body button,
html body input,
html body select,
html body textarea,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body #top-menu,
html body .et_mobile_menu,
html body .et_pb_button {
	font-family: 'Lato', 'Lato Fallback', Helvetica, Arial, sans-serif;
}


/* =========================================================================
 * HEADER DESKTOP
 * ========================================================================= */

#main-header {
	height: 100px;
}

#main-header .container {
	height: 100%;
	padding: 0 !important;
}

#main-header .logo_container {
	position: static;
	float: left;
	width: 300px;
}

#main-header .logo_container a {
	display: block;
	height: 100%;
	background-image: url('/wp-content/uploads/2018/03/ryoga-h-logo.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90% auto;
}

#logo,
#main-header .logo_helper {
	display: none;
}

/* Navigazione accanto al logo, senza tagliare i sottomenu */
#et-top-navigation {
	display: flow-root;
	height: 100%;
	padding: 0 !important;
	float: none;
	overflow: visible;
}


/* =========================================================================
 * MENU PRINCIPALE (desktop)
 * ========================================================================= */

#top-menu-nav {
	width: 100%;
	height: 100%;
}

#top-menu {
	width: 100%;
	height: 100%;
	padding-left: 1%;
	text-transform: uppercase;
}

@media (min-width: 1600px) {
	#top-menu {
		padding-left: 1.5%;
	}
}

@media (min-width: 1700px) {
	#top-menu {
		padding-left: 4%;
	}
}

@media (min-width: 1800px) {
	#top-menu {
		padding-left: 7%;
	}
}

#top-menu li {
	height: 100%;
	padding-right: 0;
}

#top-menu li a {
	height: 100%;
	padding: 0 11px;
	line-height: 110px;
}

#top-menu-nav > ul > li > a {
	padding-bottom: 0 !important;
	font-size: 17px;
	transition: none;
}

#top-menu-nav > ul > li > a:hover {
	opacity: 1;
	color: #333;
	transition: none;
}

/* Voci "alt" a destra: PROVA è il pulsante, ACCEDI un link secondario con icona.
 * Nel menu (Aspetto → Menu) Prova va PRIMA di Accedi: con float:right
 * la prima voce finisce all'estrema destra.
 * Le voci si riconoscono dal link (/prova/, #accedi) o dalle classi ry-prova / ry-accedi. */
#top-menu li.alt {
	float: right;
	padding-right: 0;
}

/* PROVA: pulsante viola compatto */
#top-menu li.ry-prova,
#top-menu li.alt:has(> a[href*="/prova"]) {
	display: flex;
	align-items: center;
	padding-left: 8px;
	padding-right: 20px; /* stacca il pulsante dal bordo destro */
}

#top-menu li.ry-prova > a,
#top-menu li.alt > a[href*="/prova"] {
	height: auto;
	margin-top: 10px; /* centro del pulsante allineato al testo delle altre voci (line-height 110px) */
	padding: 11px 22px !important;
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	color: #fff !important;
	background-color: #9460A5;
	border-radius: 0;
}

#top-menu li.ry-prova > a:hover,
#top-menu li.alt > a[href*="/prova"]:hover {
	color: #fff !important;
	background-color: #7d4d8f;
}

/* ACCEDI: per chi è già cliente, discreto e con icona utente */
#top-menu li.ry-accedi > a,
#top-menu li.alt > a[href="#accedi"] {
	padding-right: 14px;
	font-size: 16px;
	color: #666;
}

#top-menu li.ry-accedi > a:hover,
#top-menu li.alt > a[href="#accedi"]:hover {
	color: #9460A5;
}

#top-menu li.ry-accedi > a::before,
#top-menu li.alt > a[href="#accedi"]::before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 7px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Schermi desktop intermedi (1336–1599px): logo, voci e spazi più compatti
 * perché tutte le voci, Prova e Accedi stiano su una riga */
@media (min-width: 1336px) and (max-width: 1599px) {
	#main-header .logo_container {
		width: 250px;
	}

	#top-menu {
		padding-left: 0;
	}

	#top-menu li a {
		padding: 0 9px;
	}

	#top-menu-nav > ul > li > a {
		font-size: 16px;
	}

	#top-menu li.ry-prova,
	#top-menu li.alt:has(> a[href*="/prova"]) {
		padding-left: 4px;
		padding-right: 14px;
	}

	#top-menu li.ry-prova > a,
	#top-menu li.alt > a[href*="/prova"] {
		padding: 10px 18px !important;
		font-size: 14px !important;
	}

	#top-menu li.ry-accedi > a,
	#top-menu li.alt > a[href="#accedi"] {
		padding-right: 10px;
		font-size: 15px;
	}
}

@media (min-width: 1336px) and (max-width: 1479px) {
	#main-header .logo_container {
		width: 220px;
	}

	#top-menu li a {
		padding: 0 7px;
	}

	#top-menu-nav > ul > li > a {
		font-size: 15px;
	}

	#top-menu li.ry-prova > a,
	#top-menu li.alt > a[href*="/prova"] {
		padding: 9px 15px !important;
		font-size: 13px !important;
	}

	#top-menu li.ry-accedi > a,
	#top-menu li.alt > a[href="#accedi"] {
		font-size: 14px;
	}
}

/* Voce attiva / genitore della voce attiva / sottovoce attiva */
#top-menu li.current-menu-item > a,
#top-menu li.current-menu-ancestor > a {
	color: #A079B7 !important;
}

.nav li ul .current-menu-item a {
	color: #8f8f8f !important;
}

/* Voci nascoste: Home su desktop, pulsante login (ultima voce) */
#top-menu li.x-mobile-only,
#top-menu > li:last-child {
	display: none !important;
}


/* =========================================================================
 * HEADER CHE RIAPPARE SCORRENDO VERSO L'ALTO (desktop e mobile)
 * Le classi su <html> le mette lo script in functions.php:
 *   ry-hdr-fixed  → header fisso in alto, bianco (si scorre verso l'alto)
 *   ry-hdr-hidden → header fisso nascosto sopra lo schermo (si scorre verso il basso)
 * In cima alla pagina nessuna classe: header normale (trasparente in home su mobile).
 * ========================================================================= */

html.ry-hdr-fixed #main-header {
	position: fixed !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	right: 0 !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 99999;
	background-color: #fff !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important;
	transform: translateY(0);
	transition: transform 250ms ease;
}

html.ry-hdr-fixed.ry-hdr-hidden #main-header {
	transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
}

/* Se l'header occupava spazio nella pagina, lo spazio resta: niente salto del contenuto */
html.ry-hdr-fixed.ry-hdr-inflow #page-container {
	padding-top: var(--ry-hdr-h, 0px) !important;
}

@media (prefers-reduced-motion: reduce) {
	html.ry-hdr-fixed #main-header {
		transition: none;
	}
}


/* =========================================================================
 * MEGA MENU "CORSI" (.cf-corsi-auto)
 * ========================================================================= */

#top-menu li.cf-corsi-auto > ul {
	padding: 30px 20px !important;
}

#top-menu li.cf-corsi-auto ul ul {
	width: 100% !important;
}

#top-menu li.cf-corsi-auto li {
	padding: 0 !important;
	line-height: 1.4 !important;
}

/* Voci dei corsi */
#top-menu li.cf-corsi-auto li a {
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 7px 0 !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	/* text-transform: none !important;  ← togli il commento per i corsi in minuscolo */
}

/* Colonne: Yoga largo la metà e su due colonne, le altre tre più strette */
#top-menu li.cf-corsi-auto > ul > li {
	box-sizing: border-box;
	width: 16.666% !important;
	padding: 0 20px !important;
}

#top-menu li.cf-corsi-auto > ul > li.cf-corsi-disciplina-yoga {
	width: 50% !important;
}

#top-menu li.cf-corsi-auto > ul > li.cf-corsi-disciplina-yoga > ul {
	column-count: 2;
	column-gap: 30px;
}

#top-menu li.cf-corsi-auto > ul > li.cf-corsi-disciplina-yoga > ul > li {
	break-inside: avoid;
}

/* Titoli delle discipline: solo l'iniziale maiuscola */
#top-menu li.cf-corsi-auto > ul > li > a {
	margin-bottom: 8px;
	padding-bottom: 12px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}


/* =========================================================================
 * MENU MOBILE — sottomenu richiudibili
 * ========================================================================= */

.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
	position: relative;
	background-color: transparent;
}

/* Freccia sulle voci con sottomenu: disegnata in SVG, non dipende dal font icone di Divi */
.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
	padding-right: 56px !important;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children > a::after,
#main-header .et_mobile_menu .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background-color: #9460A5;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 200ms ease;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a::after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a::after {
	transform: rotate(180deg);
}

.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
	display: none !important;
	visibility: hidden !important;
}

.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
	display: block !important;
	visibility: visible !important;
}

/* Voci nascoste nel menu mobile: widget login MINDBODY e ultima voce (login) */
#mobile_menu > li:has(> healcode-widget),
#mobile_menu > li:last-child {
	display: none !important;
}


/* =========================================================================
 * HEADER MOBILE (<= 1335px)
 * ========================================================================= */
@media (max-width: 1335px) {

	/* Switch desktop → mobile */
	#et_mobile_nav_menu {
		display: block;
	}

	#top-menu {
		display: none;
	}

	#main-header {
		position: absolute !important;
		height: 60px !important;
	}

	#main-header .container {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		padding-left: 5% !important;
		padding-right: 5% !important;
	}

	#main-header .et_search_form_container {
		display: none !important;
	}

	/* Barra mobile: logo a sinistra; Accedi, Prova e hamburger a destra.
	 * Il logo di Divi resta nascosto: su mobile si usa .ry-mobile-logo
	 * (immagine vera, aggiunta da functions.php accanto a Prova e Accedi). */
	#main-header .logo_container {
		display: none !important;
	}

	.ry-mobile-logo {
		display: flex;
		position: absolute;
		top: 0;
		left: 5vw;
		z-index: 3;
		align-items: center;
		height: 60px;
	}

	.ry-mobile-logo img {
		display: block;
		width: auto;
		height: auto;
		/* Più grande possibile senza toccare Prova (12px di stacco), fino a 140px */
		max-width: min(140px, calc(90vw - 238px));
		max-height: 40px;
	}

	#et-top-navigation {
		float: left !important;
		padding: 0 !important;
	}

	/* Pannello menu: fisso tra header (60px) e fondo schermo */
	.et_mobile_menu {
		position: fixed !important;
		top: 60px !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 75% !important;
		padding: 16px 0 60px 0 !important;
		overflow-y: auto !important;
		opacity: 0 !important;
		border-top: none !important;
		box-shadow: none !important;
		background-color: #fff !important;
		transition: opacity 200ms ease-in-out, visibility 0s linear 200ms !important;
		/* Sempre nel DOM; chiuso = invisibile e non cliccabile. Lo stato lo decide
		 * solo la classe html.mobile-menu-open (script in Opzioni tema → Integrazione) */
		display: block !important;
		visibility: hidden;
		pointer-events: none;
	}

	html.mobile-menu-open .et_mobile_menu {
		visibility: visible;
		pointer-events: auto;
		transition: opacity 200ms ease-in-out, visibility 0s linear 0s !important;
	}

	/* Voci senza righe di separazione, con più spazio */
	.et_mobile_menu li {
		display: block !important;
		border: 0 !important;
	}

	.et_mobile_menu li a {
		display: block !important;
		padding: 14px 24px !important;
		font-size: 18px !important;
		font-weight: 400 !important;
		line-height: 1.3 !important;
		letter-spacing: 1px !important;
		text-transform: uppercase !important;
		color: #777 !important;
		border: 0 !important;
		opacity: 1 !important;
		transition: color 150ms ease;
	}

	/* Sottomenu: rientrati, più piccoli, in minuscolo */
	.et_mobile_menu ul.sub-menu {
		padding: 0 0 8px 0 !important;
		border: 0 !important;
	}

	.et_mobile_menu ul.sub-menu li a {
		padding: 9px 24px 9px 40px !important;
		font-size: 16px !important;
		letter-spacing: .3px !important;
		text-transform: none !important;
		color: #888 !important;
	}

	.et_mobile_menu ul.sub-menu ul.sub-menu li a {
		padding-left: 56px !important;
		font-size: 15px !important;
		color: #999 !important;
	}

	.et_mobile_menu li a:hover {
		background-color: transparent !important;
	}

	.et_mobile_menu li.alt a {
		color: #9460A5 !important;
	}

	/* In nero: voce al passaggio/tocco, pagina attiva (e le voci che la contengono),
	 * voce con il sottomenu aperto */
	.et_mobile_menu li a:hover,
	.et_mobile_menu li a:focus-visible,
	.et_mobile_menu li a:active,
	.et_mobile_menu li.current-menu-item > a,
	.et_mobile_menu li.current-menu-ancestor > a,
	.et_mobile_menu li.current-menu-parent > a,
	.et_mobile_menu li.visible > a,
	.et_mobile_menu ul.sub-menu li a:hover,
	.et_mobile_menu ul.sub-menu li.current-menu-item > a,
	.et_mobile_menu ul.sub-menu li.current-menu-ancestor > a,
	.et_mobile_menu ul.sub-menu li.visible > a,
	.et_mobile_menu ul.sub-menu ul.sub-menu li a:hover,
	.et_mobile_menu ul.sub-menu ul.sub-menu li.current-menu-item > a {
		color: #000 !important;
	}

	/* Hamburger a destra: l'area cliccabile è solo l'icona, non più tutta la barra.
	 * font-size 0 nasconde la scritta "Menu"/"Chiudi" accanto all'icona. */
	.mobile_menu_bar {
		position: absolute !important;
		top: 0 !important;
		right: 5vw !important;
		left: auto !important;
		width: 44px !important;
		height: 60px !important;
		padding: 0 !important;
		font-size: 0 !important;
		line-height: 60px !important;
		color: #9460A5 !important;
		background: none !important;
	}

	.mobile_menu_bar::before {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		padding: 0 !important;
		font-size: 44px !important;
		line-height: 62px !important;
		text-align: right !important;
		color: #9460A5 !important; /* hamburger viola, sempre (anche in home sopra il video) */
	}

	/* Stato "menu aperto" (classe aggiunta via JS su <html>) */
	html.mobile-menu-open {
		height: 100% !important;
	}

	html.mobile-menu-open body {
		height: 100% !important;
		overflow: hidden !important;
	}

	/* Il menu si apre da destra, dal lato dell'hamburger */
	.et_mobile_menu {
		right: 0 !important;
		left: auto !important;
	}

	/* A menu aperto la barra resta al suo posto, larga tutto lo schermo,
	 * e da trasparente diventa bianca; il menu si apre subito sotto (top: 60px) */
	html.mobile-menu-open #main-header {
		display: block !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		width: 100% !important;
		opacity: 1 !important;
		transform: none !important;
		background-color: #fff !important;
		box-shadow: 0 1px 0 #eee !important;
		transition: background-color 200ms ease;
	}

	html.mobile-menu-open .mobile_menu_bar_toggle {
		padding-bottom: 0 !important;
	}

	/* X di chiusura disegnata in SVG: il font icone ridotto di Divi 5
	 * non ha il glifo "M" e al suo posto compare la lettera */
	html.mobile-menu-open .mobile_menu_bar_toggle::before {
		content: "" !important;
		top: 15px !important;
		right: 2px !important;
		bottom: auto !important;
		left: auto !important;
		width: 30px;
		height: 30px;
		background-color: #9460A5;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	html.mobile-menu-open .et_mobile_menu {
		opacity: 1 !important;
	}

	html.mobile-menu-open #main-header .container {
		z-index: 10000 !important;
	}

	/* Nasconde il clearfix di Divi quando il menu è aperto */
	html.mobile-menu-open #main-header .container::after {
		display: none !important;
	}

	/* PROVA e ACCEDI nella barra mobile (markup aggiunto da functions.php) */
	.ry-mobile-prova,
	.ry-mobile-accedi {
		display: block;
		position: absolute;
		top: 13px;
		z-index: 3;
		font-size: 13px;
		font-weight: 700;
		line-height: 16px;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	/* Da destra: hamburger (44px), Accedi, Prova, con 18px tra uno e l'altro */
	.ry-mobile-prova {
		right: calc(5vw + 154px);
		width: 72px;
		padding: 9px 0;
		text-align: center;
		color: #fff !important;
		background-color: #9460A5;
	}

	.ry-mobile-prova:hover {
		background-color: #7d4d8f;
	}

	.ry-mobile-accedi {
		right: calc(5vw + 62px);
		width: 74px;
		padding: 9px 0;
		text-align: center;
		white-space: nowrap;
		color: #9460A5 !important;
	}

	.ry-mobile-accedi::before {
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		margin-right: 5px;
		vertical-align: -3px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	/* A menu aperto la riga dell'header resta com'è: logo, Prova, Accedi e X */
	html.mobile-menu-open .ry-mobile-logo {
		display: flex !important;
	}

	html.mobile-menu-open .ry-mobile-prova,
	html.mobile-menu-open .ry-mobile-accedi {
		display: block !important;
	}

	html.mobile-menu-open .ry-mobile-logo,
	html.mobile-menu-open .ry-mobile-prova,
	html.mobile-menu-open .ry-mobile-accedi {
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Home: header trasparente sopra l'immagine (chiara in alto su mobile) */
	.home #logo {
		display: none;
	}

	.home #page-container {
		padding-top: 0 !important;
	}

	.home #main-header {
		background-color: transparent;
		box-shadow: none;
	}

	.home #main-header .container {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
}

/* Schermi stretti (es. 360px): tutto un po' più compatto, la scritta Accedi resta */
@media (max-width: 374px) {
	.ry-mobile-logo img {
		max-width: min(140px, calc(90vw - 224px));
	}

	/* 16px tra hamburger, Accedi e Prova */
	.ry-mobile-prova {
		right: calc(5vw + 146px);
		width: 66px;
	}

	.ry-mobile-accedi {
		right: calc(5vw + 60px);
		width: 70px;
		font-size: 12px;
		letter-spacing: .5px;
	}

	.ry-mobile-accedi::before {
		margin-right: 4px;
	}
}

/* Sotto i 340px: ancora più compatto, ma la scritta Accedi resta sempre */
@media (max-width: 339px) {
	.ry-mobile-logo img {
		max-width: min(140px, calc(90vw - 206px));
	}

	/* 12px tra hamburger, Accedi e Prova */
	.ry-mobile-prova {
		right: calc(5vw + 132px);
		width: 62px;
		font-size: 12px;
	}

	.ry-mobile-accedi {
		right: calc(5vw + 56px);
		width: 64px;
		font-size: 11px;
		letter-spacing: 0;
	}

	.ry-mobile-accedi::before {
		width: 14px;
		height: 14px;
		margin-right: 3px;
	}
}

/* I pulsanti della barra mobile non servono su desktop */
@media (min-width: 1336px) {
	.ry-mobile-logo,
	.ry-mobile-prova,
	.ry-mobile-accedi {
		display: none;
	}
}

/* Logo fuori dalla home */
@media (max-width: 980px) {
	body:not(.home) #logo {
		max-width: 65%;
	}
}

@media (min-width: 1200px) and (max-width: 1400px) {
	body:not(.home) #logo {
		max-height: 60%;
	}
}


/* =========================================================================
 * PULSANTI
 * ========================================================================= */

.et_pb_button {
	min-width: 250px !important;
	text-align: center;
}

/* Nice buttons (usati su ~70 pagine) + pulsante invio Gravity Forms */
.nice-button,
body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type=submit],
body .gform_wrapper .gform_footer button.gform_button {
	padding: .3em 1em !important;
	border: 2px solid #fff !important;
	color: #fff !important;
	background-color: rgba(148, 96, 165, 0.5) !important;
	text-shadow: 1px 1px 0 #000;
	box-shadow: 0 0 0 5px rgba(148, 96, 165, 0.5) !important;
}

.nice-button:hover,
body .gform_wrapper .gform_footer input.button:hover,
body .gform_wrapper .gform_footer input[type=submit]:hover,
body .gform_wrapper .gform_footer button.gform_button:hover {
	border-color: transparent !important;
	background-color: rgba(0, 0, 0, 0.37) !important;
	box-shadow: none !important;
	transition: all 200ms ease-in-out !important;
}

.nice-button::after {
	display: none !important;
}


/* =========================================================================
 * HERO HOME (.rg-hero): HTML, stile e script stanno nel modulo Codice a tutta
 * larghezza della home. Queste regole sono una COPIA DI SICUREZZA dello stile
 * del modulo: la hero resta in ordine anche se nella pagina c'è ancora una
 * versione precedente del modulo, o se lo <style> del modulo non arriva.
 * ========================================================================= */

.rg-hero {
	position: relative;
	width: 100%;
	height: calc(100svh - var(--rg-hdr, 80px));
	min-height: 460px;
	overflow: hidden;
	background: #d9d4de;
}

.rg-hero picture,
.rg-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.rg-hero__img {
	object-fit: cover;
	object-position: right bottom;
}

.rg-hero .rg-hero__testo,
.rg-hero > .rg-hero__title {
	position: absolute;
	top: 50%;
	left: max(6vw, 40px);
	z-index: 2;
	max-width: 600px;
	transform: translateY(-50%);
}

.rg-hero .rg-hero__welcome {
	margin: 0;
	padding: 0;
	font-size: 38px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 1px;
	color: #666;
}

.rg-hero .rg-hero__title {
	margin: 16px 0 0;
	padding: 0 !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #777;
}

.rg-hero > .rg-hero__title {
	margin: 0;
}

.rg-hero .rg-hero__title span {
	display: inline;
}

/* Versioni precedenti del modulo: niente pulsanti né sottotitolo */
.rg-hero__cta,
.rg-hero__sub {
	display: none !important;
}

.rg-hero__down {
	position: absolute;
	bottom: 24px;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	line-height: 0;
	opacity: .9;
}

@media (max-width: 980px) {
	/* Su mobile l'header sta sopra la foto: la hero occupa tutto lo schermo da subito */
	.rg-hero {
		height: 100svh;
	}

	.rg-hero__img {
		object-position: center center;
	}

	.rg-hero .rg-hero__testo,
	.rg-hero > .rg-hero__title {
		top: 92px;
		right: 24px;
		left: 24px;
		max-width: none;
		transform: none;
	}

	.rg-hero .rg-hero__welcome {
		font-size: 28px;
	}

	.rg-hero .rg-hero__title {
		margin-top: 10px;
		font-size: 11px;
		letter-spacing: 2px;
	}

	.rg-hero > .rg-hero__title {
		margin-top: 0;
	}

	.rg-hero .rg-hero__title span {
		display: block;
	}
}

/* Titolo H1 solo per Google e screen reader */
.rg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Titoli di sezione della home (classi rg-h, prima nello <style> del modulo hero) */
.rg-h {
	padding-bottom: 0 !important;
}

.rg-h--sec {
	font-size: 30px !important;
	line-height: 30px !important;
	color: #9561a9 !important;
}

.rg-h--std {
	font-size: 28px !important;
	line-height: 1.3 !important;
}


/* =========================================================================
 * RIQUADRI IMMAGINE CON OVERLAY (.home-big-button)
 * Home + pagine studi (Prati, Trastevere, Sallustiano, Torino).
 * Overlay con box-shadow inset: niente ::after, che Divi 5 usa per l'icona
 * del pulsante con top:50% + translateY(-50%) e spostava l'overlay in alto.
 * ========================================================================= */

/* Niente bordi viola sui riquadri (anche al passaggio del mouse) */
body #page-container .et_pb_button.home-big-button,
body #page-container .et_pb_button.home-big-button:hover,
body #page-container .home-big-button .et_pb_button,
body #page-container .home-big-button .et_pb_button:hover {
	border: 0 !important;
	border-radius: 0 !important;
}

/* Testo dei riquadri sempre bianco (home e studi, desktop e mobile), anche su
 * link visitati, al passaggio del mouse e al tocco: niente azzurro di Divi */
body #page-container .et_pb_button.home-big-button,
body #page-container .et_pb_button.home-big-button:hover,
body #page-container .et_pb_button.home-big-button:focus,
body #page-container .et_pb_button.home-big-button:active,
body #page-container .et_pb_button.home-big-button:visited,
body #page-container .et_pb_button.home-big-button *,
body #page-container .home-big-button .et_pb_button,
body #page-container .home-big-button .et_pb_button:hover,
body #page-container .home-big-button .et_pb_button:visited,
body #page-container .home-big-button a {
	color: #fff !important;
}

.et_pb_button.home-big-button {
	position: relative;
	text-shadow: 0 0 30px #000;
	box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.2);
	transition: box-shadow 300ms ease;
}

.et_pb_button.home-big-button:hover {
	box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
}

/* Niente icona-freccia Divi su questi pulsanti */
.et_pb_button.home-big-button::after {
	display: none !important;
}


/* =========================================================================
 * LIGHTBOX dei riquadri studio (.home-big-button che puntano alla pagina stessa)
 * Il riquadro apre la sua foto ingrandita invece di ricaricare la pagina.
 * Markup e comportamento: script in functions.php (<dialog class="ry-lightbox">).
 * ========================================================================= */

.ry-lb-tile {
	cursor: zoom-in;
}

html.ry-lb-open {
	overflow: hidden;
}

.ry-lightbox {
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
}

.ry-lightbox::backdrop {
	background: rgba(24, 14, 30, .9);
}

.ry-lightbox__fig {
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 64px 84px 28px;
}

.ry-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100% - 44px);
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}

.ry-lightbox__cap {
	font-size: 18px;
	letter-spacing: .5px;
	color: #fff;
	text-align: center;
}

.ry-lightbox__btn {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	cursor: pointer;
	transition: background-color 150ms ease;
}

.ry-lightbox__btn:hover,
.ry-lightbox__btn:focus-visible {
	background: rgba(148, 96, 165, .9);
}

.ry-lightbox__btn svg {
	width: 24px;
	height: 24px;
}

.ry-lightbox__chiudi {
	top: 12px;
	right: 12px;
}

.ry-lightbox__prec,
.ry-lightbox__succ {
	top: 50%;
	margin-top: -24px;
}

.ry-lightbox__prec {
	left: 16px;
}

.ry-lightbox__succ {
	right: 16px;
}

@media (max-width: 767px) {
	.ry-lightbox__fig {
		padding: 64px 12px 84px;
	}

	/* Su telefono le frecce vanno sotto la foto */
	.ry-lightbox__prec,
	.ry-lightbox__succ {
		top: auto;
		bottom: 18px;
		margin-top: 0;
	}

	.ry-lightbox__prec {
		left: calc(50% - 60px);
	}

	.ry-lightbox__succ {
		right: calc(50% - 60px);
	}
}


/* =========================================================================
 * SLIDER STUDI E TEAM IN HOME (sezioni con classe .full-height-section)
 * Prima l'altezza la fissava uno script in Divi → Opzioni tema → Integrazione
 * ("Sezioni a piena altezza"), che lasciava buchi bianchi: quella parte dello
 * script va tolta. La classe sulle sezioni resta e serve da aggancio per questo CSS.
 * ========================================================================= */

/* La foto riempie sempre tutta la slide, una volta sola (niente immagini affiancate) */
.full-height-section .et_pb_slide,
.full-height-section .et_parallax_bg {
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
}

/* Desktop: slide alte quanto lo schermo meno header (100px) e titolo (84px) */
@media (min-width: 981px) {
	.full-height-section .et_pb_slide {
		min-height: calc(100vh - 184px);
	}
}

/* Mobile e tablet: la foto è lo sfondo di tutta la slide; il testo sta sopra,
 * in un box viola semitrasparente, sotto una fascia di foto libera.
 * "body" davanti serve a vincere sulle regole .nice-slider (SLIDER HOME, più sotto). */
@media (max-width: 980px) {
	body .full-height-section .et_pb_slide {
		padding: 38vw 44px 52px !important; /* in alto foto libera, ai lati spazio per le frecce, in fondo per i puntini */
		background-color: #9561a9;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: cover !important;
	}

	body .full-height-section .et_pb_container {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
	}

	body .full-height-section .et_pb_slider_container_inner {
		display: block !important;
	}

	body .full-height-section .et_pb_slide_description {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		padding: 20px 20px 22px !important;
		background: rgba(149, 97, 169, .85) !important;
		text-shadow: none !important;
	}

	body .full-height-section .et_pb_slide_description *,
	body .full-height-section .et_pb_slide_description .et_pb_slide_content {
		text-shadow: none !important;
	}

	/* Testi del box un po' più compatti */
	body .full-height-section .et_pb_slide_description .et_pb_slide_title {
		margin: 0 0 12px !important;
		padding: 0 !important;
		font-size: 26px !important;
		line-height: 1.2 !important;
	}

	body .full-height-section .et_pb_slide_description .et_pb_slide_content {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	body .full-height-section .et_pb_slide_description .et_pb_slide_content p {
		padding-bottom: 10px !important;
	}

	/* "Lo studio" largo quanto il box, senza uscire dai bordi */
	body .full-height-section .et_pb_slide_description .et_pb_button {
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	/* Frecce a metà altezza della slide, nei margini di foto ai lati del box */
	body .full-height-section .et-pb-slider-arrows a {
		top: 50% !important;
		margin-top: -24px !important;
		opacity: 1 !important;
	}

	body .full-height-section .et-pb-slider-arrows .et-pb-arrow-prev {
		left: 6px !important;
	}

	body .full-height-section .et-pb-slider-arrows .et-pb-arrow-next {
		right: 6px !important;
	}
}

/* Link nei box (telefono, MAPPA): bianchi e sottolineati, non azzurri */
body .full-height-section .et_pb_slide_description a,
body .full-height-section .et_pb_slide_description a:hover,
body .full-height-section .et_pb_slide_description a:visited {
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Il pulsante "Lo studio" ha già il bordo: niente sottolineatura */
body .full-height-section .et_pb_slide_description .et_pb_more_button,
body .full-height-section .et_pb_slide_description .et_pb_button {
	text-decoration: none !important;
}

/* Niente animazioni di apertura negli slider Studi e Team:
 * - il testo della slide che entra sfumando dal basso (animazione "fadeBottom" di Divi);
 * - l'entrata in dissolvenza del modulo quando arriva sullo schermo (Animazione di Divi).
 * (Il cambio slide senza dissolvenza è subito sotto.) */
.full-height-section .et_pb_slide_description,
.full-height-section .et_pb_slide_description *,
.full-height-section .et_pb_slide_image,
.full-height-section .et_pb_slide_video {
	animation: none !important;
	-webkit-animation: none !important;
}

/* Cambio slide istantaneo, senza dissolvenza: si vede solo la slide attiva, sempre
 * piena. (Lo script di Divi anima l'opacità delle slide: qui viene annullata.) */
.full-height-section .et_pb_slide:not(.et-pb-active-slide) {
	display: none !important;
}
/* Prima che parta lo script dello slider (WP Rocket lo ritarda fino al primo
 * gesto dell'utente) nessuna slide ha et-pb-active-slide: si mostra la prima. */
 .full-height-section .et_pb_slides:not(:has(> .et-pb-active-slide)) > .et_pb_slide:first-child {
	display: block !important;
	opacity: 1 !important;
}

.full-height-section .et_pb_slide.et-pb-active-slide {
	opacity: 1 !important;
	transition: none !important;
}

.full-height-section .et_animated,
.full-height-section .et_pb_slider.et_animated,
.full-height-section .et_pb_module.et_animated {
	opacity: 1 !important;
	animation: none !important;
	-webkit-animation: none !important;
	transform: none !important;
}

/* Puntini dello slider: più grandi e visibili */
.full-height-section .et-pb-controllers a {
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background-color: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
	opacity: 1;
}

.full-height-section .et-pb-controllers .et-pb-active-control {
	background-color: #fff;
}


/* =========================================================================
 * SLIDER HOME (.nice-slider)
 * ========================================================================= */

.nice-slider {
	font-size: 20px !important;
	line-height: 1.3 !important;
	text-shadow: 1px 1px 0 #000;
}

.nice-slider h1 {
	color: #fff;
	font-size: 28px !important;
	line-height: 1.3;
	text-shadow: 1px 1px 0 #000;
}

.nice-slider .et_pb_slide {
	height: 100%;
	margin: 0;
	padding: 0 !important;
}

.nice-slider .et_pb_slide .et_pb_container {
	max-width: 100% !important;
	margin: 0 !important;
}

.nice-slider .et_pb_slide_description {
	float: left;
	max-width: 500px;
	margin: 16% 15% !important;
	padding: 25px !important;
	background-color: rgba(148, 96, 165, 0.5) !important;
}

.nice-slider.nice-slider-align-right .et_pb_slide_description {
	float: right;
}

.nice-slider .et_pb_slide_description .et_pb_slide_content {
	font-size: 20px !important;
	line-height: 1.3;
	text-shadow: 1px 1px 0 #000;
}

.nice-slider .et_pb_slide_description .et_pb_more_button {
	text-shadow: 1px 1px 0 #000;
}

.nice-slider .et_pb_slide_description::after {
	content: '';
	display: table;
	clear: both;
}

@media (max-width: 767px) {
	.nice-slider .et_pb_slide_description {
		margin: 2% 5% !important;
	}

	.nice-slider .et_pb_slide_description .et_pb_slide_content {
		font-size: 18px !important;
	}

	.nice-slider .et_pb_slide_description .et_pb_more_button {
		font-size: 20px !important;
	}
}

/* Titoli di sezione */
.home-section-title h1 {
	padding: 0;
}


/* =========================================================================
 * GRAVITY FORMS
 * ========================================================================= */

/* Titolo del form nascosto */
.gform_wrapper h3.gform_title {
	display: none !important;
}

/* Asterisco "obbligatorio" nascosto */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {
	color: transparent;
}

/* Pagina Contatti: label nascoste, si usano i placeholder */
.page-id-228 .gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
	display: none;
}

/* Campi */
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number],
.gform_wrapper input[type=url],
.gform_wrapper select,
.gform_wrapper textarea {
	padding: 15px !important;
	border: none;
	border-radius: 0;
	color: #555 !important;
	background: #eee;
}

.gform_wrapper select {
	height: auto !important;
	line-height: 1.4;
}

/* Pulsante invio: proprietà specifiche (colori/bordi in PULSANTI) */
body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type=submit],
body .gform_wrapper .gform_footer button.gform_button {
	float: right;
	min-width: 250px !important;
	font-size: 22px;
	letter-spacing: 2px;
	text-align: center;
	border-radius: 0;
	cursor: pointer;
}


/* =========================================================================
 * MINDBODY / HEALCODE (prezzi, promo)
 * ========================================================================= */

.healcode-link,
.healcode-pricing-option-text-link {
	padding: 8px 10px !important;
	font-size: 14px !important;
	text-align: center !important;
	color: #fff !important;
	background-color: #afafaf !important;
	border-color: #afafaf !important;
	border-radius: 0 !important;
}

.ryoga-pricing-title {
	padding: 5px 0;
	color: #fff;
	background-color: #555;
}

.ryoga-pricing-body {
	padding-top: 20px;
	padding-bottom: 20px;
}


/* =========================================================================
 * INSTRUCTOR TILES (pagina /team/)
 * ========================================================================= */

.instructor-tile .et_pb_promo_description {
	position: relative;
	z-index: 20;
}

.instructor-tile .et_pb_promo_button {
	z-index: 20;
}

.instructor-tile::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 100ms opacity ease-in;
}

@media (max-width: 1335px) {
	.instructor-tile::after {
		opacity: 1;
	}
}

@media (min-width: 1336px) {
	.instructor-tile .et_pb_promo_description,
	.instructor-tile .et_pb_promo_button {
		opacity: 0;
	}

	.instructor-tile:hover .et_pb_promo_description,
	.instructor-tile:hover .et_pb_promo_button,
	.instructor-tile:hover::after {
		opacity: 1;
	}
}

@media (max-width: 1290px) {
	.instructor-tile .et_pb_promo_button {
		font-size: 18px !important;
	}

	.instructor-tile .et_pb_promo_description {
		line-height: 1.1 !important;
	}
}

.instructor-section.et_pb_section .et_pb_row .et_pb_column .et_pb_module:last-child {
	min-height: 600px;
	background-position: center top;
}

.instructor-section .et_pb_promo_description {
	padding-top: 80%;
}


/* =========================================================================
 * INSTAGRAM FEED (home)
 * ========================================================================= */

#sb_instagram .sbi_caption {
	text-transform: lowercase !important;
}

.sbi_item {
	background-color: #fff;
}