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

@media only screen and (max-height: 660px)
{
#container_scroll
{
height:100%;
overflow:auto;
}
#popup
{
height:90%;
}
}
@media only screen and (max-width: 1400px)
{
.fascia.fascia4
{
margin-top: 375px;
}

#introquiz p {
  font-size: 60px;
  line-height: 67px;
}
.fascia.fascia1 {
  margin-top: 115px;
}
#page .fascia.fascia2 .percentuale p
{
margin-right:0;
letter-spacing: -1px;
}
.fascia.fascia2
{
max-width:60%;
}
}
@media only screen and (max-width: 1363px)
{
#three .slide .img
{
transform:translateX(-6vw);
}
}
@media only screen and (max-width: 1200px)
{
#two img.sinistra, #four img.sinistra {
  max-width: 100%;
  margin-left: 0;
}
#two img.destra {
  max-width: 100%;
}
.fascia.fascia2 {
  margin-left: auto;
margin-top: 90px;
}
#two .riga.finale img.sinistra {
  margin-left: 0;
}
#three .slide .img
{
max-width: calc(88% - 200px);
}
#three .slide img
{
top: 50%;
transform: translateY(-50%);
}
#five .slides .slide p {
  font-size: 22px;
  line-height: 28px;
}
#three #popup h2 {
  font-size: 36px;
  line-height: 39px;
}
#three .slides::after
{
transform:scale(0.7);
transform-origin:bottom left;
}
}

@media only screen and (max-width: 1023px)
{
#container_scroll
{
height:100%;
overflow:auto;
}
#popup
{
height:90%;
}
#first::after, #five::after, #five::before {
height:110px;
background-size:auto 110px;
}
.fascia {
  max-width: 75%;
}
#page .fascia p {
  font-size: 40px;
  line-height: 40px;
}
.fascia img,.fascia .percentuale
{
transform:scale(0.8);
}
.fascia.fascia2 .percentuale {
  right: 280px;
}
.fascia.fascia1 img {
  bottom: 67%;
}
.fascia.fascia2 img {
  bottom: 80%;
}
#page .fascia.fascia3 > p {
  font-size: 38px;
}
.fascia.fascia3 img.img1 {
  bottom: -140px;
  right: 0;
left: auto;
}
.fascia.fascia3 img.destra {
  transform: rotate(2deg) translateX(-50%);
  top: 25px;
}
.fascia.fascia3
{
margin-bottom:140px;
padding-left: calc(3% + 85px);
}
#two .riga.finale img.sinistra {
  margin-top: 0;
margin-left:auto;
}
#two img.sinistra, #four img.sinistra {
  margin-left: auto;
}
#two .riga.finale {
  margin-top: 40px;
}
#two .riga.finale img
{
margin-bottom:25px;
}
#three .caption {
  position: relative;
  top: 0;
  width: 100%;
  padding-top: 50px;
  text-align: center;
}
#three h2 {
  font-size: 35px;
  line-height: 40px;
}
.focus {
  width: 80%;
}
#three .slide
{
text-align:center;
display:block;
}

.fascia.fascia3 .percentuale {
  left: -5%;
  top: -100px;
}
#three .slide .img {
  max-width: 80%;
}
#three .slide .img,#three.fixed .slide .img {
  height: auto;
top: 50%;
right:auto;
transform: translateY(calc(-50% + 70px));
}
#three .slide img {
  transform: none;
top:auto;
right:auto;
}
#popup .content .tabella,#popup .content .tabella .cella,#five .slide .tabella,#five .slide .tabella .cella
{
display:block;
}
#popup .content .tabella .cella img
{
width:300px;
}
#three #popup h2 {
  margin-top: 25px;
}
#introquiz p {
  font-size: 50px;
  line-height: 60px;
}
#five.on #introquiz p
{
margin-top:-15px;
}
#five .slides .slide .nav,#five .slides .slide .domanda
{
text-align:center;
}
#five .slides .slide .domanda
{
margin-bottom:250px;
margin-top:10px;
}
#five .slide .tabella .cella .img
{
position:absolute;
top:60px;
left:50%;
transform:translateX(-50%);
}
#five.on
{
height:auto !important;
}
#five .slides
{
position:relative;
top: 300px;
height:auto;
margin-bottom: 120px;
margin-top: 300px;
top:0;
}
#five .slides .slide .img img {
  width: auto;
  height: 280px;
}
#six a {
  font-size: 30px;
  line-height: 36px;
}
#six video
{
margin-top:40px;
}
#five .slide.slide6 .tabella .cella .img
{
position:relative;
}
#five .slides.portasu {
  margin-top: 150px;
}
#five.on #introquiz.ended {
  top: 60px;
}
#five .slide .tabella .cella.profilo
{
text-align:center;
}
#five .slides .slide p.titolo
{
margin-top:100px;
}
#popup .content .cella
{
padding-left:0;
padding-right:0;
}
video.desktop2
{
display:block !important;
}
video.mobile2
{
display:none !important;
}
}

