/* @override
	http://127.0.0.1/SitiPicov/ELF_Devel/Sites/www.homeinitaly.com/_templates/homeinitaly_template/css/layout_homeinitaly.css
	http://127.0.0.1/Sites/www.homeinitaly.com/_templates/homeinitaly_template/css/layout_homeinitaly.css
	http://127.0.0.1/Sites/www.homeinitaly.com/_templates/homeinitaly_template/css/layout_homeinitaly.min.css 
*/


/* @group CSS FIXES */

/* FIX per style bottone submit su IOS */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
  -webkit-appearance: none;
  border-radius: 0;
}

.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
  font-family: inherit;
  font-size: inherit;
 }
 
 h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge {
  font-size1: inherit;
  font-family: inherit;
  text-transform: inherit;
  color:  inherit;
  line-height: inherit;
 } 
 
.uk-tab > * > a {
  font-family: inherit;
  font-size: inherit;
}


/* FIX Allineamento verticale icona di UIKIT*/
.elf-button .uk-icon {
	padding-bottom: 2px;
	vertical-align: middle;
}


.uk-dotnav li.uk-active a {
	background-color: var(--elfcss-accent-color);
} 
/* @end */


.uk-notification  {	
	background-color: rgba(0,0,0,0);
	backdrop-filter: blur(8px);
}
.uk-notification-message  {
	padding: var(--elf-css-body-min-side-margin);
	background-color1: var(--elfcss-accent-color);
	background-color1: #333;
	background-color: rgba(0,0,0,0.10);
}

.favorites-dropdown {
	background-color: rgba(255,255,255,0.9);	
	background-color: rgba(255,255,255,0.96);	
	backdrop-filter: blur(12px); /* NON FUNZIONA ??!! */
}

.sortable-handle {
	cursor: move;
	padding: 20px var(--elf-css-body-min-side-margin);
	background-color: rgba(255,255,255,0.65);
	backdrop-filter: blur(8px); 
	color: #333;
	border1: 1px solid #ccc;
}


.icon-scroll {
	display: inline-block;
    width: 23px;
    height: 38px;
    top: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    border-radius:16px;
	position: relative;
}
.icon-scroll:before {
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    background: #fff;
    margin-left: -3px;
    top: 6px;
    border-radius: 5px;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll;
    animation-name:scroll
}

@-webkit-keyframes
scroll {
    0% {
        opacity:1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
}

@keyframes
scroll {
    0% {
        opacity:1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
}


/* @group base fonts families (site override) */

/* Main font */
htmlOFF, /* crea meno definizione sui loghi partners in overlay sulla foto */
.elf .elf-font-main,
.elf.elf-font-main {
	font-family: 'Montserrat', sans-serif;
	font-family: 'Raleway', sans-serif;
	/*font-weight: 300; override su definizione font locale */ 
	font-family1: 'Helvetica Neue LT Std', sans-serif;
	font-family: 'Work Sans';
	font-weight1: 300; /* usare gli stili specifici altrimenti fa l'override su tutto */	
	-webkit-font-smoothing: antialiased; /* Ok con il WORK SANS - con il Montserrat not OK */
	letter-spacing1: 0.01em;
	color1: blue !important;

	/* per i bottoni con work sans posso fare 300 senza antialiased oppure 400 con */

}



/* Override BOLD
 Rimangono comunque fuori alcuni casi tipo le opzioni del menu search che sono renderizzate in JS nel body oppure .elf table th, table.elf th
-> usando i font locali conviene caricare il font allo spessore desiderato impostandolo li lo spessore bold in modo che l'override diventa universale '*/
/* CARICANDO I FONT VARIABILI INVECE SERVE */

.elf .elf-font-main .elf-text-bold,
.elf .elf-font-main.elf-text-bold,
.elf.elf.elf-font-main.elf-text-bold,
.elf .elf-font-main b,
.elf .elf-font-main strong,
.elf.elf-font-main b,
.elf.elf-font-main strong,
b.elf.elf-font-main,
strong.elf.elf-font-main {
	font-weight: 500;
	color1: red;
}


/* Alt font */
.elf .elf-font-alt,
.elf.elf-font-alt {
	font-family: 'Helvetica Neue LT Std', sans-serif;
	-webkit-font-smoothing: antialiased; /* OK con helvetica  */
	
}

/* Rimangono comunque fuori alcuni casi tipo le opzioni del menus earch che sono renderizzate in JS nel body -> usando i font locali conviene caricare il font allo spessore desiderato impostandolo li lo spessore bold in modo che l'override è universale '*/
/*
{
.elf .elf-font-alt .elf-text-bold,
.elf .elf-font-alt.elf-text-bold,
.elf.elf-font-alt.elf-text-bold,
.elf .elf-font-alt b,
.elf .elf-font-alt strong,
.elf.elf-font-alt b,
.elf.elf-font-alt strong,
b.elf.elf-font-alt,
strong.elf.elf-font-alt
{
	font-weight: bold;
}
}

/* Labels font */
.elf .elf-font-labels,
.elf.elf-font-labels {
	font-family: 'Helvetica Neue LT Std Extended', sans-serif;

	font-weight1: 300; /* se lo ridefinisco qui sovrascrivo le classi ELF_Base in cui dovrei mettere important */ 
	letter-spacing1: 0.04em; /* stessa cosa di sopra -> mettere in base alla situazione */ 		
	color1: red !important; /* DEBUG */
	-webkit-font-smoothing: antialiased; /* ok per Helvetica visto che il 100 non c'è ed il 200 senza è troppo grassetto*/

}

/* Rimangono comunque fuori alcuni casi tipo le opzioni del menus earch che sono renderizzate in JS nel body -> usando i font locali conviene caricare il font allo spessore desiderato impostandolo li lo spessore bold in modo che l'override è universale '*/
/*
/*
.elf .elf-font-labels .elf-text-bold,
.elf .elf-font-labels.elf-text-bold,
.elf.elf-font-labels.elf-text-bold,
.elf .elf-font-labels b,
.elf .elf-font-labels strong,
.elf.elf-font-labels b,
.elf.elf-font-labels strong,
b.elf.elf-font-labels,
strong.elf.elf-font-labels {
	font-weight: 400;
}
*/

/* @end */

/* Ridefinisco gli stili base per colori, link e bottoni */

.elf .elf-text-color-accent,
.elf.elf-text-color-accent {
	color: var(--elfcss-accent-color); 	/* HII accent color */
	color1: red;
}

.uk-tooltip {
	background: var(--elfcss-accent-color); 	/* HII accent color */;
	background1: rgba(155, 130, 74, 0.90);
}

.uk-background-muted {
  background-color1: #f8f8f8; /* UI KIT OK PER NOVO SITO */ 
  background-color1: #e4e4e4; /* grafica originale*/ 
  background-color1: #f0f0f0; /* media per evidenziare bordo basso campi form */ 
}

.uk-form-label {
	padding-left: 12px !important;
	color:  #111 !important ;
}

/* OVERRIDE PER TRASPARENZA DEI CAMPI DEI FORM*/
form input:not(button):not(.elf-field-submit):not(.uk-checkbox):not(.elf-field-chckbox):not(.uk-radio):not(.elf-field-radio):not(.select2-search__field):not(.uk-tomselect input),
form .uk-select,
form textarea.elf-field-textarea,
form .select2-selection.select2-selection--single,
form .select2-selection.select2-selection--multiple,
form .uk-tomselect.ts-wrapper
{
	border-bottom: 1px solid !important;	
	border-bottom-color: #d6d6d6 !important;
	border-bottom-color1: transparent !important;
	border-top-color: transparent !important;
	border-left-color: transparent !important;
	border-right-color: transparent !important;	
	color: #333 !important;
	background-color1: #f9f9f9 !important;
	background-color: transparent !important; /* lo metto comunque evitando di assegnare a tutti uk-form-blank */
}
form input:not(button):not(.elf-field-submit):not(.elf-field-checkbox):not(.elf-field-radio):focus:not(.select2-search__field):focus:not(.uk-tomselect input):focus,
form .uk-select:focus,
form textarea.elf-field-textarea:focus,
form .select2-selection.select2-selection--single:focus,
form .select2-selection.select2-selection--multiple:focus,
form .uk-tomselect.ts-wrapper.focus
{
	background-color: #ffffff !important;
	border-bottom-color: var(--elfcss-accent-color) !important;
}


/* override linea inferiore su header search */
#search-panel form input:not(button):not(.elf-field-submit):not(.uk-checkbox):not(.elf-field-checkbox):not(.uk-radio):not(.elf-field-radio):not(.select2-search__field),
#search-panel form textarea.elf-field-textarea,
#search-panel form .select2-selection.select2-selection--single,
#search-panel form .select2-selection.select2-selection--multiple,
#search-panel form .uk-tomselect.ts-wrapper
{
	border1: 0px !important; /* altera l'altezza -> modifico solo il colore*/
	border-bottom-color: transparent !important;
	border-bottom-color1: #eaeaea !important;
}





/* @group ELF Links override */
.elf a,
a.elf {
	text-decoration: none;
	color: var(--elfcss-accent-color);	/* HII accent color */
	
	color1: #999;	/* HII accent color */
}
.elf a:hover,
a:hover.elf {
	color:#333;
	text-decoration: none;
}

/* styled text link */
.elf a.elf-link-text,
a.elf.elf-link-text {
  color: var(--elfcss-accent-color);	/* HII accent color */
}
.elf a.elf-link-text::before,
a.elf.elf-link-text::before {
  border-bottom: 1px solid #333;
}
.elf a.elf-link-text:hover,
a.elf.elf-link-text:hover,
.elf a.elf-link-text:focus,
a.elf.elf-link-text:focus {
  color: #333;
  text-decoration: none;
}


/* Nascondo il div per il consenso avendo implementato il link nel footer */
.cc-revoke.cc-bottom {
	bottom: -20px !important;
}


#main-slide-show li div > h2 {
	word-break: keep-all;
	
	margin-left: auto;
	margin-right: auto;
	width: calc(100vw - 80px);
	
	font-size1: clamp(3em, 6vw, 4.5em);
	line-height1: 74px; /* FIX PER CLIP FONT*/
	
	background-color1: red;
}



#hii-destinations-slider-wrapper div h2,
#hii-areas-browser-wrapper div h2 {
	word-break1: break-word;
	font-size1: clamp(2.5em, 6vw, 3.5em);
}

