@charset "UTF-8";
/* CSS Document */

@media only screen and (max-width: 1200px)
{

h1 {
	font-size: 30px;
}

h3 {
	font-size: 24px;
}

#page p {
    font-size: 16px;
    line-height: 23px;
}

.forma-4 {
	right: -185px;
}

.forma-6 {
	right: -60px;
}
#mappa #marker1 .caption
{
padding:10px;
width:180px;
}
}

@media only screen and (max-width: 1023px)
{	

h1 {
    font-size: 21px;
}

h3 {
    font-size: 20px;
}

#three .tabella, #three .cella, #seven .tabella, #seven .cella {
    display: block;
    width: 100%;
    padding: 0;
    margin: 40px 0;
}

.forma-1 {
	right: -110px;
}

.forma-2 {
	top: auto;
	bottom: 0;
}

.forma-4 {
    right: -320px;
}

#page #five .text-virtual-wrap p {
	font-size: 26px;
	line-height: 40px;
}

.background-section {
	height: 450px;
}

#page p {
    font-size: 15px;
    line-height: 21px;
}

.forma-5 {
    left: 10px;
    top: -20px;
}

.forma-6 {
    bottom: 380px;
}

.module-3 {
	padding-top: 100px;
}

#mappa .marker {
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 32px;
}

#mappa #marker1 {
    top: 12.5%;
}

#mappa #marker2 {
    top: 22.8%;
}

#mappa #marker3 {
    top: 40%;
}

#mappa #marker4 {
    top: 42.5%;
}

#mappa #marker5 {
    top: 58%;
}

#mappa #marker6 {
    top: 43%;
}
.evid .anim {
    line-height: 42px;
}
h1,h3
{
line-height: 46px;
}
h3, #page p {padding: 0 3rem;}
#page p.perc {
    max-width: 310px;
}
#mappa .marker .caption
{
width: 280px;
font-size: 15px;
line-height: 21px;
}
#mappa #marker1 {
    left: 90%;
}
#mappa #marker1 .caption {
    width: 162px;
}
}

@media only screen and (max-width: 767px) 
{	
	.content-main-image {
   		 border: 15px solid;
   		 border-image-source: linear-gradient(320deg, #4b3c90, #e6276b, #ec5e50);
    		border-image-slice: 1;
	}

	.evid .anim {
		line-height: 28px;
	}

	h1 {
		line-height: 32px;
		font-size: 18px;
	}

	h3 {
		line-height: 33px;
	}


	.module {
    	padding-top: 20px;
    	padding-bottom: 20px;
	}

	.forma-1 {
		right: -130px;
	}

	#page p {
		margin: 10px 0;
	}

	#three .tabella, #three .cella, #seven .tabella, #seven .cella {
		margin: 20px 0;
	}

	.forma-2 {
		left: -200px;
	}

	.evid span {
	    padding-left: 10px;
	    padding-right: 10px;
	}

	.forma-4 {
		right: -370px;
		bottom: 100px;
	}

	#page p.perc {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	#page #five .text-virtual-wrap p {
    	font-size: 20px;
    	line-height: 32px;
	}

	.module-2 {
    	padding-top: 100px;
    	padding-bottom: 50px;
	}

	.focus .sli {
    	padding: 60px 0;
	}

	.slides {
    	padding-top: 60px;
    	padding-bottom: 60px;
	}

	.slick-dots {
		bottom: 30px;
	}

	.forma-6 {
    	right: -140px;
	}

	.module-3 {
		padding-top: 0;
	}

	#mappa {
    	margin-top: 0px;
	}

	#mappa .marker span {
		line-height: 30px;
		font-size: 35px;
		width: 35px;
		height: 35px;
	}
	#mappa .marker.on span {
    line-height: 24px;
}

	#mappa #marker2 {
	    top: 29.8%;
    	left: 59.3%;
	}

	#mappa #marker3 {
	    top: 46%;
	    left: 42.4%;
	}

	#mappa #marker4 {
	    top: 46.5%;
	    left: 79%;
	}

	#mappa #marker5 {
	    top: 63%;
	    left: 47.3%;
	}

	#mappa #marker6 {
	    top: 47%;
	    left: 20%;
	}
	#mappa .marker .caption
	{
font-size: 13px;
line-height: 19px;
	}
#mappa #marker1 .caption {
    width: 148px;
}

}

@media only screen and (max-width: 699px)
{
#page
{
margin-top: 63px;
}
h3, #page p {
    padding: 0 0;
}
#page p.perc {
    margin-top: 300px;
margin-bottom:40px;
}
#page p.perc {
    max-width: 220px;
margin-left: 10%;
}
.forma-4 {
    right: -290px;
    bottom: 290px;
}
#mappa .marker .caption
{
padding:15px;
}

#marker3 .caption,#marker5 .caption
{
transform:translateX(50%);
}
#mappa #marker5 {
    top: 57%;
}
#mappa #marker1 {
    top: 2%;
}
}

@media only screen and (max-width: 480px)
{	
	h1,h3 {
		line-height: 27px;
	}



	#page p {
	    font-size: 13px;
	    line-height: 18px;
	}
#page p.perc
{
line-height: 27px;
}

	h3 {
	    font-size: 14px;
	}

	.forma-2 {
    	bottom: -55px;
	}


	#page p.perc span {
	    font-size: 70px;
	    line-height: 75px;
	}
.forma-4 {
    right: -400px;
    bottom: 290px;
}

	.background-section {
    	height: 300px;
	}

	#page #five .text-virtual-wrap p {
    	font-size: 16px;
    	line-height: 26px;
	}

	.slides {
    	padding-top: 30px;
	}

	.forma-6 {
    	bottom: 410px;
	}

	.evid .anim {
    	line-height: 24px;
	}

	.module-2 {
		padding-top: 50px;
	}

	.focus .sli {
    	padding: 40px 0;
	}

	#three .tabella, #three .cella, #seven .tabella, #seven .cella {
    	margin: 10px 0;
	}
#mappa #marker1 {
    left: 88%;
	top:0;
}
#mappa .marker .caption {
    font-size: 11px;
    line-height: 16px;
}
#mappa #marker6 .caption
{
transform:translateX(-30%);
}
#mappa #marker2 .caption
{
transform:translateX(30%);
}
#mappa #marker1 .caption {
    width: 115px;
}
#mappa #marker1 .caption {
    padding: 5px;
}
}