/* @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;
 } 
.uk-h6 {
  font-family: inherit;
  text-transform: inherit;
 }
 
.uk-tab > * > a {
  font-family: inherit;
  font-size: inherit;
}

/* @end */


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

/* Main font */
html,
.elf .elf-font-main,
.elf.elf-font-main {
	font-family: 'Montserrat', sans-serif;
	/*font-weight: 300; override su definizione font locale */ 
	font-family1: helvetica;
	font-family1: 'Playfair Display', sans-serif;
	font-family1: 'Montserrat', sans-serif;
	font-family1: 'Montserrat Alternates', sans-serif;
	font-family1: arial;
	font-family1: 'Open Sans';
	font-family1: cobforta;
	font-family1: 'Maven Pro';
	font-family1: 'Nanum Gothic'; 
	font-family1: Quicksand;
	font-family1: Raleway; /* simile più compatto  */
	font-family1: 'Fira Sans'; /* non male forse il migliore con cirillico*/
	
	font-family1: 'Work Sans';
	font-weight1: 300;
	font-size1: 105%;
	
    font-family1: "Helvetica Neue LT Std";
	font-weight1: 400;
	-webkit-font-smoothing1: antialiased; /* con il Montserrat not OK */
	
	letter-spacing1: 0.03em;
	color1: blue !important;

}


/* 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;
}
*/

/*
#select2-search_terms_picker-results > li:nth-child(1) > strong > span {
	font-weight: 500;
	color1: red;
}
*/

/* Evita lo scroll durante l'uikit modal TO DO */
body_OFF {
	overflow: hidden;
	position:fixed
}

/* Alt font */
.elf .elf-font-alt,
.elf.elf-font-alt {
	font-family: 'Montserrat Alternates', sans-serif;
}

/* 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: 'Playfair Display', sans-serif;
	font-family1: 'Montserrat', sans-serif;
	font-family1: 'Montserrat Alternates', sans-serif;
	font-family1: arial;
	font-family1: 'Open Sans';
	font-family1: cobforta;
	font-family1: 'Maven Pro';
	font-family1: 'Nanum Gothic'; /* non male */
	font-family1: Quicksand;
	font-family1: Raleway;
	font-family1: helvetica;

	font-family1: Roboto;
	
	font-family1: 'Open Sans Condensed', sans-serif;
	font-family1: Raleway; /* simile più compatto  */
	font-family1: 'Fira Sans';
	font-weight1: 100;
	/*font-weight: 300; Override su definizione font del file locale */

	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased; /* OK con Open Sans */ 
	
	font-family1: 'Helvetica Neue LT Std Extended', sans-serif;
	font-weight1: 300;
	letter-spacing1: 0.04em;
		
	color1: red;

}

/* 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 */

/* Responsive text size FIX */
/* Uso gli stessi bearkpoint scelti per UIKit */
/*
- ingrandisco il testo base sul telefono e sugli schermi molto grandi
- rimpiccolisco i testi negli header (slideshow ed immagini statiche di intestazione) 
*/


#header-image-container h1,
#header-image-container h2 {
	text-transform: uppercase;
	letter-spacing: 8px;
}

.body-content-container h1 {
	text-transform: uppercase;
	letter-spacing: 8px;
}

@media (min-width: 1px) {
html {
	font-size: 20px;
	color: #333; /* scurisco il testo per migliorare la leggibilità */
}
.hii-main-slideshow h2.elf-text-size-4xl,
#header-image-container h1.elf-text-size-4xl,
#header-image-container h2.elf-text-size-4xl {
	font-size: 1.8em; /* Ripristino il default */
}
.hii-main-slideshow h2.elf-text-size-5xl,
#header-image-container h1.elf-text-size-5xl,
#header-image-container h2.elf-text-size-5xl {
	font-size: 1.8em;  /* più piccolo del default */
}
.hii-main-slideshow p.elf-text-size-l,
#header-image-container p.elf-text-size-l {
	font-size: 1em; /* più piccolo del default */
}

.elf h3.uk-card-title {
	font-size: 1.4em; /* più piccolo del default */	
	background-color1: red !important;

}
.elf h3.uk-card-title .hii-icon {
	width:  40px;
	height: auto;
}
.elf .uk-card-body {
	padding: 8px;
}

.body-content-container h1 {
	font-size: 1.3em !important;
	color-off: purple !important;
}


}

