/**
 * MDP Elementor Albums
 * Versione CSS 1.1.1
 *
 * - Compatibilità Elementor Containers
 * - Protezione dagli stili globali del tema
 * - Album responsive
 * - Hover avanzato
 * - Lightbox
 * - Thumbnails
 * - Accessibilità
 */


/* =========================================================
   1. RESET / BOX SIZING
========================================================= */

.elementor-widget-mdp_albums,
.elementor-widget-mdp_albums *,
.elementor-widget-mdp_albums *::before,
.elementor-widget-mdp_albums *::after {
	box-sizing: border-box;
}


/* =========================================================
   2. FIX ELEMENTOR
   Evita che il widget collassi a larghezza 0
========================================================= */

.elementor-widget-mdp_albums {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	flex: 1 1 100% !important;

	align-self: stretch !important;

	--width: 100% !important;
}


/*
 * Elementor Containers.
 */
.e-con > .elementor-element.elementor-widget-mdp_albums,
.e-con .elementor-widget-mdp_albums {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	flex-grow: 1 !important;
	flex-shrink: 1 !important;

	align-self: stretch !important;

	--width: 100% !important;
}


/*
 * Contenitore interno generato automaticamente da Elementor.
 */
.elementor-widget-mdp_albums >
.elementor-widget-container {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   3. WRAPPER PLUGIN
========================================================= */

.mdp-albums-wrapper {
	--mdp-image-scale: 1.06;

	--mdp-gradient-color:
		rgba(12, 20, 50, 0.95);

	--mdp-lightbox-accent:
		#ffffff;

	position: relative;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   4. GRIGLIA ALBUM
========================================================= */

.mdp-albums-grid {
	display: grid !important;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	gap: 24px;

	align-items: stretch !important;
	justify-items: stretch !important;
	justify-content: stretch !important;
}


/* =========================================================
   5. CARD ALBUM
========================================================= */

.mdp-album-card {
	position: relative !important;

	display: block !important;

	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;

	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 18px;

	background:
		#111827 !important;

	color: inherit;

	font: inherit;

	text-align: left;

	overflow: hidden;

	cursor: pointer;

	box-shadow:
		0 8px 24px
		rgba(18, 28, 45, 0.08),
		0 2px 6px
		rgba(18, 28, 45, 0.04);

	transform:
		translate3d(0, 0, 0);

	transition:
		transform
		0.35s
		cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow
		0.35s ease;

	-webkit-tap-highlight-color:
		transparent;

	outline: none;
}


/*
 * Hover desktop.
 */
.mdp-album-card:hover {
	transform:
		translate3d(0, -7px, 0);

	box-shadow:
		0 24px 55px
		rgba(18, 28, 45, 0.16),
		0 8px 20px
		rgba(18, 28, 45, 0.08);
}


/*
 * Accessibilità tastiera.
 */
.mdp-album-card:focus {
	outline: none;
}

.mdp-album-card:focus-visible {
	outline:
		3px solid
		rgba(43, 55, 148, 0.65);

	outline-offset: 4px;
}


/* =========================================================
   6. COPERTINA
========================================================= */

.mdp-album-cover {
	position: relative !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	height: 390px;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#e6e8ec,
			#f3f4f6
		);
}


/* =========================================================
   7. IMMAGINE COPERTINA
========================================================= */

.mdp-album-image {
	position: absolute !important;

	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	display: block !important;

	width: 100% !important;
	max-width: none !important;

	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	object-fit: cover;

	transform:
		scale(1);

	transition:
		transform
		0.7s
		cubic-bezier(0.22, 1, 0.36, 1),
		filter
		0.4s ease;
}


/*
 * Zoom immagine.
 */
.mdp-album-card:hover
.mdp-album-image {
	transform:
		scale(
			var(--mdp-image-scale)
		);
}


/* =========================================================
   8. OVERLAY GENERALE
========================================================= */

.mdp-album-cover::before {
	content: "";

	position: absolute;
	z-index: 1;

	inset: 0;

	display: block;

	background:
		rgba(8, 18, 46, 0.18);

	pointer-events: none;

	transition:
		background-color
		0.35s ease;
}


/*
 * Overlay leggermente più scuro all'hover.
 */
.mdp-album-card:hover
.mdp-album-cover::before {
	background-color:
		rgba(8, 18, 46, 0.29);
}


/* =========================================================
   9. GRADIENTE INFERIORE
========================================================= */

.mdp-album-cover::after {
	content: "";

	position: absolute;
	z-index: 2;

	inset: 0;

	display: block;

	background:
		linear-gradient(
			to top,

			var(
				--mdp-gradient-color
			)
			0%,

			rgba(
				12,
				20,
				50,
				0.73
			)
			26%,

			rgba(
				12,
				20,
				50,
				0.28
			)
			52%,

			rgba(
				12,
				20,
				50,
				0.05
			)
			72%,

			rgba(
				12,
				20,
				50,
				0
			)
			86%
		);

	pointer-events: none;
}


/* =========================================================
   10. AREA SUPERIORE CARD
========================================================= */

.mdp-album-top {
	position: absolute;
	z-index: 5;

	top: 18px;
	right: 18px;
	left: 18px;

	display: flex !important;

	align-items: center;
	justify-content: flex-end;

	width: auto;

	margin: 0 !important;
	padding: 0 !important;

	pointer-events: none;
}


/* =========================================================
   11. BADGE NUMERO FOTO
========================================================= */

.mdp-album-count {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	gap: 7px;

	width: auto !important;
	min-width: 0 !important;
	height: auto !important;

	margin: 0 !important;

	padding:
		9px 13px !important;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.24
		) !important;

	border-radius:
		999px !important;

	background:
		rgba(
			11,
			17,
			32,
			0.42
		) !important;

	color:
		#ffffff !important;

	font-family:
		inherit;

	font-size:
		12px;

	font-weight:
		600;

	line-height:
		1;

	white-space:
		nowrap;

	box-shadow:
		0 5px 20px
		rgba(0, 0, 0, 0.13);

	backdrop-filter:
		blur(12px);

	-webkit-backdrop-filter:
		blur(12px);
}


