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

html,body
{
overflow:auto !important;
}

body
{
font-family: 'Source Sans Pro', arial;
color:#515151;
font-weight:400;
background-color:#fff;
height:auto !important;
}

#page a {
    text-decoration: underline !important;
}

#page p,#page li
{
font-size:22px;
line-height:38px;
font-weight:300;
}

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

.transition,.evid .anim.transition::before,#test li.evid::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
{
 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);
}

.evid
{
text-align:left;
}

.evid .anim
{
text-align:left;
display:inline-block;
position:relative;
z-index:2;
}

.evid .anim::before
{
position:absolute;
z-index:0;
top:0;
left:0;
width:100%;
height:100%;
content:"";
background-color:#ffd34f;
}

.evid .anim.off::before
{
width:0;
}

.evid span
{
display:block;
position:relative;
z-index:2;
padding-left:20px;
padding-right:20px;
}

.opacita.off
{
opacity:0;
}

.linea_v,.linea_h
{
position:absolute;
z-index:5;
margin:0;
background-color:#ffd34f;
}

.linea_v
{
height:100%;
width:4px;
}

.linea_h
{
width:100%;
height:4px;
}

.linea_v.off
{
height:0;
}

.linea_h.off
{
width: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;
}

h1 {
    font-size: 47px;
    line-height: 52px;
    text-transform: uppercase;
}

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

.button,a.button
{
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:#fff;
text-transform:uppercase;
text-align:center;
background-color:#666;
border:0;
padding-left:30px;
padding-right:30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
/*-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; */
}

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

section
{
padding-top:70px;
padding-bottom:70px;
}

section#visore
{
padding:0;
position:relative;
z-index:1;
width:100%;
overflow:hidden;
background-image:url("../img/visore.jpg");
background-size:cover;
background-position:center center;
}

#visore #note
{
position:absolute;
z-index:4;
margin:0;
width:100%;
bottom:25px;
top:auto;
left:0;
}

#visore #note .focus
{
text-align:left;
font-weight:700;
font-size:20px;
line-height:24px;
color:#ffd34f;
font-style:italic;
}

#visore h1
{
text-transform:uppercase;
font-weight:300;
font-size:40px;
line-height:55px;
color:#fff;
}

#visore h1 b
{
font-weight:300;
color:#ffd34f;
}

#visore h1 span
{
display:block;
text-shadow: 0px 0px 19px rgba(0,0,0,0.32)
}

#visore p
{
line-height:24px;
max-width:620px;
margin-left:0;
margin-right:auto;
margin-top:10px;
font-weight:400;
font-style: italic;
font-weight: 700;
}

section#first
{
padding-top:0;
}

section#first .intro
{
background-color:#ffd34f;
padding-top:50px;
padding-bottom:50px;
}

section#first .intro p,#first .titolo,#five .titolo,#page .citazione p
{
font-weight:700;
font-size:27px;
line-height:42px;
}

section#first .intro p,#page .citazione p,#page .citazione p u
{
text-decoration:underline;
text-align:left;
}

#page .citazione p
{
text-align:left;
}
.citazione p
{
position:relative;
z-index:6;
padding:6%;
}

#page .citazione p i,#page .citazione p span
{
display:block;
text-decoration:none;
font-size:22px;
line-height:38px;
}

#page .citazione p i
{
font-style:italic;
margin-top:10px;
}

#page .citazione p span
{
margin-top:40px;
font-weight:400;
}

.citazione p::before,.citazione p::after
{
position:absolute;
margin:0;
background-color:#fff;
z-index:20;
content:"";
width:70px;
height:90px;
background-position:center center;
background-size:80% auto;
background-repeat:no-repeat;
}

.citazione
{
position:relative;
z-index:10;
}

.citazione p::before
{
top:0;
left:0;
background-image:url("../img/quote_open.svg");
transform:translateX(-50%);
}

.citazione p::after
{
top:auto;
bottom:0;
left:auto;
right:0;
background-image:url("../img/quote_close.svg");
transform:translateX(50%);
}
section#first .intro p
{
color:#000;
max-width: 900px;
margin-left: 0;
margin-right: auto;
}

