@font-face {
    font-family: "HR";
  
    src: url("../fonts/HR.svg") format("svg"),
      url("../fonts/HR.ttf") format("truetype"), 
      url("../fonts/HR.woff") format("woff"), 
      url("../fonts/HR.woff2") format("woff2"); 
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: "HB";
  
    src: url("../fonts/HB.svg") format("svg"), 
      url("../fonts/HB.ttf") format("truetype"), 
      url("../fonts/HB.woff") format("woff"), 
      url("../fonts/HB.woff2") format("woff2"); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SR";
  
    src: url("../fonts/SR.svg") format("svg"), 
      url("../fonts/SR.ttf") format("truetype"), 
      url("../fonts/SR.woff") format("woff"), 
      url("../fonts/SR.woff2") format("woff2"); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SRI";
  
    src: url("../fonts/SRI.svg") format("svg"), 
      url("../fonts/SRI.ttf") format("truetype"), 
      url("../fonts/SRI.woff") format("woff"), 
      url("../fonts/SRI.woff2") format("woff2"); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SB";
  
    src: url("../fonts/SB.svg") format("svg"), 
      url("../fonts/SB.ttf") format("truetype"), 
      url("../fonts/SB.woff") format("woff"), 
      url("../fonts/SB.woff2") format("woff2"); 
    font-weight: normal;
    font-style: normal;
}

*{
    box-sizing: border-box;
}

body{
    font-family: "HR", Arial, Helvetica, sans-serif;
    background-color: #F5F5F5;
    margin: 0;
    padding: 0;
}

/* GENERAL PRESETS */
main {
    position: fixed;
    z-index: 1;
}

/* Animations */
@keyframes dissolve{
    from{ opacity: 0;}
    to{ opacity: 1;}
  }
  
  @keyframes dissolve-up{
    from{ opacity: 0; transform: translateY(200px);}
    to{ opacity: 1; transform: translateY(0);}
  }
  
  @keyframes dissolve-scale{
    from{ opacity: 0; transform: scale(.7);}
    to{ opacity: 1; transform: scale(1);}
  }

  @keyframes dissolve-pins{
      0%{ opacity: 0; transform: scale(0);}
      50%{ opacity: 0; transform: scale(.3);}
      100%{ opacity: 1; transform: scale(1);}
  }

  @keyframes dissolve-percursos{
    0%{ opacity: 0; transform: scale(0);}
    50%{ opacity: 0; transform: scale(.8);}
    100%{ opacity: 1; transform: scale(1);}
}

@keyframes slide-dropdown{
    from{opacity: 0; transform: translateX(152px);}
    to{opacity: 1; transform: translateX(0);}
}

/* Menu Top */
.menu {
    height: 51px;
    width: 100%;
    position: fixed;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    z-index: 1;
    border-bottom: 2px solid #000;
    user-select: none;
}

.menu-left {
    width: 50%;
    display: flex;
    align-items: center;
    height: 51px;
    justify-content: flex-start;
    user-select: none;
}

.menu-left a {
    color: #000;
    text-decoration: none;
}

.menu-left a:nth-child(2):hover, .menu-left a:nth-child(3):hover {
    text-decoration: underline;
}

.logo {
    font-family: "HB", Arial, Helvetica, sans-serif;
    font-size: 28px;
    text-transform: uppercase;
    padding-left: 20px;
    padding-right: 15px;
    line-height: 100%;
    height: 28px;
}

.arquivo {
    font-family: "HR", Arial, Helvetica, sans-serif;
    font-size: 28px;
    text-transform: uppercase;
    padding-right: 15px;
    line-height: 100%;
    height: 28px;
}

.sobre {
    font-family: "HR", Arial, Helvetica, sans-serif;
    font-size: 28px;
    text-transform: uppercase;
    line-height: 100%;
    height: 28px;
}

.menu-right {
    width: 50%;
    display: flex;
    align-items: center;
    height: 51px;
    justify-content: flex-end;
}

#clockbox {
    font-family: "HR";
    font-size: 28px;
    text-transform: uppercase;
    padding-right: 15px;
    padding-top: 1px;
    height: 28px;
    line-height: 100%;
}

.mail_icon {
    padding-right: 15px;
    padding-top: 4px;
}

.mail_icon:hover{
    filter: invert(39%) sepia(89%) saturate(542%) hue-rotate(347deg) brightness(93%) contrast(101%);
}

.facebook-icon {
    padding-right: 15px;
    padding-top: 4px;
}

.facebook-icon:hover{
    filter: invert(10%) sepia(100%) saturate(7496%) hue-rotate(235deg) brightness(99%) contrast(92%);
}

.cmlisboa_logo {
    padding-right: 20px;
    padding-top: 4px;
}

.navbar-mobile{
    display: none;
}

.dropbtn{
    display: none;
}

@media (max-width: 1024px){
    .arquivo, .sobre, .menu-right{
        display: none;
    }

    .dropbtn {
        padding-right: 20px;
        background: none;
        border: none;
        cursor: pointer;
        display: block;
        font-family: "HR", Arial, Helvetica, sans-serif;
        font-size: 28px;
        line-height: 100%;
        color: #000;
        text-transform: uppercase;
    }
      
      .dropdown {
        position: fixed;
        display: inline-block;
        right: 0;
        z-index: 11;
        top: 11px;
      }
      
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        overflow: auto;
        box-shadow: 3px 4px 0px #000;
        z-index: -64;
        right: 10px;
        text-align: center;
        border: 2px solid #000;
        top: 37.5px;
        animation: slide-dropdown .3s ease-out;
      }
      
      .dropdown-content a {
        color: black;
        padding: 10px 16px;
        text-decoration: none;
        display: block;
        text-align: center;
        border-top: 2px solid #000;
      }

      .dropdown-content a:nth-child(1){
          border-top: none;
      }

      .arquivo-mobile, .sobre-mobile {
        font-family: "HR";
        font-size: 22px;
        line-height: 100%;
        text-transform: uppercase;
        color: #000;
    }
      
    .dropdown a:hover{
        background-color: #BDBDBD;
    }
      
    .show{
        display: block;
    }
}

@media (max-width: 480px){
    .menu {
        height: 40px;
    }

    .menu-left {
        height: 40px;
    }

    .logo {
        font-size: 22px;
        height: 20px;
    }

    .dropdown {
        top: 9px;
        z-index: 11;
    }

    .dropbtn {
        font-size: 22px;
    }

    .dropdown-content {
        top: 28.5px;
    }
}

/* Menu Buttons Bottom */
.menu-bottom {
    width: 100%;
    height: 71px;
    background-color: #4F4F4F;
    position: fixed;
    bottom: 0;
    display: flex;
    z-index: -2;
    align-items: center;
    border-top: 2px solid #000;
    user-select: none;
    justify-content: flex-start;
    align-items: center;
}

.button-19out {
    padding-left: 85px;
}

.button-19out img {
    height: 37px;
    user-select: none;
}

.button-20out, .button-21out, .button-22out,
.button-23out, .button-24out, .button-25out {
    padding-left: 25px;
}

.button-20out img {
    height: 37px;
    user-select: none;
    position: relative;
}

.button-21out img {
    height: 37px;
    user-select: none;
    position: relative;
}

.button-22out img {
    height: 37px;
    user-select: none;
    position: relative;
}

.button-23out img {
    height: 37px;
    user-select: none;
    position: relative;
}

.button-24out img {
    height: 37px;
    user-select: none;
    position: relative;
}

.button-25out img {
    height: 37px;
    user-select: none;
    position: relative;
}

.button-19out img:hover{
    content: url(../images/index/buttons/Button_19OUT_black.png);
    height: 37px;
    position: relative;
}

.button-20out img:hover{
    content: url(../images/index/buttons/Button_20OUT_black.png);
    height: 37px;
    position: relative;
}

.button-21out img:hover{
    content: url(../images/index/buttons/Button_21OUT_black.png);
    height: 37px;
    position: relative;
}

.button-22out img:hover{
    content: url(../images/index/buttons/Button_22OUT_black.png);
    height: 37px;
    position: relative;
}

.button-23out img:hover{
    content: url(../images/index/buttons/Button_23OUT_black.png);
    height: 37px;
    position: relative;
}

.button-24out img:hover{
    content: url(../images/index/buttons/Button_24OUT_black.png);
    height: 37px;
    position: relative;
}

.button-25out img:hover{
    content: url(../images/index/buttons/Button_25OUT_black.png);
    height: 37px;
    position: relative;
}

.button-croco {
    position: absolute;
    right: 21px;
    user-select: none;
}

.button-croco img {
    height: 37px;
}

.button-croco img:hover{
    content: url(../images/index/buttons/croco_icon_open.png);
    height: 37px;
    position: relative;
}

@media (max-width: 1024px){
    .menu-bottom{
        display: none;
    }
}

/* MARQUEE ANIMATIONS */
#marquee-vertical {
    border-right: 2px solid black;
    overflow: hidden;
    white-space: nowrap;
    width: 48px;
    background: #f5f5f5;
    position: absolute;
    user-select: none;
}
  
#marquee-text-1 {
    content: url(../images/index/marqueetext/marqueetext_vertical.svg);
    padding-left: 8px;
    display: inline-block;
    -webkit-animation:marquee 120s linear infinite;
    -moz-animation:marquee 120s linear infinite;
    -ms-animation:marquee 120s linear infinite;
    -o-animation:marquee 120s linear infinite;
    animation:marquee 120s linear infinite;
}

@-webkit-keyframes marquee {
    from {
      -webkit-transform: translateY(0%);
    }
    to {
      -webkit-transform: translateY(-50%);
    }
  }
  
@keyframes marquee {
    from {
      transform: translateY(0%);
    }
    to {
      transform: translateY(-50%);
    }
  }

  #marquee-horizontal {
    display: none;
    border-top: 2px solid black;
    overflow: hidden;
    white-space: nowrap;
    height: 48px;
    background: #f5f5f5;
    user-select: none;
}
  
#marquee-text-2 {
    content: url(../images/index/marqueetext/marqueetext_horizontal.svg);
    padding-bottom: 3px;
    padding-top: 7px;
    position: fixed;
    bottom: 0;
    border-top: 2px solid #000;
    background: #f5f5f5;
    display: inline-block;
    -webkit-animation:marquee2 50s linear infinite;
    -moz-animation:marquee2 50s linear infinite;
    -ms-animation:marquee2 50s linear infinite;
    -o-animation:marquee2 50s linear infinite;
    animation:marquee2 50s linear infinite;
}

@-webkit-keyframes marquee2 {
    from {
      -webkit-transform: translateX(0%);
    }
    to {
      -webkit-transform: translateX(-50%);
    }
  }

  @-webkit-keyframes marquee3 {
    from {
      -webkit-transform: translateX(0%);
    }
    to {
      -webkit-transform: translateX(-89.5%);
    }
  }
  
  @keyframes marquee2 {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes marquee3 {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-89.5%);
    }
  }

  @media (max-width: 1024px){
      #marquee-horizontal{
          display: block;
          user-select: none;
      }

      #marquee-vertical{
          display: none;
      }
  }

  @media (max-width: 480px){
    #marquee-horizontal {
        border-top: 2px solid black;
        overflow: hidden;
        white-space: nowrap;
        width: 100vw;
        height: 25px;
        background: #f5f5f5;
        position: absolute;
        bottom: 0;
        transform: translateY(100vh);
        user-select: none;
    }
      
    #marquee-text-2 {
        content: url(../images/index/marqueetext/marqueetext_horizontal.svg);
        padding-bottom: 4px;
        padding-top: 7px;
        position: fixed;
        bottom: 0;
        width: 900%;
        border: none;
        background: none;
        display: inline-block;
        -webkit-animation:marquee3 70s linear infinite;
        -moz-animation:marquee3 70s linear infinite;
        -ms-animation:marquee3 70s linear infinite;
        -o-animation:marquee3 70s linear infinite;
        animation:marquee3 70s linear infinite;
    }
  }

  @media (max-width: 320px){
      #marquee-text-2{
          padding-bottom: 5.5px;
      }
  }

/* PÁGINA MAPA PREÂMBULO */
.mapa-sobre {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    user-select: none;
}

.mapa-sobre-tablet{
    display: none;
}

.rio-pre {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    user-select: none;
}

.rio-pre img {
    height: 100vh;
    object-fit: cover;
    user-select: none;
}

.background-grid{
    width: 100%;
    height: 100%;
    user-select: none;
}

.background-grid img {
    height: 100%;
    width: 100%;
    position: fixed;
    object-fit: cover;
    z-index: -2;
    user-select: none;
}

img.mancha-alvalade-sobre {
    width: 461.23px;
    height: 500.56px;
    position: absolute;
    top: 170.98px;
    right: 1018.66px;
    animation: dissolve-scale .7s ease;
    user-select: none;
    z-index: 1;
}

img.nome-alvalade-sobre {
    width: 108px;
    height: 30px;
    position: absolute;
    top: 377px;
    right: 1246px;
    border: 1.5px solid #4f4f4f;
    animation: dissolve-scale .7s ease;
    user-select: none;
    z-index: 1;
}

img.mancha-marvila-sobre {
    width: 745px;
    height: 739px;
    position: absolute;
    top: 172px;
    right: 282px;
    animation: dissolve-scale .7s ease;
    user-select: none;
    z-index: 1;
}

img.nome-marvila-sobre {
    width: 97px;
    height: 30px;
    position: absolute;
    top: 703px;
    right: 486px;
    border: 1.5px solid #4f4f4f;
    animation: dissolve-scale .7s ease;
    user-select: none;
    z-index: 1;
}

img.nome-chelas-sobre {
    width: 86px;
    height: 30px;
    position: absolute;
    top: 456px;
    right: 705px;
    border: 1.5px solid #4f4f4f;
    animation: dissolve-scale .7s ease;
    user-select: none;
    z-index: 1;
}

.pre-03 {
    width: 100px;
    height: 75px;
    background: #a99efa;
    position: absolute;
    top: 1065px;
    right: 2363px;
    z-index: 0;
    animation: dissolve-pins .7s ease 2.6s backwards;
    user-select: none;
}

.pre-03:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_03.jpg);
}

.pre-02 {
    width: 100px;
    height: 75px;
    background: #8f8f8f;
    position: absolute;
    top: 1027px;
    right: 2337px;
    z-index: 0;
    animation: dissolve-pins .7s ease 1.2s backwards;
    user-select: none;
}

.pre-02:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_02.jpg);
}

.pre-04 {
    width: 100px;
    height: 56px;
    background: #686061;
    position: absolute;
    top: 982px;
    right: 2058px;
    z-index: 2;
    animation: dissolve-pins .7s ease 4s backwards;
    user-select: none;
}

.pre-04:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_04.jpg);
}

.pre-01 {
    width: 100px;
    height: 56px;
    background: #a1c6cf;
    position: absolute;
    top: 372px;
    right: 2158px;
    z-index: 2;
    animation: dissolve-pins .7s ease 3.9s backwards;
    user-select: none;
}

.pre-01:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_01.jpg);
}

.pre-05 {
    width: 100px;
    height: 56px;
    background: #58413f;
    position: absolute;
    top: 530px;
    right: 1787px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1s backwards;
    user-select: none;
}

.pre-05:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_05.jpg);
}

.pre-06 {
    width: 100px;
    height: 80px;
    background: #a6bad8;
    position: absolute;
    top: 566px;
    right: 1847px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.9s backwards;
    user-select: none;
}

.pre-06:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_06.jpg);
}

.pre-07 {
    width: 100px;
    height: 56px;
    background: #7d5d64;
    position: absolute;
    top: 620px;
    right: 1873px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.8s backwards;
    user-select: none;
}

.pre-07:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_07.jpg);
}

.pre-08 {
    width: 100px;
    height: 56px;
    background: #c3997a;
    position: absolute;
    top: 654px;
    right: 1823px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.1s backwards;
    user-select: none;
}

.pre-08:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_08.jpg);
}

.pre-15 {
    width: 100px;
    height: 56px;
    background: #eadcc1;
    position: absolute;
    top: 690px;
    right: 1498px;
    z-index: 2;
    animation: dissolve-pins .7s ease 3s backwards;
    user-select: none;
}

.pre-15:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_15.jpg);
}

.pre-16 {
    width: 100px;
    height: 56px;
    background: #cfad9a;
    position: absolute;
    top: 785px;
    right: 1468px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.9s backwards;
    user-select: none;
}

.pre-16:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_16.jpg);
}

