/* Table of contents
	00.	  Resets
	01    Utilities
    02.   Colori (riga 222)
	03.	  Fonts
    04.   Body Styles
    05.   Container
    06.   Links 
    07.   Headings
	08.	  Font customs
    09.   Borders
	10.	  Borders
	11.	  Header
    12.   Menù
	11.0  CARDS - fondo bianco e senza footer classi in comune nelle pagine:
		  COSA VEDERE/COSA FARE/MANGIARE/DORMIRE/SERVIZI/SHOPPING 
	11.1  CARDS - footer grigio
	12.0  HOME - Hero
    12.1  HOME - Colonna  Eventi e News
    12.2  HOME - Caroselli Swiper Eventi e News 
	12.3  HOME - Scopri la Riviera
    12.4  HOME - Video Recenti
    12.5  HOME - Newsletter e Meteo
	12.1  Footer
    12.2  Footer bottom
    14.1  LOCALITA' - pagina tutte le località
    14.2  LOCALITA' - pagina- singola località
	15.   POST - pagina singolo post
	16.   COSA VEDERE - Form Cerca per tipologia-località
	17.1  EVENTI pagina
	17.2  EVENTI pagina e WEBTV pagina -CARDS
	18.	  
	19.   SEARCH BAR orizzontale - cerca una struttura
	20.	  
	21.   ATTRAZIONI pagina
	22.   ATTIVITA' pagina
	22.1  ATTIVITA' Servizi (Amenities)
	22.3  ATTIVITA' Moduli Prenotazione
	23.1  WEB-TV - pagina
	23.2  VIDEO - pagina (pagina dettaglio di WEBTV)
	24.	  COSA VEDERE/COSA FARE/MANGIARE/DORMIRE/SERVIZI/EVENTI/NEWS Classi in comune per la testata
	25	  SHOPPING 
	26	 404 e 500 pagine 
*/

/* ------------------- */
/* 00 Reset             */
/* ------------------- */

/* Box sizing */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
  scroll-behavior: auto !important; /* disabilita l'effetto di scroll smooth impostatto da altri css... */
}

/* Reset margini */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
	margin: 0;
}

/* accessibility - rimuove le animazioni per chi le ha disattivate */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}
/* 
----------------------  
    01 Utilities         
---------------------- 
*/
.plyr__poster {
	background-color: #fff;
	background-size: cover   !important;  /* scala e ritaglia per riempire */
	background-position: center center !important; /* centra il focus */
	background-repeat: no-repeat !important;
	width: 100%  !important;
	height: 100% !important;
}
/* Allineamento di due div nella stessa riga con space between*/
.flex-header-between {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-right: 30px;
}
@media (max-width: 767.98px) {
	.flex-header-between {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem; /* spazio verticale tra i due elementi */
	}
}

/*Descrizioni troncate - validi per tutto il sito*/
.truncate-descr-3 {
	display: -webkit-box; /* Flessibilità e compatibilità */
	line-clamp: 3; /* Proprietà standard per compatibilità futura */
	-webkit-line-clamp: 3; /* Numero massimo di righe */
	-webkit-box-orient: vertical; /* Orientamento del box */
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate-descr-4 {
	display: -webkit-box; /* Flessibilità e compatibilità */
	line-clamp: 4; /* Proprietà standard per compatibilità futura */
	-webkit-line-clamp: 4; /* Numero massimo di righe */
	-webkit-box-orient: vertical; /* Orientamento del box */
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate-descr-6 {
	display: -webkit-box; /* Flessibilità e compatibilità */
	line-clamp: 6; /* Proprietà standard per compatibilità futura */
	-webkit-line-clamp: 6; /* Numero massimo di righe */
	-webkit-box-orient: vertical; /* Orientamento del box */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Slide-up iniziale per un testo sopra una foto */
.slide-up-text {
	opacity: 0;
	transform: translateY(50px);
	animation: slideUp 1s ease-out forwards;
	animation-delay: 0.3s;
}

/* Definizione keyframes  per lo slide-up sopra*/
@keyframes slideUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Slide-down iniziale per un testo sopra una foto */
.slide-down-text {
	opacity: 0;
	transform: translateY(-50px);
	animation: slideDown 1s ease-out forwards;
	animation-delay: 0.3s;
}

/* Definizione keyframes  per lo slide-up sopra*/
@keyframes slideDown {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUpFade {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.slide-up-fade {
	animation: slideUpFade 0.8s ease-out 0.3s both;
}

.hr-custom {
	width: 60px;
	padding: 1px;
	background-color: var(--celeste-chiaro);
	border: none; /* Rimuove il bordo predefinito */
	margin: 0; /* Rimuove i margini predefiniti se necessario */
	text-align: left;
	opacity: 1;
	margin-top: 1.5rem;
	margin-bottom: 2.5rem;
}

/* in testa alla pagina */
.pageBreadcrumb {
	padding: 30px 0px;
}
.pageBreadcrumb div {
	text-transform: uppercase;
}
.pageBreadcrumb div:nth-of-type(2) {
	font-weight: bold;
}

.rettangoloFondoCeleste {
	padding: 20px;
	color: #ffffff;
	background-color: var(--celeste-chiaro);
	margin-bottom: 0;
}

.rettangoloFondoArancione {
	padding: 20px;
	color: #ffffff;
	background-color: var(--orange-chiaro);
	margin-bottom: 0;
}

.rettangoloFondoCelesteScuro {
	padding: 20px;
	color: #ffffff;
	background-color: var(--celeste-scuro);
	margin-bottom: 0;
}

/*  
----------------------------------
    02. Colori
----------------------------------
*/

:root {
	/* Celeste */
	--celeste-chiaro: #96c9da;
	--celeste-scuro: #67a3b8;

	/*Arancione*/
	--orange-chiaro: #de870f;
	--orange-red: #cf380f; /*arancione-rosso*/

	/* Colori del testo */
	--colore-testo: #464646;
	--testo-card-grigio: #aba9a5;
	--testo-card-grigio-scuro: #5f5f5f;

	/* Fondini */
	--colore-background: #ffffff;
	--fondino-arancione: #de880fb5;
	--fondino-celeste: #96c9da4d;

	/* Altri colori */
	--bordo-grigio: #ddd;
	--pallini-inattivi: #5f6c72;
	--grigio-medio: #8a8a8a;
}


.white {
	color: #ffffff;
}

.celeste {
	color: var(--celeste-chiaro);
}

.celesteScuro {
	color: var(--celeste-scuro);
}

.orange {
	color: var(--orange-chiaro);
}
.red {
	color: var(--orange-red);
}

.grey-scuro {
	color: var(--testo-card-grigio);
}

/*  
----------------------------------
   03. Fonts
----------------------------------
*/
:root {
	--ff-primario: "Amaranth", sans-serif;
	--ff-secondario: "Montserrat", sans-serif;
}
.Amaranth {
	font-family: var(--ff-primario);
}

/*  
----------------------------------
   04. Body styles
----------------------------------
*/

body {
	font-family: var(--ff-secondario), sans-serif;
	font-size: 14px;
	line-height: 1.6;
	background-color: var(--colore-background);
	color: var(--colore-testo);
}
/*  
----------------------------------
   05. Container
----------------------------------
*/
.container {
	max-width: 1280px;
}

/* Padding per i tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Padding per i telefoni */
@media (max-width: 767px) {
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/*  
----------------------------------
   06. Links
----------------------------------
*/
a:visited,
a:link {
	/* color: var(--celeste-chiaro); */
	color: var(--celeste-scuro);
	text-decoration: none;
}

a:hover,
a:active {
	/* color: var(--celeste-scuro); */
	color: var(--orange-chiaro);
	text-decoration: none;
}

a.hoverWhite:hover {
	text-decoration: underline !important;
}

/*  
----------------------------------
    07. Headings
----------------------------------
*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--ff-primario), sans-serif;
	font-weight: 400;
	color: var(--celeste-chiaro);
}

h1,
.h1 {
	font-size: 29px;
	line-height: 1.3;
}

@media (min-width: 992px) {
	h1,
	.h1 {
		font-size: 36px;
	}
}

h2,
.h2 {
	font-size: 26px;
	line-height: 1.3;
}

@media (min-width: 992px) {
	h2,
	.h2 {
		font-size: 33px;
	}
}

h3,
.h3 {
	font-size: 22px;
	line-height: 1.2;
}

@media (min-width: 992px) {
	h3,
	.h3 {
		font-size: 29px;
	}
}

h4,
.h4 {
	font-size: 20px;
	line-height: 1.2;
}

@media (min-width: 992px) {
	h4,
	.h4 {
		font-size: 24px;
	}
}

h5,
.h5 {
	font-size: 17px;
	line-height: 1.2;
}

@media (min-width: 992px) {
	h5,
	.h5 {
		font-size: 20px;
	}
}

h6,
.h6 {
	font-size: 14px;
	line-height: 1.2;
}

@media (min-width: 992px) {
	h6,
	.h6 {
		font-size: 17px;
	}
}

/*  
----------------------------------
	08. Font custom
----------------------------------
*/

a.bigTitleMont {
	font-family: var(--ff-secondario), sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--celeste-chiaro);
	text-decoration: none;
}

.bigTitleMont:hover {
	color: var(--orange-chiaro);
}

.testoPiccoloUppercase {
	font-size: 13px;
	color: var(--colore-testo);
	text-transform: uppercase;
	margin: 0;
}

.titoloExtraLarge {
	font-family: var(--ff-primario), sans-serif;
	font-weight: 500;
	font-size: 90px; /* Dimensione base per schermi grandi */
}

.titoloLarge {
	font-family: var(--ff-primario), sans-serif;
	font-weight: 700;
	font-size: 50px; /* Dimensione base per schermi grandi */
}

.titoloMedium {
	font-family: var(--ff-primario), sans-serif;
	font-size: 45px; /* Dimensione base per schermi grandi */
}

/* Schermi medi (tablet) */
@media (max-width: 768px) {
	.titoloExtraLarge {
		font-size: 70px;
	}
	.titoloLarge {
		font-size: 40px;
	}
	.titoloMedium {
		font-size: 30px;
	}
}

.sottoTitoloLarge {
	font-family: var(--ff-secondario), sans-serif;
	font-weight: 400;
	font-size: 16px;
	text-transform: uppercase;
}
.sottoTitolo {
	font-family: var(--ff-secondario), sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.9;
}

/* Tablet) */
@media (max-width: 992px) {
	.sottoTitolo {
		font-size: 15px;
	}
}

/* Smartphone in orizzontale o tablet verticale */
@media (max-width: 768px) {
	.sottoTitolo {
		font-size: 14px;
	}
}

/* Smartphone in verticale) */
@media (max-width: 576px) {
	.sottoTitolo {
		font-size: 13px;
	}
}

.calendarFont {
	font-size: 0.9rem !important;
}
/*  
----------------------------------
   	09. B U T T O N S (da fare)
----------------------------------
*/

/*  
----------------------------------
   	10. Borders
----------------------------------
*/
.topBorderWhite {
	border-top: 2px solid #faf8f5;
}

/*  
----------------------------------
    11. Header
----------------------------------
*/
header {
	padding-top: 8px;
	padding-bottom: 10px;
}

/* logo */
#aLogo img {
	max-width: 260px;
	height: auto;
}

/* web tv */
#aMenuWebTV {
	display: block;
	width: 121px;
	height: 45px;
	background: url(../assets/images/web-tv-logo.png);
	background-position: top left;
}

#aMenuWebTV:hover {
	background-position: bottom left;
}

@media (max-width: 767.98px) {
	#logo_heading {
		padding-top: 15px;
	}
	#aLogo img {
		max-width: 200px;
		height: auto;
	}
}

