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

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

#first > img {
	right: -250px;
}

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

#area_quiz .domanda p {
	font-size: 40px;
	padding-right: 50px;
	line-height: 55px;
}

#area_quiz .domanda span {
	font-size: 45px;
	line-height: 50px;
}

#area_quiz .risposte p {
	font-size: 18px;
}
#area_quiz .domanda p
{
padding-left:38px;
}

.foto-5
{
left:-130px;
}
#ten
{
padding-bottom:50px;
}
#area_quiz
{
background-position:-50px 50%;
}
#area_quiz.end {
    background-position: -100px 50%;
}
#area_quiz::before {
left:40px;
width:calc(100% - 80px);
}
}

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

#first > img {
    right: -300px;
}

h1 {
	font-size: 45px;
	line-height: 55px;
}

h2 {
	font-size: 32px;
	margin-bottom: 20px;
	line-height: 45px;
}

#first {
	height: 500px;
}

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

#page p.italico {
	line-height: 28px;
	font-size: 21px;
}


.liena-transp {
	margin: 60px 0;
}

#page p {
    font-size: 15px;
    line-height: 25px;
    margin: 15px 0;
}

.palazzo-1, .palazzo-2, .foto-4, .foto-5 {
	opacity: 0.2 !important;
}

#page p.cit {
	font-size: 35px;
	line-height: 50px;
}

#page p.cit::before, #page p.cit::after {
	font-size: 65px;
	line-height: 29px;
}

#page p.cit::before {
	left: -28px;
	top: 0px;
}

#page p.cit::after {
    top: 50px;
    left: -10px;
}

#page p.cap {
    font-size: 20px;
    margin: 20px 0;
}

.quadro, .content-cit {
	height: 457px;
}

#page p.cit {
	max-width: 546px;
}

.module-marg {
    margin-top: 126px;
    margin-bottom: 62px;
}

#page p.city-title span {
    font-size: 32px;
}

#page p.city-title {
	font-size: 40px;
	line-height: 40px;
}

#seven {
    height: 450px;
}

#page p.white-title {
	font-size: 21px;
}

#eight .city-title {
	margin-bottom: 100px;
}

#eight .city-title b {
	width: auto;
}

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

#area_quiz .domanda p {
    font-size: 30px;
    line-height: 45px;
}

#area_quiz .risposte p {
	font-size: 16px;
	line-height: 20px;
}

#area_quiz .domanda span {
    font-size: 35px;
    line-height: 40px;
}
.focus
{
width:80%;
}
#area_quiz .risposte p
{
margin-left:20px;
}
#area_quiz .domanda p
{
padding-left:33px;
}
#area_quiz::before
{
width:calc(100% - 40px);
}
#area_quiz .esito p
{
width:80%;
}
#area_quiz .esito p
{
font-size:16px;
line-height:25px;
}
#area_quiz .esito h2
{
margin-bottom:15px;
}
}

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

	#eleven .tabella, #eleven .cella {
		display: block;
		padding: 0;
	}

	#three .tabella, #three .cella, #four .tabella, #four .cella, #nine .tabella, #nine .cella, #ten .tabella, #ten .cella {
		margin: 0;
	}

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

	#page p.italico {
    	line-height: 25px;
    	font-size: 18px;
	}

	#page p {
    	font-size: 14px;
    	line-height: 24px;
	}
	
	h2 {
	    font-size: 26px;
	    line-height: 40px;
	}

	#page p.cit {
	    font-size: 25px;
	    line-height: 40px;
	}

	.quadro, .content-cit {
    	height: 242px;
	}

	#page p.cit::before, #page p.cit::after {
	    font-size: 45px;
	    line-height: 9px;
	}

	.quadro .mask {
		margin: 25px;
		width: calc(100% - 50px);
    	height: calc(100% - 50px);
	}

	#page p.cap {
    	font-size: 17px;
   	}

   	#page p.white-title {
    	font-size: 19px;
	}

	#page p.city-title {
    	font-size: 30px;
    	line-height: 30px;
	}

	#page p.city-title span {
    	font-size: 25px;
	}

	#page p.white-title {
		margin-bottom: 35px;
	}

	#seven {
    	height: 350px;
	}

	.nuvoles {
		width: 12%;
	}

	#eight .city-title {
    	margin-bottom: 60px;
	}

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

	#first {
    	height: 400px;
	}

