/* HTML5 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
*{margin:0;padding:0}

/*-------------------------------*/
/*----------FORM--------------*/
body {background:#00aaaa; margin:auto;
	font-family: 'Georgia', 'Arial', sans-serif; color:#880000;	}
	
	
h3{text-align:center}
/* reset */

* {
	margin: 0;
	padding: 0;
}

a{text-decoration:none; color:#ffffff; }
ol, ul {
	list-style: none;
}

a img{
	border: none;
}

.clearfix {
	display: block;
}

.wrapper {
	max-width:1000px;
	width:95%;
	margin:0 auto;
	position:relative;
}

a.button{display:block;width: 175px;height: 35px; margin: 1em;
    text-align:center;font: bold 18px/35px "Trebuchet MS",Arial,sans-serif;
    text-decoration: none; color:#286C98;
    background: url(../images/bottone3.png) no-repeat 0 0}
a.button:hover{background-position:0 -35px;color:#98286C}



/********************************/
/* style HEADER - NAVIGATION */

#wrapper {  
    width: 97%; 
	max-width:976px; 
	margin: 0 auto;
}


.img{max-width:100%; height:auto;}



 /* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0; /*background-color:#000000; /* change if the mask should have another color then white */
	z-index:99; /* makes sure it stays on top */
	background:  #990000;/* Old browsers */ }
	
	.status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image: url(../images/loader%20rosa.gif);    /* path to your loading animation */
	background-repeat:no-repeat ; 
	background-position:center ;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/*===HEADER===*/

header
{ 
position:   relative ; 
background: transparent;
text-align:     left;
overflow:visible;  hidden;
padding:        0px 0;
padding-bottom: 1em;
}

header h1 
{
padding:                    0px;
margin:                     0 0 0 0px;
float:                      left;


}
	
/*===Navigation===*/

nav#navigation
{
clear:       both;
text-align:  left;
background:transparent;
position:    relative;
width:       auto;
z-index:     10;}

nav#navigation  ul 
{
padding:     0;
position:    relative;
list-style:  none; 
}
nav#navigation ul:after {
content: ""; 
clear: both; 
display: block;
}
nav#navigation ul li { float: left;}

nav#navigation ul li a {	
color:#ffffff; 
display:        block; 
/*font-weight:bold; */
font-size:      1em; /*grandezza voci menu*/
text-decoration:none; 
padding:       0 20px;/* spazio tra le voci del menu >  1024px */	
height:         60px; /*Se si modifica la posizione altezza menu si deve modificare anche questo numero*/
line-height:    76px; /*posizione altezza voci menu*/}
nav#navigation ul ul li {float: none;  position:relative;}
nav#navigation ul li a:hover { color: #cc0000; } /*cambio colore della voce menu*/ 
#navigation ul li a.active,#navigation ul li a.active:hover {color: #cc0000;}/*VOCE menu attiva nella pagina selezionata*/

/*IMPORTANTE  NON TOCCARE  per vedere sottomenu in table */ 
nav#navigation ul li:hover > ul { margin-left: 0px;padding: 0px;display:block; }

/*===BUTTON FOR RESPONSIVE MENU===*/
.btn-responsive-menu
{
display:                none;
padding:                5px;
cursor:                 pointer;
color:                  #fff;
background:             #fff;
-webkit-border-radius:  4px;
-moz-border-radius:     4px;
border-radius:          4px;
}

.icon-bar 			
{
display:                 block;
width:                   20px;
height:                  3px;
margin:                  5px;
background-color:       #99cccc;
-webkit-border-radius:   2px;
-moz-border-radius:      2px;
border-radius:           2px;
}


.show{display:block!important;}


/*** Footer ***/