section#first .intro p::before
{
content:url("../img/bullet.svg");
position:absolute;
left:-6%;
top:0;
margin:0;
z-index:2;
}

section.bannerEnd
{
padding:0;
}

section.bannerEnd img
{
width:100%;
}

#first .titolo,h2
{
font-weight:700;
text-decoration:underline;
font-size:27px;
line-height:38px;
}

#first .titolo
{
padding-bottom:70px;
}

#first .titolo,#five .titolo
{
padding-top:70px;
position:relative;
z-index:1;
max-width:924px;
margin-left:0;
margin-right:auto;
}

#first .titolo .linea_v,#five .titolo .linea_v
{
top:0;
left:0;
}

#first .titolo .linea_h,#five .titolo .linea_h
{
top:auto;
left:0;
bottom:0;
}

#first .illustrazione,#five .illustrazione
{
position:relative;
z-index:1;
}

#first .illustrazione .linea_v,#five .illustrazione .linea_v
{
top:0;
}
#first .illustrazione .linea_v1,#five .illustrazione .linea_v1
{
left:0;
}
#first .illustrazione .linea_v2,#five .illustrazione .linea_v2
{
right:0;
}

#first .illustrazione .linea_h,#five .illustrazione .linea_h
{
top:auto;
left:0;
bottom:0;
}

#first .illustrazione,#five .illustrazione
{
max-width:824px;
margin-left:auto;
margin-right:auto;
}

p.text,#four h2,#seven h2
{
text-align:left;
max-width:792px;
margin-left:auto;
margin-right:auto;
}

#first .illu
{
margin-bottom:30%;
transform:translateY(40%);
position:relative;
z-index:7;
margin-top: -13%;
}

#first .illu .ico
{
position:absolute;
z-index:10;
margin:0;
}

#first .illu .ico.ico1
{
top: -10%;
left: 8%;
}

#first .illu .ico.ico2
{
bottom: 30%;
padding: 10px;
background-color: #fff;
left: 5%;
}

#first .illu .ico.ico3
{
bottom: -7%;
left: 17%;
}

#first .illu .ico.ico4
{
right: 24%;
top: 14%;
}

#first .illu .ico.ico5
{
right: 23%;
bottom: -10%;
}

#first .illu .ico.ico6
{
right: 0;
top: 0;
}

#first .illu .ico.ico7
{
right:0;
bottom:20%;
}

#first .illustrazione::after
{
position:absolute;
z-index:6;
top:auto;
bottom:0;
left:50%;
width:50%;
height:4px;
background-color:#fff;
margin:0;
content:"";
}

#gallery
{
background-position:center center;
background-image:url("../img/bg_moon.jpg");
background-size:cover;
position:relative;
z-index:1;
padding-top: 30px;
padding-bottom: 140px;
margin-top:70px;
}

#gallery .slides
{
height:530px;
}

#gallery .slide img,#gallery .slide .image
{
position:relative;
z-index;
}

#gallery .slide .image span
{
opacity:0.4;
color:#fff;
font-size:64px;
line-height:67px;
position:absolute;
top:80%;
left:50%;
transform:translateX(-35%);
margin:0;
z-index:2;
font-weight:300;
}

#gallery .slide .image img
{
width:103px;
opacity:0.4;
}

#gallery .slide .inner_slide
{
width:330px;
max-width:100%;
margin-left:auto;
margin-right:auto;
}

#gallery .slide.slick-active .image span
{
opacity:1;
top:100%;
transform:translateY(-100%);
left:0;
}

#gallery .slide.slick-active .image img
{
width:198px;
opacity:1;
}

#gallery .slide p
{
font-size:19px;
font-weight:400;
line-height:24px;
color:#fff;
opacity:0;
visibility:hidden;
display:none;
text-align:left;
}

#gallery .slide p.title
{
font-size:22px;
font-weight:700;
margin-bottom:10px;
line-height:29px;
margin-top:15px;
}

#gallery .slide.slick-active p
{
opacity:1;
visibility:visible;
display:block;
}

#gallery .slick-dots
{
bottom:100px;
background-image:url("../img/timeline_pattern.png");
background-repeat:repeat-x;
background-position:center center;
}

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

.slick-prev::before, .slick-next::before {
    opacity: 1;
}

