//Importo File Esterni
@import "lesshat";
@import "mixin";
@import "grid";
@import "fonts";
@import "sticky-footer";

/**********************/
/* Variabili Progetto */
/**********************/

//Caratteri
@rubber: 'MailartRubberstampRegular', serif;
@delphin: 'Delphin', serif;
@match-reg: 'MatchwoodWFRegular', serif;
@match-bold: 'MatchwoodBoldWFRegular', serif;

//Colori
@rosso:#9F0E12;

//Dimensioni


/*******************/
/* Inizio Progetto */
/*******************/
body{
	background:url(../img/background.png) repeat-y center top;
	.no-margpad;
	font-size:100%;
}

.grey{
	background:#B9B9B9;
	text-align:center;
}

h1, h2, h3, h4{
	font-family:@match-bold;
	color:#fff;
	font-weight:normal;
	font-size:187.5%;
}
p{
	font-family:@delphin;
	color:#000;
}

.container{
	width:1050px;
	margin:0 auto;
}

a{
	.transition(all, 0.3s);
	text-decoration:none;
}

.match-reg{
	font-family:@match-reg;
}
.rosso{
	color:@rosso;
}

// Header
header{
	background:#000;
	height:auto;
	.box-shadow(1px 1px 5px rgba(50, 50, 50, 0.75));
	text-align:center;
	padding:15px 0;
	a{
		img{
			max-width:100%;
		}
	}
}

//Tagline
section#tagline{
	padding:10px 0;
	text-align:center;
	h2{
		font-size:312.5%;
		color:#000;
		font-family:@rubber;
		padding-right:10px;
		.match-reg{
			font-size:86%;
		}
		.rosso{
			span{
				font-size:86%;
			}
		}
	}
}

//PayOff
section#payoff{
	padding:30px 0;
	text-align:center;
	h2{
		font-size:312.5%;
		color:#000;
		font-family:@rubber;
		line-height:70%;
		text-indent:80px;
		.border{
			border-bottom:solid 4px @rosso;
			.span{
				font-size:80%;
			}
			.rosso{
				font-size:100%;
			}
		}
		.web{
			font-size:36%;
		}
	}
}

// Main
section#main{
	padding:20px 0;
	article{
		text-align:center;
	}
}

//Home
article.home{
	p{
		color:#fff;
		line-height:25px;
		font-style:italic;
	}
}
article{
	.pergamena{
		img{
			max-width:100%;
		}
	}
}

//Pagine Prodotti
.prodotti{
	article{
		margin-top:100px;
		.bottiglia{
			img{
				max-width:100%;
			}
		}
	}
	.left{
		.scheda{
			width:50%;
			text-align:right !important;
			margin:0 auto;
			h2{
				font-family:@rubber;
				font-size:187.5%;
				margin-top:100px;
			}
			h3{
				font-family:@rubber;
			}
			p{
				margin-top:20px;
				a{
					color:#000;
					&:hover{
						color:#fff;
					}
				}
			}
		}
	}
	
}

//Contatti
#map{
	width:300px;
	height:400px;
	float:right;
	border:5px solid #857661;
	iframe{
		height:400px;
	}
}

/* ACCORDION MENU STYLES */
#accordian{position:absolute;top:180px;z-index:5;left:50%;margin-left:-96.5px;width:193px;color:#fff;text-align:center;}
#accordian-top{background:url(../img/back-menutop.png) no-repeat;width:193px;height:80px;}
#accordian-bottom{background:url(../img/back-menubottom.png) no-repeat;width:193px;height:70px;}

#accordian ul{padding:0 20px 0 13px;background:url(../img/back-menu.png) repeat-y;}
/*heading styles*/
#accordian h3 {font-size:13px;line-height:40px;cursor:pointer;font-family:@rubber;}
/*heading hover effect*/
#accordian h3:hover {color:#000;}
/*iconfont styles*/
/*list items*/
#accordian li {list-style-type: none;background:url(../img/border.jpg) no-repeat center bottom;line-height:40px;font-family:@rubber;color:#fff;padding:2px 0;}
#accordian li.last{background:none;width:100%;}
#accordian li a{color:#fff;font-size:13px;transition:all 0.15s;text-decoration:none;letter-spacing:0.1em;}
#accordian li.select a{color:#000;}
#accordian li a:hover{color:#000;}
#accordian li ul li{background:none;line-height:20px;font-family:@delphin;}
/*links*/
#accordian ul ul li a {color:#E0BE36;text-decoration:none;font-size:12px;line-height:32px;display:block;padding:0 15px;transition:all 0.15s;letter-spacing:0;}