.mdp-album-count svg {
	display: block !important;

	width: 15px !important;
	height: 15px !important;

	min-width: 15px;

	margin: 0 !important;
	padding: 0 !important;

	fill: currentColor;

	flex:
		0 0 15px;
}


.mdp-album-count span {
	display: inline-block;

	margin: 0;
	padding: 0;
}


/* =========================================================
   12. CONTENUTO INFERIORE CARD
========================================================= */

.mdp-album-content {
	position: absolute !important;
	z-index: 5;

	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	display: flex !important;

	align-items: flex-end;
	justify-content: space-between;

	gap: 20px;

	width: 100% !important;

	margin: 0 !important;

	padding: 28px;

	pointer-events: none;
}


.mdp-album-content-inner {
	display: block !important;

	width: auto;
	min-width: 0;

	margin: 0 !important;
	padding: 0 !important;

	flex:
		1 1 auto;
}


/* =========================================================
   13. TITOLO ALBUM
========================================================= */

.mdp-album-title {
	display: block !important;

	width: auto;

	margin: 0 !important;
	padding: 0 !important;

	color:
		#ffffff;

	font-family:
		inherit;

	font-size:
		25px;

	font-weight:
		650;

	line-height:
		1.18;

	letter-spacing:
		-0.025em;

	text-align:
		left;

	word-break:
		normal;

	overflow-wrap:
		break-word;

	transform:
		translateY(0);

	transition:
		transform
		0.35s
		cubic-bezier(0.22, 1, 0.36, 1);
}


.mdp-album-card:hover
.mdp-album-title {
	transform:
		translateY(-2px);
}



/* =========================================================
   ETICHETTA PUBBLICAZIONE
========================================================= */

.mdp-album-eyebrow {
	display: flex !important;

	align-items: center;

	gap: 9px;

	width: auto;

	margin: 0 0 9px 0 !important;
	padding: 0 !important;

	color:
		rgba(
			255,
			255,
			255,
			0.72
		);

	font-family: inherit;

	font-size: 10px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	text-align: left;
}


/* Linea decorativa */

