@charset "utf-8";
/* CSS Document */

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

/* style personali */
body { background:#00aaaa; margin:auto;
	font-family: 'Georgia', 'Arial', sans-serif; color:#ffffff;/*rgba(252,252,252,1.00);*/	
   }
	
#wrapper {  
    width: 97%; 
	max-width:800px; 
	margin: 0 auto;
}


.prod{color:#00aaaa}
a{text-decoration:none; color:#ffffff; font-size:1em; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif}	
a:hover {
	color: #F60;}

h3 { color:#00aaaa }
p {margin: 0 0 2px; text-align:center; }

	/* 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 14px;/* spazio tra le voci del menu >  1024px */	
height:        10px; /*Se si modifica la posizione altezza menu si deve modificare anche questo numero*/
line-height:    66px; /*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:       #00aaaa;
-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;font-size:1.3em;;text-decoration:underline;}		
footer a:hover{color:#cc0000;text-decoration:none}
.foot{ color:#990000}
.border{border-top-color:transparent; }
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}


/*  PULSANTE   */

#button {
	cursor:pointer;
	width:100%; text-align:center;
	border: none;
	background:#00aaaa;
	background-image:linear-gradient(bottom, #0099cc 0%, #00ccff 52%);
	background-image:-moz-linear-gradient(bottom, #0099cc 0%, #00ccff 52%);
	background-image:-webkit-linear-gradient(bottom, #0099cc 0%, #00ccff 52%);
	color:#ffffff; 
	margin:0 0 5px;
	padding:10px; 
	
}
#button:hover {
	background-image:linear-gradient(bottom, #9C215A 0%, #009999 52%);
	background-image:-moz-linear-gradient(bottom, #9C215A 0%, #009999 52%);
	background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #009999 52%);
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#button:active {
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}



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



}
 
@media screen and (max-width:800px){
#wrapper { margin-bottom:100px !important  }
	
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 14px;/* spazio tra le voci del menu*/}




}

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

}



/*******************************************************
/*      SHOP  */  
/*******************************************************/

#pagewrap {
	width: 978px;
	max-width: 96%;
	margin: 0 auto;
}
.wrapper {
	overflow:  hidden; }

.img{max-width:100%; width:100%; height:auto;} 
.red{color:#F9090D}
.col {
	background:transparent;
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;
	
}
.fullwidth .col {
	float: none;
	margin-left: 0;
}
/* grid4 col */
.grid4 .col {
	width: 22.6%;
}

/* clear col */
.grid4 .col:nth-of-type(4n+1)
 {
	margin-left: 0;
	clear: left;
}

/************************************************************************************
MEDIA QUERIES SHOP
*************************************************************************************/

@media screen and (max-width: 740px) {
	/* grid4 */
	.grid4 .col {
				width: 31.2%; 
		
			}
			.grid4 .col:nth-of-type(4n+1) {
				margin-left: 3.2%;
				clear: none;
			}
			.grid4 .col:nth-of-type(3n+1) {
				margin-left: 0;
				clear: left;
			}
		}
  
	@media screen and (max-width: 600px) {
			/* grid4 */
			.grid4 .col {
				width: 48.4%;
			}
			.grid4 .col:nth-of-type(3n+1) {
				margin-left: 3.2%;
				clear: none;
			}
			.grid4 .col:nth-of-type(2n+1) {
				margin-left: 0;
				clear: left;
			}
}
@media screen and (max-width: 400px) {
			/* grid4 */
			.col {
				width: 100% !important;
				margin-left: 0 !important;
				clear: none !important;
			}
		}
		


/*******************************************************
/*      PRODOTTO  */  
/*******************************************************/

#wrap {
	width: /*1000px;*/978px;max-width: 96%; margin: 0 auto; background:#00cccc; background:#ffffff; color:#009999; font-size:1em;padding:10px; } /* border: 2px solid #ffffff;*/
.text{ text-align:}	
.wrapper {
	overflow:  hidden; }
		
.colonna{background:transparent;float: left;margin-left: 3.2%;margin-bottom: 30px;}
.fullwidth .colonna {float: none;margin-left: 0;}
				
/* grid2 col */
		.grid2 .colonna {width: 48.4%;}
		
.grid2 .colonna:nth-of-type(2n+1) {
			margin-left: 0;
			clear: left; 
		}	
p{text-align:left}		
.img{max-width:100%; width:100%; height:auto;} 	



@media screen and (max-width: 400px) {
			/* grid2 */
		 .grid2	.colonna {
				width: 50% !important;
				margin-left: 0 !important;
				clear: none !important;
				font-size:0.75em;
			}
		}	

		
@media screen and (max-width: 719px) {
			/* grid2 */
		 .grid2	.colonna {
				width: 80% !important;
				margin-left: 0 !important;
				clear: none !important;
			}
		}
		
/************************************************/
/****************NOTE LEGALI ********************/	
		
.fullwidth .colonna {float: none;margin-left: 0; color:#009999; text-align:justify }

#box {
	
	box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #ffffff;
	-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #ffffff;
	-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #ffffff;
	border:1px solid #ff9999; /*colore bordo form*/
	background:#ffffff; 
	margin:0 0 5px;
	padding:10px;
	border-radius:5px; margin-top:20px;margin-bottom:20px;
}