/* qui mettere le variabili che potrebbero cambiare */
:root {
  --font-paragrafi-mobile: 20px;
  --regular: 400;
  --bold: 700;
  --corallo: #fc4646;
  --ciano: #83f9f3;
  --grigio-scuro: #1c1c1c;
  --grigio-chiaro: #4a4a4a;
  --bianco: #ededef;
  --viola: #7E3FE5;
}

body {
  background-color: var(--grigio-scuro);
  margin: 0;
  color: var(--corallo);
  font-family: Sole24Serif;
}

.paragrafo-bianco {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  font-family: 'sole_text';
  font-style: normal;
  font-weight: 300;
  font-size: var(--font-paragrafi-mobile);
  line-height: 140.4%;
  color: var(--bianco);
}

.fonti {
  font-family: 'SoleSans';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 11px;
  color: var(--bianco);
  padding-top: 20px;
}

.citazione {
  border-left: 2px solid var(--corallo);
}

.citazione p {
  font-size: 350%;
  padding-left: 15px;
  color:var(--bianco);
  font-family: 'sole_display';
  font-style: normal;
  font-weight: 700;
}

/* TOP-BAR */

.top-bar {
  background-color: black;
  position: fixed;
  width: 100%;
  height: 65px;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--bianco);
}

.top-bar_sx {
  width: 60px;
  padding-left: 20px;
  margin-right: 30px;
}

.top-bar_centro {
  width: 80px;
}

.top-bar_dx {
  position: relative;
  padding-right: 20px;
  display: flex;
}

.logo_social {
  position: relative;
  align-items: center;
  width: 30px;
}


/* COPERTINA */

#container-copertina {
  background-color: var(--corallo);
  height: auto;
  margin: auto;
  /*width: auto;*/
  background-image: url('../img/atomo_copertina_giusto.svg');
  /* background-attachment: fixed; */
  background-position: -115% 50%;
  background-repeat: no-repeat;
  background-size: 130%;
}

#atomo_copertina {
  position: absolute;
  top: -690px;
}


#copertina {
  /* background-color: var(--corallo); */
  max-width: 800px;
  padding: 0% 15% 0% 15%;
  margin: auto;
}

.titolo {
  height: auto;
  position: relative;
  z-index: 3;
}

h1 {
  padding-top: 200px;
  margin: auto;
  font-family: 'sole_display';
  font-style: normal;
  font-weight: var(--bold);
  font-size: 113px;
  line-height: 93.5%;
  color: var(--grigio-scuro);
}

div span.titolo {
  font-family: 'sole_display';
  font-style: italic;
  font-weight: var(--regular);
  font-size: 113px;
  line-height: 93.5%;
  color: var(--grigio-scuro);
}

#info {
  font-family: 'sole_display';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 30px;
  line-height: 35px;
  color: var(--bianco);
}

#paragrafo-nero {
  width: 100%;
  margin-top: 100px;
  padding-bottom: 50px;
  font-family: 'sole_text';
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-paragrafi-mobile);
  line-height: 140.4%;
  color: var(--grigio-scuro);
}

/* CONTAINER */

.container {
  max-width: 800px;
  padding: 0% 15% 0% 15%;
  flex-direction: column;
  margin: auto;
}

/* CONTAINER ARSENALI */

.container-arsenali {
  flex-direction: column;
}

h2 {
  margin: auto;
  padding-top: 50px;
  font-family: 'sole_display';
  font-style: normal;
  font-weight: var(--bold);
  font-size: 60px;
  line-height: 102%;
  color: var(--corallo);
}

.linea_titoletto {
  width: 42px;
  border: 1px solid var(--bianco);
  margin-left: 0em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

h3 {
  margin: auto;
  font-family: 'sole_display';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 30px;
  line-height: 100%;
  color: var(--bianco);
}

div span.titoletto {
  font-family: 'sole_display';
  font-style: italic;
  font-weight: var(--regular);
  font-size: 60px;
  line-height: 102%;
  color: var(--corallo);
}


#data1-tabella {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* background-color: #fc4646; */
}

