@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Caslon+Text:wght@400;700&display=swap');

/* ============================================================
   TOKENS / ROOT
   ============================================================ */
:root {
  --bianco: #FFF;
  --background: #e6e6e6;

  --yellow: #EDB64A;
  --yellow-light: #F9E8C0;

  --verde: #009986;
  --verde-light: #BCD8D3;
  --verde-dark: #072227;

  --grigio: #818181;
  --grigio-light: #F6F6FA;
  --grigio-dark: #3C3C3B;

  --black: #070705;

  --share: #D4EABA;
  --private: #BADFEA;
  --premium: #DABAEA;
}

/* ============================================================
   BOOTSTRAP OVERRIDES (variables)
   ============================================================ */
.accordion {
  --bs-accordion-btn-icon-width: 2.5rem;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--verde-dark);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #008374;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verde);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: transparent;

  padding: 15px 20px;
  border-radius: 8px;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--verde);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--verde);
  --bs-btn-hover-bg: var(--verde-light);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verde-light);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: transparent;

  padding: 15px 20px;
  border-radius: 8px;
}

.btn-secondary-yellow {
  --bs-btn-color: var(--verde-dark);
  --bs-btn-bg: var(--yellow);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--yellow);
  --bs-btn-hover-bg: var(--yellow-light);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--yellow-light);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: transparent;

  padding: 15px 20px;
  border-radius: 8px;
}

.btn-secondary-verde-light {
  --bs-btn-color: var(--verde-dark);
  --bs-btn-bg: var(--verde-light);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #FFF;
  --bs-btn-hover-bg: var(--verde);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verde);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: transparent;

  padding: 15px 20px;
  border-radius: 8px;
}

.pagination {
  --bs-pagination-hover-color: #FFF;
  --bs-pagination-hover-bg: var(--verde);
  --bs-pagination-focus-color: #FFF;
  --bs-pagination-focus-bg: var(--grigio);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--verde-dark);
  --bs-pagination-active-border-color: var(--bs-border-color);
  --bs-pagination-color: var(--grigio);
  --bs-pagination-bg: var(--grigio-light);
}

/* ============================================================
   BASE / TYPOGRAPHY
   ============================================================ */
html { font-size: 100%; }

html, body { min-height: 100%; }

body {
  font-size: 1.2rem;
  background-color: var(--bianco);
  color: var(--grigio-dark);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25 !important;
  overflow-x: hidden;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-style: normal;
  line-height: .95 !important;
}

h1, .h1 { letter-spacing: -.1rem; }
h2, .h2 { letter-spacing: -.095rem; }
h3, .h3 { letter-spacing: -.05rem; }

.caslon,
.h em,
.h i {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-style: normal;
}

.h b,
.h strong,
.strong { font-weight: 600; }

.h u {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}

.h u:nth-child(odd) { text-decoration-color: var(--yellow); }
.h u:nth-child(even) { text-decoration-color: var(--verde); }

img, svg {
  width: 100%;
  height: auto;
}

div { box-sizing: border-box; }

.ms--2 { margin-left: -.5rem !important; }

.upc { text-transform: uppercase; }

/* ============================================================
   LINKS / TRANSITIONS
   ============================================================ */
a, a:hover {
  -webkit-transition: color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  -moz-transition: color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  -o-transition: color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  transition: color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);

  text-decoration: none;
  color: inherit;
}

a:hover { color: var(--verde); }
.bg-verde a:hover { color: var(--yellow); }

.bg-light { color: #000 !important; }

.section-content a { text-decoration: underline; }

/* ============================================================
   HELPERS / UI (fader, curtain)
   ============================================================ */
.fader {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.fader-out { opacity: 0; }
.fader-in { opacity: 1; }

.curtain-down {
  transform-origin: bottom center;
  animation: curtainDown 0.6s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}
.curtain-up {
  transform-origin: top center;
  animation: curtainUp 0.6s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

@keyframes curtainDown {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes curtainUp {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); }
}

/* ============================================================
   LANGUAGE BAR
   ============================================================ */
#languages {
  position: fixed;
  width: 100%;
  top: calc(100vh - 15px);
  left: 0rem;
  z-index: 1031;
  pointer-events: none;
  transform: translateY(-100%);
}

#languages .btn-group {
  background-color: var(--verde-dark);
  border-radius: 6px;
}

#languages .container-fluid {
  max-width: 1300px;
  margin: auto;
}

#languages a {
  font-size: 11px;
  padding: 6px 14px !important;
  pointer-events: all;
}