.slick-next {
    right: -3%;
}

.slick-prev {
    left: -3%;
}

#gallery .slick-dots li
{
width:11%;
max-width:128px;
text-align:center;
margin:0;
font-size:0;
line-height:0;
background-color:transparent !important;
border:0;
position:relative;
z-index:1;
}

#gallery .slick-dots li button
{
position:absolute;
margin:0;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:block;
width:1px;
height:26px;
 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);
background-color:#ffd34f;
}

#gallery .slick-dots li.slick-active button
{
width:3px;
height:77px;
}

.title_section h2
{
font-weight:700;
font-size:27px;
line-height:38px;
color:#000;
}

#gallery .title_section
{
position:absolute;
left:0;
width:100%;
margin:0;
top:-24px;
z-index:4;
}

#third h2
{
margin-bottom:40px;
}

#third .legenda
{
font-size:19px;
line-height:25px;
}

#third .legenda b
{
display:block;
margin-bottom:10px;
}

#third .grafico
{
margin-top:50px;
}

#third .grafico .valore
{
background-position:center center;
background-repeat:repeat-x;
background-image:url("../img/pattern_grafico_value.png");
position:relative;
z-index:1;
height:50px;
}

#third .grafico .valore span
{
position:absolute;
top:0;
left:0;
margin:0;
z-index:2;
background-color:#fff;
text-align:left;
width:40px;
line-height:30px;
font-weight:700;
font-size:18px;
}

#third .grafico .base
{
background-image:url("../img/pattern_base.png");
background-repeat:repeat-x;
background-position:bottom center;
line-height:4px;
margin-top: 19px;
}

#third .grafico .base .parametro
{
display:inline-block;
width:12%;
position:relative;
z-index:2;
overflow:visible;
height:3px;
background-color:#ffd34f;
}

#third .grafico .base .parametro .col
{
position:absolute;
bottom:3px;
left:50%;
margin:0;
top:auto;
transform:translateX(-50%);
width: 100%;
overflow:visible;
}

#third .grafico .base .parametro .anno
{
position:absolute;
bottom:-60px;
left:0;
margin:0;
top:auto;
text-align:center;
width: 100%;
}

#third .grafico .base .parametro .col span,#third .grafico .base .parametro .anno
{
line-height:38px;
font-size:18px;
font-weight:700;
}

#third .grafico .base .parametro .col .spec
{
font-size:16px;
line-height:18px;
background-image:url("../img/spec.png");
background-repeat:no-repeat;
background-position:bottom left;
padding-bottom:50px;
text-align:left;
white-space:nowrap;
margin-left: 10px;
margin-bottom: -5px;
}

#third .grafico .base .parametro .col .merc
{
background-image:url("../img/yellow_pattern.jpg");
background-repeat:repeat;
background-position:center center;
width:25px;
max-width:90%;
margin-left:auto;
margin-right:auto;
height:0;
}

#third .col2 p
{
max-width:447px;
margin-left:0;
margin-right:auto;
}

.break
{
background-image:url("../img/yellow_pattern.jpg");
background-repeat:repeat;
background-position:center center;
}

#four h2,#seven h2
{
margin-bottom:30px;
}

section#five
{
padding-top:0;
}

#five .linea_h.no_width
{
width:300%;
z-index:11;
}

#five .linea_h.no_width.off
{
width:0;
}

#five p.text
{
text-align:left;
margin-left:0;
}

#five .illustrazione
{
margin-bottom:60px;
}

#five h2
{
margin-top:50px;
text-align:left;
margin-bottom:40px;
}

#five .legenda
{
position:relative;
z-index:1;
padding-left:40px;
text-align:left;
font-weight:600;
font-size:20px;
line-height:26px;
margin-top:20px;
margin-bottom:20px;
}

#five .legenda::before
{
position:absolute;
margin:0;
top:0;
left:0;
width:26px;
height:26px;
content:"";
}

#five .legenda.leg1::before
{
border:4px solid #ffd34f;
}

#five .legenda.leg2::before
{
background-image:url('../img/pattern_gray.jpg');
background-position:center center;
background-repeat:repeat;
}

#five .legenda.leg3::before
{
background-color:#ffd34f;
}

