@import"skeleton.min.css";
@import"reset.css";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

html {
  scroll-behavior: smooth; 
}

body { 
	position:relative;
	font-family: "Lato", serif;
	font-weight:300;
	font-size:20px;
	line-height:30px;
	color:#6F6F6F;
	background-color:#FFF;
	margin:0px; }

	
b, .bold { font-weight:400; }
strong { font-weight:900; }

.textBig { font-size: 35px; line-height: 55px; font-weight: 300;}

.textSmall {
	font-size:16px; line-height: 22px; margin-top: 10px; }

.p0 {padding:0px;}
p, 
.p1	{padding-bottom:5px;}
.p2	{padding-bottom:10px;}
.p3	{padding-bottom:15px;}
.p4	{padding-bottom:20px;}
.p5	{padding-bottom:25px;}
.p50 {padding-bottom:50px;}

.m1	{margin-bottom:5px;}
.m2	{margin-bottom:10px;}
.m3	{margin-bottom:15px;}f
.m4	{margin-bottom:20px;}
.m5	{margin-bottom:25px;}

a {color:#6F6F6F; text-decoration: none;}
a:hover {color:#6F6F6F; text-decoration: underline;}


.aleft		{text-align:left;}
.acenter	{text-align:center;}
.ajustify	{text-align:justify;}
.aright		{text-align:right;}
.pleft		{float:left;}
.pright		{float:right;}


h1, .h1 {
	font-size:55px;
	color: #6F6F6F;
	line-height:65px;
	font-weight:700;}
h1.hImmobili {
	font-weight:300;
	font-size:20px;
	line-height:30px;}
h2, .h2 {
	font-size:30px;
	color: #6F6F6F;
	line-height:36px;
	font-weight:400;}
h2.hImmobili {
	font-weight:300;
	font-size:20px;
	line-height:30px;}
h3, .h3 {
	font-size:28px;
	color: #6F6F6F;
	line-height:38px;
	font-weight:300;}

.container_12 img {
	max-width:100%; }

.lgreyBack { background-color: #f8f8f8; }
	
/* Header */

#header { 
	padding: 20px 0px 20px 0px; 
	background-color: white; 
	position:fixed; 
	width: 100%; 
	z-index: 1000; 
	transition: top 0.3s;
	_box-shadow: 0 10px 20px -15px #333;}

#logo img { width: 400px; }

#menuSmall {
	display:none;}

#menu {
	margin-top:20px;
	text-align:right;
	text-transform: uppercase;}
#menu div {
	display:inline-block; }
#mainMenu li {
	display:inline-block;
	list-style: none;
	padding:0px 30px 0px 30px;}
#mainMenu a.btn { margin-left: 40px; }
#mainMenu a {
	display:inline-block;
	color:#6F6F6F;
	font-weight:700;
	font-size:17px;
	line-height:17px; 
	text-decoration:none;
  	padding: 4px 7px 4px 7px; }
#mainMenu a.current {
	color: #FF9900;}
#mainMenu a:hover {
	color: #FF9900;}





/* Slider */
.slides {
	display:block; }
.slide img {
	width:100%;
	display:block;}
.slick-loading .slick-list {
    background: #fff url('../img/ajax-loader.gif') center center no-repeat; }

.slide div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Per centrare esattamente */
  display: block;
  font-size: 75px;
  line-height: 85px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  padding: 1px 10px 1px 10px;
}

.slideImm { background-color:white; }
.slideImm img {
	height: 500px;
	width: 770px;
	object-fit: contain;
}
.slideImm img.orizzontale, .slideImmobili img.orizzontale {
	object-fit: cover;
}
.slideImm img.verticale, .slideImmobili img.verticale,
.slideImm img.quadrata, .slideImmobili img.quadrata {
	object-fit: contain;
}
.slideImm a:hover, .slideImmobili a:hover { cursor: zoom-in; }

.slideImmobili img { 
	height: 350px;
	width: 595px;
	object-fit: contain;
}

/* In Home */
.immobili img {
	height: 675px;
	width: 900px;
	object-fit: contain;
}
.immobili img.orizzontale, .slideImmobili img.orizzontale {
	object-fit: cover;
}
.immobili img.verticale, .slideImmobili img.verticale,
.immobili img.quadrata, .slideImmobili img.quadrata {
	object-fit: contain;
}


.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  color: #fff;
  background: none;
  opacity: 0.9;
  font-family: Arial;
  font-size: 2.5rem;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.5));
}

.slick-prev:hover,
.slick-next:hover { opacity: 1; }

