/* ====================== *
 * COMUNI - ELEMENTI BASE *
 * ====================== */


body,
input,
button,
select,
textarea {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}

::-moz-selection, ::selection {
    background: #6FABBD;
}


/* ====================================== *
 * FRAMMENTI HTML PERSONALIZZATI CARRELLO *
 * ====================================== */

div#addticket { background: #FFF; border: 5px dashed #1789D8; display: none; font-size: 20px; margin: 15px auto; padding: 20px; text-align: center; width: 70%; }
div#addticket div#label1 { color: #1789D8; font-size: 30px; font-weight: 700; text-transform: uppercase; }
div#addticket div#label3 a { color: #1789D8; font-weight: 700; text-decoration: none; text-transform: uppercase; }

div#unicotitolare { background: #FFF; border: 5px dashed #1789D8; display: none; font-size: 20px; margin: 15px auto; padding: 20px; text-align: left; width: 70%; }
div#unicotitolare div#infotitolare { float: none; margin-bottom: 1.5rem; width: 100%; }
div#unicotitolare fieldset { border: 0px; float: none; padding: 0px; width: 100%; }
div#unicotitolare label { font-size: 0.8rem; font-weight: 400; text-align: left; width: 100%; }
div#unicotitolare input { font-size: 1rem; min-width: 95%; }
div#unicotitolare div.messaggio.errore { font-size: 0.8rem; margin-left: 0px; min-width: 95%; }

@media only screen and (min-width: 1024px) {
	div#unicotitolare div#infotitolare { float: left; margin-bottom: 0px; width: 50%; }
	div#unicotitolare fieldset { float: left; padding: 0px 0px 0px 5rem; width: 40%; }
}

/* ======================== *
 * COMUNI - ELEMENTI LAYOUT *
 * ======================== */

body { background: url(/artafiles/teatrosocjale/sfondo.jpg) no-repeat fixed center top; background-size: cover;  }
div#contenitore { background-color: #FFF; width: 100%; padding-top: 45px; min-height: auto; }
div#testa { margin: 0px auto; padding: 0px; text-align: center; width: auto; }
div#testa a img { width: 100%; }
div#content { margin: 0px auto; padding-bottom: 20px; width: auto; }
div#footer { font-size: 12px; width: auto; }