#data1 {
  width: 60%;
  height: auto;
  margin-top: 50px;
  margin-bottom: 40px;
  /* background-color: #7E3FE5; */
}

#data1 .st0 {
  fill: #1C1C1C;
  transition: all 0.35s linear;
}

#data1 .st1 {
  fill: none;
  stroke: #4A4A4A;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
}

#data1 svg #gruppo_rus .st1,
#data1 svg #gruppo_rus .st2 {
  fill: none;
  stroke: #fc4646;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
}

#data1 .st2 {
  fill: none;
  stroke: #EDEDEF;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
}

#data1 svg #asta_1_sottile .st2,
#data1 svg #asta_2_sottile .st2 {
  fill: none;
  stroke: #fc4646;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
}

#data1 .st3 {
  fill: #FC4646;
  transition: all 0.35s linear;
}

#data1 .st4 {
  font-family: 'SoleSans';
  transition: all 0.35s linear;
}

#data1 .st5 {
  font-size: 38px;
  transition: all 0.35s linear;
}

#data1 .st6 {
  fill: #83F9F3;
  transition: all 0.35s linear;
}

#data1 .st7 {
  fill: #7E3FE5;
  transition: all 0.35s linear;
}

#data1 .st8 {
  fill: #1C1C1C;
  stroke: #EDEDEF;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
}

#data1 .st10 {
  fill: #1C1C1C;
  stroke: #EDEDEF;
  stroke-width: 0.5;
  transition: all 0.35s linear;
}

#data1 svg #asta_1_sottile .st10,
#data1 svg #asta_2_sottile .st10 {
  fill: #1C1C1C;
  stroke: #fc4646;
  stroke-width: 0.5;
  transition: all 0.35s linear;
}

#data1 .st11 {
  fill: #EDEDEF;
  stroke: #1C1C1C;
  transition: all 0.35s linear;
}

#data1 svg #asta_1 .st11,
#data1 svg #asta_2 .st11 {
  fill: #fc4646;
  stroke: #1C1C1C;
  transition: all 0.35s linear;
}

#data1 .st12 {
  fill: none;
  stroke: #EDEDEF;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
}

#data1 svg #asta_1 .st12,
#data1 svg #asta_2 .st12 {
  fill: none;
  stroke: #fc4646;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
}

#data1 #cerchio_pallina .st8 {
  display: none;
  transition: all 0.35s linear;
}

#data1 #cerchio_pallina {
  transform: rotate(0);
  transition: all 0.35s linear;
}

#nome_usa {
  display: none;
  transition: all 0.35s linear;

}

#nome_altri {
  display: none;
  transition: all 0.35s linear;

}

#nome_rus {
  display: block;
  transition: all 0.35s linear;

}

#tabella {
  width: 248px;
  display: flex;
  flex-direction: column;
}

.voce_tabella_russia,
.voce_tabella_usa,
.voce_tabella_altri {
  height: 60px;
  font-size: 16px;
  line-height: 18.46px;
  color: #ededef;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: var(--grigio-scuro);
  transition: all 0.35s linear;
  border-bottom: 1px solid var(--grigio-chiaro);
}

.voce_tabella_russia {
  height: 60px;
  font-size: 16px;
  line-height: 18.46px;
  color: var(--grigio-scuro);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: var(--corallo);
  transition: all 0.35s linear;
  border-top: 2px solid var(--bianco);
}

.testo_tabella {
  margin: 0;
  font-family: 'SoleSans';
  font-style: normal;
  font-weight: 400;
  font-size: 100%;
}

#testoCorea {
  width: 50%;
}

.cifra_tabella {
  margin: 0;
  font-family: 'SoleSans';
  font-style: normal;
  font-weight: lighter;
  font-size: 90%;
}

.linea_tabella {
  margin: 0;
  width: 248px;
  border: 0.5px solid var(--grigio-chiaro);

}