.slick-prev {
  left: 20px;
}
.slick-next {
  right: 20px;
  transform: scaleX(-1) translateY(-20px);
}

.slideImm-counter { color: white; background-color: #6f6f6f; opacity: 0.8; font-size: 13px; font-weight: 500; padding: 0px 8px; position: absolute; margin-top: -30px; margin-left: 0px;}


	
/* Kenburns effect for slick-slider */

.kenburns .slick-slider { overflow: hidden;}
.kenburns .slick-slider div.slick-active img {
	-webkit-animation: myMove 6s 1 ease-in-out;  
	-moz-animation: myMove 6s 1 ease-in-out;  
	-o-animation: myMove 6s 1 ease-in-out;  
	-ms-animation: myMove 6s 1 ease-in-out;  
	animation: myMove 6s 1 ease-in-out; }

.kenburns .slick-slide[aria-hidden="true"] img {
	_visibility:hidden; }

@keyframes myMove { 
	from { transform: scale(1.1,1.1); transform-origin: 50% 50%; } 
	to { transform: scale(1.0,1.0); transform-origin: 50% 0%; }
}
@-webkit-keyframes myMove { 
	from { -webkit-transform: scale(1.1,1.1); -webkit-transform-origin: 50% 50%; } 
	to { -webkit-transform: scale(1.0,1.0); -webkit-transform-origin: 50% 0%;  }
}
@-o-keyframes myMove { 
	from { -o-transform: scale(1.1,1.1); -o-transform-origin: 50% 50%; } 
	to { -o-transform: scale(1.0,1.0); -o-transform-origin: 50% 0%;  }
}
@-moz-keyframes myMove { 
	from { -moz-transform: scale(1.1,1.1); -moz-transform-origin: 50% 50%; } 
	to { -moz-transform: scale(1.0,1.0); -moz-transform-origin: 50% 0%; }
}
@-ms-keyframes myMove { 
	from { -ms-transform: scale(1.1,1.1); -ms-transform-origin: 50% 50%; } 
	to { -ms-transform: scale(1.0,1.0); -ms-transform-origin: 50% 0%; }
}



/* Content */

#content { padding-top: 103px; }	

/* PULSANTI */

:root{
  --btn-color: #424239;
  --btn-accent: #FF9900;
  --btn-font-size: 18px;
  --btn-font-weight: 700;
  --btn-padding: 8px 18px;
  --btn-corner-size: 20px;
  --btn-transition: 0.8s ease;
}

/* wrapper per centrare un singolo bottone */
.btn-wrapper { text-align: center; }
#mainMenu .btn-wrapper { text-align: right; margin-top: -4px; }
#mainMenu .btn-wrapper a { padding: 0; }
#mainMenu .btn-wrapper a:hover { color: #6F6F6F; }

/* base del link (padding spostato nello span) */
a.btn {
  display: inline-block;
  position: relative;
  color: var(--btn-color);
  font-size: var(--btn-font-size);
  line-height: 18px !important;
  text-transform: uppercase;
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  /* nessuna trasformazione in hover per mantenere il bottone stabile */
}

/* span interno: riempie il bottone, riceve padding e centra il testo */
a.btn > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;         /* serve per i pseudo-elementi bottom */
  padding: var(--btn-padding);/* qui sta la padding visibile */
  box-sizing: border-box;
  line-height: 1;
  z-index: 1;                 /* testo sopra sfondo ma sotto angoli (che avranno z-index maggiore) */
}

/* rendi cliccabile il testo normalmente */
a.btn, a.btn > span { -webkit-tap-highlight-color: transparent; }

/* pseudo-elements: quattro angoli */
/* due angoli superiori sul <a> */
a.btn::before,
a.btn::after,
a.btn > span::before,
a.btn > span::after {
  content: '';
  position: absolute;
  width: var(--btn-corner-size);
  height: var(--btn-corner-size);
  background: transparent;
  box-sizing: border-box;
  pointer-events: none;
  transition: width var(--btn-transition), height var(--btn-transition);
  z-index: 3; /* sopra il testo */
}

/* top-left */
a.btn::before {
  top: -2px;
  left: -2px;
  border-top: 3px solid var(--btn-accent);
  border-left: 3px solid var(--btn-accent);
}

/* top-right */
a.btn::after {
  top: -2px;
  right: -2px;
  border-top: 3px solid var(--btn-accent);
  border-right: 3px solid var(--btn-accent);
}

/* bottom-left (sul span che ora ha la stessa area del bottone) */
a.btn > span::before {
  bottom: -2px;
  left: -2px;
  border-bottom: 3px solid var(--btn-accent);
  border-left: 3px solid var(--btn-accent);
}