#relax-section div h2 {
	font-size: clamp(3em, 6vw, 3.5em);
}

	
/* styled button default override */
.elf .elf-button-default,
.elf.elf-button-default {
 	background-color: #fff;
 	color: var(--elfcss-accent-color); 	/* HII accent color */
 	border: 1px solid var(--elfcss-accent-color); /* HII accent color */
 	letter-spacing: 0.05em; 	
}
.elf .elf-button-default.elf-active,
.elf.elf-button-default.elf-active,
.elf .elf-button-default:hover,
.elf.elf-button-default:hover,
.elf .elf-button-default:focus,
.elf.elf-button-default:focus {
	color: #fff;
 	background-color: var(--elfcss-accent-color) /* HII accent color */ 	
}
.elf .elf-button-default.elf-disabled,
.elf.elf-button-default.elf-disabled {
  color: #999;
  text-decoration: none;
  background-color: #f3f3f3;
}


/* styled primary button override */
.elf .elf-button-primary,
.elf.elf-button-primary {
 	text-decoration: none;
 	color: #fff;
 	background-color: var(--elfcss-accent-color);
 	border: 1px solid var(--elfcss-accent-color);
 	padding1: 16px 32px;
 	letter-spacing: 0.1em;
}
.elf .elf-button-primary.elf-active,
.elf.elf-button-primary.elf-active,
.elf .elf-button-primary:hover,
.elf.elf-button-primary:hover,
.elf .elf-button-primary:focus,
.elf.elf-button-primary:focus {
  background-color: #8a7444;
  text-decoration: none;
}
.elf .elf-button-primary.elf-disabled,
.elf.elf-button-primary.elf-disabled {
  color: #999;
  text-decoration: none;
  background-color: #cfc2a4;
  border-color: #c0b8a5;
}



/* styled secondary button override */
.elf .elf-button-secondary,
.elf.elf-button-secondary
{
 	background-color: #eee;
 	padding1: 16px 32px;
 	letter-spacing: 0.1em;
}
.elf .elf-button-secondary.elf-active,
.elf.elf-button-secondary.elf-active,
.elf .elf-button-secondary:hover,
.elf.elf-button-secondary:hover,
.elf .elf-button-secondary:focus,
.elf.elf-button-secondary:focus
{
  background-color: #ccc;
}
.elf .elf-button-secondary.elf-disabled,
.elf.elf-button-secondary.elf-disabled
{
	background-color: #d4d4d4;
	border-color: #cdcdcd;
}

/* @end */


.elf ul.elf-list,
ul.elf.elf-list {
	color1:  #888;
}


/* Override colore uk-tab */
/* uk-tab active item */
.uk-tab > li:not(:first-child) {
	padding-left: 0px; /* riduco lo spazio */
}
/* uk-tab active item */
.uk-tab > .uk-active > a {
	color: var(--elfcss-accent-color); 	/* HII accent color */
	text-decoration: none;
}
/* uk-tab available item */
.uk-tab > li > a {
	color: #aaa;
}
/* Bordo inferiore */ 
.uk-tab:before {
	border: 0;
}



/* Bordi su tendine menu */
.uk-navbar-dropdown-grid > :not(.uk-first-column)::before {
	border: none;
}
.uk-nav-header a {
	color:  #999;
}

.search-results-countandpagination {
	padding-top: 13px;
	padding-bottom: 10px;
}
/* FIX PER COMPENSAZIONE SPOSTAMENTO DOVUTO ALL'uk-sticky * (TO DO PER MAPPA v2 */
.search-results-countandpagination.uk-sticky-fixed {
	background-color: #fff;
	margin-left: calc(-1 * var(--elf-css-body-min-side-margin)) !important;
	padding-left: var(--elf-css-body-min-side-margin) !important;
	margin-right: calc(-1 * var(--elf-css-body-min-side-margin)) !important;
	padding-right: var(--elf-css-body-min-side-margin) !important;
	box-sizing: content-box; /* GREAT FIX */
}


#search-results-container {
	padding-top: 12px;
	margin: 0 calc(-1 * var(--elf-css-body-min-side-margin));
}



.search-result-item-imagepart {
	min-height: 120px
}

/* Valutare questa soluzione per l'overlay fade rispetto all img::after (forse è migliore questa) */
.search-result-item-imagepart a ul li {	
	background:	
		linear-gradient(0deg,rgba(29,29,29,0.2),rgba(29,29,29,0.1) /* 0,2 o 0.1 ma si può eliminare */
		),
		linear-gradient(180deg,
						rgba(0,0,0, 0) 65%,
						rgba(0,0,0, 0.9) 100%
		);
}
.search-result-item-imagepart img {
	mix-blend-mode: overlay;
}


.villa-main-data {
	pointer-events: none;
	--elfcss-accent-color: #fff;
	 
	margin-bottom: 16px !important;
	margin-left1: var(--elf-css-body-min-side-margin);
	margin-right1: var(--elf-css-body-min-side-margin);
	padding-top: 16px;;
	padding-left: var(--elf-css-body-min-side-margin);
	padding-right: var(--elf-css-body-min-side-margin);

	backdrop-filter1: blur(6px);
	background-color1: rgba(0,0,0,0.07);

}


.search-result-item-infopart {
	background-color: #fff;
	border: 1px solid #e6e6e6;
	border-top: none;
	padding: var(--elf-css-body-min-side-margin);
}






html {
	font-size1: 4.5vw; /* Responsive Text*/
}

body {
	background-color1: #ede6d6;
	position1: relative;
}


body.full-body-width {
	/* Sovrascrivo la variabile CSS */
	--elf-css-body-max-width: auto;
}
body.full-body-width .responsive-side-margin-by-body-width {
	margin-left: 0; /* annullo l'adattamento dei margini*/
	margin-right: 0; /* annullo l'adattamento dei margini*/
}
/* Responsive spazio laterale header search results per allineamento Daniela */
/* CRITERI: impagino gli elementi interessati con i padding e quando la finestra è più larga li elimino con i margini negativi di pari ampiezza */
@media (min-width: 1686px ) { /* non posso gestire la width della emdia query con una cssvar */
	.responsive-side-margin-by-body-width {
		margin-left: calc(-1 * var(--elf-css-body-min-side-margin));
		margin-right: calc(-1 * var(--elf-css-body-min-side-margin));
		background-color1: red;
	}
}


