/* incrediblefox.com - menu "progetti / categorie" (18/10/2026).
   Lavora con menu-progetti-categorie.js, che aggiunge le classi m2-top, m2-cat-li, m2-open.
   Le voci vengono dal menu Joomla "proj-menu-2"; le classi m2-progetti, m2-categorie, m2-cat
   sono impostate nelle voci (Classe CSS del link). */

/* ---------- Computer (Maximenu verticale) ---------- */
/* I sottomenu non si aprono più di lato al passaggio del mouse: stanno sotto la voce e si aprono al clic */
.m2-top > .floatck,
.m2-cat-li > .floatck {
  display: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.m2-top.m2-open > .floatck,
.m2-cat-li.m2-open > .floatck {
  display: block !important;
}
.m2-top .maxidrop-main,
.m2-top div.maximenuck2,
.m2-top ul.maximenuck2 {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* rientro delle voci: 12 px sotto progetti/categorie, 24 px dentro una categoria
   (html body serve a superare le regole di Maximenu legate all'id del modulo) */
html body .m2-top li.level2 > a,
html body .m2-top li.level2 > span {
  padding-left: 12px !important;
}
html body .m2-top li.level3 > a {
  padding-left: 24px !important;
}
.m2-top li.maximenuck {
  float: none !important;
  display: block !important;
  width: auto !important;
}
/* niente frecce di Maximenu sulle voci che si aprono */
.m2-top > span::after,
.m2-top > span::before,
.m2-cat-li > span::after {
  display: none !important;
  content: none !important;
}

/* ---------- Telefono (Mobile Menu CK, a fisarmonica) ---------- */
.m2-mtop > .mobilemenuck-submenu,
.m2-mcat > .mobilemenuck-submenu {
  display: none !important;
}
.m2-mtop.m2-open > .mobilemenuck-submenu,
.m2-mcat.m2-open > .mobilemenuck-submenu {
  display: block !important;
}
.m2-mtop > .menuck > .mobilemenuck-togglericon,
.m2-mcat > .menuck > .mobilemenuck-togglericon {
  display: none !important;
}
.mobilemenuck .m2-progetti,
.mobilemenuck .m2-categorie,
.mobilemenuck .m2-cat {
  color: rgb(64, 64, 64) !important;
  font-size: 1rem !important;
  line-height: 1.6rem !important;
}

/* ---------- Aspetto comune ---------- */
.m2-progetti,
.m2-categorie,
.m2-cat {
  cursor: pointer;
}
/* riga con "progetti" e "categorie" affiancati (creata dal JS); le intestazioni originali si nascondono */
.m2-top > .m2-progetti,
.m2-top > .m2-categorie,
.m2-mtop > .menuck {
  display: none !important;
}
.m2-switch {
  display: block !important;
  float: none !important;
  margin-top: 0.5rem;
}
html body .m2-sw-btn {
  display: inline-block;
  cursor: pointer;
  margin: 0 16px 0 0;
  padding: 0;
  border-bottom: 1px solid transparent;
}
/* nel menu del telefono le voci hanno 35 px di rientro e 4 px di margine (.menuck) */
.mobilemenuck .m2-switch {
  padding-left: 35px;
  margin-left: 4px;
}
.mobilemenuck .m2-sw-btn {
  color: rgb(64, 64, 64) !important;
  font-size: 1rem !important;
  line-height: 1.6rem !important;
}
/* quella aperta è sottolineata in azzurro, come il passaggio del mouse sulle voci */
html body .m2-sw-btn.m2-on {
  border-bottom-color: #00bfff;
}
/* categorie: + chiusa, − aperta */
.m2-cat .titreck-title::before {
  content: "+ ";
}
.m2-cat-li.m2-open > .m2-cat .titreck-title::before,
.m2-mcat.m2-open > .menuck > .m2-cat .titreck-title::before {
  content: "\2212  ";
}

/* ---------- Telefono: al tocco la parola diventa azzurra, come col mouse sul computer (19/10/2026) ---------- */
/* niente sottolineatura al tocco */
html body .mobilemenuck .mobilemenuck-item a:hover,
html body .mobilemenuck .mobilemenuck-item a:active,
html body .mobilemenuck .mobilemenuck-item a:focus,
html body .mobilemenuck .mobilemenuck-item .m2-touch,
html body .mobilemenuck .m2-sw-btn:hover,
html body .mobilemenuck .m2-sw-btn.m2-touch,
html body .mobilemenuck .m2-cat:hover,
html body .mobilemenuck .m2-cat.m2-touch {
  text-decoration-line: none !important;
}
/* parola azzurra (m2-touch è aggiunta dal JS mentre il dito è sulla voce) */
html body .mobilemenuck a.proj:hover,
html body .mobilemenuck a.proj:active,
html body .mobilemenuck a.proj.m2-touch,
html body .mobilemenuck a.voce-menu.m2-touch:not(.voce-nome):not(.voce-slogan),
html body .mobilemenuck .m2-sw-btn.m2-touch,
html body .mobilemenuck .m2-cat.m2-touch {
  color: #00bfff !important;
}
/* sul telefono il cambio di colore è più rapido (sul computer resta la dissolvenza di 0,4 s) */
html body .mobilemenuck a,
html body .mobilemenuck .m2-sw-btn,
html body .mobilemenuck .m2-cat {
  transition: color 0.12s !important;
}

/* ---------- Fondo pagina dei progetti: "< precedente" e "successivo >" (19/10/2026) ---------- */
.m2-pagenav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  max-width: 1140px;
  margin: 3rem auto 5.5rem;   /* spazio sotto: icone social e copyright sono fissi in basso */
  padding: 0 15px;
  font-size: 10pt;
  letter-spacing: 0.049rem;
}
html body .m2-pagenav a {
  color: rgb(64, 64, 64);
  text-decoration: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  transition: color 0.4s;
}
html body .m2-pagenav a:hover,
html body .m2-pagenav a:focus,
html body .m2-pagenav a.m2-touch {
  color: #00bfff !important;
}
.m2-pagenav .m2-next {
  margin-left: auto;
  text-align: right;
}
.m2-pagenav .m2-arr {
  font-family: Arial, Helvetica, sans-serif;
}
.m2-pagenav .m2-prev .m2-arr { margin-right: 0.5em; }
.m2-pagenav .m2-next .m2-arr { margin-left: 0.5em; }
@media (max-width: 640px) {
  .m2-pagenav { font-size: 0.95rem; margin-top: 2.5rem; }
  html body .m2-pagenav a { transition: color 0.12s; }
}

/* ---------- Freccia "torna su" di Astroid: freccetta sottile > girata in su, senza cerchio ---------- */
html body #astroid-backtotop {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 10px !important;
  bottom: 70px !important;     /* prima 20 px: toccava il copyright */
}
html body #astroid-backtotop i {
  display: none !important;
}
html body #astroid-backtotop::before {
  content: ">";
  display: inline-block;
  transform: rotate(-90deg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  line-height: 1;
  color: #00bfff;
}