#accordian ul ul li.select a{color:#000;}
#accordian ul ul li a:hover {color:#000;}
/*Lets hide the non active LIs by default*/
#accordian ul ul {display:none;background:none;padding:0;}
#accordian li.active ul {display: block;}

//Footer
footer{
	background:#000;
	.box-shadow(-1px -1px 5px rgba(50, 50, 50, 0.75));
	text-align:center;
	line-height:40px;
	p{
		font-size:87.5%;
		color:#fff;
		a{
			color:#fff;
			text-decoration:none;
			&:hover{
				color:@rosso;
			}
		}
	}
}

//Audio Player
.bgplayerui{ 
	display:none;
}

//Animazione
#animazione{
	position:absolute;
	width:800px;
	height:700px;
	top:50%;
	left:50%;
	margin-top:-350px;
	margin-left:-400px;
	a{
		img{
			width:35px;
			clear:both;
		}
		font-family:@delphin;
		color:#000;
		font-style:italic;
		&:hover{
			color:@rosso;
		}
	}
}


//Media Queries
@media screen and (max-width : 980px) {	
	.wrapper{
		margin-bottom:-50px;
	}
	.container{
		width:680px;
	}
	footer{
		height:50px;
		line-height:130%;
		padding:10px 0 0 0;
	}
	.wrapper:after{
		height:50px;
	}
	section#main{
		.left{
			text-align:left;
			p{
				line-height:22px;
			}
		}
		.right{
			text-align:right;
		}
	}
	article{
		.pergamena{
			width:70%;
			float:right;
		}
	}
	.prodotti{
		article{
			.bottiglia{
				width:80%;
				float:right;
			}
		}
		.left{
			.scheda{
				width:70%;
				text-align:left !important;
				margin:0;
				h2{
					margin-top:30px;
				}
			}
		}
		
	}
	#map{
		width:200px;
		float:right;
		iframe{
			width:200px;
		}
	}
	#animazione{
		position:absolute;
		width:680px;
		height:auto;
		top:50%;
		left:50%;
		margin-top:-350px;
		margin-left:-400px;
	}
}

@media screen and (max-width : 700px) {	
	body{
		background:url(../img/background2.jpg) repeat;
	}
	.container{
		width:540px;
	}
	article.home{
		p{
			width:65%;
			color:#000;
		}
	}
	.prodotti{
		article{
			.bottiglia{
				width:90%;
				float:right;
				margin-top:30px;
			}
		}
		.left{
			.scheda{
				width:65%;
				h2{
					color:@rosso;
				}
			}
		}
		
	}
	#map{
		width:150px;
		iframe{
			width:150px;
		}
	}
	
}

@media screen and (max-width : 560px) {	
	.wrapper{
			margin-bottom:-65px;
		}
	.container{
		width:290px;
	}
	footer{
		height:65px;
		line-height:130%;
		padding:10px 0 0 0;
	}
	.wrapper:after{
		height:65px;
	}
	section#main{
		article{
			width:99.999999993%;
		}
	}
	section#payoff{
		h2{
			text-indent:0;
		}
	}
	#navigation{
		float:left;
		width:99.999999993%;
		text-align:center;
		#accordian{
			position:relative;
			top:0;
			left:0;
			margin:20px auto 0 auto;
		}
	}
	#tagline{
		display:none;
	}
	section#main{
		.left{
			text-align:center; 
			p{
				width:100%;
			}
		}
		.right{
			text-align:center;
			margin:0;
			.pergamena{
				float:inherit;
				margin:20px 0px 0px 0px;
				width:100%;
			}
		}
	}
	.prodotti{
		article{
			margin-top:0;
			.bottiglia{
				width:100%;
				float:inherit;
				margin-top:20px;
			}
		}
		.left{
			.scheda{
				width:100%;
				h2{
					margin-top:0;
				}
			}
		}
		
	}
	#map{
		width:100%;
		margin-top:20px;
		iframe{
			width:100%;
		}
	}
}