Foglio di stile per VERANO. */
	
*{
  box-sizing: border-box;
}

body {
	background-color: #FFFFFF;	
	margin: 0px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    text-align: center;	
	overflow: auto;	
}

/* ======================================================================================================================= */


.letterecorsive {	
	font-family: "Bilbo Swash Caps", Vivaldi, serif;	
	font-size: 24px;
	letter-spacing: 1px;
	color: #0D1F61;
}

h2 {	
	margin: 20px;}
	
h3 {
	font-family: "della respira", serif;	
	font-variant: small-caps;
	text-transform: capitalize;
	color: #073C80;	
	
}	
	
hr.riga1 { 
  border-top: 1px dashed gray;
  color:transparent;
}	
	
	
	
h4 {
	font-family: "della respira", serif;
	font-variant: small-caps;
	color: #073C80;
	letter-spacing: 2px;
	margin-top: 10px;
	
}	

#contenitoreContatti {
  display: inline-block;	
  width: 100%;  
  margin-top: 0;
  padding: 0px 20px 0px 20px;  
  height: auto;
}

#contenitoreContatti a:hover {
	color: #e63900;
}

#involtoRecapiti {	
	width: 100%;	
	display: flex;	
	justify-content: space-around;
	flex-wrap: wrap;
	text-align: center;
	padding: 0px 0px 0px 0px;	
}

.bloccoindirizzo {
	display: inline-block;	
	vertical-align: top;
    margin: 0px 0px 10px 0px;	
	padding: 0px 5px 0px 10px;
	text-align: left;	
	width: 400px;
	background-color: #f1f1f1;
	box-shadow: 1px 1px 0px gray;
}

.bloccotelefoniufficio {
	display: inline-block;	
	vertical-align: top;	
	margin: 0px 0px 10px 0px;		
	text-align: left;	
	padding: 0px 5px 0px 10px;
	width: 400px;
	background-color: #f1f1f1;
	box-shadow: 1px 1px 0px gray;
}

.bloccotelefonipersonali {
	display: inline-block;	
	vertical-align: top;	
	margin: 0px 0px 10px 0px;	
	text-align: left;	
	padding: 0px 5px 0px 10px;
	width: 400px;
	background-color: #f1f1f1;
	box-shadow: 1px 1px 0px gray;
}


.involtoSociali {
	display: block;
	width: 45%;
	float: left;		
	margin: 30px 20px 20px 20px;
	overflow: hidden;	
	padding: 0px 10px 10px 10px;	
	height: auto;
	text-align: center;		
}