#five .legenda.fonte
{
font-size:19px;
margin-top:40px;
font-weight:400;
}

#five .text_block::after
{
display:block;
clear:both;
content:"";
}

.inner_chart
{
width:124%;
position:relative;
left:-12%;
}

.inner_chart .bordo
{
position:absolute;
height:calc(100% + 30px);
border:4px solid #ffd34f;
top:-15px;
left:50%;
transform:translateX(-50%);
margin:0;
z-index:3;
border-radius:50%;
}

.inner_chart .taglio
{
position:absolute;
z-index:4;
bottom:50%;
left:calc(50% - 1px);
width:2px;
background-color:#f013ff;
height:calc(50% + 40px);
}

.inner_chart .taglio.taglio2
{
transform-origin:bottom right;
transform:rotate(-72deg);
}

.inner_chart .label
{
position:absolute;
margin:0;
z-index:7;
font-weight:700;
font-size:28px;
line-height:30px;
}

.inner_chart .label.label1
{
color:#000;
right:54%;
left:auto;
top:20%;
}

.inner_chart .label.label2
{
color:#fff;
right:auto;
left:50%;
top:60%;
}

.inner_chart .label.label3
{
color: #000;
right: auto;
left: 60%;
top: auto;
bottom: -30px;
padding-left: 20px;
}

.inner_chart .label.label3::before,.inner_chart .label.label3::after
{
position:absolute;
margin:0;
z-index:7;
content:"";
background-color:#000;
}

.inner_chart .label.label3::before
{
width:1px;
height:20px;
bottom:15px;
left:5px;
}

.inner_chart .label.label3::after
{
border-radius:50%;
width:11px;
height:11px;
bottom:0px;
left:0;
}

#chart_area
{
width:55%;
float:right;
position:relative;
z-index:1;
min-height:350px;
position:relative;
z-index:1;
margin-top:40px;
}

#chart_area.off
{
height:auto;
}

#chart
{
display:block;
margin-left:auto;
margin-right:auto;
}

section#gallery2
{
padding-top:0;
margin-top:38px;
background-color:#f5f5f5;
padding-bottom:160px;
position:relative;
z-index:1;
}

#gallery2 .title_section
{
background-color:#ffd34f;
padding-bottom:40px;
}

#gallery2 .title_section h2
{
transform:translateY(-100%);
}

#gallery2 .title_section p
{
margin-top:-10px;
text-align:left;
color:#000;
}

#gallery2 .slides
{
margin-top:70px;
}

#gallery2 .img
{
position:absolute;
top:50%;
transform:translateY(-50%);
left:0;
margin:0;
z-index:10;
width:47%;
background-color:#f5f5f5;
}

#gallery2 .img img
{
animation-name: updown;
    animation-duration: 3s;
    animation-iteration-count: infinite;
animation-timing-function: linear;
position:relative;
width:378px;
}

#first img.mondo
{
width:378px;
}

@keyframes updown {
    0%   {top:0px}
    25%  {top:-8px;}
	50%  {top:0px;}
	75%  {top:8px;}
	100% {top:0px;}
}

#gallery2 .slide p
{
padding-left:53%;
text-align:left;
margin-left:0;
max-width:calc(53% + 320px);
font-weight:400;
font-size:19px;
line-height:24px;
}

#gallery2 .slide p span
{
display:block;
font-weight:300;
font-size:64px;
line-height:67px;
margin-bottom:10px;
}

.slick-slide
{
height:auto;
}

#gallery .slick-initialized .slick-track,#gallery .slick-slider .slick-list
{
height:100%;
}

#gallery2 .slick-initialized .slick-track
{
min-height:350px;
}

#gallery2 .slick-next::before,#gallery2 .slick-prev::before {
    background-image: url('../img/next.svg');
}

#gallery2 .slick-dots
{
width: auto;
left: 50%;
transform: translateX(-50%);
}

#gallery2 .slick-dots::before,#navigator_map ul::before
{
content:"";
position:absolute;
z-index:1;
top:17px;
left:15px;
width:80%;
height:2px;
background-color:#000000;
margin:0;
}

#gallery2 .slick-dots li,#navigator_map ul li
{
position:relative;
z-index:2;
width:15px;
height:15px;
background-color:#fff;
border:2px solid #000;
 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);
}