.linea_spessa_tabella {
  margin: 0;
  width: 100%;
  border: 1px solid var(--bianco);
}

/* #paesi, #num-testate {
    font-family: 'Sole24Serif Headline';
    font-style: medium;
    font-weight: 500;
    font-size: 16px;
    line-height: 18.46px;
    color: var(--bianco);
    margin-top: 35px;
    margin-left: 25px;
} */

/* CONTAINER TIMELINE */

#data2 .st0 {
  fill: none;
  stroke: #83F9F3;
  stroke-width: 1.5;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st1 {
  fill: #83F9F3;
  transition: all 0.35s linear;
}

#data2 .st2 {
  font-family: 'sole_display';
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st3 {
  font-size: 24px;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st4 {
  fill: none;
  stroke: #83F9F3;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st5 {
  fill: none;
  transition: all 0.35s linear;
}

#data2 .st6 {
  fill: #EDEDEF;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st7 {
  font-family: 'SoleSans';
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st8 {
  font-size: 16px;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st9 {
  font-size: 14px;
  transition: all 0.35s linear;
}

#data2 .st10 {
  fill: #FF514B;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st11 {
  fill: none;
  stroke: #FF514B;
  stroke-width: 1.5;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st12 {
  fill: none;
  stroke: #FF514B;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st13 {
  fill: none;
  stroke: #7E3FE6;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st14 {
  fill: none;
  stroke: #7E3FE6;
  stroke-width: 2;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st15 {
  fill: #7E3FE6;
  transition: all 0.35s linear;
  opacity: 0;
}

#data2 .st16 {
  enable-background: new;
  transition: all 0.35s linear;
}

#data2 .st17 {
  opacity: 0.2;
  fill: none;
  stroke: #EDEDEF;
  enable-background: new;
  transition: all 0.35s linear;
}

#data2 .st18 {
  opacity: 0.2;
  fill: none;
  stroke: #EDEDEF;
  stroke-width: 1.5;
  enable-background: new;
  transition: all 0.35s linear;
}

#data2 .st19 {
  fill: none;
  stroke: #EDEDEF;
  stroke-width: 0.5;
  transition: all 0.35s linear;
}

#data2 .st20 {
  fill: none;
  stroke: #83F9F3;
  stroke-miterlimit: 10;
  transition: all 0.35s linear;
}

#data2 .st21 {
  opacity: 0.7;
  fill: none;
  stroke: #FC4646;
  enable-background: new;
  transition: all 0.35s linear;
}

#data2 #Base_permanente #Pallini #Pallini_altri_stati .st13 {
  opacity: 1;
  transition: all 0.35s linear;
}

#data2 #Base_permanente .st1,
#data2 #Base_permanente .st3,
#data2 #Base_permanente .st4,
#data2 #Base_permanente .st6,
#data2 #Base_permanente .st7,
#data2 #Base_permanente .st10 {
  opacity: 1;
  transition: all 0.35s linear;
}

#data2 #Base_permanente #trentamila {
  opacity: 1;
  transition: all 0.35s linear;
}

#data2 #Base_permanente #quarantamila {
  opacity: 1;
  transition: all 0.35s linear;
}

.data2_desktop {
  margin-top: 40px;
  display: block;
}

.data2_mobile {
  display: none;
}


/* CONTAINER TRATTATO */

#intro-firmatari {
  font-family: 'sole_text';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 24px;
  color: var(--bianco);
}

#firmatari-corallo {
  color: var(--corallo);
}

#firmatari-ciano {
  color: var(--ciano);
}

#slider {
  width: 226px;
  height: 33px;
  fill: none;
  border: 1px solid var(--bianco);
  border-radius: 25px;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 50px;
  margin-bottom: 25px;
}

#tasto_nazioni {
  background: var(--bianco);
  width: 105px;
  height: 25px;
  border-radius: 157px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: 0.35s linear;
}