/* bottom-right */
a.btn > span::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 3px solid var(--btn-accent);
  border-right: 3px solid var(--btn-accent);
}

/* hover / focus: i corner si espandono, il bottone NON si muove */
a.btn:hover::before,
a.btn:hover::after,
a.btn:hover > span::before,
a.btn:hover > span::after,
a.btn:focus::before,
a.btn:focus::after,
a.btn:focus > span::before,
a.btn:focus > span::after {
  width: 60%;
  height: 60%;
}

/* accessibility focus (non sposta) */
a.btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,153,0,0.12);
}

/* gruppi/utility */
.btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-group--center { justify-content: center; }
.btn-group--left   { justify-content: flex-start; }
.btn-group--right  { justify-content: flex-end; }

.btn-group--center a.btn { color: white; margin: 0 5px 10px 5px; }


/* small variant */
a.btn.small > span { padding: 6px 12px; font-size: 14px; }
@media (max-width: 420px) {
  :root { --btn-corner-size: 14px; }
}


#counter .grid_3 div { font-weight:400; }

#map  {
	width:100%;
	height:500px; }
#map img {
	max-width:none;
	display:block;}

.immobile small {
	color:#000000;
	font-weight: 400;}
.immobileHP .titolo { 
	font-size: 30px;
	line-height: 40px;
	font-weight: 500; }
.immobileHP .prezzo, .immobileHP .riferimento {
	font-size: 22px;
	line-height: 32px;
	font-weight: 500; } 

.box2 {
	background-color: #fff; }
.box2 figure {
	height:360px; 
	overflow:hidden;
	display: flex;
  justify-content: center;
  align-items: center; }
.box2 figure img { width: 100%; }
.box2 .grid_5.alpha { box-sizing: border-box; padding: 20px; }
.box2 .grid_7.omega { box-sizing: border-box; padding: 3% 3% 3% 0px; }
.box2 .ico { display: inline-block; margin-right: 30px; }

.ico img { height:22px; padding-bottom: 10px; }

.immobile .ico { margin-bottom: 15px; }
.immobile .ico img { margin-right: 5px; height:28px; color:#000; }

#filtri select, #filtri button { width: auto; border: 1px solid #6f6f6f; background: #f3f3f3; padding: 8px 10px 8px 10px; margin-right: 20px; border-radius: 8px;}
#filtri select:hover, #filtri button:hover { border: 1px solid #FF9900; cursor: pointer; }
#filtri button { padding: 6px 10px 6px 10px; }
#filtri input { width: 100px; padding: 10px 10px 10px 10px;}

.contatti img { width:18px; padding-right: 10px; vertical-align: middle; }


/* A789.asp */
p.p2 span { background-color: #03a4de; color: white; padding: 4px 9px; border-radius: 50%; font-weight: bold; margin-right: 5px; font-size: 16px;}
p.p2 span.due { padding: 4px 5px; }

	
/* Back to top button */
#back-top {
	z-index:100;
	position: fixed;
	bottom: 100px;
	right: 10px;}
#back-top a {
	width: 40px;
	height: 40px;
	display: block;
	opacity:0.6;}
#back-top a:hover {
	opacity:1;}
/* Scroll down button */
#scroll-down {
	height:40px;}


/* Form */

form { font-family: "Lato", serif;}

::placeholder { 
  font-weight:300;
  color: #6F6F6F;
  opacity: 1;
}

input[type="email"],
input[type="search"],
input[type="text"],
input[type="password"],
textarea,
select {
	border: 1px solid #CCC;
	border-radius: 8px;
	padding: 12px 10px 12px 10px;
	width:100%;
	margin-bottom: 15px;
	outline: none;}
