/* CSS Document */

@viewport{
  zoom: 1.0;
    width: extend-to-zoom;
}

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

html{
	background-color: rgb(0,0,0);
	display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    scroll-behavior: smooth; /*Di default, quando si usa un'ancora in una pagina web, lo "spostamento" del browser verso l'ancora è immediato. Con questa istruzione, invece, il browser si sposterà in su o in giù più lentamente*/
}

body{
	border: 0px solid red;
	background-color:#2b2b2b;
	display: flex;
    display: -webkit-flex;
	flex-direction: column;
    -webkit-flex-direction: column;
	justify-content: center;
   -webkit-justify-content: center;
	margin:0px;
	padding:0px 0px 10px 0px;/*padding sn e dx devono essere 0 altrimenti accedendo al link da Facebook e Instagram si crea uno scorrimento in orizzontale*/
	max-width:1080px;
   min-height: 100vh;/*l’altezza del body sarà sempre pari al 100% dell’altezza della viewport, a prescindere dal dispositivo e dallo schermo.*/
	
}

header{
	border: 0px solid blue;
	display: flex;
    display:-webkit-flex;
	flex-direction: column;
    -webkit-flex-direction: column;
		margin:0px 10px 10px 10px;

}

nav{
	border:0px solid yellow;
	display: flex;
    display: -webkit-flex;
	flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: center;
   -webkit-justify-content: center; 
	margin: 10px;
}

article{
	border: 0px solid fuchsia;
	margin:10px;
	padding:20px 0px;
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: left;
    -webkit-align-items:left;
    flex:1;/*occupa tutto lo spazio verticale disponibile*/
	-webkit-flex:1;
}

section{
	border: 0px solid red;
	 margin:0px;
}

footer{
	border: 0px solid green;
	background-color:rgb(70,70,70);
	margin:42px 10px 0px 10px;
	padding:10px;
  border-radius:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
  display: flex;
  display:-webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
    -webkit-align-items:center;
}
small{
	border: 0px solid fuchsia;
	margin:5px;
}

table{
	border: 0px solid white;
		padding:10px;
}

td {
	height:50px;
  border: 0px solid blue;
}

hr{
	box-sizing: content-box;/*le specifiche CSS non definiscono alcuno stile predefinito per l'elemento hr, quindi 
	il suo layout è definito nel foglio di stile predefinito dei browser. Questa istruzione serve a 
	normalizzare questo elemento e risolvere problemi di rendering*/
    height: 0;/*vedi sopra*/
}

/* Glyph, by Harry Roberts */

.hr-1 {
overflow: visible; /* For IE */
	width:100%;
    border: none;
    /*border-top: medium double rgb(153,153,153);*/
    color: rgb(153,153,153);
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
    text-align: center;
height: 2px;
}
.hr-1:after {
content:" ";
display: inline-block;
position: relative;
top: -42px;
font-size: 3.2em;
padding: 5px 80px;
background: rgb(43,43,43) url(../pics/baroque.png) no-repeat scroll center;
background-size: 150px 64px;
height: 55px;
}

.hr-2 {
overflow: visible; /* For IE */
	width:100%;
    border: none;
    /*border-top: medium double rgb(153,153,153);*/
    color: rgb(153,153,153);
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
    text-align: center;
height: 2px;
}
.hr-2:after {
content:" ";
display: inline-block;
position: relative;
top: -20px;
font-size: 3.2em;
padding: 12px 80px;
background: rgb(43,43,43) url(../pics/baroque.png) no-repeat scroll center;
-webkit-transform: rotate(180deg);/*ruota l'immagine di 180 gradi*/
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
background-size: 150px 64px;
height: 40px;
}

.hr-3 {
overflow: visible; /* For IE */
	width:100%;
	max-width:1000px;
    border: none;
    /*border-top: medium double rgb(153,153,153);*/
    color: rgb(153,153,153);
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
    text-align: center;
height: 2px;
}