.pre-17 {
    width: 100px;
    height: 80px;
    background: #0774a6;
    position: absolute;
    top: 831px;
    right: 1525px;
    z-index: 2;
    animation: dissolve-pins 2.6s ease;
    user-select: none;
}

.pre-17:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_17.jpg);
}

.pre-18 {
    width: 100px;
    height: 56px;
    background: #a78699;
    position: absolute;
    top: 900px;
    right: 1462px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.5s backwards;
    user-select: none;
}

.pre-18:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_18.jpg);
}

.pre-19 {
    width: 100px;
    height: 56px;
    background: #a69ea0;
    position: absolute;
    top: 938px;
    right: 1434px;
    z-index: 2;
    animation: dissolve-pins .7s ease 3.4s backwards;
    user-select: none;
}

.pre-19:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_19.jpg);
}

.pre-20 {
    width: 100px;
    height: 56px;
    background: #653cb3;
    position: absolute;
    top: 1015px;
    right: 1490px;
    z-index: 2;
    animation: dissolve-pins .7s ease 4.2s backwards;
    user-select: none;
}

.pre-20:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_20.jpg);
}

.pre-21 {
    width: 100px;
    height: 56px;
    background: #c3ebfd;
    position: absolute;
    top: 1030px;
    right: 1344px;
    z-index: 0;
    animation: dissolve-pins .7s ease 3.6s backwards;
    user-select: none;
}

.pre-21:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_21.jpg);
}

.pre-22 {
    width: 100px;
    height: 75px;
    background: #aba3b2;
    position: absolute;
    top: 1058px;
    right: 1294px;
    z-index: 0;
    animation: dissolve-pins .7s ease 3s backwards;
    user-select: none;
}

.pre-22:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_22.jpg);
}

.pre-14 {
    width: 100px;
    height: 75px;
    background: #a69fb7;
    position: absolute;
    top: 647px;
    right: 1368px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.9s backwards;
    user-select: none;
}

.pre-14:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_14.jpg);
}

.pre-32 {
    width: 100px;
    height: 56px;
    background: #817979;
    position: absolute;
    top: 736px;
    right: 1261px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.3s backwards;
    user-select: none;
}

.pre-32:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_32.jpg);
}

.pre-30 {
    width: 100px;
    height: 56px;
    background: #dbcfd6;
    position: absolute;
    top: 686px;
    right: 1230px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.2s backwards;
    user-select: none;
}

.pre-30:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_30.jpg);
}

.pre-33 {
    width: 100px;
    height: 56px;
    background: #22182d;
    position: absolute;
    top: 771px;
    right: 1232px;
    z-index: 2;
    animation: dissolve-pins .7s ease 3.1s backwards;
    user-select: none;
}

.pre-33:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_33.jpg);
}

.pre-28 {
    width: 100px;
    height: 56px;
    background: #0c0f1e;
    position: absolute;
    top: 593px;
    right: 1147px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.4s backwards;
    user-select: none;
}

.pre-28:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_28.jpg);
}

.pre-29 {
    width: 100px;
    height: 56px;
    background: #7c9069;
    position: absolute;
    top: 621px;
    right: 1102px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.1s backwards;
    user-select: none;
}

.pre-29:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_29.jpg);
}

.pre-31 {
    width: 100px;
    height: 80px;
    background: #7daefa;
    position: absolute;
    top: 631px;
    right: 1165px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.8s backwards;
    user-select: none;
}

.pre-31:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_31.jpg);
}

.pre-25 {
    width: 100px;
    height: 56px;
    background: #ff89de;
    position: absolute;
    top: 528px;
    right: 1171px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.3s backwards;
    user-select: none;
}

.pre-25:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_25.jpg);
}

.pre-26 {
    width: 100px;
    height: 56px;
    background: #d3b7a9;
    position: absolute;
    top: 515px;
    right: 1037px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.7s backwards;
    user-select: none;
}

.pre-26:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_26.jpg);
}

.pre-24 {
    width: 100px;
    height: 75px;
    background: #fabe96;
    position: absolute;
    top: 440px;
    right: 1132px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.6s backwards;
    user-select: none;
}

.pre-24:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_24.jpg);
}

.pre-27 {
    width: 100px;
    height: 56px;
    background: #cf7f97;
    position: absolute;
    top: 500px;
    right: 1115px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2s backwards;
    user-select: none;
}

.pre-27:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_27.jpg);
}

.pre-13 {
    width: 100px;
    height: 75px;
    background: #542c2e;
    position: absolute;
    top: 467px;
    right: 1306px;
    z-index: 2;
    animation: dissolve-pins .7s ease .7s backwards;
    user-select: none;
}

.pre-13:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_13.jpg);
}

.pre-12 {
    width: 100px;
    height: 56px;
    background: #46592d;
    position: absolute;
    top: 374px;
    right: 1398px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.7s backwards;
    user-select: none;
}

.pre-12:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_12.jpg);
}

.pre-23 {
    width: 100px;
    height: 75px;
    background: #9d7918;
    position: absolute;
    top: 344px;
    right: 1165px;
    z-index: 2;
    animation: dissolve-pins .7s ease 3.3s backwards;
    user-select: none;
}

.pre-23:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_23.jpg);
}

.pre-10 {
    width: 100px;
    height: 80px;
    background: #78a7c4;
    position: absolute;
    top: 207px;
    right: 1398px;
    z-index: 2;
    animation: dissolve-pins .7s ease .9s backwards;
    user-select: none;
}

.pre-10:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_10.jpg);
}

.pre-11 {
    width: 100px;
    height: 56px;
    background: #aa8a70;
    position: absolute;
    top: 259px;
    right: 1434px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.7s backwards;
    user-select: none;
}

.pre-11:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_11.jpg);
}

.pre-09 {
    width: 100px;
    height: 56px;
    background: #7c5e6c;
    position: absolute;
    top: 169px;
    right: 1526px;
    z-index: 2;
    animation: dissolve-pins .7s ease 3.8s backwards;
    user-select: none;
}

.pre-09:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_09.jpg);
}

.pre-34 {
    width: 100px;
    height: 75px;
    background: #ababab;
    position: absolute;
    top: 222px;
    right: 1025px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.4s backwards;
    user-select: none;
}

.pre-34:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_34.jpg);
}

.pre-35 {
    width: 100px;
    height: 75px;
    background: #422c35;
    position: absolute;
    top: 733px;
    right: 997px;
    z-index: 2;
    animation: dissolve-pins .7s ease 2.2s backwards;
    user-select: none;
}

.pre-35:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_35.jpg);
}

.pre-36 {
    width: 100px;
    height: 75px;
    background: #808080;
    position: absolute;
    top: 1060px;
    right: 997px;
    z-index: 0;
    animation: dissolve-pins .7s ease 3.7s backwards;
    user-select: none;
}

.pre-36:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_36.jpg);
}

.pre-38 {
    width: 100px;
    height: 75px;
    background: #cbcbcb;
    position: absolute;
    top: 1072px;
    right: 863px;
    z-index: 0;
    animation: dissolve-pins .7s ease 2.1s backwards;
    user-select: none;
}

.pre-38:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_38.jpg);
}

.pre-37 {
    width: 100px;
    height: 58px;
    background: #ddc6aa;
    position: absolute;
    top: 1048px;
    right: 823px;
    z-index: 0;
    animation: dissolve-pins .7s ease .8s backwards;
    user-select: none;
}

.pre-37:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_37.jpg);
}

.pre-41 {
    width: 100px;
    height: 80px;
    background: #5b6b98;
    position: absolute;
    top: 970px;
    right: 681px;
    z-index: 2;
    animation: dissolve-pins .7s ease 3.2s backwards;
    user-select: none;
}

.pre-41:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_41.jpg);
}

.pre-39 {
    width: 100px;
    height: 56px;
    background: #4f5f38;
    position: absolute;
    top: 185px;
    right: 665px;
    z-index: 2;
    animation: dissolve-pins .7s ease 1.2s backwards;
    user-select: none;
}

.pre-39:hover{
    z-index: 100;
    transform: scale(3);
    content: url(../images/preambulo/imagens/preamb_39.jpg);
}


@media (max-width: 1920px){
    img.mancha-alvalade-sobre {
        width: 277.88px;
        height: 301.58px;
        position: absolute;
        top: 99.56px;
        right: 494.77px;
    }

    img.nome-alvalade-sobre {
        width: 108px;
        height: 30px;
        position: absolute;
        top: 211px;
        right: 599px;
        border: 1.5px solid #4f4f4f;
    }

    img.mancha-marvila-sobre {
        width: 451px;
        height: 445px;
        position: absolute;
        top: 101px;
        right: 50px;
    }

    img.nome-marvila-sobre {
        width: 97px;
        height: 30px;
        position: absolute;
        top: 414px;
        right: 152px;
        border: 1.5px solid #4f4f4f;
    }

    img.nome-chelas-sobre {
        width: 86px;
        height: 30px;
        position: absolute;
        top: 256px;
        right: 299px;
        border: 1.5px solid #4f4f4f;
    }

    .pre-03 {
        width: 60px;
        height: 45px;
        background: #a99efa;
        position: absolute;
        top: 696px;
        right: 1304px;
        z-index: 0;
    }

    .pre-02 {
        width: 60px;
        height: 45px;
        background: #8f8f8f;
        position: absolute;
        top: 678px;
        right: 1289px;
        z-index: 0;
    }

    .pre-04 {
        width: 60px;
        height: 34px;
        background: #686061;
        position: absolute;
        top: 589px;
        right: 1115px;
        z-index: 2;
    }

    .pre-01 {
        width: 60px;
        height: 35px;
        background: #a1c6cf;
        position: absolute;
        top: 220px;
        right: 1181px;
        z-index: 2;
    }

    .pre-05 {
        width: 60px;
        height: 33px;
        background: #58413f;
        position: absolute;
        top: 316px;
        right: 958px;
        z-index: 2;
    }

    .pre-06 {
        width: 60px;
        height: 48px;
        background: #a6bad8;
        position: absolute;
        top: 337px;
        right: 993px;
        z-index: 2;
    }

    .pre-07 {
        width: 60px;
        height: 32px;
        background: #7d5d64;
        position: absolute;
        top: 371px;
        right: 1010px;
        z-index: 2;
    }

    .pre-08 {
        width: 60px;
        height: 36px;
        background: #c3997a;
        position: absolute;
        top: 389px;
        right: 979px;
        z-index: 2;
    }

    .pre-15 {
        width: 60px;
        height: 31px;
        background: #eadcc1;
        position: absolute;
        top: 413px;
        right: 783px;
        z-index: 2;
    }

    .pre-16 {
        width: 60px;
        height: 34px;
        background: #cfad9a;
        position: absolute;
        top: 470px;
        right: 767px;
        z-index: 2;
    }

    .pre-17 {
        width: 60px;
        height: 49px;
        background: #0774a6;
        position: absolute;
        top: 497px;
        right: 799px;
        z-index: 2;
    }

    .pre-18 {
        width: 60px;
        height: 32px;
        background: #a78699;
        position: absolute;
        top: 540px;
        right: 762px;
        z-index: 2;
    }

    .pre-19 {
        width: 60px;
        height: 36px;
        background: #a69ea0;
        position: absolute;
        top: 560px;
        right: 745px;
        z-index: 2;
    }

    .pre-20 {
        width: 60px;
        height: 33px;
        background: #653cb3;
        position: absolute;
        top: 628px;
        right: 779px;
        z-index: 2;
    }

    .pre-21 {
        width: 60px;
        height: 35px;
        background: #c3ebfd;
        position: absolute;
        top: 680px;
        right: 691px;
        z-index: 0;
    }

    .pre-22 {
        width: 60px;
        height: 44px;
        background: #aba3b2;
        position: absolute;
        top: 695px;
        right: 660px;
        z-index: 0;
    }

    .pre-14 {
        width: 60px;
        height: 46px;
        background: #a69fb7;
        position: absolute;
        top: 386px;
        right: 704px;
        z-index: 2;
    }

    .pre-32 {
        width: 60px;
        height: 33px;
        background: #817979;
        position: absolute;
        top: 441px;
        right: 642px;
        z-index: 2;
    }

    .pre-30 {
        width: 60px;
        height: 33px;
        background: #dbcfd6;
        position: absolute;
        top: 410px;
        right: 620px;
        z-index: 2;
    }

    .pre-33 {
        width: 60px;
        height: 33px;
        background: #22182d;
        position: absolute;
        top: 462px;
        right: 624px;
        z-index: 2;
    }

    .pre-28 {
        width: 60px;
        height: 32px;
        background: #0c0f1e;
        position: absolute;
        top: 355px;
        right: 573px;
        z-index: 2;
    }

    .pre-29 {
        width: 60px;
        height: 32px;
        background: #7c9069;
        position: absolute;
        top: 371px;
        right: 544px;
        z-index: 2;
    }

    .pre-31 {
        width: 60px;
        height: 49px;
        background: #7daefa;
        position: absolute;
        top: 376px;
        right: 583px;
        z-index: 2;
    }

    .pre-25 {
        width: 60px;
        height: 31px;
        background: #ff89de;
        position: absolute;
        top: 316px;
        right: 585px;
        z-index: 2;
    }

    .pre-26 {
        width: 60px;
        height: 36px;
        background: #d3b7a9;
        position: absolute;
        top: 306px;
        right: 505px;
        z-index: 2;
    }

    .pre-24 {
        width: 60px;
        height: 45px;
        background: #fabe96;
        position: absolute;
        top: 261px;
        right: 564px;
        z-index: 2;
    }

    .pre-27 {
        width: 60px;
        height: 32px;
        background: #cf7f97;
        position: absolute;
        top: 298px;
        right: 548px;
        z-index: 2;
    }

    .pre-13 {
        width: 60px;
        height: 45px;
        background: #542c2e;
        position: absolute;
        top: 278px;
        right: 667px;
        z-index: 2;
    }

    .pre-12 {
        width: 60px;
        height: 34px;
        background: #46592d;
        position: absolute;
        top: 222px;
        right: 724px;
        z-index: 2;
    }

    .pre-23 {
        width: 60px;
        height: 46px;
        background: #9d7918;
        position: absolute;
        top: 203px;
        right: 583px;
        z-index: 2;
    }

    .pre-10 {
        width: 60px;
        height: 47px;
        background: #78a7c4;
        position: absolute;
        top: 122px;
        right: 724px;
        z-index: 2;
    }

    .pre-11 {
        width: 60px;
        height: 34px;
        background: #aa8a70;
        position: absolute;
        top: 153px;
        right: 745px;
        z-index: 2;
    }

    .pre-09 {
        width: 60px;
        height: 33px;
        background: #7c5e6c;
        position: absolute;
        top: 99px;
        right: 799px;
        z-index: 2;
    }

    .pre-34 {
        width: 60px;
        height: 43px;
        background: #ababab;
        position: absolute;
        top: 131px;
        right: 499px;
        z-index: 2;
    }

    .pre-35 {
        width: 60px;
        height: 42px;
        background: #422c35;
        position: absolute;
        top: 440px;
        right: 483px;
        z-index: 2;
    }

    .pre-36 {
        width: 60px;
        height: 45px;
        background: #808080;
        position: absolute;
        top: 639px;
        right: 483px;
        z-index: 0;
    }

    .pre-38 {
        width: 60px;
        height: 44px;
        background: #cbcbcb;
        position: absolute;
        top: 687px;
        right: 400px;
        z-index: 0;
    }

    .pre-37 {
        width: 60px;
        height: 33px;
        background: #ddc6aa;
        position: absolute;
        top: 667px;
        right: 378px;
        z-index: 0;
    }

    .pre-41 {
        width: 60px;
        height: 48px;
        background: #5b6b98;
        position: absolute;
        top: 605px;
        right: 292px;
        z-index: 2;
    }

    .pre-39 {
        width: 60px;
        height: 33px;
        background: #4f5f38;
        position: absolute;
        top: 108px;
        right: 279px;
        z-index: 2;
    }
}

