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

#visualization {
	width: 960px; /* multiplo of SIDE in parameters.js, questo parametro è da aggiustare con media queries e determina la larghezza della griglia */
	margin: auto;
}

.center {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	        align-items: center;
}

#visualization {
	opacity: 0;
}
.viz-control{
	text-align: center;
}

#visualization canvas {
	z-index: 10;
	min-height: 70%;
}

#visualization .intro-counter {
	z-index: 100;
	position: absolute;
	text-align: center;
	width: 100%;
	margin-top: 25%;

}

/* Safari only hack*/
@media not all and (min-resolution:.001dpcm) { @media
{
    #visualization .intro-counter {
	z-index: 100;
	position: absolute;
	text-align: center;
	width: 960px;
	margin-top: 25%;
	}
}}

@media screen and (min-color-index:0) 
and(-webkit-min-device-pixel-ratio:0) { @media
{
    #visualization .intro-counter {
	z-index: 100;
	position: absolute;
	text-align: center;
	width: 960px;
	margin-top: 25%;
	}
}}


#visualization .intro-counter #counter {
	font-size: 40px;
	  font-family: 'calibre-bold';
	  margin-bottom: 0px;
}