* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
}

.palazzo {
  position: relative;
  width: 800px;
  /* height: 800px; */
  margin: 0 auto;
  margin-block: 20px;
}

.palazzo > img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* position: absolute; */
  display: block;
}

.piano {
  top: -31%;
  left: 0;
  width: 100%;
  height: 132%;
  position: absolute;
  display: block;
}

.piano.evidenziato {
  background: rgba(53, 117, 33, 0.4);
  transition: background 0.3s ease;
}

.piano.evidenziato:hover,
.piano.evidenziato.hover {
  background: rgba(210, 202, 179, 0.7);
}

.piano_number.evidenziato {
  color: black;
  cursor: pointer;
}

.piano1 {
  clip-path: polygon(
    91% 77.7%,
    91% 82.3%,
    30% 76.8%,
    8.3% 80%,
    8.3% 73.5%,
    30% 68.4%
  );
}

.piano2 {
  clip-path: polygon(
    91% 71.7%,
    91% 77.7%,
    30% 68.4%,
    8.3% 73.5%,
    8.3% 66.2%,
    30.6% 59.4%
  );
}

.piano3 {
  clip-path: polygon(
    91% 66.7%,
    91% 71.7%,
    30.5% 59.4%,
    8.3% 66.2%,
    8.3% 59.2%,
    30.6% 50%
  );
}

.piano4 {
  clip-path: polygon(
    91% 61.7%,
    91% 66.7%,
    30.7% 50%,
    8.3% 59.2%,
    8.3% 52.8%,
    30.6% 41%
  );
}

.piano5 {
  clip-path: polygon(
    91% 55.8%,
    91% 61.7%,
    30.7% 41%,
    8.3% 52.8%,
    8.3% 43.7%,
    30.6% 27.7%
  );
}

.piano6 {
  clip-path: polygon(
    70% 41%,
    91% 51%,
    91% 55.8%,
    70.6% 46.4%,
    70.6% 44.6%,
    65.3% 42.1%
  );
}

.piano7 {
  clip-path: polygon(
    58% 38.5%,
    70% 33.6%,
    91% 45%,
    91% 51%,
    70% 41%,
    65.3% 42.1%
  );
}

.piano8 {
  clip-path: polygon(
    51.4% 35.3%,
    70% 27%,
    91% 40%,
    91% 45%,
    70% 33.6%,
    58.1% 38.5%
  );
}

.piano9 {
  clip-path: polygon(
    47% 31.7%,
    70% 19.8%,
    91% 35.4%,
    91% 40%,
    70% 27%,
    51.6% 35.2%,
    47% 33.3%
  );
}

.piano10 {
  clip-path: polygon(
    47% 25.4%,
    70% 12.1%,
    91% 29.1%,
    91% 35.4%,
    70% 19.8%,
    47% 31.7%
  );
}

.piantina_piano {
  position: relative;
  width: 800px;
  /* height: 800px; */
  margin: 0 auto;
  /* margin-bottom: 30px; */
}

.mappa_piani img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* position: absolute; */
  display: block;
}

.mappa_appartamenti img {
  display: block;
  width: 100%;
}

.appartamento_piano {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}

.appartamento_piano.evidenziato {
  background-color: rgba(53, 117, 33, 0.4);
  transition: background 0.3s ease;
}
.appartamento_piano.evidenziato:hover {
  background: rgba(210, 202, 179, 0.7);
}
.appartamento_piano.evidenziato.acquistato {
  background-color: rgb(255 0 0 / 40%);
}
.appartamento_piano.evidenziato.acquistato:hover {
  cursor:not-allowed;
}

.appartamento_11,
.appartamento_31,
.appartamento_41,
.appartamento_51 {
  clip-path: polygon(
    72.4% 20.5%,
    92.3% 20.5%,
    92.3% 67%,
    84% 67.1%,
    84% 41.6%,
    72.6% 41.5%
  );
}

