@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i';
@import 'https://fonts.googleapis.com/css?family=Abril+Fatface';
body * {
	box-sizing: border-box;
	z-index:998;
}
html, body {
	height: 100%;
	-webkit-font-smoothing: antialiased;
	font-family: 'Abril Fatface';
}
#bianco{
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	z-index:999;
	transition:left 1s ease 2s;}
	#bianco .center{
		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%);
	}
	#bianco .center h3{
		font-size:25px;
		font-family:'Abril Fatface';
		text-transform:lowercase;}
		.center:before{
			content: '';
	position: absolute;
	top: 0;
	left: -40px;
	width: 17%;
	height: 100%;
	background-color: #C1C8E4;
	animation: scroll 1.3s infinite;
	
			}
		
			.center:after{
			content: '';
	position: absolute;
	bottom: 0;
	right: -40px;
	width: 17%;
	height: 100%;
	background-color: #C1C8E4;
	animation: scroll 1.3s infinite;
	}
	#bianco.via{
		left:-100%;
		}
.container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
#home h1, #contacts h1 {
	font-family: 'Roboto Condensed';
	font-size: 45px;
	color: #000000;
	text-transform: uppercase;
	font-weight: 700;
}
h2 {
	font-size: 35px;
	text-align: center;
}
h3 {
	font-family: 'Roboto Condensed';
	font-size: 16px;
	font-weight: 700;
}
h1, h2, h3 {
	margin: 0;
}
#home {
	height: 100%;
	position: relative;
}
#home .hello {
	height: 40%;
	position: relative;
	width: 40%;
}
.hello .linee {
	width: 80%;
	float: right;
}
.hello .testo1 {
	width: 20%;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: opacity .3s ease 3s, left .6s ease 3s;
}
#logo {
	width: 80px;
	height: 80px;
	position: absolute;
	top: 10%;
	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%);
	opacity: 0;
	transition: opacity 1s ease 1s
}
#logo img {
	width: 100%;
}
.hello .verticale, #titolo .verticale {
	background-color: #E1E6E9;
	width: 1.5%;
	height: 0;
	position: absolute;
	top: 0;
	left: 35%;
	transition: height 1.5s ease 1.5s;
}
.hello .orizzontale, #titolo .orizzontale, .edu-titolo .orizzontale {
	background-color: #c1c8e4;
	height: 2%;
	width: 0;
	position: absolute;
	left: 0;
	top: 70%;
	transition: width 1.5s ease 1.5s;
}
#home .centrale {
	z-index: 999;
	position: absolute;
	top: 50%;
	left: 58%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity .3s ease 4s, left .6s ease 4s;
}
#home .centrale h2 {
	font-size: 46px;
	text-align: right;
}
#home h3 {
	writing-mode: tb-rl;
	filter: flipv fliph;
	position: absolute;
	bottom: 0;
	left: 47%;
	padding-left: 1%;
	opacity: 0;
	transition: opacity 1s ease 5s;
}
nav {
	width: 20%;
	height: 80%;
	position: absolute;
	bottom: 0;
	right: 20%;
}
nav .verticale2 {
	background-color: #E1E6E9;
	position: absolute;
	bottom: 0;
	width: 3%;
	height: 0;
	transition: height 1.5s ease 1.8s;
}
#home .orizzontale2 {
	position: absolute;
	top: 60%;
	right: 25%;
	width: 0;
	background-color: #c1c8e4;
	height: 1%;
	margin: 1%;
	transition: width 1.5s ease 1.8s;
}
nav ul {
	padding: 0;
	margin: 0;
}
nav #left {
	text-align: left;
	left: -40px;
	position: absolute;
	top: 56%;
	opacity: 0;
	transition: opacity 1s ease 5s, left .6s ease 5s;
}
nav ul li {
	list-style: none;
	font-family: 'Roboto Condensed';
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
	padding-bottom: 60%;
}
nav #right {
	text-align: right;
	position: absolute;
	top: 10%;
	right: 76%;
	padding: 0;
	opacity: 0;
	transition: opacity 1s ease 5s, right .6s ease 5s;
}
nav span ul li {
	padding-bottom: 80%;
}
nav ul li a {
	color: #000000;
	text-decoration: none;
}
nav ul li:hover a {
	text-decoration: none;
	color: #C1C8E4;
}
.scroll:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
	background-color: #C1C8E4;
	animation: scroll 1.3s infinite;
	animation-delay: 5s;
}
@keyframes scroll {
 0% {
 height:0;
}
 100% {
 height:100%;
}
}
/*ABOUT*/
#love, #education {
	display: none;
	float: left;
	width: 50%;
}
#education {
	display: none;
}
#about, #love, #education {
	height: 100%;
	margin: 10% 0;
	position: relative;
}
#about .love {
	width: 70%;
	height: 100%;
	margin: 0 auto;
}
#about .love h1, #love h1 {
	position: absolute;
	left: 42%;
	top: 10%;
	z-index: 999;
	opacity: 0;
	transition: all .3s ease 1s;
}
#love h1 {
	opacity: 1;
	text-align: center;
}
#about .love .centrale, #love .centrale {
	width: 52%;
	position: absolute;
	top: 50%;
	left: 65%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 999;
}
#about .love .centrale article, #love .centrale article {
	width: 5%;
	margin: 3%;
}
#love .centrale article {
	width: 20%;
}
#love .centrale {
	top: 40%;
	left: 55%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#about .love .centrale img {
	width: 100%;
	opacity: 0;
	transition: all .3s ease;
}
#love .centrale img {
	width: 100%;
}
.love .centrale img#de {
	transition-delay: 2s;
}
.love .centrale img#ci {
	transition-delay: 2.5s;
}
.love .centrale img#ca {
	transition-delay: 3s;
}
.love .centrale img#mu {
	transition-delay: 3.5s;
}
.love .centrale img#tr {
	transition-delay: 4s;
}
.love .centrale img#re {
	transition-delay: 4.5s;
}
#about .love .list, #love .list {
	height: auto;
	position: absolute;
	bottom: 5%;
	left: 53%;
	z-index: 999;
}
#love .list {
	left: 40%;
	bottom: 0;
}
#about .love .list h2, #love .list h2 {
	text-align: left;
	font-family: 'Roboto Condensed';
	font-weight: 700;
	font-size: 23px;
	text-transform: uppercase;
	margin-bottom: 10%;
	opacity: 0;
	transition: all .3s ease;
}
#love .list h2 {
	opacity: 1;
	text-align: center;
	margin: 1%;
}
.love .list h2#des {
	transition-delay: 2s;
}
.love .list h2#cin {
	transition-delay: 2.5s;
}
.love .list h2#car {
	transition-delay: 3s;
}
.love .list h2#mus {
	transition-delay: 3.5s;
}
.love .list h2#tra {
	transition-delay: 4s;
}
.love .list h2#rea {
	transition-delay: 4.5s;
}
#titolo{
	height: 40%;
	width: 34%;
	position: absolute;
	top: 0;
	right: 20%;
}
.edu-titolo, #education .edu-icone {
	width: 100%;
	height:auto;
}
#titolo .verticale {
	height: 0;
	left: 50%;
	transition: left .3s ease 1s, width .3s ease 1s, height .3s ease;
	z-index: 998;
}
#titolo .verticale.height, #icone .verticale2.height {
	height: 100%;
}
#titolo .orizzontale{
	width: 0;
	top: 40%;
	right: 32%;
	left: inherit;
	height: 2%;
	transition: height .6s ease 1s, width .3s ease;
}