div#tasto_nazioni p {
  color: var(--grigio-scuro);
  font-family: 'SoleSans';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 12px;
}

#tasto_popolazioni {
  background: var(--grigio-scuro);
  width: 105px;
  height: 25px;
  border-radius: 157px;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 1;
  transition: 0.35s linear;
}

div#tasto_popolazioni p {
  color: var(--bianco);
  font-family: 'SoleSans';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 12px;
}

.trattato-wrapper {
  position: relative;
  height: 556px;
  margin-bottom: 80px;
}

.tab-trattato {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: opacity 0.35s linear;
  display: flex;
  justify-content: center;
  width: 100%;
}

.tab-trattato#nazioni {
  height: 556px;
  margin: auto;
  font-family: 'SoleSans';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 14px;
  line-height: 17px;
  text-align: justify;
  text-transform: uppercase;
  color: var(--corallo);
}

.tab-trattato#nazioni .tab-trattato-wrapper {
  width: 478px;
}

#nazioni span {
  color: var(--ciano);
}

.tab-trattato#popolazioni {
  height: 556px;
  margin: 0 auto;
}

.tab-trattato#popolazioni .tab-trattato-wrapper {
  width: 360px;
}

.tab-trattato.visible {
  opacity: 1;
}

#firmatari .st0 {
  fill: #83F9F3;
}

#non-firmatari .st3 {
  fill: #FC4646;
}

#firmatari,
#non-firmatari .st1 {
  font-family: 'SoleSans';
  font-size: 8px;
  color: var(--grigio-scuro);
}

#firmatari,
#non-firmatari .st2 {
  font-family: 'SoleSans';
  font-size: 8px;
}

/* VIZ3 */
/*#data3 {
  position: relative;
  margin-top: -200px;
  z-index: -1;
}*/

.data3-desktop {
  display: block;
  margin-top: 20px;
}

.data3-mobile {
  display: none;
}

#data3 .st0 {
  fill: none;
  stroke: url(#SVGID_00000069383071198540266190000003981593437932825997_);
  stroke-miterlimit: 10;
}

#data3 .st1 {
  fill: none;
  stroke: url(#SVGID_00000054259048619618156310000005072338110409748615_);
  stroke-miterlimit: 10;
}

#data3 .st2 {
  fill: none;
  stroke: url(#SVGID_00000135650738634981711710000013858857288053896364_);
  stroke-miterlimit: 10;
}

#data3 .st3 {
  fill: none;
  stroke: url(#SVGID_00000159447822027784838820000018242590816636742816_);
  stroke-miterlimit: 10;
}

#data3 .st4 {
  fill: none;
  stroke: url(#SVGID_00000141436354782944714090000009271273959409223829_);
  stroke-miterlimit: 10;
}

#data3 .st5 {
  fill: none;
  stroke: url(#SVGID_00000058557606988844574190000007670943251292381856_);
  stroke-miterlimit: 10;
}

#data3 .st6 {
  fill: none;
  stroke: url(#SVGID_00000111184157269642070340000000055047912759310478_);
  stroke-miterlimit: 10;
}

#data3 .st7 {
  fill: none;
  stroke: url(#SVGID_00000118369438724818908530000002167172241378134971_);
  stroke-miterlimit: 10;
}

#data3 .st8 {
  fill: none;
  stroke: url(#SVGID_00000158722399084636049540000003918210764567957392_);
  stroke-miterlimit: 10;
}

#data3 .st10 {
  fill: #83F9F3;
}

#data3 .st11 {
  fill: #1C1C1C;
}

#data3 .st12 {
  font-family: "SoleSans";
}

#data3 .st13 {
  font-size: 16px;
}

#data3 .st14 {
  fill: #7E3FE5;
}

#data3 .st15 {
  fill: #EDEDEF;
}

#data3 .st16 {
  fill: #FF514B;
}

#data3 .st17 {
  font-size: 16px;
}

#data3 .st18 {
  font-size: 14px;
}