@media only screen and (max-width: 699px)
{
video.desktop2
{
display:none !important;
}
video.mobile2
{
display:block !important;
}
.focus {
  width: 88%;
}
#three .slide .img {
  max-width: 88%;
}
.to_fix.fixed
{
top:63px;
}
#page
{
margin-top: 63px;
}
#page p,#five .slides .slide p {
  font-size: 16px;
  line-height: 23px;
}
#introquiz p,#five.on #introquiz p {
  font-size: 39px;
  line-height: 45px;
}
.fascia.fascia1 {
  margin-right: 0;
}
.fascia img, .fascia .percentuale {
  transform: scale(0.5);
}
#page .fascia p,#page .fascia.fascia3 > p {
  font-size: 26px;
  line-height: 30px;
}
.fascia.fascia1 .percentuale {
  left: -110px;
}
.fascia.fascia1 {
  
  padding-left: 110px;
}
.fascia.fascia1
{
height:120px;
}
#page .fascia.fascia1 p,#page .fascia.fascia2 p,#page .fascia.fascia3 > p
{
margin-bottom:0;
}

#page .fascia .percentuale p
{
margin-bottom:25px;
}
#page .fascia p span
{
font-size:13px;
}
.fascia.fascia1 img {
  bottom: 30%;
}
.fascia.fascia2 {
  margin-left: -25px;
  margin-top: 80px;
max-width:85%;
height:135px;
padding-right:25px;
}
.fascia.fascia2 .percentuale {
  right: 120px;
}
.fascia.fascia2 img
{
right:200px;
bottom: 45%;
}
h2,#three #popup h2,#five .slides .slide p.titolo
{
font-size:31px;
line-height:34px;
}
.fascia.fascia3
{
height:170px;
}
#page .fascia3 p span {
  margin-top: 0;
}
.fascia.fascia3 .percentuale
{
top:-85px;
}
.fascia.fascia3 img.img1 {
  bottom: -150px;
  right: -40px;
}

.fascia.fascia4 img.destra
{
width:150px;
margin-top:270px;
}
.fascia.fascia4
{
height:90px;
max-width:75%;
margin-top:240px;
}
#five .slides .slide .risposta::after
{
width:60px;
height:60px;
line-height:56px;
font-size:35px;
}
#two img.destra {
  margin-top: 50px;
}
.fascia.fascia3 img.destra {
  top: 60px;
}
#popup
{
width:88%;
padding:20px;
}
#close_popup
{
width: 30px;
height: 30px;
background-size: 15px auto;
transform: translate(-50%,-50%);
}
#popup .content .tabella .cella img {
  width: 250px;
}
#three #popup p
{
margin-top:10px;
}
#three #popup h2 {
  margin-top: 20px;
}
#six a {
  font-size: 22px;
  line-height: 26px;
}
#six video {
  margin-top: 30px;
}
#first::after, #five::after, #five::before {
background-size: auto 100px;
height:100px;
}
#first::after
{
bottom:0;
}
#two
{
padding-top:0;
}
#five .slides .slide .img img
{
max-width: 250px;
height:250px;
}
#five .slides .slide .domanda {
  margin-bottom: 240px;
}
}
@media only screen and (max-width: 480px)
{	
.fascia {
  max-width: 80%;
}
.fascia img, .fascia .percentuale {
  transform: scale(0.4);
}
.fascia.fascia1 {
  padding-left: 85px;
padding-right: 15px;
height: 90px;
margin-top: 70px;
}
#page .fascia p, #page .fascia.fascia3 > p {
  font-size: 21px;
  line-height: 26px;
}
#page .fascia p span {
  font-size: 12px;
  line-height: 25px;
}
.fascia.fascia1 .percentuale {
  top: -60px;
}
.fascia.fascia1 img
{
bottom:0;
}
.fascia.fascia2
{
padding-right:15px;
height: 110px;
margin-top: 60px;
}
.fascia.fascia2 img {
  right: 130px;
  bottom: 35%;
}
.fascia.fascia2 .percentuale {
  right: 50px;
top: -65px;
}
.fascia.fascia3
{
padding-left:20%;
height: 150px;
margin-top:70px;
}
.fascia.fascia3 .percentuale {
  left: -17%;
top:-80px;
}
#three h2 {
  font-size: 24px;
  line-height: 30px;
}
#three .slide .img .plus
{
width:25px;
height:25px;
}
#three .slide .img .plus::after
{
font-size: 12px;
line-height: 14px;
}
h2, #three #popup h2, #five .slides .slide p.titolo {
  font-size: 26px;
  line-height: 30px;
}
/*#page p, #five .slides .slide p {
  font-size: 14px;
  line-height: 20px;
}*/
#three .slides::after {
  transform: scale(0.5);
}
#introquiz p, #five.on #introquiz p {
  font-size: 30px;
  line-height: 40px;
}
#five .slides .slide .risposta::after {
  width: 50px;
  height: 50px;
  line-height: 46px;
  font-size: 30px;
}
#five .slides .slide .risposta
{
padding-right:80px;
font-size: 15px;
line-height: 18px;
height:90px;
}
#five .slides .slide .domanda
{
font-size:16px;
line_height:20px;
}
}