.appartamento_12,
.appartamento_32,
.appartamento_42 {
  clip-path: polygon(
    52.3% 20.5%,
    63.3% 20.5%,
    63.3% 28.8%,
    71.9% 28.9%,
    71.9% 41.6%,
    52.3% 41.5%
  );
}

.appartamento_13 {
  clip-path: polygon(
    32.1% 41.5%,
    51.9% 41.5%,
    51.7% 20.5%,
    40.3% 20.5%,
    40.3% 30.4%,
    32.1% 30.4%
  );
}

.appartamento_14,
.appartamento_34,
.appartamento_44 {
  clip-path: polygon(
    31.5% 20.5%,
    31.5% 41.49%,
    25.33% 41.59%,
    25.33% 43.28%,
    20.23% 43.38%,
    20.1% 44.08%,
    10.2% 44.08%,
    10.1% 29.48%,
    8.1% 29.5%,
    8.1% 20.5%,
    20% 20.5%,
    20% 20.5%
  );
}

.appartamento_15 {
  clip-path: polygon(
    52.4% 70.28%,
    52.3% 47.49%,
    71.9% 47.39%,
    72% 58.71%,
    63.43% 58.71%,
    63.33% 68.4%,
    53% 68.4%
  );
}

.appartamento_16 {
  clip-path: polygon(
    32.1% 58.6%,
    40.7% 58.7%,
    40.7% 68.4%,
    51.7% 68.4%,
    51.7% 47.4%,
    32.1% 47.4%
  );
}

.appartamento_17,
.appartamento_37,
.appartamento_47,
.appartamento_57 {
  clip-path: polygon(
    31.5% 58.64%,
    31.5% 58.7%,
    31.5% 47.5%,
    25.35% 47.32%,
    25.33% 45.76%,
    20.09% 45.76%,
    20.09% 44.84%,
    11.11% 44.84%,
    11.1% 59.5%,
    8.2% 59.5%,
    8.2% 68.6%,
    31.5% 68.6%
  );
}

.appartamento_32,
.appartamento_42 {
  clip-path: polygon(
    32.1% 41.5%,
    51.9% 41.5%,
    51.7% 30.4%,
    40.2% 30.3%,
    40.3% 20.4%,
    32.1% 20.4%
  );
}

.appartamento_33,
.appartamento_43 {
  clip-path: polygon(
    52.3% 30.5%,
    63.3% 30.5%,
    63.3% 20.8%,
    71.9% 20.9%,
    71.9% 41.6%,
    52.3% 41.5%
  );
}

.appartamento_35,
.appartamento_45 {
  clip-path: polygon(
    32.07% 67.7%,
    40.7% 67.7%,
    40.7% 58.7%,
    51.7% 58.6%,
    51.7% 47.4%,
    32.07% 47.4%
  );
}

.appartamento_36,
.appartamento_46 {
  clip-path: polygon(
    52.3% 58.64%,
    64.01% 58.64%,
    63.91% 67.65%,
    71.9% 67.65%,
    71.9% 47.4%,
    52.3% 47.4%
  );
}

.appartamento_52 {
  clip-path: polygon(
    38.6% 41.5%,
    71.8% 41.5%,
    71.9% 30.2%,
    63.2% 30.3%,
    63.2% 20.4%,
    40.6% 20.4%,
    40.6% 30.5%,
    38.4% 30.5%
  );
}

.appartamento_54 {
  clip-path: polygon(
    31.5% 20.5%,
    31.5% 30.4%,
    37.9% 30.4%,
    37.9% 41.49%,
    25.33% 41.59%,
    25.33% 43.28%,
    20.23% 43.38%,
    20.1% 44.08%,
    11.2% 44.08%,
    11.1% 29.48%,
    8.1% 29.5%,
    8.1% 20.5%,
    20% 20.5%,
    20% 20.5%
  );
}

.appartamento_55 {
  clip-path: polygon(
    32.07% 58.7%,
    40.7% 58.7%,
    40.7% 68.5%,
    63.4% 68.5%,
    63.4% 58.7%,
    71.9% 58.7%,
    71.9% 47.4%,
    32.07% 47.4%
  );
}

