@charset "utf-8";

/* CSS Reset */
html, body, p, ul ,li, div, header, nav, section, article, aside, footer, hgroup, span, h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
	font-family: Lato, Helvetica, sans-serif;	
	font-weight: lighter;
	font-size: 18px;
}

div, header, nav, section, article, aside, footer, hgroup{
	/*outline: 1px solid blue;*/
}

/* Impostazioni generali della pagina */
html{
	background-color:#fff;
}

body{
	width:100%;
	min-width:320px;
	-webkit-text-size-adjust:100%;
	background-color: #fff;
}

img{
	border: 0;
	margin: 0;
	padding: 0;
}

.testo_nascosto{
	position:absolute;
	left:-9999px;	
}

/* Transizione per gli elementi comuni */
section, h1, li, img {
	-moz-transition: width 1s ease-in-out, right 1.5s linear ;
	-webkit-transition: width 1s ease-in-out, right 1.5s linear;
	-moz-transition: width 1s ease-in-out, right 1.5s linear;
	-o-transition: width 1s ease-in-out, right 1.5s linear;
	transition: width 1s ease-in-out, right 1.5s linear;
}


/* Intestazione */
/* ------------------------------------------------ */
#intestazione{
	width: 100%;
	height: 95px;
	background-color: #333333;
	border-bottom: 10px solid #085a78;
}
#spazio_intestazione{
	max-width: 1280px;
	min-height: 50px;
	margin: 0 auto;
	padding: 10px 40px;
}


/* Logo */
#logo{
	float: left;
	width: 162px;
	margin-top: 8px;
}

/* Menu Principale */
/* ------------------------------------------------ */
#menu{
	width: 100%;
	background-color: #085a78;
}
#spazio_menu{
	clear: both;
	max-width: 1280px;
	margin: 0 auto;
	max-width: 1280px;
	position: relative;
	padding: 0 40px;
	height: 0px;
	overflow: visible;
}
#menu_principale{
	position: absolute;
	right: 40px;
	top: -52px;
}
#menu_principale ul{
	list-style: none;
}
#menu_principale li{
	display: inline;
	padding: 0 0.7em 0 0.4em;
	border-right: 1px solid #fff;
}
#menu_principale li:last-child{
	border-right: none;
	padding: 0 0 0 0.4em;
}
#menu_principale a{
	color: #fff;
	text-decoration: none;
}
#menu_principale a:hover{
	text-decoration: underline;
}

/* Pulsante Menu */
/* ------------------------------------------------ */
#pulsante_menu{
	float: right;
	margin-top: 10px;
	display: none;
}

/* Corpo dei Contenuti */
/* ------------------------------------------------ */
#corpo_pagina{
	position: relative;
	min-height: 530px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px 20px 40px;
}
#corpo_pagina span{
	padding-bottom: 0.8em;
	display: inline-block;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 24px;
	color: #085a78;
}
#corpo_pagina a{
	color: #085a78;
}
#immagini_app .image-set{
	text-align: left;
}
#corpo_pagina h2{
	display: inline-block;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #085a78;
	margin-bottom: 0.3em;
}

/* Riga Uno */
#riga_uno_colonna_sx{
	width: 55%;
}
#riga_uno_colonna_sx ul{
	margin-left: 20px;
	list-style-type: square;
}
.descrizione_principale{
	font-size: 1.3em;
}

#riga_uno_quote{
	width: 220px;
	float: right;
	text-align: right;
	margin-left: 1em;
}

#riga_uno_colonna_dx{
	text-align: center;
	width: 41%;
	float: right;
}
#riga_uno_colonna_dx h2{
	font-size: 2em;
}


/* Riga Due */
#riga_due_colonna_sx{
	width: 38%;
	float: left;
	text-align: center;
	padding-bottom: 3em;
	
}
#riga_due_quote{
	width: 220px;
	float: left;
	text-align: left;
	margin-right: 1em;
}
#riga_due_colonna_sx h2{
	font-size: 2em;
}

#riga_due_colonna_dx{
	text-align: right;
	margin-left: 42%;
}
#riga_due_colonna_dx ul{
	margin-right: 20px;
	list-style-type: square;
}


