/* ==========================================================================

MAPA REPRESENTANTES

========================================================================== */

.mapa{

width: 608px;

float: right;

position: relative;

margin-bottom: -20px;

/* background: url(../imagens/bg-mapa.jpg); */
}

.mapa img{

width: 440px;

margin-top: 176px;
}

.mapa h2{

text-align: center;

}

.mapa a{text-decoration: none;color: white;background: darkred;box-sizing: border-box;padding: 3px;text-align: center;width: 25px;height: 33px;border-radius: 5px;transition: 0.5s;font-size: 11px;box-shadow: 3px 3px 8px #333;}

.mapa a:hover{

transform: scale(1.3);

}

.mapa #position-ac{

position: absolute;

top: 154px;

left: 25px;

}

.mapa #position-al{position: absolute;top: 158px;right: 5px;}

.mapa #position-ap{

position: absolute;

top: 42px;

right: 164px;

}

.mapa #position-am{

position: absolute;

top: 95px;

left: 90px;

}

.mapa #position-ba{

position: absolute;

top: 175px;

right: 66px;

}

.mapa #position-ce{

position: absolute;

top: 100px;

right: 46px;

}

.mapa #position-df{

position: absolute;

top: 202px;

left: 244px;

}

.mapa #position-es{

position: absolute;

bottom: 154px;

left: 335px;

}

.mapa #position-go{

position: absolute;

bottom: 182px;

left: 220px;

}

.mapa #position-ma{

position: absolute;

top: 102px;

left: 275px;

}

.mapa #position-mt{

position: absolute;

bottom: 222px;

right: 140px;

width: auto;

border: 2px solid #fff;

background: #53af32;
}

.mapa #position-ms{

position: absolute;

bottom: 152px;

right: 190px;

}

.mapa #position-mg{

position: absolute;

bottom: 170px;

right: 90px;

width: auto;

background: #009640;

border: 2px solid #fff;
}

.mapa #position-pa{position: absolute;top: 105px;left: 140px;background: #007632;border: 2px solid #fff;width: fit-content;padding: 4px;}

.mapa #position-pb{

position: absolute;

top: 120px;

right: 0px;

}

.mapa #position-pr{

position: absolute;

bottom: 111px;

right: 164px;

}

.mapa #position-pe{

position: absolute;

top: 139px;

right: 0px;

}

.mapa #position-pi{

position: absolute;

top: 149px;

right: 35px;

width: auto;

background: #a0c518;

border: 2px solid #fff;

padding: 4px;
}

.mapa #position-rj{

position: absolute;

bottom: 122px;

left: 312px;

}

.mapa #position-rn{

position: absolute;

top: 98px;

right: 12px;

}

.mapa #position-rs{

position: absolute;

bottom: 60px;

right: 180px;

}

.mapa #position-ro{

position: absolute;

top: 165px;

left: 100px;

}

.mapa #position-rr{

position: absolute;

top: 35px;

left: 120px;

}

.mapa #position-sc{

position: absolute;

bottom: 100px;

right: 150px;

width: auto;

background: #00672c;

border: 2px solid #fff;
}

.mapa #position-sp{

position: absolute;

bottom: 135px;

right: 135px;

}

.mapa #position-se{position: absolute;top: 175px;right: 22px;}

.mapa #position-to{position: absolute;top: 158px;right: 130px;}

.representante{

float: left;

width: 450px;

position: relative;

}

.representante div{

display: none;

}

#select-mapa{

display: none;

border: 1px solid #ccc;

width: 100%;

}

@media only screen and (min-width:767px) and (max-width: 959px){

.representante{

width: 280px!important;

}

}

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

#select-mapa{

display: block !important;

border: 1px solid #ccc;

width: 100%;

}

.mapa{

display: none;

}

.representante{

width: 100% !important;

}

}/* ==========================================================================

MAPA REPRESENTANTES

========================================================================== */

.mapa{

width: 608px;

float: right;

position: relative;

margin-bottom: -20px;

/* background: url(../imagens/bg-mapa.jpg); */

padding: 0;
}

.mapa h2{

text-align: center;

}

/*.mapa a{text-decoration: none;color: white;background: darkred;box-sizing: border-box;padding: 3px;text-align: center;width: 25px;height: 22px;border-radius: 5px;transition: 0.5s;font-size: 11px;box-shadow: 3px 3px 8px #333;}*/

.mapa a:hover{

transform: scale(1.3);

}

.mapa #position-ac{

position: absolute;

top: 154px;

left: 25px;

}

.mapa #position-al{position: absolute;top: 158px;right: 5px;}

.mapa #position-ap{

position: absolute;

top: 42px;

right: 164px;

}

.mapa #position-am{

position: absolute;

top: 95px;

left: 90px;

}

.mapa #position-ba{

position: absolute;

top: 175px;

right: 66px;

}

.mapa #position-ce{

position: absolute;

top: 100px;

right: 46px;

}

.mapa #position-df{

position: absolute;

top: 202px;

left: 244px;

}

.mapa #position-es{

position: absolute;

bottom: 154px;

left: 335px;

}

.mapa #position-go{

position: absolute;

bottom: 182px;

left: 220px;

}

.mapa #position-ma{

position: absolute;

top: 102px;

left: 275px;

}

.mapa #position-mt{

position: absolute;

bottom: 226px;

right: 340px;

width: auto;

border: 2px solid #fff;

background: #53af32;
}

.mapa #position-ms{

position: absolute;

bottom: 152px;

right: 190px;

}

.mapa #position-mg{

position: absolute;

bottom: 190px;

right: 260px;

width: auto;

background: #009640;

border: 2px solid #fff;
}

.mapa #position-pa{position: absolute;top: 269px;left: 138px;background: #007632;border: 2px solid #fff;width: fit-content;padding: 2px 7px 2px 7px;}

.mapa #position-pb{

position: absolute;

top: 120px;

right: 0px;

}

.mapa #position-pr{

position: absolute;

bottom: 111px;

right: 164px;

}

.mapa #position-pe{

position: absolute;

top: 139px;

right: 0px;

}

.mapa #position-pi{

position: absolute;

top: 336px;

right: 205px;

width: auto;

background: #a0c518;

border: 2px solid #fff;

padding: 4px;
}

.mapa #position-rj{

position: absolute;

bottom: 122px;

left: 312px;

}

.mapa #position-rn{

position: absolute;

top: 98px;

right: 12px;

}

.mapa #position-rs{

position: absolute;

bottom: 60px;

right: 180px;

}

.mapa #position-ro{

position: absolute;

top: 165px;

left: 100px;

}

.mapa #position-rr{

position: absolute;

top: 35px;

left: 120px;

}

.mapa #position-sc{

position: absolute;

bottom: 70px;

right: 360px;

width: auto;

background: #00672c;

border: 2px solid #fff;
}

.mapa #position-sp{

position: absolute;

bottom: 135px;

right: 135px;

}

.mapa #position-se{position: absolute;top: 175px;right: 22px;}

.mapa #position-to{position: absolute;top: 158px;right: 130px;}

.representante{

float: left;

width: 450px;

position: relative;

}

.representante div{

display: none;

}

#select-mapa{

display: none;

border: 1px solid #ccc;

width: 100%;

}

@media only screen and (min-width:767px) and (max-width: 959px){

.representante{

width: 280px!important;

}

}

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

#select-mapa{

display: block !important;

border: 1px solid #ccc;

width: 100%;

}

.mapa{

display: none;

}

.representante{

width: 100% !important;

}

}