@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

html {
	height: 100%;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}


body {
	/*position: relative;*/
	background-color: #f3ebe3;
	background-image: url('texture2.png');
	background-position: center;
	background-repeat: repeat;
	font-family: Georgia;
	font-size: 20px;
	line-height: 30px;
	margin: 0px;
	font-color: #231f20;
	/*min-height: 100%;*/
}

.Hero {
	text-align: left;
	/*max-height: 500px;*/
	height: 500px;
	background-color: #f3ebe3;
	background-image: url('disegnini.png');
	background-position: left;
	background-repeat: no-repeat;
}

.am-footer {
	/*height:200px; */
	width: 100%;
	min-height: 400px;
	background-color: #f3ebe3;
	background-image: url('footer.png');
	background-position: top-left;
	background-repeat: no-repeat;
	/*position: absolute;
  right: 0;
  bottom: 0;
  left: 0;	*/

	z-index: -1;
}

.main {
	width: 700px;
	margin-left: 100px;
	margin-top: 50px;
}

.box-link {
	/*display: grid;*/
	border: 2px solid #231f20;
	border-radius: 8px;
	padding: 8px 15px 8px 15px;
	color: #231f20;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	width: fit-content;
	margin-bottom: 50px;
}

.box-link-invert {
	/*display: grid;*/
	border: 2px solid #231f20;
	background-color: #231f20;
	border-radius: 8px;
	padding: 8px 15px 8px 15px;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	width: max-content;
	margin-bottom: 50px;
}

.box-link:hover {
	background: #fff;
	color: #fff;
	border: 2px solid #0f37ff;
}

.box-link-invert:hover {
	background: #0f37ff;
	border: 2px solid #0f37ff;
}

a.link {
	color: #231f20;
	text-decoration: none;
}

.box-link-invert a {
	color: #fff;
}

.box-link:hover a {
	color: #0f37ff;
}

.freccina {
	vertical-align: middle;
	/*padding-left: 10px*/ ;
	width: 24px;
	height: 24px;
}

.box-link-invert .freccina {
	/*filter: invert(93%) sepia(0%) saturate(27%) hue-rotate(15deg) brightness(104%) contrast(108%);*/
}

.box-link:hover .freccina {
	/*filter: invert(13%) sepia(95%) saturate(5107%) hue-rotate(236deg) brightness(98%) contrast(107%);*/
	 content:url("freccia-blu.png");
}

/*.box-link-invert:hover .freccina{
	filter: invert(13%) sepia(95%) saturate(5107%) hue-rotate(236deg) brightness(98%) contrast(107%);
}*/

.left {
	float: left;
	margin-right: 20px;
}

@media (min-height: 1400px) {
	.am-footer {
		/*height:200px; */
		width: 100%;
		min-height: 400px;
		background-color: #f3ebe3;
		background-image: url('footer.png');
		background-position: top-left;
		background-repeat: no-repeat;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;

		z-index: -1;
	}


}

@media (max-width: 767.98px) {
	.main {
		width: 80%;
		margin-left: 70px;

	}

	.Hero {
		text-align: left;
		height: 400px;
		background-color: #f3ebe3;
		background-image: url('disegnini_xs.png');
		background-position: left;
		background-repeat: no-repeat;
	}


	.am-footer {
		height: 200px;
		width: 100%;
		min-height: 300px;
		background-color: #f3ebe3;
		background-image: url('footer_xs.png');
		background-position: top-left;
		background-repeat: no-repeat;
	}

	body {
		font-size: 24px;

	}

	.box-link-invert {
		/*font-size: 20px;*/
	}

	.box-link {
		/*font-size: 20px;*/
	}

	.am-logo {
		max-height: 400px;
	}

}

.am-logo {
	position: relative;
	vertical-align: middle;
	max-height: 500px;
}

.helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}