.spazio_link{
	width: 100%;
}
.spazio_link p{
	padding-bottom: 0.8em;
	display: inline-block;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.2em;
	color: #085a78;
}
.spazio_link img{
	width: 100%;
	max-width: 258px;
}
.link_sx{
	text-align: center;
	width: 245px;
	float: left;
}
.link_dx{
	text-align: center;
	width: 245px;
	float: right;
}
.link_sx h3, .link_dx h3{
	font-family: "Open Sans Condensed",sans-serif;
	font-weight: bold; 
	font-size: 1.2em;
	color: #085a78;
}
.link_sx p, .link_dx p{
	color: #085a78;
	display: block;
	margin-bottom: .5em;
}
.link_sx a, .link_dx a{
	text-decoration: none;
}

.link_img{
	width: 82px;
	height: 82px;
	margin: 0 auto;
}
a .link_img {
	display: block;
	background: url(../img/app_doppia_land.png) no-repeat;
	background-position: -2px 0px;
}
a:hover .link_img {
	display: block;
	background: url(../img/app_doppia_land.png) no-repeat;
	background-position: -91px 0px;
}

.link_img_vuoto{
	width: 82px;
	height: 82px;
	margin: 0 auto;
}
.link_img_vuoto {
	display: block;
	background: url(../img/app_doppia_land.png) no-repeat;
	background-position: -2px 0px;
}

/* Icone dispositivi su cui le app sono disponibile */
h4{
	color: #505151;
	font-size: .9em;
	font-weight: bold;
}
.disponibile_per{
	width: 60px;
	margin-top: 10px;
	text-align: center;
	display: inline-block;
}
.disponibile_per p{
	font-size: .7em;
	color: #505151;
}

/* Sezioni Principali */
/* ------------------------------------------------ */
#sezioni_principali{
	width: 100%;
	padding: 40px 0 30px 0;
	background-color: #074e68;
	clear: both;
}
#sezioni_principali p{
	font-size: 0.7em;
	text-align: center;
	color: #fff;
}
#sezioni_principali h3{
	font-size: 0.9em;
	text-align: center;
	margin-bottom: 1em;
	color: #fff;
}
#spazio_sezioni{
	max-width: 1280px;
	min-height: 50px;
	margin: 0 auto;
}
.spazio_singola_sezione_sx{
	width: 190px;
	margin: 0 auto;
}
.spazio_singola_sezione_centro{
	width: 210px;
	margin: 0 auto;
}
.spazio_singola_sezione_dx{
	width: 235px;
	margin: 0 auto;
}

.logo_sezione{
	display: inline-block;
	vertical-align: top;
	padding-right: 15px;
	overflow: hidden;
}
.testo_sezione{
	display: inline-block;
}
#sezione_app{
	width:33%;
	float: left;
	border-right: 1px solid #397186;
}
#sezione_giochi{
	width:33%;
	display: inline-block;
}
#sezione_tutorial{
	float: right;
	width:33%;
	border-left: 1px solid #397186;
}

#map_canvas {
	width: 100%;
	height: 520px;
	border: 1px solid black;
}

/* Piè di Pagina */
/* ------------------------------------------------ */
footer{
	width: 100%;
	height: 200px;
	background-color: #333333;
	padding-bottom: 30px;
	border-top: 25px solid #085a78;
	clear: both;
}
#spazio_footer{
	max-width: 1280px;
	min-height: 50px;
	margin: 0 auto;
	padding: 35px 40px;
}

/* Contatti */
#contatti{
	color: #878787;
	width: 320px;
	float: left;
	text-align: left;
}
#contatti span{
	display: block;
	margin: 10px 0;
}
#contatti p{
	font-size: .7em;
}

#contatti ul{
	list-style: none;
}
#contatti li{
	display: inline;
	padding: 0 0.7em 0 0.4em;
	font-size: .8em;
	border-right: 1px solid #878787;
}
#contatti li:last-child{
	border-right: none;
	padding: 0 0 0 0.4em;
}
#contatti li:first-child{
	padding-left: 0;
}