body.input-inside-static-container-active {
  position1: static;
  left1: 0;
  right1: 0;
  height1: 100%;
  overflow1: hidden; /* mantiene l'ingombro della barra di scorrimento */
}


a.hii-image-overlay-link {
	display: block;
	min-width: 200px;
	max-width: 310px;
	/* white-space: nowrap; */
	margin: 0 auto;
	margin-top: 16px;
	padding: 8px 10px;
	background-color: var(--elfcss-accent-color); 	/* HII accent color */
	background-color: rgba(155, 130, 74, 0.80);
	color: #fff;
	border1: 1px solid #fff;
}

a.hii-image-overlay-link:hover {
	color:  #fff;
	background-color: var(--elfcss-accent-color); 	/* HII accent color */	
}

.hii-icon {
	background-color1: red;
	color: #000;
	opacity:  0.6;
}



.elf-navpath-flat {
	text-transform: uppercase;
	height: 48px;
	line-height: 48px;
	padding: 0 16px;;
	width1: 100%;
	margin1: 0 auto;
	
	background-color1: rgba(0,0,0,0.07);
	backdrop-filter1: blur(8px);
}
.elf-navpath-flat a {
	color: #fff !important;
	font-size: 12px;
	
}


#wrapper {
	margin1: 0 auto;
	background-color1: #fff;
	max-width1: 1600px;
	box-shadow1: 0px 0px 5px #444;
}
#main {
	border1: 1px solid #333;
	background-color: #fff;
}


#header-top-wrapper {
	max-width1: 1600px;
	margin-left: auto;
	margin-right: auto;
	background-color1: red;
}
#header-top {
}
#header-top ul li {
	display: inline-block;
	margin-left: 8px;
	margin-right: 8px;
}
#header-top span,
#header-top ul li a {
	vertical-align: bottom;
}



#logo_home_link_wrapper {
	position: relative;
}
#logo_home_link_wrapper img {
	will-change: opacity, width;
	transition: opacity 0.9s ease-out, width 0.4s ease-out;
	padding-top: 4px;
	padding-bottom: 4px;
}
#logo_home_link_wrapper img:nth-child(1) {
	position: absolute;
}
#logo_home_link_wrapper img:nth-child(1) {
	opacity: 0;
}
#logo_home_link_wrapper img:nth-child(2) {
	opacity: 1;
}
#logo_home_link_wrapper img.uk-light:nth-child(1) {
	opacity: 1;
}
#logo_home_link_wrapper img.uk-light:nth-child(2) {
	opacity: 0;
}

/* Riduzione logo by device -> l'altezza della fascia si adatta */
.elf-desktop .uk-sticky-fixed #logo_home_link_wrapper img {
	width: 230px;	
	padding-top1: 8px;
	padding-bottom1: 8px;
}
.elf-tablet .uk-sticky-fixed #logo_home_link_wrapper img {
	width: 200px;	
}
.elf-phone .uk-sticky-fixed #logo_home_link_wrapper img {
	width: 180px;	
}




#header-wrapper-fullwidth {
	width: 100%;
	/* se voglio partire già sticky e light ma causa un jump al momento della transizione -> FIX con regola successiva */
	position: fixed;
	top: 36px; /* CAUSA UN SALTO con uk-sticky -> disattivato -> gestione JS mantenendo il nome della classe toggler */
	z-index:982; /* sopra Google Maps che ha 980 ed il menu di paginazione che ha 981*/
		
	background-color: rgba(0,0,0,0.02);		
	background-color: rgba(255,255,255,0.8);		
	backdrop-filter: blur(8px);
	will-change: top, background-color, backdrop-filter;
	transition: top 0.3s ease-in, backdrop-filter 0.3s ease-in, background-color 0.2s ease-out;
}
#header-wrapper-fullwidth.uk-sticky-fixed {
	top: 0;
}

#header-wrapper-fullwidth .uk-navbar-nav li a:focus {
	text-decoration: none;
}

.uk-light#header-wrapper-fullwidth {
	backdrop-filter: blur(8px);
	background-color: rgba(0,0,0,0.07);
	background-color1: transparent;
}


#header-wrapper-fullwidth.uk-sticky-fixed {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	opacity1: 0.95;
	background-color1: #fff;
	
}
.elf-mobile #header-wrapper-fullwidth.uk-sticky-fixed {
	opacity: 0.95;
}


#header-menu-wrapper {
	max-width: 1730px;
	max-width: var(--elf-css-body-max-width);
	margin-left: auto;
	margin-right: auto;
	background-color1: lime;
}


#header-menu {
	padding: 0 var(--elf-css-body-min-side-margin);
}

#header-menuOFF .uk-navbar-nav > li {
	padding: 0;
	margin: 0;
	border: 0;
	background-color: yellow;
}

#header-menu .uk-navbar-nav {
    gap: 1.5vw;
    gap: 36px;
}

#header-menu .uk-navbar-nav > li > a {
	text-transform: uppercase; /* main menu item */
	min-height: 52px; /* overwrite per default 80 uikit */
	color1: inherit;
	color1: #fff;
	
}








/* crearle specifiche per device con imprefissi e-f-phone ecc */

.villa-favorite-item-dragging {
	height1: 190px !important;
	width1: 190px !important;
	overflow: hidden !important;
	padding1: 8px !important;
	opacity: 1;
	
	will-change: height;
	transition: height 0.3s ease-out;
}

.villa-favorite-item-dragging-other,
.villa-favorite-item-dragging-other 
{
	height1: 190px !important;
	width1: 190px !important;
	overflow: hidden !important;
	padding: 8px !important;

	will-change: height;
	transition: height 0.5s ease-out;
	
	opacity: 0.85;
}



.villa-favorite-item-dragging .elf-drag-hide,
.villa-favorite-item-dragging-other .elf-drag-hide
{
	visibility: hidden;
}
.villa-favorite-item-dragging .elf-drag-nodisplay,
.villa-favorite-item-dragging-other .elf-drag-nodisplay
{
	display: none;
}
.villa-favorite-item-dragging .elf-drag-scale,
.villa-favorite-item-dragging-other .elf-drag-scale
{
}

.villa-favorite-item-dragging .villa-main-data,
.villa-favorite-item-dragging-other .villa-main-data
 {
	/* GREAT SOLUTION */
	position: absolute;
	top: 60px;
} 


.elf-phone .villa-favorite-item-dragging {
	height: 210px !important;
	width1: 190px !important; /* crea problemi con il riposizionamento dello scroll per gli elementi delle riche successive -> sul mobile è accettabile */
	padding: 24px !important;
}
.elf-phone .villa-favorite-item-dragging-other {
	height: 210px !important;
	width1: 190px !important; /* crea problemi con il riposizionamento dello scroll per gli elementi delle riche successive -> sul mobile è accettabile */
	padding: 16px !important;
}



.elf-desktop .villa-favorite-item-dragging {
	height: 210px !important;
	width1: 33% !important;  /* crea problemi con il riposizionamento dello scroll per gli elementi delle riche successive*/
	padding: 24px !important;
}

.elf-desktop .villa-favorite-item-dragging-other {
	height: 210px !important;
	width1: 33% !important;  /* crea problemi con il riposizionamento dello scroll per gli elementi delle riche successive*/
	padding: 24px !important;
}


/*
.villa-favorite-item-dragging > div,
.villa-favorite-item-dragging-other > div {
	height: 110px !important;	
}
*/

/* NOT OK -> TO CHECK -> SU SAFARI SI VEDE IL PUNTO DI INSERIMENTO */
.search-results-container-items {	
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	
}


.villa-favorite-item-draggingOFF > div:first-child,
.villa-favorite-item-dragging-otherOFF > div:first-child {
	display1: none;
	width1:  20%;
}

/* forzo il responsive dell'immagine */
.villa-favorite-item-draggingOFF > div:first-child li,
.villa-favorite-item-dragging-otherOFF > div:first-child li {
	height: 130px !important;
}