.mdp-album-eyebrow-line {
	display: block !important;

	width: 24px;
	height: 2px;

	margin: 0;
	padding: 0;

	border-radius: 999px;

	background:
		rgba(
			255,
			255,
			255,
			0.75
		);

	flex: 0 0 24px;

	transition:
		width
		0.35s
		cubic-bezier(0.22, 1, 0.36, 1),
		flex-basis
		0.35s
		cubic-bezier(0.22, 1, 0.36, 1);
}


.mdp-album-card:hover
.mdp-album-eyebrow-line {
	width: 34px;

	flex-basis: 34px;
}


/* =========================================================
   DATA PUBBLICAZIONE
========================================================= */

.mdp-album-date {
	display: block !important;

	width: auto;

	margin: 0 !important;
	padding: 0 !important;

	color: #ffffff;

	font-family: inherit;

	font-size: 24px;

	font-weight: 600;

	line-height: 1.18;

	letter-spacing: -0.025em;

	text-align: left;

	word-break: normal;

	overflow-wrap: break-word;

	transform: translateY(0);

	transition:
		transform
		0.35s
		cubic-bezier(0.22, 1, 0.36, 1);
}


.mdp-album-card:hover
.mdp-album-date {
	transform:
		translateY(-2px);
}


/* =========================================================
   14. DESCRIZIONE ALBUM
========================================================= */

.mdp-album-description {
	display: block !important;

	max-width: 92%;

	margin:
		9px 0 0 0 !important;

	padding:
		0 !important;

	color:
		rgba(
			255,
			255,
			255,
			0.82
		);

	font-family:
		inherit;

	font-size:
		14px;

	font-weight:
		400;

	line-height:
		1.5;

	text-align:
		left;
}


/* =========================================================
   15. ICONA APERTURA
========================================================= */

.mdp-album-open-icon {
	display: flex !important;

	align-items: center;
	justify-content: center;

	width: 46px !important;
	min-width: 46px !important;
	max-width: 46px !important;

	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;

	margin: 0 !important;
	padding: 0 !important;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.28
		);

	border-radius:
		50% !important;

	background:
		rgba(
			255,
			255,
			255,
			0.12
		);

	color:
		#ffffff;

	flex:
		0 0 46px;

	backdrop-filter:
		blur(12px);

	-webkit-backdrop-filter:
		blur(12px);

	transform:
		translateX(0);

	transition:
		background-color
		0.3s ease,
		color
		0.3s ease,
		transform
		0.35s
		cubic-bezier(0.22, 1, 0.36, 1),
		border-color
		0.3s ease;
}


.mdp-album-open-icon svg {
	display: block !important;

	width: 20px !important;
	height: 20px !important;

	margin: 0 !important;
	padding: 0 !important;

	fill: currentColor;
}


.mdp-album-card:hover
.mdp-album-open-icon {
	border-color:
		#ffffff;

	background:
		#ffffff;

	color:
		#172033;

	transform:
		translateX(4px);
}


/* =========================================================
   16. LIGHTBOX
========================================================= */

.mdp-lightbox {
	--mdp-lightbox-accent:
		#ffffff;

	position: fixed !important;
	z-index: 999999 !important;

	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	display: flex !important;

	flex-direction: column;

	width: 100vw !important;
	max-width: none !important;

	height: 100vh !important;
	height: 100dvh !important;

	min-height: 100vh;

	margin: 0 !important;
	padding: 0 !important;

	background:
		rgba(
			8,
			12,
			24,
			0.96
		);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	backdrop-filter:
		blur(14px);

	-webkit-backdrop-filter:
		blur(14px);

	transition:
		opacity
		0.28s ease,
		visibility
		0.28s ease;
}


.mdp-lightbox.mdp-lightbox-active {
	opacity: 1;

	visibility: visible;

	pointer-events: auto;
}


/* =========================================================
   17. RESET PULSANTI LIGHTBOX
   Evita interferenze del tema WordPress
========================================================= */

.mdp-lightbox button,
.mdp-lightbox button:hover,
.mdp-lightbox button:focus {
	font-family:
		inherit !important;

	text-transform:
		none !important;

	letter-spacing:
		normal !important;

	text-decoration:
		none !important;

	box-shadow:
		none;

	appearance:
		none;

	-webkit-appearance:
		none;
}


/* =========================================================
   18. TOPBAR LIGHTBOX
========================================================= */

