@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    font-family: "Lato", Arial, Tahoma, sans-serif;	
	margin: 0;
	padding: 0;
	color: #333;
	background-color:#fff
}

a img { 
	border: none;
}

.container {
	width: 100%;
	max-width: 1920px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	background-color: #fff;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

.header {
	text-align:center

}
.header img {
	width:auto
}

.centro {
	margin:0 10%;
	max-width:1600px;
	text-align:center
}
.left {
	float: left;
	width: 50%;
	padding-bottom: 40px;
	text-align:center;
	/*min-width:350px;*/
}
.right {
	padding-bottom: 40px;
	width: 50%;
	float: left;
	text-align:center;
	/*min-width:350px;*/
}
.immagine-indice{
	position:relative;
	border: 2px solid #FF8E03;
}
.left .immagine-indice{
	margin-right:5%;
}
.right .immagine-indice{
	margin-left:5%;
}
.immagine-indice img{
	width:100%
}
.velo{
	/*position:absolute;*/
	left:0;
	bottom:0;
	width:100%;
	/*height:20%;*/
	background-color:#05061B;
	opacity:0.8;
	z-index:1;
	padding:10px 0;
	font-size:110%;
	font-size:1.7vw;
	text-transform:uppercase;
}


.grande, .grande a{
		font-size:113%;
	font-size:2vw;
		font-weight:700;
		text-decoration:none;
		color:#fff
}
@media only screen and (min-width:1720px){
	.velo{	
		font-size:170%;
	}
.grande{
		font-size:110%;
}
.entra{
    font-size: 160%;
}
}
@media only screen and (max-width:950px){
	.centro {
		margin:0 20%;
	}
	.left, .right{
		width:100%;
	}
	.left .immagine-indice{
		margin-right:0;
	}
	.right .immagine-indice{
		margin-left:0;
	}
	.velo{	
		font-size:2.6vw;
	}
.grande{
		font-size:3vw;
}
.entra{
    font-size: 2.2vw;
}
}
@media only screen and (max-width:580px){
	.centro {
		margin:0 5%;
	}
	.velo{	
		font-size:3.3vw;
	}
.grande{
		font-size:3.9vw;
}
.entra{
    font-size: 3vw;
}
}


.footer {
	padding: 10px 0;
	background-color: #fff;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	text-align:center;
	    color: #666;
}
.footer a {
    color: #555;
	text-decoration:none
}
.footer a:hover {
	text-decoration:underline
}
.footer img {
	/*width:20%;*/
	max-width:200px;
}



@font-face{font-family:'mfn-icons';src:url(fonts/mfn-icons.eot?23391439);src:url(fonts/mfn-icons.eot?23391439#iefix) format("embedded-opentype"),url(fonts/mfn-icons.woff?23391439) format("woff"),url(fonts/mfn-icons.ttf?23391439) format("truetype"),url(fonts/mfn-icons.svg?23391439#mfn-icons) format("svg");font-weight:400;font-style:normal}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "mfn-icons";
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: none!important;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
}
.icon-facebook-circled:before {
    content: '\f30d';
}
.icon-gplus-circled:before {
    content: '\f059';
}
.icon-twitter-circled:before {
    content: '\f30a';
}
.icon-pinterest-circled:before {
    content: '\f313';
}
.icon-linkedin-circled:before {
    content: '\f319';
}