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

@media only screen and (max-width: 1400px)
{	
	#seven .focus
	{
		width:80%;
	}
}	

@media only screen and (max-width: 1200px)
{	
#four .focus.module
{
width:80%;
}

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



	#page p.main-top {
	    font-size: 18px;
		line-height: 26px;
	}

	.arrow-wrap {
		width: 20px;
	}

	.virgolette {
		width: 30px;
    	height: 26px;
	}

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

	.virgolette.open {
    	left: 12px;
    }

    .virgolette.close-1 {
	    left: 270px;
	    bottom: 7px;
	}

	h2.small {
    	font-size: 35px;
    	line-height: 35px;
	} 

	.focus-2 {
    	max-width: 690px;
    }

    .dna-icon p span {
    	font-size: 22px;
    }

    #page .dna-text p {
    	font-size: 18px;
    }

    h4 {
    	font-size: 16px;
    	line-height: 18px;
    }

    .virgolette.close-2 {
    	left: 195px;
    	bottom: 8px;
    }

    #page p.main-top {
    	margin-bottom: 35px;
    }

    .module-2 {
	    padding-bottom: 70px;
	}
	.virgolette.close-3 {
	    left: 225px;
	    bottom: 8px;
	}

	.donna {
		padding: 0;
	}

	h3 {
		font-size: 24px;
		line-height: 28px;
	}

	.slick-dots {
    	left: -298px;
    	bottom: 42px;
	}

	.focus-3 {
    	max-width: 743px;

    }

    .slick-dots li {
    	width: 12px;
    	height: 12px;
   		margin: 0px 6px;
	}

	.slides {
    	padding-top: 30px;
	}

	#gallery {
    	padding-top: 60px;
    	padding-bottom: 60px;
	}
}

@media only screen and (max-width: 1023px) and (orientation: portrait)
{
#four .testo img
{
display:block;
margin-left:0;
max-width:250px;
max-height:200px;
}
#four .focus.module
{
opacity:0;
}
#four .testo
{
top:50%;
transform:translate(-50%,-50%);
}
#four.passed .focus.fixed
{
transform:translate(-50%,50%) translateY(-50vh) translateY(47px);
}

#four .testo.on
{
transform:translate(0,-50%);
}

}
@media only screen and (max-width: 1023px)
{
#four .testo
{
width:80%;
}

#response_card
{
margin-bottom:0;
}	
	.virgolette.close-2,.virgolette.close-1,.virgolette.close-3 {
display:none;
}
.max-text h2::after
{
content:"";
background-image: url(../img/close-virgo.jpg);
width: 30px;
height: 26px;
display:inline-block;
background-size: 100% auto;
background-repeat: no-repeat;
margin-left: 10px;
}

#first .arrow-wrap img
{
top: 37px;
position: relative;
}
.max-text h2 br
{
display:none;
}
	.text-intro-wrap {
		margin-top: 60px;
	}

	.arrow-wrap {
		margin: 0 auto;
	}

	#first .col2-3, #four .col2, #eight .col2:nth-child(2), .wolf img, .slick-slide img {
		width: 70%;
	}

	.riga.tabella {
		display: flex;
    	flex-direction: column;
		align-items: center;
	}

	.focus-2 {
	    max-width: calc(88% - 1rem);
	}

	#page p.main-top {
	    margin-bottom: 0;
	    margin-top: 20px;
	}

	.smn-2 {
	    right: 27%;
	}

	.smn-1 {
	    top: 34%;
	    left: 34%;
	}

	.smn-1-m {
		top: 32%;
    	left: 34%;
	}

	.smn-2-m {
    	top: 21%;
   		right: 34%;
	}

	#four .text-intro-wrap {
		margin-top: 180px;
	}

	.button, a.button {
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.wolf h4 {
		text-align: center;
	}

	

	#page .dna-text p, .dna-icon-wrap {
		margin-top: 30px;
	}

	#gallery {
		margin-top: 100px;
	}

	h3 {
		text-align: center;
	}

	.slick-dots {
		position: static; 
		margin-top: 20px;
	}

#four .focus.fixed .focus
{
height:100%;
}
#four .scheda .img
{
left:0;
width:80%;
opacity: 0.5;
}
.container_cards .area_drop
{
width:124px;
}
#page #seven p.title-quiz {
font-size: 27px;
line-height: 30px;
}
#page #seven p.title-quiz small {
    font-size: 72px;
}
.card img
{
width:180px;
}
.container_cards .card h3
{
margin-top:30px;
}
#response_card .punteggio
{
margin-top:0;
margin-bottom:30px;
}
#response_card h2
{
margin-top:40px;
}
#page #seven #response_card p
{
margin-top:40px;
}
#page #eight h2 {
    font-size: 37px;
}
.container_cards
{
margin-top:-150px;
}
#page .area_drop .caption::after {
top:60px;
}
.container_cards .card
{
top:170px;
}
#page .area_drop p
{
font-size: 31px;
line-height: 36px;
}
#page .area_drop .caption::before {
width:120px;
height:120px;
background-size:60% auto;
}
}

