/* Mapa quebra-cabeça — mantém o mesmo posicionamento do mapa original.
   O float:right é importante: a lista de representantes continua à esquerda,
   exatamente como acontecia com o <img align="right"> original. */

.eletele-mapa-puzzle {
  position: relative;
  float: right;
  width: 507px;
  height: 503px;
  margin: 0 0 10px 12px;
  overflow: visible;
  isolation: isolate;
}

.eletele-puzzle-peca {
  position: absolute;
  width: 169px;
  height: 168px;
  background-image: url("../img/Mapa_Representantes_Brasil.jpg");
  background-repeat: no-repeat;
  background-size: 507px 503px;
  opacity: 1;
  box-sizing: border-box;
  pointer-events: none;
}

.p1{left:0;top:0;background-position:0 0}
.p2{left:169px;top:0;background-position:-169px 0}
.p3{left:338px;top:0;background-position:-338px 0}
.p4{left:0;top:168px;background-position:0 -168px}
.p5{left:169px;top:168px;background-position:-169px -168px}
.p6{left:338px;top:168px;background-position:-338px -168px}
.p7{left:0;top:336px;background-position:0 -336px}
.p8{left:169px;top:336px;background-position:-169px -336px}
.p9{left:338px;top:336px;background-position:-338px -336px}

.eletele-mapa-puzzle.animar .eletele-puzzle-peca{opacity:0}

.eletele-mapa-puzzle.animar .p1{animation:p1 2.9s cubic-bezier(.22,.7,.25,1) 0s both}
.eletele-mapa-puzzle.animar .p2{animation:p2 2.9s cubic-bezier(.22,.7,.25,1) .08s both}
.eletele-mapa-puzzle.animar .p3{animation:p3 2.9s cubic-bezier(.22,.7,.25,1) .16s both}
.eletele-mapa-puzzle.animar .p4{animation:p4 2.9s cubic-bezier(.22,.7,.25,1) .24s both}
.eletele-mapa-puzzle.animar .p5{animation:p5 2.9s cubic-bezier(.22,.7,.25,1) .32s both}
.eletele-mapa-puzzle.animar .p6{animation:p6 2.9s cubic-bezier(.22,.7,.25,1) .40s both}
.eletele-mapa-puzzle.animar .p7{animation:p7 2.9s cubic-bezier(.22,.7,.25,1) .48s both}
.eletele-mapa-puzzle.animar .p8{animation:p8 2.9s cubic-bezier(.22,.7,.25,1) .56s both}
.eletele-mapa-puzzle.animar .p9{animation:p9 2.9s cubic-bezier(.22,.7,.25,1) .64s both}

@keyframes p1{from{opacity:0;transform:translate(-35px,-28px) rotate(-5deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes p2{from{opacity:0;transform:translateY(-38px) rotate(4deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes p3{from{opacity:0;transform:translate(35px,-28px) rotate(5deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes p4{from{opacity:0;transform:translateX(-42px) rotate(-4deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes p5{from{opacity:0;transform:translateY(18px) rotate(-3deg) scale(.97)}to{opacity:1;transform:none}}
@keyframes p6{from{opacity:0;transform:translateX(42px) rotate(4deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes p7{from{opacity:0;transform:translate(-35px,28px) rotate(5deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes p8{from{opacity:0;transform:translateY(38px) rotate(-4deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes p9{from{opacity:0;transform:translate(35px,28px) rotate(-5deg) scale(.96)}to{opacity:1;transform:none}}

@media (max-width:780px){
  .eletele-mapa-puzzle{float:none;margin:0 auto 10px;width:507px;max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .eletele-puzzle-peca{opacity:1!important;transform:none!important;animation:none!important}
}