.mdp-lightbox-topbar {
	position: relative;
	z-index: 20;

	display: flex !important;

	align-items: center;
	justify-content: space-between;

	gap: 20px;

	width: 100%;

	min-height: 76px;

	padding:
		15px 26px;

	border-bottom:
		1px solid
		rgba(
			255,
			255,
			255,
			0.08
		);
}


.mdp-lightbox-heading {
	display: flex !important;

	align-items: center;

	gap: 14px;

	min-width: 0;

	margin: 0;
	padding: 0;
}


/* =========================================================
   19. TITOLO LIGHTBOX
========================================================= */

.mdp-lightbox-title {
	display: block;

	min-width: 0;

	margin: 0;
	padding: 0;

	overflow: hidden;

	color:
		#ffffff;

	font-family:
		inherit;

	font-size:
		16px;

	font-weight:
		600;

	line-height:
		1.3;

	text-overflow:
		ellipsis;

	white-space:
		nowrap;
}


/* =========================================================
   20. CONTATORE LIGHTBOX
========================================================= */

.mdp-lightbox-counter {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	width: auto;

	margin: 0;
	padding:
		5px 9px;

	border-radius:
		999px;

	background:
		rgba(
			255,
			255,
			255,
			0.10
		);

	color:
		rgba(
			255,
			255,
			255,
			0.76
		);

	font-family:
		inherit;

	font-size:
		11px;

	font-weight:
		600;

	line-height:
		1;

	white-space:
		nowrap;
}


/* =========================================================
   21. PULSANTE CHIUSURA
========================================================= */

.mdp-lightbox-close {
	position: relative !important;

	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;

	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;

	margin: 0 !important;
	padding: 0 !important;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.13
		) !important;

	border-radius:
		50% !important;

	background:
		rgba(
			255,
			255,
			255,
			0.07
		) !important;

	color:
		#ffffff !important;

	cursor:
		pointer;

	line-height:
		1 !important;

	flex:
		0 0 44px;

	transition:
		background-color
		0.25s ease,
		border-color
		0.25s ease,
		transform
		0.25s ease;
}


.mdp-lightbox-close svg {
	display: block !important;

	width: 22px !important;
	height: 22px !important;

	margin: 0 !important;
	padding: 0 !important;

	fill: currentColor;
}


.mdp-lightbox-close:hover {
	border-color:
		rgba(
			255,
			255,
			255,
			0.28
		) !important;

	background:
		rgba(
			255,
			255,
			255,
			0.15
		) !important;

	transform:
		rotate(5deg)
		scale(1.06);
}


/* =========================================================
   22. STAGE LIGHTBOX
========================================================= */

.mdp-lightbox-stage {
	position: relative;

	display: flex !important;

	align-items: center;
	justify-content: center;

	width: 100%;

	min-width: 0;
	min-height: 0;

	padding:
		22px 95px;

	flex:
		1 1 auto;
}


/* =========================================================
   23. CONTENITORE IMMAGINE LIGHTBOX
========================================================= */

.mdp-lightbox-image-container {
	position: relative;

	display: flex !important;

	align-items: center;
	justify-content: center;

	width: 100%;

	min-width: 0;
	min-height: 0;

	height: 100%;

	margin: 0;
	padding: 0;
}


/* =========================================================
   24. IMMAGINE GRANDE
========================================================= */

.mdp-lightbox-image {
	position: relative;

	display: block !important;

	width: auto !important;
	height: auto !important;

	max-width:
		100% !important;

	max-height:
		100% !important;

	margin:
		0 auto !important;

	padding:
		0 !important;

	border:
		0 !important;

	border-radius:
		8px;

	object-fit:
		contain;

	box-shadow:
		0 25px 80px
		rgba(
			0,
			0,
			0,
			0.32
		);

	opacity:
		1;

	transform:
		scale(1);

	transition:
		opacity
		0.2s ease,
		transform
		0.25s ease;
}


.mdp-lightbox-image.mdp-image-loading {
	opacity: 0;

	transform:
		scale(0.985);
}


/* =========================================================
   25. FRECCE LIGHTBOX
========================================================= */

