/* CSS Document */
body {
	-webkit-font-smoothing: antialiased;
	font-family: 'Roboto Condensed';
	
}
.container {
	position: relative;
	height: 100%;
}
h1,h2,h3{
	margin:0;}
header {
	width: 100%;
	height: 400px;
	position: relative;
}
.rettangolo {
	position:fixed;
	top:0;
	left:0;
	
	width:0;
	height:300px;
	background-color: #b0a671;
	transition:all 1s ease;
}

.back:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 20%;
	top: 0;
	right: 0;
	background-color:  #C1C8E4;
	animation: back 1.3s infinite;
	}
	.back{
		display:block;
	text-decoration:none;
	font-family:'Roboto Condensed';
	text-transform:lowercase;
	font-size:17px;
	padding-top:5px;
	
	color: #000000;
		
		font-weight:700;
		position: fixed;
	right:5%;
	top:10%;
	
	
	opacity:0;
	
	transition:all .3s ease 1s;
	cursor:pointer;
	}
	
	
	@keyframes back {
 0% {
 width:0;
}
 100% {
 width:100%;
}
	}
.rettangolo-due{
	width:100%;
	height:200px;
	background-color: #b0a671;
	position:absolute;
	right:0;
	transition:all .6s ease;
	}
	
#logo {
	opacity:0;
	width: 200px;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition:all 1s ease 1s;
}
#logo-due{
	width:150px;
	
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	}
	
#logo img, #logo-due img {
	width: 100%;
}
#immagini{
	height:100%;
	position:relative;
	background-color:#FFFFFF;
	
	}
	#titolo{
		
		height:300px;
		position:relative;
		background-color:#FFFFFF;
		
		transition:all .6s ease;
		}
		#titolo.on{
			
			z-index:1;}
#titolo .testo{
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align:center;
	opacity:0;
	transition:all 1s ease 1s;
	}
	#titolo h1{
		font-family:'Abril Fatface';
		font-size: 55px;
	color: #000000;
	text-transform: lowercase;
	font-weight: 700;
		
		}
		#titolo h2{
			font-size:30px;
			margin-top:10px;
			text-transform:uppercase;
			font-weight:700;}	
	#titolo h3{
		font-family:'Roboto Condensed';
		font-weight:700;
		margin-top:20px;
		font-size:18px;}
	.full-img{
		
		padding-bottom:10%;
		width:80%;
		height:100%;
		margin:0 auto;
		transition:all .6s ease;}
		.full-img.uno, .full-img.due, .full-img.tre{
		padding-top:10%;
		opacity:0;}
		.full-img.uno.top, .full-img.due.top, .full-img.tre.top{
			opacity:1;
			padding-top:0;}
			
		.full-img img{
			width:100%;}
			@media (max-width: 767px) {
				header{
					height:200px;}
				.rettangolo{
					height:200px;}
					.rettangolo-due{
						height:100px;}
					#logo{
						width:80px;}
						#titolo h1{
							font-size:30px;}
							#titolo h2{
			font-size:20px;}
			#titolo h3{
			font-size:15px;}
			.back{
				right:2%;}
				.full-img.uno, .full-img.due, .full-img.tre{
					opacity:1;
			padding-top:0;}
			#logo-due{
				width:80px;}
				
				}
				@media (max-width: 480px) {
					#titolo h1{
							font-size:27px;}
							#titolo h2{
			font-size:15px;}
			#titolo h3{
			font-size:13px;}
			.back{
				font-size:13px;}
					}		