@media (max-width: 1280px){
    img.mancha-alvalade-sobre {
        width: 212.54px;
        height: 230.67px;
        position: absolute;
        top: 86.43px;
        right: 422.49px;
    }

    img.nome-alvalade-sobre {
        width: 108px;
        height: 30px;
        position: absolute;
        top: 168px;
        right: 482px;
        border: 1.5px solid #4f4f4f;
    }

    img.mancha-marvila-sobre {
        width: 345px;
        height: 340px;
        position: absolute;
        top: 88px;
        right: 82px;
    }

    img.nome-marvila-sobre {
        width: 97px;
        height: 30px;
        position: absolute;
        top: 316px;
        right: 168px;
        border: 1.5px solid #4f4f4f;
    }

    img.nome-chelas-sobre {
        width: 86px;
        height: 30px;
        position: absolute;
        top: 208px;
        right: 275px;
        border: 1.5px solid #4f4f4f;
    }

    .pre-03 {
        width: 46px;
        height: 34px;
        background: #a99efa;
        position: absolute;
        top: 520px;
        right: 1051px;
        z-index: 0;
    }

    .pre-02 {
        width: 46px;
        height: 35px;
        background: #8f8f8f;
        position: absolute;
        top: 496px;
        right: 1040px;
        z-index: 0;
    }

    .pre-04 {
        width: 46px;
        height: 26px;
        background: #686061;
        position: absolute;
        top: 461px;
        right: 897px;
        z-index: 2;
    }

    .pre-01 {
        width: 46px;
        height: 26px;
        background: #a1c6cf;
        position: absolute;
        top: 179px;
        right: 947px;
        z-index: 2;
    }

    .pre-05 {
        width: 46px;
        height: 25px;
        background: #58413f;
        position: absolute;
        top: 252px;
        right: 777px;
        z-index: 2;
    }

    .pre-06 {
        width: 46px;
        height: 37px;
        background: #a6bad8;
        position: absolute;
        top: 268px;
        right: 804px;
        z-index: 2;
    }

    .pre-07 {
        width: 46px;
        height: 25px;
        background: #7d5d64;
        position: absolute;
        top: 294px;
        right: 817px;
        z-index: 2;
    }

    .pre-08 {
        width: 46px;
        height: 27px;
        background: #c3997a;
        position: absolute;
        top: 308px;
        right: 793px;
        z-index: 2;
    }

    .pre-15 {
        width: 46px;
        height: 24px;
        background: #eadcc1;
        position: absolute;
        top: 326px;
        right: 643px;
        z-index: 2;
    }

    .pre-16 {
        width: 46px;
        height: 26px;
        background: #cfad9a;
        position: absolute;
        top: 370px;
        right: 631px;
        z-index: 2;
    }

    .pre-17 {
        width: 46px;
        height: 38px;
        background: #0774a6;
        position: absolute;
        top: 390px;
        right: 655px;
        z-index: 2;
    }

    .pre-18 {
        width: 46px;
        height: 25px;
        background: #a78699;
        position: absolute;
        top: 423px;
        right: 627px;
        z-index: 2;
    }

    .pre-19 {
        width: 46px;
        height: 27px;
        background: #a69ea0;
        position: absolute;
        top: 439px;
        right: 614px;
        z-index: 2;
    }

    .pre-20 {
        width: 46px;
        height: 25px;
        background: #653cb3;
        position: absolute;
        top: 491px;
        right: 640px;
        z-index: 2;
    }

    .pre-21 {
        width: 46px;
        height: 26px;
        background: #c3ebfd;
        position: absolute;
        top: 505px;
        right: 573px;
        z-index: 0;
    }

    .pre-22 {
        width: 46px;
        height: 33px;
        background: #aba3b2;
        position: absolute;
        top: 524px;
        right: 549px;
        z-index: 0;
    }

    .pre-14 {
        width: 46px;
        height: 35px;
        background: #a69fb7;
        position: absolute;
        top: 306px;
        right: 583px;
        z-index: 2;
    }

    .pre-32 {
        width: 46px;
        height: 25px;
        background: #817979;
        position: absolute;
        top: 348px;
        right: 535px;
        z-index: 2;
    }

    .pre-30 {
        width: 46px;
        height: 25px;
        background: #dbcfd6;
        position: absolute;
        top: 324px;
        right: 518px;
        z-index: 2;
    }

    .pre-33 {
        width: 46px;
        height: 25px;
        background: #22182d;
        position: absolute;
        top: 364px;
        right: 521px;
        z-index: 2;
    }

    .pre-28 {
        width: 46px;
        height: 25px;
        background: #0c0f1e;
        position: absolute;
        top: 282px;
        right: 482px;
        z-index: 2;
    }

    .pre-29 {
        width: 46px;
        height: 25px;
        background: #7c9069;
        position: absolute;
        top: 294px;
        right: 460px;
        z-index: 2;
    }

    .pre-31 {
        width: 46px;
        height: 37px;
        background: #7daefa;
        position: absolute;
        top: 298px;
        right: 490px;
        z-index: 2;
    }

    .pre-25 {
        width: 46px;
        height: 24px;
        background: #ff89de;
        position: absolute;
        top: 252px;
        right: 492px;
        z-index: 2;
    }

    .pre-26 {
        width: 46px;
        height: 28px;
        background: #d3b7a9;
        position: absolute;
        top: 244px;
        right: 430px;
        z-index: 2;
    }

    .pre-24 {
        width: 46px;
        height: 34px;
        background: #fabe96;
        position: absolute;
        top: 210px;
        right: 475px;
        z-index: 2;
    }

    .pre-27 {
        width: 46px;
        height: 25px;
        background: #cf7f97;
        position: absolute;
        top: 238px;
        right: 463px;
        z-index: 2;
    }

    .pre-13 {
        width: 46px;
        height: 34px;
        background: #542c2e;
        position: absolute;
        top: 223px;
        right: 554px;
        z-index: 2;
    }

    .pre-12 {
        width: 46px;
        height: 26px;
        background: #46592d;
        position: absolute;
        top: 180px;
        right: 598px;
        z-index: 2;
    }

    .pre-23 {
        width: 46px;
        height: 35px;
        background: #9d7918;
        position: absolute;
        top: 166px;
        right: 490px;
        z-index: 2;
    }

    .pre-10 {
        width: 46px;
        height: 36px;
        background: #78a7c4;
        position: absolute;
        top: 104px;
        right: 598px;
        z-index: 2;
    }

    .pre-11 {
        width: 46px;
        height: 26px;
        background: #aa8a70;
        position: absolute;
        top: 127px;
        right: 614px;
        z-index: 2;
    }

    .pre-09 {
        width: 46px;
        height: 25px;
        background: #7c5e6c;
        position: absolute;
        top: 86px;
        right: 655px;
        z-index: 2;
    }

    .pre-34 {
        width: 46px;
        height: 33px;
        background: #ababab;
        position: absolute;
        top: 110px;
        right: 426px;
        z-index: 2;
    }

    .pre-35 {
        width: 46px;
        height: 32px;
        background: #422c35;
        position: absolute;
        top: 347px;
        right: 413px;
        z-index: 2;
    }

    .pre-36 {
        width: 46px;
        height: 34px;
        background: #808080;
        position: absolute;
        top: 499px;
        right: 413px;
        z-index: 0;
    }

    .pre-38 {
        width: 46px;
        height: 33px;
        background: #cbcbcb;
        position: absolute;
        top: 519px;
        right: 350px;
        z-index: 0;
    }

    .pre-37 {
        width: 46px;
        height: 26px;
        background: #ddc6aa;
        position: absolute;
        top: 503px;
        right: 333px;
        z-index: 0;
    }

    .pre-41 {
        width: 46px;
        height: 37px;
        background: #5b6b98;
        position: absolute;
        top: 473px;
        right: 267px;
        z-index: 2;
    }

    .pre-39 {
        width: 46px;
        height: 25px;
        background: #4f5f38;
        position: absolute;
        top: 93px;
        right: 257px;
        z-index: 2;
    }
}

@media (max-width: 1024px){
    .mapa-sobre{
        display: none;
    }

    .mapa-sobre-tablet{
        display: block;
        overflow: auto;
        white-space: nowrap;
        height: 100vh;
        position: relative;
        user-select: none;
    }

    img.rio-tablet-preambulo {
        height: 100vh;
        position: absolute;
        top: 0;
        left: 1498px;
        z-index: -1;
        width: 653px;
        object-fit: cover;
        user-select: none;
    }

    img.mancha-alvalade-sobre-tablet {
        width: 385.81px;
        height: 418.72px;
        position: absolute;
        top: 117.77px;
        left: 907.64px;
        animation: dissolve-scale .7s ease;
        user-select: none;
    }
    
    img.nome-alvalade-sobre-tablet {
        width: 108px;
        height: 30px;
        position: absolute;
        top: 285px;
        left: 1004px;
        border: 1.5px solid #4f4f4f;
        animation: dissolve-scale .7s ease;
        user-select: none;
    }
    
    img.mancha-marvila-sobre-tablet {
        width: 626px;
        height: 618px;
        position: absolute;
        top: 120px;
        left: 1286px;
        animation: dissolve-scale .7s ease;
        user-select: none;
    }
    
    img.nome-marvila-sobre-tablet {
        width: 97px;
        height: 30px;
        position: absolute;
        top: 557px;
        left: 1636px;
        border: 1.5px solid #4f4f4f;
        animation: dissolve-scale .7s ease;
        user-select: none;
    }
    
    img.nome-chelas-sobre-tablet {
        width: 86px;
        height: 30px;
        position: absolute;
        top: 350px;
        left: 1435px;
        border: 1.5px solid #4f4f4f;
        animation: dissolve-scale .7s ease;
        user-select: none;
    }
    
    .pre-03-tablet {
        width: 85px;
        height: 63px;
        background: #a99efa;
        position: absolute;
        top: 986px;
        left: 88px;
        z-index: 0;
        animation: dissolve-pins .7s ease 2.6s backwards;
        user-select: none;
    }
    
    .pre-03-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_03.jpg);
    }
    
    .pre-02-tablet {
        width: 85px;
        height: 63px;
        background: #8f8f8f;
        position: absolute;
        top: 948px;
        left: 108px;
        z-index: 0;
        animation: dissolve-pins .7s ease 1.2s backwards;
        user-select: none;
    }
    
    .pre-02-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_02.jpg);
    }
    
    .pre-04-tablet {
        width: 85px;
        height: 48px;
        background: #686061;
        position: absolute;
        top: 797px;
        left: 351px;
        z-index: 2;
        animation: dissolve-pins .7s ease 4s backwards;
        user-select: none;
    }
    
    .pre-04-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_04.jpg);
    }
    
    .pre-01-tablet {
        width: 85px;
        height: 49px;
        background: #a1c6cf;
        position: absolute;
        top: 285px;
        left: 260px;
        z-index: 2;
        animation: dissolve-pins .7s ease 3.9s backwards;
        user-select: none;
    }
    
    .pre-01-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_01.jpg);
    }
    
    .pre-05-tablet {
        width: 85px;
        height: 45px;
        background: #58413f;
        position: absolute;
        top: 419px;
        left: 571px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1s backwards;
        user-select: none;
    }
    
    .pre-05-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_05.jpg);
    }
    
    .pre-06-tablet {
        width: 85px;
        height: 66px;
        background: #a6bad8;
        position: absolute;
        top: 448px;
        left: 519px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.9s backwards;
        user-select: none;
    }
    
    .pre-06-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_06.jpg);
    }
    
    .pre-07-tablet {
        width: 85px;
        height: 45px;
        background: #7d5d64;
        position: absolute;
        top: 494px;
        left: 496px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.8s backwards;
        user-select: none;
    }
    
    .pre-07-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_07.jpg);
    }
    
    .pre-08-tablet {
        width: 85px;
        height: 50px;
        background: #c3997a;
        position: absolute;
        top: 520px;
        left: 539px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.1s backwards;
        user-select: none;
    }
    
    .pre-08-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_08.jpg);
    }
    
    .pre-15-tablet {
        width: 85px;
        height: 43px;
        background: #eadcc1;
        position: absolute;
        top: 553px;
        left: 809px;
        z-index: 2;
        animation: dissolve-pins .7s ease 3s backwards;
        user-select: none;
    }
    
    .pre-15-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_15.jpg);
    }
    
    .pre-16-tablet {
        width: 85px;
        height: 46px;
        background: #cfad9a;
        position: absolute;
        top: 633px;
        left: 836px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.9s backwards;
        user-select: none;
    }
    
    .pre-16-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_16.jpg);
    }
    
    .pre-17-tablet {
        width: 85px;
        height: 68px;
        background: #0774a6;
        position: absolute;
        top: 670px;
        left: 788px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.6s backwards;
        user-select: none;
    }
    
    .pre-17-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_17.jpg);
    }
    
    .pre-18-tablet {
        width: 85px;
        height: 44px;
        background: #a78699;
        position: absolute;
        top: 730px;
        left: 841px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.5s backwards;
        user-select: none;
    }
    
    .pre-18-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_18.jpg);
    }
    
    .pre-19-tablet {
        width: 85px;
        height: 50px;
        background: #a69ea0;
        position: absolute;
        top: 757px;
        left: 864px;
        z-index: 2;
        animation: dissolve-pins .7s ease 3.4s backwards;
        user-select: none;
    }
    
    .pre-19-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_19.jpg);
    }
    
    .pre-20-tablet {
        width: 85px;
        height: 46px;
        background: #653cb3;
        position: absolute;
        top: 851px;
        left: 816px;
        z-index: 2;
        animation: dissolve-pins .7s ease 4.2s backwards;
        user-select: none;
    }
    
    .pre-20-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_20.jpg);
    }
    
    .pre-21-tablet {
        width: 85px;
        height: 49px;
        background: #c3ebfd;
        position: absolute;
        top: 951px;
        left: 938px;
        z-index: 0;
        animation: dissolve-pins .7s ease 3.6s backwards;
        user-select: none;
    }
    
    .pre-21-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_21.jpg);
    }
    
    .pre-22-tablet {
        width: 85px;
        height: 61px;
        background: #aba3b2;
        position: absolute;
        top: 986px;
        left: 982px;
        z-index: 0;
        animation: dissolve-pins .7s ease 3s backwards;
        user-select: none;
    }
    
    .pre-22-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_22.jpg);
    }
    
    .pre-14-tablet {
        width: 85px;
        height: 63px;
        background: #a69fb7;
        position: absolute;
        top: 516px;
        left: 917px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.9s backwards;
        user-select: none;
    }
    
    .pre-14-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_14.jpg);
    }
    
    .pre-32-tablet {
        width: 85px;
        height: 46px;
        background: #817979;
        position: absolute;
        top: 591px;
        left: 1010px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.3s backwards;
        user-select: none;
    }
    
    .pre-32-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_32.jpg);
    }
    
    .pre-30-tablet {
        width: 85px;
        height: 46px;
        background: #dbcfd6;
        position: absolute;
        top: 547px;
        left: 1032px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.2s backwards;
        user-select: none;
    }
    
    .pre-30-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_30.jpg);
    }
    
    .pre-33-tablet {
        width: 85px;
        height: 46px;
        background: #22182d;
        position: absolute;
        top: 621px;
        left: 1032px;
        z-index: 2;
        animation: dissolve-pins .7s ease 3.1s backwards;
        user-select: none;
    }
    
    .pre-33-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_33.jpg);
    }
    
    .pre-28-tablet {
        width: 85px;
        height: 46px;
        background: #0c0f1e;
        position: absolute;
        top: 473px;
        left: 1104px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.4s backwards;
        user-select: none;
    }
    
    .pre-28-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_28.jpg);
    }
    
    .pre-29-tablet {
        width: 85px;
        height: 45px;
        background: #7c9069;
        position: absolute;
        top: 494px;
        left: 1141px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.1s backwards;
        user-select: none;
    }
    
    .pre-29-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_29.jpg);
    }
    
    .pre-31-tablet {
        width: 85px;
        height: 68px;
        background: #7daefa;
        position: absolute;
        top: 502px;
        left: 1089px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.8s backwards;
        user-select: none;
    }
    
    .pre-31-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_31.jpg);
    }
    
    .pre-25-tablet {
        width: 85px;
        height: 43px;
        background: #ff89de;
        position: absolute;
        top: 419px;
        left: 1085px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.3s backwards;
        user-select: none;
    }
    
    .pre-25-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_25.jpg);
    }
    
    .pre-26-tablet {
        width: 85px;
        height: 49px;
        background: #d3b7a9;
        position: absolute;
        top: 405px;
        left: 1196px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.7s backwards;
        user-select: none;
    }
    
    .pre-26-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_26.jpg);
    }
    
    .pre-24-tablet {
        width: 85px;
        height: 63px;
        background: #fabe96;
        position: absolute;
        top: 342px;
        left: 1115px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.6s backwards;
        user-select: none;
    }
    
    .pre-24-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_24.jpg);
    }
    
    .pre-27-tablet {
        width: 85px;
        height: 44px;
        background: #cf7f97;
        position: absolute;
        top: 393px;
        left: 1135px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2s backwards;
        user-select: none;
    }
    
    .pre-27-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_27.jpg);
    }
    
    .pre-13-tablet {
        width: 85px;
        height: 63px;
        background: #542c2e;
        position: absolute;
        top: 365px;
        left: 971px;
        z-index: 2;
        animation: dissolve-pins .7s ease .7s backwards;
        user-select: none;
    }
    
    .pre-13-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_13.jpg);
    }
    
    .pre-12-tablet {
        width: 85px;
        height: 47px;
        background: #46592d;
        position: absolute;
        top: 288px;
        left: 895px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.7s backwards;
        user-select: none;
    }
    
    .pre-12-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_12.jpg);
    }
    
    .pre-23-tablet {
        width: 85px;
        height: 63px;
        background: #9d7918;
        position: absolute;
        top: 262px;
        left: 1089px;
        z-index: 2;
        animation: dissolve-pins .7s ease 3.3s backwards;
        user-select: none;
    }
    
    .pre-23-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_23.jpg);
    }
    
    .pre-10-tablet {
        width: 85px;
        height: 65px;
        background: #78a7c4;
        position: absolute;
        top: 149px;
        left: 895px;
        z-index: 2;
        animation: dissolve-pins .7s ease .9s backwards;
        user-select: none;
    }
    
    .pre-10-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_10.jpg);
    }
    
    .pre-11-tablet {
        width: 85px;
        height: 47px;
        background: #aa8a70;
        position: absolute;
        top: 192px;
        left: 864px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.7s backwards;
        user-select: none;
    }
    
    .pre-11-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_11.jpg);
    }
    
    .pre-09-tablet {
        width: 85px;
        height: 46px;
        background: #7c5e6c;
        position: absolute;
        top: 117px;
        left: 788px;
        z-index: 2;
        animation: dissolve-pins .7s ease 3.8s backwards;
        user-select: none;
    }
    
    .pre-09-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_09.jpg);
    }
    
    .pre-34-tablet {
        width: 85px;
        height: 59px;
        background: #ababab;
        position: absolute;
        top: 162px;
        left: 1207px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.4s backwards;
        user-select: none;
    }
    
    .pre-34-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_34.jpg);
    }
    
    .pre-35-tablet {
        width: 85px;
        height: 58px;
        background: #422c35;
        position: absolute;
        top: 590px;
        left: 1228px;
        z-index: 2;
        animation: dissolve-pins .7s ease 2.2s backwards;
        user-select: none;
    }
    
    .pre-35-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_35.jpg);
    }
    
    .pre-36-tablet {
        width: 85px;
        height: 63px;
        background: #808080;
        position: absolute;
        top: 867px;
        left: 1228px;
        z-index: 0;
        animation: dissolve-pins .7s ease 3.7s backwards;
        user-select: none;
    }
    
    .pre-36-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_36.jpg);
    }
    
    .pre-38-tablet {
        width: 85px;
        height: 61px;
        background: #cbcbcb;
        position: absolute;
        top: 975px;
        left: 1341px;
        z-index: 0;
        animation: dissolve-pins .7s ease 2.1s backwards;
        user-select: none;
    }
    
    .pre-38-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_38.jpg);
    }
    
    .pre-37-tablet {
        width: 85px;
        height: 46px;
        background: #ddc6aa;
        position: absolute;
        top: 947px;
        left: 1378px;
        z-index: 0;
        animation: dissolve-pins .7s ease .8s backwards;
        user-select: none;
    }
    
    .pre-37-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_37.jpg);
    }
    
    .pre-41-tablet {
        width: 85px;
        height: 68px;
        background: #5b6b98;
        position: absolute;
        top: 819px;
        left: 1495px;
        z-index: 2;
        animation: dissolve-pins .7s ease 3.2s backwards;
        user-select: none;
    }
    
    .pre-41-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_41.jpg);
    }
    
    .pre-39-tablet {
        width: 85px;
        height: 46px;
        background: #4f5f38;
        position: absolute;
        top: 129px;
        left: 1507px;
        z-index: 2;
        animation: dissolve-pins .7s ease 1.2s backwards;
        user-select: none;
    }
    
    .pre-39-tablet:hover{
        z-index: 100;
        transform: scale(3);
        content: url(../images/preambulo/imagens/preamb_39.jpg);
    }
}