.villa-favorite-item-draggingOFF > div:last-child,
.villa-favorite-item-dragging-otherOFF > div:last-child {
	width1:  80%;
	font-size: 90%;
}

/* Fix per icona che sparisce durante il drag */
.villa-favorite-item-draggingOFF .villa-favorite-toggle-button-icon {
	display: none;
}


.elf-mobile.elf-phone .villa-favorite-item-draggingOFF > div:last-child,
.elf-mobile.elf-phone .villa-favorite-item-dragging-otherOFF > div:last-child
{
	font-size: 60%;	
}


.villa-favorite-item-dragging-placeholder {
	visibility: hidden;
	height: 120px !important;
	width1: 32% !important;
	overflow: hidden !important;
}



.villa-favorite-toggle-button-icon,
.villa-map-button-icon,
.villa-photogallery-button-icon {
	background-color: rgba(255,255,255,0.2) !important;
	color1: var(--elfcss-accent-color) !important;
	color: #fff !important;
	backdrop-filter: blur(8px);
	height: 42px;
	width: 42px;
}
.villa-favorite-toggle-button-icon:hover,
.villa-map-button-icon:hover,
.villa-photogallery-button-icon:hover {
	background-color: rgba(255,255,255,0.9) !important;
	color: #666 !important;
}
.villa-favorite-toggle-button-icon-active {
	background-color: rgba(255,255,255,0.7) !important;
	color: var(--elfcss-accent-color) !important;
}






#search-panel-wrapper {
}

#search-panel-wrapper .uk-form-icon {
	width: 24px;
	width1: auto;
	color: #444;
}

/* more/less switch */
/* search terms hidden on more */
#search-panel-wrapper.more-search-filters-active div.uk-grid > div:nth-child(1) {
	display: none;
}

/* more fields hidden on less */
#search-panel-wrapper div.uk-grid > div:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(11)):not(:nth-child(12))
{
	display: none;
}
/* more fields visible on more */
#search-panel-wrapper.more-search-filters-active div.uk-grid > div:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(11)):not(:nth-child(12))
 {
	display: block;
}

/* Nascondo le etichette pr compattezza e le sostituisco con i placeholder (solo su phone ??) */
#search-panel-wrapper.more-search-filters-active label {
	display: none;
}
#search-panel-wrapper input::placeholder {
	color: transparent;
}
#search-panel-wrapper.more-search-filters-active input::placeholder {
	color: #aaa;
}



#search-panel {
	margin: 0 auto;

	background-color1: rgba(255,255,255,0.9);
	background-color1: rgba(255,255,255,0.95); /* BEST ? */
	background-color1: rgba(255,255,255,0.98);
	
	padding: 4px; /* oppure 0 */
}

#search-panel label,
#search-panel h4 {
	color: #444;
}
.elf-phone #search-panel input {
	colorOFF: #000;
	font-size:  16px; /* FIX iOS: evito lo zoom */
}


.elf-responsive-fullwidth-header-title {
	font-size: clamp(3rem, 6vw, 4.5rem) !important;
	background-color1: red;
}
.elf-responsive-fullwidth-header-text {
	font-size: clamp(0.7rem, 2vw , 0.8rem) !important;
	width: calc(90% - 0px) !important;
	background-color1: orange;
	
}
.elf-responsive-fullwidth-page-title {
	font-size: clamp(2.6rem, 6vw, 3.5rem) !important;
	background-color1: green;
}



/* STILI COMUNI BARRE */
#offcanvas-menu .uk-offcanvas-bar-light,

#offcanvas-search .uk-offcanvas-bar-light,
#offcanvas-search .uk-offcanvas-bar {
	backdrop-filter: blur(12px);
	background-color1: rgba(0,0,0,0.6);
	background-color1: rgba(0,0,0,0.2);
	background-color1:rgba(29,29,27,0.5); /* COMO 0.2 */
	background-color: rgba(255,255,255,0.9);
	padding: 16px;
	width: 400px;
	filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
}


/* Classe diversa da quella di default per evitare gli stili uk-light */
.uk-offcanvas-bar-light {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -270px;
    box-sizing: border-box;
    width: 270px;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
	 
	 background1: #f8f8f8;

  }
  .uk-offcanvas-bar-animation {
    transition: left 0.3s ease-out;
  }
  @media (min-width: 960px) {
    .uk-offcanvas-bar-light {
      left: -350px;
      width: 350px;
      padding: 40px 40px;
    }
  }
  .uk-offcanvas-flip .uk-offcanvas-bar-light {
    left: auto;
    right: -270px;
  }
  .uk-offcanvas-flip .uk-offcanvas-bar-animation {
    transition-property: right;
  }
  .uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light {
    left: auto;
    right: 0;
  }
  @media (min-width: 960px) {
    .uk-offcanvas-flip .uk-offcanvas-bar-light {
      right: -350px;
    }
  }
  .uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light {
    left: auto;
    right: 0;
  }
  .uk-offcanvas-reveal .uk-offcanvas-bar-light {
    left: 0;
  }
  .uk-open > .uk-offcanvas-bar-light {
    left: 0;
  }
  
  
  
  

.hii-shadow-mini {
	text-shadow: 0 2px 2px rgba(0,0,0,0.7);
}
img.hii-shadow-mini {
	filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.7));	
}
.hii-shadow-small {
	text-shadow: 0 2px 3px rgba(0,0,0,1);
}
img.hii-shadow-small {
	filter: drop-shadow(0px 2px 3px rgba(0,0,0,1));	
}


.hii-main-slideshow {
	background-color: #f0f0f0; /* Muted */ 
	
}
.hii-main-slideshow h2 {
	color: #fff;
	
}
.hii-main-slideshow p {
	color: #fff;
}
.hii-main-slideshow li {
	background-color1: #000;
	color: #fff;
}
.hii-main-slideshow img {
	opacity1: 0.9;
}
.hii-main-slideshow li:hover img {
	opacity1: 1;
}



/* BLACK OVERLAY TEST */
/* UNA PASSATA */
OFF.hii-main-slideshow li div:first-child {
	background:
		linear-gradient(180deg,
						rgba(0, 0, 0, 0.8) 0%,
						rgba(0, 0, 0, .2) 30%,
						rgba(0, 0, 0, .2) 70%,
						rgba(0, 0, 0, 0.8) 100%
						);
}
/* DUE PASSATE */
OFF.hii-main-slideshow li div:first-child {
	background:
	linear-gradient(180deg,
					rgba(0, 0, 0, 0.3),
					rgba(0, 0, 0, 0.3) 100%
	),
	linear-gradient(180deg,
					rgba(0, 0, 0, 0.8) 0%,
					rgba(0, 0, 0, 0) 30%,
					rgba(0, 0, 0, 0) 70%,
					rgba(0, 0, 0, 0.8) 100%
	);
}
/* ADATTATO DA FIGMA che lo sfondo su  due blocchi */
/* PARTE ALTA FIGMA
 background: linear-gradient(357.62deg, rgba(0, 0, 0, 0) 7.85%, rgba(0, 0, 0, 0.3) 80.69%); 
357,62-180 = 177,62 -> da adattare le % in abse alle dimensioni del blocco
*/
.hii-main-slideshow li div:first-child {
	background:
		linear-gradient(0deg,
						rgba(0, 0, 0, 0.2),
						rgba(0, 0, 0, 0.2)
		),
		linear-gradient(180deg,
						rgba(0, 0, 0, 0) 70%,
						rgba(0, 0, 0, 0.8) 100%
		),
		linear-gradient(178.6deg,
						rgba(0, 0, 0, 0.3) 7%,
						rgba(0, 0, 0, 0) 23%
		);
		/* Ultimo blocco fascia alta testato con sovrapposizione esatta PSD 1920x840 -> leggermente diverso ed appena più scurente nell'anngolo in alto a sx */
}


/* COMO */
.hii-main-slideshow li div:first-child {
	background:	
		linear-gradient(0deg,rgba(29,29,29,0.2),rgba(29,29,29,0.2)
		),
		linear-gradient(180deg,
						rgba(0,0,0, 0) 70%,
						rgba(0,0,0, 0.8) 100%
		),
		linear-gradient(178.6deg,
						rgba(0,0,0, 0.3) 7%,
						rgba(0,0,0, 0) 23%
		);
}