#languages .btn-outline-secondary {
  background-color: var(--grigio-light);
  border-color: var(--verde-dark) !important;
  color: var(--verde-dark) !important;
  font-weight: 800;
  border-radius: 6px;
}

#languages .btn-secondary {
  background-color: var(--verde-dark);
  color: #FFF;
}

#languages .btn-secondary:hover {
  background-color: var(--verde-dark);
  color: var(--verde) !important;
}

/* ============================================================
   LAYOUT / STRUCTURE
   ============================================================ */
.mh-100 { min-height: 100vh; }

.user-login {
  border: solid 1px var(--grigio);
  border-radius: 6px;
}
.user-login:hover { border: solid 1px var(--verde); }
.user-login:hover svg path { fill: var(--verde) !important; }

/* main content */
.skipper {
  padding: 3px;
  margin: 5px;
  background-color: var(--grigio-light);
  display: inline-block;
  border-radius: 5px;
  position: absolute;
  z-index: 1040;
  border: solid 2px var(--grigio-dark);
}

#content { padding: 0; }

main {
  min-height: 100vh;
  position: relative;
}

.page {
  overflow: hidden;
  padding-top: 15px;
  padding-bottom: 4rem;
}

/* ============================================================
   SECTIONS (sec)
   ============================================================ */
.sec {
  max-width: calc(100vw - 40px);
  margin: auto;
  position: relative;
  border: solid 0 transparent;
}

.sec-gal { overflow: visible; }

.sec:before {
  max-width: 1300px;
  transform: translateX(-50%);
  left: 50% !important;
  border-radius: 24px !important;
}

.sec .sec-in {
  width: calc(100% - 25px);
  max-width: 1275px;
  margin: auto;
  position: relative;
}

.sec.bg-color:not(:first-child) .sec-in,
.sec.sec-bg:not(:first-child) .sec-in {
  padding: 2rem 1rem !important;
}

.sec .section-head {
  padding: 0rem .5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sec.sec-bg .section-head,
.sec.bg-color .section-head {
  position: relative;
}

.sec .section-head:last-child { padding: 2rem .5rem; }

.sec.sec-paragraph-side-media:first-child { padding-top: 70px; }

.sec:first-child .section-head {
  padding-top: 9rem;
  padding-bottom: 0rem;
}

.sec.sec-bg:first-child .section-head { padding: 14rem 2rem 3rem; }

.sec:first-child .cover + .section-head { padding: 3rem 2rem 3rem; }

.sec.sec-bg .section-head {
  min-height: 45vh;
  color: #FFF;
}

.section-intro { padding: 0rem .5rem; }
.section-intro p { margin-bottom: 0; }

.sec.sec-bg:first-child .section-intro {
  padding-left: 2rem;
  padding-right: 2rem;
}

.sec:first-child .section-intro {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.sec.sec-campus-hero .section-intro {
  padding-top: 0;
  padding-bottom: 0;
}

.sec.sec-campus-hero { margin-bottom: 5rem; }

.sec:not(.sec-bg):not(.bg-color) .section-head + .section-body .section-content {
  padding-top: 0;
}

.section-content {
  padding-left: .5rem;
  padding-right: .5rem;
  max-width: 900px !important;
  font-size: .9em;
}

.sec .section-body + .section-list { margin-top: 4rem; }

.page:not(.pages) .sec + .sec { margin-top: 7rem; }
.page:not(.pages) .sec + .sec-paragraph-side-media { margin-top: 3rem; }

.sec .sec-in .section-body:first-child { margin-top: 3rem; }

.sec:not(.sec-bg):not(.bg-color) .sec-in .section-body:last-child { margin-bottom: 4rem; }

.sec.sec-bg:not(:first-child),
.sec.bg-color:not(:first-child) {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.sec-paragraph-side-media:not(:first-child).bg-color .sec-in { padding: 0 !important; }

.sec.sec-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* cover */
.cover {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  width: calc(100% + 26px);
  transform: translateX(-13px);
}

.ratio > .cover {
  position: absolute;
  width: 100%;
  transform: none !important;
}

.cover.after,
.cover.before {
  padding-bottom: 45%;
  width: 100%;
  transform: none;
}

.sec-hero-side-media .cover.after,
.sec-hero-side-media .cover.before,
.sec-paragraph-side-media .cover.after,
.sec-paragraph-side-media .cover.before {
  padding-bottom: 70%;
  width: 100%;
  transform: none;
  margin-bottom: 0;
}

.sec.sec-paragraph-side-media .section-head { padding: 1.5rem .5rem; }

.sec:not(.sec-bg).sec-paragraph-side-media .section-head + .section-body .section-content {
  padding-top: 3rem;
}

/* hero underline */
.sec-hero .h1,
.sec-hero-side-media .h1,
.sec-hero-centered .h1,
.sec-campus-hero .h1,
.sec-accommodation-hero .h1 {
  display: inline-block;
  padding-bottom: 15px;
  position: relative;
}

.sec-hero .h1:before,
.sec-hero-side-media .h1:before,
.sec-hero-centered .h1:before,
.sec-campus-hero .h1:before,
.sec-accommodation-hero .h1:before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--verde);
  z-index: -1;
}

.sec-hero .h1:after,
.sec-hero-side-media .h1:after,
.sec-hero-centered .h1:after,
.sec-campus-hero .h1:after,
.sec-accommodation-hero .h1:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: 3px;
  background-color: var(--yellow);
  z-index: -1;
}

