@font-face {
  font-family: myFirstFont;
  src: url(Font/Montserrat-Regular.ttf);
}



body { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.1em;
  line-height: 1.5;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  text-align: justify;
  
}


* {box-sizing: border-box;}


hr{
	border-bottom: 0.5px solid blue;
	border-top:none;
}


ht { 
  font-family: myFirstFont;
  display: block;
  font-size: 2.0em;
  margin-top: 0.83em;
  margin-bottom: 0.99em;
  margin-left: 15px;
  margin-right: 0px;
  font-weight: bold;
  text-align: left;
}

ht1 { 
  font-family: myFirstFont;
  display: block;
  font-size: 2.5em;
  margin-top: 0.83em;
  margin-bottom: 0.99em;
  margin-left: 15px;
  margin-right: 0px;
  font-weight: bold;
  text-align: center;
}

ht2 { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.2em;
  margin-top: 0.83em;
  margin-bottom: 0.99em;
  margin-left: 15px;
  margin-right: 0px;
  font-weight: bold;
  text-align: left;
}


ht3 { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.1em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  font-weight: bold;
  text-align: left;
}

ht4 { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.1em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  font-weight: normal;
  text-align: justify;
  
}

ht5 { 
  font-family: myFirstFont;
  display: block;
  font-size: 0.8em;
  line-height: 1.3;  /* 1.0 */
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: normal;
  text-align: justify;  
}


input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input[type=password], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}


label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  width: 100%;
  background-color: #0000ff;
  color: white;
  font-size: 1.1em;
  padding: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  float: center;
}

input[type=submit]:hover {
  background-color: #000000;
}

.container {
  border-radius: 5px;
  background-color: #0000ff;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}






#container {font-family: myFirstFont;
    	width: 100%;
	overflow-x: hidden;/* nasconde la barra di scroll orizzontale*/
}
#header {
	float:left;
	background:#000000;
}

#sub-header {
	float:center;
	background:#F0F0F0;
	padding: 20px;
}

 

#footer{
	font-family: myFirstFont;
	width: 100%;
	float:left;
	font-size: 1.0em;  /* 1.5 */
  	line-height: 1.0;  /* 1.0 */
	padding: 0px;
	background: #000000;
	color: #FFFFFF;
}


#footer a {
	color: #FFFFFF;
	text-decoration:none;	
	display: block;
	font: 14px;
	padding: 14px 20px;}
#footer a:hover {
	background:#000000;
	color:blue;
}

#titolo a {
	font-weight: bold; 
	font-size:60px;
	float:left;
	color:#000000;
	margin: 0px 20px 20px 20px;
	text-decoration:none;
}

#menu{
	font-family: myFirstFont;
	width: 100%;
	float:left;
	background: #000000;
}	
	
	
#menu ul {
	margin: 10px 10px 10px 10px;
	float:left;
	width:100%; 
	list-style: none;}
#menu ul li {
	float:right;
	color:blue;
	margin: 10px;
	position: relative;}
#menu a {
	color: #FFFFFF;
	text-decoration:none;	
	display: block;
	font: 14px;
	padding: 10px 10px;}
#menu a:hover {
	background:#000000;
	color:blue;
}

#pagina{
		width:100%;
		float:left;
		margin:0px;
		display: block;
		font: 14px;
		color:#0000CD;
		font-weight:bold;	
	}
#link {
  	padding: 10px;
	margin-top:20px;
	width:auto;
	height:auto;
}
#box {
	margin-top:10px;
  	padding: 5px;
	border:1px dashed #0000CD;
	width:auto;
	height:auto;
}





.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline label {
  margin: 5px 10px 5px 0;
}

.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.form-inline button {
  padding: 10px 20px;
  background-color: blue;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
}

.form-inline button:hover {
  background-color: #000000;
}








.immagine{
	width:100%;
	height:auto;
}

.centra {
	text-align:center;
}
.giustifica {
	text-align:justify;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    clear: both;
    display: block;
}








[class*="grid_"] { /* proprietà valida per .grid_1,.grid_2,... .grid_12 */
  float: left;
  padding: 15px;
}
.grid_1 		{width: 8.33%;} /* 100:12=8.333333 */
.grid_2 		{width: 16.66%;}
.grid_3 		{width: 25%;}
.grid_4 		{width: 33.33%;}
.grid_5 		{width: 41.66%;}
.grid_6 		{width: 50%;}
.grid_7 		{width: 58.33%;}
.grid_8 		{width: 66.66%;}
.grid_9 		{width: 75%;}
.grid_10 		{width: 83.33%;}
.grid_11 		{width: 91.66%;}
.grid_12 		{width: 100%;}





/*Media queries per il responsive design */

@media (min-width: 1200px) {
/* quando lo schermo, o la finestra del browser, ha una dimensione >= di 1200px */
	#container{
		width: 100%;
	}
	#header,#footer{
		width: 100%;
		float:left;	
	} 
	#menu{
		width: 100%;
		float:right;
		display:block;
	}
	
body { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.5em;  /* 1.5 */
  line-height: 1.5;  /* 1.0 */
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  text-align: justify;
  
}	
}

@media (min-width: 980px) and (max-width: 1199px) {
/* quando lo schermo, o la finestra del browser, ha una dimensione compresa tra 980 e 1199px */
	#container {
		width: 100%;
		margin: 0 auto;
	}
	#header, #footer {
		width: 100%;
		float:left;
	} 
	#menu{
		width: 100%;
		float:right;
		display:block;
	}
	#titolo a {
		font-size:52px;
		margin-left:10px;
	}
	
body { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.1em;  /* 1.5 */
  line-height: 1.5;  /* 1.0 */
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  text-align: justify;
  
}	
		
}

@media (min-width: 768px) and (max-width: 979px) {
/* quando lo schermo, o la finestra del browser, ha una dimensione compresa tra 768 e 979px */
	#container {
		width: 100%;
		margin: 0 auto;
	}
	#header,#footer{
		width: 100%;
		float:left;
	} 
	#menu{
		width: 100%;
		float:right;
		display:block;
	}
	#titolo a {
		font-size:48px;
		margin-left:10px;
	}
	

body { 
  font-family: myFirstFont;
  display: block;
  font-size: 0.8em;  /* 1.5 */
  line-height: 1.5;  /* 1.0 */
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  text-align: justify;
  
}



}

@media (max-width: 767px) {
/* quando lo schermo, o la finestra del browser, diventa minore di  768px */

body { 
  font-family: myFirstFont;
  display: block;
  font-size: 0.5em;  /* 1.5 */
  line-height: 1.3;  /* 1.0 */
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  text-align: justify;
  
}



* {box-sizing: border-box;}


hr{
	border-bottom: 0.5px solid blue;
	border-top:none;
}


ht1 { 
  font-family: myFirstFont;
  display: block;
  font-size: 2.5em;
  margin-top: 0.83em;
  margin-bottom: 0.99em;
  margin-left: 15px;
  margin-right: 0px;
  font-weight: bold;
  text-align: center;
}

ht2 { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.2em;
  margin-top: 0.83em;
  margin-bottom: 0.99em;
  margin-left: 15px;
  margin-right: 0px;
  font-weight: bold;
  text-align: left;
}



ht3 { 
  font-family: myFirstFont;
  display: block;
  font-size: 2.5em;
  margin-top: 0.83em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  font-weight: bold;
  text-align: left;
}

ht4 { 
  font-family: myFirstFont;
  display: block;
  font-size: 2.0em;
  line-height: 1.3;  /* 1.0 */
  margin-top: 0.83em;
  margin-bottom: 0.0em;
  margin-left: 0px;
  margin-right: 0px;
  font-weight: normal;
  text-align: justify;  
}


ht5 { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.5em;
  line-height: 1.3;  /* 1.0 */
  margin-top: 0.83em;
  margin-bottom: 0.0em;
  margin-left: 15px;
  margin-right: 15px;
  font-weight: normal;
  text-align: justify;  
}


ht6 { 
  font-family: myFirstFont;
  display: block;
  font-size: 1.0em;
  line-height: 1.3;  /* 1.0 */
  margin-top: 0.83em;
  margin-bottom: 0.0em;
  margin-left: 15px;
  margin-right: 15px;
  font-weight: normal;
  text-align: justify;  
}


	#container {
		width:100%;
		margin: 0 auto;
	}
	#header{
		width:100%;
		padding: 0px 0 0px 0px;
		background:#000000;
		color: #FFFFFF;} 
	#menu{
		width:100%;
		float:left;
	}
	#footer{
		font-family: myFirstFont;
		width: 100%;
		float:left;
		font-size: 2.0em;  /* 1.5 */
  		line-height: 0.3;  /* 1.0 */
		padding: 0px;
		background: #000000;
		color: #FFFFFF;
	}
	
	
	
	[class*="grid_"] {
		width:100%;
	}
	#titolo a {
		font-size:35px;
		margin-left:10px;
	}
	/* in questo caso (smartphone e piccoli tablet) si gestisce il menù*/ 
	#menu{
		display:none;
		/*  non viene visualizzato il menu classico*/
	}
	#menu ul li {
		float: none;
	}	
	.smartmenu{	
		display: block;
		/*viene visualizzato invece il menù con la classica icona a barre orizzontali*/
		float: right;
		padding:5px;
		cursor:pointer;
		margin:-15px 20px 50px 50px;
		color: #FFFFFF;
		background:#000000;
	}
	.icon-smartmenu{
		display: block;
		width: 18px;
		height: 2px;
		margin:5px;
		background-color: #FFFFFF;	
	}
	.mostra-smartmenu{
		display:block!important;
	}
	
	
			
	 .form-inline input {
    		margin: 10px 0;
  	}
  
  	.form-inline {
    		flex-direction: column;
    		align-items: stretch;
 	 }
 	 
 	 
 	 
 	.col-25, .col-75, input[type=submit] {
    		width: 100%;
   		margin-top: 0;
  	} 	 
 	 
 	 
 	 
 	 
}