#contatti a{
	color: #878787;
	text-decoration: none;
}
#contatti a:hover{
	text-decoration: underline;
	color: #fff;
}

/* Social */
#social{
	color: #878787;
	width: 260px;
	text-align: right;
	float: right;
}
#social span{
	display: block;
	margin: 10px 0;
}
#social p{
	font-size: .7em;
}
#social ul{
	list-style: none;
}

#social a{
	color: #878787;
	text-decoration: none;
}
#social a:hover{
	text-decoration: underline;
}

/* Loghi Social */
#spazio_loghi_social{
	height: 53px;
	float: right;
	margin-bottom: 25px;
}
#logo_social_twitter{
	width: 50px;
	height: 50px;
	float: right;
	margin-left: 20px;
	background-image: url(../img/blocco_loghi.png);
	background-position: -2px 0px;
}


a#logo_social_twitter {
	display: block;
	background: url(../img/blocco_loghi.png) no-repeat;

	width: 50px;
	height: 50px;
	float: right;
	margin-left: 20px;
	background-position: -2px 0px;
}

a:hover#logo_social_twitter {
	background-position: -2px -54px;
}

a#logo_social_facebook {
	display: block;
	background: url(../img/blocco_loghi.png) no-repeat;
	width: 50px;
	height: 50px;
	float: right;
	background-position: -63px 0px;
}

a:hover#logo_social_facebook {
	background-position: -63px -54px;
}

a#logo_social_email {
	display: block;
	background: url(../img/blocco_loghi.png) no-repeat;

	width: 50px;
	height: 50px;
	float: right;
	margin-left: 20px;
	background-position: -123px 0px;
}

a:hover#logo_social_email {
	background-position: -123px -54px;
}






/* MEDIA QUERY 1024 -----------------------------------------------------------------------------------------*/
@media only screen and (max-width:1024px){
	.logo_sezione{
		display: none;
	}

	.spazio_singola_sezione_sx{
		width: 135px;
		margin: 0 auto;
	}
	.spazio_singola_sezione_centro{
		width: 150px;
		margin: 0 auto;
	}
	.spazio_singola_sezione_dx{
		width: 178px;
		margin: 0 auto;
	}

	.link_sx{
		width: 200px;
	}
	.link_dx{
		width: 200px;
	}
}

/* MEDIA QUERY 850 -----------------------------------------------------------------------------------------*/
@media only screen and (max-width:850px){
	.link_sx{
		text-align: center;
		width: 175px;
		float: left;
	}
	.link_sx h3{
		font-size: 1em;
	}
	.link_sx p{
		font-size: 0.9em;
		color: #085a78;
		display: block;
		margin-bottom: .5em;
	}
	.link_img{
		width: 56px;
		height: 56px;
		margin: 0 auto;
		display: none;
	}
	a .link_img {
		background: url(../img/app_doppia.png) no-repeat;
		background-size: 110px;
		background-position: -1px 0px;
	}
	a:hover .link_img {
		background: url(../img/app_doppia.png) no-repeat;
		background-size: 110px;
		background-position: -57px 0px;
	}

	.link_dx{
		text-align: center;
		width: 175px;
		float: right;
	}
	.link_dx h3{
		font-size: 0.9em;
	}
	.link_dx p{
		font-size: 0.8em;
		color: #085a78;
		display: block;
		margin-bottom: .5em;
	}
	.link_img_vuoto {
		width: 56px;
		height: 56px;
		background: url(../img/app_doppia.png) no-repeat;
		background-size: 110px;
		background-position: -1px 0px;
	}
}


/* MEDIA QUERY 760 -----------------------------------------------------------------------------------------*/
@media only screen and (max-width:760px){
	footer{
		width: 100%;
		height: auto
	}

	#contatti{
		float: none;
		text-align: center;
		margin: 0 auto;
	}

	/* Social */
	#social{
		color: #878787;
		width: 260px;
		text-align: center;
		float: none;
		margin: 40px auto;
	}
	#spazio_loghi_social {
	    float: none;
	    height: 53px;
	    margin: 0 auto 25px auto;
	    width: 193px;
	}
	
}