footer {clear: both;padding:20px; background:#transparent; border-top-width:0px;border-top-style: solid;border-top-color:;font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; color:#000000 ; font-size: 0.8em;  text-align: center;list-style-type:none; margin-top:80px;/* border-bottom-width:2px;border-bottom-style: solid;border-bottom-color:#990000;*/}	
footer a{ color:#000000;text-decoration:underline; font-size:1.3em;}		
footer a:hover{color:#cc0000;text-decoration:none}
.foot{ color:#F80B0F}

footer #footer-phone{color:#9a9a9a;font-size:18px;line-height:26px}
footer #footer-email{font-family:Questrial;color:#9a9a9a;letter-spacing: .2em;margin-bottom:20px;line-height:26px}
footer #footer-email a{color:#9a9a9a}
footer #footer-email a:hover{color:#f26522;text-decoration:none}


/*===Media Queries===*/
@media screen and (max-width: 480px)
{
header h1 a
{
font-size:    20px;
}
}
 

@media screen and (max-width:800px){
	
nav#navigation
{
margin:       0 1.2em;
display:      none;/* l'elemento nav#navigation, esso non deve apparire sugli smartphone e tablet, per cui viene impostato su display: none.*/ 
top:-6px; }

nav#navigation ul li 			
{
float:        none; 
display:      block; 
width:        100%; 
}

nav#navigation  ul li a 	
{ 
height:        35px;
line-height:   35px;
font-size:     1em;
padding:       0 0 0 20px;
/*border-bottom: 1px solid #ffffff;*/
}

nav#navigation  ul li a:hover  	
{ 
color:           #cc0000;          
background:      #fff;
}

nav#navigation ul ul 
{
width:         100%;
position:      relative;
display: table; /* none se non si vogliono rendere visibile le sottovoci*/
}

nav#navigation ul ul li a	
{	
font-size:     .85em;	
height:        35px;
line-height:   35px;
padding:       0 10px 0 30px;
}

nav#navigation ul ul li a:hover 
{
color:           #cc0000;          
background:      #fff;
text-decoration: none; 
}

nav#navigation ul ul ul 
{
width:         100%;
margin:        0 0 0 -100%;	
border:        0px solid #af3738;
}	

nav#navigation ul ul li ul 
{
width:         100%;
position:      relative;
}
nav#navigation ul, li, ul { display: block;}/*voci sottomenu direzione verticale*/
#navigation ul, li, ul { margin: 0px;padding: 0px;
}
.btn-responsive-menu
{
display:      block;
position:     absolute; 
top:          12px;/*altezza pulsante*/ 
right:        20px; }

}

@media screen and (min-width:801px)
{

#wrapper {  
    width: 100%; 
	max-width:800px; 
	margin: 0 auto;
}

nav#navigation{ left:200px;top:-64px;text-align:right; }

nav#navigation ul li:hover > ul { 
margin-left: 0px;
padding: 0px;
display: inline-flex; 
}

nav#navigation ul ul {display:none;/*Il secondo menu sottovoci (ul ul), all'apertura della pagina, non deve essere visibile*/
background:    transparent;
padding:       0;
position: absolute; 
top:           100%;
left:          36px;/*posizione  voci sottomenu*/
width:         auto; 
} 
 nav#navigation ul ul li a	{height:35px;line-height:15px;padding:0 10px;}/*spazio tra le voci del sottomenu*/	
nav#navigation ul ul li a:hover{text-decoration: none; }/*voci sottomenu non sottolineate*/
}

@media (min-width: 768px) and (max-width: 850px) {
nav#navigation ul li a 	{ padding: 0 20px;/* spazio tra le voci del menu*/}

}

@media (min-width: 851px) and (max-width: 1024px) {
nav#navigation ul li a 	{ padding: 0 20px;/* spazio tra le voci del menu*/}

}






/*----------------------*/
/* INIZIO   COLONNE  */


.img{width:100%; max-width:100%; height:auto;}
#pagewrap {width: 978px;max-width: 96%;margin: 0 auto; background:#00cccc; border-top-width:2px; border-top-style:solid; border-top-color:#ffffff;  }
		.wrapper {overflow: hidden;}
		h3{margin-bottom:10px;}
		.img{ width:100%; max-width:100; height:auto;}
		.col{background:transparent;float: left;margin-left: 3.2%;margin-bottom: 30px; color:#ffffff;}
		.fullwidth .col {float: none;margin-left: 0;}
		
		/* grid2 col */
		.grid2 .col {width: 48.4%;}
		
		/* clear col */
		
		.grid2 .col:nth-of-type(2n+1) {
			margin-left: 0;
			clear: left;
		}
		
		@media screen and (max-width: 720px) {
			
			.col {
				width: 90% !important;
				margin-left: 0 !important;
				clear: none !important;
			}
		}
		
		
		
		@media screen and (max-width: 400px) {
			
			.col {
				width: 100% !important;
				margin-left: 0 !important;
				clear: none !important;
			}
		}
		
		
	/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }