/* Alegreya fonts*/
@font-face {
  font-family: 'Alegreya';
  src: url(fonts/Alegreya/AlegreyaSans-Regular.ttf);
  font-style: normal;
  font-weight: 400; }
@font-face {
  font-family: 'Alegreya';
  src: url(fonts/Alegreya/AlegreyaSans-Medium.ttf);
  font-style: normal;
  font-weight: 500; }
@font-face {
  font-family: 'Alegreya';
  src: url(fonts/Alegreya/AlegreyaSans-Bold.ttf);
  font-style: normal;
  font-weight: 600; }
@font-face {
  font-family: 'Alegreya';
  src: url(fonts/Alegreya/AlegreyaSans-Light.ttf);
  font-style: normal;
  font-weight: 300; }
@font-face {
  font-family: 'Alegreya';
  src: url(fonts/Alegreya/AlegreyaSans-Thin.ttf);
  font-style: normal;
  font-weight: 200; }
body { 
	line-height: 1.25em;
	font-family: 'Alegreya', sans-serif;
	background-image:url(files/sfondo.jpg); background-attachment: fixed; background-repeat:no-repeat;
	color: #555;
	margin:0;
	padding:0;
}
nav {
display: none;
	float: right;
	padding: 20px;	
	margin-top:-95px;
	
}
.daticam {
    position: relative;
    top: -18px;
    background: rgba(90, 90, 90, 0.6);
    width: 140px;
    height: 18px;
    color: white;
    font-size: 12px;
}
.iframe-container {
  overflow: hidden;
	width:100%;
  /* 16:9 aspect ratio */
  padding-top: 56%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0px;
   position: absolute;
   top: 0px;
   width: 98%;
}
img {
   opacity: 1;
   transition: opacity 0.3s;
}
img[data-src] {
   opacity: 0;
}
.bordodata {
font-family: 'Alegreya';
font-size: 15px;
border: aqua;
border: solid 3px #DDD;
border-style: groove;
background-color: white;
}
.bordodata2 {
font-family: 'Alegreya';
font-size: 15px;
border: aqua;
border: solid 3px #DDD;
	padding: 4px;
background-color: green;
	color: white;
	font-weight: bold;
}
#menu-icon {

	display: hidden;
	width: 40px;
	height: 40px;
	background: #003966 url(files/menu-icon.png) center;

}

a:hover#menu-icon {

	background-color: #444;
	border-radius: 4px 4px 0 0;

}

ul {

	list-style: none;

}

li {
font-family: 'Alegreya', sans-serif;
	color: #555;
	display: inline-block;
	float: left;
	text-decoration: none;
	padding: 15px;
	font-size: 16px;
	text-shadow: 2px 1px #FFFFFF;

}
li a{
font-family: 'Alegreya', sans-serif;
	color: #555;
	text-decoration: none;
	font-weight: 500;


}

.tabella-princ { 
	max-width: 1280px;
	width: 90%;
	font-family: 'Alegreya';
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	}
.larghezzamenulato { 
	width: 280px;
		}