.mdp-lightbox-arrow {
	position: absolute !important;
	z-index: 15;

	top: 50% !important;

	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 52px !important;
	min-width: 52px !important;
	max-width: 52px !important;

	height: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;

	margin: 0 !important;
	padding: 0 !important;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.14
		) !important;

	border-radius:
		50% !important;

	background:
		rgba(
			255,
			255,
			255,
			0.08
		) !important;

	color:
		#ffffff !important;

	cursor:
		pointer;

	line-height:
		1 !important;

	backdrop-filter:
		blur(10px);

	-webkit-backdrop-filter:
		blur(10px);

	transform:
		translateY(-50%);

	transition:
		background-color
		0.25s ease,
		border-color
		0.25s ease,
		transform
		0.25s ease;
}


.mdp-lightbox-arrow svg {
	display: block !important;

	width: 27px !important;
	height: 27px !important;

	margin: 0 !important;
	padding: 0 !important;

	fill: currentColor;
}


.mdp-lightbox-arrow:hover {
	border-color:
		rgba(
			255,
			255,
			255,
			0.29
		) !important;

	background:
		rgba(
			255,
			255,
			255,
			0.17
		) !important;
}


.mdp-lightbox-prev {
	left:
		25px !important;

	right:
		auto !important;
}


.mdp-lightbox-next {
	right:
		25px !important;

	left:
		auto !important;
}


/* =========================================================
   26. FOOTER LIGHTBOX
========================================================= */

.mdp-lightbox-footer {
	position: relative;
	z-index: 20;

	display: block;

	width: 100%;

	margin: 0;

	padding:
		0 25px 20px;
}


/* =========================================================
   27. DIDASCALIA
========================================================= */

.mdp-lightbox-caption {
	display: block;

	min-height: 20px;

	margin:
		0 0 12px 0;

	padding: 0;

	color:
		rgba(
			255,
			255,
			255,
			0.68
		);

	font-family:
		inherit;

	font-size:
		13px;

	font-weight:
		400;

	line-height:
		1.45;

	text-align:
		center;
}


/* =========================================================
   28. CONTENITORE MINIATURE
========================================================= */

.mdp-lightbox-thumbnails {
	display: flex;

	align-items: center;
	justify-content: flex-start;

	gap: 8px;

	width:
		max-content;

	max-width:
		100%;

	margin:
		0 auto;

	padding:
		6px;

	overflow-x:
		auto;

	overflow-y:
		hidden;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.08
		);

	border-radius:
		13px;

	background:
		rgba(
			255,
			255,
			255,
			0.045
		);

	scrollbar-width:
		thin;

	scroll-behavior:
		smooth;

	backdrop-filter:
		blur(12px);

	-webkit-backdrop-filter:
		blur(12px);
}


/*
 * Scrollbar WebKit.
 */
.mdp-lightbox-thumbnails::-webkit-scrollbar {
	height: 5px;
}


.mdp-lightbox-thumbnails::-webkit-scrollbar-track {
	background:
		transparent;
}


.mdp-lightbox-thumbnails::-webkit-scrollbar-thumb {
	border-radius:
		999px;

	background:
		rgba(
			255,
			255,
			255,
			0.20
		);
}


/* =========================================================
   29. SINGOLA MINIATURA
========================================================= */

.mdp-thumbnail {
	position: relative !important;

	display: block !important;

	width: 64px !important;
	min-width: 64px !important;
	max-width: 64px !important;

	height: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;

	margin: 0 !important;
	padding: 0 !important;

	border:
		2px solid
		transparent !important;

	border-radius:
		8px !important;

	background:
		transparent !important;

	overflow:
		hidden;

	cursor:
		pointer;

	opacity:
		0.50;

	flex:
		0 0 64px;

	transform:
		translateY(0);

	transition:
		opacity
		0.25s ease,
		border-color
		0.25s ease,
		transform
		0.25s ease;
}


.mdp-thumbnail img {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border:
		0 !important;

	object-fit:
		cover;
}


.mdp-thumbnail:hover {
	opacity:
		0.88;
}


.mdp-thumbnail.mdp-thumbnail-active {
	border-color:
		var(
			--mdp-lightbox-accent
		) !important;

	opacity:
		1;

	transform:
		translateY(-2px);
}


/* =========================================================
   30. LOADER
========================================================= */

