@import url(normalize.css);
@import url(animate.css);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin-ext');


/* BODY  ***************************************************************/

body{ font-family: 'Open Sans', sans-serif; }

.clear{ clear: both; display: block; width: 100%; }

/* BODY GRID  ***********/

.box-grid{
	display: block;
	width: 100%;
	min-height: 100%;
	position:absolute;
	top:0px;
	left:0px;
	overflow: hidden;
	background: rgba(255,255,255,1);
	margin: 0;
	padding: 0;
	z-index: -1;
}


.box-grid .grid{
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	float: left;
	background: rgba(228,208,74,1.00);
}


.box-grid .grid.mt2{
	margin-top: -30%;
	margin-left: -35%;
	transform: rotate(25deg);
	
}

.box-grid .grid.mt3{
	margin-top: -10%;
	margin-left: -25%;
	transform: rotate(15deg);
}


.box-grid .grid.mt4{
	margin-top: -25%;
	margin-left: -35%;
	transform: rotate(10deg);
}

.box-grid .grid.mt5{
	margin-top: -30%;
	margin-left: -35%;
	transform: rotate(15deg);
}

.box-grid .grid.mt6{
	margin-top: -35%;
	margin-left: -25%;
	transform: rotate(20deg);
}

.box-grid .grid.c1{ background: rgba(44,62,80,1.00);}