/* Abito Sonoro: le sezioni WEARABLE / COMMUNITY / CANVAS vengono caricate dentro uno spaziatore
   RSPageBuilder alto 50 px; senza altezza automatica il resto della pagina (e la nav in fondo)
   finiva sopra le sezioni. (19/10/2026) */
html body .abito-content {
  height: auto !important;
}

/* Abito for fit / FIT//ALCHIMIA: le fasce con sfondo (immagine gialla e grigio chiaro) partivano
   sotto il menu fisso a sinistra e ne coprivano le voci. Sul computer lo sfondo parte dalla colonna
   dei contenuti: si nasconde la prima colonna (col-md-2, vuota) che sta sotto il menu. (19/10/2026) */
@media (min-width: 768px) {
  body.abito-for-fit-alias .page-content > section[style*="background-image"],
  body.abito-for-fit-alias .page-content > section[style*="background-color"] {
    clip-path: inset(0 0 0 16.6667%);
  }
}

/* ---------- Caroselli di foto (RSPageBuilder, Bootstrap 5) (19/10/2026) ----------
   Le frecce usavano un'icona Font Awesome 4 ("fa fa-chevron-…") che il sito non carica più:
   erano invisibili. Ora "<" e ">" sottili e azzurri, come le altre frecce del sito.
   Lo scorrimento automatico è tolto dal JS. */
html body .carousel .carousel-control-prev,
html body .carousel .carousel-control-next {
  opacity: 1 !important;
  width: 56px;
  background: none !important;
}
html body .carousel .carousel-control-prev > i,
html body .carousel .carousel-control-next > i,
html body .carousel .carousel-control-prev-icon,
html body .carousel .carousel-control-next-icon {
  display: none !important;
}
html body .carousel .carousel-control-prev::before,
html body .carousel .carousel-control-next::before {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  line-height: 1;
  color: #00bfff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
  transition: color 0.2s;
}
html body .carousel .carousel-control-prev::before { content: "<"; }
html body .carousel .carousel-control-next::before { content: ">"; }
html body .carousel .carousel-control-prev:hover::before,
html body .carousel .carousel-control-next:hover::before,
html body .carousel .carousel-control-prev:focus::before,
html body .carousel .carousel-control-next:focus::before {
  color: #ffffff;
}