.hr-4{
	width:200px;
}

.row{
	display: flex;
    display: -webkit-flex;
	flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: center;
   -webkit-justify-content: center; 
   align-items:center;
	webkit-align-items:center;
}

.column{
	display: flex;
    display: -webkit-flex;
	flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: center;
   -webkit-justify-content: center; 
   align-items:center;
	webkit-align-items:center;
}

.name, .role{
	text-align:center;/*altrimenti il testo si posiziona a sinistra*/
	margin:0px;
}

.copyright{
	display: flex;
    display:-webkit-flex;
	flex-direction: column;
    -webkit-flex-direction: column;
	align-items:center;
	webkit-align-items:center;
}

.menu_footer{
	padding: 0px;
	display: flex;
  display:-webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}
.menu_footer li{
	border-bottom:1px solid rgb(76,76,76);
	margin:10px 0px;
}

.menu{
	margin:10px;
	padding: 0px;
	align-items: center;
    -webkit-align-items:center;
}

.div_footer{
	border: 0px solid blue;
	
}
.section_footer{
		background-color:rgb(48,48,48);
	padding:10px;
	 margin:10px;
	 border-radius:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.center_footer{
	display: flex;
    display: -webkit-flex;
	flex-direction: row;
    -webkit-flex-direction: row;
	justify-content: center;
-webkit-justify-content: center;
align-items: center;
    -webkit-align-items:center;
}

@media only screen 
and (min-device-width : 1015px) {
	.section_article{
		display: flex;
display: -webkit-flex;
flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
justify-content: space-around;
-webkit-justify-content: space-around;
align-items: flex-start;
    -webkit-align-items:flex-start;
width:100%;
	}
	.element{
		padding:10px;
		width:50%;
		box-sizing:border-box; /*permette che i valori di padding e margin vengano sottratti alla dimensione dell'elemento*/
	}
	
	.div_footer{
	display: flex;
display: -webkit-flex;
flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
justify-content: space-between;
-webkit-justify-content: space-between;
width:100%;
	}
	.section_footer{
	width:33%;
	}
}

@media only screen 
and (max-device-width : 1014px){
		.section_article{
		display: flex;
display: -webkit-flex;
flex-flow: column nowrap;
-webkit-flex-flow: column nowrap;
align-items: center;
    -webkit-align-items:center;
width:100%;
	}
		.element{
			padding:20px;
		width:100%;
		box-sizing:border-box; /*permette che i valori di padding e margin vengano sottratti alla dimensione dell'elemento*/
	}
	
	.div_footer{
display: flex;
  display:-webkit-flex;
 flex-flow: column nowrap;
-webkit-flex-flow: column nowrap;
  align-items: center;
    -webkit-align-items:center;
	padding:0px;
	width:100%;
	max-width:600px;
}
.section_footer{
	width:100%;
	padding:0px;
	}
}

p{
	margin:5px 0px;
	border: 0px solid white;
}

h1,h2,h3,h4{
	color:rgb(199,199,199);
	border: 0px solid violet;
	margin:10px;
}

h1,h2{
text-align:center;
}

.center{
	text-align:center;
	webkit-text-align:center;
}

a {
  text-decoration: none;
  border: 0px solid orange;
}

a:link{
	 color:rgb(204,204,204);
padding:0px;/*se non è 0 salta fuori un rettangolo bianco in alto a sinistra di ogni immagine della galleria*/
	}
a:visited{
	 color:rgb(204,204,204);
padding:0px;/*se non è 0 salta fuori un rettangolo bianco in alto a sinistra di ogni immagine della galleria*/
	}
a:hover{
	 color:rgb(255,255,255);
padding:0px;/*se non è 0 salta fuori un rettangolo bianco in alto a sinistra di ogni immagine della galleria*/
	}
a:active, a:hover{
outline:none;
}
	
a.disatt_hover:hover{
	color:rgb(204,204,204);
}

ul{
	border:0px solid #00ffff;
	margin:0px;
	}
	
	li{
		border: 0px solid brown;
	}
	


.titolo{
	text-align:left;
    padding:0px;
	margin:15px 0px 0px 0px;
    width:100%;
}

figure{
	border: 0px solid bisque;
	margin: 0px;
	padding: 0px;
	display: flex;
    display:-webkit-flex;
	align-items:center;
	webkit-align-items:center;
	text-align: center;
}

picture{
	margin:0px 0px;
	padding:0px;
	border:0px solid #0000ff;
}

img{
	margin:0px;
	padding:0px;
    border:0px solid #ffffff;
}

.img_line_height{
	line-height:0;
}
/*
Per impostazione predefinita, le immagini sul web sono posizionate sulla stessa linea 
come se fossero lettere. Pertanto la base dell'immagine poggerà alla stessa altezza su cui poggiano lettere ascendenti 
come la a, la d, la s, ecc... tuttavia per garantire lo stesso ingombro occupato dalle lettere discendenti quali 
ad esempio la j, la g, ecc... viene assegnato all'immagine stessa uno spazio vuoto il quale può risultare antiestetico 
qualora si lavorasse, per dirne una, con un mosaico di immagini.
Per ovviare a questa situazione con i CSS è possibile agire in 3 modi:

1) Assegnare una dichiarazione line-height al contenitore dell'immagine:
.contenitore {line-height: 0;}

2) Assegnare la dichiarazione display:block all'immagine:
.contenitore img {display: block;}

3) Modificare il vertical-align per posizionare l'immagine ad un'altra altezza:
.contenitore img {vertical-align: bottom;}
*/



.intestaz_mobile{ /*per centrare l'intestazione e i link social e lingua*/
display: flex;
    display:-webkit-flex;
	flex-direction: column;
    -webkit-flex-direction: column;
	align-items:center;
	webkit-align-items:center;
}

.lang{
	display: flex;
  display:-webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
  -webkit-justify-content: center;
	align-items:center;
	webkit-align-items:center;
	background-color: rgb(143,143,143);
	border-radius:10px;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.lang_desktop{
	padding:0px;
	margin:0px;
}
.lang_mobile{
	padding: 0px;
}

.lang li{
	padding:3px 10px;
}
.lang li a{
transition: background .4s linear;
  margin:0px;
    padding:0px;
}

.lang li a:link{
padding: 0px;/*se non è 0 salta fuori un rettangolo bianco in alto a sinistra di ogni immagine della galleria*/
	}
.lang li a:visited{
padding: 0px;/*se non è 0 salta fuori un rettangolo bianco in alto a sinistra di ogni immagine della galleria*/
	}
.lang li a:hover{
padding: 0px;/*se non è 0 salta fuori un rettangolo bianco in alto a sinistra di ogni immagine della galleria*/
	}
.lang li a:active, a:hover{
outline:none;
}

@media only screen
and (min-device-width : 885px){
	
.menu {
  display: flex;
  display:-webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: space-around;
  -webkit-justify-content: space-around;
   align-items:center;
  -webkit-align-items:center;
   flex-basis: 1000px;/*definisce lo spazio massimo occupato dall'elemento <ul> prima di venire ridimensionato*/
  margin: 0px;
  height: 40px;
  border:1px solid rgb(174,174,174);
  background-color: rgb(29,29,29);
	border-radius:10px;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.menu li{
	padding:0px;
}
.menu li a{
transition: background .4s linear;
  border-radius:5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
    padding: 2px 10px;
}
.fade_menu{ 
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.fade_menu:hover{
background-color: rgba(111,111,111,0.4);
}
}

.margin-desktop{
	  margin: 0px 10px 40px 10px;
}

/*tasto "torna su"*/
#back_to_top{
position: fixed;
bottom: 0px;
right: 0px;
display: none;
padding:10px;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 e precedenti */
}



/*https://codemyui.com/toggle-menu-that-slides-from-the-top/*/
@media only screen
and (min-device-width : 730px){
.cont{
		margin:10px 0px 0px 0px;
}
	
	#nav-content{
	display:none;/*non mostrare il menu #nav-content*/
	}
}

@media only screen
and (max-device-width : 884px){
	
.margin-mobile{
	margin: 0px 0px 40px 0px;
}
	
.display-mobile-none {
	display:none;/*non mostrare il menu principale*/
	}
	
 body h1 > span {
	 text-transform: none;
	 opacity: 0.5;
	 font-weight: 300;
	 font-size: 12px;
}
.toggle {
	 position: relative;/*segue il normale flusso degli elementi*/
	 z-index: 5;
	  height: 20px;
	 width: 30px;
	 top:0px;
	 left:0px;
	 border:0px solid rgb(255,255,255);
	 background-color:transparent;
}
 body input + label span {
	 position: absolute;
	 width: 100%;
	 height: 2px;/*spessore delle linee del trigramma*/
	 top: 50%;
	 margin-top: -1px;
	 left:0;
	 display: block;
	 background: rgb(213,213,213);/*colore del trigramma/croce*/
	 transition: 0.5s;
}
 body input + label span:first-child {
	 top: 0px;
}
 body input + label span:last-child {
	 top: 20px;
}
 body label:hover {
	 cursor: pointer;
}
 body input:checked + label span {
	 opacity: 0;
	 top: 50%;
}
 body input:checked + label span:first-child {
	 opacity: 1;
	 transform: rotate(405deg);
}
 body input:checked + label span:last-child {
	 opacity: 1;
	 transform: rotate(-405deg);
}

 body input ~ #nav-content {
	 background: rgba(0,0,0,0.6);
	 position: fixed;
	 display: flex;
    display:-webkit-flex;
	flex-direction: column;
    -webkit-flex-direction: column;
	align-items:center;
	webkit-align-items:center;	

	 top: 0px;
	 left: 0;
	 width: 100%;
	 height: 0px;
	 z-index: 3;
	 transition: 0.5s;
	 transition-delay: 0.5s;
	 overflow: hidden;
	 border:0px solid red;
}

 body input ~ #nav-content > ul {
	 background: rgb(29,29,29);
  	 text-align: center;
	 position: absolute;
	 top: 6%;
	 width:310px;
	 border:2px solid rgb(116,116,116);
	 border-radius:10px;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	 
}

 body input ~ #nav-content > ul > li {
	 opacity: 0;
	 transition: 0.5s;
	 transition-delay: 0s;
}
 body input ~ #nav-content > ul > li > a {
	 font-size:1.0rem;
	 border:0px solid blue;
}
 body input:checked ~ #nav-content {
	 height: 100%;
	 transition-delay: 0s;
}
 body input:checked ~ #nav-content > ul > li {
	 opacity: 1;
	 transition-delay: 0.5s;
	 padding:0px;
	 margin:25px;
	 border-bottom:1px solid rgb(76,76,76);
}

}

	.cont{
	 border:0px solid green;
	 display: flex;
    display: -webkit-flex;
	flex-direction: row;
    -webkit-flex-direction: row;
	justify-content: space-between;
	  -webkit-justify-content: space-between;
	   align-items:center;
  -webkit-align-items:center;
	padding:0px;
	margin:10px 10px 20px 10px;
}



.no_list{ /*elimina il pallino che precede le voci di un elenco*/
	list-style-type:none;
}

.pics {
  display: flex;
  display:-webkit-flex;
 flex-flow: row wrap;
-webkit-flex-flow: row wrap;
  justify-content: center;
  -webkit-justify-content: center;
   align-items:center;
  -webkit-align-items:center;
padding: 0px;
}
.pics li{
	padding:10px;
}

.flex-end{
	justify-content: flex-end;
  -webkit-justify-content: flex-end;
}