/*////////// LARGHEZZE E MARGINI PAGINE. PAGINA CENTRATA, I PADDING RIENTRANO NELLA LARGHEZZA MASSIMA //////////*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
}

.main {
    margin-top: 30px; /* Pagina tipo. Usando la classe galleria con gap 2, ho 4 colonne da 280 e non ho margini laterali. Aggiunge un margine in alto per evitare che parte dei contenuti vengano coperti */
	max-width: 1126px;	
}

.mainhome {
    margin-top: 30px; /* Pagina HOME. Larghezza massima contenuti 1000 (sottraendo i padding 6 laterali qui definiti e i padding 2 laterali definiti nelle colonne) */
	max-width: 1016px;
	padding: 0px 6px;
}

.mainapp {
    margin-top: 30px; /* Pagina APP. Larghezza massima contenuti 1132 usando le classi colonne */
	max-width: 1136px;
}

.mainnotes {
    margin-top: 30px; /* Pagina NOTES. Larghezza massima contenuti 1126 usando le classi colonne */
	max-width: 1142px;
	padding: 0px 6px;
}



/*////////// LOGO-INTESTAZIONE //////////*/

.logobig {
	display: block;
	text-align: center;
}

.box {
	letter-spacing: -2px;
	font-weight: 300; font-style: normal;
    color: #BBBBBB;
}

.n64 {
	letter-spacing:-1px;
	font-weight: 400; font-style: normal;
	color: #000000;
}

.imgbox {
	position:relative;
    top:4px;
	padding: 0px 2px;
}

.firma {
	letter-spacing:-1px;
	font-weight: 300; font-style: normal;
	color: #555555;
}



/*////////// BARRA SUPERIORE DEL MENU PRINCIPALE RESPONSIVE //////////*/

.vocimenu {
	font-size: 15px;
	font-weight: 300;
}

.topnav {
	/* overflow: hidden; */ 
	background-color: #ffffff;
	border-bottom: 1px solid #e6e9eb;
    position: sticky; /* Scorrimento che si blocca in alto Safari */
	position: -webkit-sticky; /* Safari */
    top: 0;
	width: 100%;
    text-align: center;
}

/* Links all'interno della barra topnav */
.topnav a {
	display: inline-block;
    color: #888888;
    text-align: center;
    padding: 10px 14px;
    text-decoration: none;
}

.topnav a:hover {
    color: #AD0505;
}

/* Nasconde il link che apre e chiude la topnav nel passaggio agli schermi piccoli */
.topnav .icon {
    display: none;
}

/* Nasconde e mostra il logo-intestazione per gli schermi piccoli */
.topnav .logosmall {
    display: none;
}


/* ICONA HAMBURGER MENU CHE SI TRASFORMA IN UNA X */

.icoburger {
    display: inline-block;
    cursor: pointer;
	float: right;	
}

.bar1, .bar2, .bar3 {
    width: 26px;
    height: 3px;
    background-color: #333;
    margin: 7px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: translate(11px, 8px) rotate(-45deg);
    transform: translate(11px, 8px) rotate(-45deg);
}

/* Fade out della seconda bar */
.change .bar2 {
    opacity: 0;
}

/* Rotazione della terza bar */
.change .bar3 {
    -webkit-transform: translate(11px, -12px) rotate(45deg);
    transform: translate(11px, -12px) rotate(45deg);
}



/*////////// CONTENUTI CON PADDING E ALLINEAMENTI VARI  //////////*/

.campopad30 {
	padding-right: 30px;
}

.campopad10 {
	padding-right: 10px;
}

.campopad10left {
	padding-left: 10px;
}

.campopad20left {
	padding-left: 20px;
}

.campopad85top {
	padding-top: 85px;
}

.bordopad6 {
	padding: 0px 0px;
	text-align: justify;
    text-justify: inter-word;
}



/*////////// SUDDIVISIONE IN 12 COLONNE PER IL RESPONSIVE //////////*/

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 2px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

img {
    max-width: 100%;
    height: auto;	
}



/*///////// GALLERIA IMMAGINI PICCOLE ORGANIZZATA IN 4 COLONNE RESPONSIVE IN MODO CHE LE IMMAGINI SI AFFIANCHINO ANCHE VERTICALMENTE SENZA ALLINEAMENTI DI RIGA /////////*/

#galleria {
  /* Previene i gap verticali. Il gap fra le immagini è 2 */
  line-height: 0;   
  -webkit-column-count: 4;
  -webkit-column-gap:   2px;
  -moz-column-count:    4;
  -moz-column-gap:      2px;
  column-count:         4;
  column-gap:           2px;   
}

#galleria img {
  /* Solo nel caso ci siano attributi inline */
  padding-bottom: 2px;
  width: 100% !important;
  height: auto !important;
}



/*////////// FINESTRA CHE SI APRE SOVRAPPOSTA CONTENENTE L'IMMAGINE GRANDE //////////*/

#finestraimg {	 
    position: fixed;
    display: block;
    width: 100%;
    height: 0%;
	overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	opacity: 0;
    transition: opacity 0.5s;
	webkit-transition: opacity 0.5s; /* Safari */
    background-color: rgba(255,255,255,1);
    z-index: 2; /* viene disposto sopra */
    cursor: pointer;
	
	/*disabilita la selezionabilità */
	-moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */
    -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
    -webkit-user-select: none; /* Chrome, Safari, and Opera */
    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/		
}