.page.pages .sec:not(:first-child):not(.bg-color) .section-head,
.page.pages .sec:not(:first-child):not(.bg-color) .section-body,
.page.pages .section-content {
  max-width: 890px !important;
}

.page.pages .sec + .sec:not(.bg-color) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.eyelet,
.sec .section-eyelet {
  font-size: 1.2rem;
  color: var(--grigio);
  line-height: 1 !important;
}

/* FIX: c'era un selettore "-sec-bg" (typo) */
.sec.sec-bg .section-eyelet { color: #FFF; }

.section-head + .section-list { padding-top: 0rem; }

.list-inner .column-icon {
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

.page.blog h2 { margin-top: 2.5rem; }
.page.blog h3 { margin-top: 2rem; }
.page.blog .section-content { padding: 0 !important; }

/* ============================================================
   BACKGROUNDS
   ============================================================ */
.cover.background {
  position: absolute;
  z-index: -1;
  height: 100%;
  top: 0;
  left: 0;
  filter: brightness(80%);
  background-color: var(--verde-dark);
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  background-color: var(--grigio);
}

.bg-image {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  background-size: cover;
  background-position: center;
}

.bg-image.bg-svg {
  background-size: contain;
  background-repeat: no-repeat;
}

.bg-image.is-loaded { opacity: 1; }

.ratio-9x16 { --bs-aspect-ratio: 177.77777%; }

.list-masonry .cover { height: 100%; }

/* ============================================================
   CTA / BUTTONS
   ============================================================ */
.sec-CTA a {
  display: block;
  width: 100%;
  text-align: center;
  line-height: .9;
  font-size: clamp(1.5rem, 1.39rem + .56vw, 2rem);
}

.btn {
  box-shadow: none;
  text-decoration: none !important;
}

.btn-yellow {
  background-color: var(--yellow);
  color: var(--grigio-dark) !important;
}

a:hover .btn-yellow,
.btn-yellow:hover {
  background-color: var(--green-dark);
  color: #FFF !important;
}

.tire-selector { white-space: nowrap; }

.btn-tire {
  border-width: 2px;
  border-radius: 5px;
  box-shadow: none;
  background-image: none;
}

.btn-tire + .btn-tire { margin-left: 7px; }

.btn-tire.tire-all { border-color: var(--grigio); }
.btn-tire.tire-share { border-color: var(--share); }
.btn-tire.tire-private { border-color: var(--private); }
.btn-tire.tire-premium { border-color: var(--premium); }

.btn-tire.tire-all:hover,
.btn-tire.tire-share:hover,
.btn-tire.tire-private:hover,
.btn-tire.tire-premium:hover { background-color: var(--grigio-light); }

.btn-tire.tire-all.active { background-color: var(--background); }
.btn-tire.tire-share.active { background-color: var(--share); }
.btn-tire.tire-private.active { background-color: var(--private); }
.btn-tire.tire-premium.active { background-color: var(--premium); }

.btn-verde-outline,
.btn-yellow-outline {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  padding: .7rem 1.5rem;
  border-radius: 6px !important;
}

.btn-verde-outline { border: solid 2px var(--verde); }
.btn-verde-outline:hover {
  color: var(--grigio-dark);
  border: solid 2px var(--verde);
}

.btn-yellow-outline { border: solid 2px var(--yellow); }
.btn-yellow-outline:hover {
  color: var(--grigio-dark);
  border: solid 2px var(--yellow);
}

.btn-verde-outline:before,
.btn-yellow-outline:before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--background);
  transition: background-color 0.6s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

.btn-yellow-outline:before { background-color: var(--grigio-light); }

.btn-verde-outline:hover:before { background-color: var(--verde-light); }
.btn-yellow-outline:hover:before { background-color: var(--yellow-light); }

.btn-verde-outline .icon-bg svg path { fill: var(--verde) !important; }

.btn-yellow-outline .icon-bg svg,
.btn-verde-outline .icon-bg svg {
  transition: transform 0.6s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

.btn-yellow-outline:hover .icon-bg svg,
.btn-verde-outline:hover .icon-bg svg { transform: scale(1.1); }

.has-carousel .secondary-cta {
  position: absolute;
  bottom: 2rem;
  right: 0;
}

.portrait {
  width: 60px;
  background-color: #EEE;
  border-radius: 50%;
}

#mainCTA a {
  transition: background-color 0.6s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

/* pills */
.pill {
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  font-size: 10px;
  margin-right: 4px;
  background-color: var(--yellow-light);
  text-transform: uppercase;
  display: inline-block;
}

.bready {
  padding: 6px 10px;
  text-align: center;
  font-size: 10px;
  margin-right: 4px;
  text-transform: uppercase;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.bready:hover { color: #FFF !important; }
.bready:before { border-radius: 5px !important; }
.bready:hover:before { filter: brightness(.9); }

.tire-pill {
  padding: 8px 10px;
  border-radius: 4px;
  text-align: center;
  font-size: 10px;
  margin-right: 4px;
  background-color: var(--grigio);
  text-transform: uppercase;
  display: inline-block;
  vertical-align: text-top;
}

.tire-pill.share { background-color: var(--share); }
.tire-pill.private { background-color: var(--private); }
.tire-pill.premium { background-color: var(--premium); }

/* useful buttons */
#useful-buttons {
  position: absolute;
  bottom: 15px;
  left: 140px;
  z-index: 1;
}

/* outline btn */
.btn.btn-outline {
  position: relative;
  display: inline-block;
  background-color: transparent;
  border: solid 1px var(--verde-dark);
  padding: 0 21px;
  line-height: 46px;
  border-radius: 8px;
  height: 50px;
  font-size: 11px;
  text-transform: uppercase;
}

.btn.btn-outline.verde {
  border: solid 1px var(--verde);
  color: var(--verde);
}

.btn.btn-outline.verde:hover {
  border: solid 1px var(--verde-dark);
  color: var(--verde-dark);
}

.btn.btn-outline.vt-btn {
  padding: 0 15px;
  height: auto;
  line-height: 30px;
  margin-top: -15px;
}

/* ============================================================
   LISTS / CARDS / COLUMNS
   ============================================================ */
.review-vote { max-width: 116px; }
.review-pic { width: 50px; }

.outline-verde .item-column-in:before {
  border-color: var(--verde);
  border-style: solid;
  border-width: 2px;
}

.list-items .item-column-in { padding: .5rem; }
.list-items .item-row-in { padding: 1rem .5rem; }

.list-items .item-column-in:before { border-radius: 10px !important; }

.list-items .item-row-in:before {
  width: calc(100% + 24px);
  transform: translateX(-12px);
  border-radius: 16px !important;
}

.list-items .item-row + .item-row { margin-top: 2.5rem; }

.list-items a:hover { color: inherit; }

.cta { text-decoration: underline; }
.list-items a:hover .cta { text-decoration: none; }

.list-items.campus-list .item-row + .item-row { margin-top: 1.5rem; }

.campus-list .item-row .item-row-in:before {
  transition: filter 0.6s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

.campus-list .item-row:hover .item-row-in:before { filter: brightness(0.975); }

.list-head {
  padding-left: .5rem;
  padding-right: .5rem;
}

/* ============================================================
   ACCORDION
   ============================================================ */
.accordion { border: none !important; }

.accordion-item {
  border: none;
  border-radius: 16px !important;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: none !important;
  padding: 0;
  background-color: var(--grigio-light);
  transition: background 0.6s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

.accordion-item:hover { background-color: var(--yellow-light); }

.accordion-item > .accordion-header { border: none !important; }

.accordion-item .accordion-body { max-width: 900px; }

.accordion-item > .accordion-header .accordion-button {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 500;
}

.accordion-button:not(.collapsed) {
  background-color: var(--yellow-light);
  color: var(--verde);
}

.accordion-button::after {
  background-image: url(../images/faq-caret.svg) !important;
}

/* ============================================================
   MAP / MAPBOX
   ============================================================ */
.mapbox-block {
  position: relative;
  min-height: 50vh;
  margin: 0 -12px;
}

.mapbox-block .mapboxgl-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sec-map-container .sec-in { padding: 0; }

.campus-pin img,
.mapbox-marker[data-type="campus"] img { display: none !important; }

.map { width: 100%; height: 520px; border-radius: 16px; overflow: hidden; }

.mapbox-marker {
  width: 44px;
  height: 44px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.mapbox-marker img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 6px;
}

/* popup */
.poi-popup { max-width: 260px; }
.poi-popup__media { width: 100%; height: 110px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.poi-popup__title { font-weight: 700; margin: 0 0 6px; font-size: 14px; }
.poi-popup__address { margin: 0 0 10px; font-size: 13px; opacity: .85; }
.poi-popup__cta { display: inline-block; font-size: 13px; font-weight: 600; text-decoration: underline; }

.poi-popup__media {
  max-width: 80%;
  max-height: 50px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}

.mapboxgl-popup-content { border-radius: 6px; }

/* ============================================================
   SWIPER / CAROUSELS
   ============================================================ */
.swiper-wrapper {
  height: auto !important;
  width: calc(100% + 2rem);
  margin-left: -1rem;
}

.swiper .item-column { width: 340px; }

.swiper .embed-item,
.swiper .embed-item IFRAME {
  height: 550px !important;
  overflow: hidden;
}

.section-gallery {
  position: relative;
  padding: 15px 0;
}

.section-gallery::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 200vw;
  height: 100%;
  transform: translate(-50vw, -15px);
  background-color: var(--grigio-light);
}

.list-carousel { margin-bottom: 0; }

.carousel-slider,
.accommodations-slider {
  position: relative;
  padding: 20px 0 15px;
}

.carousel-slider::before,
.accommodations-slider::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 200vw;
  height: 100%;
  transform: translate(-50vw, -20px);
  background-color: var(--grigio-light);
}

.swiper,
.swiper-wrapper {
  overflow: visible;
  user-select: none;
}

.swiper-button-next,
.swiper-button-prev {
  margin-top: 20px !important;
  position: relative;
  display: inline-block;
  background-color: transparent;
  border: solid 1px var(--verde-dark);
  padding: 0 21px;
  line-height: 46px;
  width: 50px;
  border-radius: 8px;
  height: 50px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover { border-color: var(--verde); }

.swiper-button-next { margin-left: 16px !important; }

.swiper-button-next path,
.swiper-button-prev path { fill: #000 !important; }

.swiper-button-next:hover path,
.swiper-button-prev:hover path { fill: var(--verde) !important; }

.swiper-slide { width: auto; }

.swiper-slide img {
  display: block;
  height: 45vh;
  width: auto;
}

.swiper .list-inner .item-column + .item-column { margin-top: 0 !important; }

.swiper-slide a:hover { transform: scale(1.01); }

/* ============================================================
   DISTANCES LIST
   ============================================================ */
#distances-list-of-rows {
  max-width: 700px;
  margin: auto;
}

#distances-list-of-rows .item-row { cursor: pointer; }

#distances-list-of-rows .item-row .item-row-in:before {
  -webkit-transition: background-color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  -moz-transition: background-color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  -o-transition: background-color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  transition: background-color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

#distances-list-of-rows .item-row:hover .item-row-in:before { background-color: var(--yellow-light); }
#distances-list-of-rows .item-row + .item-row { margin-top: 0rem; }

/* ============================================================
   SEPARATORS / UTILITIES
   ============================================================ */
.sep {
  background-color: var(--background);
  height: 1px;
  display: block;
}

.bleed:before {
  max-width: 1300px;
  transform: translateX(-50%);
  left: 50% !important;
  border-radius: 16px;
}

/* radii */
.rad-6 { overflow: hidden; border-radius: 6px; }
.rad-8 { overflow: hidden; border-radius: 8px; }
.rad-10 { overflow: hidden; border-radius: 10px; }
.rad-16 { overflow: hidden; border-radius: 16px; }
.rad-24 { overflow: hidden; border-radius: 24px; }

/* font sizes */
.fs-s { font-size: 13px !important; }
.fs-r { font-size: 16px !important; }
.fs-m { line-height: 1.1; font-size: clamp(1.5rem, 1.39rem + .56vw, 1.8rem) !important; }
.fs-l { line-height: .9; font-size: clamp(40px, 3.6vw, 50px) !important; }
.fs-xl { line-height: .9; font-size: clamp(44px, 4vw, 58px) !important; }

/* FIX: avevi due volte .fs-xxl, ho lasciato l’ultima (più grande) */
.fs-xxl { line-height: .9; font-size: clamp(5rem, 1.88rem + 7.11vw, 10rem) !important; }

/* ============================================================
   HEADER / NAV / MENU
   ============================================================ */
#bar-wrapper {
  will-change: transform;
  transform: translateY(0);
  transition: transform .28s ease;
}

#bar-wrapper.is-hidden { transform: translateY(-65px); }

.menu-backdrop {
  width: 100%;
  height: 0%;
  position: fixed;
  transition: all .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  background-color: var(--verde-light);
  opacity: 0;
  z-index: 1020;
}

body.menu-is-up { overflow: hidden; }

body.menu-is-up .menu-backdrop {
  height: 100%;
  opacity: 1;
}

#header {
  width: calc(100% - 40px);
  margin: 20px auto 0;
  transition: margin .25s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

#header.scrolled { margin-top: 3px; }

#bar-wrapper { align-self: stretch; }

#bar-wrapper::before {
  border-radius: 8px;
  overflow: hidden;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link {
  color: var(--grigio-dark);
  transition: color .25s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.show {
  color: var(--grigio-dark);
  text-decoration: underline;
}

.dropdown-menu {
  top: calc(100% + 12px) !important;
  background-color: var(--background);
  border: none;
  padding: 0;
}

.dropdown-menu h3 {
  color: var(--verde-dark);
  font-weight: 500;
  padding: 3px;
}

.dropdown-menu a {
  color: var(--grigio-dark);
  display: block;
  padding: 6px;
}

.dropdown-menu a:hover { color: var(--verde); }

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.navbar a {
  font-size: 1.15rem;
  letter-spacing: -.03rem;
}

.container-fluid { max-width: 1300px !important; }

/* ============================================================
   OFFCANVAS BACKGROUND MENU
   ============================================================ */
#background-menu {
  --bs-offcanvas-transition-duration: 200ms;
  transition:
    transform 0.2s cubic-bezier(0.21, 0.61, 0.35, 1.0),
    opacity 0.2s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  z-index: 1020;
  background-color: var(--verde-light);
}

#background-menu .offcanvas-body { padding-top: 120px; }

#background-menu-in {
  padding-right: 150px;
  padding-left: 32px;
}

#background-menu .offcanvas-body a,
.collapse-menu a {
  padding: 4px 0;
  display: block;
  position: relative;
}

#background-menu .offcanvas-body a .icon,
.collapse-menu a .icon {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#background-menu .offcanvas-body a:hover .icon,
.collapse-menu a:hover .icon {
  opacity: 1;
  transition: opacity .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

#background-menu.offcanvas-top { transform: translateY(-200px); opacity: 0; }
#background-menu.offcanvas-top.showing { transform: translateY(0); opacity: 1; }
#background-menu.offcanvas-top.show { transform: translateY(0); opacity: 1; }
#background-menu.offcanvas-top.hiding { transform: translateY(-200px); opacity: 0; }

/* offcanvas scroll */
.offcanvas { max-height: 100vh; }

.offcanvas .offcanvas-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - var(--offcanvas-header-h, 56px));
}

/* chevron */
.menu-chevron {
  width: 0.75rem;
  height: 0.75rem;
  display: inline-block;
  position: relative;
}

.menu-chevron::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  transform-origin: center;
}

.menu-accordion-toggle[aria-expanded="true"] .menu-chevron::before {
  transform: rotate(-135deg);
}

#background-menu .btn-link {
  border-radius: 0;
  border-bottom: solid 1px var(--verde-dark);
  color: var(--verde-dark);
  padding: 21px 0 !important;
  margin-bottom: 0;
}

#background-menu-toggle .icon-bg svg path { fill: var(--verde) !important; }
#background-menu-toggle .icon-i svg { filter: brightness(100); }

#background-menu-toggle .icon {
  transition: transform 0.2s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

#background-menu-toggle:hover .icon { transform: scale(1.1); }

.menu-is-open .bm-open { display: none !important; }
.menu-is-open .bm-close { display: flex !important; }

.bm-close { display: none !important; }

.collapse-menu-accordion-toggle { margin-bottom: 15px; }
.collapse-menu-accordion-toggle:hover { color: #FFF !important; }

/* ============================================================
   COLORS (helpers)
   ============================================================ */
.bianco { color: #FFF; }
.bg-bianco { color: var(--grigio-dark); }
.bg-bianco:before { background-color: #FFF; }

.background { color: var(--background); }
.bg-background { color: var(--grigio-dark); }
.bg-background:before { background-color: var(--background); }

.yellow { color: var(--yellow); }
.bg-yellow { color: var(--grigio-dark); }
.bg-yellow:before { background-color: var(--yellow); }

.yellow-light { color: var(--yellow-light); }
.bg-yellow-light { color: var(--grigio-dark); }
.bg-yellow-light:before { background-color: var(--yellow-light); }

.verde { color: var(--verde); }
.bg-verde { color: var(--bianco); }
.bg-verde:before { background-color: var(--verde); }

.verde-light { color: var(--verde-light); }
.bg-verde-light { color: var(--grigio-dark); }
.bg-verde-light:before { background-color: var(--verde-light); }

.verde-dark { color: var(--verde-dark); }
.bg-verde-dark { color: var(--bianco); }
.bg-verde-dark:before { background-color: var(--verde-dark); }

.grigio { color: var(--grigio); }
.bg-grigio { color: var(--bianco); }
.bg-grigio:before { background-color: var(--grigio); }

.grigio-light { color: var(--grigio-light); }
.bg-grigio-light { color: var(--grigio-dark); }
.bg-grigio-light:before { background-color: var(--grigio-light); }

.grigio-dark { color: var(--grigio-dark); }
.bg-grigio-dark { color: var(--bianco); }
.bg-grigio-dark:before { background-color: var(--grigio-dark); }

.bg-bianco,
.bg-background,
.bg-yellow,
.bg-yellow-light,
.bg-verde,
.bg-verde-light,
.bg-verde-dark,
.bg-grigio,
.bg-grigio-light,
.bg-grigio-dark {
  position: relative;
}

.bg-bianco:before,
.bg-background:before,
.bg-yellow:before,
.bg-yellow-light:before,
.bg-verde:before,
.bg-verde-light:before,
.bg-verde-dark:before,
.bg-grigio:before,
.bg-grigio-light:before,
.bg-grigio-dark:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
  -webkit-transition: background-color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), box-shadow .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  -moz-transition: background-color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), box-shadow .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  -o-transition: background-color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), box-shadow .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  transition: background-color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), box-shadow .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
  border-radius: 8px;
}