.edu-titolo .orizzontale{
	width: 60%;
	height: auto;
	margin: 20%;
	background-color: #E1E6E9;
	position:inherit;
	float:left;
}
#titolo .orizzontale.width, #icone .orizzontale2.width {
	width: 80%;
}
#titolo .orizzontale .testo, .edu-titolo .testo {
	height: 100%;
	width: 100%;
	position: relative;
}
#titolo .orizzontale .testo h2, .edu-titolo .testo h2 {
	text-align: right;
	font-size: 23px;
	margin: 2px 5px 0 0;
	opacity: 0;
	transition: all .3s ease 2s;
}
.edu-titolo .testo h2, .edu-titolo .testo h1, .edu-titolo .testo h3 {
	opacity: 1 !important;
}
#titolo .orizzontale .testo h1, .edu-titolo .testo h1 {
	font-size: 20px;
	text-align: center;
	margin-top: 20px;
	opacity: 0;
	transition: all .3s ease 2.5s;
}
.edu-titolo .testo h1 {
	font-size: 36px;
	margin-top: 5%;
	text-transform:uppercase;
	font-family:'Roboto Condensed';
	font-weight:700;
}
.edu-titolo .testo h2 {
	font-size: 25px;
	text-align:center;
	margin-top:2%;
}
.edu-titolo .testo h3 {
	font-size: 16px;
	text-transform: uppercase;
	margin: 5%;
	text-align: center;
}
#titolo .orizzontale .testo h3 {
	font-size: 15px;
	text-transform: uppercase;
	position: absolute;
	bottom: 20px;
	text-align: center;
	opacity: 0;
	transition: all .6s ease 3s;
	float: left;
	z-index:999;
}
.testo h3.left {
	left: -10%;
}
.testo h3.right {
	right: -10%;
}
#about #icone{
	height: 40%;
	width: 40%;
	position: absolute;
	bottom: 0;
	left: 19%;
}
#icone .linee {
	width: 80%;
}
#icone .orizzontale2{
	position: absolute;
	bottom: 35%;
	left: 25%;
	width: 0%;
	height: 2%;
	transition: all .6s ease 1s;
	background-color: #E1E6E9;
	
}