@media (max-width: 768px){
    img.rio-tablet-preambulo {
        height: 100vh;
        position: absolute;
        top: 0;
        left: 1078px;
        z-index: -1;
        width: 373px;
        object-fit: cover;
    }

    img.mancha-alvalade-sobre-tablet {
        width: 271.17px;
        height: 294.3px;
        position: absolute;
        top: 72px;
        left: 639px;
    }

    img.nome-alvalade-sobre-tablet {
        width: 108px;
        height: 30px;
        position: absolute;
        top: 182px;
        left: 700px;
        border: 1.5px solid #4f4f4f;
    }

    img.mancha-marvila-sobre-tablet {
        width: 439.98px;
        height: 434.36px;
        position: absolute;
        top: 73.21px;
        left: 906.02px;
    }

    img.nome-marvila-sobre-tablet {
        width: 97px;
        height: 30px;
        position: absolute;
        top: 375px;
        left: 1128px;
        border: 1.5px solid #4f4f4f;
    }

    img.nome-chelas-sobre-tablet {
        width: 86px;
        height: 30px;
        position: absolute;
        top: 246px;
        left: 984px;
        border: 1.5px solid #4f4f4f;
    }

    .pre-03-tablet {
        width: 58px;
        height: 44px;
        background: #a99efa;
        position: absolute;
        top: 683px;
        left: 64px;
        z-index: 0;
    }

    .pre-02-tablet {
        width: 58px;
        height: 44px;
        background: #8f8f8f;
        position: absolute;
        top: 655px;
        left: 78px;
        z-index: 0;
    }

    .pre-04-tablet {
        width: 58px;
        height: 33px;
        background: #686061;
        position: absolute;
        top: 549px;
        left: 249px;
        z-index: 2;
    }

    .pre-01-tablet {
        width: 58px;
        height: 34px;
        background: #a1c6cf;
        position: absolute;
        top: 189px;
        left: 185px;
        z-index: 2;
    }

    .pre-05-tablet {
        width: 58px;
        height: 32px;
        background: #58413f;
        position: absolute;
        top: 283px;
        left: 404px;
        z-index: 2;
    }

    .pre-06-tablet {
        width: 58px;
        height: 46px;
        background: #a6bad8;
        position: absolute;
        top: 303px;
        left: 367px;
        z-index: 2;
    }

    .pre-07-tablet {
        width: 58px;
        height: 32px;
        background: #7d5d64;
        position: absolute;
        top: 336px;
        left: 350px;
        z-index: 2;
    }

    .pre-08-tablet {
        width: 58px;
        height: 35px;
        background: #c3997a;
        position: absolute;
        top: 354px;
        left: 381px;
        z-index: 2;
    }

    .pre-15-tablet {
        width: 58px;
        height: 30px;
        background: #eadcc1;
        position: absolute;
        top: 377px;
        left: 570px;
        z-index: 2;
    }

    .pre-16-tablet {
        width: 58px;
        height: 32px;
        background: #cfad9a;
        position: absolute;
        top: 434px;
        left: 590px;
        z-index: 2;
    }

    .pre-17-tablet {
        width: 58px;
        height: 48px;
        background: #0774a6;
        position: absolute;
        top: 560px;
        left: 556px;
        z-index: 2;
    }

    .pre-18-tablet {
        width: 58px;
        height: 31px;
        background: #a78699;
        position: absolute;
        top: 502px;
        left: 593px;
        z-index: 2;
    }

    .pre-19-tablet {
        width: 58px;
        height: 35px;
        background: #a69ea0;
        position: absolute;
        top: 521px;
        left: 610px;
        z-index: 2;
    }

    .pre-20-tablet {
        width: 58px;
        height: 32px;
        background: #653cb3;
        position: absolute;
        top: 587px;
        left: 576px;
        z-index: 2;
    }

    .pre-21-tablet {
        width: 58px;
        height: 35px;
        background: #c3ebfd;
        position: absolute;
        top: 657px;
        left: 661px;
        z-index: 0;
    }

    .pre-22-tablet {
        width: 58px;
        height: 42px;
        background: #aba3b2;
        position: absolute;
        top: 682px;
        left: 692px;
        z-index: 0;
    }

    .pre-14-tablet {
        width: 58px;
        height: 44px;
        background: #a69fb7;
        position: absolute;
        top: 352px;
        left: 647px;
        z-index: 2;
    }

    .pre-32-tablet {
        width: 58px;
        height: 32px;
        background: #817979;
        position: absolute;
        top: 404px;
        left: 712px;
        z-index: 2;
    }

    .pre-30-tablet {
        width: 58px;
        height: 32px;
        background: #dbcfd6;
        position: absolute;
        top: 374px;
        left: 728px;
        z-index: 2;
    }

    .pre-33-tablet {
        width: 58px;
        height: 32px;
        background: #22182d;
        position: absolute;
        top: 425px;
        left: 727px;
        z-index: 2;
    }

    .pre-28-tablet {
        width: 58px;
        height: 32px;
        background: #0c0f1e;
        position: absolute;
        top: 321px;
        left: 778px;
        z-index: 2;
    }

    .pre-29-tablet {
        width: 58px;
        height: 31px;
        background: #7c9069;
        position: absolute;
        top: 336px;
        left: 804px;
        z-index: 2;
    }

    .pre-31-tablet {
        width: 58px;
        height: 48px;
        background: #7daefa;
        position: absolute;
        top: 341px;
        left: 768px;
        z-index: 2;
    }

    .pre-25-tablet {
        width: 58px;
        height: 30px;
        background: #ff89de;
        position: absolute;
        top: 283px;
        left: 765px;
        z-index: 2;
    }

    .pre-26-tablet {
        width: 58px;
        height: 34px;
        background: #d3b7a9;
        position: absolute;
        top: 274px;
        left: 843px;
        z-index: 2;
    }

    .pre-24-tablet {
        width: 58px;
        height: 44px;
        background: #fabe96;
        position: absolute;
        top: 229px;
        left: 786px;
        z-index: 2;
    }

    .pre-27-tablet {
        width: 58px;
        height: 31px;
        background: #cf7f97;
        position: absolute;
        top: 265px;
        left: 800px;
        z-index: 2;
    }

    .pre-13-tablet {
        width: 58px;
        height: 44px;
        background: #542c2e;
        position: absolute;
        top: 245px;
        left: 685px;
        z-index: 2;
    }

    .pre-12-tablet {
        width: 58px;
        height: 33px;
        background: #46592d;
        position: absolute;
        top: 191px;
        left: 631px;
        z-index: 2;
    }

    .pre-23-tablet {
        width: 58px;
        height: 44px;
        background: #9d7918;
        position: absolute;
        top: 173px;
        left: 768px;
        z-index: 2;
    }

    .pre-10-tablet {
        width: 58px;
        height: 45px;
        background: #78a7c4;
        position: absolute;
        top: 94px;
        left: 631px;
        z-index: 2;
    }

    .pre-11-tablet {
        width: 58px;
        height: 33px;
        background: #aa8a70;
        position: absolute;
        top: 124px;
        left: 609px;
        z-index: 2;
    }

    .pre-09-tablet {
        width: 58px;
        height: 32px;
        background: #7c5e6c;
        position: absolute;
        top: 71px;
        left: 556px;
        z-index: 2;
    }

    .pre-34-tablet {
        width: 58px;
        height: 41px;
        background: #ababab;
        position: absolute;
        top: 103px;
        left: 850px;
        z-index: 2;
    }

    .pre-35-tablet {
        width: 58px;
        height: 40px;
        background: #422c35;
        position: absolute;
        top: 404px;
        left: 865px;
        z-index: 2;
    }

    .pre-36-tablet {
        width: 58px;
        height: 44px;
        background: #808080;
        position: absolute;
        top: 599px;
        left: 865px;
        z-index: 0;
    }

    .pre-38-tablet {
        width: 58px;
        height: 43px;
        background: #cbcbcb;
        position: absolute;
        top: 674px;
        left: 945px;
        z-index: 0;
    }

    .pre-37-tablet {
        width: 58px;
        height: 32px;
        background: #ddc6aa;
        position: absolute;
        top: 655px;
        left: 971px;
        z-index: 0;
    }

    .pre-41-tablet {
        width: 58px;
        height: 48px;
        background: #5b6b98;
        position: absolute;
        top: 565px;
        left: 1053px;
        z-index: 2;
    }

    .pre-39-tablet {
        width: 58px;
        height: 32px;
        background: #4f5f38;
        position: absolute;
        top: 79px;
        left: 1061px;
        z-index: 2;
    }
}

