/*Versione del 202000424 */
/* variabili -------------------------------------------------- */
:root {
  --fondo-color: #d8c9a2;
  --sfondo-color: #E8E4BE;
  --anse-color: #ffffd2; /*giallo chiaro*/
  --icare-color: #f5e8ff; /*rosa chiaro*/
  --libre-color: #dfffff; /*celeste chiaro*/
  --border-color: #c1c141;
  --head-foot-color: #f3eeda;
  --pulsa-color: #caba8c;
}
/* tags ------------------------------------------------------- */
form {
	border: 3px solid var(--border-color);
	border-radius: 8px;
}

form.anse{
	background-color: var(--anse-color);
}

form.icare{
	background-color: var(--icare-color);
}

form.libre{
	background-color: var(--libre-color);
}

select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 18px;
}

@media screen and (max-width: 600px) {
  select {
	font-size:18px;
  }
}

/*
button.image {
	background-size: contain;
	background-color: white;
	box-shadow: 3px 3px #cccccc;
	border: none;
	cursor: pointer;
	height: 40px;
	width: 40px;
}

	button.image:hover {
	box-shadow: 3px 3px #000000;
}

@media screen and (max-width: 1024px) {
	button.image {
	height: 60px;
	width: 60px;
  }
}
*/
input[type=text], input[type=number], input[type=password], input[type=date] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 18px;
}

@media screen and (max-width: 600px) {
  input[type=text], input[type=number], input[type=password], input[type=date] {
	font-size:14px;
  }
}

input[type=checkbox],input[type=radio] {
  width: 25px;
  height: 25px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 14px;
}

@media screen and (max-width: 600px) {
	input[type=checkbox], input[type=radio] {
	font-size:14px;
  }
}

input[type=file] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 14px;
}

@media screen and (max-width: 600px) {
	input[type=file] {
	font-size:20px;
  }
}

p {
	margin-left: 2px;
	font-size: 14px;
}

@media screen and (max-width: 600px) {
  p {
 	font-size: 14px;
  }
}