a:hover > .bg-bianco:before,
a:hover > .bg-background:before,
a:hover > .bg-yellow:before,
a:hover > .bg-yellow-light:before,
a:hover > .bg-verde:before,
a:hover > .bg-verde-light:before,
a:hover > .bg-verde-dark:before,
a:hover > .bg-grigio:before,
a:hover > .bg-grigio-light:before,
a:hover > .bg-grigio-dark:before {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, .2);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  width: 100%;
  background-color: var(--yellow);
  font-size: 14px;
  color: var(--verde-dark);
  padding-top: 90px;
  padding-bottom: 3rem;
}

footer a { color: var(--verde-dark); }

footer a:hover {
  color: var(--verde-dark);
  text-decoration: underline;
}

footer svg path { fill: var(--verde-dark) !important; }

.footer-logo { max-width: 250px; }

/* ============================================================
   ACCOMMODATION / FILTERS
   ============================================================ */
.accommodation { position: relative; }

.campus-head,
.accommodation-head {
  padding-top: 90px !important;
  padding-left: 0 !important;
}

.price-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 102px;
  height: 92px;
  text-align: center;
  padding: 10px 0;
  z-index: 10;
}

.availability-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  text-align: center;
  padding: 6px 10px;
  z-index: 10;
  background-color: var(--background);
  border-radius: 6px;
  white-space: nowrap;
}