.hii-main-slideshow li img {
	mix-blend-mode: overlay;
}


#social-bar {
	position: absolute;
	right: 0px;
	bottom: -32px; /* rispetto all'HTML */
	z-index: 999;
	color:  #fff;
	border-radius: 16px 0  0 16px ;
	background-color: var(--elfcss-accent-color); 	/* HII accent color */
	
	box-shadow: 0px 0px 2px #444;	
}
#social-bar a {
	text-align: right;
	display: block;
	width: 24px;
	padding: 8px;
}
#social-bar a:hover {
	color: #333;
}


#partners-wrapper-fullwidth {
	background-color: var(--elfcss-accent-color); 	/* HII accent color */
	background-color: #000;
}

#partners-wrapper {
	text-align: center;
	margin: 0 auto;
	margin-top: -1px; /* compensa il pixel bianco distanziatore che a volte compare*/
	padding: 5px;
}



.header-media-vertical-divider {
	width:  1px;
	margin-left:  auto;
	margin-right:  auto;
	height: 90px;
	margin-top: -30px;
	margin-bottom: -60px;
	background-color: var(--elfcss-accent-color);
	position: relative;
}





.slider-horizontal-scrollbar {
	width:100%;
	height:2px;
	position:relative;
	background-color:#ccc;
	background-color1: color-mix(in srgb, var(--elfcss-accent-color) 50%, #fff);
}
.slider-horizontal-scrollbar .slider-knob {
	display:block;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	transition:left 0.9s ease, width 0.9s ease, transform 0.3s ease;
	transform-origin: center;
	background-color:#666;
	background-color: var(--elfcss-accent-color);
}
.slider-horizontal-scrollbar .slider-knob.elf-active {
	transform: scaleY(3) !important;
}






#hii-destinations-slider-wrapper {
}/* per le parti che rimangono centrate visto che lo slider può andare al bordo */

/* CENTRATO -> METTERE CENTERED SULLO SLIDER LASCIANDO LE LARGHEZZE ATTUALI (NON INTERE) -> NON MALE (anche le freccie vanno sulle parti tagliate) */
#hii-destinations-slider {
	margin: 0 max( 0px , calc((100% - var(--elf-css-body-max-width)) / 2) );
	background-color1: red;
}

#hii-destinations-slider {
	margin: 0 max( 0px , calc((100% - var(--elf-css-body-max-width)) / 2) );
	background-color1: red;	
}
/* DECENTRATO */
#hii-destinations-sliderOFF {
	max-width1: 1720px; /* FC */
	margin-right1: auto;
	margin-left1: auto;
	/* Oppure che sborda a dx */	
	margin-left: max( 0px , calc((100% - var(--elf-css-body-max-width)) / 2) );
	margin-right: 0;
}

#hii-destinations-slider h3 {
	backdrop-filterOFF: blur(8px) !important;
}

/*
/* CSS DA OTTIMIZZARE -> SCATTA trascinando lo slider (forse a causa di un effetto compesso da calcolare)  *!/
#hii-destinations-slider li img,
#hii-destinations-slider li picture img
{
	filter: brightness(80%);
	transition: filter 0.4s ease-out;
	will-change: transition, transform; /*Fix Safari text blur during transitions ma il testo è meno definito -> valutare overlay su immagine con nero senza brightmess *!/ 
	-webkit-font-smoothing1: antialiased;
}
.elf-desktop #hii-destinations-slider li:hover img,
.elf-desktop #hii-destinations-slider li:hover picture img
{
	filter: brightness(60%);
	transition: filter 0.2s ease-out;
	transform1: scale(1.1);
}

#hii-destinations-slider li a  {
	height: 560px; /* se la imposto qui posso farla parametrima ma verificare il CLS *!/
}

  
#hii-destinations-slider li a span {
	opacity: 0;
}

#hii-destinations-slider li a:hover span {
	opacity: 1;
	background-color1: green;
}

/* --- Mobile: sempre visibile --- -> uso ELF-MOBILE ??!! *!/
@media (max-width: 768px) {
  #hii-destinations-slider li a span {
    opacity: 1;
	background-color1: red;
  }
}
*/


/* Versione OTTIMIZZATA con overlay immagine nera che simula il filtro brightness */
#hii-destinations-slider li a {
  height: 560px;
  position: relative;
  overflow: hidden; /* clippa lo zoom con scale della foto*/
}
#hii-destinations-slider li a img,
#hii-destinations-slider li a picture img {
  display: block;
  transition: transform 0.4s ease-out; /* Se uso scale */
}
#hii-destinations-slider li a::after {
  content: "";
  position: absolute;
  inset: 0; 
  background: rgba(0,0,0,0.2);
  transition: background 0.4s ease-out;
}
#hii-destinations-slider li a:hover img,
#hii-destinations-slider li a:hover picture img {
  transform: scale(1.1);
  transition: transform 0.2s ease-out;
}
#hii-destinations-slider li a:hover::after {
  background: rgba(0,0,0,0.1); /* meglio 0 che si illumina ? */
  transition: background 0.2s ease-out;
}
#hii-destinations-slider .overlay-text {
  color: white;
  z-index: 1;
  text-align: center;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.1em;  
}
#hii-destinations-slider li a .overlay-text .explore-button {
	visibility: hidden;
	padding: 0px 0px 4px 2px; /* Fix centratura bordo inferiore */
	border-bottom1: 2px solid #fff;
	margin: 0 auto;
	display: block;
	background-color: rgb(0,0,0,0.35);
	width: 160px;
	height: 160px;
	line-height: 160px;
	border-radius: 999px;
	position: relative;
	top:  260px;
	transition: top 0.2s ease-out;
}
#hii-destinations-slider li a:hover .overlay-text .explore-button {
	visibility: visible;
	top:  84px;
}




#keypoints-wrapper {
}

#keypoints {
	margin1: 0 auto;
	max-width1: 1720px;	
}


#keypoints-tabs {
	position: relative;
	top:  -64px;
	z-index: 3;
	padding: 0 40px; /* spazio laterale per frecce */
	background-color1: orange 
}
#keypoints-tabs li a {
	margin: 0 24px;
	padding: 5px 4px;
	-webkit-font-smoothing1: subpixel-antialiased;
	text-decoration: none;

}
#keypoints-tabs > div {
	position: relative;
	top: -18px;
	background-color1: purple;
	height1: 10px;
}


#keypoints-tabs-content {
  position: relative; /* necessario per posizionare absolute il ::after */
  overflow: hidden;
  height: 640px;
  background: #000;
}
#keypoints-tabs-content > div {
	height: 100%;
}

#keypoints-tabs-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.80) 100%);
  /* COMO */
  background-image:	
		linear-gradient(0deg,rgba(29,29,29,0.2),rgba(29,29,29,0.2)
		),
		linear-gradient(180deg,
						rgba(0,0,0, 0) 75%,
						rgba(0,0,0, 0.8) 100%
		);
  pointer-events: none; /* così non blocca click/hover sugli elementi dentro */
  z-index: 1;
}
#keypoints-tabs-content > div > div  {
  position1: relative;
  z-index: 2; /* porta in alto il contenuto sopra al gradiente */
}




/* valutare se unificarlo con le destinations */
#hii-areas-browser-wrapper {
}

