html {
    /* height: 100%; */
    width: 100%;
  }

  #network-map {
    display: unset;
    position: relative;
  }

  #logo-network {
    width: 100%;
    position: relative;
    display: block;
  }

  #logo-network img {
    width: 15vw;
    position: absolute;
    z-index: 10;
    right: 1rem;
    top: 6.5rem;
  }

  .filtering {
    position: absolute;
    display: flex;
    /* top: 8rem; */
    width: 18rem;
    padding: var(--spacing-sm);
    margin: 0 var(--spacing-sm);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    background-color: var(--color-grey);
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
  }

  .filtering h2,
  .dropbtn {
    font-family: var(--font-hegarty);
    font-size: var(--font-size-base);
    line-height: normal;
    background-color: var(--color-black);
    color: var(--color-white);
    width: fit-content;
    padding: 1px;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
  }

  .filtering>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    align-self: stretch;
  }

  .filtering>div>div {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  #network-map #map-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-yellow);

    clip-path: inset(10% 0 3% 0);
    margin-top: -10%;
    margin-bottom: -3%;
  }

  #svg-container {
    display: flex;
    width: 100%;
    padding-left: 15rem;
    flex-shrink: 0;
  }

  #svg-container svg {
    width: 100%;
    height: auto;
  }


  article.pop-up-map .background {
    display: flex;
    padding: var(--spacing-sm) var(--spacing-xsm) var(--spacing-md);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    background-color: var(--color-black);
    color: var(--color-yellow)
  }

  article.pop-up-map h2 {
    text-transform: capitalize;
  }

  article.pop-up-map .background ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xsm);
  }

  article.pop-up-map ul li {
    list-style: none;
    background-color: unset;
  }

  article button {
    /*Reset's every elements apperance*/
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    border-spacing: 0;
    color: transparent;
    padding: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
  }

  article button img {
    width: 2rem;
  }

  article>img {
    width: 2rem;
    bottom: 0;
    position: absolute;
  }


  .country,
  .country text {
    cursor: pointer;
    font-size: var(--font-size-md);
    font-family: var(--font-campton);
    font-weight: var(--font-weight-bold);
  }


  /* dropdown menu https://www.w3schools.com/howto/howto_js_dropdown.asp */
  /* Dropdown Button */
  .dropbtn {
    border: none;
    cursor: pointer;
  }

  /* Dropdown button on hover & focus */
  /* .dropbtn:hover, .dropbtn:focus {
  background-color: var(--color-white);
  color: var(--color-black);
} */

  /* The container <div> - needed to position the dropdown content */
  .mapsDropdown {
    position: relative;
    display: inline-block;
  }

  /* mapsDropdown Content (Hidden by Default) */
  .mapsDropdown-content-countries,
  .mapsDropdown-content-themes {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  /* Links inside the mapsDropdown */
  .mapsDropdown-content-countries li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }

  /* Change color of mapsDropdown links on hover */
  .mapsDropdown-content-countries li:hover {
    background-color: #ddd;
  }

  /* Show the dropdown menu (use JS to add this class to the .mapsDropdown-content-countries container when the user clicks on the dropdown button) */
  .show {
    display: block;
  }

  .hidden {
    /* display: none */
    visibility: hidden;
  }

  .none {
    display: none !important;
  }

  .network section {
    display: flex;
    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    align-self: stretch;
    border-bottom: 1px solid var(--color-black);
  }

  .network section:last-child {
    border-bottom: none;
  }

  .network section>div {
    display: inline-grid;
    row-gap: 2rem;
    column-gap: 32px;
    align-self: stretch;
    /* grid-template-rows: repeat(2,fit-content(100%)); */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .network section>div>article {
    display: flex;
    flex-direction: column;
    background-color: var(--color-yellow);
  }

  .network section>div>article>div {
    display: flex;
    flex-direction: column;
  }

  .network section>div>article>.network-infos {
    padding: var(--spacing-xsm);
    gap: 1rem;
    border-bottom: 1px solid var(--color-black);
  }

  .network section>div>article>.network-infos>div {
    display: flex;
    gap: var(--spacing-xsm);
  }

  .network section>div>article>.network-contact {
    padding: var(--spacing-xsm);
    gap: var(--spacing-xsm);
  }

  .network section>div>article h4 {
    font-family: var(--font-campton);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: normal;
    text-transform: uppercase;
  }

  .network section>div>article .network-links {
    display: flex;
    gap: 1rem;
    align-self: flex-end;
  }

  .network section>div>article .network-links>a>svg {
    width: 2rem;
    height: 2rem;
  }

  .network section>div>article .network-links>a:hover>svg {
    color: var(--color-purple);
  }

  .network section>div>article>div:last-child {
    position: relative;
    display: flex;
    padding: var(--spacing-sm) 0 var(--spacing-md);
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-2xsm);
    align-self: stretch;
    background-color: var(--color-grey);
    height: 100%;
  }

  .network section>div>article>div>h3 {
    text-align: end;
    position: relative;
    right: 0;
    top: 0;
    font-family: var(--font-bricolage);
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: normal;
  }

  .network section>div>article>div>h3 mark {
    background-color: var(--color-yellow);
    color: var(--color-black);
  }

  .network-infos>div>h6 {
    text-decoration: none;
    font-weight: var(--font-weight-bold);
  }





  /* --------------------------------------------- BAROMETER ----------------------------------*/

  #barometer-legend-top {
    width: 100%;
    padding: var(--spacing-sm);
    border-top: 1px solid var(--color-black);
    font-family: var(--font-bricolage);
    font-size: var(--font-size-md);
    line-height: 1.1;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--spacing-sm);
    align-self: stretch;
    flex-wrap: wrap;
  }

  #barometer-legend-top>div>img {
    width: var(--icon-size-md);
  }

  #barometer-legend-top div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #barometer-legend-top div:nth-child(1)>span {
    background-color: var(--color-purple);
  }

  #barometer-legend-top div:nth-child(2)>span {
    background-color: var(--color-yellow);
  }

  #barometer-legend-top div:nth-child(3)>span {
    background-color: var(--color-brown);
  }

  #barometer-legend-top div:nth-child(4)>span {
    background-color: var(--color-green);
  }

  #barometer-legend-top div:nth-child(5)>span {
    background-color: var(--color-orange);
  }

  #logo-barometer {
    width: 100%;
    position: relative;
    display: block;
    top: 13vw;
  }

  #logo-barometer img {
    width: 15vw;
    position: absolute;
    z-index: 10;
    right: 1rem;
  }

  .barometer#map-container {
    background-color: var(--color-grey);
    clip-path: inset(12% 0 4% 0);
    margin-top: -12%;
    margin-bottom: -3%;
    width: 95%;
    margin-left: 2.5%;
  }

  .barometer #svg-container {
    padding-left: 0rem;
    width: 110%;

  }

  .maps-filters-nav {
    display: flex;
    justify-content: space-evenly;
    gap: var(--spacing-sm);
    align-items: center;
    border-top: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    width: 100%;
  }

  .maps-filters-nav>div {
    position: relative;
    background-color: inherit;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    box-sizing: border-box;
    display: flex;
  }

  .maps-filters-nav div button {
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-extralight);
    color: var(--color-text-main);
    background-color: inherit;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: var(--spacing-xsm);
  }

  .maps-filters-nav div button div {
    align-self: center;
    display: flex;
  }

  .maps-filters-nav svg {
    width: var(--font-size-md);
  }

  .maps-filters-nav>div>a {
    align-self: stretch;
    padding: var(--spacing-xsm);
    padding-bottom: 1.3rem;
    cursor: pointer;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .maps-filters-nav div button:hover {
    background-color: var(--color-grey);
  }

  .maps-filters-nav>div>a:hover {
    background-color: var(--color-grey);
  }

  /* DROPDOWN */
  .maps-filters-nav>div>ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background-color: var(--color-grey);
    z-index: 10;
    list-style: decimal-leading-zero inside;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-main);
    border-top: 1px solid var(--color-black);
    padding: var(--spacing-2xsm) 0;
    min-width: max-content;
  }

  .maps-filters-nav>div>ul>li::first-letter {
    text-transform: capitalize;
  }

  .maps-filters-nav>div>ul>li {
    padding: var(--spacing-xsm) var(--spacing-xsm) var(--spacing-xsm) calc(var(--spacing-xsm) + 0.25rem);
  }

  .maps-filters-nav>div>ul>li>span {
    border-bottom: 0.5px solid var(--color-black);
    padding: 0 0 0.25rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .maps-filters-nav>div>ul>li:hover {
    background-color: var(--color-black);
    color: var(--color-white);
  }

  .maps-filters-nav>div>ul>li:hover span {
    border-bottom: 1px solid var(--color-white);
  }

  .maps-filters-nav>div>ul>li.is-selected {
    font-weight: bold;
  }

  /* END FILTERS */

  #barometer-legend {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--spacing-xsm);
    padding: var(--spacing-xsm) var(--spacing-xsm) 0;
    font-size: var(--font-size-xsm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-xsm);
  }

  #barometer-legend>div {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.625rem;
  }

  #barometer-legend img {
    width: 1rem;
    height: 1rem;
  }

  #barometer-legend .round {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
  }

  .barometer {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .barometer section {
    position: relative;
    display: inline-grid;
    padding: var(--spacing-md) var(--spacing-sm);
    row-gap: var(--spacing-sm);
    column-gap: var(--spacing-sm);
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    border-top: 1px solid var(--color-black);

  }

  .barometer section article {
    background-color: var(--color-grey);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .barometer section article>div {
    display: flex;
    position: relative;
    padding: var(--spacing-sm);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .barometer section article>div>div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xsm);
  }

  .barometer section article .bottom-color {
    display: flex;
    padding: var(--spacing-sm) 0 var(--spacing-md);
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-2xsm);
    align-self: stretch;
  }

  .sexual-rights-and-reproductive-justice {
    background-color: var(--color-purple);
  }

  .family-law {
    background-color: var(--color-yellow);
  }

  .fight-against-patriarchal-violence {
    background-color: var(--color-brown);
  }

  .economic-independence-for-all {
    background-color: var(--color-green);
  }

  .democracy-for-all {
    background-color: var(--color-orange);
  }

  .empty-theme {
    background-color: var(--color-grey);
    border: 1px solid black;
  }

  .barometer h2 {
    text-transform: capitalize;
    left: 0 !important;
    right: unset !important;
    text-align: left;
  }

  .barometer h3 {
    position: relative;
  }

  .barometer h4 {
    font-size: var(--font-size-md);
  }

  .barometer mark {
    text-align: end;
    position: relative;
    right: 0;
    top: 0;
    font-family: var(--font-bricolage);
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: normal;

    background-color: var(--color-black);
    color: var(--color-white);
  }

  .pop-up-barometer h4 {
    font-size: var(--font-size-base);
  }

  .pop-up-barometer h6 {
    text-decoration: none;
    line-height: normal;
    font-size: var(--font-size-sm);
  }

  .pop-up-barometer .section-progress,
  .pop-up-barometer .section-decline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xsm);
    list-style: inside;
    list-style-type: "— ";
  }


  article.pop-up-barometer .background {
    display: flex;
    padding: var(--spacing-sm) var(--spacing-xsm) var(--spacing-md);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xsm);
  }

  .pop-up-barometer,
  .pop-up-map {
    position: absolute;
    width: 18rem;
    z-index: 25;
  }

  .pop-up-barometer.cyprus {
    width: 15rem;
  }

  .pop-up-barometer.finland,
  .pop-up-barometer.sweden,
  .pop-up-barometer.estonia {
    width: 22rem;
  }

  .barometer article.pop-up-map .background {
    background: #F3F2ED;
  }

  .barometer article.sexual-rights-and-reproductive-justice .background {
    background: #AAAAF2;
  }

  .barometer article.family-law .background {
    background: #F3F343;
  }

  .barometer article.fight-against-patriarchal-violence .background {
    background: #DE9253;
  }

  .barometer article.women-s-economic-independence .background {
    background: #C1CA53;
  }

  .barometer article.the-shape-of-democracy-for-women-and-LGBTQIA-people .background {
    background: #FD5200;
  }

  .barometer article.pop-up-map button {
    float: right;
    /*Reset's every elements apperance*/
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    border-spacing: 0;
    color: transparent;
    padding: 0;
  }

  .barometer article.pop-up-map button img {
    height: 5vh;
  }

  .barometer article.pop-up-map h2 {
    padding-top: 5vh;
  }

  /* ---------------------------------------------- RESPONSIVE --------------------------------*/

  @media screen and (max-width: 1700px) {

    .filtering>div {
      gap: 0;
    }

    #svg-container {
      padding-left: 12rem;
    }
  }

  @media screen and (max-width: 1440px) {

    .filtering>div {
      gap: 0;
      font-size: var(--font-size-xsm);
      line-height: normal;
    }

    .filtering h2,
    .dropbtn {
      font-size: var(--font-size-sm);
      line-height: normal;
    }

    #svg-container {
      padding-left: 13rem;
    }
  }

  @media screen and (max-width: 1280px) {
    #svg-container {
      padding-left: 10rem;
    }

    .filtering {
      gap: 1rem;
      width: 16rem;
    }
  }

  @media screen and (max-width: 810px) {

    html,
    body {
      overflow-x: hidden;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #network-map {
      display: flex;
      flex-direction: column-reverse;
    }

    #logo-network,
    #logo-barometer {
      display: none;
    }

    .filtering {
      position: relative;
      margin: var(--spacing-xsm);
      width: unset;
      top: unset;
      transform: unset;
    }

    .filtering>div {
      gap: 0.5rem;
      font-size: var(--font-size-sm);
      line-height: normal;
    }

    .maps-filters-nav > div > ul > li {
      padding: var(--spacing-2xsm) var(--spacing-xsm);
    }


    #svg-container {
      margin-left: -4rem;
      width: 140%;
      padding: 0;
    }

    article.pop-up-map {
      width: -moz-available;
      position: absolute;
      left: 0 !important;
      margin: var(--spacing-sm);
      width: auto;
    }

    .network section>div {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm)
    }

    .network section {
      padding: var(--spacing-sm) var(--spacing-xsm) var(--spacing-sm);
    }

  
    /* - --- BAROMETER ---- */

    #barometer-legend-top {
      width: unset;
    }

    .barometer #svg-container {
      padding-left: 0;
      width: 140%;
    }

    #barometer-legend {
      flex-direction: column;
    }

    .maps-filters-nav {
      flex-direction: column;
      gap: 0;
    }

    .maps-filters-nav>div:first-child {
      border-bottom: 1px solid var(--color-black);
    }

    .maps-filters-nav>div {
      width: 100%;
    }

    .maps-filters-nav div button {
      justify-content: center;
      width: 100%;
    }

    .barometer section {
      display: flex;
      flex-direction: column;
      padding: var(--spacing-md) var(--spacing-xsm);
    }

    .pop-up-barometer {
      left: 0 !important;
      margin: var(--spacing-sm);
      width: auto !important;
    }

    /* network */

    .country text {
      font-size: calc(var(--font-size-md) * 1.3);
      
    }
  }