.availability-tag-inline {
  text-align: center;
  padding: 6px 10px;
  background-color: var(--background);
  border-radius: 6px;
}

.sec.sec-accommodation-hero .price-tag { right: 0px; }
.sec.sec-accommodation-hero .availability-tag { left: 0px; }

.tire-share .price-tag { background-color: var(--share); }
.tire-private .price-tag { background-color: var(--private); }
.tire-premium .price-tag { background-color: var(--premium); }

.price-tag .from { font-size: 12px; }
.price-tag .price { font-size: 24px; }
.price-tag .payment { font-size: 12px; }

.accommodation {
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

.accommodation.is-hidden { display: none !important; }

.accommodations-slider .swiper-wrapper {
  transition: all 500ms cubic-bezier(0.21, 0.61, 0.35, 1.0);
  opacity: 1;
}

.accommodations-slider .swiper-wrapper.is-fading { opacity: 0; }

/* accommodation radio */
.acc-radio {
  position: relative;
  user-select: none;
}

.acc-radio .acc-radio-in:before {
  content: "";
  position: absolute;
  top: 0;
  left: -.5rem;
  width: calc(100% + 1rem);
  height: 100%;
  background-color: transparent;
  border-radius: 6px;
  overflow: hidden;
  z-index: -1;
}

.acc-radio input:checked + .acc-radio-in { color: var(--verde-dark); }
.acc-radio input:checked + .acc-radio-in .icon-bg svg path { fill: var(--verde) !important; }
.acc-radio input:checked + .acc-radio-in .icon-i svg path { fill: var(--verde-dark) !important; }
.acc-radio input:checked + .acc-radio-in:before { background-color: var(--verde-light) !important; }

.acc-radio .acc-radio-in .square { display: inline-flex; }
.acc-radio input:checked + .acc-radio-in .checked-square { display: inline-flex; }

.acc-radio .acc-radio-in .checked-square { display: none; }
.acc-radio input:checked + .acc-radio-in .square { display: none; }

.acc-radio:hover .acc-radio-in:before { background-color: var(--background); }

/* ============================================================
   ICONS
   ============================================================ */
.icon {
  display: inline-flex;
  vertical-align: middle;
}

.icon-in { position: relative; }

.icon .icon-bg,
.icon .icon-i {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.icon .icon-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  height: 180%;
  z-index: -1;
  transform: translate(-50%, -50%);
}

.icon .icon-i,
.icon .icon-i svg {
  margin: auto;
  height: auto;
}

.icon-s .icon-i svg { width: 16px !important; }
.icon-m .icon-i svg { width: 21px !important; }
.icon-l .icon-i svg { width: 80px !important; }
.icon-xl .icon-i svg { width: 120px !important; }

.pswp__img { border-radius: 16px !important; }

/* CTA container */
.cta-container { margin-top: 40px; }

.sec-paragraph-center .cta-container,
.sec-hero-centered .cta-container { text-align: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media all and (max-width: 767px) {
  #mainCTA {
    position: fixed;
    top: calc(100vh - 15px);
    right: 23px;
    text-align: right;
    transform: translateY(-100%);
  }

  .list-inner .item-column + .item-column { margin-top: 30px; }

  #useful-buttons {
    position: absolute;
    bottom: 15px;
    left: 130px;
    z-index: 1;
  }

  .btn.btn-outline { padding: 0 15px; }

  #background-menu .offcanvas-body { padding-top: 82px; }

  #background-menu-in {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
  }

  #background-menu .offcanvas-body .list,
  .collapse-menu .list { padding-top: 10px; }

  #background-menu .offcanvas-body a,
  .collapse-menu .list a { padding: 10px 0; }

  #background-menu .offcanvas-body a .icon,
  .collapse-menu .list a .icon { opacity: 1; }

  .sec:not(.sec-bg):first-child .section-intro {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  footer {
    padding-top: 40px;
    padding-bottom: 120px;
  }

  .swiper-wrapper {
    width: 100%;
    margin-left: 0;
  }

  #languages a { padding: 8px 18px !important; }

  .page {
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: 75px;
  }
}