#icone .orizzontale2 .testo{
	position: absolute;
	left: 18%;
	bottom: 0;
	opacity: 0;
	transition: all .3s ease 2.5s;
}
.edu-icone .orizzontale2 .testo, .edu-icone .orizzontale2 .skills .ico, .edu-icone .orizzontale2 .skills h3 {
	opacity: 1 !important;
}
#icone .orizzontale2 .testo h1, .edu-icone .orizzontale2 .testo h1 {
	font-family: 'Abril Fatface';
	text-transform: lowercase;
	font-size: 25px;
}
#icone .orizzontale2 .skills, .edu-titolo .orizzontale .skills {
	width: 50%;
	position: absolute;
	left: 60%;
	top: 0;
}
#icone .orizzontale2 .skills .percentuale, .edu-titolo .orizzontale .skills .percentuale {
	height: 1%;
	background-color: #C1C8E4;
	margin-bottom: 20%;
}
#icone .orizzontale2 .skills .percentuale.uno {
	transition: all .6s ease 3s;
	width: 0;
}
#icone .orizzontale2 .skills .percentuale.due {
	transition: all .6s ease 3.5s;
	width: 0;
}
#icone .orizzontale2 .skills .percentuale.tre {
	width: 0;
	transition: all .6s ease 4s;
}
#icone .orizzontale2 .skills .percentuale.quattro {
	width: 0;
	transition: all .6s ease 4.5s;
}
#icone .orizzontale2 .skills .ico, .edu-icone .orizzontale2 .skills .ico {
	position: absolute;
	left: -15%;
	opacity: 0;
	transition: all .3s ease 2.8s;
}
#icone .orizzontale2 .skills h3, .edu-icone .orizzontale2 .skills h3 {
	position: absolute;
	left: 0;
	margin-bottom: 15%;
	opacity: 0;
}
.skills h3#dw {
	transition: all .6s ease 3s;
}
.skills h3#ai {
	transition: all .6s ease 3.5s;
}
.skills h3#ps {
	transition: all .6s ease 4s;
}
.skills h3#id {
	transition: all .6s ease 4.5s;
}
#icone .verticale2 {
	position: absolute;
	left: 38%;
	bottom: 0;
	height: 0%;
	background-color: #c1c8e4;
	width: 1.5%;
	transition: all .3s ease 1s;
	z-index: 999;
}
#icone .icona {
	width: 10%;
	float: left;
}
#icone .icona a {
	display: inline-block;
	padding: 10%;
	float: right;
}
#icone .icona a img {
	width: 100%;
}
#icone .box-testo{
	float:left;
	margin-top:50px;}
#icone .box-testo h2 {
	font-size: 20px;
	text-align: left;
	font-family: 'Roboto Condensed';
	font-weight: 700;
	text-transform: uppercase;
	margin-top:5px;
	opacity:0;
}
#icone .click {
	width: 10%;
	position: absolute;
	top: 0;
	left: 90px;
}