input:read-only {
	background-color: #EEE;}
input[type="button"],
input[type="submit"] {
	font-size: 20px;
	font-weight: 500;
	border: none;
	border-radius: 8px;
	padding: 10px 30px 10px 30px;
	color: white;
	background-color: #FF9900;}
		
input[type="submit"]:hover,
input[type="button"]:hover { background-color: #6F6F6F; }

textarea:focus,
input[type]:focus {
  border: 1px solid #FF9900;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin:5px;
  width:25px;
  height:25px; }


/* Footer */
#footer {
	font-size: 18px;
	line-height: 28px;
	padding-top:40px;
	padding-bottom:30px;
	background-color:#6F6F6F;
	color:#FFF;}
#footer a {
	text-decoration:none;
	color:#FFF; }
#footer a:hover {
	text-decoration:underline; }
#footer img { max-width: 80px; float: left; padding-right: 20px;}


	
@media only screen and (min-width: 1200px) and (max-width: 1619px) {
	body { font-size: 18px; line-height: 27px; }
	#mainMenu li {
		padding:0px 15px 0px 15px;}
	#mainMenu a {
		font-size:16px !important;
	    padding: 4px 7px 4px 7px; }
	#content { padding-top: 96px; }
	.slides .btn-group {
    font-size: 52px;
    line-height: 62px; }
  a.btn {
		font-size: 18px !important; }
	h1, .h1 {
	font-size:37px;
	line-height:47px;}
	h2, .h2 {
		font-size:28px;
		line-height:30px;}
	h3, .h3 {
		font-size:25px;
		line-height:35px;}
	h1.hImmobili, h2.hImmobili { font-size: 18px; line-height: 27px; }
	#map { height:450px; }
	.slideImm img { height: 400px; width: 570px;}
	.slideImmobili img { height: 315px; width: 430px;}
  .slideImm-counter { margin-top: -27px;}
  .immobile .ico { margin-bottom: 10px; }
  .immobile .ico img { height:22px; }
  #FormImm input { padding: 6px 10px 6px 10px; }
  #FormImm textarea { height:80px !important; }
	#footer { font-size: 16px; line-height: 26px; }
	#footer img { max-width: 75px;}
}

@media only screen and (max-width: 1199px) {
	body {
		font-size: 17px; line-height:26px; }
	h1, .h1 {
		font-size:35px;
		line-height: 45px; }
	h2, .h2 {
		font-size:25px;
		line-height: 32px;}
	h3, .h3 {
		font-size:23px;
		line-height:33px;}
	h1.hImmobili, h2.hImmobili { font-size: 17px; line-height: 26px; }
	#menu { margin-top: 0px; }
	#mainMenu li {
		padding:16px 0px 0px 20px; }
	#mainMenu a {
		font-size:13px;
		line-height:14px;
		font-weight: 700;
		padding: 0px 8px 5px 8px; }
	#mainMenu img { vertical-align: middle; }
	.textBig { font-size: 28px; line-height:45px; }
	#content { padding-top: 87px; }	
	.slides .btn-group {
    font-size: 50px;
    line-height: 65px; }
  #mainMenu .btn-wrapper { margin-top: 8px; }
	a.btn {
		font-size: 16px; }
	.immobileHP .titolo { font-size: 25px; line-height:35px; }
	.immobileHP .prezzo, .immobileHP .riferimento { font-size: 20px; }
	.immobileHP img { object-fit: cover; height: 550px; }
	#map { height:428px; }
	#footer { font-size: 15px; line-height: 24px; }
	#footer img { width: 200px; }
}

@media only screen and (min-width: 996px) and (max-width: 1199px) { 
	.lgreyBack .grid_6 { width: 620px; }
	.grid_3.immobile { width: 300px; }
	.grid_3.formImm { width: 940px; margin-top: 25px; }
	#FormImm input { padding: 6px 10px 6px 10px; }
	.slideImm-counter { margin-top: -26px; margin-left: 1px;}
	.slideImm img { height: 464px; width: 620px;}
	.slideImmobili img { height: 260px; width: 340px;}
	.box2 .aright { margin-top: -50px; }
}



@media only screen and (min-width: 768px) and (max-width: 995px) {
	body{
		font-size: 16px;
		line-height: 22px; }
	h1, .h1{
		font-size:29px;
		line-height: 38px; }
	h2, .h2{
		font-size:23px;}
	h3, .h3 {
		font-size:20px;
		line-height:30px;}
	h1.hImmobili, h2.hImmobili { font-size: 16px; line-height: 22px; }
	#mainMenu { margin-top: 5px; }
	#mainMenu li {
		padding:0px 10px 0px 0px; }
	#mainMenu a {
		font-size:13px;
		font-weight: 600;
		line-height:14px;
		padding: 5px 3px 5px 3px; }
	#mainMenu a.btn { margin-left: 0px; margin-top: -11px; }
	#content { padding-top: 76px; }	
	.textBig { font-size: 25px; line-height:42px; }
	.slides .btn-group {
	    font-size: 33px;
	    line-height: 45px;
	    width: 500px; }
  a.btn {
		font-size: 15px; }
	.immobileHP .titolo { font-size: 22px; line-height:32px; }
	.immobileHP .prezzo, .immobileHP .riferimento { font-size: 18px; }
	#map { height:400px; }
	#filtri select { width: 20%; }
	.slideImm-counter { margin-top: -22px; margin-left: 1px;}
	.slideImm img { height: 368px; width: 492px;}
	.lgreyBack .grid_6 { width: 492px; }
	.grid_3.immobile { width: 236px; }
	.grid_3.formImm { width: 748px; margin-top: 25px; }
	.immobile .ico { margin-bottom: 10px; }
	.immobile .ico img { height: 22px; }
	.box2 .grid_5.alpha, .box2 .grid_7.omega { width: 748px; padding: 20px 20px 25px 20px; margin: 0;}
	.slideImmobili img { height: 400px; width: 708px;}
	#footer { font-size:13px; line-height: 21px; }
	#footer img { width: 60px; }
}

