@import "html5reset.css";

//fonts
@font-face {
	font-family: 'Bebas';
	src: url('../_fonts/BebasNeue-webfont.eot');
	src: url('../_fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../_fonts/BebasNeue-webfont.woff') format('woff'),
		 url('../_fonts/BebasNeue-webfont.ttf') format('truetype'),
		 url('../_fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}


//var
@textColor: #666;
@linkColor: #09c;
@linkColorHover: #069;
@blockColor: #fff;
@headerHeight: 110px;
@paddingBlock: 80px;
@fontSizeH1: 64px;
@fontSizeH1intro: 100px;
@fontSizeH2: 20px;


//basic
.sans_serif {
	font-family: Arial, Helvetica, sans-serif;
}
.serif {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-style: italic;
}
.bebas {
	font-family: 'Bebas', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
	text-transform: uppercase;
	font-weight: normal;
}
.blackBgTransparency {
	background: #222;
	background: rgba(25,25,25,0.90);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22000000', endColorstr='#75000000');
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22000000', endColorstr='#75000000');
}
.whiteBgTransparency {
	background: #fff;
	background: rgba(255,255,255,0.85);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55FFFFFF', endColorstr='#75000000');
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55FFFFFF', endColorstr='#75000000');
}
.border-radius (@radius: 5px) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}



//style
body {
	color: @textColor;
	background: #333;
	font-size: 13px;
	.sans_serif;
}

a {
	color: @linkColor;
	
	&:hover{
		color: @linkColorHover;
	}
}

h1 {
	font-size: @fontSizeH1;
	.bebas;
	
	@media screen and (max-width: 640px) {
		font-size: @fontSizeH1 /1.8;
	}
}
h2, h3 {
	font-size: @fontSizeH2;
	font-weight: normal;
	
	@media screen and (max-width: 640px) {
		font-size: @fontSizeH2 /1.5;
		line-height: 1.5;
	}
}
ul, li { list-style: none; }
.left { float: left; }
.right { float: right; }
.hidden { display: none; }
.center { margin: 0 auto; }
.wrap {
	width: 960px;
	.center;
	
	@media screen and (max-width: 979px) {
		width: 96%;
		padding: 0 2%;
	}
}
.callToAction {
	display: block;
	color: #fff;
	background: @linkColor;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	width: 180px;
	padding: 10px;
	border: 1px solid #fff;
	text-shadow: 0 1px #000;
	position: relative;
	.center;
	
	span {
		.bebas;
		font-size: 36px;
		letter-spacing: 4px;
		display: block;
	}
	
	&:hover {
		background: @linkColorHover;
		color: #fff;
	}
	
	.comingSoon {
		position: absolute;
		top: -15px;
		right: -35px;
		display: block;
		width: 128px;
		height: 64px;
		background: url(../_img/coming-soon.png) no-repeat 0 0;
		z-index: 10;
	}
	
	.soldOut{
		position: absolute;
		top: -15px;
		right: -35px;
		display: block;
		width: 128px;
		height: 64px;
		background: url(../_img/sold-out.png) no-repeat 0 0;
		z-index: 10;
	}
}

.bg {
	position: fixed;
	bottom:0;
	left: 0;
	z-index: 0;
	width:100%;
	height: 100%;
	
	div {
		position: absolute;
		background: #333 url(../_img/bg-texture.png) repeat 0 0;
		width:100%;
		height: 500%;
		text-align: center;
		
		img {
			width: 1200px;
			margin-top: 520px;
			
			@media screen and (max-width: 780px) {
				margin-top: 420px;
			}
			@media screen and (max-width: 640px) {
				margin-top: 360px;
			}
		}
	}
	
	@media screen and (max-width: 1199px) {
		left: 50%;
		margin-left: -600px;
	}
	
	@media screen and (max-width: 640px) {
		display: none;
	}
}




header {
	position: fixed;
	background: #fff;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	height: @headerHeight;
	z-index: 100;
	
	.logo {
			display: block;
			margin: 15px 0 0 20px;
			width: 480px;
			overflow: hidden;
			.left;
			
			a {
				margin-right: 10px;
				.left;
				
				&:hover {
					opacity: 0.8;
				}
			}
			
			h1 {
				font-size: 40px;
				padding-top: 10px;
				color: #333;
				
				span {
					color: @linkColor;
				}
			}
			h2 {
				letter-spacing: -1px;
				color: #999;
			}
		}
	
	nav {
		float: right;
		margin: 30px 20px 0 0;
		
		ul {
			display: block;
			float: left;
			margin-left: 20px;
			
			li {
				float: left;
				margin-left: 1px;
				
				
				a {
					display: block;
					width: 50px;
					height: 50px;
					text-indent: -9999px;
					background-color: @linkColor;
					background-image: url(../_img/nav-sprites.png);
					background-repeat: no-repeat;
					
					&:hover {
						background-color: @linkColorHover;
					}
					
					&.intro {
						background-position: center 0;
					}
					&.argomenti {
						background-position: center -50px;
					}
					&.talks {
						background-position: center -100px;
					}
					&.dove {
						background-position: center -150px;
					}
					&.facebook {
						background-position: center -200px;
					}
					&.twitter {
						background-position: center -250px;
					}
					&.linkedin {
						background-position: center -300px;
					}
				}
			}
		}
	}
	
	@media screen and (max-width: 979px) {
		.logo {
			margin-left: 0;
		}
		nav {
			margin-right: 0;
			
			.socialLinks {
				display: none;
			}
		}
	}
	
	@media screen and (max-width: 780px) {
		height: 50px;
		
		.logo {
			width: 320px;
			margin-top: 4px;
			
			a img {
				width: 40px;
			}
			h1 {
				font-size: 24px;
				padding-top: 0;
			}
			h2 {
				font-size: 15px;
				line-height: 1.2;
			}
		}
		nav {
			margin: 0px;
		}
	}
	
	@media screen and (max-width: 640px) {
		.wrap {
			width: 100%;
			padding: 0;
		}
		.logo {
			display: none;
		}
		nav {
			width: 100%;
			ul {
				width: 100%;
				margin: 0;
				li {
					width: 25%;
					//width: 33.3%;
					margin: 0;
					a {
						width: 100%;
						box-shadow: 1px -1px #fff inset;
						&.intro {
							box-shadow: 0 -1px #fff inset;
						}
					}
					
				}
			}
		}
	}
}

section {
	padding-top: @headerHeight;
	position: relative;
	z-index: 10;
	
	@media screen and (max-width: 780px) {
		padding-top: (@headerHeight)-60;
	}
}

article {
	background: @blockColor;
	position: relative;
	padding: @paddingBlock 0;
	min-height: 300px;
	margin-bottom: 300px;
	text-align: center;
	width: 100%;
	overflow: hidden;
	
	.anchor {
		position: relative;
		top: -(@headerHeight+@paddingBlock)+1;
	}
	
	h1 {
		color: #333;
	}
	h2 {
		margin: -5px 0 30px;
	}
	
	&.intro {
		background: none;
		padding-bottom: 10px;
		
		h1 {
			font-size: @fontSizeH1intro;
			color: #fff;
			text-shadow: 0 -1px #000;
			
			@media screen and (max-width: 640px) {
				font-size: @fontSizeH1intro /1.8;
			}
		}
		h2 {
			color: #aaa;
		}
		a {
			font-size: 18px;
		}
		p {
			font-size: 13px;
			margin: 10px 0;
			color: #999;
		}
	}
	
	&.argomenti {
		background: #fff;
		
		p {
			width: 480px;
			text-align: justify;
			font-size: 14px;
			color:#666;
			line-height: 1.7;
			.center;
			padding-bottom: 40px;
		}
		
		@media screen and (max-width: 640px) {
			p {
				width: 90%;
				font-size: 13px;
			}
		}
	}
	
	&.talks {
		.blackBgTransparency;
		
		h1 {
			color: #fff;
		}
		h2 {
			color: #999;
		}
		p {
			color: #999;
			text-align: justify;
		}
		.wrap {
			.left {
				width: 300px;
				
				p {
					line-height: 1.7;
					margin-bottom: 30px;
				}
			}
			
			.right {
				width: 600px;
				overflow: hidden;
				position: relative;
				
				.tabs {
					width: 180px;
					float: left;
					position: relative;
					z-index: 10;
					
					a {
						display: block;
						padding: 12px 15px 10px;
						background: #eee;
						text-decoration: none;
						font-size: 18px;
						.bebas;
						border: 1px solid #999;
						margin-bottom: -1px;
						
						&:hover,
						&.selected {
							background: #fff;
						}
						
						&.selected {
							cursor: default;
							color: #333;
							border-right: 1px solid #fff;
						}
					}
				}
				
				.cards {
					float: left;
					background: #fff;
					width: 339px;
					min-height: 493px;
					padding: 40px;
					border: 1px solid #999;
					margin-left: -1px;
					position: relative;
					z-index: 5;
					
					figure {
						.center;
						.border-radius(140px);
						border: 1px solid #999;
						width: 138px;
						height: 138px;
						overflow: hidden;
						background: #eee;
						margin-bottom: 20px;
						
						img {
							.border-radius(140px);
							border: 1px solid #999;
							margin-top: 3px;
						}
					}
					
					h3 {
						.bebas;
						font-size: 40px;
						color: #333;
					}
					h4 {
						.serif;
						font-size: 16px;
						color: #008C22;
						margin-bottom: 20px;
					}
					p {
						line-height: 1.5;
						color: #666;
						padding-bottom: 30px;
					}
					span {
						display: block;
						position: absolute;
						bottom: 30px;
						border-top: 1px dotted #ccc;
						text-align: center;
						padding-top: 10px;
						width: 339px;
						font-size: 12px;
						
						&.twitterLink {
							bottom: 12px;
							border: none;
						}
					}
				}
				
				.actionSlider {
					display: none;
				}
			}
			
			@media screen and (max-width: 979px) {
				.left,
				.right {
					.wrap;
					width: 600px;
					float: none;
				}
				
				.left{
					padding-top: 20px;
					
					p {
						display: none;
					}
					.callToAction {
						width: 578px;
					}
				}
			}
			
			@media screen and (max-width: 640px) {
				.left,
				.right {
					width: 98%;
				}
				
				.left {
					.callToAction {
						width: 98%;
						padding: 10px 0;
					}
				}
				
				.right {
					.tabs {
						display: none;
					}
					.cards {
						width: 100%;
						min-width: 280px;
						min-height: 320px;
						padding: 20px 0;
						li {
							.wrap;
							width: 100%;
							min-width: 280px;
							figure {
								margin-bottom: 10px;
							}
							h3 {
								line-height: 1.1;
							}
							p {
								width: 90%;
								margin-left: 5%;
							}
							span {
								width: 94%;
								margin-left: 3%;
								bottom: 26px;
								font-size: 11px;
								padding-top: 6px;
								
								&.twitterLink {
									bottom: 10px;
								}
							}
						}
					}
					.actionSlider {
						display: block;
						position: absolute;
						top: 60px;
						width: 100%;
						z-index: 20;
						
						span {
							display: block;
							height: 20px;
							font-size: 20px;
							line-height: 1;
							padding: 20px;
							background: #bbb;
							color: #fff;
							cursor: pointer;
						}
						span:hover {
							background: #09c;
						}
						#action_prev {
							float: left;
							padding-left: 10px;
							border-radius: 0 50px 50px 0;
						}
						#action_next {
							float: right;
							padding-right: 10px;
							border-radius: 50px 0 0 50px;
						}
					}
				}
			}
			
			@media screen and (max-width: 480px) {
				.right {
					.cards {
						li {
							h3 {
								font-size: 32px;
							}
							h4 {
								font-size: 14px;
							}
							p {
								line-height: 1.5;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
		
	}
	
	&.dove {
		.whiteBgTransparency;
		
		.left {
			width: 600px;
			height: 400px;
			border: 1px solid #999;
			background: #ccc;
		}
		.alternativeMap {
			display: none;
			img { border: 1px solid #999; }
		}
		
		.standardMap {
			display: block;
			img { border: 1px solid #999; }
			background-color: #eee;
			background-image: url(../_img/standardMap.jpg);
			background-position: top center;
			background-repeat: no-repeat;
			text-indent:-9999px;
		}
		
		.right {
			width: 300px;
			text-align: justify;
			
			h3 {
				.bebas;
				font-size: 40px;
				color: @linkColor;
				margin-bottom: 10px;
			}
			p {
				font-size: 14px;
				line-height: 1.7;
				
				&.byRegister {
					margin-top: 150px;
					
					a {
						display: block;
						font-size: 18px;
					}
				}
			}
			
		}
		
		@media screen and (max-width: 979px) {
			.left { width: 500px; }
			.right {
				float: left;
				margin-left: 40px;
				width: 250px;
			}
		}
		@media screen and (max-width: 860px) {
			.left { width: 400px; }
			.right {
				width: 200px;
				p {
					font-size: 12px;
					&.byRegister a {
						font-size: 15px;
					}
				}
			}
		}
		@media screen and (max-width: 700px) {
			.left {
				width: 100%;
				float: none;
			}
			.right {
				width: 100%;
				clear: both;
				float: none;
				margin: 20px 0 0 0;
				
				p.byRegister {
					margin-top: 20px;
				}
			}
		}
		@media screen and (max-width: 640px) {
			.left {
				height: 240px;
			}
			iframe { display: none; }
			.standardMap { display: none; }
			.alternativeMap { display: block; }
			.right {
				text-align: center;
			}
		}
	}
	
	&.sponsor {
		padding: 0;
		background: none;
		
		h1 {
			margin-bottom: 40px;
		}
		
		.poweredBy{
			padding: @paddingBlock 0;
			.blackBgTransparency;
			
			h1 {
				color: #fff;
			}
			img {
				margin-bottom: 20px;
			}
			p {
				margin: 0 auto;
				width: 480px;
				line-height: 1.7;
				text-align: justify;
				
				a {}
			}
			
			@media screen and (max-width: 640px) {
				img,
				p { width: 90%; }
			}
		}
		
		.sponsoredBy {
			.whiteBgTransparency;
			padding: @paddingBlock 0;
			margin-bottom: 0;
			
			ul {
				.wrap;
				display: block;
				text-align: center;
				overflow: hidden;
				width: 780px;
				
				li {
					.border-radius(280px);
					width: 280px;
					height: 280px;
					border: 1px solid #999;
					background-color: #ddd;
					float: left;
					
					a {
						.border-radius(280px);
						display: block;
						text-indent: -9999px;
						width: 270px;
						height: 270px;
						margin: 4px 0 0 4px;
						border: 1px solid #999;
						background-color: #eee;
						background-image: url(../_img/sponsor-sprites.jpg);
						background-position: 0 80px;
						background-repeat: no-repeat;
						overflow: hidden;
					}
					
					&.ied {
						.left;
					}
					&.oblate {
						.right;
					}
					&.oblate a {
						background-position: -300px 80px;
					}
				}
				
				@media screen and (max-width: 979px) {
					.wrap;
					width: 640px;
				}
				@media screen and (max-width: 640px) {
					width: 320px;
					
					li.ied,
					li.oblate {
						float: none;
						margin: 0 auto;
					}
					li.ied {
						margin-bottom: 20px;
					}
				}
			}
		}
		
	}
	
	@media screen and (max-width: 780px) {
		padding: 40px 0;
		
		.anchor {
			top: -(@headerHeight+@paddingBlock)+1+100;
		}
	}
	
	@media screen and (max-width: 640px) {
		margin-bottom: 0;
		min-height: 310px;
	}
}

footer {
	padding: @paddingBlock 0;
	overflow: hidden;
	position: relative;
	z-index: 5;
	.blackBgTransparency;
	
	.social {
		width: 480px;
		
		h2 {
			color: #ccc;
			.bebas;
			font-size: 46px;
			line-height: 1.1;
			
			text-align: center;
			
			a {
				text-decoration: none;
			}
			
			span {
				background-image: url(../_img/nav-sprites.png);
				background-repeat: no-repeat;
				background-position: 0 -250px;
				width: 40px;
				height: 40px;
				text-indent: -9999px;
				margin-right: 20px;
				//float: left;
				
				display: inline-block;
			}
		}
		&.facebook h2 span {
			background-position: 0 -200px;
		}
		
		@media screen and (max-width: 979px) {
			width: 50%;
		}		
		@media screen and (max-width: 640px) {
			margin: 0 auto;
			width: 300px;
			float: none;
		}
	}
	@media screen and (max-width: 640px) {
		padding: 20px 0;
	}
}