@media (max-width: 1023.98px) {
	#logo_heading h3 {
		line-height: 1.2;
		margin-bottom: 0;
	}
	#aLogo img {
		max-width: 220px;
		height: auto;
	}
}

/*  
----------------------------------
    12. Menù
----------------------------------
*/
/* menu navbar */
#rdctv_main_menu {
	background-color: var(--celeste-chiaro);
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (max-width: 767.98px) {
	#rdctv_main_menu {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* menu voices */
#navbarNavDropdown a {
	font-family: "Amaranth", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	color: #ffffff;
	letter-spacing: 0.04rem;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	#navbarNavDropdown a {
		font-size: 12px;
		letter-spacing: unset;
	}
}

#navbarNavDropdown a:hover,
#navbarNavDropdown a.active {
	color: var(--celeste-scuro);
}

#navbarNavDropdown a.nav-link.dropdown-toggle {
	border: 1px solid #ffffff;
	color: #ffffff;
}

ul.dropdown-menu.lingue.show {
	background-color: var(--celeste-chiaro);
}

@media (max-width: 767.98px) {
    #rdctv_main_menu .languages a.dropdown-toggle {
		margin-top: 10px;
		margin-bottom: 15px;
        padding: 8px 15px;
		display: inline-block;
    }
}


/*  
---------------------------------------------------------
    11.0 CARDS LOGO IN HOVER sopra le immagini
---------------------------------------------------------
*/
.card {
	border-radius: 0;
}

.card-img-top {
	border-radius: 0;
}

.card-TVhover {
	/* logo hover sulle immagini delle card*/
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.3s;
}

.card:hover .card-TVhover {
	/* logo hover sulle immagini delle card*/
	opacity: 0.8;
}

.card-footer {
	border-top: 1px solid #f0eeeb;
}

/*
---------------------------------------------------
    11.1 	CARDS Fondo Bianco senza footer
---------------------------------------------------
*/
.card-fondo-bianco {
	border: 1px solid var(--bordo-grigio);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra */
	position: relative; /* posizionamento per il logo hover sulle immagini*/
}

.card-fondo-bianco:hover {
	transform: scale(1.03); /* Ingrandisce leggermente la card */
	transition: transform 0.3s ease;
}

