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

html,body
{
overflow:auto !important;
}

body
{
font-family: parisine-std-gris, sans-serif;
font-weight: 400;
font-style: normal;
color: #000;
background-color: #fff9e8;;
}

.relativo
{
position:relative;
z-index:1;
}

#page p {
  font-size: 18px;
  line-height: 28px;
  margin: 25px 0px;
  letter-spacing: 0.25px;
color:#333333;
}

.short-focus
{
  max-width: 700px;
  position:relative;
  z-index:2;
  width: 88%;
  margin: auto;
}

.transition,#timeline li::after,#timeline li::before
{
 transition: all 1.2s cubic-bezier(0.22, 0, 0.12, 1);
-moz-transition: all 1.2s cubic-bezier(0.22, 0, 0.12, 1);
-webkit-transition: all 1.2s cubic-bezier(0.22, 0, 0.12, 1);
}

.transition2,.flip_prev,.flip_next
{
 transition: all 0.5s cubic-bezier(0.22, 0, 0.12, 1);
-moz-transition: all 0.5s cubic-bezier(0.22, 0, 0.12, 1);
-webkit-transition: all 0.5s cubic-bezier(0.22, 0, 0.12, 1);
}

.opacita.off
{
opacity:0;
}

.scale.off
{
transform:scale(0);
}

.ruota.scale.off
{
transform:scale(0) rotate(-360deg);
}

.ruota.off
{
transform:rotate(-360deg);
}

.comparsa
{
position:relative;
top:0;
}

.comparsa.off
{
top:50px;
}

b
{
font-weight:700;
}

#page
{
overflow: hidden;
}


.button,a.button
{
margin-top: 80px;
text-align:center;
min-width:160px;
max-width:100%;
position: relative;
z-index:1;
height:60px;
font-size:18px;
line-height:60px;
cursor:pointer;
display:inline-block;
color:#000;
text-transform:uppercase;
text-align:center;
background-color: #c7e199;
border:0;
padding-left:50px;
padding-right:50px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: franklin-gothic-urw, sans-serif;
  font-style: normal;
  font-weight: 700;
}

.button:hover,a.button:hover
{
  background-color: #266093;
  color:#fff;
}

section
{
  position:relative;
  z-index:1;
}

/* custom code */

h1, #page p.title-quiz {
  font-family: parisine-std-sombre, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #649b41;
  font-size: 35px;
  text-transform: uppercase;
  text-align: left;
  line-height: 35px;
  margin: 0;
  padding-bottom: 20px;
}

#page #seven p.title-quiz {
  display: flex;
  align-items: center;
  max-width: 840px;
  margin: 0 auto;
  padding-bottom: 0;
  line-height: 40px;
  text-align: left;
}

#page #seven p.title-quiz small {
  font-size: 95px;
  margin-right: 20px;
}

h2 {
  font-family: parisine-std-sombre, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #649b41;
  font-size: 30px;
  text-align: left;
  line-height: 30px;
}

p {
  text-align: left;
}

#page #seven p {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

#page p.blue-title {
  font-family: parisine-std-sombre, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  font-size: 35px;
  text-transform: uppercase;
  text-align: left;
  line-height: 35px;
  margin: 0;
  padding-bottom: 20px;
}

#page p.blue-title span, #page h2 span {
  color: #ec6331;
}

#page #eight h2 {
  font-size: 40px;
  color: #fff;
  line-height: 45px;
  text-align: center;
}

.show-for-medium
{
text-transform: uppercase;
}

#sponsor_area {
    text-transform: uppercase;
}

.cella {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

.riga.tabella {
  margin: 0;
  width: 100%;
  table-layout: fixed;
}

.focus {
    max-width: 1200px;
    position: relative;
    z-index: 2;
}

#first .focus {
  max-width: 1100px;
}

#first .focus .col2 {
  padding-right: 15px;
  padding-left: 15px;
}

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

#page {
  margin-top: 94px;
  overflow: hidden;
}

.bannerEnd img
{
width:100%;
}

#first, #seven {
  background-image: url(../img/background.png);
  background-repeat: no-repeat;
  background-size: cover;
}

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

.indicator-down {
  font-size: 12px;
  font-family: parisine-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  text-transform: uppercase;
	line-height:15px;
	height:100px;
}