#hii-areas-browser {
	max-width1: 1720px; /* FC */
	margin-right1: auto;
	margin-left1: auto;
	/* Oppure che sborda a dx */	
	margin-left1: max( 16px , calc((100% - 1720px) / 2) );
	margin-right1: 0;
	
	margin: 0 max( 0px , calc((100% - var(--elf-css-body-max-width)) / 2) );
	background-color1: red;	
}	
#hii-areas-browser > ul > li > a {
  display: block;
  height: 560px !important;
  position: relative;
  overflow: hidden;
}
#hii-areas-browser > ul > li > a img,
#hii-areas-browser > li > a > picture img {
  display: block;
  transition: transform 0.4s ease-out; /* Se uso scale */
}
#hii-areas-browser > ul > li > a::after {
	content: "";
	position: absolute;
	inset: 0; /* 8 px lascia un bordo senza nero */
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.95) 100%);
	/* animando bg size */
	background-size1: 100% 100%;
	background-position1: bottom;
	transition1: background-size 0.3s ease-out;
	will-change1: background-size;
	  
	/* animando background-position è più fluido è copre meglio */
	background-size: 100% 200%; /* gradient più alto del contenitore per poterlo spostare */
	background-position: 50% 80%; /* parte dal fondo */
	transition: background-position 0.3s ease-out;
	will-change: background-position;
}
#hii-areas-browser > ul > li > a:hover img,
#hii-areas-browser u > li > a:hover > picture img {
  transform: scale(1.1);
  transition: transform 0.2s ease-out;
}
#hii-areas-browser > ul > li > a:hover::after {
  background-size1: 100% 175%;
   background-position: 50% 100%; /* gradiente “sale” verso l’alto */
}
#hii-areas-browser .overlay-text {
  color: white;
  z-index: 1;
  text-align: center;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.1em;
}
#hii-areas-browser li a .overlay-text .explore-button {
	visibility: hidden;
	padding: 0px 0px 4px 2px; /* Fix centratura bordo inferiore */
	border-bottom: 2px solid #fff;
}
#hii-areas-browser li a:hover .overlay-text .explore-button {
	visibility: visible;
}






#relax-section {
	/* definire un elf-css-min-side-margin */
	margin: 0 max(16px, calc((100% - 1440px) / 2 ));
}



/* Funzionano bene ma sul desktop il problema rimane e pure sul tablet che di recente ha l'impostazione "richiedi sito desktop" pedefinita (dipende dal modello o dallo schermo -> TO CHECK) */
/* Se di default viene richeisto il sito desktop qui non entro */
.elf-tablet1 #relax-section-image {
	/* metodo per impostare l'altezza minima in base all'orientamento */
	min-height: max( calc(var(--elfcss-is-portrait) * 420px), calc(var(--elfcss-is-landscape) * 320px) );
	background-color: green
}
/* Sul telefono funziona bene */
.elf-phone1 #relax-section-image {
	/* iPhone13 mini ok 360 landscape */
	min-height: max( calc(var(--elfcss-is-portrait) * 200px), calc(var(--elfcss-is-landscape) * 360px) );
	background-color: purple;
}



/* Tentativo di soluzione unica in modo che l'effetto sia visibile anche dal desktop */
/* SONO QUI -> APPROFONDIRE */
#relax-section-image {
	background-color1: yellow;
	/* Posso mettere più valori il 50vw ha effetto a larghezze piccole e fa si che la foto con cover non venga tagliata lateralmente mentre il 440px ha effetto a larghezze grandi dove k'altro valroe sarebbe troppo elevato */
	min-height: min(470px,50vw);
}





#test {
	background-color: red;
	height: var(--elfcss-max-safe-visible-height);
	border: 1px solid #333;	
	box-sizing: border-box;
}







#blog-wrapper {
	background-color: #F6F6F6;
}
#blog-slider {
	max-width1: 1720px; /* FC */
	margin-right1: auto;
	margin-left1: auto;
	/* Oppure che sborda a dx */	
	margin-left1: max( 16px , calc((100% - 1720px) / 2) );
	margin-right1: 0;
	/* Oppure centrato */	
	margin: 0 max( 0px , calc((100% - var(--elf-css-body-max-width)) / 2) );
	
}

#blog-slider .uk-inline h3 {
	-webkit-font-smoothing: antialiased !important;
	-webkit-font-smoothing1: subpixel-antialiased !important;
	pointer-events: none;
	cursor: pointer;
	
	backdrop-filter1: blur(6px);
	background-color1: rgba(0,0,0,0.07);
	background-color: rgba(0,0,0,0.3);
	
}
#blog-slider .publishing-date {
	display: block;
	padding-top: 6px;
	line-height: 30px;
	z-index: 1;
}

#blog-slider li div.uk-inline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
  				linear-gradient(180deg, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 0.6) 100%)
  				;
  pointer-events: none; /* così non blocca click/hover sugli elementi sottostanti */
  z-index: 1;

}
#blog-slider > ul > li > div > div.uk-inline > div
{
	position: relative;
	z-index: 2;
}


#guest-reviews-wrapper {
	width1: 100%;
	max-width1: 1600px;
	margin-left1: auto;
	margin-right1: auto;
	padding-top1: 16px;
}
#guest-reviews {
	background-color1: #fafafa;
	margin1: 0;
	padding1: 0;
	margin: 0 max(16px, calc((100% - 1440px) / 2 ));
	margin1: 0 auto;
	padding1: 20px;
}
.hii-guest-reviews-slider .uk-slider-container ul {
}

.hii-guest-reviews-slider ul.uk-slider-items li > div {
	border: 1px solid #E5E5E5;
	border-radius: 0px;
	padding: 16px;
	margin: 16px;
	height: 85%;
}




#villa-header {
	position: relative;
	-webkit-font-smoothing1: antialiased;
}
#villa-header {	
 position: relative;
 -webkit-font-smoothing1: antialiased;
}

#villa-header::after {	
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* così non blocca click/hover sugli elementi dentro */
	background: linear-gradient(0deg,
						rgba(0, 0, 0, 0.3),
						rgba(0, 0, 0, 0.3)
		), /* si può anche togliere */
		linear-gradient(180deg,
						rgba(0, 0, 0, 0) 70%,
						rgba(0, 0, 0, 0.8) 100%
		),
		linear-gradient(178.6deg,
						rgba(0, 0, 0, 0.3) 7%,
						rgba(0, 0, 0, 0) 23%
		);
	background:
		linear-gradient(0deg,
						rgba(0, 0, 0, 0.3),
						rgba(0, 0, 0, 0.3)
		),
		linear-gradient(178.6deg,
						rgba(0, 0, 0, 0.3) 7%,
						rgba(0, 0, 0, 0) 23%
		);
	/* COMO */
	background:
		linear-gradient(0deg,rgba(29,29,27,.2),rgba(29,29,27,0.2)
		),
		linear-gradient(178.6deg,
						rgba(0, 0, 0, 0.3) 7%,
						rgba(0, 0, 0, 0) 23%
		),
		linear-gradient(180deg,
						rgba(0, 0, 0, 0) 70%,
						rgba(0, 0, 0, 0.8) 100%
		);	
}
#villa-header > div {	
	z-index: 1;
}




#footer-stbarts {	
 position: relative;
 -webkit-font-smoothing1: antialiased;
}

#footer-stbarts::after {	
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
  				linear-gradient(180deg, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.3) 100%)
  				;
  pointer-events: none; /* così non blocca click/hover sugli elementi dentro */
  /* COMO */
  background-image: 
				linear-gradient(0deg,rgba(29,29,29,0.2),rgba(29,29,29,0.2))
  	;
}
#footer-stbarts > div {	
	z-index: 1;
}



#footer-newsletter-wrapper-fullwidth {
	background-color: var(--elfcss-accent-color);	/* HII accent color */
	background-color1: var(--elfcss-black-color); 	/* HII accent color */
	background-color1: #252525;
}
#footer-newsletter-wrapper {
}
#footer-newsletter {
	padding: 10px 20px;
}
#footer-newsletter .uk-icon {
	color: #fff;
}


#footer-wrapper-fullwidth {
	background-color: #262623;
	background-color: #fefefe;
}
#footer-wrapper {
	width: 100%;
	max-width: var(--elf-css-body-max-width);
	margin-left: auto;
	margin-right: auto;
}
#footer {	
	padding: 40px var(--elf-css-body-min-side-margin);
	color: #444;
}
#footer a {
	color: #444;
}


#footer-credits {
	background-color:#F1F1F1;
	padding: 16px; 
}
#footer-credits a {
	color: #444;
}



#header-image-container-wrapper {
	max-width1: 1600px;
	margin-left1: auto;
	margin-right1: auto;
	background-color1: red;
	
	
	
	
}
#header-image-container {
	background-color1: purple;
	background-color1: #000;
}

