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

*
{
box-sizing:border-box;
line-height:1.2;
}
html
{
font-size:16px;
}
html,body
{
overflow:auto !important;
}

body
{
font-family: "klavika-web", sans-serif;
color:#000;
font-weight:400;
background-color:#fff;
}
img
{
-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}
.relativo
{
position:relative;
z-index:1;
}

#page p, #page li {
    font-size: 1.875rem;
    margin: 25px 0px;
line-height:1.5;
}

.transition,#quiz .risposta::before,#quiz .risposta::after
{
 transition: opacity 1.2s cubic-bezier(0.22, 0, 0.12, 1),top 1.2s cubic-bezier(0.22, 0, 0.12, 1),transform 1.2s cubic-bezier(0.22, 0, 0.12, 1);
-moz-transition: opacity 1.2s cubic-bezier(0.22, 0, 0.12, 1),top 1.2s cubic-bezier(0.22, 0, 0.12, 1),transform 1.2s cubic-bezier(0.22, 0, 0.12, 1);
-webkit-transition: opacity 1.2s cubic-bezier(0.22, 0, 0.12, 1),top 1.2s cubic-bezier(0.22, 0, 0.12, 1),transform 1.2s cubic-bezier(0.22, 0, 0.12, 1);
}

.transition2,a.button::before
{
 transition: opacity 0.5s cubic-bezier(0.22, 0, 0.12, 1),top 0.5s cubic-bezier(0.22, 0, 0.12, 1),transform 0.5s cubic-bezier(0.22, 0, 0.12, 1);
-moz-transition: opacity 0.5s cubic-bezier(0.22, 0, 0.12, 1),top 0.5s cubic-bezier(0.22, 0, 0.12, 1),transform 0.5s cubic-bezier(0.22, 0, 0.12, 1);
-webkit-transition: opacity 0.5s cubic-bezier(0.22, 0, 0.12, 1),top 0.5s cubic-bezier(0.22, 0, 0.12, 1),transform 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;
}

.comparsaleft.off
{
transform:translateX(-100%);
}
.comparsaright.off
{
transform:translateX(100%);
}

b
{
font-weight:700;
}

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