@media (min-width: 480px) {
html {
	font-size: 19px;
	color: #333; /* scurisco il testo per migliorare la leggibilità */
	
}

.hii-main-slideshow h2.elf-text-size-4xl,
#header-image-container h1.elf-text-size-4xl,
#header-image-container h2.elf-text-size-4xl {
	font-size: 2.2em; /* Ripristino il default */
}

.hii-main-slideshow h2.elf-text-size-5xl,
#header-image-container h1.elf-text-size-5xl,
#header-image-container h2.elf-text-size-5xl {
	font-size: 2.5em; /* Ripristino il default */
}
.hii-main-slideshow p.elf-text-size-xl,
#header-image-container p.elf-text-size-xl {
	font-size: 1.125em; /* Ripristino il default */	
}

.elf h3.uk-card-title {
	font-size: 1.8em; /* più piccolo del default */	
	background-color1: green !important;
}
.elf h3.uk-card-title .hii-icon {
	/* Ripristino il default */	
	width:  48px;
	height: auto;
}
.elf .uk-card-body {
	padding: 20px;
}

.body-content-container h1 {
	font-size: 1.1em !important;
	color-off: red !important;
}


}

@media (min-width: 960px) {
html {
	/* Ripristino il default */
	font-size: 16px;	
	color: #666;
	}

.hii-main-slideshow h2.elf-text-size-4xl,
#header-image-container h1.elf-text-size-4xl,
#header-image-container h2.elf-text-size-4xl {
	font-size: 2.6em; /* Ripristino il default */	
}



.elf h3.uk-card-title {
	/* Ripristino il default */
	font-size: 2.0em;
	background-color1: yellow !important;
}
.elf .uk-card-body {
	padding: 30px; /* Ripristino il default */
}

.body-content-container h1 {
	font-size: 1.4em !important;
	color-off: green !important;
}

}

@media (min-width: 1280px) {
html {
	font-size: 16px; /* Ripristino il default */	
}
}



@media (min-width: 1600px) {
html {
	font-size: 18px; /* più grande del default */
}
.hii-main-slideshow h2.elf-text-size-5xl,
#header-image-container h1.elf-text-size-5xl,
#header-image-container h2.elf-text-size-5xl {
	font-size: 2.5em; /* più grande del default */
}
.hii-main-slideshow p.elf-text-size-l,
#header-image-container p.elf-text-size-l {
	font-size: 1.2em;  /* più grande del default */
}


}





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

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

.uk-background-muted {
  background-color1: #f8f8f8; /* UI KIT*/ 
  background-color1: #e4e4e4; /* grafica originale*/ 
  background-color: #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(--accent-color) !important;
}


/* override linea inferiore su header */
#header-search 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),
#header-search form textarea.elf-field-textarea,
#header-search form .select2-selection.select2-selection--single,
#header-search form .select2-selection.select2-selection--multiple,
#header-search form .uk-tomselect.ts-wrapper
{
	border1: 0px !important; /* altera l'altezza -> modifico solo il colore*/
	border-bottom-color: transparent !important;
}





