@charset "utf-8";
html{
	margin: 0;
	padding: 0;
}

body
{
font-size: 100%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #0a0a0a;
}
a {
	text-decoration: none;
	
}

a:hover {
	text-decoration: none;
}

.container{
	margin: 0 auto;
max-width:960px;	
border: Solid 2px gray;
}
	
header{
/* IE10 */
background-image: -ms-linear-gradient(top right,#f7f7f7 0%, #b8b8b8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Opera */
background-image: -o-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #f7f7f7), color-stop(1, #b8b8b8));
 /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Regola standard */
background-image: linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
overflow: hidden;
width: auto; 
height: auto; 
position:relative;
z-index:0;
margin:0 0 2% 0;
border: Solid 1px gray;
	}



header h1 {
font : Verdana;	   
color:black;
	   font-size: 120%;
    line-height: 1%;
    margin:1% 0 2% 9%;
}

header h2 {
	font-family: Berling Antiqua, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 130.0%;
	margin: 1%;
	color:rgba(102, 102, 129, 1);
	text-align: right;
	letter-spacing: 0.9em;
	text-decoration: underline;
padding:0 0 1% 0;
	  text-shadow: 5px 5px 10px #ffffff;
	}
header img#sinistro {
	width: 6%;
	max-width: 100%;
	float: left;
	margin: 5px 15px 15px 15px;
display:block;
	}
	
/*-----------------------MENU-----------------*/
nav{width: auto;text-align: center;margin:auto;}

/*stili per la navigazione*/
nav ul{text-align: center;list-style-type: none;}
nav li{
width:19%; float:left;display: inline; margin: auto;padding: 0.5%; 
/* IE10 */
background-image: -ms-linear-gradient(top right,#f7f7f7 0%, #b8b8b8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Opera */
background-image: -o-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #f7f7f7), color-stop(1, #b8b8b8));
 /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Regola standard */
background-image: linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
margin-bottom:2px;
}
nav a{color:black;font: bold 90% Arial;text-decoration: none}
nav a:hover{color:yellow; font: normal;text-decoration: none}
nav a#activelink{color: #033;text-decoration: none}
div#base{
	display:none;
	}
/*-------------------------------------FINE MENU----------------------*/
	
.testo{width:98%;}
.messaggio {width:98%;}
.privacy {width:98%;}


hr {border: 0;height: 10px;color: #F5F5F5;background-image: url(../immagini/bordo.jpg);}

.foto_centro
{margin: 0 auto;width:50%; padding:5% 0 2% 0;overflow:hidden;box-shadow: 10px 10px 5px #888888;}

.foto_centro2
{margin: 0 auto;width:70%; padding:5% 0 2% 0;overflow:hidden;box-shadow: 10px 10px 5px #888888;}

.largotrenove{width:63%;padding:0;}
.largocinquesette{width:39%;padding:0;}
.spaziozero{padding:0;}
.foto_slide /*per slide*/
{margin: 0 auto;width:94%; padding:5% 0 2% 0;overflow:hidden;}
.tre_su_riga {width: 24%; max-width: 100%;}/*per slide*/

img{
	width: 100%;
	max-width: 100%;
}
.img{
	width: 100%;
	max-width: 100%;
}
.bordo {border: Solid 4px gray;}
.bordonero {border: outset 4px black;}
img#sinistro {
	width: 27%;
	max-width: 100%;
	float: left;
	margin: 5% ;
display:block;
	}
img#destro {
	float: right;
		margin: 5%;
	width: 27%;
	max-width: 100%;
	display:block;
}
img#stella {
	float: left;
		margin: 2%;
	width: 11%;
	max-width: 100%;
	display:block;
}
img#bandiera {
	float: right;
		margin: 2%;
	width: 11%;
	max-width: 100%;
	display:block;
}
.dimensione36{float: right;
		margin: 5%;
	width: 36%;
	max-width: 100%;
	display:block;border: Solid 2px gray;
	box-shadow: 10px 10px 5px #888888;
	}

