/*font*/
body{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/*div che contiene tutto*/
.container-index{
	width:50%;
	display:table;
	margin-left:auto;
	margin-right:auto;
	max-width:550px;
	min-width:220px;
	margin-top:0px;
	margin-bottom:150px;
	position:relative;
}

/*immagine di background con le scritte*/
.img-background-index{
	width:100%;
	height:auto;
}

/*div che contiene i quadrati colorati in centro*/
.container-inside{
	width:100%;
	height:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:12%;
	position:absolute;
	top:0px;
	left:0px;
}

/*div quadrati al centro*/
.square{
	width:50%;
	height:50%;
	float:left;
	text-align:center;
}

.square-green{
	background-color:#7B9E2B;
}

.square-blue{
	background-color:#6298B7;
}

.square-red{
	background-color:#B61614;
}

.square-yellow{
	background-color:#FFDD07;
}

/*immagini nei quadrati in centro*/
.image-div-inside{
	width:100%;
	height:60%;
}

/*testo nei quadrati in centro*/
.title-index{
	color:white;
	text-align:center;
	font-size:14px;
}

/*media*/
@media screen and (max-width: 900px) {
	.title-index{
		font-size:11px;
	}
	
	.container-index{
		margin-top:50px;
	}

}

@media screen and (max-width: 650px) and (min-device-width : 600px){
	.title-index{
		font-size:8px;
	}
}

@media screen and (max-width: 440px) and (min-device-width : 600px){
	.title-index{
		font-size:7px;
	}
	
	.container-index{
		top:50%;
		left:50%;
		margin-top:-110px;
		margin-left:-110px;
		position:absolute;
	}
}

@media screen and (max-width: 450px) and (max-device-width : 600px){

	.container-index{
		margin-top:0px;
	}
}