@charset "UTF-8";
/* CSS Document */
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body{
margin:0;
padding:0;	
font-family: 'Lato', sans-serif;
}

#container{
background:url('https://motolese.com/immaigninew/randomindex_desktop/6.jpg');
height:100%;

margin:0 auto;
overflow:hidden;
}

#container2{
background:url('https://motolese.com/immaigninew/deflorationis_D.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container3{
background:url('https://motolese.com/immaigninew/kitty/kitty_D.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container4{
background:url('https://motolese.com/immaigninew/umano/umano_D.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container5{
background:url('https://motolese.com/immaigninew/mediamente/mediamente_D.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container6{
background:url('https://motolese.com/immaigninew/dono/43522-436237366_small.gif');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container7{
background:url('https://motolese.com/immaigninew/lifeisagame/life_D.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container8{
background:url('https://motolese.com/immaigninew/giganti/01_giganti.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container9{
background:url('https://motolese.com/immaigninew/acciaio/acciaio_D.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container10{
background:url('https://motolese.com/immaigninew/greenass/greenass_D.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container11{
background:url('https://motolese.com/immaigninew/quarantine/quarantine_D.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}

#container12{
background:url('https://www.motolese.com/immaigninew/stopthepigeon/zakapigeonD.jpg');
width:100%;
margin:0 auto;
overflow:hidden;
height:100%;
color:#FFFFFF;
}



header{
width:100%;
margin:0 auto;

}



.menu{
width:200px;
height:100%;
position:absolute;
/* senza unita' di misura la riga non vale e il menu resta aperto a sinistra:
   deve stare fuori schermo, entra quando si tocca il bottone */
left:-200px;
background:rgba(255,255,255,0.9);
}

.menu ul{
	width:100%;
	float:left;
	margin-top: 100px;
	list-style-type:none;
	margin:0;
	padding:0;
}
.menu ul li{
	margin-top:0px;	
	border-left: 10px solid transparent;
}

.menu ul li:first-child{
margin-top:50px;
}
.menu ul li:hover{
	background:#fff;
	border-left:10px solid #fff;
}
.menu ul li a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 12px;
	color: #000;
	text-decoration: none;
	padding: 0px 0;
	display: block;
}

.menu ul li:hover a{
color:#0099FF;
}

/* Su telefono il dito e' meno preciso del mouse: le voci restano attaccate come
   su schermo grande, e' il testo a 16px a rendere il bersaglio abbastanza alto.
   Il riquadro bianco si allarga a 250px perche' le nove bandierine ingrandite
   stanno su una riga sola e a 200px uscivano dal bordo. La chiusura del menu
   e' animata in js sulla larghezza vera del riquadro, quindi qui basta
   spostare fuori schermo anche la posizione di partenza. */
@media (max-width:768px){
	.menu{ width:250px; left:-250px; }
	.menu ul li a{
		font-size:16px;
		line-height:1.25;
		padding:0;
	}
	.menu ul li:first-child{ margin-top:40px; }
	/* le bandierine hanno il loro stile dentro menu_include.php, stampato dopo
	   questo foglio: per batterlo serve un selettore piu' specifico */
	.menu li.lang-flags a.lang-flag{ width:22px; height:16px; }
}


/*			MENUBUTTON			*/
#menuButton{
	font-size:2em;
	color:#fff;
	margin:0px 10px;
}
#menuButton a{
	cursor:pointer;
	transition:all 0.2s;
}
#menuButton a:hover{
	color:#f06;

}
/* le tre linee e il dado stanno affiancati; il dado e' un disegno, non un carattere,
   quindi va allineato a mano all'altezza delle linee */
#menuButton{ display:flex; align-items:center; gap:12px; }
/* un pixel piu' in basso: centrato dal flex il dado sale di 1px rispetto alle linee,
   perche' il glifo del menu non e' centrato nel suo riquadro di testo */
#dadoButton{ line-height:0; color:inherit; position:relative; top:1px; }
/* alto quanto le tre linee: il glifo del menu disegna 22px su 32 di corpo, e il
   quadrato del dado riempie 14/16 del suo riquadro, da cui 22*16/14/32 = .79em */
#dadoButton svg{ display:block; width:.79em; height:.79em; }
#dadoButton:hover{ opacity:.55; }

/* Menu aperto: linee, dado e x in nero, cosi' restano leggibili sul fondo chiaro.
   Il colore va messo sugli <a>: boot.css colora tutti i collegamenti di bianco e
   quella regola, essendo sull'elemento stesso, batte l'ereditarieta' dal padre. */
body.menu-aperto #menuButton, body.menu-aperto #menuButton a{ color:#000; }
body.menu-aperto .closeButton, body.menu-aperto .closeButton a{ color:#000; }

/*			CLOSEBUTTON		*/


.closeButton{
	font-size:0.9em;
	color:#000;
	position:absolute;
	left:170px;
	top:10px;
	
}
/* la x segue il bordo destro del riquadro, che su telefono e' piu' largo.
   Va dopo la regola qui sopra, non nel blocco mobile piu' in alto: a parita'
   di specificita' in css vince l'ultima regola scritta, non la media query. */
@media (max-width:768px){
	.closeButton{ left:220px; }
}
.closeButton a:hover{
	color:#000;
	cursor:pointer;
	
}
/*			MAIN	*/
.main{
width:100%;
	margin:0 auto;
	
}

.main h1{
	text-align:center;
	font-size:7em;
	color:rgba(255,255,255,0.8);
	line-height:400px;
	font-weight:bold;
	font-family: 'Montserrat', sans-serif;
	/* un'ombra tenue: sulle foto chiare il bianco sull'80% spariva */
	text-shadow:0 2px 18px rgba(0,0,0,.45);
}
/* su schermo stretto il titolo non ci sta in una riga sola: si rimpicciolisce
   e l'interlinea fissa di 400px va tolta, altrimenti finisce fuori dalla foto */
@media (max-width:768px){
	.main h1{ font-size:2.6em; line-height:1.15; padding:38vh 12px 0; word-break:break-word; }
}

/* freccia "scorri in basso", in fondo alla foto di testata */
.scorri{
	position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
	color:rgba(255,255,255,.85); line-height:0; z-index:5;
	animation:scorriSu 2s ease-in-out infinite;
}
.scorri:hover{ color:#fff; }
.scorri svg{ display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
@keyframes scorriSu{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }
@media (prefers-reduced-motion:reduce){ .scorri{ animation:none; } }
#container7{ position:relative; }
.icon-heart{
font-size:0.8em;	
}

.txt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.txt_grigio {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999;
}
.txt14 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.txt14_bianco {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.txt15 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}