/*
Style Name:     presenza-geografica.css
Description:    Stili per le mappe della presenza geografica
Author:         NS12 - dream-team - GC 
Version:        1.0
Date:           
*/
/* =============================================================
>> TABLE OF CONTENTS:
================================================================

1.0 - FULL SCREEN MAP
    1.1 - Dimensioni - Default
    1.2 - Adattamento mobile e IE
2.0 - LEGENDE
    2.1 - Titolo
    2.2 - Card rettangolare 
    2.3 - Legenda cartina 
    2.4 - Note e precisazioni
3.0 - MAPPE DELL'ITALIA
    3.1 - Persone
    3.2 - Rete
    3.3 - Opere
    3.4 - Interconnessioni
    3.5 - Sedi
    3.6 - Piano di Sviluppo - Interventi
    3.7 - Piano di Sviluppo - Nord Ovest
    3.8 - Piano di Sviluppo - Nord Est
    3.9 - Piano di Sviluppo - Centro Sud
4.0 - MAPPA DI CALORE ITALIA
    4.1 - Evoluzione Rinnovabile (Scenario 1)
    4.2 - Evoluzione Rinnovabile (Scenario 2)
5.0 - MAPPA DEL MONTENEGRO
    5.1 - Persone - Interconnessione - Sede
6.0 - MAPPE DEL SUD AMERICA
    6.1 - Persone
    6.2 - Opere
    6.3 - Sedi
7.0 - POP-UP

--------------------------------------------------------------*/
/* 
>> 1.0 - Full screen map (silente)
   since: ver 1.0
==============================================================*/
/* >> 1.1 - Dimensioni - Default
   since: ver 1.0
--------------------------------------------------------------*/
.container-full {
    margin-left: calc(-100vw / 2 + 900px / 2);
    margin-right: calc(-100vw / 2 + 900px / 2);
}
.chartglobo {
  width: 100%;
  height: 600px;
  background-color:#295eb9;
}
.chartglobo-en {
  width: 100%;
  height: 600px;
  background-color:#295eb9;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-full{
  height:100vh;
}
}
/* >> 1.2 - Adattamento mobile e IE
   since: ver 1.0
--------------------------------------------------------------*/
@media(max-width:1279px) {
.container-full {
    margin-left: 0!important;
    margin-right: 0!important;
}
.chartglobo {
  width: 100%;
  height: 600px;
}
.chartglobo-en {
  width: 100%;
  height: 600px;
}
}
@media(max-width:600px) {
.container-full {
    margin-left: 0!important;
    margin-right: 0!important;
}
.chartglobo {
  width: 100%;
  height: 400px;
}
.chartglobo-en {
  width: 100%;
  height: 400px;
}
}
/* 
>> 2.0 - LEGENDE
   since: ver 1.0
==============================================================*/
/* >> 2.1 - Titolo
   since: ver 1.0
--------------------------------------------------------------*/
.numeri {
  font-family: Roboto;
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin-left: 5px;
  color: #2f2f2f;
  text-align-last: left;
  font-weight: 500;
  margin-bottom: 25px;
}
.numeri-bg {
  font-family: Roboto;
  font-size: 2rem;
  line-height: 2rem;
  margin-left: 5px;
  color: #295eb9;
  text-align-last: left;
  margin-bottom:0px;
}
.numeri-bg-mo {
  font-family: Roboto;
  font-size: 2rem;
  line-height: 2rem;
  margin-left: 5px;
  color: #295eb9;
  text-align-last: left;
  margin-bottom:25px;
}
.numeri-b {
  font-family: Roboto;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #295eb9;
  text-align-last: left;
  margin-bottom: 0px;
}
/* >> 2.2 - Card rettangolare 
   since: ver 1.0
--------------------------------------------------------------*/
.card {
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 20px;
  width: 100%;
  opacity: 1;
  margin-left: 3px;
  margin-bottom: 25px;
}
@media screen and (min-width: 280px) and (max-width: 378px) { 
.card {
  width: 100%;
}
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.card {
  width: 98%;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.card {
  width: 100%;
}
}
/*Italy card*/
.card .note-it:last-child {
    margin-bottom:0px;
}
.card .note-it-re:last-child {
    margin-bottom:0px;
}
ul.palermo {
    margin-bottom:0px;
}
/*Montenegro card*/
.card .medium:last-child {
    margin-bottom:0px;
}
/*Sud America card*/
.cile {
    margin-bottom:0px;
}
.note-it {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  margin-left: 30px;
  margin-top: -16px;
}
.note-it-re {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  margin-left: 41px;
  margin-top: -16px;
}
.note-am {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  margin-top: -10px;
  margin-left:19px;
}

/* >> 2.3 - Legenda cartina
   since: ver 1.0
--------------------------------------------------------------*/
.container {
  width: 100%;
  overflow: hidden;
}
.legis-re {
  font-family: Roboto;
  font-size: 1rem;
  color: #2f2f2f;
  padding: 20px;
  text-align-last: left;
  line-height: 1rem;
  margin-bottom: 25px;
  margin-left: 5px;
  border-left: 2px solid transparent;
  border-image: linear-gradient(to top, #f2f2f2 10%, #295eb9 80%);
  border-image-slice: 1;
}
.legis-op {
 font-family: Roboto;
 font-size: 1rem;
 text-align-last: left;
 line-height: 0.6rem;
 margin-bottom: 25px;
 color: #2f2f2f;
 margin-left: 5px;
 border-left: 2px solid transparent;
 border-image: linear-gradient(to top, #f2f2f2 10%, #295eb9 80%);
 border-image-slice: 1;
 padding: 20px;
}
.legis-in {
  font-family: Roboto;
  font-size: 1rem;
  text-align-last: left;
  line-height: 1rem;
  margin-bottom: 25px;
  color: #2f2f2f;
  margin-left: 5px;
  border-left: 2px solid transparent;
  border-image: linear-gradient(to top, #f2f2f2 10%, #295eb9 80%);
  border-image-slice: 1;
  padding: 20px;
}
.legis-se {
  font-family: Roboto;
  font-size: 1rem;
  text-align-last: left;
  line-height: 1rem;
  margin-bottom: 25px;
  color: #2f2f2f;
  margin-left: 5px;
  border-left: 2px solid transparent;
  border-image: linear-gradient(to top, #f2f2f2 10%, #295eb9 80%);
  border-image-slice: 1;
  padding: 20px;
}
.square {
    width:15px;
    height:15px;
    margin-right:10px;
}
.marker-op {
    width:40px;
    height:20px;
    margin-right:10px;
}
.marker-re {
    width:30px;
    height:10px;
    margin-right:10px;
}
.top {
    vertical-align: top;
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.legis-re {
  margin-top:10px;
  width: 400px;
}
.legis-op {
  margin-top:10px;
  width: 400px;
}
.legis-in {
  margin-top:10px;
  width: 400px;
}
.legis-se {
    margin-top:10px;
  width: 400px;      
    }
}
#km {margin-bottom:10px;}
.medium-title {
    font-family: Roboto;
    font-size: 1.2rem;
    color: #295eb9;
    text-align-last: left;
    line-height:1rem;
}
.medium {
    font-family: Roboto;
    font-size: 1rem;
    color: #295eb9;
    text-align-last: left;
    line-height:0.6rem;
}
.medium-under {
  font-family: Roboto;
  font-size: 1rem;
  color: #295eb9;
  text-align-last: left;
  line-height:0.6rem;
}
.medium-stato {
font-family: Roboto;
    font-size: 1rem;
    color: #295eb9;
    text-align-last: left;
    line-height: 3rem;
    margin-bottom: -0.5px;
}
/*
/* >> 2.4 - Note e precisazioni
   since: ver 1.0
--------------------------------------------------------------*/
.note {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-top: -15px
}
.site {
  font-family: Roboto;
  font-size: 16px;
  color: #295eb9;
  margin-bottom: 5px;
  text-align-last: left;
}
/* 
>> 3.0 - MAPPE DELL'ITALIA
   since: ver 1.0
==============================================================*/
/* >> 3.1 - Persone
   since: ver 1.0
--------------------------------------------------------------*/
.persone {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-pe {
  width: 30%;
  height: 100%;
  margin-top: 20px;
  float: left;
  display: block;
}
.note-pe {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.persone {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-pe {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-right:20px;
    margin-bottom: -45px;
  }
.note-pe {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.persone {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-pe {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-right:20px;
    margin-bottom: -45px;
  }
.note-pe {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.persone {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-pe {
  width: 30%;
  height: 100%;
  margin-top: 20px;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* >> 3.2 - Rete
   since: ver 1.0
--------------------------------------------------------------*/
.rete {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-re {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-re {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}

@media screen and (min-width: 280px) and (max-width: 380px) { 
.rete {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-re {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -45px;
  }
.note-re {
    margin-top: 10px;
  }
}
@media screen and (min-width: 381px) and (max-width: 420px) {
.rete {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-re {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -45px;
  }
.note-re {
    margin-top: 10px;
  }
}
@media screen and (min-width: 421px) and (max-width: 440px) {
.rete {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-re {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -45px;
  }
.note-re {
    margin-top: 10px;
  }
}
@media screen and (min-width: 441px) and (max-width: 500px) {
.rete {
width: 100%;
height: 650px;
float: left;
display: block;
}
.lex-re {
width: 98%;
height: 100%;
float: left;
display: block;
margin-bottom: -45px;
}
.note-re {
margin-top: 10px;
} }
@media screen and (min-width: 500px) and (max-width: 768px) {  
.rete {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-re {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -45px;
  }
.note-re {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.rete {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-re {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* >>  3.3 - Opere
   since: ver 1.0
--------------------------------------------------------------*/
.opere {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-op {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
  
}
.note-op {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.opere {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-op {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-op {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.opere {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-op {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-op {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.opere {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-op {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* >>  3.4 - Interconnessioni
   since: ver 1.0
--------------------------------------------------------------*/
.interconnessioni {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-in {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-in {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.interconnessioni {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-in {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-in {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.interconnessioni {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-in {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-in {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.interconnessioni {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-in {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}}
/* >> 3.5 - Sedi
   since: ver 1.0
--------------------------------------------------------------*/
.sedi {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-se {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-se {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.sedi {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-se {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-se {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.sedi {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-se {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-se {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.sedi {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-se {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* >> 3.6 - Piano di Sviluppo - Interventi
   since: ver 1.0
--------------------------------------------------------------*/
.pds {
  width: 90%;
  height: 750px;
  float: left;
  display: block;
  margin-top:-2%;
}
.lex-pds {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-pds {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 399px) { 
.pds {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
    margin-top: -20%;
  }
.lex-pds {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-pds {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.pds {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-pds {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-pds {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.pds {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-pds {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* >> 3.7 - Piano di Sviluppo - Nord Ovest
   since: ver 1.0
--------------------------------------------------------------*/
.pds-no {
  width: 90%;
  height: 750px;
  float: left;
  display: block;
  margin-top:-2%;
}
.lex-pds-no {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-pds-no {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 399px) { 
.pds-no {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
    margin-top: -20%;
  }
.lex-pds-no {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-pds-no {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.pds-no {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
    margin-top:-4%;
  }
.lex-pds-no {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-pds-no {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.pds-no {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-pds-no {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* >> 3.8 - Piano di Sviluppo - Nord Est
   since: ver 1.0
--------------------------------------------------------------*/
.pds-ne {
  width: 90%;
  height: 750px;
  float: left;
  display: block;
  margin-top:-2%;
}
.lex-pds-ne {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-pds-ne {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 399px) { 
.pds-ne {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-pds-ne {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-pds-ne {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.pds-ne {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-pds-ne {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-pds-ne {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.pds-ne {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-pds-ne {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* >> 3.9 - Piano di Sviluppo - Centro Sud
   since: ver 1.0
--------------------------------------------------------------*/
.pds-cs {
  width: 90%;
  height: 750px;
  float: left;
  display: block;
  margin-top:-2%;
}
.lex-pds-cs {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-pds-cs {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 399px) { 
.pds-cs {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-pds-cs {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-pds-cs {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.pds-cs {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-pds-cs {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-pds-cs {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.pds-cs {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-pds-cs {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* 
>> 4.0 - MAPPA DI CALORE ITALIA
   since: ver 1.0
==============================================================*/
/* >> 4.1 - Evoluzione Rinnovabile (Scenario 1)
   since: ver 1.0
--------------------------------------------------------------*/
/* 
/* >> 4.2 - Evoluzione Rinnovabile (Scenario 2)
   since: ver 1.0
--------------------------------------------------------------*/
.heatmap {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-heatmap {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-heatmap {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  line-height: 1rem;
  margin-left: 5px;
  margin-bottom: 0px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.heatmap {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-heatmap {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-heatmap {
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.heatmap {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-heatmap {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    margin-bottom: -25px;
  }
.note-heatmap {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.heatmap {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-heatmap {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* 
>> 5.0 - MAPPA DEL MONTENEGRO
   since: ver 1.0
==============================================================*/
/* >> 5.1 - Persone - Interconnessione - Sede
   since: ver 1.0
--------------------------------------------------------------*/
.montenegro {
  width: 60%;
  height: 650px;
  float: left;
  display: block;
}
.lex-mo {
  width: 30%;
  height: 100%;
  margin-top: 20px;
  margin-right: 55px;
  float: left;
  display: block;
}
.note-mo {
  font-family: Roboto;
  font-size: 0.8rem;
  color: #2f2f2f;
  margin-bottom: 0px;
  margin-left: 5px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.montenegro {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-mo {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
  }
.note-mo {
    font-family: Roboto;
    font-size: 12px;
    color: #295eb9;
    margin-top: 10px;
    line-height: 1rem;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) {  
.montenegro {
    width: 100%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-mo {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
  }
.note-mo {
    font-family: Roboto;
    font-size: 12px;
    color: #295eb9;
    margin-top: 10px;
    line-height: 1rem;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.montenegro {
  width: 60%;
  height: 650px;
  float: left;
  display: block;
}
.lex-mo {
  width: 30%;
  height: 100%;
  margin-top: 20px;
  margin-right: 55px;
  float: left;
  display: block;
}
}
/* 
>> 6.0 - MAPPE DEL SUD AMERICA
   since: ver 1.0
==============================================================*/
/* >> 6.1 - America Persone
   since: ver 1.0
--------------------------------------------------------------*/
.amPersone {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-am-pe {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-am-pe {
  font-family: Roboto;
  font-size: 0.8rem;
  line-height: 1rem;
  color: #2f2f2f;
  margin-bottom: 0px;
  margin-left: 5px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.amPersone {
    width: 130%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-am-pe {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
  }
.note-am-pe {
    font-family: Roboto;
    font-size: 12px;
    color: #295eb9;
    line-height: 1rem;
    margin-top: 10px;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.amPersone {
    width: 130%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-am-pe {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
  }
.note-am-pe {
    font-family: Roboto;
    font-size: 12px;
    color: #295eb9;
    line-height: 1rem;
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.amPersone {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-am-pe {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  margin-right: 20px;
  float: left;
  display: block;
}
}
/* >> 6.2 - America Opere
   since: ver 1.0
--------------------------------------------------------------*/
.amOpere {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-am-op {
  width: 30%;
  height: 100%;
  float: left;
  margin-top: 20px;
  display: block;
}
.note-am-op {
  font-family: Roboto;
  font-size: 0.8rem;
  line-height: 1rem;
  color: #2f2f2f;
  margin-bottom: 0px;
  margin-left: 5px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.amOpere {
    width: 130%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-am-op {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
  }
.note-am-op {
    font-family: Roboto;
    font-size: 12px;
    color: #295eb9;
    line-height: 1rem;
    margin-top: 10;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.amOpere {
    width: 130%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-am-op {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
  }
.note-am-op {
    font-family: Roboto;
    font-size: 12px;
    color: #295eb9;
    line-height: 1rem;
    margin-top: 10;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.amOpere {
  width: 65%;
  height: 650px;
  float: left;
  display: block;
}
.lex-am-op {
  width: 30%;
  height: 100%;
  float: left;
  margin-top: 20px;
  margin-right: 20px;
  display: block;
}
}
/* >> 6.3 - America Sedi
   since: ver 1.0
--------------------------------------------------------------*/
.amSedi {
  width: 70%;
  height: 650px;
  float: left;
  display: block;
}
.lex-am-se {
  width: 30%;
  margin-top: 20px;
  height: 100%;
  float: left;
  display: block;
}
.note-am-se {
  font-family: Roboto;
  font-size: 0.8rem;
  line-height: 1rem;
  color: #2f2f2f;
  margin-bottom: 0px;
  margin-left: 5px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.amSedi {
    width: 130%;
    height: 650px;
    float: left;
    display: block;
	margin-top: -20%;
  }
.lex-am-se {
    width: 98%;
    height: 100%;
    float: left;
    display: block;
  }
.note-am-se {
    font-family: Roboto;
    font-size: 12px;
    color: #295eb9;
    line-height: 1rem;
    margin-top: 10;
  }
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.amSedi {
    width: 130%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-am-se {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
  }
.note-am-se {
    font-family: Roboto;
    font-size: 12px;
    color: #295eb9;
    line-height: 1rem;
    margin-top: 10;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) { 
.amSedi {
    width: 65%;
    height: 650px;
    float: left;
    display: block;
  }
.lex-am-se {
    width: 30%;
    height: 100%;
    margin-right: 20px;
    float: left;
    display: block;
  }
}
/* 
>> 7.0 - POP-UP
   since: ver 1.0
==============================================================*/
.ampopup-header {
  background-color: transparent !important;
  max-height: 1px;
}
.ampopup-content {
  background: white;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  padding: 1px;
  border-radius: 12px;
  background-color: white;
  position: absolute;
  overflow: hidden;
}
.pop-title {
  font-family: Oswald;
  margin-top: -20px;
  font-size: 1.25rem;
  color: #295eb9;
  font-weight: 500;
  text-align: left;
  line-height: 1.4rem;
  letter-spacing: .03rem;
}
.pop-link {
  font-family: Roboto;
  font-size: 1rem;
  text-elign: left;
  color: #295eb9;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: .03rem;
}
.pop-a, .pop-a:visited {
  color: white;
  font-family: Oswald;
  cursor: pointer;
  text-decoration: none;
}
.pop-button {
  background: #295eb9;
  border: 1px solid #295eb9;
  font-family: Oswald;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  border-radius: 50px;
  padding: 10px 30px;
  outline: none;
  cursor: pointer;
  letter-spacing: 0.05rem;
  text-decoration: none;
  display: inline-block;
  margin-bottom:20px;
}
.pop-img {
  min-width:310px;
  height: 239px;
  margin-bottom:20px;
}
p img.pop-img {
  margin-bottom:20px;
}
@media screen and (min-width: 280px) and (max-width: 380px) { 
.pop-img {
  min-width:80px;
  height: 239px;
  margin-bottom:20px;
}
.pop-title {
  font-family: Oswald;
  margin-top: -20px;
  font-size: 0.8rem;
  color: #295eb9;
  font-weight: 500;
  text-align: left;
  line-height: 1rem;
  letter-spacing: .03rem;
}
.pop-link {
  font-family: Roboto;
  font-size: 0.8rem;
  text-elign: left;
  color: #295eb9;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: .03rem;
}
}
@media screen and (min-width: 400px) and (max-width: 768px) { 
.pop-img {
  min-width:150px;
  height: 239px;
  margin-bottom:20px;
}
.pop-title {
  font-family: Oswald;
  margin-top: -20px;
  font-size: 1rem;
  color: #295eb9;
  font-weight: 500;
  text-align: left;
  line-height: 1.2rem;
  letter-spacing: .03rem;
}
.pop-link {
  font-family: Roboto;
  font-size: 0.8rem;
  text-elign: left;
  color: #295eb9;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: .03rem;
}
}
/* 
THANK YOU!
==============================================================*/