#header-image-container:after  {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
	background1:
		linear-gradient(0deg,
						rgba(0, 0, 0, 0.3),
						rgba(0, 0, 0, 0.3)
		), /* si può anche togliere */
		linear-gradient(180deg,
						rgba(0, 0, 0, 0) 70%,
						rgba(0, 0, 0, 0.8) 100%
		),
		linear-gradient(178.6deg,
						rgba(0, 0, 0, 0.3) 7%,
						rgba(0, 0, 0, 0) 23%
		);
	backgroundq:
		linear-gradient(0deg,
						rgba(0, 0, 0, 0.3),
						rgba(0, 0, 0, 0.3)
		),
		linear-gradient(178.6deg,
						rgba(0, 0, 0, 0.3) 7%,
						rgba(0, 0, 0, 0) 23%
		);
	/* COMO */
	background:
		linear-gradient(0deg,rgba(29,29,27,.2),rgba(29,29,27,0.2)
		),
		linear-gradient(178.6deg,
						rgba(0, 0, 0, 0.3) 7%,
						rgba(0, 0, 0, 0) 23%
		),
		linear-gradient(180deg,
						rgba(0, 0, 0, 0) 85%,
						rgba(0, 0, 0, 0.3) 100%
		);		
}
#header-image-containerTEST h1,
#header-image-containerTEST p {
	display: none;
}


#header-image-container img {
	opacity1: 0.9;
}
#header-image-container:hover img {
	opacity1: 1;
}
#header-image-container h1, /* altrimenti nella pagina non esiste questo tag */
#header-image-container h2,
#header-image-container p {
	color: #fff;
	max-width1: 95%; /* manda a capo scritte che entrerebbero */
	margin: 0 auto;
	border-radius1: 999px;
	padding: 8px;
	
}
#header-image-container p {
	background-color1: rgba(0,0,0,0.3);
	background-color1: rgba(155, 130, 74, 0.5);
	border-radius1: 99px;
	
	border-radius1: 120px;
	backdrop-filter1: blur(8px);
	padding-top: 12px; /* compensazione allineamento del carattere HELVETICA se metto il blur */

}

.body-content-container-wrapper-fullwidth {
	
}
.body-content-container-wrapper {
	max-width: var(--elf-css-body-max-width); /* 1424px; /* 1424px= 1440 - 16 vscrollbar oppure 1584px; */
	margin-left: auto;
	margin-right: auto;
}
.body-content-container {
	padding: var(--elf-css-body-min-side-margin); /* spazio di default -> con il margin laterale negativo e pari al padding posso eliminarlo in modo che i contenuti arrivino al bordo */
}

.body-content-container p {
	margin-bottom: 12px; /* Spaziatura paragrafi vecchio sito */
}

.booking-conditions li::before {
	/* Override di uk-list se uso il numeratore */
	content: none;
}

.booking-conditions-1-9,
.booking-conditions-10-99 {
	padding-left: 30px;
	padding-bottom: 10px;
}
.booking-conditions-1-9 li > span {
	display: block;
	position: relative;
	left: -14px;
	margin-bottom: -10px;
}
.booking-conditions-1-9 li > span span {
	position: relative;
	left: -8px; 
}

.booking-conditions-10-99 li > span {
	display: block;
	position: relative;
	left: -24px;
	margin-bottom: -4px;
}
.booking-conditions-10-99 li > span span {
	position: relative;
	left: -7px; 
}

.booking-conditions-1-9 li,
.booking-conditions-10-99 li {
	padding-bottom: 20px;
}



/* Search results & pagination */
.search-results-count {
	color1:  red !important;
	
}
.search-results-pagination a,
.search-results-pagination a.current-page {
	border: 0  !important;
	margin-left: 4px !important;
	padding: 4px 8px !important;
	border-radius: 1px  !important;
	text-align: center;
}

.search-results-pagination a.current-page,
.search-results-pagination a:hover {
	background-color: var(--elfcss-accent-color);
	color: #fff;
}

/* la hide viene aggiunta e tolta dal JS dello switch */
.villa-list-view-short-text.hide.elf-responsive-single-range\@s-m,
.villa-list-view-features.hide.elf-responsive-single-range\@s-m {
	display: none;
}



/* Villa detail */
.hii-villa-slideshow {
	background-color: #f0f0f0; /* Muted */ 
	background-color1: #999; /* Muted */ 
	background-color1: #000; /* Muted */ 
}
/* FIX Safari z-index bug */
.hii-villa-slideshow .uk-slideshow-items > * {
}

.hii-villa-slideshow-thumbs {
}
.hii-villa-slideshow-thumbs li {
	padding-right:1px !important;
}
/* l'effetto sulle miniature è gestito impostando la classe su uk-thumbnav -> qui volendo lo personalizzo  */
.hii-villa-slideshow-thumbs li:not(.uk-active) img {
	opacity: 0.5; 
}
.hii-villa-slideshow-thumbs > ul > li.uk-active > a > img {
	opacity1: 1; 
/*	border1: 4px #8a7444 solid; */
}

.villa-info-overlay-container .elf-text-color-accent {
	color: #fff !important;
}

/* allineamento alla altre direttrici verticali */
.villa-info-overlay-wrapper {
	max-width1: 1600px;
	margin1: 0 auto;
}
.villa-info-overlay-container {
	width: 270px;
	border-radius: 0; /* 16px*/
	margin: 10px 10px 0 auto  ;
	padding: 8px;
	padding-top: 24px;
	/* anche trasparente con content big è ok */
	background-color1: rgba(155, 130, 74, 0.85); /* hii accent color con fade (senza ombra mini) */
	background-color1: rgba(255, 255, 255, 0.85);
	background-color: rgba(0, 0, 0, 0.3);
	position: relative;
	font-size1: 1.5vw;
	text-align: right;
	cursor: pointer;
	color1: rgba(155, 130, 74, 1);
	color:#f0f0f0;
	color1:#fff; /* per hii bg*/
	opacity1: 0.9;
	font-size: 110%;
}
.villa-info-overlay-container .hii-icon {
	color: #fff;
	opacity: 0.75; /* 0.6 per hii bg*/	
}
.villa-info-overlay-container > * {
	text-shadow1: none;	
}
/* Padding aumentato per primo elemento*/
.villa-info-overlay-container-0 {
	padding: 16px;
	height1: 320px;
/*background: -moz-linear-gradient(top,  rgba(155,130,74,0.85) 0%, rgba(155,130,74,0.85) 1%, rgba(155,130,74,0.85) 30%, rgba(155,130,74,0) 100%);
background: -webkit-linear-gradient(top,  rgba(155,130,74,0.85) 0%,rgba(155,130,74,0.85) 1%,rgba(155,130,74,0.85) 30%,rgba(155,130,74,0) 100%);
background: linear-gradient(to bottom,  rgba(155,130,74,0.85) 0%,rgba(155,130,74,0.85) 1%,rgba(155,130,74,0.85) 30%,rgba(155,130,74,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d99b824a', endColorstr='#009b824a',GradientType=0 );*/

	border1: 1px solid rgba(255,255,255,0.5);
	
	font-size: 120%;
	width1: 50%;
	min-width: 270px;
	
}

.elf-responsive-single-range\@0-s .villa-info-overlay-container,
.elf-responsive-single-range\@s-m .villa-info-overlay-container{
	margin-top: 10px;
	margin-bottom: 10px;
}

/* margin in base alla posizione della barra*/
.elf-responsive-single-range\@m-l .villa-info-overlay-container,
.elf-responsive-single-range\@l-xl .villa-info-overlay-container,
.elf-responsive-single-range\@xl-inf .villa-info-overlay-container {
	margin-top: 50px;
	margin-bottom: 10px;
}

.elf-responsive-single-range\@0-s .villa-info-overlay-container.villa-info-overlay-container-collapsed,
.elf-responsive-single-range\@s-m .villa-info-overlay-container.villa-info-overlay-container-collapsed {
	margin-top: 10px;
	margin-bottom: 10px;
}

.elf-responsive-single-range\@m-l .villa-info-overlay-container.villa-info-overlay-container-collapsed,
.elf-responsive-single-range\@l-xl .villa-info-overlay-container.villa-info-overlay-container-collapsed,
.elf-responsive-single-range\@xl-inf .villa-info-overlay-container.villa-info-overlay-container-collapsed {
	margin-top: 50px;
	margin-bottom: 10px;
}
.villa-info-overlay-container.villa-info-overlay-container-collapsed {
	padding: 0;
	margin: 10px 10px 0 auto;
	width: 32px; /* 36 con icona close circolare */
	min-width: auto;
	height: 32px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.05);
	opacity: 0.8;
}
.villa-info-overlay-container.villa-info-overlay-container-collapsed .villa-info-overlay-content {
	display: none;
}
.villa-info-overlay-toggler {
	position: absolute;
	z-index:9999;
	top:0;
	right:0;
	color:  #fff !important;
}



