@font-face {
    font-family: 'comic';
    src: url('fonts/comic.eot');
    src: url('fonts/comic.eot') format('embedded-opentype'),
         url('fonts/comic.woff2') format('woff2'),
         url('fonts/comic.woff') format('woff'),
         url('fonts/comic.ttf') format('truetype'),
         url('fonts/comic.svg#comic') format('svg');
}
body {
	text-align:center;
	font-family: comic;
}
#container {
	text-align:center;
	background-color: #ffffff;
}
.clear {
	clear: both;
}
.funzione {
	float: left;
    width: 35vw;
    height: 35vw;
    margin: 1vw;
    padding: 6vw;
}
.funzione_big {
	float: left;
    width: 35vw;
    margin: 1vw;
    padding: 6vw;
}
.funzione p.titolo {
	font-size: 3vh;
    margin-top: -3vh;
}
.funzione_big p.titolo {
	font-size: 3vh;
    margin-top: -3vh;
	font-size: xxx-large;
}
.testo {
	font-size: x-large;
}
.funzione img {
	width: 100%;
}
.funzione_big img {
	width: 50%;
}
.funzione img.quarto {
	width: 40%;
}
.su_sx {
	position: relative;
    margin-top: 40%;
    margin-right: 15%;
}
.giu_dx {
	position: relative;
    top: 40%;
}
.a_style {
	background-color: #ADC1CC;
}
.b_style {
	background-color: #E4C686;
}
.c_style {
	background-color: #9DE455;
}
.d_style {
	background-color: #FFC2FF;
}
.e_style {
	background-color: #51C6FF;
}

@media only screen and (orientation: landscape) {
	.funzione {
		float: left;
		width: 14vw;
		height: 14vw;
		margin: 2.25vw;
		padding: 3vw;
	}
	.funzione_big {
		float: left;
		width: 14vw;
		margin: 2.25vw;
		padding: 3vw;
	}
	.funzione p.titolo {
		font-size: 3vh;
		margin-top: -3vh;
	}
	.funzione_big p.titolo {
		font-size: 3vh;
		margin-top: -3vh;
		font-size: xx-large;
	}
	.testo {
		font-size: large;
	}
}