#first > img
{
right:-170px;
}

	#area_quiz .domanda p {
    	font-size: 26px;
    	line-height: 40px;
    	padding-left: 28px;
    	padding-right: 0;
    
	}

	#area_quiz .domanda span {
    	font-size: 30px;
    	line-height: 34px;
	}

	#eleven .risposta .tabella {
		display: flex;
		align-items: center;
	}

	#area_quiz .risposte .tabella span {
		width: 40px;
		height: 40px;
	}

	#area_quiz .risposte .risposta {
		margin-top: 0;
		margin-bottom: 0;
	}
#area_quiz
{
background-position:-75px 50%;
}
#area_quiz .risposte .risposta
{
max-width:100%;
padding-left:95px;
}
#area_quiz .risposte .tabella.error span::before, #area_quiz .risposte .tabella.ok span::before
	{
		top:6px;
		left:6px;
		width:calc(100% - 12px);
		height:calc(100% - 12px);
	}
}

@media only screen and (max-width: 699px)
{
.focus
{
width:88%;
}
#page
{
margin-top: 63px;
}
#page p.city-title span
{
font-size:22px;
}
#page p.city-title
{
font-size:28px;
}
#area_quiz .risposte .risposta
{
padding-left:45px;
}
#first > img
{
right:-250px;
}
#first .focus_back
{
padding:20px;
}
#first .focus_back::before
{
top:50px;
left:50px;
width:calc(100% - 100px);
height:calc(100% - 100px);
}
#five.module-marg
{
margin-top:90px;
}
}

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

.content-cit
{
height:auto;
margin-top:30px;
}
#first > img
{
right:-160px;
}
	#first {
    	height: 230px;
	}

	#page p.italico {
		line-height: 22px;
font-size:16px;
	}



	h1 {
   	 	font-size: 25px;
    	line-height: 34px;
	}

	h2 {
    	font-size: 21px;
    	line-height: 30px;
	}

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

	.liena-transp {
    	margin: 45px 0;
	}

	.palazzo-1 {
		bottom: 0;
	}

	#page p.cit {
    	font-size: 19px;
    	line-height: 32px;
	}

	#page p.cit::before {
    	left: -20px;
    }

    #page p.cit::after {
    	top: 35px;
    	left: -5px;
	}

	.quadro {
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:88%;
	}

	#seven {
    	height: 300px;
	}

	#page p.white-title {
    	font-size: 17px;
	}

	#page p.city-title {
    	font-size: 21px;
    	line-height: 24px;
	}

	#page p.city-title span {
    	font-size: 17px;
	}

	#eight .city-title {
	    margin-bottom: 40px;
	}
	#area_quiz
	{
		margin-top:25px;
		margin-bottom:25px;
	}
	#eleven .navigation
	{
		margin-top:25px;
	}
	#area_quiz .risposte p {
    	font-size: 14px;
    	line-height: 18px;
	}

	#area_quiz .risposte .tabella span {
		width: 30px;
		height: 30px;
	}

	#area_quiz .risposte p {
		margin-left: 25px;
	}

	#area_quiz .domanda p {
		margin-left: 0;
		font-size: 22px;
    	line-height: 32px;
	}
	
	#area_quiz .domanda span {
   	 	font-size: 22px;
    	line-height: 32px;
	}
	#area_quiz .esito p
	{
		font-size:14px;
		line-height:24px;
		width:60%;
	}
	#area_quiz .risposte .tabella.error span::before, #area_quiz .risposte .tabella.ok span::before
	{
		top:4px;
		left:4px;
		width:calc(100% - 8px);
		height:calc(100% - 8px);
	}
}