.tasto_link{margin: 0 auto; width:9%;float:right;padding:3%;}
.tasto_linksx{margin: 0 auto; width:9%;float:left;padding:3%;}
.grande_sx{margin: 0 auto; width:35%;height:auto; float:right;padding:3%;border: Solid 2px gray;}
.grande_dx{margin: 0 auto; width:52%;height:150px;float:right;padding:3%;border: Solid 2px gray;}

/* Wrap responsive */
.googlemap_wrap  {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
/* iframe posizionato in maniera assoluta */
.googlemap_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*---------------------tabella---------------------------*/
table{width:85%; border: Solid 1px gray; margin:0 auto;}
caption { font-weight:bold;  margin: 5% 0 2% 0;}
input{width:auto;/* float:right; */ margin-bottom:2px; margin-right:2px;}
.sx{float:left;width:40%}
.p3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
        color: black;
        text-align: center;
        line-height: 20px;
background-color: #f7f7f7;
		}
.p4 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
        color: RED;
        text-align: center;
        line-height: 20px;
border: Solid 1px gray;
		}
.p5 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
        color:black;
        text-align: center;
        line-height: 20px;
}


/*-----------------------------------------------------------------------------*/

.box{
	background-color:white; 
	float: left; 
	width: 33.1%; 
	height: auto; 
	position:relative;
	border: Solid 1px gray;
	}
	.box_largo{
	background-color:white; 
	float: left; 
	width: 49.7%; 
	height: auto; 
	position:relative;
    border: Solid 1px gray;
	}

	
.cella{
float: left; 
	width: 99.9%; 
	height: auto; 
	position:relative;
margin:0 0 0 0;
	border-top: Solid 1px gray;
	border-bottom: Solid 1px gray;
	text-align: center; /* orizzontale */
    line-height: 152%; /* verticale */
	font : Arial;	 
	font-size:84%; 
	color:black; 
	}

.cella_unica{
width: 99.9%; 
	height: auto; 
	position:relative;
margin:0 auto;
	border-top: Solid 1px red;
	border-bottom: Solid 1px red;
	text-align: center; /* orizzontale */
font-size:84%; 

	}
	
.cella_pic{
	float: left; 
	width: 46%; 
	height: auto; 
	position:relative;
margin:0 auto;
	padding:2%;
	overflow:hidden;
text-align: center; /* orizzontale */
  font-size:84%; 
}
	
.venti{width: 16%; }
.ventuno{width: 21%; }
.ventinove{width: 29.2%; }

.cella_video{
	float: left; 
	width: 46%; 
	height: auto; 
	position:relative;
margin:0 auto;
	padding:2%;
	overflow:hidden;
text-align: center; /* orizzontale */
  font-size:84%; 
}

.allinea_centro {vertical-align:middle;}

h1 { font : 100% Verdana, Geneva, Arial;
color: black; 
}
h2 {
font : 100% Verdana, Arial, Geneva, Helvetica, sans-serif;
color : black; padding:0 2% 0 2%;
}
.margine_sup {margin:10% 0 0% 0;}