/* ---------- Telefono: zoom con due dita anche sulle foto dei caroselli (19/10/2026) ----------
   Bootstrap mette "touch-action: pan-y" sui caroselli per riconoscere il trascinamento:
   su Android blocca lo zoom. Aggiungiamo pinch-zoom. */
html body .carousel,
html body .carousel.pointer-event {
  touch-action: pan-y pinch-zoom !important;
}

/* ---------- Telefono: tocca una foto per vederla a tutto schermo (menu-progetti-categorie.js) ---------- */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  main.astroid-component-area img { cursor: zoom-in; }
}
.m2-lb {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: none;
  background: rgba(0, 0, 0, 0.97);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.m2-lb.m2-lb-on { display: block; }
.m2-lb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.2s ease-out;
  will-change: transform;
}
.m2-lb.m2-lb-drag .m2-lb-img { transition: none; }
html body .m2-lb button {
  position: absolute;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 18px 12px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  cursor: pointer;
}
html body .m2-lb .m2-lb-close { top: 0; right: 4px; color: #ffffff; font-size: 38px; }
html body .m2-lb .m2-lb-prev,
html body .m2-lb .m2-lb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 0;                      /* modello A di Federica (19/10/2026): "‹ ›" sottili, azzurrino, senza ombra */
  text-shadow: none;
}
html body .m2-lb .m2-lb-prev::before,
html body .m2-lb .m2-lb-next::before {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  color: rgba(150, 215, 245, 0.85);
}
html body .m2-lb .m2-lb-prev::before { content: "\2039"; }
html body .m2-lb .m2-lb-next::before { content: "\203A"; }
html body .m2-lb .m2-lb-prev { left: 2px; }
html body .m2-lb .m2-lb-next { right: 2px; }
.m2-lb-count {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: #cccccc;
  font: 13px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
}
html.m2-lb-noscroll,
html.m2-lb-noscroll body { overflow: hidden !important; }

/* Computer (dal 19/10/2026): clic su una foto per vederla grande, su sfondo bianco.
   Si chiude con la ✕, con Esc o cliccando fuori dalla foto; frecce < > anche da tastiera. */