label {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

@media screen and (max-width: 600px) {
  label {
	font-size:20px;
  }
}

/*classi -------------------------------------------------------*/
.riga-100 {
  display: inline-block;
  width: 100px;
}

.riga-auto {
  display: inline-block;
  width: auto;
}

.footer {
cursor: pointer;
background-color: var(--head-foot-color);
color: #000000;
height: auto;
padding: 3px 0 3px 0;
margin: 10px 0px 10px 0px;
text-align: center;
align-content: center;
font-weight: bold;
font-size: 14px;
}

@media screen and (max-width: 600px) {
  .footer {
	height: auto;/*120px*/
	/*width: 100%;*/
	font-size: 24px;
  }
}

.header {
background-color: var(--head-foot-color);
color: #000000;
height: auto;
padding: 3px 0 3px 0;
/*margin: 1px 0px 1px 0px;*/
text-align: center;
font-weight: bold;
font-size: 16px;
}

@media screen and (max-width: 600px) {
	.header {
	font-size: 12px;
  }
}

.menutitle {
	background-size: contain;
	background-color: #ffefff; /*#ffff00;*/
	color: #000000;
	box-shadow: 3px 3px #cccccc;
	border: none;
	cursor: pointer;
	border-radius: 8px;
	height: 25px;
	width: 300px;
	padding: 2px;
	margin: 10px 5px;
	justify-content: center;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	/*border-radius: 8px;*/
}

.menutitle:hover {
	box-shadow: 3px 3px #000000;
	/*background-color: #ffefd5; /*#00ff00;*/
}

@media screen and (max-width: 600px) {
  .menutitle {
	/*height: 20px;
	width: 250px;*/
	font-size: 14px;
  }

  .menutitle:hover {
	box-shadow: 3px 3px #000000;
	/*background-color: #ffefd5;*/
	}
}

.container {
	width: 100%;
	align-content: center;
}

/* grid ------------------------------------------------------------------------*/
.footer-container {
  display: grid;
  height: 150px;
  font-size: 14px;
  /*align-content: center;*/
  grid-template-columns: 1fr 1fr; /*auto auto;*/
  flex-wrap: wrap;
}
/* quella sotto era .footer-container > div */
	.footer-button  {
	text-align: center;
	font-size: 20px;
	}

.imgcontainer {
  display: grid;
  background-color: ffffff;
  height: 70px;
  grid-template-columns: 70px auto 70px;
}

.imgcontainer > div {
  text-align: center;
}

.grid-container {
  display: grid;
  height: auto;
  width: auto;
  align-content: center;
  grid-template-columns: 100px auto;
  grid-gap: 5px;
  background-color: var(--fondo-color);
  padding: 10px;
}

.grid-container > div {
  background-color: var(--sfondo-color);
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
}

.grid-news {
  display: grid;
	border: 3px solid var(--border-color);
	border-radius: 8px;
  height: auto;
  margin: 3px;
  padding: 3px;
  text-align: center;
  /*grid-template-columns: 75% 25%; /*auto 80px;*/
}

.news {
	font-size: 16px;
}

@media screen and (max-width: 1024px) {
 .news  {
	font-size: 14px;
	}
}

/*flex -------------------------------------------------------------------------------------*/

.flex-scelte {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
    flex-direction: row;
	background-color: var(--pulsa-color);
}

.flex-container {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
    flex-direction: row;
	background-color: var(--pulsa-color);
}

@media screen and (max-width: 600px) {
  .flex-container  {
    flex-direction: column;
	}
}

.flex-figura {
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	background-color: var(--pulsa-color);
}

@media screen and (max-width: 600px) {
  .flex-figura  {
	flex-wrap: wrap;
	}
}

.flex-item {
  border: 1px solid var(--border-color);
  background-color: #ffffff; /*var(--sfondo-color);*/
  width: 200px;
  margin: 3 1 3 1;
  padding: 2px;
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  .flex-item  {
	width: 1fr;
	font-size: 16px;
	}
}

.flex-pc {
  border: 1px solid var(--border-color);
  background-color: #ffffff; /*var(--sfondo-color);*/
  width: 200px;
  margin: 3 1 3 1;
  padding: 2px;
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  .flex-pc  {
	display: none;
	}
}

.flex-button {
/*background-color: #f1f1f1;*/
	width: 70px;
	text-align: center;
	padding: 5px;
	font-size: 14px;
}

@media screen and (max-width: 600px) {
  .flex-button  {
	width: auto;
	font-size: 14px;
	}
}

/*paragrafo ---------------------------------------------------------------------------------------*/
.left{
	text-align: left;
}

.center{
	text-align: center;
}

.right{
	text-align: right;
}

.justify{
	text-align: justify;
}

.black{
	color: black; 
}

.blue{
	color: blue; 
}

.white{
	color: white; 
}

.red{
	color: red; 
}

.green{
	color: green; 
}

.yellow{
	color: yellow; 
}

.b-white{
	background-color: white; 
}

.b-red{
	background-color: red; 
}

.b-green{
	background-color: #73ec73; 
}

.b-yellow{
	background-color: yellow; 
}

.b-libre{
	background-color: var(--libre-color); 
}

.b-icare{
	background-color: var(--icare-color); 
}

.b-anse{
	background-color: var(--anse-color); 
}

.bold{
	font-weight: bold;
}

.font-16{
	font-size: 16px;;
}

/*testi -----------------------------------------------------------------------------------------*/
.lista {
	margin-left: 2px;
	vertical-align: middle;
	font-size: 18px;

}

@media screen and (max-width: 600px) {
  .lista {
	font-size: 14px;
	}
}

.testo-small {
	font-size: 14px;
	margin: 0 0 0 0;

}

@media screen and (max-width: 600px) {
  .testo-small {
	font-size: 12px;
	}
}
/*
p.copy {
	color: blue;
	text-align: center;
	font-weight: bolder;
	font-size: 10px;
}

@media screen and (max-width: 600px) {
  p.copy {
 	font-size: 12px;
  }
}

.cook {
	color: red;
	text-align: center;
	font-style: italic;
	font-size: 10px;
}

@media screen and (max-width: 600px) {
  .cook {
 	font-size: 12px;
  }
}
*/
/*immagini---------------------------------------------------------------------------------*/
img.logo_p {
  width: 100%;
  height: 100%;
  object-fit: contain;
 }

 /* Foto image */
img.figura {
  max-height: 250px;
  object-fit: contain;
}

@media screen and (max-width: 600px) {
  img.figura {
  max-height: 150px;
  }
}

 img.icona {
  background-color: #f0ffff;
  margin-top: 5px;
  border-style: outset;
  border-width: 3px;
  border-color: #f8f8ff;
  width: 32px; /*40%;*/
}

img.icona:hover {
  background-color: #f8f8ff;
	border-style: inset;
}

@media screen and (max-width: 600px) {
  img.icona {
 	width: 20px; /*30%;*/
  }
}

img.foto {
  max-width: 100px;
}

img.foto:hover {
  max-width: 450px;
}

@media screen and (max-width: 600px) {
  img.foto {
  max-width: 50px;
  /*object-fit: contain;*/
  }

img.foto:hover {
  max-width: 300px;
  /*object-fit: contain;*/
}
}

.margine-t {margin-top: 10px;}

.margine-b {margin-bottom: 10px;}

.margine-l {margin-left: 10px;}

.margine-r {margin-left: 10px;}

img.bottone {
	background-size: contain;
	background-color: white;
	box-shadow: 3px 3px #cccccc;
	border: none;
	cursor: pointer;
	border-radius: 8px;
	height: 40px;
	width: 40px;
}

	img.bottone:hover {
	box-shadow: 3px 3px #000000;
}

@media screen and (max-width: 1024px) {
  img.bottone {
	height: 50px;
	width: 50px;
  }
}

/*
.bottonpag {
  display: block;
  margin-left: auto;
  margin-right: auto;
	background-color: white;
	box-shadow: 3px 3px #cccccc;
	border: none;
	cursor: pointer;
	border-radius: 8px;
	height: 40px;
	width: 40px;
}

	.bottonpag:hover {
	box-shadow: 3px 3px #000000;
}

@media screen and (max-width: 1024px) {
  .bottonpag {
	height: 30px;
	width: 30px;
  }
}
*/
.bottonpag {
  margin: 5px;
  background-color: white;
	box-shadow: 3px 3px #cccccc;
	border: none;
	cursor: pointer;
	border-radius: 8px;
	height: 40px;
	width: 40px;
}

.bottonpag:hover {
	box-shadow: 3px 3px #000000;
}

@media screen and (max-width: 1024px) {
  .bottonpag {
	height: 40px;
	width: 40px;
  }
}