#icone .icona a:hover .box-testoh2#love1, #icone .ico-edu:hover .box-testoh2#edu1 {
	opacity: 1;
}
#icone .click h3 {
	writing-mode: tb-rl;
	filter: flipv fliph;
	padding-top: 30%;
	opacity: 0;
	transition: opacity .4s ease .2s, left .3s ease;
}
#about .me {
	width: 30%;
	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%);
}
#about .me article {
	float: left;
	width: 18%;
	margin: 1.5%;
	position: relative;
	transition: all .3s ease;
}
#about .me article img {
	width: 100%;
}
#about .me article.uno {
	left: -400px;
	opacity: 0;
}
#about .me article.due {
	top: -200px;
	opacity: 0;
	transition-delay: .3s;
}
#about .me article.tre {
	top: 200px;
	opacity: 0;
	transition-delay: .6s;
}
#about .me article.quattro {
	left: 200px;
	opacity: 0;
	transition-delay: .9s;
}
#about .me article.left {
	opacity: 1;
	top: 0;
	left: 0;
}
#works {
	height: 800px;
	margin: 10% 0;
	position: relative;
}
.hello.works, .hello.contacts {
	width: 100%;
	height: 100%;
	position: relative;
}
.hello.works .orizzontale, .hello.contacts .orizzontale {
	width: 0 !important;
	top: 50%;
	height: 1%;
	transition: width 1s ease !important;
}
.hello.works .orizzontale.width, .hello.contacts .orizzontale.width {
	width: 90% !important;
}
.hello.works .verticale, .hello.contacts .verticale {
	height: 0 !important;
	left: 30%;
	width: 0.5%;
	transition: height 1s ease !important;
}
.hello.works .verticale.height, .hello.contacts .verticale.height {
	height: 95% !important;
}
.hello.works .testo1 {
	position: absolute;
	top: 185px;
	left: 0;
	opacity: 1;
}
#works .lavori {
	width: 60%;
	height: 100%;
	position: absolute;
	left: 32%;
	top: 200px;
}
.quadrato, .opacity {
	width: 160px;
	height: 160px;
	background-color: #C1C8E4;
	float: left;
	margin: 1%;
	position: relative;
	transition: opacity 1s ease;
}
.opacity {
	margin: 0 !important;
}
.quadrato .name {
	width: inherit;
}
.quadrato .name, .opacity .see {
	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%);
}
.quadrato .name h2 {
	font-size: 20px;
	text-align: center;
}
.quadrato .name h3, .opacity h3 {
	text-align: center;
	text-transform: uppercase;
	font-size: 13px;
	padding-top: 5px;
}
.opacity img {
	width: 100%;
	height: 100%;
}
.opacity .see {
	display: block;
	text-decoration: none;
	font-family: 'Roboto Condensed';
	text-transform: uppercase;
	font-size: 11px;
	padding-bottom: 5px;
	color: #ffffff;
	margin-top: 40px;
}
.quadrato .name .see2 {
	display: none;
	color: #000000;
	text-align: center;
	font-size: 10px;
	font-family: 'Roboto Condensed';
	text-transform: uppercase;
	margin-top: 30px;
	font-weight: 700;
}
.see:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 20%;
	bottom: 0;
	left: 0;
	background-color: #C1C8E4;
	animation: see 1.3s infinite;
}
 @keyframes see {
 0% {
 width:0;
}
 100% {
 width:100%;
}
}
.opacity {
	opacity: 0;
}
#contacts {
	height: 100%;
	margin: 10% 0;
	position: relative;
}
.hello.contacts .orizzontale {
	left: inherit;
	right: 0;
	top: 55%;
}
.hello.contacts .verticale {
	left: inherit;
	right: 30%;
}
.hello.contacts .testo1 {
	position: absolute;
	top: 60%;
	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%);
	opacity: 1;
}
#contacts .ico {
	width: 8%;
	position: absolute;
	right: 22%;
	top: 55%;
}
#contacts .ico a {
	float: left;
	padding: 10%;
	text-decoration: none;
	color: #000000;
}
#contacts .ico a img {
	width: 100%;
}
#contacts .testo1 h3 {
	display: none;
}