/* @group ELF Links override */
.elf a,
a.elf {
	text-decoration: none;
	color: var(--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(--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;
}


/* styled button link override */
.elf form .elf-link-button,
form .elf.elf-link-button,
.elf a.elf-link-button,
a.elf.elf-link-button {
 	text-decoration: none;
 	background-color: #fff; /* HII accent color */
 	color: var(--accent-color); 	/* HII accent color */
 	padding: 5px 12px;
 	border: 1px solid var(--accent-color); 	/* HII accent color */
}
.elf form .elf-link-button.elf-active,
form.elf.elf-link-button.elf-active,
.elf form .elf-link-button:hover,
form .elf.elf-link-button:hover,
.elf form .elf-link-button:focus,
form .elf.elf-link.button:focus,
.elf a.elf-link-button.elf-active,
a.elf.elf-link-button.elf-active,
.elf a.elf-link-button:hover,
a.elf.elf-link-button:hover,
.elf a.elf-link-button:focus,
a.elf.elf-link.button:focus {
	color: #fff;
	text-decoration: none;
 	background-color: var(--accent-color) !important; /* HII accent color */ 	
}


/* styled primary button link override */
.elf a.elf-link-button-primary,
a.elf.elf-link-button-primary {
 	text-decoration: none;
 	color: #fff;
 	background-color: var(--accent-color);
 	padding: 5px 12px;
 	border: 1px solid var(--accent-color);
}
.elf a.elf-link-button-primary.elf-active,
a.elf.elf-link-button-primary.elf-active,
.elf a.elf-link-button-primary:hover,
a.elf.elf-link-button-primary:hover,
.elf a.elf-link-button-primary:focus,
a.elf.elf-link.button-primary:focus {
  background-color: #8a7444;
  text-decoration: none;
}
.elf a.elf-link-button-primary:disabled,
a.elf.elf-link-button-primary:disabled {
  color: #999;
  text-decoration: none;
}

/* @end */


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


/* Override colore uk-tab */
/* uk-tab active item */
.uk-tab > li:not(:first-child) {
	padding-left: 5px;
}
.uk-tab > .uk-active > a {
	color: var(--accent-color); 	/* HII accent color */
}
/* uk-tab available item */
.uk-tab > li > a {
	color: #aaa;
}




/* Override colore bordo su tema select2 */
.select2-container--uikit3 .select2-selection--single {
	border-color: var(--accent-color);
}
.select2-container--uikit3 .select2-selection--single[aria-expanded=true] {
	border-color: var(--accent-color); /* HII accent color */

}
.select2-container--uikit3.select2-container--focus .select2-selection--single,
.select2-container--uikit3.select2-container--focus .select2-selection--multiple {
	border-color: var(--accent-color); /* HII accent color */	
}



/* allineamento a sx della voce di menu */
#search-options > div > span > span.selection > span {
	padding-left: 0px;
}

/* 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: 16px
}
#search-results-container {
	padding-top: 12px
	
}


/* Responsive spazio laterale header search per allineamento Daniela */
#search-options,
.search-results-countandpagination,
.search-results-header,
.search-results-navpath {
	margin: 0 -16px;
}
@media (max-width: 1450px) {
	#search-options,
	.search-results-countandpagination,
	.search-results-header,
	.search-results-navpath {
		margin: 0 0px;
	}
}



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

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



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


/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator /devo usare la versione responsive */
.elf-spritesymbol-contemporary-villas, .elf-spritesymbol-villas-near-village, .elf-spritesymbol-luxury-chalet, .elf-spritesymbol-golf-villas, .elf-spritesymbol-experience, 
.elf-spritesymbol-family-friendly-villas, .elf-spritesymbol-italy, .elf-spritesymbol-offers, .elf-spritesymbol-service, .elf-spritesymbol-beach-villas, 
.elf-spritesymbol-best-villas, .elf-spritesymbol-real-estate, .elf-spritesymbol-traditional-villas, .elf-spritesymbol-guest-reviews, .elf-spritesymbol-pets-friendly, 
.elf-spritesymbol-tennis-court, .elf-spritesymbol-top-luxury, .elf-spritesymbol-wedding-villas, .elf-spritesymbol-large-villas
{ max-width: 100%; background-size: 100%; background-image: url('../img/symbols-sprite-responsive-09-2023.png'); }
 
.elf-spritesymbol-contemporary-villas { background-position: 0 0%; background-size: 100%; }
.elf-spritesymbol-villas-near-village { background-position: 0 5.072464%; background-size: 100%; }
.elf-spritesymbol-luxury-chalet { background-position: 0 10.144928%; background-size: 123.404255%; }
.elf-spritesymbol-golf-villas { background-position: 0 15.217391%; background-size: 134.883721%; }
.elf-spritesymbol-experience { background-position: 0 20.740741%; background-size: 145%; }
.elf-spritesymbol-family-friendly-villas { background-position: 0 27.536232%; background-size: 145%; }
.elf-spritesymbol-italy { background-position: 0 33.333333%; background-size: 145%; }
.elf-spritesymbol-offers { background-position: 0 40.740741%; background-size: 145%; }
.elf-spritesymbol-service { background-position: 0 48.148148%; background-size: 145%; }
.elf-spritesymbol-beach-villas { background-position: 0 54.347826%; background-size: 161.111111%; }
.elf-spritesymbol-best-villas { background-position: 0 59.42029%; background-size: 161.111111%; }
.elf-spritesymbol-real-estate { background-position: 0 64.492754%; background-size: 161.111111%; }
.elf-spritesymbol-traditional-villas { background-position: 0 69.565217%; background-size: 161.111111%; }
.elf-spritesymbol-guest-reviews { background-position: 0 74.637681%; background-size: 170.588235%; }
.elf-spritesymbol-pets-friendly { background-position: 0 79.710145%; background-size: 170.588235%; }
.elf-spritesymbol-tennis-court { background-position: 0 84.782609%; background-size: 170.588235%; }
.elf-spritesymbol-top-luxury { background-position: 0 89.855072%; background-size: 170.588235%; }
.elf-spritesymbol-wedding-villas { background-position: 0 94.927536%; background-size: 170.588235%; }
.elf-spritesymbol-large-villas { background-position: 0 100%; background-size: 173.134328%; }


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(--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(--accent-color); 	/* HII accent color */	
}

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



.elf-navpath-flat {
	text-transform: lowercase;
}

#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;
}



