* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background-color: rgba(87, 160, 215, 0.6);
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
  pointer-events: none; }
  .bubble_content {
    margin: auto;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); }
    .bubble_content > * {
      display: block; }
    .bubble_content span {
      font-size: 0.75rem;
      opacity: .9; }
    .bubble_content b {
      font-size: 1.33rem;
      margin-top: .2em;
      margin-bottom: .1em; }
    .bubble_content small {
      letter-spacing: -0.02em;
      font-size: 0.5rem;
      text-transform: uppercase;
      opacity: .7; }
  .bubble.active {
    width: 120px !important;
    height: 120px !important;
    background-color: #57a0d7; }
    .bubble.active .bubble_content {
      opacity: 1;
      -webkit-transform: scale(1);
              transform: scale(1); }

.map {
  max-width: 700px;
  position: relative;
  margin: auto; }
  .map .sindicatos {
    text-align: left; }
    @media (min-width: 720px) {
      .map .sindicatos {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 256px; } }
    .map .sindicatos h2 {
      color: #57a0d7;
      font-size: 18px;
      font-weight: normal;
      margin-top: 0;
      margin-bottom: 2em; }
      .map .sindicatos h2 b {
        font-size: 30px;
        line-height: 28px; }
    .map .sindicatos .region {
      color: #4F4F4F; }
    .map .sindicatos .tabs {
      display: -ms-grid;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      margin-bottom: 1em;
      grid-gap: 5px; }
    .map .sindicatos .item {
      font-size: 14px;
      color: #ababab;
      line-height: 45px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 0 .5em; }
      .map .sindicatos .item:after, .map .sindicatos .item:before {
        content: " ";
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        background: #57a0d7;
        height: 1px;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out;
        width: 0; }
      .map .sindicatos .item:before {
        background: #f0f0f0;
        width: 100%; }
      .map .sindicatos .item:last-of-type:before {
        display: none; }
      .map .sindicatos .item.active {
        border-color: transparent;
        color: #57a0d7; }
        .map .sindicatos .item.active .percent, .map .sindicatos .item.active .region {
          color: inherit; }
        .map .sindicatos .item.active:after {
          width: 100%; }
  .map svg {
    width: 100%;
    max-width: 570px;
    margin-left: auto;
    display: block; }
    .map svg path {
      fill: #eee;
      stroke: #fff;
      stroke-width: 1px;
      -webkit-transition: fill .4s ease;
      transition: fill .4s ease; }
    .map svg path.active {
      fill: #d3e6f4; }