/* MEDIA QUERY 790 -----------------------------------------------------------------------------------------*/
@media only screen and (max-width:790px){

	#intestazione{
		height: 75px;
	}

	/* Logo */
	#logo{
		float: left;
		width: 115px;
		margin-top: 6px;
	}

	/* Menu Principale */
	/* ------------------------------------------------ */
	#menu{
		width: 100%;
		background-color: #085a78;
		border-bottom: 10px solid #085a78;
	}
	#spazio_menu{
		clear: both;
		max-width: 1280px;
		margin: 0 auto;
		max-width: 1280px;
		position: relative;
		padding: 0 40px;
		height: 0px;
		overflow: hidden;
	}
	#menu_principale{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%
	}
	#menu_principale ul{
		list-style: none;
	}
	#menu_principale li{
		display: block;
		padding: 0.4em 0.7em 0.4em 0.4em;
		border-right: none;
		border-bottom: 1px solid #397186;
	}
	#menu_principale li:first-child{
		border-top: 1px solid #397186;
	}
	#menu_principale li:last-child{
		border-right: none;
		padding: 0.4em 0.7em 0.4em 0.4em;
	}
	#menu_principale a{
		color: #fff;
		text-decoration: none;
		padding-left: 40px;
	}
	#menu_principale a:hover {
		text-decoration: none;
	}
	#menu_principale li:hover {
		background-color: #0c698b;
		cursor: pointer;
	}


	/* Pulsante Menu */
	/* ------------------------------------------------ */
	#pulsante_menu{
		float: right;
		margin-top: 10px;
		display: block;
		cursor: pointer;
	}

	/* Corpo dei Contenuti */
	/* ------------------------------------------------ */
	#corpo_pagina span{
		text-align: left;
	}

	#riga_uno_quote{
		float: none;
		text-align: center;
		margin: 0;
		width: auto;
	}

	#riga_due_quote{
		float: none;
		text-align: center;
		margin: 0;
		width: auto;
	}
	.spazio_link span{
		text-align: center;
		margin-bottom: 0;
	}

	.link_sx{
		text-align: center;
		width: 245px;
		margin: 0 auto;
		float: none;
	}
	.link_sx h3{
		margin-top: 15px;
	}
	.link_dx{
		text-align: center;
		width: 245px;
		margin: 0 auto;
		float: none;
	}
	.link_dx:first-of-type{
		margin-bottom: 20px;
	}
}

/* MEDIA QUERY 640 -----------------------------------------------------------------------------------------*/
@media only screen and (max-width:640px){

	#immagini_app .image-set{
		text-align: center;
	}
	
	/* Riga Uno */
	#riga_uno_colonna_sx{
		width: 100%;
	}

	#riga_uno_colonna_dx{
		float: none;
		text-align: center;
		width: 100%;
		padding-bottom: 2.3em;
	}
	#riga_uno_colonna_dx h2{
		font-size: 2em;
	}
	#riga_uno_colonna_dx p{
		font-size: 1.3em;
	}


	/* Riga Due */
	#riga_due_colonna_sx{
		width: 100%;
		float: none;
		text-align: center;
		padding-bottom: 3em;
		
	}
	#riga_due_quote{
		width: 100%;
		float: none;
		text-align: center;
		margin-right: 1em;
	}
	#riga_due_colonna_sx h2{
		font-size: 2em;
	}
	#riga_due_colonna_sx p{
		font-size: 1.3em;
	}

	#riga_due_colonna_dx{
		text-align: right;
		margin-left: 0;
	}
	
}

/* MEDIA QUERY 480 -----------------------------------------------------------------------------------------*/
@media only screen and (max-width:480px){
	#spazio_intestazione {
	    padding: 10px 25px;
	}

	#menu_principale a {
	    padding-left: 25px;
	}

	#corpo_pagina {
	    padding: 0 25px 20px;
	}

	#spazio_footer {
	    padding: 35px 5px;
	}
	#contatti{
		width: 100%;
	}
	/* Social */
	#social{
		width: 100%;
	}
}