#header-wrapper-fullwidth {
	background-color: #fff;
	width: 100%;
	/* se non uso uk.sticky */
	position1: fixed;
	top1:0;
	z-index:981; /* sopra Google Maps che ha 980 */
}

.input-inside-static-container-active #header-wrapper-fullwidth {
	position1: absolute !important;
	background-color: yellow !important;
	top1: 100px !important;
	margin-top1: 100px !important;
}

#header-wrapper-fullwidth.uk-sticky-fixed.uk-active {
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
	opacity1: 0.95;
	
}
.elf-mobile #header-wrapper-fullwidth.uk-sticky-fixed.uk-active {
	opacity: 0.95;
}
.uk-sticky-placeholder {
}

#header-menu-wrapper {
	max-width1: 1600px;
	margin-left: auto;
	margin-right: auto;
	background-color1: lime;
}

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

#header-menu .uk-subnav-divider li::before {
	margin: 12px;
}

#header-menu .uk-navbar-nav {
    gap: 20px;
}

#header-menu .uk-navbar-nav > li > a {
	height: auto;
	margin-right: 0px;
	margin-left: 0;
	background-color1: red;
	padding-left: 0;
	padding-right: 0px;
	text-transform: uppercase; /* main menu item */
	min-height: 64px; /* overwrite per default 80 uikit */
}
#header-menu li a {
	text-transform: lowercase;  /* menu sub items */
}

.uk-sticky-fixed.uk-active #header-menu-wrapper   {
	height1: 64px; /* set sticky menu height */
}
.uk-sticky-fixed.uk-active #header-menu  img {
	height: 46px; /* set sticky menu height */
}
.uk-sticky-fixed.uk-active .uk-navbar-nav > li > a {
	min-height: 36px;
}



.villa-favorite-item-dragging {
	height: 130px !important;
	width1: 32%;
	overflow: hidden !important;
	border: 1px solid #333;
}

.villa-favorite-item-dragging-other {
	height: 130px;
	width1: 32%;
	overflow: hidden;
}

/*
.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-dragging > div:first-child,
.villa-favorite-item-dragging-other > div:first-child {
	display1: none;
	width1:  20%;
}

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


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

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


.elf-mobile.elf-phone .villa-favorite-item-dragging > div:last-child,
.elf-mobile.elf-phone .villa-favorite-item-dragging-other > 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 {
	background-color: rgba(255,255,255,0.65) !important;
}
.villa-favorite-toggle-button-icon:hover {
	background-color: rgba(255,255,255,0.95) !important;
	color: #666 !important;
}

.villa-favorite-toggle-button-icon-active {
	background-color: #fff !important;
}



#header-search-wrapper-fullwidth {
	position: absolute; /* Rimane sopra la foto */
	display: none; /* Evito il blink iniziale */
	width: 100%;
	z-index: 1;
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.85);

	/* senza sovrapposizione foto */
	background-color1: #fff;
	position: relative; /* la foto scorre sotto */
}
.uk-sticky-fixed.uk-active #header-search-wrapper-fullwidth {
	position: relative; /* l'ombra del container viene espansa considerando tutta l'altezza */
}

#header-search-wrapper-fullwidth.search-page {
	position: relative; /* Non ho la foto sotto quindi se ho più opzioni l'altezza eve crescere altrimenti vado sopra ai filtri */
}


/* sul mobile evito l'absolute per i bug ios con l'editing del from */
#header-search-wrapper-fullwidth.elf-responsive-single-range\@0-s,
#header-search-wrapper-fullwidth.elf-responsive-single-range\@s-m {
	position: relative;
}