@media only screen and (max-width: 767px) 
{	
	h1 {
	    font-size: 26px;
	    line-height: 26px;
	}

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

	.arrow-wrap {
	    margin: 30px auto;
	}

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

	.virgolette,.max-text h2::after {
	    width: 24px;
	    height: 21px;
	}
.max-text h2::after
	{
margin-left: 5px;
	}

	.virgolette.open {
	    left: 20px;
	    top: 5px;
	}

	.virgolette.close-1 {
	    left: 215px;
	    bottom: 5px;
	}

	h2.small {
	    font-size: 25px;
	    line-height: 25px;
	}



	.smn-2 {
	    right: 12%;
	}

	.smn-1 {
	    top: 32%;
	    left: 24%;
	}

	.smn-1-m {
	    top: 32%;
	    left: 20%;
	}

	.smn-2-m {
	    top: 20%;
	    right: 22%;
	}

	.virgolette.close-3 {
	    left: 180px;
	    bottom: 4px;
	}

	.virgolette.close-2 {
	    left: 105px;
	    bottom: 4px;
	}

	.button, a.button {
		font-size: 16px;
		padding-left: 30px;
		padding-right: 30px;
		height: 50px;
		line-height: 50px;
	}

	#four .max-text {
		padding: 0;
	}

	#four .virgolette.open {
		left: -30px;
	}

	h3 {
	    font-size: 18px;
	    line-height: 22px;
	}

	.slick-dots {
		margin-top: 20px;
	}

	.slides {
	    padding-top: 15px;
	}
#page #eight h2 {
    font-size: 34px;
}
.module-home
{
padding-top:60px;
}
}

@media only screen and (max-width: 699px) and (orientation: portrait)
{
#four.passed .focus.fixed
{
transform:translate(-50%,50%) translateY(-50vh) translateY(31px);
}
}
@media only screen and (max-width: 699px)
{
#page {
	margin-top:63px;
}


#four.on .focus.fixed
{
top:63px;
}
#four .testo p {
    font-size: 13px;
    line-height: 17px;
}
#four .testo .anno {
    font-size: 60px;
	line-height:50px;
}
#page #seven p.title-quiz,#page #seven p.title-quiz small
{
display:block;
text-align:center;
}
#page #seven p.title-quiz small
{
margin-tight:0;
line-height:75px;
}
.container_cards .area_drop
{
width:84px;
}
.container_cards .card {
    top: 185px;
}
#page .area_drop .caption::before {
width:80px;
height:80px;
}
#page .area_drop .caption::after {
top:41px;
}	
#page .area_drop p {
    font-size: 23px;
    line-height: 27px;
	margin-top:5px;
}
}

@media only screen and (max-width: 480px)
{
#page .area_drop .caption::before {
    width: 60px;
    height: 60px;
}
#page .area_drop .caption::after {
width:100%;
}
#page .area_drop .caption::after {
    top: 31px;
}
.container_cards {
    margin-top: -175px;
}
#seven .nav
{
right:50%;
transform:translateX(50%);
top:auto;
bottom:30px;
width:88%;
}
#seven .nav .points
{
text-align:center;
}
#seven .nav .point
{
display:inline-block;
margin-top:0;
margin-bottom:0;
margin-left:5px;
margin-right:5px;
}
#seven
{
padding-bottom:80px;
}
#timeline li::after {
width:15px;
}
#timeline li::before {
right:30px;
}
#timeline li::after {
    margin-left: 5px;
}
.card img {
    width: 150px;
}
#seven .focus
{
width:88%;
}
#timeline li.on::after {
width:30px;
margin-left: 15px;
}
#first .arrow-wrap img {
    top: 10px;
}
.max-text {
    padding: 0 25px;
}

.virgolette.open {
    left: 0px;
}
	h2.small {
	    font-size: 20px;
	    line-height: 22px;
	    text-align: center;
	}

	#eight h2.small,#five h2.small {
	    text-align: left;
	}

	h4 {
	    font-size: 14px;
	    line-height: 18px;
	}

	#page p {
	    font-size: 14px;
	    line-height: 20px;
	}

	h2 {
	    font-size: 20px;
	    line-height: 22px;
	}

	#four h2,#four .testo p
	{
		margin-top:10px;
		margin-bottom:10px;
	}

	#four .testo .anno {
    font-size: 50px;
    line-height: 40px;
}




	.virgolette,.max-text h2::after {
	    width: 18px;
	    height: 22px;
	}
	.max-text h2::after
	{
		position:relative;
		top: 8px;
	}


	.virgolette.close-3 {
    	left: 140px;
    	bottom: -4px;
	}

	.module {
	    padding-top: 10px;
	    padding-bottom: 10px;
	}
	.text-description {
		max-width: 166px;
	}

	.virgolette.close-1 {
	    left: 160px;
	    bottom: -4px;
	}

	.virgolette.close-2 {
    	left: 72px;
    	bottom: -4px;
	}

	#four .virgolette.open {
	    left: -25px;
	}

	.green-separator {
		height: 10px;
	}

	.smn-2 {
	    right: -1%;
	}

	.smn-1 {
	    top: 32%;
	    left: 14%;
	}

	.smn-2-m {
	    top: 21%;
	    right: 13%;
	}

	.smn-1-m {
	    top: 32%;
	    left: 10%;
	}

	#first .col2-3, #four .col2, #eight .col2:nth-child(2), .wolf img, .slick-slide img {
	    width: 90%;
	}

	.slick-prev:before, .slick-next:before {
		display: none;
	}
#timeline li
{
letter-spacing:-1px;
}
}

@media only screen and (max-width: 900px) and (orientation: landscape)
{
#four .testo
{
top:10px;
left: 20px;
}

#four .scheda img
{
opacity:0.5;
}
#timeline li
{
margin-top:10px;
margin-bottom:10px;
}
#four .testo .anno {
    font-size: 50px;
    line-height: 52px;
}
#four .testo h2
{
font-size:24px;
line-height:26px;
margin-top:10px;
margin-bottom:10px;
}
#four .testo p
{
margin-top:10px;
margin-bottom:10px;
font-size:13px;
line-height:20px;
}
}