@charset "UTF-8";

body, html {
	margin, padding: 0
	}

#container { 
	width: 100%;
	overflow:hidden;
}

.clearflot {
	clear:both;
}

menu {
	max-width:1280px;
	height:32px;
	margin:0 auto;
	margin-top:20px;
	
}


	
ul {
	float:right;
	height: 32px;
	margin-top:0;
	max-width:678px;	
	margin-right: 20px;
	}

li {
	width: 80px;
	height: 23px;
	margin-right:10px;
	list-style:none;
	float:left;
	color:#FFFFFF;
	text-align:center;
	font-size:16px;
	font-family: 'bebas_neue_regularregular';
	padding-top:7px;
	border-color:transparent;
	border-width:1px;
	border-style:solid;
	}

li:hover {
	border-color:white;
	}

li.social {
	width:30px;
	height:23px;
	}
	
li.social#facebook {
	background-image:url(../img/face.png);
}

li.social#twitter {
	background-image:url(../img/TWITTER.png);
}


li.social#behance{
	background-image:url(../img/BE.png);
}

/* INIZIO FORM RICERCA */
#search {
	display:none;
}

li.social#search {
	background-image:url(../img/CERCA.png);
}

form, .label {
	float: right;
	position: relative;
	top: 10px;
	right: 23px;
	display:none;
}

/* FINE FORM RICERCA */

.logo {
	background-image:url(../img/logo.png);
	width:189px;
	height: 32px;
	float:left;
}

.firma .logo {
	margin: 0 auto;
	float:none;
	margin-top:12px;
	background-image:url(../img/logo_f.png);
	background-repeat:no-repeat;
	background-position:center;
}
	
.firma .logo:hover {
	background-image:url(../img/logo_f_h.png);
}

header {
	width:100%;
	height: 970px;
	background-image:url(../img/header.jpg);
	background-size:cover;
	overflow:hidden;
	z-index:10;
}

#andreamaio {
	width:500px;
	height:185px;
	text-align:center;
	top:170px;
	margin:0 auto;
	position:relative;
}

#andreamaio h1 {
	font-size:73px;
	color:white;
	letter-spacing:2px;
	text-shadow: 0px 3px 0px #000000;
	font-family: 'nexa_lightregular';
	text-align:center;
	margin-bottom:5px;
}

#andreamaio h2 {
	font-size:35px;
	color:white;
	text-shadow: 0px 3px 0px #000000;
	font-family: 'harbell_personal_use_onlyRg';
	text-align:center;
	margin-bottom:20px;
	font-style:normal;
}

#andreamaio h3 {
	font-size:25px;
	color:white;
	text-shadow: 0px 2px 0px #000000;
	font-family: 'nexa_lightregular';
	text-align:center;
	letter-spacing:1px;
	border: 2px solid white;
	padding: 5px;
	padding-bottom: 2px;
}

.scroll {
	width:60px;
	height:63px;
	background-image:url(../img/scroll.png);
	background-repeat:no-repeat;
	margin:0 auto;
	margin-top:120px;
	-webkit-transition:  all 200ms ease-out 0;
	-moz-transition: all 200ms ease-out 0;
	-ms-transition:  all 200ms ease-out 0;
	-o-transition:  all 200ms ease-out 0;
	transition: all 200ms ease-out 0;
}

.scroll:hover {
	margin-top:140px;
	-webkit-transition:  all 200ms ease-in 0;
	-moz-transition: all 200ms ease-in 0;
	-ms-transition:  all 200ms ease-in 0;
	-o-transition:  all 200ms ease-in 0;
	transition: all 200ms ease-in 0;
}

#portfolio {
	background-image:url(../img/ipad2.png);
	background-repeat:no-repeat;
	background-position:center;
	width:900px;
	height:701px;
	margin:0 auto;
	z-index:1000;
	top: -220px;
	position:relative;
}


.container-slider {
	max-width:700px;
	max-height:510px;
	margin: 0 auto;
	z-index:100;
	overflow:hidden;
	top:77px;
	position:relative;
	}


.bottone {
	width: 200px;
	height:54px;
	margin:0 auto;
	bottom: 55px;
	background-image:url(../img/portfoliotesto.png);
	background-position:center;
	background-repeat:no-repeat;
	z-index:9999;
	position:relative;
}

.bottone:hover {
	background-image:url(../img/portfoliotesto_h.png);
	}

