@rosso:#a72f27;
@verde:#205434;
@bianco:#fff;
@grigio:#c9c9c9;
@nero:#1b1b1b;
@bianco_trasparente:#ffffff80;

.inner{
	max-width:60%;
	margin:0 auto;
	margin-top:-3em;
	background:@bianco;
	padding-top:4em;
	padding-bottom:2em;
	p:not(.h1):not(.h3){
		text-align:justify;
		text-align-last:center;
		padding:0 15%;
		&.left{
			text-align:left;
			text-align-last:left
		}
    }
    a{color:@verde}
}
.banner{z-index:-1}
.sections{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	border-top:1px solid @grigio;
	margin-top:3em;
	.section{
		cursor:pointer;
		&.s1{
			width:33%;
			height:65vw
		}
		&.s2{
			width:67%;
			height:65vw;
			.line{height:50%}
		}
		&.s3,&.s4{
			width:50%;
			height:35vw
		}
	}
}
.cols{
	justify-content:center;
	.col{padding:1% 0.5%}
}
.container img{cursor:pointer}
.popup{
	cursor:pointer;
	position:fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	z-index:999999999;
	background-color:@bianco;
	display:flex;
	align-items:center;
	justify-content:center;
	img{
		width:auto;
		height:auto;
		max-width:100%;
		max-height:100%;
	}
	&.hide{display:none}
}
@media(max-width:1600px){
	.sections .section.s4 .shader .firma{
		img{width:85%}
		p{margin-top:-3em}
	}
}
@media(max-width:900px){
	.inner{
		max-width:70%;
		p:not(.h1):not(.h3){padding:0 10%}
	}
	.sections .section{
		width:100%;
		height:100vw;
		&.s4 .shader .firma p{margin-top:-5em}
	}
}
@media(max-width:600px){
	.inner{
		padding:1em;
		max-width:85%;
		p:not(.h1):not(.h3){padding:0 5%}
	}
	.sections .section.s4 .shader .firma p{margin-top:0}
}
@media(max-width:450px){
	.inner{
		margin:0;
		max-width:100%
	}
	.sections .section{height:150vw}
}