.cella-alta {
height: 45px;
background-color: #00A94E;
padding: 0 15px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	z-index: 100;
}
.link-lato {
	font-family: 'Alegreya';
font-size: 18px;
	line-height: 35px;
color: #263238;
	text-decoration: none;
}
.link-lato:hover {
color: #000;
	text-decoration: none;
}
.divh2 {
    z-index: 1;
    margin-left: 5px;
    margin-right: 5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 1px;
    padding: 5px;
    font-size: 15px;
}
.divh2:before,
.divh2:after {
content: " ";
display: block;
width: 100%;
position: absolute;
top: 50%;
left: 0;
z-index: -1;
margin-top: -1px;
border-bottom: 1px solid #777777;
}
.sottotitolo {
    display: inline-block;
    background: #777777;
    padding: 3px 10px;
}
.testo-primariga {
font-size: 16px;
color: #FFF;
	font-weight: 300;
font-family: 'Alegreya';
}
.titolo-sezione {
    font-size: 24px;
    color: #666;
    font-family: 'Alegreya';
    border-bottom: solid 1px #CCC;
    line-height: 40px;
    margin-top: 15px;
	text-indent: 20px;
}
.testo {
    font-size: 14px;
    color: #666;
    font-family: 'Alegreya';
}
.tempdecimale {
    font-size: 9px;
    color: #666;
    font-family: 'Alegreya';
}
.tempgrassetto {
    font-size: 16px;
    color: #666;
    font-family: 'Alegreya';
	font-weight: 700;
}
.raingrassetto {
    font-size: 16px;
    color: #666;
    font-family: 'Alegreya';
	font-weight: 700;
}
.raindecimale {
    font-size: 9px;
    color: #666;
    font-family: 'Alegreya';
}
.temperatura {
    font-family: 'Alegreya';
    font-size: 58px;
    color: #FFFFFF;
    position: relative;
    top: 78px;
    height: 40px;
    width: 165px;
	left: 87%;
margin-top: -40px;
    text-shadow: #333 1px 1px 1px;
}
.logoa {
    position: relative;
    top: 18px;
	left: 45%;
margin-top: -35px;
	width:300px;
}
.titolo-pagina {
color: #fff;
line-height: 35px;
	font-weight: 400;
}
.cella2 {
background-color: #003966;
padding: 1px 30px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.cella-foot {
padding: 15px;
text-align: center;
background-color: #cfd8dc;
}
.respocell {
		display:none;
}
.respodesk {
}
.loader {
  border: 16px solid #CCC;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 90px;
  height: 90px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.titolocella {
    background-color: rgba(0,0,0,0.0);
    height: 40px;
    border-bottom: 2px solid #ccc;
}
.topnav {
  background-color: #f5f5f5;
  overflow: hidden;
	max-width: 620px;
	align-content: center;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #263238;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #00A94E;
  color: white;
}

.rightnav {
  background-color: #EFEFEF;
  overflow: hidden;
	max-width: 620px;
	align-content: center;
}
.bottomnav {
  background-color: #EFEFEF;
  overflow: hidden;
	max-width: 620px;
	width: 160px;
	align-content: center;
	text-align: center;
}

/* Style the links inside the navigation bar */
.rightnav a {
  display: block;
  color: #263238;
  text-align: left;
	line-height: 50px;
  text-decoration: none;
  font-size: 17px;
}
.bottomnav a {
  display: block;
  color: #263238;
	line-height: 30px;
  text-decoration: none;
  font-size: 16px;
	align-content: center;
	text-align: center;
}

/* Change the color of links on hover */
.rightnav a:hover {
  background-color: #FFF;
}
.bottomnav a:hover {
  background-color: #FFF;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #00A94E;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
	.topnav {
  max-width: 300px
}
  .topnav.responsive {position: relative; max-width: 300px}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.bordoalto {
    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #CCC;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    border-left-color: #CCC;
}
.titolotabella {
    font-family: Alegreya, "Trebuchet MS", "Times New Roman";
    font-size: 20px;
    color: #666;
}
.temp {
    font-family: Alegreya, "Trebuchet MS", "Times New Roman";
    font-size: 32px;
    color: #444;
}
.scrittine {
    font-family: Alegreya, "Times New Roman", "Trebuchet MS";
    font-size: 12px;
    color: #777;
}
.valori {
    font-family: Alegreya, "Trebuchet MS", "Times New Roman";
    font-size: 16px;
    color: #444;
}
.max {
    font-family: Alegreya, "Trebuchet MS", "Times New Roman";
    font-size: 16px;
    color: #C60000;
}
.blu {
    font-family: Alegreya, "Trebuchet MS", "Times New Roman";
    font-size: 16px;
    color: #3C4FDB;
}
.valori2 {
    font-family: Alegreya, "Trebuchet MS", "Times New Roman";
    font-size: 19px;
    color: #444;
}
.avvisi {
    font-family: Alegreya, "Trebuchet MS", "Times New Roman";
    font-size: 14px;
    font-weight: normal;
    color: #000000;
}
.tabest {
    display: block;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    margin: 0 0 0px;
    padding: 5px;
    text-decoration: none;
}
.tabellaext2 {
    background-color: rgba(0,0,0,0.0);
}
.testotitolo {
     font-family: Alegreya, "Trebuchet MS", "Times New Roman";
    font-size: 14px;
    color: #444;
    text-decoration: none;
    line-height: 20px;
    font-weight: bold;
}
@media only screen and (min-width : 1280px) {
	
}

@media only screen and (max-width : 987px) {
	.tabella-princ { 
	max-width: 900px;
	width: 90%;
	}
}

@media only screen and (max-width : 640px) {
	.tabella-princ { 
	width: 100%;
	}
	.temperatura { 
	display: none;
	}
	.logoa {
    display: none;
	}
	.respocell {
	display:contents;	
}
.respodesk {
	display:none;
}
#menu-icon {

		display:inline-block;

	}
	
	nav  {display: inline-block; }
nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #FFF;
		border: 5px solid #444;
		right: 20px;
		top: 60px;
	color: #555;
		width: 50%;
		border-radius: 4px 0 4px 4px;
	text-decoration: none;

	}

	nav li {
display: inline-block;
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
		color: #555;
		text-decoration: none;

	}

	nav:hover ul {

		display: block;

	}
	.testo-primariga {
font-size: 14px;
}
	.titolo-pagina {
font-size: 24px;
}
	.cella2 {
padding: 1px 0px 1px 10px;
}
	.larghezzamenulato { 
	width: 0px;
		}
}