@media (max-width: 480px){
    img.rio-tablet-preambulo {
        height: 100vh;
        position: absolute;
        top: 0;
        left: 590px;
        z-index: -1;
        width: 310px;
        object-fit: cover;
    }

    img.mancha-alvalade-sobre-tablet {
        width: 162.29px;
        height: 176.14px;
        position: absolute;
        top: 65.82px;
        left: 365.79px;
    }

    img.nome-alvalade-sobre-tablet {
        width: 108px;
        height: 30px;
        position: absolute;
        top: 118px;
        left: 396px;
        border: 1.5px solid #4f4f4f;
    }

    img.mancha-marvila-sobre-tablet {
        width: 263.33px;
        height: 259.96px;
        position: absolute;
        top: 66.76px;
        left: 524.95px;
    }

    img.nome-marvila-sobre-tablet {
        width: 97px;
        height: 30px;
        position: absolute;
        top: 235px;
        left: 639px;
        border: 1.5px solid #4f4f4f;
    }

    img.nome-chelas-sobre-tablet {
        width: 86px;
        height: 30px;
        position: absolute;
        top: 146px;
        left: 550px;
        border: 1.5px solid #4f4f4f;
    }

    .pre-03-tablet {
        width: 35px;
        height: 27px;
        background: #a99efa;
        position: absolute;
        top: 431px;
        left: 21px;
        z-index: 0;
    }

    .pre-02-tablet {
        width: 35px;
        height: 27px;
        background: #8f8f8f;
        position: absolute;
        top: 415px;
        left: 29px;
        z-index: 0;
    }

    .pre-04-tablet {
        width: 35px;
        height: 20px;
        background: #686061;
        position: absolute;
        top: 352px;
        left: 132px;
        z-index: 2;
    }

    .pre-01-tablet {
        width: 35px;
        height: 21px;
        background: #a1c6cf;
        position: absolute;
        top: 136px;
        left: 93px;
        z-index: 2;
    }

    .pre-05-tablet {
        width: 35px;
        height: 19px;
        background: #58413f;
        position: absolute;
        top: 193px;
        left: 224px;
        z-index: 2;
    }

    .pre-06-tablet {
        width: 35px;
        height: 28px;
        background: #a6bad8;
        position: absolute;
        top: 205px;
        left: 202px;
        z-index: 2;
    }

    .pre-07-tablet {
        width: 35px;
        height: 19px;
        background: #7d5d64;
        position: absolute;
        top: 224px;
        left: 193px;
        z-index: 2;
    }

    .pre-08-tablet {
        width: 35px;
        height: 21px;
        background: #c3997a;
        position: absolute;
        top: 235px;
        left: 210px;
        z-index: 2;
    }

    .pre-15-tablet {
        width: 35px;
        height: 18px;
        background: #eadcc1;
        position: absolute;
        top: 249px;
        left: 324px;
        z-index: 2;
    }

    .pre-16-tablet {
        width: 35px;
        height: 19px;
        background: #cfad9a;
        position: absolute;
        top: 283px;
        left: 336px;
        z-index: 2;
    }

    .pre-17-tablet {
        width: 35px;
        height: 29px;
        background: #0774a6;
        position: absolute;
        top: 298px;
        left: 315px;
        z-index: 2;
    }

    .pre-18-tablet {
        width: 35px;
        height: 19px;
        background: #a78699;
        position: absolute;
        top: 323px;
        left: 338px;
        z-index: 2;
    }

    .pre-19-tablet {
        width: 35px;
        height: 21px;
        background: #a69ea0;
        position: absolute;
        top: 335px;
        left: 347px;
        z-index: 2;
    }

    .pre-20-tablet {
        width: 35px;
        height: 19px;
        background: #653cb3;
        position: absolute;
        top: 374px;
        left: 327px;
        z-index: 2;
    }

    .pre-21-tablet {
        width: 35px;
        height: 20px;
        background: #c3ebfd;
        position: absolute;
        top: 416px;
        left: 379px;
        z-index: 0;
    }

    .pre-22-tablet {
        width: 35px;
        height: 26px;
        background: #aba3b2;
        position: absolute;
        top: 431px;
        left: 397px;
        z-index: 0;
    }

    .pre-14-tablet {
        width: 35px;
        height: 27px;
        background: #a69fb7;
        position: absolute;
        top: 233px;
        left: 370px;
        z-index: 2;
    }

    .pre-32-tablet {
        width: 35px;
        height: 19px;
        background: #817979;
        position: absolute;
        top: 265px;
        left: 409px;
        z-index: 2;
    }

    .pre-30-tablet {
        width: 35px;
        height: 19px;
        background: #dbcfd6;
        position: absolute;
        top: 247px;
        left: 419px;
        z-index: 2;
    }

    .pre-33-tablet {
        width: 35px;
        height: 19px;
        background: #22182d;
        position: absolute;
        top: 277px;
        left: 418px;
        z-index: 2;
    }

    .pre-28-tablet {
        width: 35px;
        height: 19px;
        background: #0c0f1e;
        position: absolute;
        top: 215px;
        left: 448px;
        z-index: 2;
    }

    .pre-29-tablet {
        width: 35px;
        height: 19px;
        background: #7c9069;
        position: absolute;
        top: 224px;
        left: 464px;
        z-index: 2;
    }

    .pre-31-tablet {
        width: 35px;
        height: 29px;
        background: #7daefa;
        position: absolute;
        top: 227px;
        left: 442px;
        z-index: 2;
    }

    .pre-25-tablet {
        width: 35px;
        height: 18px;
        background: #ff89de;
        position: absolute;
        top: 193px;
        left: 440px;
        z-index: 2;
    }

    .pre-26-tablet {
        width: 35px;
        height: 20px;
        background: #d3b7a9;
        position: absolute;
        top: 187px;
        left: 487px;
        z-index: 2;
    }

    .pre-24-tablet {
        width: 35px;
        height: 27px;
        background: #fabe96;
        position: absolute;
        top: 160px;
        left: 453px;
        z-index: 2;
    }

    .pre-27-tablet {
        width: 35px;
        height: 19px;
        background: #cf7f97;
        position: absolute;
        top: 182px;
        left: 461px;
        z-index: 2;
    }

    .pre-13-tablet {
        width: 35px;
        height: 27px;
        background: #542c2e;
        position: absolute;
        top: 170px;
        left: 392px;
        z-index: 2;
    }

    .pre-12-tablet {
        width: 35px;
        height: 20px;
        background: #46592d;
        position: absolute;
        top: 137px;
        left: 360px;
        z-index: 2;
    }

    .pre-23-tablet {
        width: 35px;
        height: 27px;
        background: #9d7918;
        position: absolute;
        top: 126px;
        left: 442px;
        z-index: 2;
    }

    .pre-10-tablet {
        width: 35px;
        height: 27px;
        background: #78a7c4;
        position: absolute;
        top: 79px;
        left: 360px;
        z-index: 2;
    }

    .pre-11-tablet {
        width: 35px;
        height: 20px;
        background: #aa8a70;
        position: absolute;
        top: 97px;
        left: 347px;
        z-index: 2;
    }

    .pre-09-tablet {
        width: 35px;
        height: 19px;
        background: #7c5e6c;
        position: absolute;
        top: 66px;
        left: 315px;
        z-index: 2;
    }

    .pre-34-tablet {
        width: 35px;
        height: 25px;
        background: #ababab;
        position: absolute;
        top: 84px;
        left: 492px;
        z-index: 2;
    }

    .pre-35-tablet {
        width: 35px;
        height: 24px;
        background: #422c35;
        position: absolute;
        top: 265px;
        left: 500px;
        z-index: 2;
    }

    .pre-36-tablet {
        width: 35px;
        height: 27px;
        background: #808080;
        position: absolute;
        top: 381px;
        left: 500px;
        z-index: 0;
    }

    .pre-38-tablet {
        width: 35px;
        height: 26px;
        background: #cbcbcb;
        position: absolute;
        top: 426px;
        left: 548px;
        z-index: 0;
    }

    .pre-37-tablet {
        width: 35px;
        height: 19px;
        background: #ddc6aa;
        position: absolute;
        top: 415px;
        left: 564px;
        z-index: 0;
    }

    .pre-41-tablet {
        width: 35px;
        height: 29px;
        background: #5b6b98;
        position: absolute;
        top: 360px;
        left: 613px;
        z-index: 2;
    }

    .pre-39-tablet {
        width: 35px;
        height: 19px;
        background: #4f5f38;
        position: absolute;
        top: 71px;
        left: 618px;
        z-index: 2;
    }
}

  /* PÁGINA MAPA 19OUT */
.mapa {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    user-select: none;
}

.mapa-tablet{
    display: none;
}

img.pin_permanente_0_1 {
    width: 17px;
    height: 21px;
    position: absolute;
    top: 476px;
    right: 1105px;
    animation: dissolve-pins 1s ease;
    user-select: none;
}

img.pin_permanente_0_2 {
    width: 17px;
    height: 21px;
    position: absolute;
    top: 767px;
    right: 494px;
    animation: dissolve-pins 1.2s ease;
    user-select: none;
}

img.pin_permanente_0_1:hover,
img.pin_permanente_0_2:hover,
img.pin_19out_1_2:hover,
img.pin_19out_1_3:hover,
img.pin_19out_1_4:hover{
    transform: scale(1.5);
    mix-blend-mode: exclusion;
}

img.avbrasil {
    width: 61.48px;
    position: absolute;
    top: 328.23px;
    right: 1652.32px;
    animation: dissolve-pins 2.4s ease;
    user-select: none;
}

