body {margin: 0; padding: 0; color: #4e4e4d; background: #f9f8f5;
color: #565354;
font-family:"Exo 2", sans-serif;
height: 100%;}

.fleft {float:left;}
.fright {float:right;}
.clearb {clear: both;}
.aLeft {text-align:left;}
.aRight {text-align:right;}
.aCenter {text-align:center;}

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

.pieno {text-align:center; text-transform:uppercase;}
.vuoto {}
.hide {visibility:hidden;}
.centra {margin: 0 auto;} 
.centra50 {width:50%; margin: 0 auto;}
.centra90 {width:90%; margin: 0 auto;}
#who, #attrezzatura, #itinerari, #contentMappa, #interazione, #sponsor, #prezzi, #social, #prenota {font-weight: 200;border-bottom: 1px solid #e2e2e2;padding-bottom:10px;}
#prezzi {border-bottom:0;}
#itinerari, #contentMappa {border-bottom: 0px;}
#who h2, #attrezzatura h2, #itinerari h2, #interazione h2, #dettaglio h2, #sponsor h2, #contentMappa h2, #prezzi h2, #prenota h2 {font-weight: 300;}
#who h3, #attrezzatura h3, #itinerari h3, #prezzi h3 {font-size:1.8em;color: #08c;}
#attrezzatura img {padding: 20px 10px 0;}
#itinerari, #social {padding-top: 30px;}
.imgLogo, #interazione img {padding: 20px 0 0;}
.w5 {width:4%;}
.w10 {width:9%;}
.w15 {width:14%;}
.w20 {width:19%;}
.w25 {width:24%;}
.w33 {width:33%;}
.w40 {width:39%;}
.w45 {width:44%;}
.w47 {width:46%;}
.w48 {width:47%;}
.w50 {width:49%;}
.w51 {width:51%;}
.w52 {width:51%;}
.w53 {width:53%;}
.w55 {width:54%;}
.w60 {width:59%;}
.w66 {width:66%;}
.w75 {width:74%;}
.w80 {width:79%;}

.centra50 p, .centra p, .centra, #prezzi p, #prenota p  {line-height: 1.5em;}