.mdp-lightbox-loader {
	position: absolute;

	top: 50%;
	left: 50%;

	display: block;

	width: 42px;
	height: 42px;

	margin-top:
		-21px;

	margin-left:
		-21px;

	border:
		3px solid
		rgba(
			255,
			255,
			255,
			0.18
		);

	border-top-color:
		#ffffff;

	border-radius:
		50%;

	opacity:
		0;

	visibility:
		hidden;

	animation:
		mdp-albums-loader
		0.75s
		linear
		infinite;

	transition:
		opacity
		0.2s ease;

	pointer-events:
		none;
}


.mdp-lightbox-image.mdp-image-loading
+
.mdp-lightbox-loader {
	opacity:
		1;

	visibility:
		visible;
}


@keyframes mdp-albums-loader {

	to {
		transform:
			rotate(360deg);
	}

}


/* =========================================================
   31. BLOCCO SCROLL QUANDO LIGHTBOX APERTA
========================================================= */

html.mdp-lightbox-open,
body.mdp-lightbox-open {
	overflow:
		hidden !important;

	overscroll-behavior:
		none;
}


/* =========================================================
   32. DESKTOP PICCOLO / TABLET LANDSCAPE
========================================================= */

@media
(max-width: 1200px) {

	.mdp-lightbox-stage {
		padding-right:
			78px;

		padding-left:
			78px;
	}

}


/* =========================================================
   33. TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

	.elementor-widget-mdp_albums .mdp-albums-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr)) !important;

		width: 100% !important;
		max-width: 100% !important;

		overflow: visible;
	}

	.elementor-widget-mdp_albums .mdp-album-card {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.mdp-album-cover {
		height: 340px;
	}

	.mdp-album-content {
		padding: 24px;
	}

	.mdp-lightbox-stage {
		padding: 18px 70px;
	}

}


/* =========================================================
   34. MOBILE
========================================================= */

@media (max-width: 767px) {

	/*
	 * Impedisce qualsiasi overflow generato
	 * dal widget o dal grid Elementor.
	 */
	.elementor-widget-mdp_albums,
	.elementor-widget-mdp_albums >
	.elementor-widget-container,
	.mdp-albums-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}


	/* =====================================================
	   GRIGLIA
	===================================================== */

	.elementor-widget-mdp_albums
	.mdp-albums-grid {
		display: grid !important;

		grid-template-columns:
			minmax(0, 1fr) !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		gap: 18px !important;

		overflow: visible;

		align-items: stretch !important;
		justify-items: stretch !important;
	}


	/* =====================================================
	   CARD
	===================================================== */

	.elementor-widget-mdp_albums
	.mdp-album-card {
		display: block !important;

		grid-column:
			1 / -1 !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;

		transform: none;
	}


	.mdp-album-card:hover {
		transform: none;
	}


	/* =====================================================
	   COPERTINA
	===================================================== */

	.mdp-album-cover {
		width: 100% !important;
		max-width: 100% !important;

		height: 330px;
	}


	/* =====================================================
	   TESTI
	===================================================== */

	.mdp-album-content {
		gap: 14px;

		padding: 22px;
	}


	.mdp-album-date {
		font-size: 21px;
	}


	.mdp-album-eyebrow {
		font-size: 9px;

		letter-spacing: 0.12em;
	}


	.mdp-album-description {
		max-width: 100%;

		font-size: 13px;
	}


	/* =====================================================
	   FRECCIA DELLA CARD
	===================================================== */

	.mdp-album-open-icon {
		width: 42px !important;
		min-width: 42px !important;
		max-width: 42px !important;

		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;

		flex:
			0 0 42px;
	}


	/* =====================================================
	   BADGE FOTO
	===================================================== */

	.mdp-album-top {
		top: 15px;
		right: 15px;
		left: 15px;
	}


	.mdp-album-count {
		padding:
			8px 11px !important;

		font-size: 11px;
	}


	/* =====================================================
	   LIGHTBOX - TOPBAR
	===================================================== */

	.mdp-lightbox-topbar {
		min-height: 64px;

		gap: 10px;

		padding: 10px 13px;
	}


	.mdp-lightbox-heading {
		gap: 8px;

		max-width:
			calc(100% - 55px);
	}


	.mdp-lightbox-title {
		max-width: 190px;

		font-size: 14px;
	}


	.mdp-lightbox-counter {
		font-size: 10px;
	}


	.mdp-lightbox-close {
		width: 42px !important;
		min-width: 42px !important;
		max-width: 42px !important;

		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;

		flex:
			0 0 42px;
	}


	/* =====================================================
	   LIGHTBOX - IMMAGINE
	===================================================== */

	.mdp-lightbox-stage {
		padding:
			12px 8px 68px;
	}


	.mdp-lightbox-image {
		max-width:
			calc(100vw - 16px) !important;

		max-height:
			calc(100dvh - 220px) !important;

		border-radius: 5px;
	}


	/* =====================================================
	   LIGHTBOX - FRECCE
	===================================================== */

	.mdp-lightbox-arrow {
		top: auto !important;
		bottom: 8px !important;

		width: 46px !important;
		min-width: 46px !important;
		max-width: 46px !important;

		height: 46px !important;
		min-height: 46px !important;
		max-height: 46px !important;

		transform: none;
	}


	.mdp-lightbox-prev {
		left:
			calc(50% - 56px) !important;

		right:
			auto !important;
	}


	.mdp-lightbox-next {
		right:
			calc(50% - 56px) !important;

		left:
			auto !important;
	}


	/* =====================================================
	   LIGHTBOX - FOOTER
	===================================================== */

	.mdp-lightbox-footer {
		padding:
			0 10px
			calc(
				10px +
				env(safe-area-inset-bottom)
			);
	}


	.mdp-lightbox-caption {
		display: none;
	}


	/* =====================================================
	   LIGHTBOX - MINIATURE
	===================================================== */

	.mdp-lightbox-thumbnails {
		max-width:
			calc(100vw - 20px);
	}


	.mdp-thumbnail {
		width: 56px !important;
		min-width: 56px !important;
		max-width: 56px !important;

		height: 46px !important;
		min-height: 46px !important;
		max-height: 46px !important;

		flex:
			0 0 56px;
	}

}