#villa-sections-tab {
	padding-top:  16px;
	padding-bottom:  16px;
}
#villa-sections-tab.uk-sticky-fixed {
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);		
	backdrop-filter: blur(8px);
	
	margin-left: -22px !important;
	padding-right: 480px !important; /* ATTENZIONE CHE QUANDO lo sticky si interrompe alla fine del container crea un extra spazio che attiva la scroll bar -> TO CHECK*/
	box-sizing: content-box; /* GREAT FIX */
	border-bottom: 1px #ddd solid;
}

#villa-sections-tab.elf-sticky-fixed-end {
	background-color1: red !important;
	/* non posso impostare la width perchè UIKIT la sovrascrive in linea con important! -> lo facco dal JS oppure uso un walk-around per evitare che compaia la barra di scorrimento orizzontale */
	margin-left: -99999px !important;
}



.villa-rating {
	margin-top: -8px;
	padding-bottom: 2px;
	letter-spacing: -3px;
}

#villa-name {
	margin-top: -2px;
	padding-bottom: 6px;
	letter-spacing: 0;
}

#villa-location {
	padding-bottom: 4px;
	padding-bottom: 24px;
}

#villa-type {
	padding-bottom: 4px;
}
#villa-price-start {
	padding-bottom: 24px;
}

#villa-capacity-info {
	padding-bottom: 24px;
}

#villa-features-summary {
	padding-bottom: 40px;	
}

#villa-features img {
	/* compatto la griglia delle features */
	margin-top: -8px;
}





#photogallery-header {
	margin-left: 15px;
}


.photogallery-thumb-label {
	color: #fff;
	margin-left: 15px;
	background-color1: red;
	padding: 2px 4px ;
	background-color: rgba(0,0,0,0.2);
	backdrop-filter: blur(4px);
}




/* Sovrascrivo gli stili per la versione stampabile */
@media print {
	body {
		background-color: #fff;
		background: none;	
	}
}

/* responsive ranges  */
#breakpoint-range {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 24px;
	z-index: 999;
	background-color: #ddd;
	display: none;
}
#breakpoint-range.elf-responsive-single-range\@0-s {
	background-color: #9fe3e4;
}
#breakpoint-range.elf-responsive-single-range\@0-s:before {
	content: "0-s (<480 px)";
}
#breakpoint-range.elf-responsive-single-range\@s-m {
	background-color: #eabaea;
}
#breakpoint-range.elf-responsive-single-range\@s-m:before {
	content: "s-m (480-960 px)";
}
#breakpoint-range.elf-responsive-single-range\@m-l {
	background-color: yellow;
}
#breakpoint-range.elf-responsive-single-range\@m-l:before {
	content: "m-l (960-1280 px)";
}
#breakpoint-range.elf-responsive-single-range\@l-xl {
	background-color: #96eb9b;
}
#breakpoint-range.elf-responsive-single-range\@l-xl:before {
	content: "l-xl (1280-1600 px)";
}
#breakpoint-range.elf-responsive-single-range\@xl-inf {
	background-color: #c0cdf3;
}
#breakpoint-range.elf-responsive-single-range\@xl-inf:before {
	content: "xl-inf (>1600px)";
}


/* Mobile device styles */
/*
Device logical resolution:
- iPhone <= 4S = 320x480
- iPhone 5, 5S, 6 (display zoom) = 320x568
- iPhone 6 Display Zoom = 375x667
- iPhone 6, 6 Plus (display zoom) = 375x667
- iPhone 6 Plus = 414x736
- iPad (all) = 768x1024
*/

/* 
NB: se imposto la viewport ad un valore fisso allora le queries scattano sempre a quel valore indipendentemente dal device perché con la viewport forzo la dimensione della finestra che imposta il browser (che è diversa dalla device-width) -> per far funzionare le queries successive devo impostare nell'HTML la viewport alla larghezza del device mettenno nell'head 
<meta name="viewport" content="width=device-width, initial-scale=1" />
altrimenti il dispositivo scala la pagina per riempire la propria viewport di default che è 980px
*/

/* Punto chiave per media queries -> devo sfruttare il cascading altrimenti in ogni range devo ripetere tutti gli stili -> al limite alla fine (così sovrascrive) faccio qualcosa selettivo usando il range */
/* SOLUZIONE:*/
/* Desktop down design -> uso max-width in modo che le impostazioni vanno a cascata scendendo di dimensione */
/* Mobile up design -> uso min-width in modo che le impostazioni vanno a cascata salendo di dimensione */
/* NB: max-width significa if (viewport-with<=max-width)

/* Desktop, Tablet landscape */
/* iPad 2/Air/Retina Landscape */
#winsize {
	text-align: center;
	display: block;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: yellow;
	opacity: 1;
	z-index:9999;
	display: none;	
}
#winsize::before {
	content: "Desktop - Large tablet | > 1920px";
	color: #000;
}
#winsize::after {
    content: attr(data-width);
}

#main {
}


@media (max-width: 1920px) {
#winsize {
	background-color: #f59e00;	
}
#winsize::before {
	content: "Desktop - Large tablet | max 1920px";
}
}
@media (max-width: 1600px) {
#winsize {
	background-color: #84d5ff;	
}
#winsize::before {

	content: "Desktop - Large tablet | max 1600px";
}
}
@media (max-width: 1440px) {
#winsize {
	background-color: #e39aff;	
}
#winsize::before {
	content: "Desktop - Large tablet | max 1440px";
}
}
@media (max-width: 1200px) {
#winsize {
	background-color: #9ff7a0;	
}
#winsize::before {
	content: "Desktop - Large tablet | max 1200px";
}
}



/* small desktop ipad landscape (1024x768) */
/* iPad Pro 10.5" landscape (1112x834) */
/* iPad Pro 12.9" portrait (1024x1336)  */

@media (max-width: 1024px) {
#winsize {
	background-color: #f996b0;	
}
#winsize::before {
	content: "Desktop - tablet landscape (iPad 2 3 mini Air) | max 1024px";
}
}

/* Tablet portrait (and below if not overwritten) */
/* iPad, iPad2, iPad3, iPad Mini, iPad Air portrait (768x1024) */
 
@media (max-width: 768px) {

#winsize {
	background-color: lightblue;	
}
#winsize::before {
	content: "Tablet portrait (iPad 2 3 mini Air) | max 768px";
}


#main {
}

	
}

/* Da qui in giù devo prendere tutti i telefoni perchè anche se la larghezza in pixel è poco diversa dal tablet, le dimensioni del dispositivo sono significativamente inferiori -> non devono ricadere nel caso precedente */
/* iPhone 5, 5S, SE, 6 (display zoom) = 320x568 /* 
/* iPhone 6, 6 Plus (display zoom) = 375x667 */
/* iPhone 6S (no display-zoom) = 414x736

/* -> il phone landscape più largo = 736 -> uso questo altrimenti il 6S landscape rientrerebbe sopra */

/* iPhone 5/5S/6/6S Landscape */
@media (max-width: 736px) {

#winsize {
	background-color: lightcoral;	
}
#winsize::before {
	content: "Phones landscape: 5 5S SE 6 6+ 6S 6S+ 7+ 8+ | max 736px";
}


#main {
}
	
#main-slide-show h2 span {
	font-sizeOFF: 100% !important;
}

}

/* iPhone 4S landscape (and below if not overwritten) */
/* iPhone 6/6S portrait */
@media (max-width: 480px) {

#winsize {
	background-color: lightslategrey;	
}
#winsize::before {
	content: "Phones all portrait + 4s landscape | max 480px";
}


#main {
}



}

/* iPhone 4S,5,5S,SE portrait */
@media (max-width: 320px) {

#winsize {
	background-color: lawngreen;	
}
#winsize::before {
	content: "Phones: 4S 5 5S SE portrait | max 320px";
}

}