html
	{
	font: normal 62.5% 'Raleway', Arial, Helvetica, sans-serif;
	color: #8A8A8A;
	}
body,
html
	{
	margin: 0;
	padding: 0;
	height: 100%;
	background: #000;
	overflow: hidden;
	}
.wrapper
	{
	position: relative;
	margin: 0 auto 0px;
	width: 100%;
	max-width: 700px;
	}
.clear { clear: both; }

html, body, h1,h2,h3,p,a,strong,span,em,ul, img, nav, article{
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


@media screen and (max-width: 740px)
	{
	.wrapper
		{
		margin: 0;
		max-width: none;
		}
	
	}

/**********************************************************

M E N U

***********************************************************/
nav
	{
	position: absolute;
	bottom: 0px;
	z-index: 8888;
	width: 100%;
	text-align: center;
	background-color: #000;
	-webkit-transition: bottom .5s;
	transition: bottom .5s;
	}
	
nav.hidden { bottom: -50px; }
nav.hidden a.responsive_ctrl { display: none; }
nav.transparent { background: transparent; }
	nav a.responsive_ctrl
		{
		display: none;
		position: absolute;
		top: -50px;
		width: 100%;
		height: 50px;
		font-size: 2em;
		line-height: 50px;
		background: #000;
		color: #fff;
		text-transform: uppercase;
		cursor: pointer;
		}
	nav a.responsive_ctrl i
		{
		margin: 0 20px;
		}
	nav ul
		{
		margin: 0;
		padding: 0;
		list-style-type: none;
		}
		nav ul li
			{
			display: inline-block;
			margin: 0;
			padding: 0;
			}
		nav ul li.closeNav { display: none; }
		nav ul li.closeNav a { font-size: 4em; }
			nav ul li a
				{
				display: block;
				position: relative;
				top: 0;
				padding: 0 20px;
				font-size: 1.5em;
				font-weight: 600;
				color: #fff;
				letter-spacing: 2px;
				line-height: 50px;
				text-decoration: none;
				text-transform: uppercase;
				box-shadow: 0px 0px 0 0px rgba(255, 255, 255, 0.2) inset;
				-webkit-transition: box-shadow .3s;
				transition: box-shadow .3s;
				}
				nav ul li a:hover
					{
					box-shadow: 0px 5px 0 0px rgba(255, 255, 255, 1) inset;
					}
				nav ul li a.disablehover:hover { box-shadow: none; }
				nav ul li a.selected { box-shadow: 0px -5px 0 0px rgba(255, 255, 255, 1) inset; }
				
div.lang
	{
	position: absolute;
	right: 20px;
	bottom: 0;
	}
	div.lang a
		{
		display: inline-block;
		position: relative;
		top: 0;
		padding: 0 5px;
		font-size: 1.5em;
		font-weight: 600;
		color: #fff;
		line-height: 50px;
		text-decoration: none;
		text-transform: uppercase;
		-webkit-box-shadow: 0px 0px 0 0px rgba(255, 255, 255, 0.2) inset;
		box-shadow: 0px 0px 0 0px rgba(255, 255, 255, 0.2) inset;
		-webkit-transition: box-shadow .3s, color .5s;
		transition: box-shadow .3s, color .5s;
		}
	div.lang a:hover { -webkit-box-shadow: 0px 5px 0 0px rgba(255, 255, 255, 1) inset; box-shadow: 0px 5px 0 0px rgba(255, 255, 255, 1) inset; }
	div.lang a.selected { -webkit-box-shadow: 0px -5px 0 0px rgba(255, 255, 255, 1) inset; box-shadow: 0px -5px 0 0px rgba(255, 255, 255, 1) inset; }
	
nav.hidden div.lang { display: none; }
	
div.fb-container
	{
	position: absolute;
	left: 0;
	top: 0;
	width: 110px;
	height: 50px;
	}
	div.fb-container:hover div.fb-like-container
		{
		left: 15px;
		opacity: 1;
		}
	div.fb-container:hover div.fb-hearth
		{
		left: -60px;
		opacity: 0;
		}

div.fb-like-container
	{
	position: absolute;
	left: -110px;
	bottom: 15px;
	height: 20px !important;
	overflow:hidden !important;
	opacity: 0;
	-webkit-transition: left .4s, opacity .4s;
	transition: left .4s, opacity .4s;
	}
div.fb-hearth
	{
	position: absolute;
	top: 9px;
	left: 20px;
	width: 36px;
	opacity: .8;
	-webkit-transition: left .4s, opacity .4s;
	transition: left .4s, opacity .4s;
	cursor: pointer;
	}
	div.fb-hearth img
		{
		width: 100%;
		}
		
@media screen and (max-width: 700px)
	{
	div.fb-container { display: none !important; }
	nav a.responsive_ctrl { display: block;  }
	nav { top: 100%; bottom: auto; height: 0%; background: rgba(0, 0, 0, 0.85); }
	nav.transparent { background: inherit; }
	nav.opened { top: 0; height: 100%; }
	nav ul { display: none; }
	nav.opened ul { display: block; }
	nav ul li { display: block; }
	nav ul li.closeNav { display: block; }
	nav ul li a	{ font-size: 2em; }
	nav ul li a:hover { box-shadow: none; }
	nav ul li a.selected { box-shadow: none; -webkit-box-shadow: none; }	
	}
@media screen and (max-width: 280px)
	{
	nav a.responsive_ctrl { text-align: left; padding-left: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
	}
/**********************************************************

LOADER

***********************************************************/
#loader
	{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 1;
	-webkit-transition: -webkit-transform 1s, opacity 1s;
	transition: transform 1s, opacity 1s;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
	#loader.done
		{
		opacity: 0;
		-webkit-transform: scale(15);
		-ms-transform: scale(15);
		transform: scale(15);
		}
/**********************************************************

ALERT OLD BROWSERS

***********************************************************/
body > div.alert
	{
	position: fixed;
	z-index: 9999999999;
	width: 100%;
	height: 100%;
	background: #e23434;
	}
	body > div.alert div.box
		{
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -200px 0 0 -150px;
		padding-bottom: 30px;
		border-radius: 10px;
		width: 300px;
		background: #C71E1E;
		}
	body > div.alert div.box h2
		{
		position: relative;
		margin: 50px 50px 20px;
		width: auto;
		font-size: 2.6em !important;
		font-weight: 700;
		color: #fff;
		line-height: 1em !important;
		text-align: left;
		}
	body > div.alert div.box p
		{
		margin: 20px 50px;
		font-size: 1.4em;
		color: #fff;
		line-height: 1.5em;
		}
	body > div.alert div.box a
		{
		color: #FAC046;
		text-decoration: none;
		}
	
/**********************************************************

CONTENT

***********************************************************/
.preload
	{
	display: none;
	}
img { border: none; }
section#world
	{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1100px;
	-ms-perspective: 1100px;
	perspective: 1100px;
	/*
	-webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    */
	}
	#world > section
		{
		position: absolute;
		top: 0;
		bottom: 50px;
		left: 0;
		padding-bottom: 50px;
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;		
		box-sizing: border-box;	
		-webkit-transform: translatex(200%);
		-ms-transform: translatex(200%);
		transform: translatex(200%);
		-webkit-perspective: 1100px;
		-ms-perspective: 1100px;
		perspective: 1100px;
		-webkit-overflow-scrolling: touch;
		}
	#world > section.selected
		{
		z-index: 7777;
		visibility: visible;
		-webkit-transform: translatex(0%);
		-ms-transform: translatex(0%);
		transform: translatex(0%);
		}
		h1
			{
			position: absolute;
			top: -100%;
			left: -100%;
			font-size: 1em;
			color: #000;
			}
		h2
			{
			position: absolute;
			top: 0;
			z-index: 100;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			font-size: 25em;
			font-weight: 500;
			text-align: center;
			text-transform: uppercase;
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			-webkit-transition: -webkit-transform .5s; 
			transition: transform .5s; 
			}			
		 h2.selected
		 	{ 
			-webkit-transform: translate3d(0,-100%,0);
			-ms-transform: translate3d(0,-100%,0);
			transform: translate3d(0,-100%,0);
			}
		 section.container
			{
			position: relative;
			margin: 0 auto 50px;
			max-width: 700px;
			}
	h3.emphasis
		{
		margin: 0px auto 10px;
		padding-top: 50px;
		max-width: 700px;
		font-family: 'Sanchez', serif;
		font-size: 7em;
		font-weight: normal;
		line-height: 1em;
		color: #D1D1D1;
		text-transform: uppercase;
		}
		h3.emphasis strong
			{
			display: block;
			font-weight: normal;
			}
	
	a.special_underline
		{
		display: inline-block;
		position: relative;
		color: #000; 
		text-decoration: none;
		font-weight: bold;
		}	
		a.special_underline:after
			{
			content: "";
			position: absolute;
			bottom: -10px;
			left: 0;
			border-bottom: 3px solid #000;
			width: 100%;
			opacity: 0;
			-webkit-transition: opacity .2s, bottom .2s;
			transition: opacity .2s, bottom .2s;
			}			
		a.special_underline:hover:after {  opacity: 1; bottom: 0; }

	a.scroll_down
		{
		position: absolute;
		bottom: 80px;
		left: 50%;
		margin-left: -30px;
		border-radius: 80px;
		height: 60px;
		width: 60px;
		font-size: 2em;
		color: #7e7e7e;
		line-height: 60px;
		text-align: center;
		background: #fff; 
		box-shadow: 0 0 0 #fff, 0 0 15px rgba(0,0,0,0.2);
		cursor: pointer;
		opacity: 0;
		-webkit-transition: bottom .5s, opacity .5s, box-shadow .3s;
		transition: bottom .5s, opacity .5s, box-shadow .3s;
		}
	a.scroll_down:hover { box-shadow: 0 0 0 5px #fff, 0 0 20px rgba(0,0,0,0.4); }
	a.scroll_down.show { bottom: 60px; opacity: 1; }
	
	.work a.scroll_down { bottom: 30px; }
	.work a.scroll_down.show { bottom: 10px; opacity: 1; }

@media screen and (max-width: 740px)
	{
	h3.emphasis
		{
		margin: 0 30px;
		font-size: 5em;
		line-height: 1.1em;
		}
	
	}
@media screen and (max-width: 440px)
	{
	h3.emphasis
		{
		margin: 0 30px;
		font-size: 4em;
		}
	
	}

@media screen and (max-width: 320px)
	{
	h3.emphasis	{ font-size: 3.5em; }
	}
/**********************************************************

SPECIAL COUNTER

***********************************************************/
.special-counter
	{
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	list-style: none;
	}	
	.special-counter li
		{
		float: left;
		margin: 25px 0px;
		width: 25%;
		text-align: center;
		vertical-align: top;
		}
		.special-counter li div
			{
			height: 100px;
			font-size: 7em;
			line-height: 1em;
			}
			.special-counter li div i
				{
				font-style: normal;
				font-size: .4em;
				}
	.special-counter li p
		{
		display: block;
		margin: 0 10px;
		font-size: 1.4em;
		font-weight: bold;
		line-height: 1.3em;
		text-transform: uppercase;
		}


@media screen and (max-width: 740px)
	{
	.special-counter
		{
		margin: 0 30px;
		width: auto;
		}
	}

@media screen and (max-width: 650px)
	{
	.special-counter li
		{
		width: 50%;
		}
	
		
	}
@media screen and (max-width: 410px)
	{
	.special-counter li
		{
		width: 100%;
		}
	
	}				

/**********************************************************

PAGE 1

***********************************************************/

#world > section.home
	{
	padding: 0;
	background: #000;
	overflow: visible !important;
	}

div.i_am
	{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;	
	background: url('../img/i_am.png') 10% 100% no-repeat;
	background-size: auto 75%;
	opacity: 0;
	-webkit-transform: translate3d( 0, 10%, 0);
	-ms-transform: translate3d( 0, 10%, 0);
	transform: translate3d( 0, 10%, 0);
	-webkit-transition: -webkit-transform 1.5s, opacity 1.5s, bottom .5s;
	transition:  transform 1.5s, opacity 1.5s, bottom .5s;
	}
	section.home.selected div.i_am
		{
		bottom: -50px;
		}
	div.i_am.fadeUp
		{
		-webkit-transform: translate3d(0%, 0%, 0);
		-ms-transform: translate3d(0%, 0%, 0);
		transform: translate3d(0%, 0%, 0);
		opacity: 1;
		}
	div.i_am > div.s
		{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.4);
		}
 canvas#stage
	{
	position: absolute;
	top: 0;
	left: 0;
	}
.home section.container
	{
	margin: 0 auto;
	height: 100%;
	text-align: center;
	}
.home img.logo
	{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	max-width: 70%;
	opacity: 0;
	-webkit-transform: translate3d(-50%, -55%, 0);
	-ms-transform: translate3d(-50%, -55%, 0);
	transform: translate3d(-50%, -55%, 0);
	-webkit-transition: -webkit-transform 1.5s, opacity 1.5s;
	transition:  transform 1.5s, opacity 1.5s;
	}
	.home img.logo.fadeDown
		{
		-webkit-transform: translate3d(-50%, -50%, 0);
		-ms-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		opacity: 1;
		}


@media screen and (orientation: landscape)
	{
	.home img.logo { max-height: 60%; width: auto; }
	
	}				

/**********************************************************

PAGE 2

***********************************************************/

.about h2
	{
	color: #fff;
	background-color: #FD6A62;
	}

.about h3.emphasis strong { color: #FD6A62;	}		
				
.about > p
	{
	margin: 40px auto;
	max-width: 700px;
	font-size: 1.8em;
	line-height: 1.5em;
	}

.about .wrapper h3
	{
	clear: both;
	display: block;
	position: relative;
	margin: 40px 0px;
	padding-bottom: 5px;
	border-bottom: 5px solid #FD6A62;
	max-width: 700px;
	font-size: 2em;
	color: #FD6A62;
	}
	.about a.cv
		{
		position: absolute;
		top: 0px;
		right: 0;
		margin: 0 auto;
		border: none;
		border-radius: 50px;
		width: 65px;
		height: 65px;
		color: #fff;
		line-height: 65px;
		text-align: center;
		text-decoration: none;
		background: #FD6A62;
		-webkit-box-shadow: 0 0px 0px 0px #FD6A62, 0 0px 0px 5px #fff;
		box-shadow: 0 0px 0px 0px #FD6A62, 0 0px 0px 5px #fff;
		-webkit-transition: box-shadow 0.3s;
		transition: box-shadow 0.3s;
		}
		.about a.cv:hover 
			{
			-webkit-box-shadow: 0 0px 0px 8px #FD6A62, 0 0px 0px 13px #fff;
			box-shadow: 0 0px 0px 8px #FD6A62, 0 0px 0px 13px #fff;
			}
	.about a.cv span
		{
		position: absolute;
		top: -18px;
		left: -80px;
		color: #8A8A8A;
		font-family: 'Raleway', Arial, Helvetica, sans-serif;
		font-size: .7em;
		font-weight: bold;
		text-transform: uppercase;
		opacity: 0;
		-webkit-transition: opacity 0.3s,left 0.3s;
		transition: opacity 0.3s,left 0.3s;
		}
		.about a.cv:hover span
			{
			opacity: 1;
			left: -100px;
			}

.about a.special_underline { color: #FD6A62; }	
.about a.special_underline:after {	border-bottom: 3px solid #FD6A62; }

.about .special-counter p { color: #C2C2C2; }	

.about .passions
	{
	position: relative;
	margin: 20px 0 0;
	padding: 0;
	width: 100%;
	text-align: center;
	list-style: none;
	}
	.about .passions li
		{
		display: inline-block;
		position: relative;
		padding: 23px;
		width: 90px;
		height: 90px;
		cursor: default;
		}
	
	.about .passions li img
		{
		display: block;
		margin: 10%;
		width: 80%;
		opacity: .3;
		}
	.about .passions li span
		{
		position: absolute;
		top: 50%;
		left: 0%;
		width: 100%;
		font-size: 1.5em;
		font-weight: 700;
		color: #FD6A62;
		text-align: center;
		opacity: 0;
		-webkit-transition: all .3s;
		transition: all .3s;
		}
	.about .passions li:last-child span { opacity: 1; top: 50%; left: 23px; width: 90px; color: #ccc;}
	
	.about .passions li:hover:not(:last-child) span
		{
		top: 80%;
		left: 0;
		opacity: 1;
		}

@media screen and (max-width: 740px)
	{
	.about .wrapper h3
		{
		margin: 40px 30px;
		}
	.about > p
		{
		margin: 40px 30px;
		}	
	}	
@media screen and (max-width: 410px)
	{
	.about .passions
		{
		text-align: center;
		}
	}
@media screen and (max-width: 320px)
	{
	.about > p { font-size: 1.5em; }
	.about a.cv
		{
		position: relative;
		top: 40px;
		}
		.about a.cv:hover span { opacity: 0; }
	}

/**********************************************************

PAGE 3

***********************************************************/

.skills.noscroll { overflow: hidden !important; overflow-y: hidden !important; }

.skills h2
	{
	color: #fff;
	background-color: rgb(46, 204, 113);
	}
	
.skills h3.emphasis strong { color: #2ecc71; }


.skills .wrapper  h3
	{
	display: block;
	margin: 40px 0px;
	padding-bottom: 5px;
	border-bottom: 5px solid #2ecc71;
	max-width: 700px;
	font-size: 2em;
	color: #2ecc71;
	}

.skills section.aree
	{
	position: relative;
	margin: 20px auto 100px;
	text-align: center;
	-webkit-transition: top .5s;
	transition: top .5s;
	}
	.skills section.aree article
		{
		display: inline-block;
		position: relative;
		margin: 0 auto;
		width: 250px;
		height: 250px;
		-webkit-transition: all .5s;		
		transition: all .5s;
		cursor: pointer;
		}
		.skills section.aree article div
			{
			width: 100%;
			height: 100%;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			-webkit-background-size: 100% 100%;
			background-size: 100% 100%;
			-webkit-transform: scale(.5);
			-ms-transform: scale(.5);
			transform: scale(.5);
			-webkit-transition: all .5s;
			transition: all .5s;
			}
	
	.skills section.aree article.brain div
		{
		background-image: url('../img/brain.png');
		}
	.skills section.aree article.brain:hover div,	
	.skills section.aree article.brain.selected div
		{
		background-image: url('../img/brain-hover.png');
		background-position: 70% 70%;
		-webkit-transform: scale(1) rotate(190deg);
		-ms-transform: scale(1) rotate(190deg);
		transform: scale(1) rotate(190deg);
		}
	.skills section.aree article.heart div
		{
		background-image: url('../img/heart.png');
		}
	.skills section.aree article.heart:hover div,
	.skills section.aree article.heart.selected div
		{
		background-image: url('../img/heart-hover.png');
		background-position: 30% 80%;
		-webkit-transform: scale(1) rotateZ(10deg);
		-ms-transform: scale(1) rotateZ(10deg);
		transform: scale(1) rotateZ(10deg);
		}
	.skills section.aree article.hand div
		{
		background-image: url('../img/hand.png');
		}
	.skills section.aree article.hand:hover div,
	.skills section.aree article.hand.selected div
		{
		background-image: url('../img/hand-hover.png');
		background-position: 60% 20%;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		}
	.skills section.aree article span
		{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 2em;
		font-weight: 600;
		color: #c1c1c1;
		text-align: center;
		text-transform: uppercase;
		opacity: 1;
		-webkit-transform: scale(1);		
		-ms-transform: scale(1);
		transform: scale(1);
		-webkit-transition: all .5s;
		transition: all .5s;
		}
		.skills section.aree article:hover span { bottom: -50px; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }
.skills .abilita
	{
	margin: 0 auto 50px;
	width: 100%;
	}
	.skills .abilita article 
		{
		position: absolute;
		top: -50px;
		left: -50px;
		z-index: 100;
		width: 0px;
		height: 0px;
		border-radius: 1000px;
		padding-bottom: 30px;
		background: #2ecc71;
		overflow: hidden;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;		
		box-sizing: border-box;
		-webkit-transition-timing-function: linear;
		transition-timing-function: linear;
		}
		.skills .abilita article *
			{
			opacity: 0;
			-webkit-transition: opacity .3s;
			transition: opacity .3s;
			}
		.skills .abilita article.selected *
			{
			opacity: 1;
			}
		
		.skills .abilita article h3 
			{
			margin: 100px 20px 30px;
			font-size: 6em;
			color: #000;
			text-align: left;
			text-transform: uppercase;
			}
		.skills .abilita article p.descr 
			{
			margin: 30px 20px;
			padding: 0;
			font-size: 1.8em;
			color: #fff;
			line-height: 1.5em;
			}
		.skills .abilita article div.skillbar
			{
			position: relative;
			margin: 20px;
			height: 30px;
			}
		.skills .abilita article div.skillbar span
			{
			float: left;
			width: 200px;
			font-size: 1.8em;
			font-weight: 700;
			color: #fff;
			line-height: 30px;
			text-transform: uppercase;
			}
		.skills .abilita article .skillbar > div 
			{
			position: absolute;
			left: 200px;
			top: 10px;
			right: 0;
			bottom: 10px;
			border-radius: 5px;
			height: 10px;
			background: #fff;
			overflow: hidden;
			}
			.skills .abilita article .skillbar div > div 
				{
				border-radius: 5px;
				width: 0px;
				height: 10px;
				background: #000;
				-webkit-transition: background .3s;
				transition: background .3s;
				}
		.skills .abilita article > a 
			{
			display: block;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -50px;
			width: 100px;
			font-size: 5em;
			color: #fff;
			line-height: 100px;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			-webkit-transition: -webkit-transform .2s;
			transition: transform .2s;
			}
		.skills .abilita article > a:hover 
			{
			-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
			transform: rotate(180deg);
			}
				
	.skills .trasversali .special-counter p
		{
		color: #2ecc71;
		}
	@-moz-document url-prefix()
		{
		.skills .trasversali .special-counter
			{
			margin-bottom: 150px;
			}
		}


@media screen and (max-width: 740px)
	{
	.skills .wrapper h3
		{
		margin: 40px 30px;
		}
	.skills section.aree article
		{
		display: block;
		}		
	.skills .abilita article h3
		{
		font-size: 5em;	
		}
	}
		
@media screen and (max-width: 540px)
	{
	.skills .abilita article h3
		{
		font-size: 3em;	
		}
		.skills section.abilita article div.skillbar
			{
			height: auto;
			}
			.skills section.abilita article div.skillbar span
				{
				float: none;
				}
			.skills section.abilita article div.skillbar > div
				{
				position: static;
				top: auto;
				left: auto;
				}
		
	}	
@media screen and (max-width: 320px)
	{
	.skills .abilita article h3
		{
		font-size: 2.2em;	
		}	
	.skills .abilita article p.descr,
	.skills .abilita article div.skillbar span
		{
		font-size: 1.5em;
		}
	
	}	
/**********************************************************

PAGE 4

***********************************************************/
#world > section.work
	{ 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;		
	box-sizing: border-box;
	overflow-y: hidden !important;
	}
.work h2
	{
	color: #fff;
	background-color: rgb(253, 193, 98);
	}
	.work aside
		{
		position: absolute;
		left: -90px;
		top: 0;
		bottom: 0px;
		z-index: 10;
		width: 250px;
		background: #fdc162;
		overflow-y: auto;
		-webkit-transition: left .3s ease-out;
		transition: left .3s ease-out;
		}
		.work aside ul
			{
			margin: 0;
			padding: 0;
			list-style: none;
			}
			.work aside ul li
				{
				position: relative;
				display: block;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				}
				.work aside ul li a
					{
					display: block;
					width: 250px;
					height: 100%;
					color: inherit;
					text-decoration: none;
					}
				.work aside ul li a:before
					{
					content: "";
					position: absolute;
					top: -100px;
					left: -450px;
					z-index: 0;
					width: 400px;
					height: 310px;
					background: rgba(255,255,255,0.34);				
					-webkit-transition: left .6s ease-out;
					transition: left .6s ease-out;
					-webkit-transform: rotate(-10deg);
					-ms-transform: rotate(-10deg);
					transform: rotate(-10deg);
					}
				.work aside ul li a:hover:before,				
				.work aside ul li a.selected:before
					{
					left: -50px;
					}
				.work aside ul li img
					{
					float: left;
					margin-right: 20px;
					width: 90px;
					-webkit-filter: grayscale(100%);
					filter: grayscale(100%);
					filter: gray;
					filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
					-webkit-transition: all .3s;
					transition: all .3s;
					}
				.work aside ul li a:hover img,
				.work aside ul li a.selected img
					{
					filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
					-webkit-filter: grayscale(0%);
					filter: none;
					}
				.work aside ul li strong
					{		
					display: table-cell;
					width: 120px;
					height: 90px;
					font-size: 1.6em;
					color: #FFFFFF;
					text-shadow: 0 0px 1px #FFFFFF;
					text-transform: uppercase;
					vertical-align: middle;
					}
		
		.work aside:hover
			{
			left: 0px;
			}			
		.work aside:hover + section.container
			{
			opacity: .5;
			}
	.work section.container
		{
		position: absolute;
		top: 0;
		bottom: 0px;
		left: 160px;
		margin: 0;
		max-width: 100%;
		max-height: 100%;
		overflow: hidden;
		-webkit-transition: opacity .5s;
		transition: opacity .5s;
		}
		
	.work.selected section.container
		{
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		}
	
		.work section.container img
			{
			display: block;
			width: 100%;
			}
		.work section.container h3
			{
			float: left;
			margin: 150px 0px 50px 50px;
			padding: 0;
			width: calc(100% - 230px);
			max-width: none;
			font-size: 15em;
			font-weight: bold;
			line-height: .8em;
			text-transform: uppercase;
			}
		.work section.container ul.tags
			{
			clear: both;
			margin: 50px 0px 50px 50px;
			padding: 0;
			width: calc(100% - 200px);
			font-size: 3em;
			text-transform: uppercase;
			list-style: none;
			}
			.work section.container ul.tags li
				{
				margin: 0 0 20px 0;
				padding-left: 20px;
				border-left: 5px solid #fdc162;
				}
			.work section.container ul.tags li:last-child
				{
				border-left: 0;
				padding-left: 0;
				}
			.work section.container ul.tags li:last-child:before
				{
			    content: "";
			    width: 30px;
			    height: 5px;
			    display: inline-block;
			    margin-right: 6px;
			    background: black;
				}
			
		.work section.container a.toWebsite
			{
			float: right;
			margin: 180px 50px 0 0;
			width: 100px;
			height: 100px;
			border-radius: 50px;
			font-size: 4em;
			background: #000;
			text-align: center;
			text-decoration: none;
			color: #fff;
			line-height: 100px;
			-webkit-transition: background .3s;
			transition: background .3s;
			}
		.work section.container a.toWebsite:hover
			{
			background: rgb(253, 193, 98);
			}
			
		.work div.thanksforwatching
			{
			display: table;
			width: 100%;
			height: 100%;
			background: #fdc162;
			}
			.work div.thanksforwatching p
				{
				display: table-cell;
				position: relative;
				font-size: 4em;
				color: #fff;
				line-height: 100%;
				text-align: center;
				text-transform: uppercase;
				vertical-align: middle;
				}	
			.work div.thanksforwatching p span
				{
				padding: 20px 50px;
				border: 1px solid #fff;
				}
				
@media screen and (max-width: 1260px)
	{
	.work section.container h3
		{
		font-size: 12em;
		}
	}
		
@media screen and (max-width: 1140px)
	{
	.work section.container h3
		{
		font-size: 10em;
		}
	}
@media screen and (max-width: 1000px)
	{
	
	.work aside
			{
			left: -90px;
			opacity: 1;
			}
	.work aside:hover
			{
			left: -90px;
			}			
		.work aside:hover + section.container
			{
			left: 160px;
			opacity: 1;
			}
	
	.work section.container h3
		{
		margin: 150px 50px 50px;
		width: auto;
		font-size: 7em;
		}
	.work section.container a.toWebsite
		{
		clear: both;
		float: left;
		margin: 0px 50px 50px 50px;
		width: 80px;
		height: 80px;
		font-size: 3em;
		line-height: 80px;
		background: rgb(253, 193, 98);
		}
	.work section.container ul.tags
		{
		font-size: 2.2em;
		}
	.work div.thanksforwatching p { font-size: 2.8em; }
	}	
@media screen and (max-width: 740px)
	{
	.work aside
		{
		display: none;
		}
	.work section.container
		{
		left: 0;	
		}
		.work section.container h3
			{
			margin: 150px 30px 30px;
			}
		.work section.container a.toWebsite
			{
			margin: 0px 30px 30px 30px;
			}
		.work section.container ul.tags
			{
			margin: 30px;
			}		
	.work div.thanksforwatching p { font-size: 3em; }
	}	
@media screen and (max-width: 560px)
	{
	.work section.container h3
		{
		font-size: 4em;
		}
	.work section.container a.toWebsite
		{
		width: 60px;
		height: 60px;
		font-size: 2.5em;
		line-height: 60px;
		}
	.work section.container ul.tags
		{
		font-size: 1.6em;
		}
	.work div.thanksforwatching p { font-size: 2em; }
	}
@media screen and (max-width: 400px)
	{
	.work div.thanksforwatching p { font-size: 1.6em; }
	}
@media screen and (max-width: 320px)
	{
	.work section.container h3
		{
		margin: 50px 30px 30px;
		font-size: 3em;
		}
	.work div.thanksforwatching p { font-size: 1.3em; }
	.work div.thanksforwatching p span	{ padding: 10px; }
	}
/**********************************************************

PAGE 5

***********************************************************/



.contact h2
	{
	color: #fff;
	background-color: #7BB7FA;
	}
	
	.contact h3.emphasis strong { color: #7BB7FA; }	
	
.contact  p
	{
	margin: 40px 0;
	font-size: 1.8em;
	line-height: 1.5em;
	}

.contact a.special_underline { color: #7BB7FA; }	
.contact a.special_underline:after {	border-bottom: 3px solid #7BB7FA; }

		
.contact ul.social 
	{
	float: right;
	margin: 40px 0;
	padding: 0;
	list-style: none;
	}
	.contact ul.social li
		{
		float: left;
		margin-left: 20px;
		}
		.contact ul.social li a 
			{
			position: relative;
			top: 0;
			border: none;
			border-radius: 50px;
			padding: 10px;
			width: 50px;
			height: 50px;
			font-size: 3em;
			line-height: 50px;
			color: #fff;
			text-align: center;
			text-decoration: none;
			background: #7BB7FA;
			-webkit-box-shadow: 0 0px 0px 0px #7BB7FA;
			box-shadow: 0 0px 0px 0px #7BB7FA;
			-webkit-transition: box-shadow 0.3s;
			transition: box-shadow 0.3s;
			}
		.contact ul.social li a:hover 
			{
			-webkit-box-shadow: 0 0px 0px 8px #7BB7FA;
			box-shadow: 0 0px 0px 8px #7BB7FA;
			}
			
			
.contact form
	{
	clear: both;
	position: relative;
	margin: 0 0 130px;
	}
	.contact form fieldset 
		{
		position: relative;
		margin: 0;
		padding: 0;
		border: none;
		}		
	.contact div.component
		{
		display: none;
		width: calc(100% - 80px);
		height: 100%;
		}		
	.contact label
		{
		position: absolute;
		top: 0;
		display: block;
		margin: 0 0 20px 0;
		font-size: 3em;
		font-weight: bold;
		line-height: 30px;
		text-transform: uppercase;
		opacity: 1;
		-webkit-transition: top .4s, opacity .3s;
		transition: top .4s, opacity .3s;
		}	
		
	.contact div.component.pre_selected label
		{
		top: -20px;
		opacity: 0;
		}		
	.contact div.component.selected
		{
		display: inline-block;
		}
		
	.contact form input[type="text"]
		{
		display: inline-block;
		margin-top: 50px;
		padding: 20px 20px;
		border: 4px solid #7BB7FA;
		border-right: none;
		width: 100%;
		height: 80px;
		font-size: 2.5em;
		color: #7BB7FA;
		line-height: 40px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;		
		box-sizing: border-box;
		}
	.contact form input:focus 
		{
		outline: none;
		}
	.contact form textarea 
		{
		display: block;
		margin-top: 50px;
		padding: 20px 20px;
		border: 4px solid #7BB7FA;
		width: 100%;
		height: 80px;
		font-size: 2.5em;
		color: #7BB7FA;
		line-height: 40px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;		
		box-sizing: border-box;
		}
	.contact form textarea:focus 
		{
		outline: none;
		}
	::-webkit-input-placeholder { font-size: .7em; font-style: oblique; color: #B1D2E7; }
	:-moz-placeholder { font-size: .7em; font-style: oblique; color: #B1D2E7; }
	::-moz-placeholder { font-size: .7em; font-style: oblique; color: #B1D2E7; }
	:-ms-input-placeholder { font-size: .7em; font-style: oblique; color: #B1D2E7; }
		
	.contact form div.go
		{
		position: absolute;
		top: 50px;
		right: 0;
		width: 80px;
		height: 80px;
		}
	.contact form a.submit
		{
		display: block;
		border: none;
		padding: 0;
		border: 4px solid #7BB7FA;
		border-left: none;
		width: 100%;
		height: 100%;
		font-size: 3em;
		color: #7BB7FA;
		line-height: 80px;
		text-align: center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;		
		box-sizing: border-box;
		cursor: pointer;
		-webkit-transition: padding .3s;
		transition: padding .3s;
		}
	.contact form a.submit:hover { padding: 0 0 0 15px; }
	.contact form p
		{
		margin: 0;
		padding: 5px 0;
		font-size: 2em;
		line-height: 1.4em;
		}
	.contact form p.ko
		{
		padding: 20px;
		font-size: 3em;
		color: #fff;
		background: #e24242;
		}
	.contact form p.ok
		{
		padding: 20px;
		font-size: 3em;
		color: #fff;
		background: #46aa4e;
		}
		
		
@media screen and (max-width: 740px) 
	{
	.contact section.container > p
		{
		margin: 40px 30px;
		}
	.contact form
		{
		display: none;
		}
	.contact ul.social { margin: 40px 30px; }
	.contact form input 
		{
		width: 100%;
		}
	}

@media screen and (max-width: 320px) 
	{
	.contact section.container > p
		{
		font-size: 1.5em;
		}
	}

/**********************************************************

CUUL EFFECT
IMPORTANT: put before all !!

***********************************************************/

.cuul
	{
	-webkit-transition: all 1s !important;
	transition: all 1s !important;
	}
.fadeInDown
	{
	-webkit-transform: translate3d(0,-100px,0);
	-ms-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);
	opacity: 0;
	}
.rotateXInDown
	{
	-webkit-transform: translate3d(0,-30px,0) rotateX(60deg);
	-ms-transform: translate3d(0,-30px,0) rotateX(60deg);
	transform: translate3d(0,-30px,0) rotateX(60deg);
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	opacity: 0 ;
	}
.scaleIn
	{
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	}
.cuul-animated
	{		
	opacity: 1;
	-webkit-transform: rotateX(0) rotateY(0) translateX(0) translateY(0) translate3d(0,0,0) scale(1);
	-ms-transform: rotateX(0) rotateY(0) translateX(0) translateY(0) translate3d(0,0,0) scale(1);
	transform: rotateX(0) rotateY(0) translateX(0) translateY(0) translate3d(0,0,0) scale(1);
	}