#header-search-wrapper-fullwidth.elf-responsive-single-range\@0-s #header-search,
#header-search-wrapper-fullwidth.elf-responsive-single-range\@s-m #header-search {
	background-color: #fafafa;
}
#header-search-wrapper-fullwidth.elf-responsive-single-range\@0-s form > div {
	margin-top: 2px;
	margin-bottom: 8px;
	margin-left: 1%;
	margin-right: 1%;
}

#header-search-wrapper-fullwidth.elf-responsive-single-range\@s-m form > div {
	margin-top: 2px;
	margin-bottom: 12px;
	margin-left: 16px;
	margin-right: 16px;
}


#header-search {
	max-width1: 1600px;
	margin-left: auto;
	margin-right: auto;	
	min-height1: 48px;
	background-color1: red;
}
#header-search .uk-icon {
	color: #111;
}
#header-search input {
	color: #000;
}

#header-search li.select2-selection__choice {
	border-radius1: 16px;
	padding: 0px 4px 0px 2px;
	border-color: #ccc;
}


/* Icona e campo search barra ricerca -> la single è nei form contact e enquire e non la altero  */ 
form .select2-selection.select2-selection--single-OFF,
form .select2-selection.select2-selection--multiple
{
	padding-left: 36px !important;
}
#header-search .form-icon-search {
	padding-left: 10px;
}
@media (max-width: 959px) {
#header-search .form-icon-search {
	padding-left: 0;
}
}




/* scurisco lo sfondo nella versione stacked */
.elf-responsive-single-range\@0-s #header-search,
.elf-responsive-single-range\@s-m #header-search {
	background-color: #fefefe !important;
	border-top: 1px #ddd solid;
	border-bottom1: 1px #ddd solid;
}

.elf-responsive-single-range\@0-s #header-search input,
.elf-responsive-single-range\@s-m #header-search input {
	font-size: 16px; /* IMP evito lo zoom su iOS*/
}
.elf-responsive-single-range\@0-s #header-search select,
.elf-responsive-single-range\@s-m #header-search select {
	font-size: 16px; /* IMP evito lo zoom su iOS*/
}
.elf-responsive-single-range\@0-s #header-search .select2-selection.select2-selection--single,
.elf-responsive-single-range\@s-m #header-search .select2-selection.select2-selection--single { 
	font-size: 16px; /* IMP evito lo zoom su iOS*/	
}
.elf-responsive-single-range\@0-s #header-search .select2-selection.select2-selection--multiple,
.elf-responsive-single-range\@s-m #header-search .select2-selection.select2-selection--multiple { 
	font-size1: 16px; /* IMP evito lo zoom su iOS*/	
}

#header-search input[type=submit]  {
	border: 0;
	color: #fff !important;
	background-color: var(--accent-color);	/* HII accent color MODIFICATO WEB OK */
	background-color1: #9b834f;	/* HII accent color OLD SITE */
	background-color1: #ab976b;	/* HISB accent color */
	background-color1: #ae8935;	/* HII accent color HII LOGO PANTONE 7558 UP */
	background-color1: #b28c46; /* HII Accent color PANTONE 16-0948 TPG Harvest Gold */
	background-color1: #a68d63;	/* HII accent color NEW SITO GOLD RELATED */
	background-color1: #c99e66; /* HII accent color signatureluxurytravel.com */
	background-color1: #BE9B68;	/* HII accent color DA ADVANCE PARIS */
	background-color1: #CEA866; /* HII accent color GRAFICA FATCREA TASTI DESKTOP, stelle… BRONZE */
	background-color1: #BA9452; /* HII accent color GRAFICA FATCREA TASTI MOBILE */	
	background-color1: #af8648; /* HII Accent color PANTONE 7551 U */ 
	background-color1: #b68c4a; /* HII Accent color PANTONE P19-5 U */
	
	background-color1: #a37b17;
	background-color1: #b8860b;
	cursor: pointer;
	
	/* versione arrotondata */	
	border-radius1: 32px;
	border1: 4px solid #fff;
	width1: 85%;
	font-size1: 95%;
	margin-right1: 10px;
	max-width1: 240px;
}