.indicator-down::after
{
display:block;
width:0;
border-left:2px dotted #000;

animation-name: scrolldown;
  animation-duration: 2s;
  animation-iteration-count: infinite;
height:0;
margin-left:auto;
margin-right:auto;
content:"";
}

@keyframes scrolldown {
  0%   {height:0}
  50%  {height:70px;}
  100% {height:0;}
}

#two, #four {
  background-color: #649b41;
}

#two p {
  color: #fff;
}

.spacing-daniele {
  padding-top: 20px;
}

#six, #eight {
  background-color: #09357a;
}

#six p {
  color: #fff;
}

.spacing {
  padding-top: 40px;
  padding-bottom: 40px;
}

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

.negative-man {
  margin-bottom: -275px;
}

.video-last {
  max-width: 952px;
  margin: 60px auto;
  border: 20px solid #ec6331;
}

.container-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: none;
}

#eight a {
  display: block;
}

#six p.triangle {
  padding-left: 35px;
}

#six p.triangle::before {
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  left: 0%;
  top: 8px;
  margin: 0;
  position: absolute;
  z-index: 2;
  content: "";
}

.blocco_img
{
display:inline-block;
}
.blocco_img,.blocco_img img
{
position:relative;
z-index:1;
}

.blocco_img .parall
{
position:absolute;
z-index:2;
margin:0;
}

.blocco_img #cuore1.parall
{
top:5%;
left:5%;
}

.blocco_img #cuore2.parall
{
top:0;
left:50%;
}

.blocco_img #cuore3.parall
{
top:10%;
left:auto;
right:0;
}

.blocco_img #nuvola1.parall
{
top:50%;
left:40%;
z-index:4;
}

.blocco_img #nuvola2.parall
{
top:50%;
left:0;
z-index:4;
}
.blocco_img #plane.parall
{
top:20%;
left:2%;
z-index:3;
}
.blocco_img #aspirapolvere.parall
{
bottom:0;
right:0;
top:auto;
left:auto;
}

.blocco_img #fustino.parall
{
right:0;
top:4%;
left:auto;
}

.blocco_img #dado.parall
{
top:3%;
left:3%;
}

.blocco_img #woman.parall
{
top:0;
left:0;
}

.blocco_img #numeri.parall
{
top:0;
left:0;
z-index:0;
}

.blocco_img #nuvola3.parall
{
top:100%;
left:0;
}

.blocco_img #nuvola4.parall
{
top:10%;
left:auto;
right:0;
z-index:0;
}

#page .area_drop p
{
font-weight:700;
font-style:italic;
font-size:65px;
line-height:68px;
color:#333;
opacity:0.2;
text-transform:uppercase;
text-align:center;
font-family:parisine-std-sombre, sans-serif;
}

#page .area_drop.wrong p
{
color:#cb5858;
opacity:0.3;
}
#page .area_drop.correct p
{
color:#649b41;
opacity:1;
}
#page .card img.left
{
opacity:0;
}

#page .card img.right
{
opacity:0;
}

#page .area_drop .caption::before
{
content:"";
width:220px;
height:220px;
border:2px dotted #000;
display:block;
margin-left:auto;
margin-right:auto;
border-radius:50%;
background-position:center center;
background-repeat:no-repeat;
}


#page .area_drop .caption
{
width:100%;
position:relative;
z-index:2;
}

#page .area_drop.left .caption::before
{
background-image:url("../img/false.png");
}
#page .area_drop.right .caption::before
{
background-image:url("../img/true.png");
}
#page .area_drop.left.wrong .caption::before
{
background-image:url("../img/false_wrong.png");
}
#page .area_drop.left.correct .caption::before
{
background-image:url("../img/false_correct.png");
}
#page .area_drop.right.wrong .caption::before
{
background-image:url("../img/true_wrong.png");
}
#page .area_drop.right.correct .caption::before
{
background-image:url("../img/true_correct.png");
}
#page .area_drop .caption::after
{
content:"";
z-index:3;
position:absolute;
height:0;
display:block;
border-top:2px dotted #000;
width:120%;
top:110px;

}
#page .area_drop.left .caption::after
{
left:50%;
}
#page .area_drop.right .caption::after
{
left:auto;
right:50%;
}

.container_cards
{
position:relative;
z-index:1;
height:600px;
margin-top: -70px;
}
.container_cards .area_drop
{
position:absolute;
z-index:2;

width:224px;
top: 50%;
transform: translateY(-50%);
}