.appartamento_61 {
  clip-path: polygon(
    72.3% 41.3%,
    83.8% 41.4%,
    83.8% 66.8%,
    92.1% 66.8%,
    92.1% 21%,
    72.3% 21%
  );
}

.appartamento_62 {
  clip-path: polygon(
    20% 59.5%,
    53.2% 59.5%,
    53.1% 66.8%,
    71.7% 66.8%,
    71.7% 47.3%,
    61.5% 47.3%,
    61.5% 44.7%,
    20% 44.7%
  );
}

.appartamento_63 {
  clip-path: polygon(
    53.07% 29%,
    20% 29%,
    20% 43.8%,
    61.6% 43.8%,
    61.5% 41.3%,
    71.7% 41.3%,
    71.7% 21.6%,
    53.07% 21.6%
  );
}

.appartamento_71 {
  clip-path: polygon(
    71% 44.6%,
    82.5% 44.7%,
    82.5% 70.2%,
    90.9% 70.2%,
    90.9% 24.5%,
    71.1% 24.5%
  );
}

.appartamento_72 {
  clip-path: polygon(
    51.8% 70.19%,
    70.4% 70.19%,
    70.4% 50.65%,
    60.2% 50.65%,
    60.2% 48.01%,
    45.3% 48.01%,
    45.3% 62.04%,
    51.8% 62.04%
  );
}

.appartamento_73,
.appartamento_93 {
  clip-path: polygon(
    51.8% 25.1%,
    70.4% 25.1%,
    70.4% 44.7%,
    60.2% 44.7%,
    60.2% 47.3%,
    45.3% 47.3%,
    45.3% 33.3%,
    51.8% 33.3%
  );
}

.appartamento_81 {
  clip-path: polygon(
    calc(71% + 1.7%) calc(44.6% - 5.8%),
    calc(82.5% + 1.7%) calc(44.7% - 5.8%),
    calc(82.5% + 1.7%) calc(70.2% - 5.8%),
    calc(90.9% + 1.7%) calc(70.2% - 5.8%),
    calc(90.9% + 1.7%) calc(24.5% - 5.8%),
    calc(71.1% + 1.7%) calc(24.5% - 5.8%)
  );
}

.appartamento_91 {
  clip-path: polygon(
    calc(71% + 1.8%) calc(44.6% - 4%),
    calc(82.5% + 1.8%) calc(44.7% - 4%),
    calc(82.5% + 1.8%) calc(70.2% - 4%),
    calc(90.9% + 1.8%) calc(70.2% - 4%),
    calc(90.9% + 1.8%) calc(24.5% - 4%),
    calc(71.1% + 1.8%) calc(24.5% - 4%)
  );
}

.appartamento_82 {
  clip-path: polygon(
    47.2% calc(57.9% - 1.6%),
    52.7% calc(57.9% - 1.6%),
    52.7% calc(66.2% - 1.6%),
    72.2% calc(66.2% - 1.6%),
    72.2% calc(46.4% - 1.6%),
    62% calc(46.4% - 1.6%),
    62% calc(43.8% - 1.6%),
    47.2% calc(43.8% - 1.6%)
  );
}

.appartamento_92 {
  clip-path: polygon(
    47.2% 57.9%,
    52.7% 57.9%,
    52.7% 66.2%,
    72.2% 66.2%,
    72.2% 46.4%,
    62% 46.4%,
    62% 43.8%,
    47.2% 43.8%
  );
}

.appartamento_93 {
  transform: translate(1.7%, -4.1%);
}

.appartamento_83 {
  clip-path: polygon(
    53.8% 19.1%,
    72.4% 19.1%,
    72.4% 38.7%,
    62.2% 38.7%,
    62.2% 41.3%,
    47.3% 41.3%,
    47.3% 27.3%,
    53.8% 27.3%
  );
  transform: translate(-0.4%, 0.2%);
}