#header-search > form > div {
	align-content: center;
}
.elf-responsive-single-range\@m-l #header-search > form > div:nth-child(2),
.elf-responsive-single-range\@l-xl #header-search > form > div:nth-child(2),
.elf-responsive-single-range\@xl-inf #header-search > form > div:nth-child(2) {
	border-right: 1px #ccc solid;
	border-left: 1px #ccc solid;
	border-image: 
	    linear-gradient(
	      to bottom, 
	      rgba(0, 0, 0, 0),
	      #ccc
	    ) 1 100%;
}
#header-search > form > div:nth-child(4) {
	background-color: var(--accent-color);
}

.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 */
.OFFhii-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
*/
.OFFhii-main-slideshow li div:first-child {
	background:
		linear-gradient(0deg,
						rgba(0, 0, 0, 0.3),
						rgba(0, 0, 0, 0.3)
		),
		linear-gradient(180deg,
						rgba(0, 0, 0, 0) 70%,
						rgba(0, 0, 0, 0.8) 100%
		),
		linear-gradient(177.62deg,
						rgba(0, 0, 0, 0.3) 10%,
						rgba(0, 0, 0, 0) 30%
		);		
}

.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(--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(--accent-color); 	/* HII accent color */
}

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



#keypoints {
	margin: 0 auto;
	padding: 0 16px;
	max-width: 900px;	
}


#hii-destinations-slider-wrapper {
	width1: 100%;
	max-width1: 1600px;
	margin-left1: auto;
	margin-right1: auto;
}

#hii-destinations-slider {
	margin-right1: -30%;
}

#hii-destinations-slider li {
	background-color: #000;
	overflow: hidden;
}
#hii-destinations-slider li > img,
#hii-destinations-slider li > picture > img
{
	background-color: #000; /* non ha effetto, conta quello del container */
	opacity: 0.8;
	transition: all 0.1s ease-out;
}
.elf-desktop #hii-destinations-slider li:hover > img,
.elf-desktop #hii-destinations-slider li:hover > picture > img
 {
	opacity: 1;
	transition: all 0.3s ease-out;
	transform: scale(1.1);
}
.elf-mobile #hii-destinations-slider li > img,
.elf-mobile #hii-destinations-slider li > picture > img
 {
	opacity: 0.7;
}

.hii-destinations-symbol {
	width: auto;
	height: 50px;	
}
  

#hii-destinations-slider .explore-button {
	-webkit-font-smoothing: antialiased;
	width: 128px;
	height: 128px;
	position: absolute;
	left: 32px;
	bottom: 24px;
}
.elf-desktop #hii-destinations-slider .explore-button {
	bottom: -100px;
	transition: all 0.15s ease-in-out;
	opacity: 0;
}
.elf-desktop #hii-destinations-slider  li:hover .explore-button {
	bottom: 24px;
	opacity: 1;
}

#hii-destinations-slider .explore-button a {
	text-decoration: none;
	text-align: center;
	display: block;
	width: 100%;
	height: 100%;
	line-height: 128px;
	border-radius: 999px;
	border1: 1px solid white;
	background-color: rgba(0, 0, 0, .35);
	color: #fff;
}
.elf-mobile #hii-destinations-slider .explore-button a {

}
#hii-destinations-slider .explore-button a:hover {
	text-decoration: none;
	background-color: rgba(0, 0, 0, .55);
}



#hii-areas-browser-wrapper {
	width: calc(100% - 120px);
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

#hii-areas-browser {
	-webkit-font-smoothing: antialiased;
	text-align: center;
	position: relative;
}

#hii-areas-browser li {
	display: block;
}
#hii-areas-browser .areas-link {
	position: relative;
	background-color1: red;
	display: block;
	border-radius: 100%;
	overflow: hidden;
}
#hii-areas-browser .areas-link a {
	display: block;
	background-color1: lime;
}
#hii-areas-browser img {
	filter: brightness(80%);
	transition: all 0.15s ease-in-out;
	border-radius: 100%;
	overflow1: hidden;
}
#hii-areas-browser .title {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: .15s ease-in-out;
	width: 80%;
	background-color1: lime;
	color:  #fff;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 160%;
	line-height: 110%;
}
@media (min-width: 1px) {
#hii-areas-browser .title {
	font-size: 130%;
}
}
@media (min-width: 480px) {
#hii-areas-browser .title {
	font-size: 170%;
}
}
#hii-areas-browser .explore-button {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0%;
	height: 0%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color:  #fff;
	transition: .15s ease-in-out;
	background-color: rgba(0,0,0,.5);
	border-radius: 100%;
	opacity: 0;

	width1: 50%;
	height1: 50%;
	opacit1: 1;
}