.container_cards .card
{
position:absolute;
top:78px;
left:50%;
transform:translateX(-50%);
z-index:0;
opacity:0;
width:100%;
max-width:530px;
}

.container_cards #card3
{
max-width:640px;
}
.container_cards .card.on
{
z-index:5;
opacity:1;
}
.container_cards .card h3
{
text-transform:uppercase;
font-size:18px;
line-height:22px;
color:#649b41;
font-style:italic;
font-family:parisine-std-sombre, sans-serif;
margin-top:40px;
}
#page #seven .container_cards .card p
{
font-size:15px;
line-height:22px;
color:#333;
}
.container_cards .area_drop.left
{
left:0;
}

.container_cards .area_drop.right
{
right:0;
left:auto;
}

#seven .nav
{
position:absolute;
z-index:2;
margin:0;
left:auto;
right:3%;
top:50%;
transform:translateY(-50%);
}
#seven .nav .point
{
color:#333333;
font-size:12px;
line-height:30px;
width:34px;
font-weight:700;
text-align:center;
margin-top:15px;
margin-bottom:15px;
border-radius:50%;
border:2px dotted transparent;
}

#seven .nav .point.on
{
border:2px dotted #649b41;
color:#649b41;
}

#response_card .punteggio
{
font-size:122px;
line-height:122px;
color:#649b41;
font-weight:700;
font-style:italic;
font-family: parisine-std-sombre, sans-serif;
margin-top:70px;
}
#response_card
{
margin-bottom:-50px;
}
#response_card h2
{
text-transform:uppercase;
margin-top:83px;
font-size:35px;
line-height:38px;
text-align:center;
}
#page #seven #response_card p
{
color:#333333;
margin-top:83px;
}
#response_card #restart
{
font-weight:700;
text-decoration:underline;
color:#333333;
text-transform:uppercase;
font-size:18px;
line-height:28px;
cursor:pointer;
}

#four .testo
{
width:50%;
text-align:left;
position:absolute;
z-index:3;
top:100px;
transform:translateX(-50%);
left:0;
margin:0;
opacity:0;
}

#four .testo img
{
display:none;
}

#four .testo.on
{
opacity:1;
transform:translateX(0);
}

#four .focus.fixed
{
position:absolute;
top:0;
left:50%;
width:100%;
max-width:100%;
margin:0;
z-index:7;
transform:translateX(-50%);
}

#four.on .focus.fixed
{
position:fixed;
top:94px;
}

#four .testo .anno
{
font-size:107px;
color:#426d26;
line-height:90px;
font-style:italic;
font-weight:700;
font-family: parisine-std-sombre, sans-serif;
}
#four .testo h2
{
color:#f1e7c7;
text-transform:uppercase;
}

#four .testo p
{
color:#fff;
font-size:16px;
line-height:26px;
}

#four .scheda
{
position:relative;
z-index:6;
}

#four .scheda .img
{
position:absolute;
width:50%;
left:50%;
top:50%;
transform:translateY(-75%);
z-index:2;
margin:0;
}

#four.passed .focus.fixed
{
top:auto;
bottom:0;
}

#timeline
{
transform:translateY(calc(-50% + 94px));
position:absolute;
left:auto;
right:0;
top:50%;
margin:0;
z-index:8;
opacity:0;
}


#four.on #timeline
{
transform:translateY(-50%);
opacity:1;
}
#timeline li
{
text-align:right;
font-size:12px;
line-height:20px;
margin-top:15px;
margin-bottom:15px;
color:#426d26;
font-weight:700;
position:relative;
z-index:1;
cursor:pointer;
}

#timeline li.on
{
color:#fff;
}

#timeline li::before
{
content:"";
width:11px;
height:11px;
border-radius:50%;
background-color:#fff;
position:absolute;
z-index:2;
right:50px;
margin:0;
left:auto;
top:4px;
opacity:0;
}

#timeline li.on::before
{
opacity:1;
}

#timeline li::after
{
content:"";
width:30px;
height:0;
border-top:2px dotted #426d26;
display:inline-block;
position:relative;
z-index:1;
top:-3px;
margin-left:10px;
}
#timeline li.on::after
{
margin-left:25px;
}
#timeline li.on::after
{
width:50px;
border-top:2px dotted #fff;
}

#first .blocco_img
{
top:-20px;
}

#footer
{
padding-top:1px;
}