.appartamento_101 {
  clip-path: polygon(
    53.1% 21.68%,
    65.25% 21.68%,
    65.25% 47.12%,
    71.74% 47.12%,
    71.74% 66.8%,
    53.09% 66.8%,
    53.09% 58.6%,
    46.6% 58.6%,
    46.6% 29%,
    53.1% 29%
  );
}

.appartamento_102 {
  clip-path: polygon(
    65.9% 20.2%,
    92.1% 20.2%,
    92.1% 66.8%,
    83.8% 66.8%,
    83.8% 41.3%,
    65.9% 41.2%
  );
}

.navbar {
  width: 100%;
  background-color: #d2cab3;
  color: #000;
  font-size: 14px;
  padding: 20px;
}

.spacing {
  display: block;
  margin-block: 10px;
}

.spacing > div {
  display: inline-block;
  /* width: calc(20% - 4px); */
  /* text-align: center; */
  text-transform: uppercase;
  padding-inline: 50px;
  color: #666;
  cursor: not-allowed;
}

.type[data-type="ALL"] {
  color: black;
  cursor: pointer;
}

.type.evidenziato {
  color: black;
  cursor: pointer;
}

.spacing > div:first-child {
  padding-left: 0;
}

.spacing > div span,
.piani > div span {
  font-family: "Arboria-Book";
}

/* .spacing > .type:not(.active):hover span,
.piani > div span:not(.active):hover,
.tutti_piani:hover {
  border-bottom: 1px solid rgb(0, 0, 0);
} */

.spacing > .type.active span,
.piani > div span.active,
.tutti_piani.active {
  /* border-bottom: 1px solid rgb(0, 0, 0); */
  font-family: "Arboria-Bold";
  font-weight: bolder;
}

.piani {
  padding-block: 10px;
  border-top: 1px solid #fbfbfb;
}

.piani > div {
  display: inline-block;
  width: calc(33.3% - 3px);
  text-align: center;
}

.piano_numbers {
  user-select: none;
  font-family: "Arboria-Book";
}

.piano_number {
  display: inline-block;
  width: calc(9% - 5px);
  margin-right: -5px;
  text-align: center;
  cursor: not-allowed;
  color: #666;
  width: calc(100% / 6);
}

.piano_number:not(:last-child) {
  border-right: 2px solid rgba(0, 0, 0, 0.526);
}

/*
.piano_number span {
  border-radius: 50%;
  background-color: #ffffff;
  color: #000;
  padding: 10px;
  cursor: pointer;
} */

.piano_number.active {
  font-family: "Arboria-Bold";
  color: #000;
}
/* .piano_number:not(.active):hover,
.piano_number.active {
  text-decoration: underline;
} */

.spacing > div:not(:last-child) {
  border-right: 2px solid rgba(0, 0, 0, 0.526);
}

.tutti_piani {
  margin-block: 10px 20px;
  margin-right: 10px;
  display: inline-block;
  cursor: pointer;
  text-align: left;
  color: #000 !important;
}

.title {
  font-size: 18px;
  text-transform: uppercase;
  font-family: "Arboria-Bold";
  margin-bottom: 20px;
}

.barra_inferiore_appartamento {
  font-family: sans-serif;
  background: #1e372c;
}

.barra_blocco1 {
  position: relative;
  vertical-align: top;
  display: inline-block;
  width: 100px;
  min-height: 100px;
  background: #1e372c;
}

.barra_blocco1 img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.barra_blocco1 span {
  color: white !important;
}

.barra_blocco2 {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 100px);
  /* height: 100px; */
  font-size: 14px;
  background: white;
}

.barra_blocco2 span {
  text-transform: uppercase;
  top: 50%;
  left: 50%;
  color: #fff;
}

.barra_info,
.barra_foot {
  display: block;
  width: 100%;
}

.barra_info {
  background: #1e372c;
  color: white;
  height: 50px;
}