#gallery2 .slick-dots li.slick-active
{
background-color:#000;
width:30px;
height:30px;
}

#gallery2 .fonte, #gallery .fonte 
{
margin:0;
position:absolute;
top:auto;
bottom:35px;
left:0;
width:100%;
z-index:3;
font-size:14px;
line-height:20px;
}

#gallery .fonte {
margin:0;
position:absolute;
top:auto;
bottom:30px;
left:0;
width:100%;
z-index:3;
font-size:14px;
line-height:20px;
color: #fff  
}

section#seven
{
padding-bottom:0;
}

#seven .video
{
background-size:cover;
background-position:center center;
background-image:url("../img/bg_video.jpg");
margin-top:140px;
padding-bottom:60px;
}

#seven .video .wrapper_video
{
max-width:850px;
margin-left:auto;
margin-right:auto;
display:block;
transform:translateY(-15%);
}
#seven .video video
{
display:block;
max-width:100%;
}
#seven .video p.text
{
color:#fff;
transform:translateY(-10px);
}

.plyr .plyr__play-large
{
border: 4px solid #ffd14b;
width: 87px;
height: 87px;
background:transparent;
}

.plyr__play-large svg
{
margin-left: auto;
margin-right: auto;
width: 40px;
height: 51px;
stroke: #ffd14b;
stroke-width: 2px;
fill: transparent;
stroke-linejoin: round;
}

section#eight
{
position:relative;
z-index:1;
padding-top:0;
}

#eight .linea_v
{
top:0;
left:16%;
}

#eight .focus.primo
{
overflow:hidden;
}

#eight .focus.primo .linea_h
{
left:16%;
top:auto;
bottom:0;
}

#eight .focus.secondo .linea_h
{
left:auto;
right:0;
top:auto;
bottom:0;
}

#eight .illu1
{
position:absolute;
margin:0;
top:100px;
left:0;
width:43%;
z-index:6;
}

#eight  .caption
{
width:50%;
margin-left:auto;
marign-right:auto;
text-align:left;
padding-top:70px;
}

#eight .caption ul
{
padding-top:20px;
padding-bottom:200px;
}

#eight .caption li
{
margin-top:15px;
list-style-type:disc;
margin-left:20px;
}

#eight .illu2
{
position:absolute;
margin:0;
top:0;
right:0;
left:auto;
width:385px;
z-index:6;
transform: translate(31%,-53%);
}

#eight  .caption2
{
text-align:left;
padding-top:70px;
max-width:640px;
margin-left:0;
}

#eight  .caption2 h2
{
margin-bottom:30px;
}

#eight .col_img
{
position:absolute;
z-index: 6;
margin:0;
top:202px;
right:0;
left:auto;
}

#eight .col_img img
{
width:260px;
}

#eight .col_img img.img_sposta
{
position:relative;
left:-2px;
top:5px;
}

#eight .col_img img.img_sposta2
{
position:relative;
top:-1px;
}

#eight .col_img img.img_sposta3
{
position:relative;
top:1px;
}

#eight .focus.secondo
{
height:981px;
}

#eight .freccia1,#eight .freccia2
{
background-color:#fff;
height:45px;
background-image:url("../img/flusso.svg");
width:80px;
bottom:-20px;
background-repeat:no-repeat;
background-position:65% 50%;
position:absolute;
z-index: 7;
margin:0;
}

#eight .freccia1
{
left:55%;
}
#eight .freccia2
{
left:34%;
}

#eight .terzo .caption2
{
margin-left:auto;
margin-right:0;
}

#eight .terzo .caption2 .fonte
{
font-weight:700;
margin-top:40px;
font-size:18px;
line-height:23px;
}

#eight .terzo .col_img {

    margin: 0;
    top: -109px;
    right: auto;
    left: 0;

}

#eight .terzo
{
padding-top:100px;
}

section#third
{
padding-top: 90px;
padding-bottom: 140px;
}

#mappa
{
background-size:cover;
background-image:url("../img/bg_mappa.jpg");
background-position:center center;
position:relative;
z-index:1;
}

#mappa .map_image
{
width:100%;
position:relative;
z-index:4;
}

