@import url('https://fonts.googleapis.com/css?family=Raleway');

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700');



/*--- Varie generali ---*/

html, body {

	margin: 0;

	padding: 0;

	height:100%;

	width: 100%;

	background-color: #2C2C2C;

}

h2{

	font-family: 'Raleway', serif;

	font-size: 200%;

	font-weight: 700;

	color: #FFF;

	text-align: center;

	margin-bottom: 0px;

	text-decoration: underline;

}



p{

	font-family: 'Raleway', serif;

	color: #FFF;

	font-size: 140%;

	line-height: 180%;

	text-align: justify;

	font-weight: 300;

	margin-top: 6px;

}



img{

	text-align: center;

	max-width: 100%;

	height: auto;

	width: auto;

}



.clearfix{

	clear:both;

	height: 3%;

}



.break{

	display: none;

}



/*--- Foto iniziale ---*/

.intro{

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

}



.intro .inner{

	display: table-cell;

	vertical-align: bottom;

	width: 100%;

	max-width: none;

}



.content{

	max-width: 600px;

	margin: 0;

	display: flex;

}



.content .nome{

	font-size: 150%;

	color: #FFF;

	padding: 2%;

	text-shadow: 0px 0px 250px #000;

	float: left;

}



.inner{

	max-width: 600px;

	margin: auto;

	font-size: 170%;

	line-height: 1.6;

	padding: 10px;

}



/*--- Menu navigazione ---*/

nav{

	float: left;

	padding: 5% 5% 0 0;

	height: 50px;

}



nav ul{

	list-style: none;

	float: left;

	

}



nav ul li{

	font-family: 'Raleway', sans-serif;

	font-size: 120%;

}



nav ul li a{

	color: #2C2C2C;

	text-decoration: none;

}



nav ul li a:hover{

	color: #2C2C2C;

	text-decoration: underline;

}



nav ul, nav:active ul{

	display:none;

	left: 45px;

	top: 60px;

	padding: 8px 0;

	width: 20%;

	z-index: 1000;

}



nav li{

	width:100%;

	padding: 8px 0 10px 7px;

	margin: 0;

}



nav:hover ul{

	display: block;

	position: absolute;

}



#menu-icon{

	width: 30px;

	height: 26px;

	background: url(http://www.orlandini.biz/img/nav-icon.png) center;

	display: inline-block;

	margin:50px 0 0 50px;

}



/*--- About me ---*/

.left-col{

	margin: 4% 4% 4% 4%;

}





/*--- Immagini a 1/3 di schermo ---*/

.one-third-port{

	width: 29.333333%;

	padding: 2%;

	float: left;

	text-align: center;

	position: relative;

}



.one-third-port a:hover img{

	opacity: .6;

}



/*--- Foto con testo in basso a sx ---*/

.titolofoto{

  position: absolute;

  bottom: 2%;

  left: 7.5%;

}



/*--- Contatti ---*/

.contact p{

	text-align: center;

	letter-spacing: 2px;

}



.contact img:hover{

	opacity: .6;

}



.contact a{

	color: #FFF;

}



/*--- Immagine nel buco ---*/

.parallax-inner{

	padding-top: 20%;

}



/*--- Social ---*/

.social{

	list-style-type: none;

	text-align: center;

}



.social li{

	display: inline;

}



.social i{

	font-size: 270%;

	margin: 1% 5% 7% 4%;

	color: #FFF;

}



.social i:hover{

	color: #606060;

}



/*--- Copyright ---*/

footer.second{

	background-color: #292929;

}



footer.second p{

	color: #FFF;

	text-align: center;

	padding: 5%;

}



/*--- Mobile ---*/

@media screen and (max-width: 760px){

	#menu-icon{

		margin: 26px 0 0 26px;

	}

	

	nav ul, nav:active ul{

		padding: 8px 0;

		left: 23px;

		top: 34px;

		width: 50%;

	}

	

	.inner{

		font-size: 120%;

	}

	

	.content h1{

		font-size: 180%;

	}

	.content{

		padding-left: 0px;

	}

	

	p{

		font-size: 120%;

	}

	

	h2{

		font-size: 160%;

	}

	

	.left-col{

		width: 96%;

		margin: 0 0 3% 0;

		padding: 0 2%;

	}

	

	.sidebar{

		width: 96%;

		margin: 0 auto;

	}

	

	img{

		padding: 2%

	}

	

	.one-third-port{

		width: 96%;

		margin: 0 auto;

		padding: 0;

	}

	

	.break{

		display: block;

	}

	

	.parallax{

		display: none;

	}

	

	.social i{

		font-size: 170%;

	}

}