.barra_foot {
  position: relative;
  text-transform: uppercase;
  text-align: center;

  height: 32px;
  background: #efdd74;
}

.barra_foot span,
.barra_blocco1 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #7c745c;
}

.type_appartamento,
.piano_appartamento,
.camere_appartamento {
  position: relative;
  display: inline-block;
  background: #1e372c;
  height: 100%;
}

.type_appartamento {
  width: 25%;
  border-right: 1px solid #fff;
  vertical-align: top;
}
.type_appartamento > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.piano_appartamento {
  width: 50%;
  vertical-align: top;
}
.piano_appartamento > div {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.camere_appartamento {
  width: 25%;
  border-left: 1px solid #fff;
}
.camere_appartamento .blocco {
  display: inline-block;
  margin-top: 10%;
  margin-left: 16%;
  text-align: center;
}
.camere_appartamento .blocco img {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}

/* barra */

.barra_cell {
  display: inline-block;
  border-right: 1px solid #1e372c;
  vertical-align: top;
  height: 100%;
  position: relative;
}

.barra_cell:last-child {
  border: 0;
}

.barra_cell.tipologia {
  width: calc(32% - 100px);
  text-transform: uppercase;
}

.barra_cell.barra_piano {
  width: 100px;
}

.barra_cell.camera_letto {
  width: 100px;
}

.barra_info .barra_cell.camera_letto > div,
.barra_info .barra_cell.bagno > div {
  /* text-align: center; */
}

.barra_cell.bagno {
  width: 100px;
}

.barra_cell.sc,
.barra_cell.st,
.barra_cell.price {
  width: calc(34% - 100px);
}
/*
 .barra_cell.st {
    width: 17%;
}

.barra_cell.price {
    width: 17%;
} */

.barra_title {
  padding: 0px 10px;
}

.barra_values {
  color: #1e372c;
  height: 50px;
}

.barra_values .barra_cell {
  background-color: #d2cab3;
}

.barra_cell .value {
  padding: 16px 10px;
  /* height: 100%; */
}

.barra_cell > div {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.barra_cell.camera_letto img,
.barra_cell.bagno img {
  width: 35px;
}

.navbar .mobile {
  display: none;
}

.navbar .mobile select {
  display: inline-block;
  width: calc(50% - 3px);
  padding: 10px;
  border-color: #1e372c;
  color: #1e372c;
  background: transparent;
  font-size: 16px;
}

.grid-config {
  display: none;
  font-size: 14px;
  margin-block: 40px;
  width: 95%;
  margin-inline: auto;
  font-family: "Arboria-Book";
}

.grid-config.active > div {
  height: 50px;
}

.grid-config .item {
  position: relative;
  vertical-align: top;
  display: inline-block;
  width: 50%;
  height: 100%;
}

.grid-config .item span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.grid-config .item {
  /* padding-block: 20px; */
  /* width: 100%; */

  color: white;
  border-bottom: 1px solid #fff;
  text-transform: uppercase;
  padding-left: 10px;
}

.grid-config .item.key {
  background: #1e372c;
}

.grid-config .item.value {
  background: #d2cab3;
}

@media screen and (max-width: 950px) {
  .palazzo,
  .piantina_piano {
    width: 100%;
  }

  .navbar .spacing,
  .navbar .piano_numbers {
    display: none;
  }

  .navbar .mobile {
    display: block;
  }
  .barra_inferiore_appartamento {
    display: none !important;
  }
  .grid-config.active {
    display: block;
  }
}

@media screen and (max-width: 425px) {
  .navbar .mobile select {
    display: block;
    width: 100%;
    margin-bottom: 20px;
  }
}

.item .sc.value,
.item .st.value {
  text-transform: lowercase;
}

.contenitore>.spacing>.type{
	width: 25%;
    text-align: center;
    padding: 0;
}
.contenitore>.spacing>.type.all{
	text-align: left;
}

body > div.navbar > div.contenitore{
	width: 1313px;
}