.container-spese {
  overflow-x: hidden;
}

#data3 .data3-desktop svg .USA .PALLA_USA,
#data3 .data3-desktop svg .CINA .PALLA_CINA,
#data3 .data3-desktop svg .RUSSIA .PALLA_RUSSIA,
#data3 .data3-desktop svg .GRANBRETAGNA .PALLA_GRANBRETAGNA,
#data3 .data3-desktop svg .FRANCIA .PALLA_FRANCIA,
#data3 .data3-desktop svg .INDIA .PALLA_INDIA,
#data3 .data3-desktop svg .ISRAELE .PALLA_ISRAELE,
#data3 .data3-desktop svg .PAKISTAN .PALLA_PAKISTAN,
#data3 .data3-desktop svg .COREANORD .PALLA_COREANORD {
  transition: all 0.35s linear;
  opacity: 0;
}

#data3 .data3-desktop svg .USA .LINEA_USA,
#data3 .data3-desktop svg .CINA .LINEA_CINA,
#data3 .data3-desktop svg .RUSSIA .LINEA_RUSSIA,
#data3 .data3-desktop svg .GRANBRETAGNA .LINEA_GRANBRETAGNA,
#data3 .data3-desktop svg .FRANCIA .LINEA_FRANCIA,
#data3 .data3-desktop svg .INDIA .LINEA_INDIA,
#data3 .data3-desktop svg .ISRAELE .LINEA_ISRAELE,
#data3 .data3-desktop svg .PAKISTAN .LINEA_PAKISTAN,
#data3 .data3-desktop svg .COREANORD .LINEA_COREANORD {
  fill: none;
  transition: all 0.35s linear;
  stroke: #6D6D6C;
  stroke-width: 1px;
}

#data3 .data3-mobile svg .USA .PALLA_USA,
#data3 .data3-mobile svg .CINA .PALLA_CINA,
#data3 .data3-mobile svg .RUSSIA .PALLA_RUSSIA,
#data3 .data3-mobile svg .GRANBRETAGNA .PALLA_GRANBRETAGNA,
#data3 .data3-mobile svg .FRANCIA .PALLA_FRANCIA,
#data3 .data3-mobile svg .INDIA .PALLA_INDIA,
#data3 .data3-mobile svg .ISRAELE .PALLA_ISRAELE,
#data3 .data3-mobile svg .PAKISTAN .PALLA_PAKISTAN,
#data3 .data3-mobile svg .COREANORD .PALLA_COREANORD {
  transition: all 0.35s linear;
  opacity: 0;
}

#data3 .data3-mobile svg .USA .LINEA_USA,
#data3 .data3-mobile svg .CINA .LINEA_CINA,
#data3 .data3-mobile svg .RUSSIA .LINEA_RUSSIA,
#data3 .data3-mobile svg .GRANBRETAGNA .LINEA_GRANBRETAGNA,
#data3 .data3-mobile svg .FRANCIA .LINEA_FRANCIA,
#data3 .data3-mobile svg .INDIA .LINEA_INDIA,
#data3 .data3-mobile svg .ISRAELE .LINEA_ISRAELE,
#data3 .data3-mobile svg .PAKISTAN .LINEA_PAKISTAN,
#data3 .data3-mobile svg .COREANORD .LINEA_COREANORD {
  fill: none;
  transition: all 0.35s linear;
  stroke: #6D6D6C;
  stroke-width: 1px;
}

/* CONTAINER BANCHE */
#data4 .st0 {
  fill: #4A4A4A;
  transition: all 0.35s linear;
}

#data4 .st1 {
  fill: #1C1C1C;
  transition: all 0.35s linear;
}

#data4 .st2 {
  font-family: SoleSans;
  transition: all 0.35s linear;
}

#data4 .st3 {
  font-size: 200px;
  transition: all 0.35s linear;
}

#data4 .st4 {
  fill: #EDEDEF;
  transition: all 0.35s linear;
}