img.igrejasjoaodebrito {
    width: 116.25px;
    height: 22.96px;
    position: absolute;
    top: 267.23px;
    right: 1231.75px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.quintadonarigao {
    width: 73.28px;
    height: 22.96px;
    position: absolute;
    top: 228.23px;
    right: 1051.62px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.bairrodosloios {
    width: 124.28px;
    position: absolute;
    top: 139.76px;
    right: 698.72px;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.bracodeprataestacao {
    width: 99.85px;
    height: 25.28px;
    position: absolute;
    top: 615px;
    right: 208.15px;
    animation: dissolve-pins 2.4s ease;
    user-select: none;
}

img.pin_19out_1_2 {
    width: 22.19px;
    height: 21px;
    position: absolute;
    top: 160px;
    right: 1359.08px;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.pin_19out_1_3 {
    width: 22.19px;
    height: 21px;
    position: absolute;
    top: 175.64px;
    right: 1498.9px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.pin_19out_1_4 {
    width: 22.19px;
    height: 21px;
    position: absolute;
    top: 255.23px;
    right: 1078.08px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_19out_1_1 {
    width: 1354.47px;
    height: 598.04px;
    position: absolute;
    top: 166.29px;
    right: 289.83px;
    animation: dissolve-percursos 2.8s ease;
    user-select: none;
}

img.pin_19out_1_1:hover{
    filter: invert(53%) sepia(79%) saturate(266%) hue-rotate(173deg) brightness(94%) contrast(93%);
}

img.mancha-alvalade {
    width: 592.38px;
    height: 638.38px;
    position: absolute;
    top: 90.56px;
    right: 1049.01px;
    filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
    animation: dissolve-scale .7s ease;
    user-select: none;
}

img.nome-alvalade {
    width: 108px;
    height: 30px;
    position: absolute;
    top: 345.23px;
    right: 1405.87px;
    animation: dissolve-scale .7s ease;
    user-select: none;
}

img.mancha-marvila {
    width: 1013.32px;
    height: 988.8px;
    position: absolute;
    top: 76.79px;
    right: 54.05px;
    filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
    animation: dissolve-scale .7s ease;
    user-select: none;
}

img.nome-marvila {
    width: 97px;
    height: 30px;
    position: absolute;
    top: 827.95px;
    right: 354.42px;
    animation: dissolve-scale .7s ease;
    user-select: none;
}

img.nome-chelas {
    width: 86px;
    height: 30px;
    position: absolute;
    top: 496.01px;
    right: 655.89px;
    animation: dissolve-scale .7s ease;
    user-select: none;
}

.rio {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    user-select: none;
}

.rio img {
    height: 100vh;
    object-fit: cover;
    user-select: none;
}

.background-grid{
    width: 100%;
    height: 100%;
    user-select: none;
}

.background-grid img {
    height: 100%;
    width: 100%;
    position: fixed;
    object-fit: cover;
    z-index: -2;
    user-select: none;
}

div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    user-select: none;
  }
  
  div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    user-select: none;
  }
  
  div.scrollmenu a:hover {
    background-color: #777;
  }

@media (max-width: 1920px){
    img.mancha-alvalade {
        width: 360.28px;
        height: 388.25px;
        position: absolute;
        top: 84.92px;
        right: 642.63px;
    }

    img.nome-alvalade {
        top: 233px;
        right: 840px;
    }

    img.mancha-marvila {
        width: 616.29px;
        height: 601.38px;
        position: absolute;
        top: 76.54px;
        right: 37.52px;
    }

    img.nome-marvila {
        top: 535px;
        right: 174px;
    }

    img.nome-chelas {
        top: 325px;
        right: 382px;
    }

    img.pin_permanente_0_1 {
        top: 315px;
        right: 673px;
    }

    img.pin_permanente_0_2 {
        top: 492px;
        right: 302px;
    }

    img.pin_permanente_0_3 {
        top: 250px;
        right: 764px;
    }

    img.pin_permanente_0_4 {
        top: 518px;
        right: 279px;
    }

    img.avbrasil {
        top: 227px;
        right: 1004.52px;
    }

    img.igrejasjoaodebrito {
        top: 191px;
        right: 709.75px;
    }

    img.quintadonarigao {
        top: 155px;
        right: 628.72px;
    }

    img.bairrodosloios {
        top: 113px;
        right: 379.72px;
    }

    img.bracodeprataestacao {
        top: 397px;
        right: 98.65px;
    }

    img.pin_19out_1_2 {
        top: 123px;
        right: 826.08px;
    }

    img.pin_19out_1_3 {
        top: 133px;
        right: 911.08px;
    }

    img.pin_19out_1_4 {
        top: 182.01px;
        right: 655.18px;
    }

    img.pin_19out_1_1 {
        width: 823.77px;
        height: 363.72px;
        position: absolute;
        top: 130.98px;
        right: 180.91px;
    }
}

@media (max-width: 1280px){
    img.mancha-alvalade {
        width: 269px;
        height: 290px;
        position: absolute;
        top: 73px;
        right: 516px;
    }

    img.nome-alvalade {
        top: 177px;
        right: 641px;
    }

    img.mancha-marvila {
        width: 461px;
        height: 450px;
        position: absolute;
        top: 69px;
        right: 63px;
    }

    img.nome-marvila {
        top: 409px;
        right: 156px;
    }

    img.nome-chelas {
        top: 249px;
        right: 310px;
    }

    img.pin_19out_1_1 {
        width: 616px;
        height: 272px;
        position: absolute;
        top: 107px;
        right: 171px;
    }

    img.avbrasil {
        top: 178px;
        right: 791.52px;
    }

    img.igrejasjoaodebrito {
        top: 144px;
        right: 556.75px;
    }

    img.quintadonarigao {
        top: 115px;
        right: 497.72px;
    }

    img.bairrodosloios {
        top: 91px;
        right: 290.72px;
    }

    img.bracodeprataestacao {
        top: 304px;
        right: 88.15px;
    }

    img.pin_19out_1_2 {
        top: 100px;
        right: 651.08px;
    }

    img.pin_19out_1_3 {
        top: 107px;
        right: 713.08px;
    }

    img.pin_19out_1_4 {
        top: 143.01px;
        right: 522.18px;
    }

    img.pin_permanente_0_1 {
        top: 243px;
        right: 537px;
    }

    img.pin_permanente_0_2 {
        top: 370px;
        right: 259px;
    }

    img.pin_permanente_0_3 {
        top: 192px;
        right: 604px;
    }

    img.pin_permanente_0_4 {
        top: 387px;
        right: 241px;
    }
}

@media (max-width: 1024px){
    .mapa{
        display: none;
    }

    .mapa-tablet{
        display: block;
        overflow: auto;
        white-space: nowrap;
        height: 100vh;
        position: relative;
        user-select: none;
    }

    img.mancha-alvalade-tablet {
        width: 461px;
        height: 496px;
        position: absolute;
        top: 202px;
        left: 170px;
        filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
        animation: dissolve-scale .7s ease;
        user-select: none;
    }

    img.nome-alvalade-tablet {
        width: 108px;
        height: 30px;
        position: absolute;
        top: 394px;
        left: 281px;
        animation: dissolve-scale .7s ease;
        user-select: none;
    }

    img.mancha-marvila-tablet {
        width: 787px;
        height: 769px;
        position: absolute;
        top: 191px;
        left: 617px;
        filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
        animation: dissolve-scale .7s ease;
        user-select: none;
    }

    img.nome-marvila-tablet {
        width: 97px;
        height: 30px;
        position: absolute;
        top: 772px;
        left: 1100px;
        animation: dissolve-scale .7s ease;
        user-select: none;
    }

    img.nome-chelas-tablet {
        width: 86px;
        height: 30px;
        position: absolute;
        top: 519px;
        left: 860px;
        animation: dissolve-scale .7s ease;
        user-select: none;
    }

    img.rio-tablet {
        height: 100vh;
        position: absolute;
        top: 0;
        left: 1118px;
        z-index: -1;
        user-select: none;
    }

    img.grid-tablet {
        height: 100vh;
        object-fit: cover;
        z-index: -2;
        position: fixed;
        width: 1470px;
        top: 0;
        left: 0;
        user-select: none;
    }

    img.pin_19out_1_1-tablet {
        width: 1053px;
        height: 464px;
        position: absolute;
        top: 261px;
        left: 168px;
        animation: dissolve-percursos 2.8s ease;
        user-select: none;
    }

    img.pin_19out_1_1-tablet:hover{
        filter: invert(53%) sepia(79%) saturate(266%) hue-rotate(173deg) brightness(94%) contrast(93%);
    }

    img.avbrasil-tablet {
        width: 61.48px;
        position: absolute;
        top: 385px;
        left: 102px;
        animation: dissolve-pins 2.4s ease;
        user-select: none;
    }

    img.igrejasjoaodebrito-tablet {
        width: 116.25px;
        height: 22.96px;
        position: absolute;
        top: 338px;
        left: 389px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.quintadonarigao-tablet {
        width: 73.28px;
        height: 22.96px;
        position: absolute;
        top: 299px;
        left: 565px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.bairrodosloios-tablet {
        width: 124.28px;
        position: absolute;
        top: 240px;
        left: 808px;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.bracodeprataestacao-tablet {
        width: 99.85px;
        height: 25.28px;
        position: absolute;
        top: 608px;
        left: 1207px;
        animation: dissolve-pins 2.4s ease;
        user-select: none;
    }

    img.pin_19out_1_2-tablet {
        width: 20.92px;
        height: 21px;
        position: absolute;
        top: 255px;
        left: 372px;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.pin_19out_1_3-tablet {
        width: 20.92px;
        height: 21px;
        position: absolute;
        top: 267px;
        left: 264px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.pin_19out_1_4-tablet {
        width: 20.92px;
        height: 21px;
        position: absolute;
        top: 327.01px;
        left: 592.9px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.pin_permanente_0_1-tablet {
        width: 17px;
        height: 21px;
        position: absolute;
        top: 500px;
        left: 575px;
        animation: dissolve-pins 1s ease;
        user-select: none;
    }

    img.pin_permanente_0_2-tablet {
        width: 17px;
        height: 21px;
        position: absolute;
        top: 725px;
        left: 1049px;
        animation: dissolve-pins 1.2s ease;
        user-select: none;
    }

    img.pin_permanente_0_1-tablet:hover,
    img.pin_permanente_0_2-tablet:hover,
    img.pin_19out_1_2-tablet:hover,
    img.pin_19out_1_3-tablet:hover,
    img.pin_19out_1_4-tablet:hover{
        transform: scale(1.5);
        mix-blend-mode: exclusion;
    }
}

@media (max-width: 768px){
    img.mancha-alvalade-tablet {
        width: 315px;
        height: 343px;
        position: absolute;
        top: 135px;
        left: 111px;
        filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
    }

    img.nome-alvalade-tablet {
        top: 260px;
        left: 175px;
    }

    img.mancha-marvila-tablet {
        width: 542px;
        height: 533px;
        position: absolute;
        top: 127px;
        left: 417px;
        filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
    }

    img.nome-marvila-tablet {
        top: 527px;
        left: 746px;
    }

    img.nome-chelas-tablet {
        top: 347px;
        left: 576px;
    }

    img.pin_19out_1_1-tablet {
        width: 724px;
        height: 321px;
        position: absolute;
        top: 176px;
        left: 109px;
    }

    img.avbrasil-tablet {
        top: 270px;
        left: 69px;
    }

    img.igrejasjoaodebrito-tablet {
        top: 218px;
        left: 252px;
    }

    img.quintadonarigao-tablet {
        top: 193px;
        left: 368px;
    }

    img.bairrodosloios-tablet {
        top: 161px;
        left: 549px;
    }

    img.bracodeprataestacao-tablet {
        top: 410px;
        left: 818px;
    }

    img.pin_19out_1_2-tablet {
        top: 169px;
        left: 245px;
    }

    img.pin_19out_1_3-tablet {
        top: 178px;
        left: 175px;
    }

    img.pin_19out_1_4-tablet {
        top: 220.01px;
        left: 395.9px;
    }

    img.pin_permanente_0_1-tablet {
        top: 337px;
        left: 385px;
    }

    img.pin_permanente_0_2-tablet {
        top: 497px;
        left: 713px;
    }

    img.pin_permanente_0_3-tablet {
        top: 281px;
        left: 308px;
    }

    img.pin_permanente_0_4-tablet {
        top: 517px;
        left: 731px;
    }

    img.rio-tablet {
        left: 738px;
    }

    img.grid-tablet {
        width: 1018px;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 480px){
    img.mancha-alvalade-tablet {
        width: 237px;
        height: 258px;
        position: absolute;
        top: 62px;
        left: 103px;
        filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
    }

    img.nome-alvalade-tablet {
        top: 157px;
        left: 132px;
    }

    img.mancha-marvila-tablet {
        width: 407px;
        height: 402px;
        position: absolute;
        top: 55px;
        left: 334px;
        filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
    }

    img.nome-marvila-tablet {
        top: 358px;
        left: 557px;
    }

    img.nome-chelas-tablet {
        top: 218px;
        left: 445px;
    }

    img.pin_19out_1_1-tablet {
        width: 545px;
        height: 242px;
        position: absolute;
        top: 92px;
        left: 102px;
    }

    img.avbrasil-tablet {
        top: 163px;
        left: 45px;
    }

    img.igrejasjoaodebrito-tablet {
        top: 121px;
        left: 191px;
    }

    img.quintadonarigao-tablet {
        top: 89px;
        left: 288px;
    }

    img.bairrodosloios-tablet {
        top: 80px;
        left: 431px;
    }

    img.bracodeprataestacao-tablet {
        top: 265px;
        left: 632px;
    }

    img.pin_19out_1_2-tablet {
        top: 87px;
        left: 203px;
    }

    img.pin_19out_1_3-tablet {
        top: 92px;
        left: 147px;
    }

    img.pin_19out_1_4-tablet {
        top: 117.01px;
        left: 315.9px;
    }

    img.pin_permanente_0_1-tablet {
        top: 213px;
        left: 310px;
    }

    img.pin_permanente_0_2-tablet {
        top: 326px;
        left: 547px;
    }

    img.pin_permanente_0_3-tablet {
        top: 168px;
        left: 249px;
    }

    img.pin_permanente_0_4-tablet {
        top: 336px;
        left: 569px;
    }

    img.rio-tablet {
        left: 548px;
    }

    img.grid-tablet {
        width: 778px;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 375px){
    img.rio-tablet {
        left: 578px;
    }
}

@media (max-width: 360px){
    img.rio-tablet {
        left: 588px;
    }
}

@media (max-width: 320px){
    img.rio-tablet {
        left: 618px;
    }
}

/* PÁGINA MAPA 20OUT */
img.quintadonarigao_1 {
    width: 73.28px;
    height: 22.96px;
    position: absolute;
    top: 225.23px;
    right: 1071.62px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.azinhagadasteresinhas {
    width: 87.19px;
    height: 22.96px;
    position: absolute;
    top: 271.23px;
    right: 972.67px;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.bairrodosloios_1 {
    width: 111.08px;
    position: absolute;
    top: 133px;
    right: 760.72px;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.pin_20out_2_1 {
    width: 20.36px;
    height: 20.41px;
    position: absolute;
    top: 253px;
    right: 1096.64px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.pin_20out_2_2 {
    width: 20.36px;
    height: 20.41px;
    position: absolute;
    top: 299px;
    right: 1009.64px;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.pin_20out_2_3 {
    width: 20.36px;
    height: 20.41px;
    position: absolute;
    top: 133px;
    right: 875.64px;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.pin_20out_2_4 {
    width: 20.36px;
    height: 20.41px;
    position: absolute;
    top: 272px;
    right: 942.64px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.pin_20out_2_5 {
    width: 20.36px;
    height: 20.41px;
    position: absolute;
    top: 172px;
    right: 931.64px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_20out_2_1:hover,
img.pin_20out_2_2:hover,
img.pin_20out_2_3:hover,
img.pin_20out_2_4:hover,
img.pin_20out_2_5:hover{
    transform: scale(1.5);
    mix-blend-mode: exclusion;
}

@media (max-width: 1920px){
    img.quintadonarigao_1 {
        top: 151px;
        right: 642.72px;
    }

    img.azinhagadasteresinhas {
        top: 222px;
        right: 578.81px;
    }

    img.bairrodosloios_1 {
        top: 106.6px;
        right: 417.72px;
    }

    img.pin_20out_2_1 {
        top: 177.77px;
        right: 668.74px;
    }

    img.pin_20out_2_2 {
        top: 248.77px;
        right: 614.79px;
    }

    img.pin_20out_2_3 {
        top: 106px;
        right: 531.64px;
    }

    img.pin_20out_2_4 {
        top: 196px;
        right: 566.64px;
    }

    img.pin_20out_2_5 {
        top: 132px;
        right: 566.64px;
    }
}

@media (max-width: 1280px){
    img.quintadonarigao_1 {
        top: 115px;
        right: 504.72px;
    }

    img.azinhagadasteresinhas {
        top: 193px;
        right: 458.81px;
    }

    img.bairrodosloios_1 {
        top: 88px;
        right: 316.92px;
    }

    img.pin_20out_2_1 {
        top: 141.77px;
        right: 531.74px;
    }

    img.pin_20out_2_2 {
        top: 219.77px;
        right: 494.79px;
    }

    img.pin_20out_2_3 {
        top: 87px;
        right: 430.64px;
    }

    img.pin_20out_2_4 {
        top: 160px;
        right: 461.64px;
    }

    img.pin_20out_2_5 {
        top: 116px;
        right: 458.64px;
    }
}

@media (max-width: 1024px){
    img.quintadonarigao_1-tablet {
        width: 73.28px;
        height: 22.96px;
        position: absolute;
        top: 277px;
        left: 546px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.azinhagadasteresinhas-tablet {
        width: 87.19px;
        height: 22.96px;
        position: absolute;
        top: 343px;
        left: 615px;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.bairrodosloios_1-tablet {
        width: 111.08px;
        position: absolute;
        top: 222px;
        left: 764px;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.pin_20out_2_1-tablet {
        width: 20.36px;
        height: 20.41px;
        position: absolute;
        top: 305px;
        left: 573px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.pin_20out_2_2-tablet {
        width: 20.36px;
        height: 20.41px;
        position: absolute;
        top: 370px;
        left: 647px;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.pin_20out_2_3-tablet {
        width: 20.36px;
        height: 20.41px;
        position: absolute;
        top: 221px;
        left: 742px;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.pin_20out_2_4-tablet {
        width: 20.36px;
        height: 20.41px;
        position: absolute;
        top: 308px;
        left: 698px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.pin_20out_2_5-tablet {
        width: 20.36px;
        height: 20.41px;
        position: absolute;
        top: 260px;
        left: 708px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }
}

@media (max-width: 768px){
    img.quintadonarigao_1-tablet {
        top: 190px;
        left: 362px;
    }

    img.azinhagadasteresinhas-tablet {
        top: 259px;
        left: 401px;
    }

    img.bairrodosloios_1-tablet {
        top: 154px;
        left: 526px;
    }

    img.pin_20out_2_1-tablet {
        top: 217px;
        left: 389px;
    }

    img.pin_20out_2_2-tablet {
        top: 286px;
        left: 435px;
    }

    img.pin_20out_2_3-tablet {
        top: 153px;
        left: 504px;
    }

    img.pin_20out_2_4-tablet {
        top: 227px;
        left: 468px;
    }

    img.pin_20out_2_5-tablet {
        top: 183px;
        left: 473px;
    }
}

@media (max-width: 480px){
    img.quintadonarigao_1-tablet {
        top: 82px;
        left: 280px;
    }

    img.azinhagadasteresinhas-tablet {
        top: 160px;
        left: 300px;
    }

    img.bairrodosloios_1-tablet {
        top: 71px;
        left: 422px;
    }

    img.pin_20out_2_1-tablet {
        top: 108px;
        left: 308px;
    }

    img.pin_20out_2_2-tablet {
        top: 137px;
        left: 334px;
    }

    img.pin_20out_2_3-tablet {
        top: 71px;
        left: 401px;
    }

    img.pin_20out_2_4-tablet {
        top: 130px;
        left: 371px;
    }

    img.pin_20out_2_5-tablet {
        top: 90px;
        left: 377px;
    }
}

/* PÁGINA MAPA 21OUT */
img.bairrodosloios_2 {
    width: 111.08px;
    position: absolute;
    top: 121.76px;
    right: 747.72px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.skatepark {
    width: 70.51px;
    position: absolute;
    top: 361.23px;
    right: 671px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.zonaj {
    width: 41.26px;
    position: absolute;
    top: 599.23px;
    right: 475.2px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_21out_3_1 {
    width: 24px;
    height: 21px;
    position: absolute;
    top: 120px;
    right: 862.91px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.pin_21out_3_2 {
    width: 24px;
    height: 21px;
    position: absolute;
    top: 235px;
    right: 850.91px;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.pin_21out_3_3 {
    width: 24px;
    height: 21px;
    position: absolute;
    top: 356px;
    right: 743.91px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.pin_21out_3_4 {
    width: 24px;
    height: 21px;
    position: absolute;
    top: 595px;
    right: 517.91px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_21out_3_1:hover,
img.pin_21out_3_2:hover,
img.pin_21out_3_3:hover,
img.pin_21out_3_4:hover{
    transform: scale(1.5);
    mix-blend-mode: exclusion;
}

@media (max-width: 1920px){
    img.bairrodosloios_2 {
        top: 99.76px;
        right: 413.72px;
    }

    img.skatepark {
        top: 246.23px;
        right: 381px;
    }

    img.zonaj {
        top: 390.23px;
        right: 270.2px;
    }

    img.pin_21out_3_1 {
        top: 100px;
        right: 525.91px;
    }

    img.pin_21out_3_2 {
        top: 172px;
        right: 512.91px;
    }

    img.pin_21out_3_3 {
        top: 242px;
        right: 452.91px;
    }

    img.pin_21out_3_4 {
        top: 386px;
        right: 313.91px;
    }
}

@media (max-width: 1280px){
    img.bairrodosloios_2 {
        top: 81.76px;
        right: 315.72px;
    }

    img.skatepark {
        top: 192.23px;
        right: 300px;
    }

    img.zonaj {
        top: 299.23px;
        right: 226.2px;
    }

    img.pin_21out_3_1 {
        top: 82px;
        right: 426.91px;
    }

    img.pin_21out_3_2 {
        top: 131px;
        right: 414.91px;
    }

    img.pin_21out_3_3 {
        top: 188px;
        right: 369.91px;
    }

    img.pin_21out_3_4 {
        top: 295px;
        right: 267.91px;
    }
}

@media (max-width: 1024px){
    img.bairrodosloios_2-tablet {
        width: 111.08px;
        position: absolute;
        top: 227.76px;
        left: 779.2px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.skatepark-tablet {
        width: 70.51px;
        position: absolute;
        top: 411.23px;
        left: 872.48px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.zonaj-tablet {
        width: 41.29px;
        position: absolute;
        top: 594.23px;
        left: 1048.54px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.pin_21out_3_1-tablet {
        width: 24px;
        height: 21px;
        position: absolute;
        top: 228px;
        left: 754px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.pin_21out_3_2-tablet {
        width: 24px;
        height: 21px;
        position: absolute;
        top: 299px;
        left: 761px;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.pin_21out_3_3-tablet {
        width: 24px;
        height: 21px;
        position: absolute;
        top: 407px;
        left: 848px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.pin_21out_3_4-tablet {
        width: 24px;
        height: 21px;
        position: absolute;
        top: 590px;
        left: 1024px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.pin_21out_3_1-tablet:hover,
    img.pin_21out_3_2-tablet:hover,
    img.pin_21out_3_3-tablet:hover,
    img.pin_21out_3_4-tablet:hover{
        transform: scale(1.5);
        mix-blend-mode: exclusion;
    }
}

@media (max-width: 768px){
    img.bairrodosloios_2-tablet {
        top: 149px;
        left: 531px;
    }

    img.skatepark-tablet {
        top: 278.23px;
        left: 595.48px;
    }

    img.zonaj-tablet {
        top: 404.23px;
        left: 719.54px;
    }

    img.pin_21out_3_1-tablet {
        top: 149px;
        left: 507px;
    }

    img.pin_21out_3_2-tablet {
        top: 222px;
        left: 524px;
    }

    img.pin_21out_3_3-tablet {
        top: 274px;
        left: 571px;
    }

    img.pin_21out_3_4-tablet {
        top: 400px;
        left: 695px;
    }
}

@media (max-width: 480px){
    img.bairrodosloios_2-tablet {
        top: 70px;
        left: 423px;
    }

    img.skatepark-tablet {
        top: 168.23px;
        left: 472.48px;
    }

    img.zonaj-tablet {
        top: 263.23px;
        left: 563.54px;
    }

    img.pin_21out_3_1-tablet {
        top: 70px;
        left: 399px;
    }

    img.pin_21out_3_2-tablet {
        top: 114px;
        left: 404px;
    }

    img.pin_21out_3_3-tablet {
        top: 164px;
        left: 448px;
    }

    img.pin_21out_3_4-tablet {
        top: 259px;
        left: 540px;
    }
}

/* PÁGINA MAPA 22OUT */
img.avafonsocosta {
    width: 68.67px;
    position: absolute;
    top: 781.23px;
    right: 1008.93px;
    animation: dissolve-pins 2.4s ease;
    user-select: none;
}

img.bairrodocondado {
    width: 64.17px;
    position: absolute;
    top: 602.23px;
    right: 411.68px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.bairromarquesdeabrantes {
    width: 105.95px;
    position: absolute;
    top: 730.1px;
    right: 340.78px;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.pin_22out_4_1 {
    width: 18px;
    height: 21px;
    position: absolute;
    top: 600px;
    right: 518.21px;
    z-index: 1;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.pin_22out_4_2 {
    width: 18px;
    height: 21px;
    position: absolute;
    top: 680px;
    right: 561.21px;
    z-index: 1;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.pin_22out_4_3 {
    width: 18px;
    height: 21px;
    position: absolute;
    top: 747px;
    right: 480.21px;
    z-index: 1;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.pin_22out_4_4 {
    width: 18px;
    height: 21px;
    position: absolute;
    top: 747px;
    right: 439.21px;
    z-index: 1;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.pin_22out_4_5 {
    width: 18px;
    height: 21px;
    position: absolute;
    top: 777px;
    right: 468.21px;
    z-index: 1;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_22out_4_6 {
    width: 662px;
    height: 495px;
    position: absolute;
    top: 571px;
    right: 354px;
    animation: dissolve-percursos 3s ease;
    user-select: none;
}

img.pin_22out_4_1:hover,
img.pin_22out_4_2:hover,
img.pin_22out_4_3:hover,
img.pin_22out_4_4:hover,
img.pin_22out_4_5:hover{
    transform: scale(1.5);
    mix-blend-mode: exclusion;
}

img.pin_22out_4_6:hover{
    filter: invert(52%) sepia(6%) saturate(1183%) hue-rotate(75deg) brightness(96%) contrast(89%);
}

@media (max-width: 1920px){
    img.avafonsocosta {
        top: 493px;
        right: 617.33px;
    }

    img.bairrodocondado {
        top: 384px;
        right: 226.83px;
    }

    img.bairromarquesdeabrantes {
        top: 444px;
        right: 157.05px;
    }

    img.pin_22out_4_1 {
        top: 390px;
        right: 317.21px;
    }

    img.pin_22out_4_2 {
        top: 439px;
        right: 341.21px;
    }

    img.pin_22out_4_3 {
        top: 462px;
        right: 292.21px;
    }

    img.pin_22out_4_4 {
        top: 462px;
        right: 254.21px;
    }

    img.pin_22out_4_5 {
        top: 486px;
        right: 274.21px;
    }

    img.pin_22out_4_6 {
        width: 409px;
        height: 304.59px;
        position: absolute;
        top: 373.21px;
        right: 216px;
    }
}

@media (max-width: 1280px){
    img.avafonsocosta {
        top: 376px;
        right: 493.33px;
    }

    img.bairrodocondado {
        top: 278px;
        right: 199.83px;
    }

    img.bairromarquesdeabrantes {
        top: 328px;
        right: 128.05px;
    }

    img.pin_22out_4_1 {
        top: 300px;
        right: 272.21px;
    }

    img.pin_22out_4_2 {
        top: 335px;
        right: 290.21px;
    }

    img.pin_22out_4_3 {
        top: 342px;
        right: 251.21px;
    }

    img.pin_22out_4_4 {
        top: 345px;
        right: 223.21px;
    }

    img.pin_22out_4_5 {
        top: 362px;
        right: 237.21px;
    }

    img.pin_22out_4_6 {
        width: 302.13px;
        height: 225px;
        position: absolute;
        top: 291px;
        right: 200.87px;
    }
}

@media (max-width: 1024px){
    img.avafonsocosta-tablet {
        width: 68.67px;
        position: absolute;
        top: 726px;
        left: 594px;
        animation: dissolve-pins 2.4s ease;
        user-select: none;
    }

    img.bairrodocondado-tablet {
        width: 64.17px;
        position: absolute;
        top: 587px;
        left: 1075px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.bairromarquesdeabrantes-tablet {
        width: 105.95px;
        position: absolute;
        top: 686px;
        left: 1100px;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.pin_22out_4_1-tablet {
        width: 18px;
        height: 21px;
        position: absolute;
        top: 596px;
        left: 1028px;
        z-index: 1;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.pin_22out_4_2-tablet {
        width: 18px;
        height: 21px;
        position: absolute;
        top: 648px;
        left: 999px;
        z-index: 1;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.pin_22out_4_3-tablet {
        width: 18px;
        height: 21px;
        position: absolute;
        top: 700px;
        left: 1064px;
        z-index: 1;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.pin_22out_4_4-tablet {
        width: 18px;
        height: 21px;
        position: absolute;
        top: 703px;
        left: 1092px;
        z-index: 1;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.pin_22out_4_5-tablet {
        width: 18px;
        height: 21px;
        position: absolute;
        top: 721px;
        left: 1078px;
        z-index: 1;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.pin_22out_4_6-tablet {
        width: 518.32px;
        height: 386px;
        position: absolute;
        top: 569px;
        left: 654px;
        animation: dissolve-percursos 3.4s ease;
        user-select: none;
    }

    img.pin_22out_4_1-tablet:hover,
    img.pin_22out_4_2-tablet:hover,
    img.pin_22out_4_3-tablet:hover,
    img.pin_22out_4_4-tablet:hover,
    img.pin_22out_4_5-tablet:hover{
        transform: scale(1.5);
        mix-blend-mode: exclusion;
    }

    img.pin_22out_4_6-tablet:hover{
        filter: invert(52%) sepia(6%) saturate(1183%) hue-rotate(75deg) brightness(96%) contrast(89%);
    }
}

@media (max-width: 768px){
    img.avafonsocosta-tablet {
        top: 496px;
        left: 384px;
    }

    img.bairrodocondado-tablet {
        top: 399px;
        left: 732px;
    }

    img.bairromarquesdeabrantes-tablet {
        top: 456px;
        left: 755px;
    }

    img.pin_22out_4_1-tablet {
        top: 406px;
        left: 698px;
    }

    img.pin_22out_4_2-tablet {
        top: 447px;
        left: 675px;
    }

    img.pin_22out_4_3-tablet {
        top: 471px;
        left: 720px;
    }

    img.pin_22out_4_4-tablet {
        top: 473px;
        left: 748px;
    }

    img.pin_22out_4_5-tablet {
        top: 491px;
        left: 732px;
    }

    img.pin_22out_4_6-tablet {
        width: 360px;
        height: 268px;
        position: absolute;
        top: 390px;
        left: 441px;
    }
}

@media (max-width: 480px){
    img.avafonsocosta-tablet {
        top: 325px;
        left: 284px;
    }

    img.bairrodocondado-tablet {
        top: 236px;
        left: 572px;
    }

    img.bairromarquesdeabrantes-tablet {
        top: 281px;
        left: 594px;
    }

    img.pin_22out_4_1-tablet {
        top: 258px;
        left: 541px;
    }

    img.pin_22out_4_2-tablet {
        top: 291px;
        left: 521px;
    }

    img.pin_22out_4_3-tablet {
        top: 284px;
        left: 568px;
    }

    img.pin_22out_4_4-tablet {
        top: 297px;
        left: 586px;
    }

    img.pin_22out_4_5-tablet {
        top: 311px;
        left: 568px;
    }

    img.pin_22out_4_6-tablet {
        width: 289px;
        height: 204px;
        position: absolute;
        top: 248px;
        left: 341px;
    }
}

/* PÁGINA MAPA 23OUT */
img.romareeiro {
    width: 96.63px;
    position: absolute;
    top: 659px;
    right: 1281.37px;
    animation: dissolve-pins 2.8s ease;
    user-select: none;
}

img.bairrodasestacas {
    width: 70.61px;
    position: absolute;
    top: 598.23px;
    right: 1166.45px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.bairromarquesdeabrantes_1 {
    width: 105.95px;
    position: absolute;
    top: 755.1px;
    right: 356.78px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.bibliotecamarvila {
    width: 80.69px;
    position: absolute;
    top: 843.23px;
    right: 467px;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.docadopocobispo {
    width: 93.53px;
    position: absolute;
    top: 784.23px;
    right: 88.49px;
    animation: dissolve-pins 2.6s ease;
    user-select: none;
}

img.escolaafonsodmingues {
    width: 98.64px;
    position: absolute;
    top: 1009px;
    right: 442.36px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_23out_5_2 {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 912px;
    right: 364px;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.pin_23out_5_3 {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 774px;
    right: 165px;
    animation: dissolve-pins 2.6s ease;
    user-select: none;
}

img.pin_23out_5_4 {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 653px;
    right: 194px;
    animation: dissolve-pins 2.4s ease;
    user-select: none;
}

img.pin_23out_5_5 {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 772px;
    right: 344px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.pin_23out_5_6 {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 985px;
    right: 481px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_23out_5_7 {
    width: 792.49px;
    height: 302.43px;
    position: absolute;
    top: 641px;
    right: 485.01px;
    animation: dissolve-percursos 3.4s ease;
    user-select: none;
}

img.pin_23out_5_8 {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 605px;
    right: 1233px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.pin_23out_5_2:hover,
img.pin_23out_5_3:hover,
img.pin_23out_5_4:hover,
img.pin_23out_5_5:hover,
img.pin_23out_5_6:hover,
img.pin_23out_5_8:hover{
    transform: scale(1.5);
    mix-blend-mode: exclusion;
}

img.pin_23out_5_7:hover{
    filter: invert(90%) sepia(58%) saturate(5699%) hue-rotate(278deg) brightness(88%) contrast(98%);
}

@media (max-width: 1920px){
    img.romareeiro {
        top: 434px;
        right: 788.37px;
    }

    img.bairrodasestacas {
        top: 385px;
        right: 688.45px;
    }

    img.bairromarquesdeabrantes_1 {
        top: 465px;
        right: 171.05px;
    }

    img.bibliotecamarvila {
        top: 543px;
        right: 291.31px;
    }

    img.docadopocobispo {
        top: 499.23px;
        right: 26.49px;
    }

    img.escolaafonsodmingues {
        top: 650px;
        right: 254.36px;
    }

    img.pin_23out_5_2 {
        top: 579px;
        right: 223px;
    }

    img.pin_23out_5_3 {
        top: 491px;
        right: 102px;
    }

    img.pin_23out_5_4 {
        top: 424px;
        right: 120px;
    }

    img.pin_23out_5_5 {
        top: 496.9px;
        right: 209.27px;
    }

    img.pin_23out_5_6 {
        top: 625px;
        right: 293px;
    }

    img.pin_23out_5_7 {
        width: 495px;
        height: 188px;
        position: absolute;
        top: 425px;
        right: 290px;
    }

    img.pin_23out_5_8 {
        top: 392.77px;
        right: 755px;
    }
}

@media (max-width: 1280px){
    img.romareeiro {
        top: 331px;
        right: 633.37px;
    }

    img.bairrodasestacas {
        top: 288px;
        right: 532.45px;
    }

    img.bairromarquesdeabrantes_1 {
        top: 347px;
        right: 145.05px;
    }

    img.bibliotecamarvila {
        top: 413px;
        right: 260.31px;
    }

    img.docadopocobispo {
        top: 380.23px;
        right: 35.49px;
    }

    img.escolaafonsodmingues {
        top: 496px;
        right: 213.36px;
    }

    img.pin_23out_5_2 {
        top: 440px;
        right: 198px;
    }

    img.pin_23out_5_3 {
        top: 373px;
        right: 109px;
    }

    img.pin_23out_5_4 {
        top: 325px;
        right: 119px;
    }

    img.pin_23out_5_5 {
        top: 377.9px;
        right: 186.27px;
    }

    img.pin_23out_5_6 {
        top: 471px;
        right: 252px;
    }

    img.pin_23out_5_7 {
        width: 377px;
        height: 143px;
        position: absolute;
        top: 325px;
        right: 253px;
    }

    img.pin_23out_5_8 {
        top: 294.77px;
        right: 597px;
    }
}

@media (max-width: 1024px){
    img.romareeiro-tablet {
        width: 96.63px;
        position: absolute;
        top: 645px;
        left: 349px;
        animation: dissolve-pins 2.8s ease;
        user-select: none;
    }

    img.bairrodasestacas-tablet {
        width: 70.61px;
        position: absolute;
        top: 593px;
        left: 473.94px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.bairromarquesdeabrantes_1-tablet {
        width: 105.95px;
        position: absolute;
        top: 701px;
        left: 1119px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.bibliotecamarvila-tablet {
        width: 80.69px;
        position: absolute;
        top: 792px;
        left: 1001px;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.docadopocobispo-tablet {
        width: 93.53px;
        position: absolute;
        top: 734.23px;
        left: 1297.97px;
        animation: dissolve-pins 2.6s ease;
        user-select: none;
    }

    img.escolaafonsodmingues-tablet {
        width: 98.64px;
        position: absolute;
        top: 918px;
        left: 1015px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.pin_23out_5_2-tablet {
        width: 21px;
        height: 21px;
        position: absolute;
        top: 838px;
        left: 1146px;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.pin_23out_5_3-tablet {
        width: 21px;
        height: 21px;
        position: absolute;
        top: 726px;
        left: 1296px;
        animation: dissolve-pins 2.6s ease;
        user-select: none;
    }

    img.pin_23out_5_4-tablet {
        width: 21px;
        height: 21px;
        position: absolute;
        top: 638px;
        left: 1277px;
        animation: dissolve-pins 2.4s ease;
        user-select: none;
    }

    img.pin_23out_5_5-tablet {
        width: 21px;
        height: 21px;
        position: absolute;
        top: 732.9px;
        left: 1159.73px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.pin_23out_5_6-tablet {
        width: 21px;
        height: 21px;
        position: absolute;
        top: 895px;
        left: 1055px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.pin_23out_5_7-tablet {
        width: 631px;
        height: 246px;
        position: absolute;
        top: 632px;
        left: 449px;
        animation: dissolve-percursos 3.2s ease;
        user-select: none;
    }

    img.pin_23out_5_8-tablet {
        width: 21px;
        height: 21px;
        position: absolute;
        top: 598.77px;
        left: 460px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.pin_23out_5_2-tablet:hover,
    img.pin_23out_5_3-tablet:hover,
    img.pin_23out_5_4-tablet:hover,
    img.pin_23out_5_5-tablet:hover,
    img.pin_23out_5_6-tablet:hover,
    img.pin_23out_5_8-tablet:hover{
        transform: scale(1.5);
        mix-blend-mode: exclusion;
    }

    img.pin_23out_5_7-tablet:hover{
        filter: invert(90%) sepia(58%) saturate(5699%) hue-rotate(278deg) brightness(88%) contrast(98%);
    }
}

@media (max-width: 768px){
    img.romareeiro-tablet {
        top: 449px;
        left: 215px;
    }

    img.bairrodasestacas-tablet {
        top: 369px;
        left: 330.94px;
    }

    img.bairromarquesdeabrantes_1-tablet {
        top: 464px;
        left: 751px;
    }

    img.bibliotecamarvila-tablet {
        top: 541px;
        left: 651px;
    }

    img.docadopocobispo-tablet {
        top: 505px;
        left: 883px;
    }

    img.escolaafonsodmingues-tablet {
        top: 630px;
        left: 679px;
    }

    img.pin_23out_5_2-tablet {
        top: 564px;
        left: 781px;
    }

    img.pin_23out_5_3-tablet {
        top: 496px;
        left: 880px;
    }

    img.pin_23out_5_4-tablet {
        top: 435px;
        left: 869px;
    }

    img.pin_23out_5_5-tablet {
        top: 494.9px;
        left: 790.73px;
    }

    img.pin_23out_5_6-tablet {
        top: 608px;
        left: 719px;
    }

    img.pin_23out_5_7-tablet {
        width: 415.54px;
        height: 162px;
        position: absolute;
        top: 441px;
        left: 316px;
    }

    img.pin_23out_5_8-tablet {
        top: 375.77px;
        left: 316px;
    }
}

@media (max-width: 480px){
    img.romareeiro-tablet {
        top: 290px;
        left: 145px;
    }

    img.bairrodasestacas-tablet {
        top: 249px;
        left: 265.94px;
    }

    img.bairromarquesdeabrantes_1-tablet {
        top: 300px;
        left: 572px;
    }

    img.bibliotecamarvila-tablet {
        top: 358px;
        left: 479px;
    }

    img.docadopocobispo-tablet {
        top: 335px;
        left: 678px;
    }

    img.escolaafonsodmingues-tablet {
        top: 434px;
        left: 521px;
    }

    img.pin_23out_5_2-tablet {
        top: 393px;
        left: 606px;
    }

    img.pin_23out_5_3-tablet {
        top: 327px;
        left: 676px;
    }

    img.pin_23out_5_4-tablet {
        top: 274px;
        left: 674px;
    }

    img.pin_23out_5_5-tablet {
        top: 330.9px;
        left: 612.73px;
    }

    img.pin_23out_5_6-tablet {
        top: 411px;
        left: 558px;
    }

    img.pin_23out_5_7-tablet {
        width: 324px;
        height: 127px;
        position: absolute;
        top: 286px;
        left: 246px;
    }

    img.pin_23out_5_8-tablet {
        top: 255.77px;
        left: 252px;
    }
}

/* PÁGINA MAPA 24OUT */
img.quintadaholandesa {
    width: 71.39px;
    position: absolute;
    top: 571.23px;
    right: 953.29px;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.bairrodaflamenga {
    width: 75.77px;
    position: absolute;
    top: 388.23px;
    right: 817.23px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.metrodabelavista {
    width: 63px;
    position: absolute;
    top: 575.23px;
    right: 645.12px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.bairrodasmaendoeiras {
    width: 85.64px;
    position: absolute;
    top: 313px;
    right: 576.36px;
    animation: dissolve-pins 2.4s ease;
    user-select: none;
}

img.bairrodocondado_1 {
    width: 76.32px;
    position: absolute;
    top: 602.23px;
    right: 411.68px;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.arco {
    width: 30.31px;
    position: absolute;
    top: 1065.23px;
    right: 646.6px;
    animation: dissolve-pins 2.6s ease;
    user-select: none;
}

img.pin_24out_6_1 {
    width: 20px;
    height: 21px;
    position: absolute;
    top: 458px;
    right: 994.69px;
    z-index: 1;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.pin_24out_6_2 {
    width: 20px;
    height: 21px;
    position: absolute;
    top: 578px;
    right: 712.69px;
    z-index: 1;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_24out_6_4 {
    width: 308px;
    height: 904.84px;
    position: absolute;
    top: 180px;
    right: 656px;
    animation: dissolve-percursos 3.4s ease;
    user-select: none;
}

img.pin_24out_6_7 {
    width: 20px;
    height: 21px;
    position: absolute;
    top: 600px;
    right: 979.69px;
    z-index: 1;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.pin_24out_6_1:hover,
img.pin_24out_6_2:hover,
img.pin_24out_6_7:hover{
        transform: scale(1.5);
        mix-blend-mode: exclusion;
    }

img.pin_24out_6_4:hover{
    filter: invert(50%) sepia(13%) saturate(583%) hue-rotate(345deg) brightness(103%) contrast(87%);
}

@media (max-width: 1920px){
    img.quintadaholandesa {
        top: 369.23px;
        right: 567.61px;
    }

    img.bairrodaflamenga {
        top: 264px;
        right: 468.23px;
    }

    img.metrodabelavista {
        top: 378px;
        right: 368.29px;
    }

    img.bairrodasmaendoeiras {
        top: 215px;
        right: 321.36px;
    }

    img.bairrodocondado_1 {
        top: 410px;
        right: 255.68px;
    }

    img.arco {
        top: 669px;
        right: 385.69px;
    }

    img.pin_24out_6_1 {
        top: 305px;
        right: 604.69px;
    }

    img.pin_24out_6_2 {
        top: 382px;
        right: 435.69px;
    }

    img.pin_24out_6_4 {
        width: 185.51px;
        height: 545px;
        position: absolute;
        top: 138px;
        right: 403.19px;
    }

    img.pin_24out_6_7 {
        top: 397px;
        right: 595.01px;
    }
}

@media (max-width: 1280px){
    img.quintadaholandesa {
        top: 272.23px;
        right: 450.61px;
    }

    img.bairrodaflamenga {
        top: 205px;
        right: 374.23px;
    }

    img.metrodabelavista {
        top: 292px;
        right: 293.29px;
    }

    img.bairrodasmaendoeiras {
        top: 172px;
        right: 252.36px;
    }

    img.bairrodocondado_1 {
        top: 330px;
        right: 213.68px;
    }

    img.arco {
        top: 527px;
        right: 314.69px;
    }

    img.pin_24out_6_1 {
        top: 233px;
        right: 487.69px;
    }

    img.pin_24out_6_2 {
        top: 295px;
        right: 359.69px;
    }

    img.pin_24out_6_4 {
        width: 145.69px;
        height: 428px;
        position: absolute;
        top: 112px;
        right: 335.31px;
    }

    img.pin_24out_6_7 {
        top: 301px;
        right: 478.01px;
    }
}

@media (max-width: 1024px){
    img.quintadaholandesa-tablet {
        width: 71.39px;
        position: absolute;
        top: 566px;
        left: 643px;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.bairrodaflamenga-tablet {
        width: 75.77px;
        position: absolute;
        top: 421px;
        left: 743px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.metrodabelavista-tablet {
        width: 60.71px;
        position: absolute;
        top: 594px;
        left: 886px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.bairrodasmaendoeiras-tablet {
        width: 85.64px;
        position: absolute;
        top: 367px;
        left: 929px;
        animation: dissolve-pins 2.4s ease;
        user-select: none;
    }

    img.bairrodocondado_1-tablet {
        width: 76.32px;
        position: absolute;
        top: 674px;
        left: 960px;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.arco-tablet {
        width: 30.31px;
        position: absolute;
        top: 961px;
        left: 917px;
        animation: dissolve-pins 2.6s ease;
        user-select: none;
    }

    img.pin_24out_6_1-tablet {
        width: 20px;
        height: 21px;
        position: absolute;
        top: 483px;
        left: 656px;
        z-index: 1;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.pin_24out_6_2-tablet {
        width: 20px;
        height: 21px;
        position: absolute;
        top: 598px;
        left: 861px;
        z-index: 1;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.pin_24out_6_4-tablet {
        width: 242.36px;
        height: 712px;
        position: absolute;
        top: 265px;
        left: 691.66px;
        animation: dissolve-percursos 3.4s ease;
        user-select: none;
    }

    img.pin_24out_6_7-tablet {
        width: 20px;
        height: 21px;
        position: absolute;
        top: 595.77px;
        left: 668.68px;
        z-index: 1;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.pin_24out_6_1-tablet:hover,
    img.pin_24out_6_2-tablet:hover,
    img.pin_24out_6_7-tablet:hover{
        transform: scale(1.5);
        mix-blend-mode: exclusion;
    }

    img.pin_24out_6_4-tablet:hover{
        filter: invert(50%) sepia(13%) saturate(583%) hue-rotate(345deg) brightness(103%) contrast(87%);
    }
}

@media (max-width: 768px){
    img.quintadaholandesa-tablet {
        top: 431px;
        left: 428px;
    }

    img.bairrodaflamenga-tablet {
        top: 286px;
        left: 510px;
    }

    img.metrodabelavista-tablet {
        top: 412px;
        left: 601px;
    }

    img.bairrodasmaendoeiras-tablet {
        top: 255px;
        left: 632px;
    }

    img.bairrodocondado_1-tablet {
        top: 457px;
        left: 655px;
    }

    img.arco-tablet {
        top: 656px;
        left: 624px;
    }

    img.pin_24out_6_1-tablet {
        top: 327px;
        left: 441px;
    }

    img.pin_24out_6_2-tablet {
        top: 417px;
        left: 576px;
    }

    img.pin_24out_6_4-tablet {
        width: 164px;
        height: 483px;
        position: absolute;
        top: 186px;
        left: 472px;
    }

    img.pin_24out_6_7-tablet {
        top: 404.77px;
        left: 449.68px;
    }
}

@media (max-width: 480px){
    img.quintadaholandesa-tablet {
        top: 293px;
        left: 335px;
    }

    img.bairrodaflamenga-tablet {
        top: 178px;
        left: 404px;
    }

    img.metrodabelavista-tablet {
        top: 269px;
        left: 478px;
    }

    img.bairrodasmaendoeiras-tablet {
        top: 146px;
        left: 494px;
    }

    img.bairrodocondado_1-tablet {
        top: 299px;
        left: 537px;
    }

    img.arco-tablet {
        top: 472px;
        left: 470px;
    }

    img.pin_24out_6_1-tablet {
        top: 205px;
        left: 353px;
    }

    img.pin_24out_6_2-tablet {
        top: 273px;
        left: 454px;
    }

    img.pin_24out_6_4-tablet {
        width: 126.65px;
        height: 373px;
        position: absolute;
        top: 96px;
        left: 371.68px;
    }

    img.pin_24out_6_7-tablet {
        top: 266px;
        left: 357px;
    }
}

/* PÁGINA MAPA 25OUT */
img.mercado {
    width: 58.6px;
    position: absolute;
    top: 260px;
    right: 1288.4px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.estadio1demaio {
    width: 62.7px;
    position: absolute;
    top: 427px;
    right: 1201.86px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.cinemasalfa {
    width: 52.81px;
    position: absolute;
    top: 624px;
    right: 1075.19px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.avjoaoxxi {
    width: 72.15px;
    position: absolute;
    top: 757.27px;
    right: 1169.85px;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.bairrodaflamenga_2 {
    width: 63.83px;
    position: absolute;
    top: 414.23px;
    right: 779.07px;
    animation: dissolve-pins 2.6s ease;
    user-select: none;
}

img.feiradorelogio {
    width: 52.85px;
    position: absolute;
    top: 315.23px;
    right: 707.84px;
    animation: dissolve-pins 2.4s ease;
    user-select: none;
}

img.pin_25out_7_1 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 273.77px;
    right: 1309.05px;
    animation: dissolve-pins 1.4s ease;
    user-select: none;
}

img.pin_25out_7_2 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 342px;
    right: 725.6px;
    animation: dissolve-pins 2.4s ease;
    user-select: none;
}

img.pin_25out_7_3 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 442px;
    right: 804.6px;
    animation: dissolve-pins 2.6s ease;
    user-select: none;
}

img.pin_25out_7_4 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 651.77px;
    right: 1091.23px;
    animation: dissolve-pins 2s ease;
    user-select: none;
}

img.pin_25out_7_5 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 739px;
    right: 1197px;
    animation: dissolve-pins 2.2s ease;
    user-select: none;
}

img.pin_25out_7_7 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 429.12px;
    right: 1267.6px;
    animation: dissolve-pins 1.8s ease;
    user-select: none;
}

img.pin_25out_7_8 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 375px;
    right: 1346.6px;
    animation: dissolve-pins 1.6s ease;
    user-select: none;
}

img.pin_25out_7_1:hover,
img.pin_25out_7_2:hover,
img.pin_25out_7_3:hover,
img.pin_25out_7_4:hover,
img.pin_25out_7_5:hover,
img.pin_25out_7_7:hover,
img.pin_25out_7_8:hover{
    transform: scale(1.5);
    mix-blend-mode: exclusion;
}

@media (max-width: 1920px){
    img.mercado {
        top: 182px;
        right: 778.4px;
    }

    img.estadio1demaio {
        top: 287px;
        right: 708.86px;
    }

    img.cinemasalfa {
        top: 397px;
        right: 648.19px;
    }

    img.avjoaoxxi {
        top: 496.27px;
        right: 700.85px;
    }

    img.bairrodaflamenga_2 {
        top: 269px;
        right: 466.17px;
    }

    img.feiradorelogio {
        top: 211px;
        right: 425.15px;
    }

    img.pin_25out_7_1 {
        top: 194.77px;
        right: 800.05px;
    }

    img.pin_25out_7_2 {
        top: 235.77px;
        right: 440.92px;
    }

    img.pin_25out_7_3 {
        top: 295.77px;
        right: 489.7px;
    }

    img.pin_25out_7_4 {
        top: 423.77px;
        right: 664.23px;
    }

    img.pin_25out_7_5 {
        top: 478px;
        right: 728px;
    }

    img.pin_25out_7_7 {
        top: 288.12px;
        right: 771.6px;
    }

    img.pin_25out_7_8 {
        top: 253px;
        right: 816.6px;
    }
}

@media (max-width: 1280px){
    img.mercado {
        top: 137px;
        right: 607.4px;
    }

    img.estadio1demaio {
        top: 216px;
        right: 543.86px;
    }

    img.cinemasalfa {
        top: 295px;
        right: 513.19px;
    }

    img.avjoaoxxi {
        top: 383.27px;
        right: 551.85px;
    }

    img.bairrodaflamenga_2 {
        top: 204px;
        right: 375.17px;
    }

    img.feiradorelogio {
        width: 52.85px;
        position: absolute;
        top: 146px;
        right: 349.15px;
    }

    img.pin_25out_7_1 {
        top: 148.77px;
        right: 629.05px;
    }

    img.pin_25out_7_2 {
        top: 170.77px;
        right: 364.92px;
    }

    img.pin_25out_7_3 {
        top: 229.77px;
        right: 398.7px;
    }

    img.pin_25out_7_4 {
        top: 321.77px;
        right: 530.23px;
    }

    img.pin_25out_7_5 {
        top: 366px;
        right: 579px;
    }

    img.pin_25out_7_7 {
        top: 221.12px;
        right: 606.6px;
    }

    img.pin_25out_7_8 {
        top: 199px;
        right: 637.6px;
    }
}

@media (max-width: 1024px){
    img.mercado-tablet {
        width: 58.6px;
        position: absolute;
        top: 332px;
        left: 395px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.estadio1demaio-tablet {
        width: 62.7px;
        position: absolute;
        top: 461px;
        left: 467.45px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.cinemasalfa-tablet {
        width: 52.81px;
        position: absolute;
        top: 610px;
        left: 564px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.avjoaoxxi-tablet {
        width: 72.15px;
        position: absolute;
        top: 727.27px;
        left: 473px;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.bairrodaflamenga_2-tablet {
        width: 63.83px;
        position: absolute;
        top: 448px;
        left: 783px;
        animation: dissolve-pins 2.6s ease;
        user-select: none;
    }

    img.feiradorelogio-tablet {
        width: 52.85px;
        position: absolute;
        top: 374px;
        left: 852px;
        animation: dissolve-pins 2.4s ease;
        user-select: none;
    }

    img.pin_25out_7_1-tablet {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 344.77px;
        left: 414.55px;
        animation: dissolve-pins 1.4s ease;
        user-select: none;
    }

    img.pin_25out_7_2-tablet {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 398.77px;
        left: 867.68px;
        animation: dissolve-pins 2.4s ease;
        user-select: none;
    }

    img.pin_25out_7_3-tablet {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 474.77px;
        left: 805.9px;
        animation: dissolve-pins 2.6s ease;
        user-select: none;
    }

    img.pin_25out_7_4-tablet {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 636.77px;
        left: 582.37px;
        animation: dissolve-pins 2s ease;
        user-select: none;
    }

    img.pin_25out_7_5-tablet {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 707px;
        left: 500.6px;
        animation: dissolve-pins 2.2s ease;
        user-select: none;
    }

    img.pin_25out_7_7-tablet {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 462.12px;
        left: 448px;
        animation: dissolve-pins 1.8s ease;
        user-select: none;
    }

    img.pin_25out_7_8-tablet {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 421px;
        left: 389px;
        animation: dissolve-pins 1.6s ease;
        user-select: none;
    }

    img.pin_25out_7_1-tablet:hover,
    img.pin_25out_7_2-tablet:hover,
    img.pin_25out_7_3-tablet:hover,
    img.pin_25out_7_4-tablet:hover,
    img.pin_25out_7_5-tablet:hover,
    img.pin_25out_7_7-tablet:hover,
    img.pin_25out_7_8-tablet:hover{
        transform: scale(1.5);
        mix-blend-mode: exclusion;
    }
}

@media (max-width: 768px){
    img.mercado-tablet {
        top: 220px;
        left: 259px;
    }

    img.estadio1demaio-tablet {
        top: 313px;
        left: 315.45px;
    }

    img.cinemasalfa-tablet {
        top: 412px;
        left: 371px;
    }

    img.avjoaoxxi-tablet {
        top: 499.27px;
        left: 308px;
    }

    img.bairrodaflamenga_2-tablet {
        top: 295px;
        left: 522px;
    }

    img.feiradorelogio-tablet {
        top: 242px;
        left: 572px;
    }

    img.pin_25out_7_1-tablet {
        top: 231.77px;
        left: 276.55px;
    }

    img.pin_25out_7_2-tablet {
        top: 266.77px;
        left: 587.68px;
    }

    img.pin_25out_7_3-tablet {
        top: 320.77px;
        left: 544.9px;
    }

    img.pin_25out_7_4-tablet {
        top: 438.77px;
        left: 389.37px;
    }

    img.pin_25out_7_5-tablet {
        top: 480px;
        left: 335.6px;
    }

    img.pin_25out_7_7-tablet {
        top: 287px;
        left: 264px;
    }

    img.pin_25out_7_8-tablet {
        top: 313px;
        left: 299px;
    }
}

@media (max-width: 480px){
    img.mercado-tablet {
        top: 119px;
        left: 205px;
    }

    img.estadio1demaio-tablet {
        top: 186px;
        left: 269.45px;
    }

    img.cinemasalfa-tablet {
        top: 257px;
        left: 292px;
    }

    img.avjoaoxxi-tablet {
        top: 339.27px;
        left: 242px;
    }

    img.bairrodaflamenga_2-tablet {
        top: 171px;
        left: 403px;
    }

    img.feiradorelogio-tablet {
        top: 118px;
        left: 454px;
    }

    img.pin_25out_7_1-tablet {
        top: 130.77px;
        left: 224.55px;
    }

    img.pin_25out_7_2-tablet {
        top: 142.77px;
        left: 470.68px;
    }

    img.pin_25out_7_3-tablet {
        top: 197.77px;
        left: 425.9px;
    }

    img.pin_25out_7_4-tablet {
        top: 282.77px;
        left: 310.37px;
    }

    img.pin_25out_7_5-tablet {
        top: 320px;
        left: 269.6px;
    }

    img.pin_25out_7_7-tablet {
        top: 181px;
        left: 208px;
    }

    img.pin_25out_7_8-tablet {
        top: 195.12px;
        left: 249px;
    }
}