#hii-areas-browser .explore-text {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: .15s ease-in-out;
	color:  #fff;
	opacity: 0;
}


#hii-areas-browser li:hover img {
	filter: brightness(100%);
	transform1: rotate(5deg);
	
}
#hii-areas-browser li:hover .title {
	margin-top: -18%;
}
#hii-areas-browser li:hover .explore-button {
	margin-top: 25%;
	opacity: 1;
	width: 50%;
	height: 50%;
}
#hii-areas-browser li:hover .explore-text {
	margin-top: 25%;
	opacity: 1;
}



#guest-reviews-wrapper {
	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 16px;
}
#guest-reviews {
	background-color: #fafafa;
	margin: 0;
	padding: 0;
}


#guest-reviews .uk-slideshow-items {
	width: 90%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

#guest-reviews .uk-slideshow-items.elf-responsive-height {
	height: 620px;	
}

/* la classe serve per ricordare la gestione responsive dall'html */ 
@media (min-width: 480px) {
	#guest-reviews .uk-slideshow-items.elf-responsive-height {
		height: 360px;
	}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
	#guest-reviews .uk-slideshow-items.elf-responsive-height {
		height: 220px;
	}
}
/* Desktop and bigger */
@media (min-width: 1280px) {
	#guest-reviews .uk-slideshow-items.elf-responsive-height {
		height: 230px;
	}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
	#guest-reviews .uk-slideshow-items.elf-responsive-height {
		height: 260px;
	}
}





#blog-wrapper {
	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 48px
}
#blog {
}

#blog .publishing-date {
	display: block;
	padding-top: 2px;
	line-height: 28px;
}
#blog .publishing-date span {
	font-size: 150%;
}


#footer-stbarts h4,
#footer-stbarts span {
	color: #fff;
}
#footer-stbarts h4 {
	line-height: 40px;	
}


#footer-newsletter-wrapper-fullwidth {
	background-color: var(--accent-color);	/* HII accent color MODIFICATO WEB OK */
	background-color1: #9b834f;	/* HII accent color OLD SITE */
	background-color1: #ab976b;	/* HISB accent color */
	background-color1: #ae8935;	/* HII accent color LOGO PANTONE 7558 UP DA ILLUSTRATOR -> NON MALE */
	background-color1: #b28c46; /* HII Accent color PANTONE 16-0948 TPG Harvest Gold NON MALE */
	background-color1: #a68d63;	/* HII accent color NEW SITO GOLD RELATED */
	background-color1: #c99e66; /* HII accent color signatureluxurytravel.com */
	background-color1: #BE9B68;	/* HII accent color DA ADVANCE PARIS */
	background-color1: #CEA866; /* HII accent color GRAFICA FATCREA */
	background-color1: #af8648; /* HII Accent color PANTONE 7551 U */ 
	background-color1: #b68c4a; /* HII Accent color PANTONE P19-5 U */
}
#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: 1440px;
	margin-left: auto;
	margin-right: auto;
}
#footer {	
	padding: 40px 20px;
	color: #888;
}
#footer a {
	color: #888;
}




#credits {
	/* display: none; Da riattivare al deploy*/
	float:right;
	width: 260px;
	width: 90px;
	margin-top: 36px;
	margin-top: 16px;
	padding-right: 0px;
}
#credits img {
	padding-bottom: 5px;
}




#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 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-width: 95%;
	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;
}

.body-content-container-wrapper-fullwidth {
	
}
.body-content-container-wrapper {
	max-width: 1424px; /* 1424px= 1440 - 16 vscrollbar oppure 1584px; */
	margin-left: auto;
	margin-right: auto;
}
.body-content-container {
	padding: 16px; /* 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 h1 {
	color: #666;
}
.body-content-container h2 {
	color: #666;
}
.body-content-container h3 {
	color: #666;
}
.body-content-container h4 {
	color: #666;
	margin-bottom: 6px;
}
.body-content-container h5 {
	color: #666;
}
.body-content-container h6 {
	color: #666;
}
.body-content-container p {
	color: #888;
	margin-bottom: 12px;
}


.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(--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-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;
}






/* 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;
}

#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-size: 100% !important;
}
#keypoints-wrapper h1 {
	font-size: 170% !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";
}

}