.box-grid .grid.c2{ background: #ecf0f1;}

.box-grid .grid.c3{ background: #16a085;}

.box-grid .grid.c4{ background: rgba(236,100,34,1.00); }

.box-grid .grid.c5{ background: #f1c40f;}


/* HEADER  *************************************/

.header{
	width: 100%;
	height: 70px;
	overflow: hidden;
	clear: both;
	position: fixed;
	margin: 0;
	padding: 0;
	left:0;
	top:0;
	z-index: 5000;
	background: #1c2734;
}


.header h1{
	margin: 0;
	padding: 0;
	margin-top: 10px;
	width: auto;
	height: 50px;
	position: absolute;
	left:10%;
	overflow: hidden;
}

.header h1 img{
	height: 100%;
}

/* MENU  ******/

.header .menu{
	display: block;
	position: relative;
	float: right;
	width: 60%;
	height: 100%;
	margin-right: 50px;
}

.header .menu a{
	height: 100%;
	width: auto;
	line-height: 70px;
	display: inline-block;
	overflow: hidden;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
    font-family: 'Open Sans', sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.05rem;
	font-weight: 600;
	color:#f1c40f;
	text-transform: uppercase;
	transition: color 0.3s ease-in;
}

.header .menu a:hover{
	color:#1abc9c;
}

.header .menu a.active{
	color:#1abc9c;
}



/* FOOTER  *************************************/

.footer{
	width: 100%;
	height: 50px;
	overflow: hidden;
	clear: both;
	position: fixed;
	margin: 0;
	padding: 0;
	left:0;
	bottom:0;
	z-index: 5000;
	background: #1c2734;
	line-height: 50px;
	color:#f1c40f;
}

.footer span{ color:#1abc9c; }


/* BLOCK CONTENT  *************************************/

.blockContent{
	width: 100%;
	min-height: 100%;
	clear: both;
	position: absolute;
	overflow: hidden;
	display: block;
	padding-top: 170px;
	padding-bottom: 50px;
	margin: 0px;
}

.blockContent .left{
	width: 50%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	padding-left: 10%;
	float: left;
	display: block;
	position: relative;
	overflow: hidden;
}

.blockContent .left h2{
	margin:0;
	padding: 0;
	margin-top: 20%;
	font-family: 'Open Sans', sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 600;
	color:#CCC;
	margin-bottom: 50px;
}

.blockContent .left p{
	font-size: 0.9rem;
	line-height: 1.5rem;
	letter-spacing: 0.05rem;
	font-weight: 400;
	color:#CCC;
	column-count:2;
	column-gap: 40px;
}


.blockContent .right{
	width: 40%;
	height: 100%;
	top:0px;
	padding: 0;
	margin: 0;
	right: 0;
	display: block;
	position: absolute;
	overflow: hidden;
}

.blockContent .right img{
	display:block;
	position: absolute;
	left:0;
	right: 0;
	bottom:150px;
	margin-left: auto;
	margin-right: auto;
}


/* BLOCK CONTENT 2  *************************************/

.blockContent2{
	width: 100%;
	min-height: 80%;
	clear: both;
	position: absolute;
	overflow: hidden;
	display: block;
	padding-top: 70px;
	padding-bottom: 50px;
	margin: 0px;
}

.blockContent2 .left{
	width: 40%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	padding-left: 10%;
	float: left;
	display: block;
	position: relative;
	overflow: hidden;
}

.blockContent2 .left h2{
	margin:0;
	padding: 0;
	margin-top: 20%;
	font-family: 'Open Sans', sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 600;
	color:#3C3C3C;
	margin-bottom: 50px;
}

.blockContent2 .left p{
	font-size: 0.9rem;
	line-height: 1.5rem;
	letter-spacing: 0.05rem;
	font-weight: 400;
	color:#3C3C3C;
	column-count:2;
	column-gap: 40px;
}

.blockContent2 .right{
	width: 40%;
	height: 100%;
	top:0px;
	padding: 0;
	margin: 0;
	right: 0;
	display: block;
	position: absolute;
	overflow: hidden;
}

.blockContent2 .right img{
	display:block;
	position: absolute;
	left:0;
	right: 0;
	bottom:60%;
	margin-left: auto;
	margin-right: auto;
}



/* BLOCK CONTENT 3  *************************************/

.blockContent3{
	width: 100%;
	min-height: 80%;
	clear: both;
	position: absolute;
	overflow: hidden;
	display: block;
	padding-top: 70px;
	padding-bottom: 50px;
	margin: 0px;
}

.blockContent3 .left{
	width: 40%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	padding-left: 10%;
	float: left;
	display: block;
	position: relative;
	overflow: hidden;
}

.blockContent3 .left h2{
	margin:0;
	padding: 0;
	margin-top: 20%;
	font-family: 'Open Sans', sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 600;
	color:#3C3C3C;
	margin-bottom: 50px;
}

.blockContent3 .left p{
	font-size: 0.9rem;
	line-height: 1.5rem;
	letter-spacing: 0.05rem;
	font-weight: 400;
	color:#3C3C3C;
	column-count:2;
	column-gap: 40px;
}

.blockContent3 .right{
	width: 40%;
	height: 100%;
	top:0px;
	padding: 0;
	margin: 0;
	right: 0;
	display: block;
	position: absolute;
	overflow: hidden;
}

.blockContent3 .right img{
	display:block;
	position: absolute;
	left:0;
	right: 0;
	bottom:20%;
	margin-left: auto;
	margin-right: auto;
}



/* BLOCK CONTENT 4  *************************************/

.blockContent4{
	width: 100%;
	min-height: 80%;
	clear: both;
	position: absolute;
	overflow: hidden;
	display: block;
	padding-top: 70px;
	padding-bottom: 50px;
	margin: 0px;
}

.blockContent4 .left{
	width: 40%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	padding-left: 10%;
	float: left;
	display: block;
	position: relative;
	overflow: hidden;
}

.blockContent4 .left h2{
	margin:0;
	padding: 0;
	margin-top: 20%;
	font-family: 'Open Sans', sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 600;
	color:#3C3C3C;
	margin-bottom: 50px;
}

.blockContent4 .left p{
	font-size: 0.9rem;
	line-height: 1.5rem;
	letter-spacing: 0.05rem;
	font-weight: 400;
	color:#3C3C3C;
	column-count:2;
	column-gap: 40px;
}

.blockContent4 .right{
	width: 40%;
	height: 100%;
	top:0px;
	padding: 0;
	margin: 0;
	right: 0;
	display: block;
	position: absolute;
	overflow: hidden;
}

.blockContent4 .right img{
	display:block;
	position: absolute;
	left:0;
	right: 0;
	bottom:20%;
	margin-left: auto;
	margin-right: auto;
}


/* BLOCK CONTENT 5  *************************************/

.blockContent5{
	width: 100%;
	min-height: 80%;
	clear: both;
	position: absolute;
	overflow: hidden;
	display: block;
	padding-top: 70px;
	padding-bottom: 50px;
	margin: 0px;
}

.blockContent5 h2{
	padding: 0px;
	margin: 0px;
	margin-top: 140px;
	margin-left: 10%;
	font-family: 'Open Sans', sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 600;
	color:#FFF;
}

.blockContent5 h3{
	padding: 0px;
	margin: 0px;
	margin-top: 20px;
	margin-left: 10%;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 600;
	color:#FFF;
}

.blockContent5 h3 a{ color:#FFF; text-decoration: none; }

.blockContent5 form{
	width: 100%;
	max-width: 600px;
	padding: 0px;
	margin: 0px;
	margin-top: 50px;
	margin-left: 10%;

}

.blockContent5 form input{
	width: 250px;
	float: left;
	height: 30px;
	border:0px;
	padding: 5px;
	border-bottom:1px solid #CCC;
	margin-left: 0px;
	margin-right: 20px;
	overflow: hidden;
}

.blockContent5 form textarea{
	width: 530px;
	height: 100px;
	border:0px;
	padding: 5px;
	display: block;
	position: relative;
	clear: both;
	border-bottom:1px solid #CCC;
	margin-top:50px;
	overflow: hidden;
}

.blockContent5 form button{
	padding: 10px;
	border:none;
	background: rgba(237,207,45,1.00);
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 20px;
	cursor: pointer;
	color:#FFF;
}

.blockContent5 .info-notifiche{
	
	width: calc(100% - 50px);
	padding: 25px;
	position:relative;
	text-align: center;
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color:#000;
}


/* MOBILE  ***************************************************************/

@media all and (max-width: 1640px) {
	
	
	.blockContent.color1{
		 background: rgba(44,62,80,1.00);
	}
	
	.blockContent2.color2{
		  background: #ecf0f1;
	}
	
	.blockContent3.color3{
		  background: #16a085;
	}
	
	.blockContent4.color4{
		  background:  rgba(236,100,34,1.00);
	}
	
	.blockContent5.color5{
		  background: #f1c40f;
	}
	

	
	
       .box-grid .grid.mt2{
			margin-top: 0%;
			margin-left: 0%;
			transform: rotate(0deg);

		}
	
		.blockContent .left{
			width: 40%;
			min-height: 100%;
			padding: 0;
			margin: 0;
			padding-left: 5%;
			float: left;
			display: block;
			position: relative;
			overflow: hidden;
		}

		.blockContent .left h2{
			margin:0;
			padding: 0;
			margin-top: 20px;
			font-family: 'Open Sans', sans-serif;
			font-size: 2rem;
			text-transform: uppercase;
			letter-spacing: 0.05rem;
			font-weight: 600;
			color:#CCC;
			margin-bottom: 50px;
		}
	
	    .blockContent .left p{
			font-size: 0.9rem;
			line-height: 1.5rem;
			letter-spacing: 0.05rem;
			font-weight: 400;
			color:#CCC;
			column-count:1;
			column-gap: 40px;
		}
	
	    .blockContent .right{ display: block; background: #FFFFFF; width: 50%; }
	
	    .blockContent .right img{ width: 90%; }


	    .box-grid .grid.mt3{
			margin-top: -30%;
			margin-left: 0%;
			transform: rotate(0deg);
		}
	
	    .blockContent2 .left{
			width: 80%;
			min-height: 100%;
			padding: 0;
			margin: 0;
			padding-left: 10%;
			float: left;
			display: block;
			position: relative;
			overflow: hidden;
		}
	


	    .blockContent3 .left{
			width: 80%;
			min-height: 100%;
			padding: 0;
			margin: 0;
			padding-left: 10%;
			float: left;
			display: block;
			position: relative;
			overflow: hidden;
		}
	
	    .blockContent3 .right{ top:-350px;  }
	
	    .blockContent3 .right img{ width: 300px;}
	
	    .box-grid .grid.mt4{
			margin-top:  -30%;
			margin-left: 0%;
			transform: rotate(0deg);
		}
	
	    .blockContent4 .left{
			width: 80%;
			min-height: 100%;
			padding: 0;
			margin: 0;
			padding-left: 10%;
			float: left;
			display: block;
			position: relative;
			overflow: hidden;
		}

		.blockContent4 .left h2{
			margin:0;
			padding: 0;
			margin-top: 20px;
			font-family: 'Open Sans', sans-serif;
			font-size: 2rem;
			text-transform: uppercase;
			letter-spacing: 0.05rem;
			font-weight: 600;
			color:#FFF;
			margin-bottom: 50px;
		}
	  
	    .blockContent4 .left p{ color:#FFF;}
	
	    .blockContent4 .right{ display: none; }
	
	   
	     .box-grid .grid.mt5{
			margin-top: -55%;
			margin-left: 0%;
			transform: rotate(0deg);
		}
	
	
	    .box-grid .grid.mt6{
			margin-top: -35%;
			margin-left: 0%;
			transform: rotate(0deg);
		}

	
	
}


@media all and (max-width: 960px) and (max-height: 1280px) {
	
	.blockContent2 .right img{ bottom:75%; }
	
	.blockContent3 .right img{ bottom:45%; }
}

@media all and (max-width: 960px) and (max-height: 1200px) {
	
	
	.header .menu{ display:none; }
	
	
	.blockContent .right{ display: none; }
	
	.blockContent .left{ width:90%; }
	
	
}

@media all and (max-width: 768px) and (max-height: 1024px) {
	
	.blockContent3 .right img{ bottom:40%; }
	
	
}

@media all and (max-width: 600px) {
	
	.blockContent .left p, .blockContent2 .left p, .blockContent3 .left p, .blockContent4 .left p{
		
		column-count: 1;
		
	}
	
	.blockContent2 .right img{ display:none; }
	
	.blockContent3 .right img{ display:none; }
	
	.blockContent5 form{ max-width: 400px; overflow: hidden; }
	
	.blockContent5 form textarea{ width: calc(100% - 20px); }
	
	.blockContent5 form input{ margin-bottom: 20px; } 
	
}


@media all and (max-width: 600px) {
	
	.blockContent5 form{ max-width: 280px; overflow: hidden; }
	
	.footer{ font-size: 0.8rem; }
}