@media (min-width: 768px) and (max-width: 991px) {
	#home, #about, #contacts{
		height:700px;}
#home h1, #contacts h1 {
	font-size: 30px;
}
#home .centrale h2 {
	font-size: 25px;
}
.testo h3.left {
	left: -15%;
}
.testo h3.right {
	right: -15%;
}
#titolo .orizzontale .testo h3 {
	bottom: 10px;
	z-index: 999;
}
#about #love .list h2 {
	font-size: 20px;
}
.quadrato .name .see2 {
	display: block;
}
}

@media (max-width: 767px) {
	#home, #love, #education, #contacts{
		height:500px;}
#works .lavori {
	width: 62%;
}

.quadrato .name .see2 {
	display: block;
}
.quadrato .name h2 {
	font-size: 15px;
}
.quadrato .name h3 {
	font-size: 10px;
}
#home .centrale h2 {
	font-size: 25px;
}
#home h1, #contacts h1 {
	font-size: 30px;
}
#contacts .ico {
	width: 2%;
}
#contacts {
	margin: 30% 0;
}
#contacts .verticale, #contacts .orizzontale{
	display:none;}
#contacts .testo1{
	width:100%;}
	#contacts .testo1 h1, #contacts .testo1 h3{
		text-align:center;
		margin-top:3%;}
		#contacts .testo1 h3 {
	display: block;
}
		#contacts .testo1 a{
			text-decoration:none;
			color:#000000;}
#contacts .ico a img {
	display: none;
}

#titolo .verticale.height, #icone .verticale2.height {
	height: 50%;
}
#icone .icona {
	display: none;
}
#about .me {
	display: none;
}
#titolo {
	display: none;
}
#icone {
	display: none;
}
#love {
	display: block;
}
#education {
	display: block;
}
#about {
	display: none;
}
#love, #education {
	float: none;
	width: 100%;
}

#love h1 {
	left: 0;
	margin-left: 2%;
}
#love .list {
	left: inherit;
	right: 0;
	margin-right: 2%;
}
#love .list h2 {
	text-align: left;
}
#love .centrale {
	width: 30%;
	left: 50%;
	background-color: #E1E6E9;
}
#love .centrale article {
	width: 27%;
	margin: 3%;
	float: left;
}
.edu-titolo .orizzontale .skills{
	width:50%;
	position:inherit;
	float:right;}
	.edu-titolo .orizzontale .skills .percentuale{
		margin-bottom:10%;}
		.edu-titolo .orizzontale .skills .ico{
			float:left;}
		
				.skills .percentuale.tre{
					width:80%;}
					 .skills .percentuale.quattro{
						 width:70%;}
#works {
	height: auto !important;
}
#works .lavori {
	width: 100%;
	position: inherit;
	left: inherit;
	top: inherit;
}
.lavori .quadrato{
	width: 75%;
	margin: 1% 12.5%;
	height: auto;
}
 
.quadrato .name h2{
	font-size:23px;}
	.quadrato .name h3{
	font-size:15px;}
	.quadrato .name .see2{
		
		font-size:15px;
		margin-top:20px;}
}

@media (max-width: 480px) {
#home {
	height: 400px;
}
#logo {
	width: 40px;
	height: 40px;
}
#home h1 {
	font-size: 30px;
}
#logo {
	opacity: 1;
}
#home h3, .hello .testo1, nav #right, nav #left {
	transition-delay: 1s;
}
#home .centrale {
	opacity: 1;
	left: 50%;
}
#home .centrale h2 {
	font-size: 20px;
	display:none;
}
#about {
	display: none;
}
#love h1 {
	left: 0;
	margin-left: 2%;
}
#love .list {
	left: inherit;
	right: 0;
	margin-right: 2%;
}
#love .list h2 {
	text-align: left;
}
#love .centrale {
	width: 30%;
	left: 50%;
	background-color: #E1E6E9;
}
#love .centrale article {
	width: 27%;
	margin: 3%;
	float: left;
}
#love, #education {
	float: none;
	width: 100%;
	height: 400px;
}
.edu-titolo .testo h1{
	font-size:20px;}
	.edu-titolo .testo h2{
	font-size:18px;}
	.edu-titolo .testo h3{
	font-size:13px;}

}