ActesCitoyens/assets/app/frontend/scss/carto-carte.scss

#carto-carte {
  margin-top: 75px;

  .title-carte {
    color: $green;
    font-size: 5.0rem;
    font-family: FranklinGothic;
    text-align: center;
  }

  .row-contrib {
    color: $green;
    font-size: 2.0rem;
    font-family: FranklinGothic;
    margin-top: 50px;

    .revolt, .dream {
      padding-top: 25px;
      padding-left: 0;
    }

    .project-boost, .project-insp {
      padding-top: 15px;
      padding-left: 0;
    }
  }

  .help-legend {
    text-align: center;
    color: #828282;
    font-family: FranklinGothic;
    margin-top: 50px;
    font-size: 20px;
  }

  .map {
    border: 2px solid $green;
    margin-top: 20px;
    padding: 10px 10px 40px;
    position: relative;

    .img-map {
      display: none;

      img {
        width: 7.5rem;

        @include desktop-only {
          width: 5.8rem;
        }

        &:hover {
          cursor: pointer;
        }
      }
    }

    .img-vosges {
      display: block;
      position: absolute;
      top: 17%;
      left: 35%;
    }

    .img-belfort {
      display: block;
      position: absolute;
      top: 33%;
      left: 45%;
      width: 160px;

      @include desktop-only {
        width: 110px;
      }
    }

    .img-hericourt {
      display: block;
      position: absolute;
      top: 44%;
      left: 21%;
      width: 160px;

      @include desktop-only {
        top: 43%;
        left: 19%;
        width: 110px;
      }
    }

    .img-montbeliard {
      display: block;
      position: absolute;
      top: 69%;
      left: 29%;
      width: 160px;

      @include desktop-only {
        width: 110px;
      }
    }

    .img-sud_territoire {
      display: block;
      position: absolute;
      top: 54%;
      left: 67%;
    }
  }
}