@media all and (max-width: 989px) {
  .page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sec:first-child .section-head { padding: 5rem .5rem 3rem !important; }

  .page.pages .sec:not(.sec-bg):first-child .section-head { padding: 3rem .5rem 3rem !important; }

  .sec:not(.sec-bg):first-child .section-head { padding: 0rem .5rem 3rem !important; }

  .sec.sec-paragraph-side-media:first-child { padding-top: 0; }

  #header {
    width: 100vw;
    margin: 0 !important;
  }

  #header.scrolled { margin-top: 5px; }

  .sec { max-width: calc(100vw - 10px); }

  .sec .sec-in { width: 100%; }

  .sec .cover + .section-body { margin-top: 3rem; }

  .list-inner .column-icon { max-width: 140px; }

  .campus-icon {
    max-width: 220px;
    margin: auto;
    display: block;
  }

  .cover.after, .cover.before { padding-bottom: 56.25%; }

  .list-masonry .cover { min-height: 300px; }

  .btn-tire em { display: none; }

  #blog-categories {
    background-color: var(--grigio-light);
    padding: 2rem;
  }

  .page.blog .sec:first-child .section-head { padding-top: 20px; }

  .page.blog #breadcrumbs {
    margin-bottom: 3rem;
  }

  .sec.sec-bg:first-child .section-intro {
    padding-left: 0;
    padding-right: 0;
  }

  #blog-index { margin-top: 0 !important; }

  .has-carousel .secondary-cta { bottom: 0; }
}

@media all and (min-width: 990px) {
  .h-lg-100 { height: 100%; }

  .extend {
    width: calc(100% + 50px);
    transform: translateX(-15px);
  }

  .cover.after,
  .cover.before {
    width: calc(100% + 24px);
    margin-left: -12px;
  }
}

@media all and (max-width: 1440px) {
  .fs-4 { font-size: 1.4rem !important; }
}