#data4 .st5 {
  font-size: 40px;
  transition: all 0.35s linear;
}

#data4 .st6 {
  font-size: 20px;
  transition: all 0.35s linear;
}

#data4 .st7 {
  font-size: 100px;
  transition: all 0.35s linear;
}

#data4 .st8 {
  font-size: 32px;
  transition: all 0.35s linear;
}

#data4 .st9 {
  font-size: 16px;
  transition: all 0.35s linear;
}

#data4 .st10 {
  font-size: 30px;
  transition: all 0.35s linear;
}

#data4 .st11 {
  font-size: 25px;
  transition: all 0.35s linear;
}

#data4 .st12 {
  font-size: 35px;
  transition: all 0.35s linear;
}

#data4 .st13 {
  font-size: 16px;
  transition: all 0.35s linear;
}

#data4 .st14 {
  fill: #FC4646;
  transition: all 0.35s linear;
}

#data4 .st15 {
  font-size: 51px;
  transition: all 0.35s linear;
}

#data4 .st16 {
  font-size: 32px;
  transition: all 0.35s linear;
}

#data4 .st17 {
  font-size: 16px;
  transition: all 0.35s linear;
}

#data4 .riquadro {
  transition: all 0.35s linear;
}

.tooltip {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s linear;
}

.Uc_details,
.Isp_details {
  opacity: 0;
  transition: 0.35s linear;
}

.data4_desktop {
  display: block;
}

.data4_mobile {
  display: none;
}

/* CONTAINER TIMER */

#sottotitolo-timer {
  font-family: 'sole_text';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 20px;
  color: var(--bianco);
}

#soldi-spesi {
  font-family: 'sole_display';
  font-style: normal;
  font-weight: var(--regular);
  font-size: 155px;
  color: var(--corallo);
  text-align: left;
  margin: 50px 0px -20px 0px;
}

/* CONTAINER FOOTER */

#container-footer {
  background-color: black;
  height: auto;
  margin: auto;
  width: auto;
  margin-top: 50px;
}

#footer {
  background-color: black;
  max-width: 1000px;
  padding: 35px 50px 35px 50px;
  margin: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.logo_unirsm {
  width: 70px;
  padding-right: 40px;
  padding-top: 3px;
}

.column-footer {
  width: 45%;
}

.text-footer {
  font-family: 'SoleSans';
  font-style: normal;
  font-size: 14px;
  color: white;
  font-weight: 300;
  margin: auto;
}

div span.bold-footer {
  font-family: 'SoleSans';
  font-style: normal;
  font-weight: var(--bold);
  font-size: 14px;
}

/* MEDIA QUERY SITO RESPONSIVE */

/* SCHERMI SMARTPHONE GRANDI/MEDI */