.button,a.button
{
text-align:center;
min-width:160px;
max-width:100%;
position: relative;
z-index:1;
font-size:1.5rem;
font-weight:700;
line-height:40px;
cursor:pointer;
border-radius:20px;
color:#fff;
text-transform:uppercase;
text-align:center;
background-color:#fb6951;
border:0;
padding-left:30px;
padding-right:30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
a.button::before
{
margin-right:0;
background-color:#fff;
height:2px;
display:inline-block;
position:relative;
top:-6px;
content:"";
width:0;
}
a.button:hover::before
{
width:30px;
margin-right:10px;
}
.bannerEnd img
{
width:100%;
}

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

/* custom code */

section.full_height
{
min-height:500px;
}
.focus
{
max-width:1200px;
position:relative;
z-index:2;
}
h1
{
width:100%;
text-transform:uppercase;
font-size:3.25rem;
font-weight:300;
max-width:910px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:2;
}
h1 b
{
font-weight:600;
}

h2
{
font-weight:700;
text-transform:uppercase;
font-size:3.25rem;
}

.citazione
{
font-size:3.625rem;
font-family: "aria-text-g2", sans-serif;
font-weight: 700;
font-style: italic;
margin-left:auto;
margin-right:auto;
}

.citazione > div
{
line-height:1.3;
}

.citazione span
{
display:inline-block;
}

.citazione_original
{
display:none;
}

.precit
{
text-transform:uppercase;
font-weight:300;
font-size:1.875rem;
margin-bottom:40px;
}

.forma,.illustrazione,.waves
{
position:absolute;
z-index:0;
}

.waves
{
width:100%;
top:0;
left:0;
}


#visore .wrap_forma
{
position:absolute;
z-index:1;
top:50%;
left:50%;
height:80%;
transform:translate(-50%,-50%);
width:100%;
display: flex;
align-items: center;
}

#visore .wrap_forma img
{
max-height:100%;
width:auto;
height:auto;
 animation-name: distorci;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin:center;
}

@keyframes distorci {
  0%   {transform:none;}
25%  {transform:scale(1.1,0.9) rotate(-5deg); }
  50%  {transform:scale(1,0.8)  rotate(-10deg); }
75%  {transform:scale(0,9.0,9)  rotate(-5deg); }
  100% {transform:none;}
}

#two,#four
{
padding-top:70px;
padding-bottom:70px;
}
#two .citazione
{
font-size:3rem;
max-width: 740px;
}
#two .relativo,#four .relativo
{
margin-top:70px;
}
#two .forma1
{
left:5%;
top:0;
}
#two .forma2
{
left:auto;
right:0;
max-width:35%;
top:0;
}
#two .illustrazione
{
left:0;
top:0;
max-width:45%;
}
#three,#threebis
{
padding-top:12%;
padding-bottom:100px;
}
#three .citazione
{
max-width: 900px;
}
#four .illustrazione1
{
left:auto;
right:0;
top:100px;
max-width:45%;
}
#four .illustrazione2
{
left:0;
top:0;
max-width:45%;
}

#four .citazione
{
margin-top:150px;
margin-bottom:120px;
max-width:900px;
}
#four .forma
{
right:0;
left:auto;
top:auto;
bottom:150px;
}
.popup
{
position:absolute;
z-index:10;
max-width:calc(50% - 50px);
border-radius:26px;
padding:50px;
-webkit-box-shadow: 4px 4px 35px 15px rgba(0,0,0,0.25); 
box-shadow: 4px 4px 35px 15px rgba(0,0,0,0.25);
background-image:url("../img/bg_popup.png");
background-size:cover;
background-position:center center;
background-color: #fff;
width: 625px;
}

.popup h2
{
font-size:2.5rem;
max-width: 460px;
margin-left:0;
margin-right:auto;
padding-bottom:10px;
}

.spinner {
max-width:100%;
	position:relative;
z-index:1;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
text-align:center;
}

.spinner svg
{
max-width:100%;
height:auto;
display: block;
}
.spinner .background-circle {
  position: relative;
z-index:1;
}

.spinner .foreground-circle {
  width: 100%;
  height: 100%;
top:0;
left:0;
  /* To start the svg circle from the top */
  transform: rotate(-90deg);
	transform-origin:center center;
z-index:2;

  /* To center it inside the container */
  position: absolute;
}
.spinner .foreground-circle svg circle
{
  /* stroke-dasharray = 2 * (22/7) * svg's radius value (90px)*/
  stroke-dasharray: 961;
stroke-dashoffset: 961;
}

.spinner .valore
{
position:absolute;
z-index:3;
left:50%;
top:50%;
transform:translate(-50%,-50%);
text-transform:uppercase;
font-size:1rem;
width:120px;
}

.spinner .number-inside-circle
{
display:block;
font-weight:700;
font-size:3.125rem;
}

#five .popup
{
top:0;
right:20px;
}
#five .citazione
{
margin-top:100px;
max-width:1025px;
}
#five .forma
{
bottom:100px;
left:0;
top:auto;
}

#five .forma2
{
bottom:450px;
left:auto;
top:auto;
right:0;
}
#threebis .citazione
{
max-width:960px;
}
#six
{
margin-top:70px;
}
#six .illustrazione
{
top:0;
left:0;
max-width:55%;
}
#six .focus .riga
{
padding-top:10%;
padding-bottom:10%;
}
#six .popup
{
right:20px;
top:10%;
}

#six .forma
{
right:0;
top:auto;
bottom:0;
}
#seven
{
padding-top:100px;
}
#seven .col2.special
{
min-width:55%;
}
#seven .illustrazione
{
top:250px;
left:auto;
right:0;
max-width:55%;
}
#seven .forma1
{
top:0;
left:auto;
right:15%;
}
#seven .forma2
{
top:auto;
bottom:200px;
left:auto;
right:0;
}
#seven .popup
{
position:relative;
left:20px;
margin-top:30px;
}
#seven .citazione
{
margin-top:150px;
margin-bottom:150px;
max-width: 950px;
}

#eight .col2 h2
{
max-width:29.375rem;
margin-left:0;
margin-right:auto;
}
#eight .relativo
{
margin-bottom:100px;
}
#eight .illustrazione
{
top:auto;
left:0;
bottom:30px;
max-width:48%;
}
#eight .popup
{
top:100px;
left:auto;
right:20px;
}
#eight .citazione
{
margin-top:100px;
max-width: 990px;
}
#eight .forma
{
left:0;
top:auto;
bottom:-100px;
}

#nine
{
padding-bottom:50px;
}
#nine .illustrazione1
{
top:0;
left:30px;
max-width:48%;
}
#nine .illustrazione2
{
top:0;
left:auto;
right:0;
max-width:48%;
}
#nine .col2.pull-right
{
margin-top:200px;
}
#nine .relativo
{
margin-bottom:100px;
}
#nine .forma1
{
left:auto;
right:0;
top:auto;
bottom:0;
}
#nine .forma2
{
left:0;
top:auto;
bottom:0;
}
#nine .citazione
{
max-width: 780px;
}

#quiz
{
padding-top:100px;
padding-bottom:70px;
}
#quiz h2
{
margin-bottom:10px;
}
#quiz span
{
font-weight:700;
text-transform:uppercase;
font-size:1.25rem;
}

#quiz span
{
display:block;
}

#quiz .slides
{
margin-top:50px;
}
#quiz .slide
{
display:flex;
justify-content:space-between;
align-items:center;
}

#quiz .slide > div
{
flex-basis:48%;
}
#quiz .slide > div.risultato
{
flex-basis:100%;
}
#quiz .domanda .testo,#quiz .risultato .testo
{
font-size: 3.5rem;
  font-family: "aria-text-g2", sans-serif;
  font-weight: 700;
  font-style: italic;
line-height:1;
margin-top:20px;
}
#quiz .risultato .testo
{
margin-left:auto;
margin-right:auto;
max-width:920px;
margin-bottom:30px;
}
#quiz .risposte
{
position:relative;
z-index:1;
}
#quiz .risposta,#quiz .approfondimento .testo
{
padding:25px;
border-radius:35px;
font-weight:300;
text-align:left;
}
#quiz .risposta
{
position:relative;
z-index:1;
cursor:pointer;
min-height:145px;
border:5px solid #fb6951;
color:#fb6951;
margin-top:20px;
margin-bottom:20px;
font-size:1.5rem;
}
#quiz .risposta.on,#quiz .approfondimento .testo
{
background-color:#fb6951;
color:#fff;
}

#quiz .risposta.off
{
opacity:0;
visibility:hidden;
}

#quiz .risposta::before,#quiz .risposta::after
{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:5;
width:50px;
height:50px;
background-size:100%;
visibility:hidden;
opacity:0;
}
#quiz .risposta::before
{
background-image:url("../img/ok.png");
}
#quiz .risposta::after
{
background-image:url("../img/ko.png");
}
#quiz .risposta.ok::before,#quiz .risposta.ko::after
{
visibility:visible;
opacity:1;
}

#quiz .risposta span
{
font-size:2.6rem;
transform:translate(-15px,-20px);
margin-bottom:-20px;
position:relative;
z-index:1;
}

#quiz .slick-track
{
display:flex;
align-items:center;
}

#quiz .approfondimento
{
visibility:hidden;
opacity:0;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width: 100%;
text-align: right;
}
#quiz .approfondimento .testo
{
font-size:1.5rem;
}
#quiz .next,#quiz #refresh_test
{
cursor:pointer;
text-transform:uppercase;
font-weight:700;
font-size:1.25rem;
}
#quiz .next
{
display:inline-flex;
align-items:center;
margin-top:20px;
}
#quiz .next::after
{
content:"";
margin-left:5px;
width:48px;
height:17px;
background-size:100% auto;
background-image:url("../img/next.png");
align-items: center;
}
#quiz .approfondimento.on,#quiz .next.on
{
opacity:1;
visibility:visible;
}

.bannerEnd
{
margin-top:50px;
text-align:center;
}
.bannerEnd a
{
display:block;
position:relative;
z-index:1;
}
.bannerEnd a.scopri_area
{
position: absolute;
  z-index: 2;
  top: auto;
  bottom: 8%;
  left: auto;
  right: 3.1%;
  width: 19.1%;
  height: 14.3%;
}
.slides .slick-track::before
{
position:absolute;
z-index:999;
top:0;
left:0;
width:100%;
height:100%;
}

.slides .slick-current.slick-active
{
z-index:1000 !important;
}
#quiz a.button
{
margin-top:50px;
line-height:60px;
display:inline-block;
}