#philosophy {
	width: 100%;
	background-color:#FFF;
	padding-top:100px;
	margin-top: -210px;
	}

#philosophy h1 {
	background-image:url(../img/philosophy.png);
	width:613px;
	height:61px;
	margin: 0 auto;
	margin-bottom:35px;
	}

#philosophy p{
	margin: 0 auto;
	max-width: 615px;
	height:auto;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	margin-bottom:35px;
	line-height:1.4em;
}

.steps {
    width: 790px;
    margin: 50px auto;
    position: relative;
	margin-bottom: 160px;
}
.step_normale,
.step_scuro {
	transition: width 500ms 0 ease-out;
}
.step_normale:hover + .step_scuro,
.step_scuro:hover {
    width: 100%
}
.step_scuro {
    position: absolute;
    top: 0;
    width: 0%;
    overflow: hidden;
}


.skills {
	height: 1070px;
	width: 100%;
	background-color:#241e20;
		}
	
#dentino {
	background-image:url(../img/dentino.png);
	background-repeat:repeat;
	width: 100%;
	height: 17px;
	top:-17px;
	position:relative;
	}

#dentino2 {
	background-image:url(../img/dentino2.png);
	background-repeat:repeat;
	width: 100%;
	height: 17px;
	position:relative;
	}

.skills h1 {
	background-image:url(../img/skills.png);
	width:256px;
	height:60px;
	margin: 0 auto;
	margin-top:160px;
	margin-bottom:35px;
	}

.skills p{
	margin: 0 auto;
	max-width: 615px;
	height:auto;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	margin-bottom:105px;
	line-height:1.4em;
	color: white;
}

#software {
	width:650px;
	height:190px;
	margin:0 auto;
	margin-bottom:35px;
	margin-top:35px;
}



.ai {
	background-image:url(../img/ai.png);
	width:166px;
	height:166px;
	float:left;
	margin-top:-35px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
	}