.bleft {border-left: 1px solid #e2e2e2;}
.grigion {background-color: #77787a;}
.verdin {background-color: #80b13e;}
.verdon {background-color: #025c40;}
.rosso {color: #ff0000;}
.p5px {padding:5px;}

.blocco {width:520px; margin:0 auto;border-bottom: 1px dotted #d3d3d3;padding: 15px 0 0;}
.blocco h2 {margin: 5px 0;}
.iconaLeft {width:120px; height:100px;}
.box1 {height: 100px; border: 1px solid #77787a; padding: 2px;}
.maggiorato {font-size: 1.4em;}
.bollino {text-transform: uppercase; font-size: 36px; color:#f9f8f5; padding: 2px 0px; background-image: url("images/bollino48.png"); background-repeat: no-repeat; width: 5%; height:48px;font-weight: 300;
margin: 0 10px;}
/* HEADER 
#header {height: 400px;background: #75baa3 url("images/provolone01.jpg") no-repeat 0 0;background-attachment: fixed;}*/
#header {height: 400px;background-image: url("images/home7.jpg");background-attachment: fixed;}

.mainnav {
	width: 100%;
	min-width: 400px;
	margin: 0 auto;
	font-size: 14px;
	text-align:center;
	padding-top:10px;
	}
	
.mainnav a {
	text-transform: uppercase;
	letter-spacing: 1px;
	-webkit-transition: color 125ms ease-out;
	-webkit-transition-delay: 0;
	-moz-transition: color 125ms ease-out 0;
	-o-transition: color 125ms ease-out 0;
	transition: color 125ms ease-out 0;
	padding: 0 .4em;
	margin: 0 .4em;
	}	
.mainnav a.mn-main {
	color: #204a65;
	font-weight: 700;
	}
.mainnav a.mn-second {
	color: #a0b2b8;
	font-weight: 700;
	}		
.mainnav a:hover { color: #e8554e; text-decoration: none; }
.mainnav img {vertical-align:middle;}
#menuTop {position: fixed;}
/* HOME */
#content {text-align: center;}	
#itinerariCentro, #itinerariFuori {text-align: left;}
#itinerari h3 {margin-top:0;}

.titoletto {font-size: 0.8em;}	
#itinerarioMenu ul {list-style: none; margin: 0; padding: 0;}
#itinerarioMenu li {padding: 8px 0;}
#itinerarioMenu {width:48px; padding: 8px 4px; border-right: 1px solid rgb(160, 160, 160); border-bottom: 1px solid rgb(160, 160, 160); background-color:rgb(236, 236, 236); box-shadow: gray 0 1px 4px;}
#itinerarioMenu img, #itinerari img, #dettaglio img, #contentMappa img, #prenota img {opacity:0.9;}

.giorno {padding: 15px 2px 0 0;}
.azioniIt {text-transform: uppercase;font-size:0.7em; font-weight:normal;}
#footer {padding-top:20px;}
#copyright {font-size: 0.6em;padding:5px 0;}
.dx {text-align: right;}
.sx {text-align: left;}
#contentMappa, #dettaglio, #itinerario {width:100%;}
#dettaglio {padding-top:30px;}
#giorni {margin: 0 auto; padding:0}
#giorni li {
	float: left; 
	background:#08c; 
	border-radius: 50%;
	box-shadow: 
        inset 0 0 0 6px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    color:white; 
    height:66px; 
    width:66px; 
    margin: 2px 2%	; 
    font-size: 36px;
    cursor:pointer;
    transition-property: background, font-size;
    transition-duration: 0.4s, 0.2s;	}
.minore {font-size:12px; margin-top: -6px;}
#giorni li.hover {
	font-size:48px; 
	background: #e04006; 
	font-weight:400;
	line-height:38px;
	box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);}
        
/* #calendario li {display:none;} */
.calMenuSelected {font-weight:bold;}
.calMenu {text-transform:uppercase; font-size:0.8em;}
#calendario img {vertical-align: bottom;}
#calendario li {margin-bottom: 6px;font-size:0.9em;}
#calendario ul {padding:0 10px;display:none;}
.visibile {display:inline;}
#slideCalendario {height:160px; padding: 20px 0;}
#sponsor {width:100%; height: 220px; margin: 0 auto;padding-top: 30px;}
#sponsor ul {list-style: none;}
#sponsori li {width:180px; height:180px;float:left;}
.sponsor {background-color: #08c; border-radius: 50%;}	
.cerchio {background-color: rgb(202, 202, 202);
border-radius: 50%;
width: 160px;
height: 140px;
margin: 10px;
padding-top: 20px;
line-height: 12px;}
.cerchio h2 {font-size: 14px;}	
.cerchio p {font-size: 10px;}	
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
 
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}
 .ch-grid:after {clear: both;}
 
.ch-grid li {
    width: 140px;
    height: 140px;
    display: inline-block;
    margin: 1px 0px;
}	
.ch-item {
	background: #08c;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 12px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}
.ch-img-3 {background: #08c url(images/sponsor/lombardo.png) no-repeat -14px 39px;			}
.ch-img-4 {background: #08c url(images/sponsor/briko.png) no-repeat 18px 17px;}
.ch-img-1 {background: #08c url(images/sponsor/provolone.png) no-repeat -9px 12px;	}	
.ch-img-2 {background: #08c url(images/sponsor/fiorano.png) no-repeat 3px 27px;}	
.ch-info {
    position: absolute;
    background: rgba(0, 136, 204, 0.9); /*rgba(63,147,147, 0.8);*/
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
    margin: 0 00px;
    padding: 30px 0 0 0;
    height: 40px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
    color: #fff;
    padding: 5px 5px;
    font-style: italic;
    margin: 0 15px;
    font-size: 14px;
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 0.5s ease-in-out 0.3s;
}

.ch-info p a {
    display: block;
    color: #e8554e;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
.ch-item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {transform: scale(1); opacity: 1;}
.ch-item:hover .ch-info p {opacity: 1;}
.imgSocial {
border-radius:50%; 
transition: all 0.1s;
width:64px;
height:64px;
    }
.imgSocial:hover { 
margin: 4px;
width: 54px;
height: 54px;
background-color: rgba(224, 64, 6, 0.2);
border-radius: 50%;
box-shadow: inset 0 0 0 5px rgba(224, 64, 6, 0.2), 0 1px 2px rgba(0,0,0,0.1); 
}

.rigaGiorno {border-left:1px solid gray;border-bottom:1px solid gray;border-top:1px solid gray;background: white url("images/bgGiorno.jpg") repeat-y left top;}
.giorno {color: white; border-right: 1px dotted #111;width:80px; height: 80px;}
.giorno h4 {font-size: 2em; margin:0;}
.orario {width: 55px;}
#calendario {margin-top: 5px;
	border-left: 1px solid rgb(160, 160, 160);
	border-bottom: 1px solid rgb(160, 160, 160);
	/* background-color: rgb(80, 80, 80); */
	box-shadow: gray 0 1px 4px;
}
#dettagli {margin-top: 5px;
	border-right: 1px solid rgb(160, 160, 160);
	border-bottom: 1px solid rgb(160, 160, 160);
	box-shadow: gray 0 1px 4px;
	min-height: 392px;
	/* height: 392px; */
}
#calendario p {margin:0;}	
#calendario ul, #calendario, #calendario li, #giorni ul, #giorni li, #info li, #info, #contatti ul {list-style:none;}
#mappa {height: 510px;
	border-bottom: 1px solid rgb(160, 160, 160);
	box-shadow: gray 0 1px 4px;}
.itinerariGiorno p {height: 41px;
	text-align: left;
	padding: 3px 10px;}
.itinerariGiorno {background-color:white;}
.orario p {line-height: 1.5em;
	padding: 10px 0 0 3px;}
.titoloItinerario {font-weight:bold; color:#08c;font-size:0.9em;}
#info {text-align: left;}
#dataPrenotazione img {padding: 1px 4px 0 0;}
#info img {vertical-align:middle;padding: 2px 2px 3px 4px;} 
#dettagli p {font-size: 0.8em;padding: 0 8px;}
#dettagli h2, #calendario h2 {color: #08c;margin: 15px 0 10px 0;}
.titoloItinerario a {color: #08c;}
#dettagli h3 {text-transform: uppercase; font-size: 0.8em;font-weight: 300;color: #e8554e;}
#info {text-transform: uppercase; font-size: 0.8em; margin:0; padding: 0 5px 0 15px;}

#prezzi ul {list-style: none; margin: 0 0 10px; color: #e8554e; font-weight: bold;}
#prezzi {margin-top: 30px;}
#prezzi p {margin-top: 10px;padding: 20px 20px; }
#prezzi ul img {vertical-align:middle;}
.separatore {border-bottom: 1px dotted #e2e2e2; font-size: 1px; color: #f9f8f5;padding: 0 130px;}
#attrezzatura {padding-bottom:30px;}
.mainWidth {padding-top: 38px;}
.footerMenuWidth {padding-top: 6px;}
#hideShow {display: none; text-align:left; padding-left:20px;}
#hideShow h3 {color:#08c;}
.intestazioneBox {border-bottom: 1px solid #e2e2e2;}
#contatti ul img {width: 18px; padding: 0 10px;}
.question {padding-left:15px; color: #e8554e;}
.answer {padding-left:30px;}
#listaCommenti {list-style: none; margin: 0 30px 0 0;padding: 0 10px;}
#listaCommenti img {padding:0; width:18px; margin: 6px 0 0 0;}
.dettagliC {font-size:0.8em; margin: 10px 0 0;}
.utente {color:#08c; font-weight: bold;}
.data {color:#08c;font-weight: bold;}
.stelle {margin:2px 0 0;}
.commento {margin:0; padding-bottom:10px;border-bottom:1px dotted #e2e2e2;}

.rigaTop {border-top: 1px dotted rgb(200, 200, 200);}
/*#prenota {display:none;} */
#prenotaH {display:none; }
#prenotaForm {border-bottom: 1px dotted #d3d3d3;}
.bordino {border-bottom: 1px dotted #d3d3d3; padding-bottom:20px;}
#prenotaH2 {color: #e8554e; font-weight: 300; text-transform: uppercase;}
#prenota h3 {color: #08c;}
#titoloPrenotazione {color: #08c;width: 400px;}
.displayNone {display:none;}
.prenotaForm {padding-top: 20px; border-bottom: 1px dotted #d3d3d3;}
.userP {min-width: 150px; width:20%;}
.prenotaForm p, #prenotaForm p, #noteDiv {text-transform:uppercase; font-size:0.8em;}
#noteDiv {border-bottom: 1px solid #e2e2e2;}

.thumb {width:30%;opacity: 0.5;}

.langIco {width:30px;}
.unSelected {opacity:0.3;}
.eng {display:none;}

/* schermi 1024-1150 ---------- */
@media only screen and (min-width : 1024px) and (max-width : 1224px) {	
	.mainnav {font-size: 12px;}
	.mainnav a.mn-main {font-weight: 600;}
	.logo {width:180px;}

	
}
 

/* schermi 900-1024 ---------- */ 
@media only screen and (min-width : 900px) and (max-width : 1024px) {	
	body {font-size: 0.9em;}
	.giorno {width:50px;}
	.mainnav {font-size: 11px;}
	.mainnav a.mn-main {font-weight: 500;}
	.logo {width:150px;}
	.rigaGiorno {background: white url("images/bgGiorno.jpg") repeat-y -30px top;}	
	.orario {width: 40px;font-size:0.7em;}
	#header {height: 400px;background: #75baa3 url("images/provolone01.jpg") no-repeat right 0;background-attachment: fixed;}
}

/* schermi 740-900 ------------ */ 
@media only screen and (min-width : 740px) and (max-width : 900px) {	
	h4 {font-size:1.2em;}
	h2 {font-size:1.6em;}
	h3 {font-size:1.4em;}
	p {font-size:15px;}
	.giorno {width:40px;}
	.rigaGiorno {background: white url("images/bgGiorno.jpg") repeat-y -40px top;}		
	.orario {width: 30px;font-size:0.6em;}	
	.mainnav {font-size: 10px;}
	.mainnav a.mn-main {font-weight: 400;}
	#info img {display:none;}
	.logo {width:120px;}
	#header {height: 400px;background: #75baa3 url("images/provolone01.jpg") no-repeat right 0;background-attachment: fixed;}
}


/* IPAD LANDSCAPE ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {	
}

/* IPAD PORTRAIT ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}