@media only screen and (max-width: 600px) {
  #copertina,
  .container {
    padding: 0% 5% 0% 5%;
  }

  .paragrafo-bianco,
  #paragrafo-nero,
  #info {
    font-size: var(--font-paragrafi-mobile);
  }

  .citazione p {
    font-size: 250%;
  }

  h1 {
    font-size: 78px;
    padding-top: 190px;
  }

  div span.titolo {
    font-size: 78px;
  }

  #container-copertina {
    background-position: 0% 0%;
    background-size: 200%;
  }

  #paragrafo-nero {
    margin-top: 30px;
  }

  #data1-tabella {

    flex-direction: column;

  }

  #data1 {
    width: 100%;
  }

  #tabella {
    width: 100%;
  }
  #tabella {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .voce_tabella_russia,
  .voce_tabella_usa,
  .voce_tabella_altri {
    width: 38%;
  
  }

  .voce_tabella_russia,
  .voce_tabella_usa{
    border-top: 2px solid var(--bianco);
  }


  .testo_tabella {
    font-size: 100%;
  }
  
  #testoCorea {
    width: 50%;
  }
  
  .cifra_tabella {
    font-size: 87.5%;
  }


  /************************** MEDIA QUERY DATA-2 **************************/

  .data2_desktop {
    display: none;
  }

  .data2_mobile {
    margin-top: 40px;
    display: block;
  }

  /************************** MEDIA QUERY DATA-3 **************************/

  .data3-desktop {
    display: none;
  }

  .data3-mobile {
    display: block;
  }

  /**************************MEDIA QUERY DATA-4**************************/

  #data4 .st0 {
    fill: #4A4A4A;
    transition: all 0.35s linear;
  }
  
  #data4 .st1 {
    fill: #1C1C1C;
    transition: all 0.35s linear;
  }
  
  #data4 .st2 {
    font-family: SoleSans;
    transition: all 0.35s linear;
  }
  
  #data4 .st3 {
    font-size: 200px;
    transition: all 0.35s linear;
  }
  
  #data4 .st4 {
    fill: #EDEDEF;
    transition: all 0.35s linear;
  }
  
  #data4 .st5 {
    font-size: 40px;
    transition: all 0.35s linear;
  }
  
  #data4 .st6 {
    font-size: 20px;
    transition: all 0.35s linear;
  }
  
  #data4 .st7 {
    font-size: 100px;
    transition: all 0.35s linear;
  }
  
  #data4 .st8 {
    font-size: 32px;
    transition: all 0.35s linear;
  }
  
  #data4 .st9 {
    font-size: 14px;
    transition: all 0.35s linear;
  }
  
  #data4 .st10 {
    font-size: 30px;
    transition: all 0.35s linear;
  }
  
  #data4 .st11 {
    font-size: 16px;
    transition: all 0.35s linear;
  }
  
  #data4 .st12 {
    font-size: 25px;
    transition: all 0.35s linear;
  }
  
  #data4 .st13 {
    font-size: 15px;
    transition: all 0.35s linear;
  }
  
  #data4 .st14 {
    fill: #FC4646;
    transition: all 0.35s linear;
  }
  
  #data4 .st15 {
    font-size: 51px;
    transition: all 0.35s linear;
  }
  
  #data4 .st16 {
    font-size: 28px;
    transition: all 0.35s linear;
  }
  
  #data4 .st17 {
    font-size: 14px;
    transition: all 0.35s linear;
  }

  #data4 .st18 {
    font-size: 16px;
    transition: all 0.35s linear;
  }
  
  #data4 .riquadro {
    transition: all 0.35s linear;
  }
  
  .tooltip {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s linear;
  }
  
  .Uc_details,
  .Isp_details {
    opacity: 0;
    transition: 0.35s linear;
  }
  
  .data4_desktop {
    display: none;
  }

  .data4_mobile {
    display: block;
  }

  /**************************FOOTER**************************/

  #footer {
    background-color: black;
    padding: 35px 50px 35px 50px;
    margin: auto;
    margin-top: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .logo_unirsm {
    width: 50px;
    padding-right: 15px;
    padding-top: 3px;
  }

  .column-footer {
    width: 72%;
  }

  #soldi-spesi {
    font-size: 70px;
    margin: 30px 0px -20px 0px;
  }

  .tab-trattato#nazioni {
    font-size: 2.8vw;
  }


}