div.divtesta { border-bottom-style: solid; border-bottom-width: 1px; border-color: #E1E1E1; }
div.divfooter, div#vivaticket { background-color: #171717; color: #FFF; font-size: 12px; font-weight: 400; }
div.divfooter { padding: 25px 0px; text-align: center; }
div#vivaticket { border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; padding: 10px 0px; }
div.divfooter a, div#vivaticket a { color: #FFF; outline: 0px; text-decoration: none; }

div#footer span,
div#vivaticket a,
div#vivaticket span { display: block; }

a#ricevutapdf, a#bigliettipdf, a#versionepdf, a#fatturapdf { background-position: 5% 50%; padding-left: 30px; padding-right: 0px; }

.infotooltip { background-image: url(ico_generale/info.svg); }
.infotooltip:hover { opacity: 0.9; }

span.note.sala, div#div_filtro { display: none; }

/* Solo IT e EN */
li[class^="flag"] { display: none !important; }
li.flag-it, li.flag-en { display: inline-block !important; }

/* ====================== *
 * COMUNI - ELEMENTI FORM *
 * ====================== */



/* =============================== *
 * COMUNI - LINK E LINK A PULSANTE *
 * =============================== */

a,
a:link,
a:visited,
a:active,
a:focus { color: #810038; font-weight: 700; text-decoration: underline; }
a:hover { color: #824A5F; }

/* Con icone */
input[type="submit"],
input[type="button"],
input[type="reset"],
button { padding: 0.5rem 30px 0.5rem 1rem; background-repeat: no-repeat; text-align: left; }

a.bott.testo { display: inline-block; padding: 0.25rem 0.5rem; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); margin: 0.5rem 0px; }

a.bott.testo:hover,
a.bott.testo:focus {}

input[type="submit"].largo,
input[type="button"].largo,
input[type="reset"].largo,
button.largo,
a.bott.largo { width: 18.5rem; background-position: 95% 50%; }

input[type="submit"].stretto,
input[type="button"].stretto,
input[type="reset"].stretto,
button.stretto,
a.bott.stretto { width: 8rem; background-position: 89% 50%; }

input[type="text"],
input[type="password"],
select,
textarea { border: 0.1rem solid #CCC; background: #FFF; font-size: 1em; }

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus { border-color: #B9B9B9; }

textarea[readonly="readonly"] { background: #E4E4E4; }

input[type="submit"],
input[type="submit"]:focus,
input[type="button"],
input[type="button"]:focus,
input[type="reset"],
input[type="reset"]:focus,
button,
button:focus,
.scegliSettorePub .numerati h2 a,
.scegliSettorePub .numerati h2 a:focus,
.scegliSettorePub .ingressi h2 a,
.scegliSettorePub .ingressi h2 a:focus,
.link_settore a,
.link_settore a:focus,
.link_ingresso a,
.link_ingresso a:focus,
a#acquista { background-color: #810038; border-radius: 3px; -webkit-border-radius: 3px; color: #FFF; font-weight: 700; text-decoration: none; }

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover,
.scegliSettorePub .numerati h2 a:hover,
.scegliSettorePub .ingressi h2 a:hover,
.link_settore a:hover,
.link_ingresso a:hover,
a#acquista:hover {  }

fieldset { border: 2px solid #E5E5E5; }

legend { color: #444; font-size: 1.4rem; width: auto; }

label { font-weight: 700; }

textarea[readonly="readonly"] { font-family: monospace; }

button[type="submit"],
input[type="submit"],
button#conferma,
input#trovaposticonferma { background-image: url(ico_generale/check.svg); }

button[type="submit"]:hover,
input[type="submit"]:hover,
button#conferma:hover,
input#trovaposticonferma:hover { /*background-image: url(ico_generale/check-hover.svg);*/ }

button#loginbutton { background-image: url(ico_generale/lock.svg); }
button#loginbutton:hover { /*background-image: url(ico_generale/lock-hover.svg);*/ }

button#verificadatianagbutton {	background-image: url(ico_generale/user.svg); }
button#verificadatianagbutton:hover { /*background-image: url(ico_generale/user-hover.svg);*/ }

button#zoomIn { background-image: url(ico_generale/zoomIn.svg); }
button#zoomIn:hover { /*background-image: url(ico_generale/zoomIn-hover.svg);*/ }
button#zoomOut { background-image: url(ico_generale/zoomOut.svg); }
button#zoomOut:hover { /*background-image: url(ico_generale/zoomOut-hover.svg);*/ }

.tabprezzi button { background-image: url(ico_generale/dettaglio.svg); }
.tabprezzi button:hover { /*background-image: url(ico_generale/dettaglio-hover.svg);*/ }

.bottoni.pagamento input { background-image: url(ico_generale/card.svg); }
.bottoni.pagamento input:hover { /*background-image: url(ico_generale/card-hover.svg);*/ }

/* ====================== *
 * COMUNI - SCELTA LINGUE *
 * ====================== */


/* ================= *
 * COMUNI - PERCORSO *
 * ================= */

ol.percorso li { font-family: "Josefin Slab"; font-weight: 700; list-style-position: inside; }

ol.percorso li.current { background: #E5E5E5; color: #444; }
ol.percorso li.prev {  }

ol.percorso.top {  }
ol.percorso.bottom { display: none; }

/* ================================= *
 * COMUNI - MENU, BARRE, CONTENITORI *
 * ================================= */

#barranavigazione { margin: auto; }
#barranavigazione a { color: #444; text-decoration: none; }
#barranavigazione a:hover { color: #777; }

#primariga {  }
#primariga li {  }
#primariga a { font-weight: 700; font-size: 10px; line-height: 60px; padding: 0px 12px; text-transform: uppercase; text-shadow: none; }
#primariga a:hover {  }

#primariga a:hover,
#primariga a:focus {  }

#listaeventi, #transazioni, #guida, #login { padding-left: 20px !important; }
#listaeventi { background-image: url(tickets.png); background-position: left center; background-repeat: no-repeat; }
#transazioni { background-image: url(carrello.png); background-position: left center; background-repeat: no-repeat; }
#guida { background-image: url(info.png); background-position: left center; background-repeat: no-repeat; }
#login { background-image: url(utente.png); background-position: left center; background-repeat: no-repeat; }
#listaeventi:hover { background-image: url(tickets-h.png); background-position: left center; background-repeat: no-repeat; }
#transazioni:hover { background-image: url(carrello-h.png); background-position: left center; background-repeat: no-repeat; }
#guida:hover { background-image: url(info-h.png); background-position: left center; background-repeat: no-repeat; }
#login:hover { background-image: url(utente-h.png); background-position: left center; background-repeat: no-repeat; }

#lingua { padding-top: 0px; margin: 0px; }
#lingua a { margin: 0px; }

#secondariga { font-size: 10px; padding: 0px; }

#navigazione { float: right; margin: 0px; }
#navigazione li a { text-shadow: none; }
#navigazione li a:hover,
#navigazione li a:focus {  }

#cliente { font-weight: 700; float: left; padding: 0.25rem 0.5rem; }

.box.evidenza { background: #F1F1F1; }

/* ====================================== *
 * COMUNI - TITOLI, LABEL, MESSAGGI, ECC. *
 * ====================================== */

h1 { color: #333; font-size: 36px; }
h2 { color: #444; font-size: 28px; }
h1, h2 { font-family: "Josefin Slab"; font-weight: 700; text-align: center; }

.data .attivo { background: #F0F0F0; }
.note.datevendita { background: #FAFFBD; }
.note strong { background: #E5EBA1; }

/* Popup e tooltip */
.popup { background-color: #999999; color: #FFF; }

/* ================ *
 * COMUNI - TABELLE *
 * ================ */
 
th, td { border-bottom: 2px solid #d4d4d4; }

th,
tr.legenda td,
tr.totale td,
div#tabprezzi h2 { background: #333 !important; color: #FFF !important; font-weight: bold !important; }

td.riduzione,
td.prezzo,
td.prev,
td.tot,
td.elimina,
td.submit,
colgroup.evidenza,
colgroup.selezione {  }

td.riduzione a,
td.prezzo a,
td.prev a,
td.tot a,
.evidenza a { color: #000; }

td.riduzione a:hover,
td.riduzione a:focus,
td.prezzo a:hover,
td.prezzo a:focus,
td.prev a:hover,
td.prev a:focus,
td.tot a:hover,
td.tot a:focus,
.evidenza a:hover,
.evidenza a:focus  { background: #EEE; text-shadow: 0 0 0 transparent; }

/* =======================================
 * SPECIFICO - autenticazione - iscrizione 
 * ======================================= */

/* =========================
 * SPECIFICO - recupero dati 
 * ========================= */

/* =============================
 * SPECIFICO - listaEventiPub.do 
 * ============================= */

 	/* versione LISTA */

.titolotabella {}

.treeHead .treeOpen,
.treeHead .treeClosed,
 .immaginisala { background: #222; border: 0px; color: #FFF; font-weight: 700; font-style: italic; }

.treeHead {	background-color: #F1F1F1; }
.treeHead:hover { background-color: #C4DCFD; }
.treeHead span { margin: 0px; top: 0px; }

.treeOpen span { background: url(ico_generale/meno.svg) center center no-repeat; }
.treeClosed span { background: url(ico_generale/piu.svg) center center no-repeat; }

ul.onlinetab {  }
ul.onlinetab li.menusinistraSel { background: #222; color: #FFF; font-weight: 700; }
ul.onlinetab li.menusinistraUnsel {	background: #F9F9F9; -webkit-box-shadow: inset 0px -10px 20px -10px rgba(0, 0, 0, 0.4); box-shadow: inset 0px -10px 20px -10px rgba(0, 0, 0, 0.4); }
ul.onlinetab li.menusinistraUnsel a { text-decoration: none; }

td.griglia.img { background: #D4D4D4; }
td.griglia.data { max-width: 7rem; }
td.griglia.titolo h3 { background: #F1F1F1; width: 7rem; }
td.griglia.titolo h3:after { border-left-color: #F1F1F1; }

	/* versione CALENDARIO */
#calendar .fc-header-center h2 {
	background: transparent;
	color: #000;
}

#calendar th.fc-day-header {
	background: #DDD;
}

/* =========================
 * SPECIFICO - cercaPostiPub
 * ========================= */

h3.fascia a {
	font-weight: 300;
	color: #4E8CE1;
}

.cercaPostiPub td.riduzione .box {
	background: #f1f1f1;
}

.cercaPostiPub td.riduzione .box:last-child {
	background: #f1f1f1;
}

/* =========================
 * SPECIFICO - trovaPostiPub
 * ========================= */
 
tr.totale td { background: #d4d4d4; }

/* ===============================
 * SPECIFICO - scegliSettorePub.do
 * =============================== */

.scegliSettorePub .numerati h2 #desc,
.scegliSettorePub .ingressi h2 #desc { font-weight: 700; }

div.map { width: 100%; }

/* Nel caso si vogliano nascondere i pulsanti per i settori
div.numerati, div.ingressi { text-align: left !important; }
div.numerati ul { display: none; }
div.map { text-align: left; }
 */

/* =============================
 * SPECIFICO - scegliPostoPub.do
 * ============================= */
 
#mapContainer .map { background: #222; }

.tabprezzi { background: #f1f1f1; }

.dettaglio-ordine table td { background: #fff; }

#cart .box.evidenza { background: rgba(0, 0, 0, 0.1); }

/* ===========================================
 * SPECIFICO - scegliPostoNNPub (non numerato)
 * =========================================== */
 
/* ==================
 * SPECIFICO - coupon
 *=================== */

/* =======================
 * SPECIFICO - abbonamento
 *======================== */

table#abbonamento table {
	border: 2px solid #d4d4d4;
}

table#abbonamento table td {
	vertical-align: top;
	border-top: 2px solid #d4d4d4;
}

table#abbonamento table td:first-child {
	width: 78%;
	padding-right: 2rem;
}

table#abbonamento table tr.legenda td {
	border-bottom: 2px solid #d4d4d4;
}

/* =======================
 * SPECIFICO - transazione
 *======================== */
 
/* Lista transazioni */
.listaTransazioni .dettaglio { background: #d4d4d4; }
.listaTransazioni td { border-top: 2px solid #d4d4d4; }
.listaTransazioni td:first-child {  }

.listaTransazioni .hidetr .dett,
.listaTransazioni .hidetr .importo { background: #f4f4f4; }

	/* angoli e icona dettagli della lista transazioni -
	se personalizzata, scommentare */

.listaTransazioni .hidetr div.dett {
	background-image: url(ico_generale/angolo.svg);
}
/*
.listaTransazioni .hidetr td.dett {
	background-image: url(ico_generale/angolo2.svg);
}*/

.toggle span { background: url(ico_generale/icon-dettaglio.svg) center center no-repeat; }

	/* prenotazioni e pagamenti */
	
/* nota: il carrello della transazione e il carrello
della scelta posti (sceltaPostiPub.do, versione mappa) 
dovrebbero essere differenziati graficamente */

#tabella_carrello {
	background: #ffffff;
}

#tabella_carrello th,
#tabella_carrello td {
	border-top: 2px solid #d4d4d4;
}

#tabella_carrello label {
	font-size: 0.8rem;
}

#tabella_carrello tr.totale td,
#tabella_carrello td[colspan] {
	border-top: 0;
}

#tabella_carrello tr {
	border-color: #c4dcfd;
}

#tabella_carrello th,
#tabella_carrello tr.totale td {
	background: #eb2227;
	color: #ffffff;
}

#tabella_carrello tbody tr.r0,
#tabella_carrello tbody tr.r1 {
	background: #ffffff;
	border-color: #ffffff;
}

/* Transazione con anagrafica (calcio) */
#tabella_carrello .datipartecipante .riga.anag { border: 1px solid #c4dcfd; }
#tabella_carrello .datipartecipante .riga.anag > label { color: #4e8ce1; }

#tabella_carrello td fieldset { background: transparent url(ico_generale/angolo3.svg) 3rem 0 no-repeat; }

/* =============================================
 * SPECIFICO - AGGIUNTE/OVERRIDE A jquery.ui.css 
 * ============================================= */
 
.ui-dialog-titlebar, .ui-widget-header { font-weight: 400; color: #555555; font-size: 1.5rem; }

.ui-button .ui-button-text { background-color: #810038; color: #ffffff; border-radius: 3px; -webkit-border-radius: 3px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }

.ui-state-hover { background: #d1d1d1; }

.ui-accordion .ui-accordion-header.ui-state-active, .ui-accordion .ui-accordion-header.ui-state-hover { background-color: #002f60; }
.ui-accordion .ui-accordion-header.ui-state-active { border-radius: 3px 3px 0px 0px; -webkit-border-radius: 3px 3px 0px 0px; }
.ui-accordion .ui-accordion-header.ui-state-active a:active { color: #ffffff; text-shadow: 0 0 0 transparent; }

button.ui-button, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #6699cc; }

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #ffffff !important; font-weight: 700 !important; }

/* Specificita' per elementi dentro l'accordion */
#accordion.ui-widget,
#accordion.ui-widget button,
#accordion.ui-widget input,
.ui-button .ui-button-text { font-family: 'Open Sans', arial, sans-serif; }
 
.ui-state-active a:active,
.ui-state-active a:focus { background-color: transparent; }

.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default { background: #dadada; }

.ui-accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon { background: url(ico_generale/meno.svg) center center no-repeat; }
.ui-accordion .ui-accordion-header .ui-accordion-header-icon { background: url(ico_generale/piu.svg) center center no-repeat; }

/* ===============================================
 * SPECIFICO - AGGIUNTE/OVERRIDE A fc-calendar.css 
 * =============================================== */

#calendar .fc-state-default { background: #810038; color: #FFF; }
#calendar .fc-state-default:hover {  }

#online-on { background: #E5E5E5; border: 2px solid #171717; }
#online-off { border: 2px solid #171717; }

#calendar .fc-event { background: #E5E5E5; border: 2px solid #171717; height: 25px; }
#calendar .fc-event.giorno-nodisp { background: transparent; border: 2px solid #171717; }
#calendar .fc-event:hover {  }
	
td.elimina button.icona {
	width: 2.6rem;
}

.cercaPostiPub td.riduzione div[class*="qta_"] { background: #f9f9f9; }

#cart .box { background: rgba(0, 0, 0, 0.1); line-height: 3em; }

.curr-seat p {
	background: #f1f1f1;
}

span.note.evento { display: block; margin: 5px 0px 0px 8rem; }

div.transazione3 div.box.evidenza a { color: #808080; text-decoration: none; text-shadow: none; }
div.transazione3 div.box.evidenza a:hover { background: transparent; color: #006B8C; text-decoration: none; }

div#tabprezzi h2 { border-bottom: 2px solid #d4d4d4; font-weight: 700; }
div.colore-ordine { margin: 0.3rem 0px 0px 0.3rem; border: 1px solid #ffffff; }
div#cart td.elimina button { background-color: transparent; border-width: 0px; }

div.tornasu { text-align: right; }
div.guida.sezioni { margin-bottom: 20px; }
div.guida.titolo { font-style: italic; font-weight: 700; }
div.guida.titolo h1 { font-style: normal; margin: 0px; padding: 10px; text-align: center; }


/* ==============================================
 * SPECIFICO PER PLUGIN: slicknav.js 
 * (per compattare il menu nella versione mobile)
 * ============================================== */

.slicknav_menu { display:none; }

@media screen and (max-width: 1023px) {
	.js #primariga { display: none; }
	.js .slicknav_menu { display: block; }
	#testa, #barranavigazione #lingua { display: none; }
}

.slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; }
.slicknav_menu  .slicknav_menutxt { display: block; line-height: 1.188em; float: left; }
.slicknav_menu .slicknav_icon { float: left; margin: 0px; }
.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em }
.slicknav_nav { clear: both }
.slicknav_nav ul,
.slicknav_nav li { display: block }
.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
.slicknav_nav a { display: block }
.slicknav_nav .slicknav_item a { display: inline }
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }

.slicknav_menu { font-size:16px; }

.slicknav_nav li {  }

/* Button */
.slicknav_btn {
	margin: 5px 0px;
	text-decoration: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #810038;
	background: #810038;
}

/* Button Text */
.slicknav_menu  .slicknav_menutxt {	
	color: #FFF;
	font-weight: bold;
	display: none;
}

/* Button Lines */
.slicknav_menu .slicknav_icon-bar { background-color: #FFF; }

.slicknav_menu {
	background: #FFF url(/artafiles/teatrosocjale/logo.png) no-repeat 10px 10px;
	background-size: auto 35px;
	border-bottom: 1px solid #E1E1E1;
	padding: 10px;
	position: fixed;
	width: calc(100% - 20px);
	z-index: 1000;
}
.slicknav_nav {
	color: #FFF;
	margin: 0;	
	padding: 0;
	font-size: 0.875em;
}
.slicknav_nav, .slicknav_nav ul {
	list-style: none;
	overflow: hidden;
}
.slicknav_nav ul {
	padding: 0;
	margin: 0 0 0 20px;
}
.slicknav_nav .slicknav_item {
	padding: 5px 10px;
	margin: 2px 5px;
}
.slicknav_nav a, 
.slicknav_nav a.bott.testo {
	padding: 5px 10px;
	margin: 2px 0px;
	text-decoration: none;
	text-shadow: none;
	font-size: 1.1rem;
	font-weight: 400;
	font-family: "Open Sans";
}
.slicknav_nav .slicknav_item a {
	padding:0;
	margin:0;
}
.slicknav_nav .slicknav_item:hover {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background: #CCC;
	color: #FFF;	
}
.slicknav_nav a:hover{
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background: #CCC;
	color: #424242;
}
.slicknav_nav .slicknav_txtnode {
     margin-left: 15px;   
}

.slicknav_nav ul#lingua { margin-top: 5px; }
.slicknav_nav #cliente { padding: 0px; float: none; }
.slicknav_nav #navigazione li { display: block; }

@media only screen and (min-width: 1024px) {
	
	div#testa {  }
	div#testa a img { margin-top: 20px; max-width: 750px; }
	div#contenitore { box-shadow: 0 0 3px rgba(0, 0, 0, 0.7); padding-top: 0px; width: 1024px; }
	div#content { margin: 0px 15px; padding-bottom: 20px; }
	div#footer {  }
	
	div.divtesta { background-color: #FFF; height: 200px; position: fixed; top: 0px; width: 1024px; z-index: 100; }
	div.divcontent { padding-top: 200px; }
	
	div#footer span,
	div#vivaticket a,
	div#vivaticket span { display: inline; }
	
	#barranavigazione { margin-top: -35px; }
	#lingua { float: none; position: unset; margin: 0.5rem 1rem 0 0; }
	#primariga { }
	#secondariga { float: left; padding: 0rem 0.5rem; width: auto; }
	#secondariga a {  }
	
	ol.percorso.bottom { display: block; }
	ol.percorso.top, ol.percorso.bottom {
	    width: calc(100% - 2rem);
	    margin: 1rem 0px;
	    padding: 0.5rem 1rem;
	    color: #444;
	    background-color: #F7F7F7;
	    border: 2px solid #E5E5E5;
	    -webkit-border-radius: 99px;
	            border-radius: 99px;
	}
	
	ol.percorso li {  }
	ol.percorso li.current { -webkit-border-radius: 99px; border-radius: 99px; }
	ol.percorso li:after { }
	
	#details { width: 42rem; }
	
	/* #mapContainer + #mapArea + margine = #container */
	#mapContainer { margin-left: 1rem; width: 45rem; }
	#mapContainer .map { background: #222; width: 45rem; /* uguale a mapContainer; */ }
	#mapArea { width: 15rem; }
	
}