@font-face {
	font-family: ariah;
	src: url(../assets/font/ariah.ttf);
}

@font-face {
	font-family: ciutadella;
	src: url(../assets/font/ciutadella.ttf);
}

@font-face {
	font-family: tradegothic;
	src: url(../assets/font/TradeGothicLH-Extended.otf);
}

@font-face {
	font-family: oswald;
	src: url(../assets/font/Oswald.ttf);
}

@font-face {
	font-family: inconsolata;
	src: url(../assets/font/Inconsolata.ttf);
}

#beginning {
	background: white;
}

#inizio {
	margin-top: 10%;
	margin-left: 10%;
	margin-right: 10%;
}

#inizio2 {
	margin-top: 10%;
	margin-left: 10%;
	margin-right: 10%;
}

#elenco,
#curriculum {
	margin-top: 20%;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 4%;
}

#progetto {
	margin-top: 20%;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 4%;
}


/*generici */

.name {
	font-family: sans-serif;
	font-size: 1.1rem;
}

.name2 {
	font-family: sans-serif;
	font-size: 0.8rem;
}

.red {
	color: red;
}

.gray {
	color: black;
}

.black {
	color: black;
}

.sub {
	font-family: sans-serif;
	font-size: 0.6rem;
	margin-top: 0.4rem;
}

.website {
	font-family: sans-serif;
	font-size: 0.6rem;
	margin-top: 2rem;
}


a:link {
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: lightgray;
}


a.website {
	color: red;
}

a.website:hover {
	color: lightgray;
}

a.website:visited {
	color: lightgray;
}


ul {
	list-style: none;
	padding: 0;
}

li {
	margin-bottom: 2.7rem;
}


/*specifici */

.t1 {
	font-size: 1.8rem;
	line-height: 2.3rem;
}

.t2 {
	font-size: 1.3rem;
}

.t3 {
	font-size: 1.1rem;
}

.t4 {
	font-size: 0.9rem;
}

.sonificazione {
	font-family: "ciutadella";
}

.iceberg {
	font-family: "ariah";
}

.pancake {
	font-family: "inconsolata";
}

.netneutrality {
	font-family: "oswald";
}

.capital {
	font-family: "tradegothic";
}


/*personal page*/

.ritratto {
	width: 200px;
	background-color: blue;
	border: 1px solid black;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.cv {
	font-family: sans-serif;
	color: black;
	font-size: 0.8rem;
	margin-bottom: 1vh;
}

.cv1 {
	font-family: sans-serif;
	color: black;
	font-size: 0.8rem;
	margin-top: 2vh;
}

.cv2 {
	font-family: sans-serif;
	color: lightgrey;
	font-size: 0.6rem;
	margin-top: 0.2vh;
}

#blocco1 {
	padding: 0;
	margin-left: 0;
	margin-top: 20px;
}

#blocco2 {
	margin-left: 0;
	margin-top: 10%;
	margin-bottom: 10%;
}








/*progetto pages*/

#progetto {
	margin-top: 6%;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 5%;
}



.descrizione {
	margin-top: 2vh;
	font-family: sans-serif;
	color: lightgray;
	font-size: 0.7rem;
}

.anno {
	margin-top: 0.3vh;
	font-family: sans-serif;
	color: lightgray;
	font-size: 0.7rem;
}

.device {
	margin-top: 0.3vh;
	font-family: sans-serif;
	color: lightgray;
	font-size: 0.5rem;
	font-size: 0.5rem;
}

.abstract {
	width: 100%;
	margin-right: 10%;
	margin-top: 6%;
	font-family: sans-serif;
	color: black;
	font-size: 0.8rem;
	line-height: 1.4rem;
	margin-bottom: 3%;
}

.abstractmini {
	width: 100%;
	margin-right: 10%;
	margin-top: 2%;
	font-family: sans-serif;
	color: black;
	font-size: 0.8rem;
	line-height: 1.4rem;
	margin-bottom: 3%;
}



/*// Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {

	.ritratto {
		width: 270px;
		background-color: red;
	}


	#blocco1 {
		padding: 0;
		margin-left: 0;
		margin-top: 10%;
	}

	#blocco2 {
		margin-left: 0;
		margin-top: 10%;
		margin-bottom: 7%;
	}

	#elenco,
	#curriculum {
		margin-top: 10%;
		margin-left: 10%;
		margin-right: 10%;
	}

	#progetto {
		margin-top: 10%;
		margin-left: 10%;
		margin-right: 10%;
	}

}

/*// Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {

	.ritratto {
		width: 270px;
		background-color: blue;
	}

	.abstract {
		width: 50%;
	}

	.abstractmini {
		width: 50%;
	}


	#blocco1 {
		padding: 0;
		margin-left: 0;
		margin-top: 0%;
	}

	#blocco2 {
		margin-left: 0;
		margin-top: 5%;
		margin-bottom: 2%;
	}

}

/*// Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {

	.ritratto {
		width: 300px;
		background-color: green;
	}

	li {
		margin-bottom: 2rem;
	}

	.t1 {
		font-size: 2.2rem;
		line-height: 2.7rem;
	}

	.t2 {
		font-size: 1.7rem;
	}

	.t3 {
		font-size: 1.2rem;
	}

	.t4 {
		font-size: 1rem;
	}

	.abstract,
	.abstractmini {
		font-size: 1rem;
		line-height: 1.7rem;
	}

	.sub,
	.website {
		font-family: sans-serif;
		font-size: 0.8rem;
		margin-top: 0.4rem;
	}

	.descrizione {
		margin-top: 1vh;
		font-family: sans-serif;
		color: lightgray;
		font-size: 0.8rem;
	}

	.anno {
		margin-top: 0.5vh;
		font-family: sans-serif;
		color: lightgray;
		font-size: 0.8rem;
	}

	.device {
		margin-top: 0.3vh;
		font-family: sans-serif;
		color: lightgray;
		font-size: 0rem;
	}

	.cv,
	cv1 {
		font-size: 1rem;
		margin-top: 2vh;
	}

	.cv2 {
		font-size: 0.8rem;
	}

	#elenco,
	#curriculum {
		margin-top: 5%;
		margin-left: 10%;
		margin-right: 10%;
	}

	#progetto {
		margin-top: 5%;
		margin-left: 7%;
		margin-right: 7%;
	}
}


@media (min-width: 1400px) {
	.ritratto {
		width: 20%;
		background-color: pink;
	}


	#inizio {
		margin-top: 7%;
		margin-left: 7%;
	}

	#inizio2 {
		margin-top: 7%;
		margin-left: 7%;
	}


	#elenco,
	#curriculum {
		margin-top: 5%;
		margin-left: 7%;
		margin-right: 7%;
	}

	#progetto {
		margin-top: 5%;
		margin-left: 7%;
		margin-right: 7%;
	}



}

/*// foto pag iceberg*/
.foto-tela {
	padding: 1em;
	top: 0;
	right: 0;
	width: 100vh;
	height: auto;
	background-image: url(../img/tela.jpg);
}



.tela {
	width: 100%;
}