.gruppoSocialiDx{
  display: flex;  
  width:100%;	
  margin:6vh auto;
  height: auto;
  padding: 20px 5px 20px 5px;  
  flex-wrap: wrap;
  justify-content: space-around;
  color:#fff;
  font: 20px'Rosario', sans-serif;
  background: #58a;
  background: linear-gradient(to left bottom, transparent 50%, rgba(153,179,230,0.7) 0) no-repeat 100% 0 / 1.8em 1.8em,
    linear-gradient(-135deg, transparent 1.2em, #0d1f61 0);  
  -webkit-filter: drop-shadow(5px 5px rgba(0,0,0,0.1));
  filter: drop-shadow(5px 5px rgba(0,0,0,0.1));
}
.gruppoSocialiDx::before{
  content: ' ';
  position:absolute;
  top:1.2em; 
  right:0em;
  background: linear-gradient(transparent 60%, rgba(0,0,0,0.4) 0) 100% 0 no-repeat;
  width: 1.6em;
  height:1em;  
}
.logoSocialiSx {	
	display: inline-block;
	width: 15%;	
}
.epigrafeSocialiDx {	
	display: inline-block;
	width: 85%;	
	padding-left: 10px;
	text-align: left;	
}

.gruppoSocialiSx {
  display: flex;
  flex-direction: row-reverse;
  width:100%;
  margin:6vh auto;
  height: auto;
  padding: 20px 5px 20px 5px;  
  flex-wrap: wrap;
  justify-content: space-around;
  color:#fff;
  font: 20px'Rosario', sans-serif;
  background: #58a;
  background: linear-gradient(to right bottom, transparent 50%, rgba(153,179,230,1) 0) no-repeat 0% 0 / 1.8em 1.8em,
    linear-gradient(135deg, transparent 1.2em, #0d1f61 0);  
  -webkit-filter: drop-shadow(5px 5px rgba(0,0,0,0.1));
  filter: drop-shadow(5px 5px rgba(0,0,0,0.1));	
}
.gruppoSocialiSx::before{
  content: ' ';
  position:absolute;
  top:0em; 
  left:0em;
  background: linear-gradient(to left top, transparent 40%, rgba(0,0,0,0.1) 0) 100% 0 no-repeat;
  width: 2.2em;
  height:2.2em;
  transform: rotate(180deg)
}
.logoSocialiDx {	
    display: inline-block;	
	width: 15%;	
}
.epigrafeSocialiSx {	
	display: inline-block;	
	width: 85%;	
	padding-right: 10px;		
	text-align: right;	
}

.involtoModulo {	
	display: block;
	width: 45%;
	float: right;
	border-radius: 10px;
	background-image: linear-gradient(#f2f2f2, #d9d9d9);	
	/*background-color: #f2f2f2;*/	
	margin: 30px 20px 20px 20px;
	overflow: hidden;	
	padding: 0px 10px 10px 10px;	
	height: auto;
	text-align: left;
	box-shadow: 2px 2px 5px gray;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=email] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {  
  float: right;  
  background-image: linear-gradient(#2952a3, #0d1f61);	 
  margin: 1px 10px 1px 1px;  
  color: white;
  width: 110px;
  height: 45px;
  padding: auto;
  /*padding: 12px 40px;*/
  border-style: inset;
  border-width: 3px;
  border-color: #5c85d6;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: -1px -1px 1px gray, 1px 1px 1px white;
}

input[type=submit]:hover {
  background-image: linear-gradient(#3366cc, #122c87);	 
  border-color: #7094db;
  
}

input[type=submit]:active {  
  width: 109px;
  height: 44px;
  background-image: linear-gradient(#2952a3, #0d1f61);	   
  border-color: #5c85d6;
  margin-top: 2px;
  margin-bottom: 1px;
  box-shadow: -2px -2px 1px gray, 2px 2px 1px white;
  /*transform: translateY(2px);    */    
}

input[type=checkbox] {          
}

.checkbox {
	background-color: #d9d9d9;
	color: #d9d9d9;
}

label[for=cognome] {
	display: none;
}
input[type=text][name=cognome] {
	display: none;
}

input[type=reset] {  
  float: left;  
  background-image: linear-gradient(#2952a3, #0d1f61);	 
  margin: 1px 1px 1px 10px;  
  color: white;
  width: 110px;
  height: 45px;
  padding: auto;
  border-style: inset;
  border-width: 3px;
  border-color: #5c85d6;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: -1px -1px 1px gray, 1px 1px 1px white;
}

input[type=reset]:hover {
  background-image: linear-gradient(#3366cc, #122c87);	 
  border-color: #7094db;
  
}

input[type=reset]:active {  
  width: 109px;
  height: 44px;
  background-image: linear-gradient(#2952a3, #0d1f61);	   
  border-color: #5c85d6;
  margin-top: 2px;  
  margin-bottom: 1px;
  box-shadow: -2px -2px 1px gray, 2px 2px 1px white;

}

@media screen and (max-width: 980px) {
.involtoModulo {		
	width: 100%;
	float: none;
    margin: 30px 0px 0px 0px;	
}
.involtoSociali {
	width: 100%;
}
}

@media screen and (max-width: 480px) {
.involtoSociali {	
 padding: 0px 30px 0px 0px;
} 

.gruppoSocialiDx {
	width: 100%;	
	padding: 0px;
}

.gruppoSocialiSx{
	width: 100%;
	padding: 0px;
}

.logoSocialiSx {			
	width: 100%;	
	padding: 20px 0px 0px 0px;
}

.epigrafeSocialiDx {	
	width: 100%;
	padding: 0px 0px 0px 40px;
}
.logoSocialiDx {		
	width: 100%;	
	padding: 20px 0px 0px 0px;
}
.epigrafeSocialiSx {	
	width: 100%;
	padding: 0px 40px 0px 0px;
}
}

#contenitoremappa {		
	max-width: 100%;	
	text-align: left;
	margin: auto;
	padding: 0px 30px 0px 30px;
}
.involto-mappa {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: auto;
  /*padding-top: 56.25%; /* aspetto da 16:9; 9 diviso 16 = 0.5625 */
  padding-top: 31.25%;  /* aspetto da 16:5; 5 diviso 16 = 0.3125 */
}
.iframe-adattivo{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 980px) {
.involto-mappa {
	padding-top: 65.25%; /* aspetto da 8:5; 5 diviso 8 = 0.6525 */
}
}

#involtoFinale {
	width:100%;
	padding: 0px 20px 0px 20px;
	text-align: left;	
	
}

.contenitoreMezzi {
	max-width: 720px;
	background-color: #f1f1f1;
	padding: 5px 5px 10px 5px;
	border-radius: 15px 0px 15px 0px;
	box-shadow: 2px 2px 1px gray;
	
}

.mezzo {
	display: inline-block;
	width: 70px;
	text-align: left;
	
}

.trattino {
	display: inline-block;
	width: 8px;
	text-align: center;
	
}

.lineamezzo {
	display: inline-block;
	width: 93px;
	text-align: left;	
}

.fermataFer {
	display: inline-block;
	width: 71px;
	text-align: left;	
}

.fermataCap {
	display: inline-block;
	width: 90px;
	text-align: left;	
}
.nomeferFer {
	display: inline-block;
	width: 239px;
	text-align: left;		
}

.nomeferCap {
	display: inline-block;
	width: 220px;
	text-align: left;		
}

.nomefermata {
	font-variant: small-caps;
}

.bottoneMetrebus {
	width: 130px;
	height: 30px;
	margin: 1px;
	background-image: linear-gradient(#2952a3, #0d1f61);	 
	color: white;
}

.bottoneMetrebus:hover {
	background-image: linear-gradient(#3366cc, #122c87);
	margin: 0px;
	width: 132px;	
	height: 32px;	
}

.lineaMezzo {
	width: auto;
	max-height: 70%;
	margin-top: 3%;
	overflow-x: visible;
	overflow-y: scroll;
	background-image: linear-gradient(#f2f2f2, #d9d9d9);
	border: 2px solid;
	border-color: #0d1f61;
	padding: 0px 40px 20px 10px;
	text-align: left;
	line-height: 25px;
}

#lineaMA {	
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#linea85 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#linea87 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#linea660 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#linea663 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#linea664 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#linea671 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#linea765 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tipometro {
	font-family: "Merriweather sans", "Century Gothic";
	background-color: red;
	color: white;
	line-height: 5px;
}
/* Finestre Modali inizio */

/* Popup container - can be anything you want 
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup 
.popup .popuptext {
  visibility: hidden;
  width: 250px;
  height: 300px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  margin-top:10px; 
  
  left: 50%;
  margin-left: -125px;
  
}


/* Toggle this class - hide and show the popup 
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) 
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


/* Fine Finestre Modali */