p {margin-top:2%}
h3 {
font : 100% Verdana, Arial, Geneva, Helvetica, sans-serif;text-align:center; padding:0 1% 0 1%;
}
footer {
	width:960px;
	height: auto;
	background: #b8b8b8; /* non-css3 browsers */
/* IE10 */
background-image: -ms-linear-gradient(top right,#f7f7f7 0%, #b8b8b8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Opera */
background-image: -o-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #f7f7f7), color-stop(1, #b8b8b8));
 /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
 /* Regola standard */
background-image: linear-gradient(top right, #f7f7f7 0%, #b8b8b8 100%);
overflow:hidden;
	border-top: Solid 3px gray;
	margin:0 auto;
	color:#FFFFFF;
	overflow: hidden;
    position: relative;
padding: 1% 0 1% 0;
	text-align: center;
	}
footer h2 { line-height:145%;color : black;font-size: 67%; padding:2px;}
footer a { color : black;font-size: 91%; }
footer h4 { color : black;font-size: 90%; }

.big-img {
 background: white; /* non-css3 browsers */
float: left; 
	width: 33.1%; 
	
	position:relative;
	border: Solid 1px gray;
 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#b8b8b8'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#b8b8b8)); /* Safari, Opera, Chrome,.. */
background: -moz-linear-gradient(top,  #f7f7f7,  #b8b8b8); /* firefox 3.6+ */
overflow:hidden;}


.required {color: #F67E8F;}
#formILC{/* margin:3em auto; */width: 70%;}
#formILC label{display:block;font-size: 80%;width: 99.9%;}
input, textarea, select{display:block; border: 1px solid #ccc; padding: 2px; font-size: 14px; border-radius: 3px; }
input.error, textarea.error {border: 2px solid #F67E8F;}
p.error{background-color: #F67E8F;border:2px solid #F00;color:#660D1E;font-size:105%;margin:3em auto;padding:1em 4em;width:25%;}
p.validate{background-color: #7EF68F;border:2px solid #0F0;color:#0D661E;font-size:105%;margin:3em auto;padding:1em 4em;width: 100%;}



/*=========================================
	Media Queries
=========================================*/
/* Step 2, quando il contenitore principale diventa pi? piccolo. --------------------------------------------------------------------------*/
@media screen and (max-width: 999px) {

header h1 {font-size: 70%;line-height: 1%;margin: 5% 0 0 0%;}
header h2 { margin: 3% 0 0 29% ; }
header img#sinistro {width: 11%;}
nav{margin:11% 0 1% 0;padding: 1%;}
navi li{width:46%; margin: 0 0 2% 0.8%;padding: 0.5%; border: Solid 1px #FFFFFF;height:10%;}
navi a{color:black;font: bold 75% Arial;text-decoration: none}
img{width: 100%;max-width: 44%;}
.box{width: 100%;}
.box_largo{width: 98.7%; }	
.cella{border-bottom: Solid 1px red;margin-bottom: 3px;}
footer {width:100%;}
footer h2 { font-size: 67%; }
.ventinove{width: 44.9%; }
.cella_pic{float:none;}

.big-img {
 background: white; /* non-css3 browsers */
float: left; 
	width: 100%; 
	}
div#base{clear:both; display:block; width: 100%;text-align: center;margin:11% 0 1% 0;padding: 1%;}
	}
/*stili per la navigazione*/
div#base ul{margin:0;padding: 1%; list-style-type: none;}
div#base li{width:46%; float:left;display: inline; margin: 0 0 2% 0.8%;padding: 0.5%; border: Solid 1px #FFFFFF;line-height:0.5%;
background: #b8b8b8; height:10%;/* non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#b8b8b8'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#b8b8b8)); /* Safari, Opera, Chrome,.. */
background: -moz-linear-gradient(top,  #f7f7f7,  #b8b8b8); /* firefox 3.6+ */} /*nota display: inline*/

div#base a{color:black;font: bold 60% Arial;text-decoration: none}
div#base a:hover{color: yellow;text-decoration: underline}
div#base a#activelink{color: #033;text-decoration: none}
.tasto_link{margin: 0 auto; width:9%;float:right;padding:3%;}
.tasto_linksx{margin: 0 auto; width:9%;float:left;padding:3%;}



/* Step 3, quando il layout diventa fluido ---------------------------------------------------------------------------*/
@media screen and (max-width: 719px) {

header h1 {font-size: 70%;line-height: 1%;margin: 5% 0 0 0%;}
header h2 {font-size: 86%; margin: 3% 5% 0 5% ; }
footer h2 { font-size: 67%; }
img{width: 100%;max-width: 100%;}
.box{width: 100%;}
.box_largo{width: 98.7%; }	
.cella{border-bottom: Solid 1px red;margin-bottom: 3px;}
nav{margin:1% 0 1% 0;padding: 1%;}
nav li{width:46%; margin: 0 0 2% 0.8%;padding: 0.5%; border: Solid 1px #FFFFFF;height:10%;}
nav a{color:black;font: bold 75% Arial;text-decoration: none}
footer {width:100%;}
.big-img {
 background: white; /* non-css3 browsers */
float: left; 
	width: 100%; 
	}
div#base{clear:both;display:block; width: 100%;text-align: center;margin:11% 0 1% 0;padding: 1%;}
}
 /*stili per la navigazione*/
div#base ul{margin:0;padding: 1%; list-style-type: none;}
div#base li{width:46%; float:left;display: inline; margin: 0 0 2% 0.8%;padding: 0.5%; border: Solid 1px #FFFFFF;line-height:0.5%;
background: #b8b8b8; height:10%;/* non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#b8b8b8'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#b8b8b8)); /* Safari, Opera, Chrome,.. */
background: -moz-linear-gradient(top,  #f7f7f7,  #b8b8b8); /* firefox 3.6+ */} /*nota display: inline*/

div#base a{color:black;font: bold 60% Arial;text-decoration: none}
div#base a:hover{color: yellow;text-decoration: underline}
div#base a#activelink{color: #033;text-decoration: none}

 
/* Step 4, tutti gli elementi hanno la stessa dimensione. In questo modo, gli utenti mobili possono utilizzare il sito. */
@media screen and (max-width: 479px) {

h2 {
font : 80% Verdana, Arial, Geneva, Helvetica, sans-serif; padding: 0 5% 5% 5% ;
}
h3 {
font : 80% Verdana, Arial, Geneva, Helvetica, sans-serif;text-align:center; padding: 0 5% 5% 5% ;
}

header h1 {font-size: 78%;line-height: 134.5%;text-align:center;
}
header h2 {font-size: 100.0%;
}
header img#sinistro {width: 13%;}
.foto_centro
{margin: 0 auto; width:90%;padding:0, 3%,0,0;}
.foto_centro2
{margin: 0 auto;width:90%;overflow:hidden;box-shadow: 10px 10px 5px #888888;}
img#sinistro {width: 35%;}
img#destro {width: 35%;}



.foto_slide /*per slide*/
{margin: 0 auto;width:94%; padding:5% 0 2% 0;overflow:hidden;text-align:center;}
.tre_su_riga {width: 37%;}/*per slide*/


nav{margin:auto;padding:0;}
nav li{width:46%; margin: 0 0 2% 0%;padding: 0.9%; border: Solid 1px #FFFFFF;height:10%;line-height:0.5%;}
nav a{color:black;font: bold 0.9em Arial;text-decoration: none}

table{width:98%; border: Solid 1px gray; margin:0 auto;}
input{width: auto;
/* float: right; */
margin-bottom: 2px;
margin-right: 5px;}
.tasto_link{ margin: 0 0 3% 0; width:20%;}
.tasto_linksx{ margin: 0 0 3% 0; width:20%;float:left;padding:3%;}
caption { font-size:0.9em; font-weight:bold; margin: 5% 0 2% 0;}

footer {width:100%;}
footer h2 { font-size: 67%; }

.cella_video{width: 97%;padding:0;}
.venti{width: 44%; }
.ventuno{width: 45%; }
.ventinove{width: 92.9%; }

.bordo {border: Solid 1px gray;}
.bordonero {border: Solid 1px black;}
div#base{clear:both;display:block; width: 100%;text-align: center;margin:11% 0 1% 0;padding: 1%;}

/*stili per la navigazione*/
div#base ul{margin:0;padding: 1%; list-style-type: none;}
div#base li{width:46%; float:left;display: inline; margin: 0 0 2% 0.8%;padding: 0.5%; border: Solid 1px #FFFFFF;line-height:0.5%;
background: #b8b8b8; height:10%;/* non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#b8b8b8'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#b8b8b8)); /* Safari, Opera, Chrome,.. */
background: -moz-linear-gradient(top,  #f7f7f7,  #b8b8b8); /* firefox 3.6+ */} /*nota display: inline*/

div#base a{color:black;font: bold 60% Arial;text-decoration: none}
div#base a:hover{color: yellow;text-decoration: underline}
div#base a#activelink{color: #033;text-decoration: none}
}