@media (min-width: 768px) and (hover: hover) {
  main.astroid-component-area img { cursor: zoom-in; }
  main.astroid-component-area a img { cursor: pointer; }
  .m2-lb { background: rgba(255, 255, 255, 0.98); cursor: zoom-out; }
  .m2-lb-img { inset: 5vh 7vw; width: 86vw; height: 88vh; cursor: default; }
  html body .m2-lb .m2-lb-close { color: #555555; font-size: 34px; top: 8px; right: 14px; }
  html body .m2-lb .m2-lb-prev { left: 1.5vw; }
  html body .m2-lb .m2-lb-next { right: 1.5vw; }
  html body .m2-lb .m2-lb-prev::before,
  html body .m2-lb .m2-lb-next::before { font-size: 48px; color: rgba(70, 180, 230, 0.9); }
  html body .m2-lb .m2-lb-prev:hover::before,
  html body .m2-lb .m2-lb-next:hover::before { color: #00bfff; }
  .m2-lb-count { color: #777777; bottom: 2.2vh; }
}

/* Caroselli: le frecce stanno SOTTO la foto, al centro, non sopra l'immagine (richiesta del 19/10/2026) */
html body .carousel {
  margin-bottom: 48px;   /* spazio per le frecce: il carosello ha un altezza fissa */
}
html body .carousel .carousel-control-prev,
html body .carousel .carousel-control-next {
  top: auto !important;
  bottom: -48px !important;
  transform: none !important;   /* RSPageBuilder le centrava con translateY(-50%) */
  width: 44px !important;
  height: 44px !important;
}
html body .carousel .carousel-control-prev { left: calc(50% - 52px) !important; right: auto !important; }
html body .carousel .carousel-control-next { right: calc(50% - 52px) !important; left: auto !important; }
html body .carousel .carousel-control-prev::before,
html body .carousel .carousel-control-next::before {
  font-size: 30px;
  text-shadow: none;
}
html body .carousel .carousel-control-prev:hover::before,
html body .carousel .carousel-control-next:hover::before,
html body .carousel .carousel-control-prev:focus::before,
html body .carousel .carousel-control-next:focus::before {
  color: #404040;
}

/* Telefono: immagini RSPageBuilder con misura fissa nella pagina (es. Unlivable City, 600x600 px)
   uscivano dallo schermo. Al massimo larghe quanto la colonna, proporzioni mantenute. (19/10/2026) */
@media (max-width: 767px) {
  html body main.astroid-component-area .rspbld-image img {
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Didascalie con il nome del file (es. 2016_baule_d_airs_festival_sketch_…): parole lunghissime
   senza spazi che sul telefono allargavano la pagina (Media 654 px, Baule d'airs 565, Unlivable City 518).
   Vanno a capo solo quando non ci stanno. (19/10/2026) */
html body main.astroid-component-area p,
html body main.astroid-component-area li,
html body main.astroid-component-area figcaption {
  overflow-wrap: anywhere;
}

/* Caroselli: tutte le foto alla stessa altezza, intere (niente tagli), così il carosello non salta
   e le frecce sotto restano ferme. 400 px sul computer, 240 px sul telefono. (19/10/2026) */
html body main.astroid-component-area .carousel .carousel-item img,
html body .carousel .carousel-item img {
  width: 100% !important;
  height: 400px !important;
  max-height: none !important;
  object-fit: contain;
}
@media (max-width: 767px) {
  html body main.astroid-component-area .carousel .carousel-item img,
  html body .carousel .carousel-item img { height: 240px !important; }
}

/* Sezione Costumes (19/10/2026). Pagina intro = voce 225 "Costumes" (online dal 19/10/2026; 681 = pagina di prova, spenta),
   pagine degli spettacoli = voci 682-696 (696 = album Sketch) (menu nascosto "costumipages"). */
/* griglia degli spettacoli: foto tutte quadrate, come nella pagina Abito */
body.itemid-681 .link_grid_masonry .rspbld-image img,
body.itemid-225 .link_grid_masonry .rspbld-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* griglia regolare nell'ordine degli spettacoli (la libreria Masonry li metterebbe "a scalini"): 4 per riga, 2 sul telefono */
html body.itemid-681 .link_grid_masonry .boxes-container,
html body.itemid-225 .link_grid_masonry .boxes-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 10px;
  height: auto !important;
}
html body.itemid-681 .link_grid_masonry .boxes-container > .box,
html body.itemid-225 .link_grid_masonry .boxes-container > .box {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  margin: 0 !important;
}
@media (max-width: 767px) {
  html body.itemid-681 .link_grid_masonry .boxes-container,   html body.itemid-225 .link_grid_masonry .boxes-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* le fasce con sfondo non passano sotto il menu fisso a sinistra (come in abito for fit) */
@media (min-width: 768px) {
  body.itemid-682 .page-content > section[style*="background-color"], body.itemid-683 .page-content > section[style*="background-color"],
  body.itemid-684 .page-content > section[style*="background-color"], body.itemid-685 .page-content > section[style*="background-color"],
  body.itemid-686 .page-content > section[style*="background-color"], body.itemid-687 .page-content > section[style*="background-color"],
  body.itemid-688 .page-content > section[style*="background-color"], body.itemid-689 .page-content > section[style*="background-color"],
  body.itemid-690 .page-content > section[style*="background-color"], body.itemid-691 .page-content > section[style*="background-color"],
  body.itemid-692 .page-content > section[style*="background-color"], body.itemid-693 .page-content > section[style*="background-color"],
  body.itemid-694 .page-content > section[style*="background-color"], body.itemid-695 .page-content > section[style*="background-color"],
  body.itemid-696 .page-content > section[style*="background-color"] {
    clip-path: inset(0 0 0 16.6667%);
  }
}
/* "< tutti i costumi" in alto nelle pagine degli spettacoli */
.m2-back {
  font-size: 10pt;
  letter-spacing: 0.049rem;
  margin: 0 0 0.5rem;
}
html body .m2-back a {
  color: rgb(64, 64, 64);
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.4s;
}
html body .m2-back a:hover,
html body .m2-back a:focus,
html body .m2-back a.m2-touch {
  color: #00bfff !important;
}
.m2-back .m2-arr {
  font-family: Arial, Helvetica, sans-serif;
  margin-right: 0.5em;
}

/* Caroselli sul telefono (19/10/2026, scelta C di Federica): niente frecce < >, puntini piccoli sotto la foto,
   si scorre col dito. I puntini sono creati dal JS (.m2-dots). Sul computer restano le frecce. */
.m2-dots { display: none; }
@media (max-width: 767px) {
  html body main .carousel .carousel-control-prev,
  html body main .carousel .carousel-control-next { display: none !important; }
  html body main .carousel { margin-bottom: 0 !important; }
  .m2-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 18px;
  }
  .m2-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfcfcf;
    -webkit-tap-highlight-color: transparent;
  }
  .m2-dots button.m2-on { background: #00bfff; }
}

/* Pagina Costumes (voce 225): sfondo chiaro con il bozzetto di Konya (versione 981x1369 della pagina Konya) al posto della foto della piuma in alto
   (19/10/2026, scelta di Federica tra 8 prove). L'immagine è già schiarita (images/Costumi/sfondi/). */
html body.itemid-225 {
  background: #fff url(/images/Costumi/sfondi/sfondo_2_konya_bozzetto_hd.webp) center top / cover fixed no-repeat !important;
}
html body.itemid-225 .astroid-container,
html body.itemid-225 .astroid-content,
html body.itemid-225 .astroid-layout,
html body.itemid-225 .astroid-wrapper,
html body.itemid-225 main,
html body.itemid-225 .astroid-section,
html body.itemid-225 .astroid-component-section,
html body.itemid-225 .page-content,
html body.itemid-225 .page-content section,
html body.itemid-225 #astroid-header,
html body.itemid-225 header,
html body.itemid-225 .astroid-header-section {
  background: transparent !important;
}
html body.itemid-225 .page-content > section:has(img[src*="accessoire1_HOME"]) { display: none !important; }
/* Griglia di Costumes: titolo, luogo e anno più staccati dalla foto, sottolineatura dei titoli rimessa su richiesta (19/10/2026) */
html body.itemid-225 .link_grid_masonry .rspbld-item-content,
html body.itemid-681 .link_grid_masonry .rspbld-item-content { margin-top: 12px !important; }
html body.itemid-225 .link_grid_masonry .rspbld-item-content p,
html body.itemid-681 .link_grid_masonry .rspbld-item-content p { line-height: 1.3 !important; }
.m2-lb.m2-lb-one .m2-lb-prev,
.m2-lb.m2-lb-one .m2-lb-next,
.m2-lb.m2-lb-one .m2-lb-count { display: none !important; }
/* Griglie di foto (Costumes, Abito): didascalie sotto le foto allineate a sinistra (19/10/2026) */
html body .link_grid_masonry .rspbld-item-content,
html body .link_grid_masonry .rspbld-item-content p { text-align: left !important; }

/* Sketch: album a striscia orizzontale (figure + didascalia), senza barra di scorrimento; freccette azzurrine sul computer */
.m2-wrap{position:relative}
.m2-strip{display:flex;gap:18px;overflow-x:auto;padding:4px 0 14px;scroll-snap-type:x proximity;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.m2-strip::-webkit-scrollbar{display:none}
.m2-strip figure{flex:0 0 auto;margin:0;scroll-snap-align:start}
.m2-strip img{height:320px;width:auto;max-width:none;display:block}
.m2-strip figcaption{margin-top:12px;font-style:italic;text-align:left;color:#8b8178;font-size:13px;line-height:1.35;width:0;min-width:100%}
.m2-sa{position:absolute;top:164px;transform:translateY(-50%);background:none;border:0;padding:0 6px;cursor:pointer;font:300 44px/1 Arial,sans-serif;color:rgba(70,180,230,.9);box-shadow:none;text-shadow:none}
.m2-sa:hover,.m2-sa:focus{color:rgba(40,150,210,1);background:none;outline:0}
.m2-sa.l{left:-38px}
.m2-sa.r{right:-38px}
.m2-sa[hidden]{display:none}
@media (max-width:767px){
  .m2-strip img{height:240px}
  .m2-sa{display:none}
}

/* Caroselli: foto e didascalie sullo stesso filo sinistro del testo (prima rientrate di 8 e 14 px, didascalie centrate
   su Space e Clockwise direction); la foto sta in basso nel riquadro fisso, così la didascalia è subito sotto (12 px),
   in corsivo grigio tortora come nel resto del sito. (19/10/2026) */
html body main.astroid-component-area .carousel .carousel-item .col-md-12 { padding-left: 0 !important; padding-right: 0 !important; }
html body main.astroid-component-area .carousel .carousel-item img { object-position: left bottom !important; }
html body main.astroid-component-area .carousel .rspbld-item-content { margin: 12px 0 0 !important; }
html body main.astroid-component-area .carousel .rspbld-item-content,
html body main.astroid-component-area .carousel .rspbld-item-content p { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
html body main.astroid-component-area .carousel .rspbld-item-content p { font-style: italic; color: #8b8178; font-size: 13px; line-height: 1.35; }