#immaginegrande {
	position: absolute;
	top: 50%;
	left: 50%;	
	max-height: 100%;
	transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
	z-index: 2;
}


/* DIDASCALIA DELL'IMMAGINE GRANDE */

.testofinestra {
	position: absolute;
    bottom: 0px;
	width: 100%;
    color: #888888;
	background-color: rgba(255,255,255,0.5);
	z-index: 3; /* se non c'è spazio, il testo viene disposto sopra l'immagine*/
    text-align: center;
    transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
}

.xchiudi {
	position: absolute;
    top: 5px;
	right:5px;
	padding: 0px 10px 2px;
    color: #000000;
	font-weight: 700; font-style: regular;
    font-size: 30px;
	background-color: rgba(255,255,255,0.5);
	z-index: 3; 
    text-align: center;
}


#nomeimg {
	font-weight: 400; font-style: italic;
    font-size: 15px;
    color: black;
}

#infoimg {
	font-weight: 400; font-style: normal;
    font-size: 15px;
    color: black;
}



/* ////////// DEFINIZIONI FONT ////////// */

.fontthin {
	font-weight: 100; font-style: normal;
	}
	
.fontthinitalic {
	font-weight: 100; font-style: italic;
	}
		
.fontlight {
	font-weight: 300; font-style: normal;
	}
		
.fontlightitalic {
	font-weight: 300; font-style: italic;	
	}
	
.fontregular {
	font-weight: 400; font-style: normal;
	}
	
.fontregularitalic {
	font-weight: 400; font-style: italic;	
	}

/*
.fontmedium {
	font-weight: 500; font-style: normal;
	}
	
.fontmediumitalic {
	font-weight: 500; font-style: italic;	
	}
*/
	
.fontbold {
	font-weight: 700; font-style: normal;
	}
	
.fontbolditalic {
	font-weight: 700; font-style: italic;	
	}
	
.fontblack {
	font-weight: 900; font-style: normal;
	}
	
.fontblackitalic {
	font-weight: 900; font-style: italic;	
	}



/* ////////// FORMATTAZIONI TESTO ////////// */

.titoli22 {
	font-weight: 700; font-style: normal; font-size:22px; line-height:0.7; color:#333333;
}

.titoli18 {
	font-weight: 400; font-style: normal; font-size:18px; line-height:0.7; color:#333333;
}

.testo16reg {
	font-weight: 400; font-style: normal; font-size:16px; line-height:1.3; color:#666666;
}

.testo16lig {
	font-weight: 300; font-style: normal; font-size:16px; line-height:1.3; color:#333333;
}

.testo15reg {
	font-weight: 400; font-style: normal; font-size:15px; line-height:1.3; color:#666666;
}

.testo15lig {
	font-weight: 300; font-style: normal; font-size:15px; line-height:1.3; color:#888888;
}

.testo14lig {
	font-weight: 300; font-style: normal; font-size:14px; line-height:1.3; color:#888888;
}

.testofooter {
	font-weight: 300; font-style: normal; font-size:15px; color:#888888; text-align:center;
}

.linkrossoreg {
	 font-weight: 400; font-style: normal; text-decoration:none; color:#AD0505;
}

.linkrossobold {
	font-weight: 700; font-style: normal; text-decoration:none; color:#AD0505;
}








/* ////////// SCHERMO LARGO AL MASSIMO 800 PIXEL ////////// */ 

/* Quando lo schermo è inferiore a 800 pixel in larghezza, nasconde tutti i link. Mostra il link che apre e chiude la topnav (.icon) */
@media screen and (max-width: 800px) {
  
.logobig {
    display: none;
	}
      
.topnav {
	position: fixed;
	text-align: left;
	}
		
/*. topnav a:not(:first-child) {display: none;}  nasconde tutti i link ad eccezione del primo ("Home") */
.topnav a {display: none;}
.topnav a.icon {
	padding: 4px 10px;
    float: right;
    display: block;
  	}
 
  /* visualizza l'intestazione logo piccola */
.topnav .logosmall {
	float: left;
    display: block;
    margin-left: 10px;
	}
  

/* La classe "responsive" è aggiunta al topnav tramite JavaScript quando l'utente clicka sull'icona. Questa classe mostra la topnav in maniera appropriata sugli schermi piccoli (i link sono mostrati verticalmente invece che orizzontalmente) */
  
.topnav.responsive .logosmall {
    display: none;
	}

.topnav.responsive .vocimenu {
	font-size: 21px;
	}
  
.topnav.responsive {
	position: fixed;
	}
  
.topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  	}
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	padding: 5px 20px;
  	}


.campopad30 {
	padding-right: 0px;
}

.campopad10 {
	padding-right: 0px;
}

.campopad10left {
	padding-left: 0px;
}

.campopad20left {
	padding-left: 0px;
}

.campopad85top {
	padding-top: 0px;
}

.bordopad6 {
	padding: 0px 6px;
}


.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
  
/* La galleria immagini piccole si riorganizza in 3 colonne */ 
 
#galleria {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
    
} 




/* ////////// SCHERMO LARGO AL MASSIMO 600 PIXEL ////////// */ 

@media only screen and (max-width: 600px) {
	
/* La galleria immagini piccole si riorganizza in 2 colonne */

#galleria {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }

}