@media only screen and (max-width: 767px) {
	body { font-size: 18px; line-height: 28px; }
	h1.hImmobili, h2.hImmobili { font-size: 18px; line-height: 28px; }
	#menu {
		position:fixed;
		display: none;
		z-index: 10000;
		right: 0px;
		height:100%;
		background-color: #fff;
		box-shadow: -5px 0px 5px -5px #999; }
	#menu a { font-size: 17px; }
	#mainMenu li { display: block; }
	#menuSmall {
		display:block;
		float:right;
		cursor:pointer;
		margin-top:15px; }
	#mainMenu img { vertical-align: baseline; }
	.slide img { object-fit: cover; height: 200px; }
	.kenburns .slide img { height: 400px; }
	input[type="submit"], button {
		width: 100%;}
	.immobileHP img { height: 400px; }
	#footer { font-size: 15px; }
	#footer img { width: 100px; }
	#footer .grid_2, #footer .grid_3, #footer .grid_4 { text-align: left; padding-bottom: 30px; }

	
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

	#logo img { width: 350px; }
	#menu {
		margin-top: 75px;
		right: 0px;
		width: 40%; }
	#mainMenu li {
		display: block;
		text-align: right;
		margin:15px 25px 0px 0px; }
	#mainMenu a {
		padding: 5px 3px 5px 0px; }
	#mainMenu .btn-wrapper { margin-right: 29px; margin-top: 35px; }
	#menuSmall img {
		width: 30px;}
	#content { padding-top: 95px; }
	.slides .btn-group {
	  font-size: 30px;
	  line-height: 45px;
	  width: 500px; }
	.slides .btn-group a.btn { display: inline; }
	.textBig { font-size: 24px; line-height:40px; }
	#filtri select { width: 145px; margin-right: 5px; }
	.slideImm-counter { margin-top: -28px; margin-left: 1px;}
	.slideImm img { height: 344px; width: 460px;}
	.box2 .grid_5.alpha, .box2 .grid_7.omega { padding: 20px 20px 25px 20px; margin: 0;}
	.slideImmobili img { height: 300px; width: 420px;}
	/* hover / focus: i corner si espandono, il bottone NON si muove */
	a.btn:hover::before,
	a.btn:hover::after,
	a.btn:hover > span::before,
	a.btn:hover > span::after,
	a.btn:focus::before,
	a.btn:focus::after,
	a.btn:focus > span::before,
	a.btn:focus > span::after {
	  width: 75%;
	  height: 75%;
	}
}

@media only screen and (max-width: 479px) {
	.h1, h1 { font-size: 28px; line-height: 38px; }
	.h2, h2 { font-size:21px; line-height: 31px;}
	.h3, h3 { font-size:21px; }
	#logo img { width: 250px; margin: auto; padding-top: 0px;  }
	#menu {
		display: none;
		width: 60%;
		margin-top: 61px;
		text-align:right; }
	#menu a { font-size: 16px; }
	#mainMenu { padding-top: 30px; }
	#mainMenu li {
		padding:8px 20px 20px 0px; }
	#mainMenu .btn-wrapper { margin-right: 29px; }
	#menuSmall img {
		width: 30px;
		margin-top: -10px;}
	#content { padding-top: 80px; }
	.slides .btn-group {
    font-size: 30px;
    line-height: 40px;
    width: 300px; }
	.textBig { font-size: 24px; line-height:40px; }
	#filtri select { width: 140px; margin-right: 5px; }
	.slideImm-counter { margin-top: -28px; margin-left: 1px;}
	.slideImm img { height: 239px; width: 320px;}
	.slick-prev, .slick-next { width: 25px; height:25px; }
	.box2 .grid_5.alpha { padding: 0; }
	.box2 .grid_7.omega { padding: 20px 20px 25px 20px; margin: 0;}
	.slideImmobili img { height: 230px; width: 320px;}

	
}