.ai:hover {
	background-image:url(../img/ai_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.ai h5 {
	top:60px;
}

.ai:hover h5 {
	color: black;
	top:60px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.ps {
	background-image:url(../img/ps.png);
	width:190px;
	height:190px;
	margin: 0 auto;
	margin-top:-35px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
	}

.ps:hover {
	background-image:url(../img/ps_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.ps h5 {
	top:85px;
}

.ps:hover h5 {
	color: black;
	top:85px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}
	

.rh {
	background-image:url(../img/rh.png);
	width:166px;
	height:166px;
	float:right;
	margin-top:-35px;
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.rh:hover {
	background-image:url(../img/rh_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.rh h5 {
	top:62px;
}

.rh:hover h5 {
	color: black;
	top:62px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.dw {
	background-image:url(../img/dw.png);
	width:166px;
	height:166px;
	float:left;
	margin-top:-60px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
	}

.dw h5 {
	top:55px;
}

.dw:hover {
	background-image:url(../img/dw_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

	
.dw:hover h5 {
	color: black;
	top:55px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.html {
	background-image:url(../img/html.png);
	width:190px;
	height:190px;
	margin: 0 auto;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
	}

.html:hover {
	background-image:url(../img/html_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.html h5 {
	top:70px;
}

.html:hover h5 {
	color: black;
	top:70px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.css {
	background-image:url(../img/css.png);
	width:166px;
	height:166px;
	float:right;
	margin-top:-60px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.css h5 {
	top:70px;
}

.css:hover {
	background-image:url(../img/css_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

	
.css:hover h5 {
	color: black;
	top:70px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

h5 {
	color:transparent;
	font-family: 'bebas_neuebold';
	font-size:22px;
	text-align:center;
	margin:0 auto;
	position:relative;
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
	}
	
h4 {
	color: black;
	font-family: 'bebas_neuebold';
	font-size:22px;
}


.ps h4 {
	position: relative;
	top: -32px;
	left: 80px;
}

.html h4 {
	position: relative;
	top: 125px;
	left: 80px;
}

.ai h4 {
	margin-left:15px;
	margin-top:-30px;
}

.rh h4 {
	margin-right:15px;
	margin-top:-30px;
	float:right;
}

.dw h4 {
	margin-left:15px;
	margin-top:75px;
}

.css h4 {
	margin-right:15px;
	margin-top:101px;
	float:right;
}

.curriculum {
	background-image:url(../img/curriculum.png);
	background-position:center;
	background-repeat:no-repeat;
	width:328px;
	height:32px;
	margin:0 auto;
	margin-top:70px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.curriculum:hover {
	background-image:url(../img/curriculum_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.hobbies {
	height:760px;
	width:100%;
	background-color:white;
}

.hobbies h1 {
	background-image:url(../img/hobbies.png);
	background-repeat:no-repeat;
	background-position:center;
	width:314px;
	height:60px;
	margin: 0 auto;
	margin-top:160px;
	margin-bottom:35px;
	}

.hobbies p{
	margin: 0 auto;
	max-width: 615px;
	height:auto;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	margin-bottom:50px;
	line-height:1.4em;
	color: #241e20;
}

h6 {
	color:transparent;
	font-family: 'bebas_neuebold';
	font-size:16px;
	text-align:center;
	margin:0 auto;
	position:relative;
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
	max-width:140px;
	top:35px;
	}

.football {
	height:167px;
	width:131px;
	background-image:url(../img/football.png);
	float: left;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
	}
	
.football:hover {
	background-image:url(../img/football_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
	}
	
.football:hover h6 {
	color: black;
	top:45px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}


.pizza {
	height:167px;
	width:131px;
	background-image:url(../img/pizza.png);
	margin: 0 auto;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.pizza:hover {
	background-image:url(../img/pizza_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}


.pizza:hover h6 {
	color: black;
	top:45px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.gym {
	height:167px;
	width:131px;
	background-image:url(../img/gym.png);
	float: right;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}


.gym:hover {
	background-image:url(../img/gym_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.gym:hover h6 {
	color: black;
	top:45px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.radio {
	height:166px;
	width:153px;
	background-image:url(../img/radio.png);
	float: left;
	margin-left: 100px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.radio:hover {
	background-image:url(../img/radio_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.radio:hover h6 {
	color: black;
	top:45px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.cinema {
	height:166px;
	width:153px;
	background-image:url(../img/cinema.png);
	float: right;
	margin-right: 100px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

.cinema:hover {
	background-image:url(../img/cinema_h.png);
	-webkit-transition:  all 300ms ease-in 0;
	-moz-transition: all 300ms ease-in 0;
	-ms-transition:  all 300ms ease-in 0;
	-o-transition:  all 300ms ease-in 0;
	transition: all 300ms ease-in 0;
}

.cinema:hover h6 {
	color: black;
	top:45px;
	-webkit-transition:  all 300ms ease-out 0;
	-moz-transition: all 300ms ease-out 0;
	-ms-transition:  all 300ms ease-out 0;
	-o-transition:  all 300ms ease-out 0;
	transition: all 300ms ease-out 0;
}

footer {
	height:545px;
	width:100%;
	background-image:url(../img/footer.png);
	background-position:center;
	background-size:cover;
	position: absolute;
}

footer h1 {
	background-image:url(../img/contact.png);
	background-repeat:no-repeat;
	background-position:center;
	width:349px;
	height:56px;
	margin: 0 auto;
	margin-top:160px;
	margin-bottom:35px;
	}

footer p {
	margin: 0 auto;
	max-width: 615px;
	height:auto;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	margin-bottom:35px;
	line-height:1.4em;
	color: white;
}

#contact {
	width:455px;
	height:66px;
	margin:0 auto;
}

#contact .cell {
	height:67px;
	width:67px;
	margin-right:30px;
	background-image:url(../img/cell.png);
	background-repeat:no-repeat;
	float:left;
}

#contact .cell:hover {
	background-image:url(../img/cell_h.png);
}

#contact .mail {
	height:67px;
	width:67px;
	margin-right:30px;
	background-image:url(../img/email.png);
	background-repeat:no-repeat;
	float:left;
}

#contact .mail:hover {
	background-image:url(../img/email_h.png);
}

#contact .fb_f {
	height:67px;
	width:67px;
	margin-right:30px;
	background-image:url(../img/faceb.png);
	background-repeat:no-repeat;
	float:left;
}

#contact .fb_f:hover {
	background-image:url(../img/faceb_h.png);
}

#contact .tw_f {
	height:67px;
	width:67px;
	margin-right:30px;
	background-image:url(../img/twit.png);
	background-repeat:no-repeat;
	float:left;
}

#contact .tw_f:hover {
	background-image:url(../img/twit_h.png);
}

#contact .be_f {
	height:67px;
	width:67px;
	background-image:url(../img/beh.png);
	background-repeat:no-repeat;
	float:left;
}

#contact .be_f:hover {
	background-image:url(../img/beh_h.png);
}

.firma {
	height:50px;
	width:100%;
	background-color:#241e20;
	bottom:0;
	position:absolute
	}


/*MODIFICARE SOLO IL MENU'*/
	
@media (min-width : 768px) 
and (max-width : 991px) {
	
	menu {
	width:189px;
	height:32px;
}

.logo {
	margin: 0 auto;
	float:left;
	margin-left:-15px;
	}

ul {
	display: none;
}

	
	.step_normale img, .step_scuro img{
    width: 600px;
    height: 239px;
}
	.steps {
		margin:0 auto;
		 width: 600px;
    	height: 239px;
		margin-bottom: 160px;
		position:relative;
	}
	
	#portfolio {
	background-image:none;
	width:100%;
	height:auto;
	margin:0 auto;
	z-index:1000;
	top: -220px;
	position:relative;
}

.bx-controls {
		display:none;
	}

.container-slider {
	max-width:991px;
	max-height:510px;
	margin: 0 auto;
	z-index:100;
	overflow:hidden;
	top:75px;
	position:relative;
	margin-bottom:50px;
	margin-top:-90px;
	}
	
}

@media (max-width : 767px) {

menu {
	width:189px;
	height:32px;
	}

.logo {
	margin: 0 auto;
	float:left;
	margin-left:-15px;
	}

ul {
	display: none;
}


header {
	width:100%;
	height:600px;
	background-image:url(../img/header.jpg);
	background-size:cover;
	overflow:hidden;
	z-index:10;
}

#andreamaio {
	width:100%;
	text-align:center;
	top:120px;
	margin:0 auto;
	margin-left: 10px;
	margin-right: 10px;
	position:relative;
}

#andreamaio h1 {
	font-size:30px;
	color:white;
	letter-spacing:0.2em;
	text-shadow: 0px 3px 0px #000000;
	font-family: 'nexa_lightregular';
	text-align:center;
	margin-bottom:5px;
}

#andreamaio h2 {
	font-size:25px;
	color:white;
	text-shadow: 0px 3px 0px #000000;
	font-family: 'harbell_personal_use_onlyRg';
	text-align:center;
	margin-bottom:20px;
	font-style:normal;
}

#andreamaio h3 {
	display:none;
}

.scroll {
	width:70px;
	height:63px;
	background-image:url(../img/scroll.png);
	background-repeat:no-repeat;
	margin:0 auto;
	margin-top:50px;
	-webkit-transition:  all 200ms ease-out 0;
	-moz-transition: all 200ms ease-out 0;
	-ms-transition:  all 200ms ease-out 0;
	-o-transition:  all 200ms ease-out 0;
	transition: all 200ms ease-out 0;
}

.scroll:hover {
	margin-top:50px;
	-webkit-transition:  all 200ms ease-out 0;
	-moz-transition: all 200ms ease-out 0;
	-ms-transition:  all 200ms ease-out 0;
	-o-transition:  all 200ms ease-out 0;
	transition: all 200ms ease-out 0;
}
	
	#portfolio {
	background-image:none;
	width:100%;
	min-height:300px;
	margin:0 auto;
	position:relative;
}

	.bx-controls {
		display:none;
	}

	.bx-wrapper img {
	width: 100%;
	min-height:230px;
	display: block;
	overflow:hidden;
}


.container-slider {
	max-width:991px;
	max-height:300px;
	margin: 0 auto;
	overflow:hidden;
	top:75px;
	position:relative;
	margin-bottom:50px;
	}
	
.bottone {
bottom: 87px;
}

#philosophy {
	width: 100%;
	background-color:#FFF;
	padding-top:0;
	margin-top: -535px;
	}
	

#philosophy h1 {
	background-image:url(../img/philosophy.png);
	background-repeat:no-repeat;
	background-size:cover;
	width:300px;
	height:30px;
	margin: 0 auto;
	margin-bottom:15px;
	}

#philosophy p{
	font-size:12px;
	max-width:280px;
}

.steps {
    width: 277px;
	height: 587px;
	background-image:url(../img/steps_s.png);
	background-size:cover;		
    margin: 0px auto;
    position: relative;
	margin-bottom: 60px;
}

.steps:hover {
	background-image:url(../img/steps_s_h.png);

}

.step_normale img, .step_scuro img{
    display:none;
}


.skills {
	height: 1330px;
	width: 100%;
	background-color:#241e20;
		}
	
.skills h1 {
	background-image:url(../img/skills.png);
	background-size:cover;
	background-repeat:no-repeat;
	width:128px;
	height:30px;
	margin: 0 auto;
	margin-top:65px;
	margin-bottom:15px;
	}

.skills p{
	font-size:12px;
	max-width:280px;
}


#software {
	width:270px;
	height:378px;
	margin:0 auto;
	margin-bottom:35px;
	margin-top:0;
}



.ai {
	background-image:url(../img/ai.png);
	background-position:center;
	float:left;
	width:166px;
	height:166px;
	margin-top:-85px;
	}


.ps {
	background-image:url(../img/ps.png);
	background-position:center;
	float:left;
	width:190px;
	height:190px;
	margin: 0 auto;
	margin-left:-10px;
	margin-top:-30px;
	margin-bottom:10px;
	}


.rh {
	background-image:url(../img/rh.png);
	width:166px;
	height:166px;
	float:right;
	margin-top:-10px;
}


.dw {
	background-image:url(../img/dw.png);
	background-position:center;
	width:166px;
	height:166px;
	float:right;
	margin-top:-25px;
	}


.html {
	background-image:url(../img/html.png);
	background-position:center;
	float:right;
	width:190px;
	height:190px;
	margin: 0 auto;
	margin-top:-10px;
	margin-right:-10px;
	}

.css {
	background-image:url(../img/css.png);
	width:166px;
	height:166px;
	float:left;
	margin-top:-10px;
}

.curriculum {
background-image: url(../img/curriculum.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 275px;
height: 26px;
margin: 0 auto;
margin-top: 120px;
margin-bottom: 20px;
}

.hobbies {
	height:940px;
	width:100%;
	background-color:white;
}

.hobbies h1 {
	background-image:url(../img/hobbies.png);
	background-size:cover;
	background-repeat:no-repeat;
	width:162px;
	height:30px;
	margin: 0 auto;
	margin-top:65px;
	margin-bottom:15px;
	}

.hobbies p{
	margin: 0 auto;
	max-width: 300px;
	font-size:12px;
	margin-bottom:20px;
}

.football {
	height:167px;
	width:131px;
	background-image:url(../img/football.png);
	float: left;
}


.pizza {
	height:167px;
	width:131px;
	background-image:url(../img/pizza.png);
	float: left;
	margin-top:130px;
}

.gym {
	height:167px;
	width:131px;
	background-image:url(../img/gym.png);
	float: right;
	margin-top: 150px;
}

.radio {
	height:166px;
	width:153px;
	background-image:url(../img/radio.png);
	float: right;
	margin-top:0px;
}

.cinema {
	height:166px;
	width:153px;
	background-image:url(../img/cinema.png);
	float: left;
	margin-top:0px;
	}


footer {
	height:545px;
	width:100%;
	background-image:url(../img/footer.png);
	background-position:center;
	background-size:cover;
	position: absolute;
}

footer h1 {
	background-image:url(../img/contact.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:198px;
	height:30px;
	margin: 0 auto;
	margin-top:40px;
	margin-bottom:30px;
	}

footer p {
	margin: 0 auto;
	max-width: 280px;
	height:auto;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	margin-bottom:20px;
	line-height:1.4em;
	color: white;
}

#contact {
	width:164px;
	height:290px;
	margin:0 auto;
}

#contact .cell {
	height:67px;
	width:67px;
	margin: 0 auto;
	background-image:url(../img/cell.png);
	background-repeat:no-repeat;
	float:left;
	margin-top:30px;
	margin-right:30px;
}


#contact .mail {
	height:67px;
	width:67px;
	margin: 0 auto;
	background-image:url(../img/email.png);
	background-repeat:no-repeat;
	float:left;
	margin-top:30px;
}


#contact .fb_f {
	height:67px;
	width:67px;
	margin: 0 auto;
	background-image:url(../img/faceb.png);
	background-repeat:no-repeat;
	float:left;
	margin-right:30px;
	margin-top:30px;
}


#contact .tw_f {
	height:67px;
	width:67px;
	margin: 0 auto;
	background-image:url(../img/twit.png);
	background-repeat:no-repeat;
	float:left;
	margin-top:30px;
}

#contact .be_f {
	height:67px;
	width:67px;
	background-image:url(../img/beh.png);
	background-repeat:no-repeat;
	margin: 0 auto;
	margin-top:30px;
	float: right;
	margin-right: 49px;
}






}