.card-fondo-bianco .card-img-top {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.card-fondo-bianco .card-text {
	font-size: 0.9em;
	text-transform: uppercase;
	color: var(--testo-card-grigio-scuro);
}

.card-fondo-bianco .card-text span {
	font-size: 1em;
	color: var(--testo-card-grigio);
}

/*
---------------------------------------------------------
    12.0 HOME - HERO
---------------------------------------------------------
*/
.hero-descr {
	position: relative;
	background-image: url("../assets/images/home/anteprime-eventi-news-video-bkg.webp");
	height: 500px;
	background-attachment: fixed; /* Effetto parallax */
	background-size: cover;
	background-position: center center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 1;
}
.hero-descr .hero-testo {
	position: relative;
	z-index: 2;
	font-family: var(--ff-primario);
	color: #fff;
	padding: 1rem;
	font-size: 40px;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

/* Responsive: solo ciò che serve */
@media (max-width: 768px) {
	.hero-descr {
		height: 400px;
		background-attachment: scroll;
	}
}

/*
---------------------------------------------------------
    12.1 HOME - colonna Eventi e News
---------------------------------------------------------
*/
.eventi-news-home {
	background-color: #ffffff;
	margin-top: -50px;
	padding: 20px 30px;
	z-index: 10;
}

.card-eventi-news {
	border: 1px solid var(--bordo-grigio);
	box-shadow: 1px 5px 7px rgba(0, 0, 0, 0.15);
	position: relative; /* posizionamento per il logo hover sulle immagini*/
}

.card-eventi-news .card-img-top {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.card-eventi-news .card-img-top {
		aspect-ratio: 16 / 9; /* rettangolare su small screen*/
	}
}

.card-eventi-news .card-title {
	height: 90px;
}
.card-eventi-news .card-footer {
	min-height: 60px;
}

.card-eventi-news .card-footer p {
	font-size: 0.9em;
	text-transform: uppercase;
	color: var(--testo-card-grigio-scuro);
}

.card-eventi-news .card-footer span {
	font-size: 0.9em;
	color: var(--testo-card-grigio);
}

.card-eventi-news:hover {
	transform: scale(1.03); /* Ingrandisce leggermente la card */
	transition: transform 0.3s ease; /* Effetto di transizione graduale */
}
/*  
---------------------------------------------------------
    12.2 HOME - caroselli Swiper Eventi e News
---------------------------------------------------------
*/
/* Stili per i caroselli Eventi e News - .homeEventsSlider */
.swiper-container.homeEventsSlider {
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* Slide dei caroselli Eventi/News */
.swiper-container.homeEventsSlider .swiper-wrapper {
	padding-bottom: 10px;
	display: flex;
}

.swiper-container.homeEventsSlider .swiper-slide {
	padding: 10px;
	flex: 0 0 auto; /* Assicura che le slide non siano flessibili */
	width: auto; /* Lascia che Swiper gestisca la larghezza delle slide */
	box-sizing: border-box;
}

/* Custom Pagination Dots per i caroselli Eventi/News */
.swiper-container.homeEventsSlider .swiper-pagination-bullet {
	background-color: #5f6c72;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	margin-left: 8px;
}

.swiper-container.homeEventsSlider .swiper-pagination-bullet-active {
	background-color: var(--celeste-scuro);
	transform: scale(1.2);
}

/* Posizionamento della Pagination Dots per i caroselli Eventi/News */
.swiper-container.homeEventsSlider .swiper-pagination {
	position: relative;
	margin-top: 20px;
	text-align: center;
}
/*  
---------------------------------------------------------
    12.3 HOME - Scopri la Riviera
---------------------------------------------------------
*/
/* foto parallax larghezza piena testata div  */
div.scopri-la-riviera {
	position: relative;
	background-image: url("../assets/images/home-scopriconero/home-scopriconero-background.jpg");
	height: 500px;
	background-attachment: fixed; /* Effetto parallax */
	background-size: cover;
	background-position: right center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
/* Responsive: solo ciò che serve */
@media (max-width: 768px) {
	div.scopri-la-riviera {
		height: 400px;
		background-attachment: scroll;
	}
}
div.scopri-la-riviera-overlay {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
}
.scopri-la-riviera .scopri-la-riviera-testo {
	position: relative;
	z-index: 3;
	font-family: var(--ff-primario);
	color: #fff;
	padding: 1rem;
	font-size: 50px;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

/* elenco 6 immagini call to action scopri la riviera */
section.scopri-riviera-elenco {
	position: relative;
	z-index: 2;
	margin-top: -120px;
	margin-bottom: 100px;
}

.scopri-riviera-img {
	position: relative;
	overflow: hidden;
}

.scopri-riviera-link {
	display: block;
	position: relative;
	transition: transform 0.3s ease;
}

.scopri-riviera-link img {
	height: 400px;
	object-fit: cover;
	width: 100%;
	display: block;
	transition: transform 0.3s ease;
}

@media (max-width: 576px) {
	.scopri-riviera-link img {
		height: 250px;
	}
}

.scopri-riviera-testo {
	width: 100%;
	max-width: 80%;
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -5%);
	color: #fff;
	text-align: center;
	background-color: rgba(150, 201, 218, 0.6);
	font-family: var(--ff-primario);
	font-size: 35px;
	line-height: 40px;
	font-weight: bold;
	padding: 10px 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	transition: background-color 0.3s ease;
}

/* Effetto hover: ingrandisce tutto e cambia colore del background del testo */
.scopri-riviera-link:hover {
	transform: scale(1.03);
}

.scopri-riviera-link:hover .scopri-riviera-testo {
	background-color: rgba(222, 136, 15, 0.7); /* colore arancio */
}

/*
------------------------------------------------
    12.4 HOME - Video Recenti
------------------------------------------------
*/
/* foto fissa larghezza piena testata div */
div.bkg-video-home {
	background-image: url("../assets/images/home/ultimi-video-bkg.jpg");
	background-size: cover;
	background-position: right center;
	height: 500px;
	overflow: hidden;
	margin-bottom: -100px;
	display: flex;
	justify-content: center; /* orizzontale */
	align-items: center; /* verticale */
}
/* Responsive: solo ciò che serve */
@media (max-width: 768px) {
	div.bkg-video-home {
		height: 400px;
	}
}

.bkg-video-home div {
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 45px;
	font-weight: bold;
	font-family: var(--ff-primario);
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

/* Stili per il carosello Video - swiperVideoCarosello */
.swiper-container.swiperVideoCarosello {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-bottom: 50px;
	margin-bottom: 160px;
}
@media (max-width: 768px) {
	.swiper-container.swiperVideoCarosello {
		margin-bottom: 80px;
	}
}

/* Slide del carosello Video */
.swiper-container.swiperVideoCarosello .swiper-wrapper {
	display: flex; /* Per garantire il corretto comportamento delle slide */
	padding-bottom: 20px;
}

.swiper-container.swiperVideoCarosello .swiper-slide {
	flex: 0 0 auto; /* Assicura che le slide non siano flessibili */
	width: 100%;
	box-sizing: border-box;
}

/* Custom Pagination Dots per il carosello Video */
.swiper-container.swiperVideoCarosello .swiper-pagination-bullet {
	background-color: var(--pallini-inattivi);
	width: 16px;
	height: 16px;
	margin-right: 8px;
	margin-left: 8px;
}

.swiper-container.swiperVideoCarosello .swiper-pagination-bullet-active {
	background-color: var(--celeste-scuro);
	transform: scale(1.2);
}

/* Posizionamento della Paginazione Swiper sotto il video */
.swiper-container.swiperVideoCarosello .swiper-pagination {
	position: absolute;
	bottom: 15px;
	text-align: center;
	z-index: 10;
}

.eventi-newsVideoDescr {
	position: relative;
	padding: 29px 50px 0 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #ffffff;
}

.aVideoDescrTitle {
	display: block;
	padding-top: 25px;
	font-family: "Amaranth", sans-serif;
	color: var(--celeste-chiaro);
}
/*  
------------------------------------------------
    12.5 HOME - Newsletter e Meteo
------------------------------------------------
*/
section.bottom-home {
	background-color: var(--fondino-celeste);
}
/*invito ad iscriversi alla Newsletter */
div.iscriviti-newsletter-home {
	text-align: center;
}
div.iscriviti-newsletter-home > div {
	padding-top: 30px;
	padding-bottom: 30px;
	color: var(--celeste-scuro);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 40px;
}

/* Il form non ha altezza forzata */
.iscriviti-newsletter-home form {
	text-align: center;
	max-width: 70%;
	margin: 0 auto;
}
@media (max-width: 768px) {
	div.iscriviti-newsletter-home > div {
		padding-top: 0;
		font-size: 24px;
	}
}
@media (max-width: 575.98px) {
	.iscriviti-newsletter-home form {
		max-width: 100%;
		margin-bottom: 60px;
	}
}

/* La pillola è separata dal form */
.newsletter-pillola {
	position: relative;
	height: 70px;
	border-radius: 50px;
	background: white;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	display: block;
}

/* Campo email */
.newsletter-pillola input[type="email"] {
	line-height: 70px;
	padding: 0 150px 0 30px;
	border: none;
	outline: none;
	background: #eee;
	width: 100%;
	display: block;
	border-radius: 50px 0 0 50px;
}

/* Bottone submit */
.newsletter-pillola input[type="submit"] {
	position: absolute;
	height: 50px;
	line-height: 50px;
	font-weight: 700;
	top: 10px;
	right: 10px;
	border-radius: 50px;
	padding: 0 25px;
	background: var(--celeste-scuro);
	color: white;
	cursor: pointer;
	border: none;
	outline: none;
}

.newsletter-pillola input[type="submit"]:hover {
	background: var(--orange-chiaro);
}

/* Checkbox */
.privacy-check {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--testo-card-grigio);
	display: inline-block;
	text-align: left; /* mantiene il testo allineato alla casella */
}
.privacy-check a {
	color: var(--celeste-scuro);
}
/* Messaggi di errore */
.newsletter-success {
	color: var(--blu);
	font-weight: bold;
	margin-top: 10px;
}
.newsletter-error {
	color: var(--orange-red);
	font-weight: bold;
	margin-top: 10px;
}
/*---------- Meteo --------*/
.bottom-home-meteo img {
	width: 100%;
	max-width: 296px;
	height: auto;
}
@media (max-width: 768px) {
	.bottom-home-meteo {
		text-align: center;
		padding-left: 0;
	}
}

/*
----------------------------------
    12.1 FOOTER
----------------------------------
*/
#divFooter {
	/* min-height: 348px; */
	padding: 40px 40px 30px;
	background-image: url(../assets/images/footer_corby.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-color: var(--celeste-chiaro);
	background-attachment: fixed;
	color: #ffffff;
}

@media (max-width: 991.98px) {
	#divFooter {
		background-attachment: scroll;
	}
}
@media (max-width: 768px) {
	#divFooter {
		padding: 5px 20px 20px;
	}
}

.footer-menu {
	font-family: "Amaranth", sans-serif;
	font-weight: 700;
	line-height: 2.2em;
}

.footer-menu a {
	color: #ffffff;
}
.footer-menu a:hover {
	color: var(--celeste-scuro);
}
p.footer-cta {
	color: var(--celeste-scuro);
	font-family: var(--ff-secondario);
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.8;
}

/*pagina fb */
#divHomeFB {
	overflow: hidden;
}

/*Icone social */
.social-icon {
	display: inline-block;
	font-size: 30px;
	margin-right: 30px; /* Margine tra le icone */
}
.social-icon .fa-brands.fa-facebook {
	color: #1877f2;
}
.social-icon .fa-brands.fa-youtube {
	color: #ff0000;
}



/*
----------------------------------
    12.2 FOOTER bottom
----------------------------------
*/

.footerCopyright {
	background-color: var(--celeste-scuro);
}

.footerCopyright a {
	color: var(--blu);
}

/*
-----------------------------------------------
    14.1 LOCALITA' - pagina tutte le località
-----------------------------------------------
*/

.slogan {
	position: absolute;
	z-index: 10;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	letter-spacing: 0.1rem;
}

.slogan h1 {
	color: #fff;
	font-size: 70px;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.slogan span {
	text-transform: uppercase;
	font-size: 34px;
	font-weight: 600;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.slogan p {
	text-transform: uppercase;
	font-size: 25px;
	font-weight: 600;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.slogan hr {
	width: 70px;
	height: 4px;
	border: none;
	margin-top: 20px;
	background-color: #fff;
	opacity: 1;
	}

/*---- CAROSELLO TESTATA LOCALITA' ----*/
/* Wrapper e main */
.swiperLocalita-wrap {
	position: relative;
}

.swiperLocalita-main img {
	width: 100%;
	height: 600px;
	object-fit: cover;
	display: block;
}

/* Thumbs overlay in basso a destra */
.swiperLocalita-overlay {
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	width: min(60vw, 520px);
	padding: 8px 0;
	z-index: 10;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.25));
}

/* Thumbs panoramiche 240x80 */
.swiperLocalita-thumbs .swiper-slide {
	width: 240px;
}
.swiperLocalita-thumbs img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	opacity: 0.8;
	transition: opacity 0.2s, transform 0.2s;
}
.swiperLocalita-thumbs .swiper-slide-thumb-active img {
	opacity: 1;
	transform: scale(1.02);
	outline: 2px solid #de870f;
	outline-offset: 2px;
}

@media (max-width: 991.98px) {
	/* tablet */
	.slogan h1 {
		font-size: 50px;
		line-height: 50px;
	}
	.slogan span {
		font-size: 28px;
	}
	.slogan p {
	font-size: 20px;
	}
	.swiperLocalita-main img {
		height: 500px;
	}
	.swiperLocalita-overlay {
		right: 1rem;
		bottom: 1rem;
		width: min(80vw, 520px);
	}
	.swiperLocalita-thumbs .swiper-slide {
		width: 200px;
	}
	.swiperLocalita-thumbs img {
		height: 70px;
	}
}
@media (max-width: 767.98px) {
	/* mobile */
	.swiperLocalita-main img {
		height: 380px;
	}
	.swiperLocalita-overlay {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		width: auto;
		padding: 6px;
	}
	.swiperLocalita-thumbs .swiper-slide {
		width: 160px;
	}
	.swiperLocalita-thumbs img {
		height: 60px;
	}
}

/*---- Introduzione alle località ----*/
.localita-tutte-intro {
	text-align: center;
	padding: 5%;
}

/*---- foto a tutta larghezza comuni di mare- collina- vini ----*/
div.localita-zone.mare {
	background-image: url("../assets/images/localita/localita-tutte/localita-tutte-mare.webp");
}
div.localita-zone.collina {
	background-image: url("../assets/images/localita/localita-tutte/localita-tutte-collina.webp");
}
div.localita-zone {
	position: relative;
	height: 600px;
	background-size: cover;
	background-position: center center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
/* Responsive: solo ciò che serve */
@media (max-width: 768px) {
	div.localita-zone {
		height: 400px;
	}
}

div.localita-zone div {
	position: relative;
	z-index: 3;
	font-family: var(--ff-primario);
	color: #fff;
	padding: 1rem;
	font-size: 50px;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

/*------- elenco dei comuni appartenenti alla stessa zona ---------*/
/* elenco 6 immagini call to action scopri la riviera */
section.localita-tutte-elenco {
	position: relative;
	z-index: 2;
	margin-top: -120px;
	margin-bottom: 160px;
}

/* Stile per le immagini */
.localita-tutte-link {
	display: block;
	position: relative;
	transition: transform 0.3s ease;
}

.localita-tutte-link:hover {
	transform: scale(1.03);
}

.localita-tutte-link:hover .localita-tutte-testo {
	background-color: rgba(222, 136, 15, 0.7);
}

.localita-tutte-testo {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, 50%);
	width: 100%;
	max-width: 70%;
	color: #fff;
	text-align: center;
	background-color: rgba(150, 201, 218, 0.6);
	font-family: var(--ff-primario);
	font-size: 45px;
	letter-spacing: 1px;
	font-weight: bold;
	padding: 10px 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	transition: background-color 0.3s ease;
}

.localita-tutte-link img {
	height: 400px;
	object-fit: cover;
	width: 100%;
	display: block;
	transition: transform 0.3s ease;
}

@media (max-width: 576px) {
	.localita-tutte-link img {
		height: 250px;
	}
}

/*-----------------------------------------------------
    14.2 LOCALITA' - pagina singola
------------------------------------------------------*/
/*---- parti in comune di tutte le località ----------*/

/*---------------------- Testata ---------------------*/
.testata-localita {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 650px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.testata-localita h1 {
	padding: 20px;
	color: rgb(255, 255, 255);
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
	.testata-localita {
		height: 450px;
	}
}

@media (max-width: 480px) {
	.testata-localita {
		height: 350px;
	}
}

/* Immagini specifiche per località */
.testata-localita.ancona {
	background-image: url("/assets/images/localita/localita-singole/ancona-testata.webp");
}
.testata-localita.portonovo {
	background-image: url("/assets/images/localita/localita-singole/portonovo-testata.webp");
}
.testata-localita.sirolo {
	background-image: url("/assets/images/localita/localita-singole/sirolo-testata.webp");
}
.testata-localita.numana {
	background-image: url("/assets/images/localita/localita-singole/numana-testata.webp");
}
.testata-localita.numana {
	background-image: url("/assets/images/localita/localita-singole/numana-testata.webp");
}
.testata-localita.marcelli {
	background-image: url("/assets/images/localita/localita-singole/marcelli-testata.webp");
}
.testata-localita.portorecanati {
	background-image: url("/assets/images/localita/localita-singole/portorecanati-testata.webp");
}
.testata-localita.camerano {
	background-image: url("/assets/images/localita/localita-singole/camerano-testata.webp");
}
.testata-localita.recanati {
	background-image: url("/assets/images/localita/localita-singole/recanati-testata.webp");
}
.testata-localita.loreto {
	background-image: url("/assets/images/localita/localita-singole/loreto-testata.webp");
}
.testata-localita.osimo {
	background-image: url("/assets/images/localita/localita-singole/osimo-testata.webp");
}
.testata-localita.castelfidardo {
	background-image: url("/assets/images/localita/localita-singole/castelfidardo-testata.webp");
}
.testata-localita.offagna {
	background-image: url("/assets/images/localita/localita-singole/offagna-testata.webp");
}
.testata-localita.agugliano {
	background-image: url("/assets/images/localita/localita-singole/agugliano-testata.webp");
}
.testata-localita.polverigi {
	background-image: url("/assets/images/localita/localita-singole/polverigi-testata.webp");
}

/*------------------- Dove Informarsi ----------------*/
.border-double {
	border-top: 4px double #d1d1d1;
	padding-top: 20px;
	padding-bottom: 20px;
}
.localita-info-box > div {
	font-weight: 600;
	color: var(--celeste-scuro);
}

/*------------- Testo che racconta la località --------------*/
.localita-descr {
	margin-bottom: 120px;
}

/*------------- DINTORNI ---------------------*/
/* Stile per le immagini */
.dintorni-foto {
	display: block;
	position: relative; /* Posizionamento relativo per centrare la scritta sopra*/
}

/* Contenitore per ritagliare l'immagine durante lo zoom */
.dintorni-foto-wrapper {
  overflow: hidden;
  position: relative; /* opzionale, aiuta con contenuti assoluti */
}

/* Stile base immagine */
.dintorni-foto-wrapper img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform 0.3s ease; /* aggiunge transizione */
}

/* Al passaggio del mouse sul link, scala l'immagine */
.dintorni-foto:hover .dintorni-foto-wrapper img {
  transform: scale(1.05); /* zoom al 105% */
}

/* Stile per il testo sopra l'immagine */
.dintorni-foto-testo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(150, 201, 218, 0.7);
	padding: 10px;
	font-weight: bold;
	text-align: center;
	transition: transform 0.3s ease;
}

/* Stile del link nel testo sopra l'immagine */
.dintorni-foto-testo {
	color: #fff;
}

/* Effetto hover sul testo sopra immagine*/
.dintorni-foto:hover .dintorni-foto-testo {
	background-color: rgba(222, 136, 15, 0.7); /*orange-chiaro al 70%*/
}

.fondo-celeste {
	height: 300px;
	margin-top: -200px;
	background-color: var(--celeste-chiaro);
}

/*------- EVENTI foto a tutta larghezza con cta utilizzato su tutte le pagine località --------*/
.anteprima-row.ancona-video {
	background-image: url("../assets/images/localita/localita-singole/ancona-video.webp");
}
.anteprima-row.portonovo-video {
	background-image: url("../assets/images/localita/localita-singole/portonovo-video.webp");
}
.anteprima-row.sirolo-video {
	background-image: url("../assets/images/localita/localita-singole/sirolo-video.webp");
}
.anteprima-row.numana-video {
	background-image: url("../assets/images/localita/localita-singole/numana-video.webp");
}
.anteprima-row.marcelli-video {
	background-image: url("../assets/images/localita/localita-singole/marcelli-video.webp");
}
.anteprima-row.portorecanati-video {
	background-image: url("../assets/images/localita/localita-singole/portorecanati-video.webp");
}
.anteprima-row.camerano-video {
	background-image: url("../assets/images/localita/localita-singole/camerano-video.webp");
}
.anteprima-row.recanati-video {
	background-image: url("../assets/images/localita/localita-singole/recanati-video.webp");
}
.anteprima-row.loreto-video {
	background-image: url("../assets/images/localita/localita-singole/loreto-video.webp");
}
.anteprima-row.osimo-video {
	background-image: url("../assets/images/localita/localita-singole/osimo-video.webp");
}
.anteprima-row.castelfidardo-video {
	background-image: url("../assets/images/localita/localita-singole/castelfidardo-video.webp");
}
.anteprima-row.offagna-video {
	background-image: url("../assets/images/localita/localita-singole/offagna-video.webp");
}
.anteprima-row.agugliano-video {
	background-image: url("../assets/images/localita/localita-singole/agugliano-video.webp");
}
.anteprima-row.polverigi-video {
	background-image: url("../assets/images/localita/localita-singole/polverigi-video.webp");
}

.anteprima-row.ancona-eventi {
	background-image: url("../assets/images/localita/localita-singole/ancona-eventi.webp");
}
.anteprima-row.portonovo-eventi {
	background-image: url("../assets/images/localita/localita-singole/portonovo-eventi.webp");
}
.anteprima-row.sirolo-eventi {
	background-image: url("../assets/images/localita/localita-singole/sirolo-eventi.webp");
}
.anteprima-row.numana-eventi {
	background-image: url("../assets/images/localita/localita-singole/numana-eventi.webp");
}
.anteprima-row.marcelli-eventi {
	background-image: url("../assets/images/localita/localita-singole/marcelli-eventi.webp");
}
.anteprima-row.portorecanati-eventi {
	background-image: url("../assets/images/localita/localita-singole/portorecanati-eventi.webp");
}
.anteprima-row.camerano-eventi {
	background-image: url("../assets/images/localita/localita-singole/camerano-eventi.webp");
}
.anteprima-row.recanati-eventi {
	background-image: url("../assets/images/localita/localita-singole/recanati-eventi.webp");
}
.anteprima-row.loreto-eventi {
	background-image: url("../assets/images/localita/localita-singole/loreto-eventi.webp");
}
.anteprima-row.osimo-eventi {
	background-image: url("../assets/images/localita/localita-singole/osimo-eventi.webp");
}
.anteprima-row.castelfidardo-eventi {
	background-image: url("../assets/images/localita/localita-singole/castelfidardo-eventi.webp");
}
.anteprima-row.offagna-eventi {
	background-image: url("../assets/images/localita/localita-singole/offagna-eventi.webp");
}
.anteprima-row.agugliano-eventi {
	background-image: url("../assets/images/localita/localita-singole/agugliano-eventi.webp");
}
.anteprima-row.polverigi-eventi {
	background-image: url("../assets/images/localita/localita-singole/polverigi-eventi.webp");
}

.anteprima-row {
	position: relative;
	height: 500px;
	background-attachment: fixed; /* Effetto parallax */
	background-size: cover;
	background-position: center center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 100px;
}
.anteprima-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 1;
}
.anteprima-descr {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 1rem;
}