/* SCHERMI SMARTPHONE PICCOLI */
@media only screen and (max-width: 375px) {

  #copertina,
  .container {
    padding: 0% 5% 0% 5%;
  }

  .paragrafo-bianco,
  #paragrafo-nero,
  #info {
    font-size: var(--font-paragrafi-mobile);
  }

  .citazione p {
    font-size: 250%;
  }

  h1 {
    font-size: 70px;
    padding-top: 190px;
  }

  #info {
    font-size: 16px;
  }

  div span.titolo {
    font-size: 70px;
  }

  #container-copertina {
    background-position: 0% 0%;
    background-size: 200%;
  }

  #paragrafo-nero {
    margin-top: 30px;
  }

  h2 {
    font-size: 56px;
    
  }

  div span.titoletto {
    font-size: 56px;
  }

  #data1-tabella {

    flex-direction: column;

  }

  #data1 {
    width: 100%;
  }

  #tabella {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .voce_tabella_russia,
  .voce_tabella_usa,
  .voce_tabella_altri {
    width: 36%;
  }

  .testo_tabella {
    font-size: 100%;
  }
  
  #testoCorea {
    width: 50%;
  }
  
  .cifra_tabella {
    font-size: 87.5%;
  }


  /************************** MEDIA QUERY DATA-2 **************************/

  .data2_desktop {
    display: none;
  }

  .data2_mobile {
    margin-top: 40px;
    display: block;
  }

  /************************** MEDIA QUERY DATA-3 **************************/

  .data3-desktop {
    display: none;
  }

  .data3-mobile {
    display: block;
  }

  /**************************MEDIA QUERY DATA-4**************************/

  .data4_desktop {
    display: none;
  }

  .data4_mobile {
    display: block;
  }

  /**************************FOOTER**************************/

  #footer {
    background-color: black;
    padding: 35px 50px 35px 50px;
    margin: auto;
    margin-top: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .logo_unirsm {
    width: 50px;
    padding-right: 15px;
    padding-top: 3px;
  }

  .column-footer {
    width: 72%;
  }

  #soldi-spesi {
    font-size: 70px;
    margin: 30px 0px -20px 0px;
  }

  .tab-trattato#nazioni {
    font-size: 2.8vw;
  }


}







/* SCHERMI TABLET */
@media only screen and (max-width: 1024px) and (min-width: 600px) {

  #copertina,
  .container {
    padding: 0% 5% 0% 5%;
  }

  .paragrafo-bianco,
  #paragrafo-nero,
  #info {
    font-size: var(--font-paragrafi-mobile);
  }

  .citazione p {
    font-size: 250%;
  }

  h1 {
    font-size: 105px;
    padding-top: 190px;
  }

  #info {
    font-size: 28px;
  }

  div span.titolo {
    font-size: 105px;
  }

  #container-copertina {
    background-position: 0% 60%;
    background-size: 200%;
  }

  #paragrafo-nero {
    margin-top: 30px;
  }

  h2 {
    font-size: 56px;
    
  }

  div span.titoletto {
    font-size: 56px;
  }

  #data1-tabella {

    flex-direction: column;
    flex-wrap: wrap;

  }

  #data1 {
    width: 70%;
  }


  #tabella {
    flex-direction: row;
    flex-wrap: wrap;
    width: 70%
  }

  .voce_tabella_russia,
  .voce_tabella_usa,
  .voce_tabella_altri {
    width: 38%;
  }

 
  .voce_tabella_usa{
    border-top: 2px solid var(--bianco);
  }

  .testo_tabella {
    font-size: 100%;
  }
  
  #testoCorea {
    width: 50%;
  }
  
  .cifra_tabella {
    font-size: 87.5%;
  }


  /************************** MEDIA QUERY DATA-2 **************************/

  .data2_desktop {
    display: block;
  }

  .data2_mobile {
    display: none;
  }

  /************************** MEDIA QUERY DATA-3 **************************/

  .data3-desktop {
    display: block;
  }

  .data3-mobile {
    display: none;
  }

  /**************************MEDIA QUERY DATA-4**************************/

  .data4_desktop {
    display: block;
  }

  .data4_mobile {
    display: none;
  }

  /**************************FOOTER**************************/

  #footer {
    background-color: black;
    padding: 35px 50px 35px 50px;
    margin: auto;
    margin-top: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .logo_unirsm {
    width: 50px;
    padding-right: 15px;
    padding-top: 3px;
  }

  .column-footer {
    width: 72%;
  }

  #soldi-spesi {
    font-size: 70px;
    margin: 30px 0px -20px 0px;
  }

  .tab-trattato#nazioni {
    font-size: 1.7vw;
  }

  .tab-trattato#nazioni .tab-trattato-wrapper {
    width: 510px;
}

}