section#nine
{
background-color:#ffd34f;
padding:0;
margin-top:80px;
overflow:hidden;
position:relative;
z-index:1;
}

#nine .title_section h2
{
position:relative;
z-index:2;
line-height: 50px;
transform:translateY(50%);
}

#mappa .marker,#close_map
{
position:absolute;
z-index:5;
margin:0;
width:66px;
height:66px;
border-radius:50%;
background-color:#fff;
font-weight:700;
color:#000;
font-size:37px;
line-height:66px;
text-align:center;
cursor:pointer;
}
#mappa .marker
{
visibility:visible;
}

#mappa .marker::before
{
content:"";
position:absolute;
z-index:0;
bottom:0;
left:50%;
transform:translateX(-50%);
width:48px;
height:25px;
margin:0;
background-image:url("../img/sottomarker.png");
 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);
}

#mappa.on .marker.on:hover
{
transform:translateY(-15px);
}

#mappa .marker:hover
{
transform:scale(1.1);
}

#mappa #marker1
{
top: 15.5%;
left: 44%;
}

#mappa #marker2
{
top: 61.8%;
left: 45.3%;
}

#mappa #marker3
{
top: 39%;
left: 54.4%;
}

#mappa #marker4
{
top: 68.5%;
left: 50%;
}

#mappa #marker5
{
top: 81%;
left: 38%;
}

#mappa.on
{
transform:translateX(-25%);
}

#mappa.on .marker
{
opacity:0;
visibility:hidden;
}

#mappa.on .marker.on
{
opacity:1;
visibility:visible;
transform:translateY(-15px);
cursor:default;
}

#mappa.on .marker span
{
display:none;
}

#mappa.on .marker.on::before
{
bottom:-15px;
}

.infowindows
{
position:absolute;
z-index:0;
margin:0;
top:0;
right:0;
left:auto;
height:100%;
width:0;
background-color:#ffd34f;
overflow:hidden;
}

.infowindows.on
{
z-index:11;
width:50%;
}

#mappa .sfondo_dettaglio
{
z-index:2;
top:0;
right:25%;
left:auto;
margin:0;
width:50%;
height:100%;
background-size:cover;
background-position:center center;
opacity:0;
position:absolute;
}

#mappa .sfondo_dettaglio img
{
display:none;
}

#mappa .sfondo_dettaglio.on
{
opacity:1;
}

#mappa .sfondo_dettaglio.dettaglio1
{
background-image:url("../img/luogo1.png");
}

#mappa .sfondo_dettaglio.dettaglio2
{
background-image:url("../img/luogo2.png");
}

#mappa .sfondo_dettaglio.dettaglio3
{
background-image:url("../img/luogo3.png");
}

#mappa .sfondo_dettaglio.dettaglio4
{
background-image:url("../img/luogo4.png");
}

#mappa .sfondo_dettaglio.dettaglio5
{
background-image:url("../img/luogo5.png");
}

#page a#close_map
{
opacity:0;
right:50px;
top:50px;
left:auto;
transform:rotate(45deg);
transform-origin:center center;
text-decoration:none !important;
}
.infowindows.on #close_map
{
opacity:1;
}

.infowindows .infowindow
{
opacity:0;
visibility:hidden;
max-width:482px;
margin-left:0;
margin-right:auto;
text-align:left;
position: absolute;
z-index: 4;
top: 0;
left: 0;
}

.infowindows.on .infowindow.on
{
opacity:1;
visibility:visible;
}

#page .infowindow p
{
color:#323232;
font-weight:400;
}

.infowindow h2
{
margin-bottom:30px;
}

.infowindows .caption
{
padding-top:120px;
}

#navigator_map
{
position:absolute;
z-index:3;
margin:0;
bottom:10%;
left:6%;
opacity:0;
}

.infowindows.on #navigator_map
{
opacity:1;
}

#navigator_map ul
{
display:flex;
align-items:center;
height: 30px;
}

#navigator_map ul::before
{
top:15px;
}

#navigator_map ul li
{
border-radius: 50%;
background-color:#ffd34f;
display:inline-block;
margin: 0px 12px;
cursor:pointer;
}

#navigator_map ul li.on
{
background-color: #000;
width: 30px;
height: 30px;
}