.anteprima-descr a {
	display: inline-block;
	color: #fff;
	padding: 10px 25px;
	background-color: rgba(150, 201, 218, 0.6);
	transition: background-color 0.3s ease;
}

.anteprima-descr a:hover {
	background-color: rgba(222, 136, 15, 0.7); /*orange-chiaro al 70%*/
	color: #fff;
}

.anteprima-descr div {
	color: #fff;
	font-family: var(--ff-primario);
	font-size: 40px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: 1px;
}
.anteprima-descr p {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Responsive: solo ciò che serve */
@media (max-width: 768px) {
	.anteprima-row {
		height: 400px;
		background-attachment: scroll;
	}
	.anteprima-descr div {
		font-size: 30px;
		line-height: 38px;
	}
}

@media (max-width: 480px) {
	.anteprima-row {
		height: 300px;
	}
}
/*---------------- Organizza vacanza --------------------------*/
.organizza-vacanza {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 120px;
}

.organizza-vacanza-text {
	color: var(--celeste-scuro);
	font-size: 40px;
	font-weight: 600;
}

.organizza-vacanza p {
	color: var(--celeste-scuro);
	font-size: 20px;
	font-weight: 500;
}
@media (max-width: 768px) {
	.organizza-vacanza {
		padding: 40px 0px 80px;
	}
	.organizza-vacanza-text {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/*
---------------------------------------------------
    15  Post Pagina Singola
---------------------------------------------------
*/
div.post-content {
	padding: 0px 30px 50px 0;
}
div.post-item article {
	background-color: white;
}
div.post-item .row {
	align-items: flex-start;
}
@media (max-width: 767.98px) {
	div.postComments {
		margin-bottom: 50px;
	}
}

.testoPost p {
	text-align: left;
	line-height: 25px;
	padding-bottom: 20px;
}

.testoPost * {
	color: var(--colore-testo);
}

div.post-image img {
	margin-bottom: 30px;
	width: 100%;
	height: auto;
}

/* social con i colori originali*/
div.postLinkSocial {
	font-size: 24px;
	color: var(--grigio-medio);
	display: flex;
	padding: 20px 0;
	border-top: 1px solid var(--bordo-grigio);
	border-bottom: 1px solid var(--bordo-grigio);
	justify-content: center;
	align-items: center;
}

@media (max-width: 767.98px) {
	div.postLinkSocial {
		display: block;
		text-align: center;
	}
}

div.postLinkSocial i {
	font-size: 30px;
	padding-left: 20px;
}

a.social-facebook {
	color: #1877f2;
}

a.social-youtube {
	color: #ff0000;
}

a.social-pinterest {
	color: #e60023;
}

/* Hover opzionale */
.social-facebook:hover,
.social-youtube:hover,
.social-pinterest:hover {
	transform: scale(1.2);
}

/* sidebar destra */
div.post-item section {
	background-color: white;
	margin-bottom: 20px;
}
div.schede-laterali {
	padding: 10px 15px;
}

.schede-laterali a {
	display: flex;
	align-items: center;
}

.schede-laterali img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Ombra sotto l'immagine */
	transition: transform 0.3s ease; /* Effetto hover */
}

.schede-laterali img:hover {
	transform: scale(1.05); /* Leggero ingrandimento al passaggio del mouse */
}

.schede-laterali .schede-laterali-text,
.schede-laterali .info-utili-text {
	margin-left: 15px;
}
.schede-laterali .schede-laterali-text p {
	color: var(--colore-testo);
}
.schede-laterali .schede-laterali-text p.tipo {
	text-transform: uppercase;
	font-size: 0.9em;
}
.schede-laterali .schede-laterali-text p.localita {
	text-transform: uppercase;
	font-size: 0.9em;
	color: var(--testo-card-grigio);
}

.schede-laterali .info-utili-text p {
	/* font-weight: 700; */
	line-height: 2rem;
	/* color: var(--grigio-medio); */
	color: var(--colore-testo);
}
.schede-laterali .info-utili-text i {
	margin-right: 6px;
	color: var(--celeste-chiaro);
	font-size: 20px;
	width: 20px;
}

/*icone social delle attività */
.icone-social-struttura {
	margin-left: 15px;
	display: flex;
	gap: 16px;
	margin-top: 1rem;
}

.icone-social-struttura a {
	width: 40px;
	height: 40px;
	background-color: #d9d9d9;
	color: white;
	border-radius: 50%; /* cerchio */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	text-decoration: none;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.icone-social-struttura a:hover {
	background-color: var(--celeste-scuro);
	transform: scale(1.1);
}

/*
------------------------------------------------------------
    16.  COSA VEDERE - Form Cerca per tipologia-località
------------------------------------------------------------
*/
/* Stile del contenitore principale */
.form.form_cosaVedereCerca {
	padding: 20px 15px;
	background-color: #f9f8f4;
	border: 1px solid #e0e0e0;
	border-radius: 0px;
}

/* Stile del titolo */
.form.form_cosaVedereCerca h5 {
	font-weight: 700;
	color: var(--celeste-scuro);
	margin-bottom: 1rem;
	text-transform: uppercase;
}

/* Stile delle checkbox con allineamento orizzontale */
.form.form_cosaVedereCerca .form-check {
	display: flex;
	align-items: center; /*Allinea il checkbox e l'etichetta sulla stessa linea*/
	margin-bottom: 8px;
}

.form.form_cosaVedereCerca .form-check-input {
	width: 18px;
	height: 18px;
	margin-right: 5px;
	margin-top: 0;
	margin-bottom: 0;
	border: 1px solid #c0c0c0;
	border-radius: 0px;
	background-color: #fff;
}

.form.form_cosaVedereCerca .form-check-label {
	font-size: 13px;
}

.form.form_cosaVedereCerca .form-check-input:checked {
	background-color: #9cc2d8;
	border-color: #9cc2d8;
}

/* Stile del pulsante di invio */
.form.form_cosaVedereCerca button.btn-primary {
	background-color: var(--orange-chiaro);
	border: none;
	border-bottom: 2px solid #cf380f;
	font-weight: bold;
	border-radius: 0;
}

.form.form_cosaVedereCerca button.btn-primary:hover {
	background-color: var(--celeste-chiaro);
	border-bottom: 2px solid #67a3b8;
}

/* Calendario sidebar sinistra CERCA */
.cercaData input[type="text"] {
	/* position: relative; */
	border-radius: 0;
	border: solid 1px var(--celeste-chiaro);
}

/* Hover effect */
.cercaData input[type="text"]:hover,
.cercaData input[type="text"]:focus {
	border-color: #80bdff;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}

@media (max-width: 1199.98px) {
	/* Fino a xl escluso */
	.cercaData .col-12.col-xl-6:nth-child(2) {
		margin-top: 1.5rem; /* Imposta il margine superiore desiderato */
	}
}

/*
----------------------------------------------------
    17.1  EVENTI pagina
----------------------------------------------------
*/
/*--- paginazione ---*/
.bordiSopraSotto {
	margin: 0;
	padding-top: 10px;
	padding-bottom: 5px;
	border-top: solid 1px #c8c6c3;
	border-bottom: solid 1px #c8c6c3;
}
/* Modifica degli stili Bootstrap per la navigazione delle card degli eventi  */
.pagination {
	margin-bottom: 0;
}

/* Cambia il colore dei numeri della paginazione */
a.page-link {
	color: var(--colore-testo); /* Colore dei numeri */
	border: none; /* Rimuove il bordo dei link */
	background-color: transparent;
}

/* Cambia il colore e il background del numero attivo */
.page-item.active .page-link {
	background-color: var(--celeste-scuro); /* Background attivo */
	color: #ffffff; /* Colore del numero attivo */
	font-weight: bold;
	border-radius: 0;
}
/* Cambia il colore al passaggio del mouse */
.page-link:hover {
	color: var(--celeste-scuro); /* Colore hover */
	background-color: transparent; /* Nessun colore di sfondo per hover */
	font-weight: bold;
}
.ulDocs {
	list-style-type: none;
}
.ulDocs a, .ulDocs i {
	color: var(--celeste-scuro);
}
.ulDocs a:hover {
	color: var(--orange-chiaro);
}
.ulDocs li:has(> a:hover) i {
	color: var(--orange-chiaro);
}

/*
--------------------------------------------------------
    17.2 EVENTI pagina e WEBTV pagina -CARDS
--------------------------------------------------------
*/
.card-pagina-webtv,
.card-pagina-newslist,
.card-pagina-eventi {
	border: 1px solid var(--bordo-grigio);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra */
	position: relative; /* posizionamento per il logo hover sulle immagini*/
}

.card-pagina-webtv:hover,
.card-pagina-newslist:hover,
.card-pagina-eventi:hover {
	transform: scale(1.03); /* Ingrandisce leggermente la card */
	transition: transform 0.3s ease; /* Effetto di transizione graduale */
}

.card-pagina-webtv .card-img-top,
.card-pagina-newslist .card-img-top,
.card-pagina-eventi .card-img-top {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.card-pagina-webtv .card-img-top,
	.card-pagina-newslist .card-img-top,
	.card-pagina-eventi .card-img-top {
		aspect-ratio: 16 / 9; /* rettangolare su small screen*/
	}
}
.card-pagina-webtv .card-title{
	min-height: 50px;
}

.card-pagina-newslist .card-title,
.card-pagina-eventi .card-title {
	height: 70px;
}

.card-pagina-webtv .card-footer,
.card-pagina-newslist .card-footer,
.card-pagina-eventi .card-footer {
	min-height: 70px;
}
.card-pagina-webtv .card-footer p {
	font-weight: 400;
	font-size: 0.9rem;
	text-transform: uppercase;
}

.card-pagina-newslist .card-footer p,
.card-pagina-eventi .card-footer p {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var(--testo-card-grigio-scuro);
}

.card-pagina-webtv .card-footer span,
.card-pagina-newslist .card-footer span,
.card-pagina-eventi .card-footer span {
	font-size: 0.8rem;
	color: var(--testo-card-grigio);
}
/* .card-pagina-webtv .card-footer{
	background-color: #fff;
} */

/*
--------------------------------------------------------
    19.	SEARCH BAR orizzontale - cerca una struttura
--------------------------------------------------------
*/
/* Stile di base per schermi grandi */
.search-bar-section {
	background-color: var(--fondino-celeste);
	padding: 40px 0;
	/* margin-bottom: 80px; */
}

.arrow-wrapper {
	overflow: hidden;
}

/* Freccia per schermi grandi */
.arrow-container {
	background-color: var(--celeste-scuro);
	color: white;
	padding: 10px;
	text-align: center;
	clip-path: polygon(
		10px 0,
		calc(100% - 20px) 0,
		100% 50%,
		calc(100% - 20px) 100%,
		10px 100%
	);
	position: relative;
}

/* Layout orizzontale per schermi medi e grandi */
.formCercaOrizzontale {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.formCercaOrizzontale .form-group {
	flex-grow: 1;
}

.formCercaOrizzontale select {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 0px;
}

.formCercaOrizzontale button {
	/* font-family: var(--ff-secondario); */
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	background-color: var(--celeste-scuro);
	color: white;
	padding: 10px 30px;
	border: none;
	border-radius: 0px;
	cursor: pointer;
}

.formCercaOrizzontale button:hover {
	background-color: var(--orange-chiaro);
}

/* Media query per schermi piccoli */
@media (max-width: 767.98px) {
	.arrow-container {
		clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
		margin-bottom: 10px;
	}

	/* Layout verticale per il form */
	.formCercaOrizzontale {
		display: block;
		gap: 0;
	}

	.formCercaOrizzontale .form-group {
		margin-top: 25px;
		margin-bottom: 30px;
	}

	.formCercaOrizzontale select {
		width: 100%;
	}

	.formCercaOrizzontale button {
		width: 100%;
		padding: 10px 0;
	}
}

/* Media query per tablet (schermi tra 768px e 1024px) */
@media (max-width: 1024px) {
	.formCercaOrizzontale select {
		font-size: 15px; /* Riduce leggermente la dimensione del font per evitare che il testo tocchi i bordi */
		padding: 5px; /* Riduce leggermente il padding per dare più spazio al testo */
	}
}

/*
--------------------------------------------------------
    21.	ATTRAZIONI pagina
--------------------------------------------------------
*/

/* Carosello swiper pagina attrazioni*/
div.attrazione {
	width: 100%;
	position: relative;
}

/* Wrapper interno Swiper */
.attrazione .swiper-wrapper {
	transition-timing-function: cubic-bezier(
		0.25,
		0.46,
		0.45,
		0.94
	); /* effetto cinematico */
}

/* MOBILE: smartphone e piccoli schermi */
@media (max-width: 767.98px) {
	.attrazione .swiper-slide {
		height: 300px;
	}
}

/* TABLET: dispositivi medi */
@media (min-width: 768px) and (max-width: 991.98px) {
	.attrazione .swiper-slide {
		height: 400px;
	}
}

/* DESKTOP: laptop e schermi ampi */
@media (min-width: 992px) {
	.attrazione .swiper-slide {
		height: 450px;
	}
}

/* Immagine */
.attrazione .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.attrazione .swiper-slide img:hover {
	transform: scale(1.02);
}

/* Frecce di navigazione */
.attrazione .swiper-button-prev,
.attrazione .swiper-button-next {
	width: 48px;
	height: 48px;
	padding: 30px;
	background-color: var(--celeste-scuro);
	color: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.attrazione .swiper-button-prev:hover,
.attrazione .swiper-button-next:hover {
	background-color: var(--orange-chiaro);
	color: rgba(255, 255, 255);
}
/* Dimensione della freccia interna (pseudo-elemento) */
.attrazione .swiper-button-prev::after,
.attrazione .swiper-button-next::after {
	font-size: 35px;
}

/* Contenitore dei pallini */
.attrazione .swiper-pagination {
	position: relative;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Pallino base */
.attrazione .swiper-pagination-bullet {
	background-color: var(--pallini-inattivi); /* Colore dei pallini inattivi */
	width: 18px;
	height: 18px;
	margin-right: 8px;
	margin-left: 8px;
}

/* Pallino attivo */
.attrazione .swiper-pagination-bullet-active {
	background-color: var(--celeste-scuro);
	transform: scale(1.2);
}

/*
--------------------------------------------------------
    22.	ATTIVITA' pagina
--------------------------------------------------------
*/
/* Carosello swiper pagina attività */
div.struttura {
	width: 100%;
	position: relative;
}
/* Wrapper interno Swiper */
.struttura .swiper-wrapper {
	transition-timing-function: cubic-bezier(
		0.25,
		0.46,
		0.45,
		0.94
	); /* effetto cinematico */
}

/* MOBILE: smartphone e piccoli schermi */
@media (max-width: 767.98px) {
	.struttura .swiper-slide {
		height: 300px;
	}
}

/* TABLET: dispositivi medi */
@media (min-width: 768px) and (max-width: 991.98px) {
	.struttura .swiper-slide {
		height: 400px;
	}
}

/* DESKTOP: laptop e schermi ampi */
@media (min-width: 992px) {
	.struttura .swiper-slide {
		height: 450px;
	}
}

/* Immagine */
.struttura .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.struttura .swiper-slide img:hover {
	transform: scale(1.02);
}

/* Frecce di navigazione */
.struttura .swiper-button-prev,
.struttura .swiper-button-next {
	width: 48px;
	height: 48px;
	padding: 30px;
	background-color: var(--celeste-scuro);
	color: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.struttura .swiper-button-prev:hover,
.struttura .swiper-button-next:hover {
	background-color: var(--orange-chiaro);
	color: rgba(255, 255, 255);
}

/* Dimensione della freccia interna (pseudo-elemento) */
.struttura .swiper-button-prev::after,
.struttura .swiper-button-next::after {
	font-size: 35px;
}

/* Contenitore dei pallini */
.struttura .swiper-pagination {
	position: relative;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Pallino base */
.struttura .swiper-pagination-bullet {
	background-color: var(--pallini-inattivi); /* Colore dei pallini inattivi */
	width: 18px;
	height: 18px;
	margin-right: 8px;
	margin-left: 8px;
}

/* Pallino attivo */
.struttura .swiper-pagination-bullet-active {
	background-color: var(--celeste-scuro);
	transform: scale(1.2);
}

/*
--------------------------------------------------------
    22.1	ATTIVITA' Servizi (Amenities)
--------------------------------------------------------
*/
/* Lista dei servizi */
.lista-servizi {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5rem 1rem;
}

.lista-servizi li {
	display: flex;
	align-items: center;
	font-size: 0.95rem;
}

div.struttura-amenities ul {
	margin-left: 20px;
}
/*
--------------------------------------------------------
    22.3	ATTIVITA' Moduli Prenotazione
--------------------------------------------------------
*/
/* Moduli prenotazione attività tavolo oppure camera */
.prenota-tavolo-camera {
	padding: 10px 10px 35px;
	background-color: var(--fondino-celeste);
}

/* CLASSI DI SERVIZIO per i moduli prenotazione
a cura del backend*/
.divContactBoxLoader {
	padding: 15px 0;
	color: #464646;
}
.divContactBoxLoader img {
	vertical-align: middle;
	margin-left: 10px;
}
.none {
	display: none;
}
.divContactInvia {
	text-align: center;
}
.divContactInvia2-tavolo,
.divContactInvia2-camera {
	cursor: pointer;
	display: inline-block;
	background-color: var(--orange-chiaro);
	border-bottom: 3px solid var(--orange-red);
	padding: 0.5rem 1rem;
	margin: 20px auto 0 auto;
	color: #fff;
	font-size: 0.9rem;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
}
.divContactInvia2-tavolo:hover,
.divContactInvia2-camera:hover {
	background-color: var(--celeste-chiaro);
	border-bottom-color: var(--celeste-scuro);
}

/*
--------------------------------------------------------
	23.1	WEB-TV pagina
--------------------------------------------------------
*/
/* Stile desktop per la testata di canali e prenota*/
.canali-testata-elenco {
	background: url("../assets/images/canali-web-tv/inizia-il-tuo-viaggio.jpg");
	background-size: cover;
	background-position: center center;
	height: 500px;
	position: relative;
}

.canali-testata-prenota {
	background: url("../assets/images/canali-web-tv/dai-forma-al-tuo-viaggio.jpg");
	background-size: cover;
	background-position: center center;
	height: 500px;
	position: relative;
}

.canali-testata-elenco div,
.canali-testata-prenota div {
	color: rgb(255, 255, 255);
	position: absolute;
	top: 50%;
	transform: translateY(50%);
	width: 100%;
	text-align: center;
	font-size: 45px;
	font-weight: bold;
	font-family: var(--ff-primario);
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}

/* Stile telefono e tablet verticale per la testata di canali e prenota*/
@media (max-width: 768px) {
	.canali-testata-elenco,
	.canali-testata-prenota {
		height: 400px;
	}
	.canali-testata-elenco div {
		padding-left: 20px;
		padding-right: 20px;
		top: 15%;
		font-size: 40px;
		line-height: 42px;
	}
	.canali-testata-prenota div {
		padding-left: 20px;
		padding-right: 20px;
		top: 40%;
		font-size: 35px;
		line-height: 42px;
	}
}

/* Stile Desktop per l'elenco dei canali e prenota*/
.canali-elenco {
	margin-top: -80px;
	margin-bottom: 100px;
	z-index: 10;
}

.canale-webtv {
	position: relative;
	overflow: hidden;
}

.canale-webtv-link {
	display: block;
	transition: transform 0.3s ease;
}
.canale-webtv-immagine {
	position: relative;
}

.canale-webtv-immagine img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
	display: block;
}

.canale-webtv-testo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 60%;
	background-color: rgba(150, 201, 218, 0.6);
	color: #fff;
	text-align: center;
	padding: 15px 25px;
	transition: background-color 0.3s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.canale-webtv-testo > div {
	font-family: var(--ff-primario);
	font-size: 35px;
	line-height: 35px;
	font-weight: bold;
	margin-bottom: 10px;
}
.canale-webtv-testo > p {
	font-size: 18px;
	font-weight: bold;
}

/* Hover: ingrandisce immagine e cambia colore background del testo */
.canale-webtv-link:hover {
	transform: scale(1.03);
}

.canale-webtv-link:hover .canale-webtv-testo {
	background-color: var(--fondino-arancione);
}

div.canali-descr {
	margin-bottom: 70px;
}
div.canali-descr p:first-of-type {
	color: var(--celeste-chiaro);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.9;
}
/* Responsive: altezze immagine più basse su schermi piccoli */
@media (max-width: 768px) {
	.canale-webtv-immagine img {
		max-height: 250px;
	}

	.canale-webtv-testo > div {
		font-size: 1.5rem;
	}

	.canale-webtv-testo > p {
		font-size: 1rem;
	}
}

/* Stile telefono e tablet verticale per l'elenco dei canali e prenota*/
@media (max-width: 768px) {
}

/*
--------------------------------------------------------
	23.2	 VIDEO - pagina (pagina dettaglio di WEBTV)
--------------------------------------------------------
*/
div.video-title {
	padding: 30px 12px;
}
.video-title p {
	text-transform: uppercase;
	font-weight: 500;
}
.video-title p > a > span {
	color: var(--testo-card-grigio);
}
.video-title p > a:hover > span {
	color: var(--orange-chiaro);
}


/* ------------------------------------------------------------------- 
	24. COSA VEDERE/COSA FARE/MANGIARE/DORMIRE/SERVIZI/
		CLASSI IN COMUNE PER LA TESTATA                                      
------------------------------------------------------------------- */
/* testata foto fissa larghezza piena */
.attrazioni-servizi-testata.vedere {
	background-image: url("../assets/images/attrazioni-servizi/cosa-vedere-testata.webp");
}
.attrazioni-servizi-testata.mangiare {
	background-image: url("../assets/images/attrazioni-servizi/mangiare-testata.webp");
}
.attrazioni-servizi-testata.dormire {
	background-image: url("../assets/images/attrazioni-servizi/dormire-testata.webp");
}
.attrazioni-servizi-testata.divertimento {
	background-image: url("../assets/images/attrazioni-servizi/servizi-testata.webp");
}
.attrazioni-servizi-testata {
	background-size: cover;
	background-position: right center;
	height: 600px;
	overflow: hidden;
	margin-bottom: 60px;
	display: flex;
	justify-content: center; /* orizzontale */
	align-items: center; /* verticale */
}
/* Responsive: solo ciò che serve */
@media (max-width: 768px) {
	.attrazioni-servizi-testata {
		height: 400px;
	}
}
.attrazioni-servizi-testata div {
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 45px;
	font-weight: bold;
	font-family: var(--ff-primario);
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

/*
--------------------------------------------------------
	25	 SHOPPING 
--------------------------------------------------------
*/

.text-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 500px;
	background-color: #f8f8f8;
}

.text-banner h1 {
	font-size: 18vw;
	font-weight: 900;
	text-transform: uppercase;
	color: transparent;
	background: url("/assets/images/shopping/shopping-banner.webp") repeat-x;
	background-size: auto 100%;
	background-position: 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	animation: slideBackground 60s linear infinite;
}

@keyframes slideBackground {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -2000px 0; /*larghezza della immagine in background:2000px*/
	}
}
/* MOBILE OPTIMIZATION */
@media (max-width: 767px) {
	.text-banner {
		height: 150px; /* più bassa su mobile */
	}

	.text-banner h1 {
		font-size: 20vw; /* scritta più grande per visibilità su schermi piccoli */
		animation: slideBackgroundMobile 60s linear infinite; /* più lenta su mobile */
	}

	@keyframes slideBackgroundMobile {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: -1000px 0;
		} /* sposta meno su mobile */
	}
}

/*
--------------------------------------------------------
	26	 404 e 500 pagine 
--------------------------------------------------------
*/

.not-found.quattrozeroquattro {
	background-image: url("../assets/images/404-500/404.webp");
}
.not-found.cinquezerocinque {
	background-image: url("../assets/images/404-500/500.webp");
}
.not-found {
	background-size: cover;
	background-position: right bottom;
	height: 750px;
	overflow: hidden;
}

div.not-found-testi {
	padding-top: 5%;
	padding-right: 15%;
}
.not-found-testi h1 {
	font-size: 150px;
}
.not-found-testi div {
	font-family: var(--ff-primario);
	color: #fff;
	font-size: 60px;
	line-height: 70px;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.not-found-testi p {
	color: #fff;
	font-size: 25px;
	font-weight: 700;
}

a.not-found-btn {
	background-color: #fff;
	padding: 10px 15px;
	color: var(--celeste-chiaro);
	font-weight: 700;
}

a.not-found-btn:hover {
	color: #fff;
	background-color: var(--celeste-chiaro);
}

@media screen and (max-width: 768px) {
	.not-found {
		height: 620px;
	}
	.not-found-testi div {
		font-size: 40px;
		line-height: 45px;
	}
	.not-found-testi h1 {
		font-size: 100px;
	}
	.not-found-testi p {
		line-height: 30px;
	}
}