/* =========================================================
   35. MOBILE PICCOLO
========================================================= */

@media (max-width: 480px) {

	.elementor-widget-mdp_albums
	.mdp-albums-grid {
		grid-template-columns:
			minmax(0, 1fr) !important;
	}


	.elementor-widget-mdp_albums
	.mdp-album-card {
		width: 100% !important;
		max-width: 100% !important;
	}


	.mdp-album-cover {
		height: 300px;
	}


	.mdp-album-content {
		padding: 19px;
	}


	.mdp-album-date {
		font-size: 20px;
	}


	.mdp-album-eyebrow {
		font-size: 9px;
	}


	.mdp-album-open-icon {
		width: 39px !important;
		min-width: 39px !important;
		max-width: 39px !important;

		height: 39px !important;
		min-height: 39px !important;
		max-height: 39px !important;

		flex:
			0 0 39px;
	}


	.mdp-lightbox-title {
		max-width: 145px;
	}

}


/* =========================================================
   36. HOVER SOLO SU DISPOSITIVI CHE LO SUPPORTANO
========================================================= */

@media
(hover: hover) and
(pointer: fine) {

	.mdp-album-card:hover
	.mdp-album-image {
		transform:
			scale(
				var(
					--mdp-image-scale
				)
			);
	}

}


/* =========================================================
   37. ACCESSIBILITÀ
========================================================= */

.mdp-lightbox button:focus {
	outline:
		none;
}


.mdp-lightbox button:focus-visible,
.mdp-thumbnail:focus-visible {
	outline:
		2px solid
		#ffffff !important;

	outline-offset:
		3px;
}


/* =========================================================
   38. RIDUZIONE ANIMAZIONI
========================================================= */

@media
(prefers-reduced-motion: reduce) {

	.mdp-album-card,
	.mdp-album-image,
	.mdp-album-title,
	.mdp-album-open-icon,
	.mdp-lightbox,
	.mdp-lightbox-image,
	.mdp-thumbnail,
	.mdp-lightbox-close,
	.mdp-lightbox-arrow {
		transition:
			none !important;

		animation-duration:
			0.01ms !important;

		animation-iteration-count:
			1 !important;
	}

}