body{
width: 100%;
max-width: 800px;
margin: auto;
background:#ffffff;
}
.interactivo span{
  padding: 20px 40px;
display: inline-block;
font-style: italic;
text-align: center;
}
.interactivo img{
width:100%;
max-width: 49.5%;
vertical-align: middle;
display: inline-block;
}
@media only screen and (max-width : 600px) {
  .interactivo img{
    width: 100%;
    max-width: 100%;
  }
}
.interactivo a:link {
  color: #4c4c4c;
}
.interactivo a:visited {
  color: #4c4c4c;
}
.interactivo a:hover {
  color: #222526;
}
.interactivo a:active {
  color: #222526;
}
.interactivo{
font-family: Arial, Helvetica, sans-serif !important;
background:#ffffff;
border: 2px solid #d6d0d0;
box-sizing: border-box;
padding: 10px;
/* margin:20px 0; */
}
.interactivo section {
position: relative;
}
.interactivo section ul {
list-style: none;
margin: 0;
}
.interactivo section ul li {
position: absolute;
cursor: pointer;
}
.interactivo section ul li:after {
animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: pop;
border-radius: 50%;
border: 1px solid #ce606f;
content: '';
height: 2em;
left: 0;
margin: -.5em 0 0 -.5em;
opacity: 0;
position: absolute;
top: 0;
width: 2em;
}
.interactivo section ul li a {
display: none;
text-decoration: none;
color: #b2061b;
font-size: .8rem;
}
.interactivo section ul li section.top{
display: none;
left: 150%;
position: absolute;
bottom: 35%;
transform: translate(-45%, -2em);
width: 12em;
z-index: 999;
}
.interactivo section ul li section.right{
display: none;
left: 290%;
position: absolute;
bottom: -190%;
transform: translate(-45%, -2em);
width: 10em;
z-index: 999;
}
.interactivo section ul li section.right article:after {
border-top: .75em solid transparent;
border-right: 1em solid #ffffff;
border-bottom: .75em solid transparent;
content: '';
height: 0;
left: 0%;
position: absolute;
top: 40%;
transform: translateX(-100%);
width: 0;
}
.interactivo section ul li:hover section {
display: block;
}
.interactivo section ul li section article {
border-radius: .5em;
box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
}
.interactivo section ul li section article:after {
border-left: .75em solid transparent;
border-right: .75em solid transparent;
border-top: 1em solid #fff;
content: '';
height: 0;
left: 24%;
position: absolute;
top: 100%;
transform: translateX(-50%);
width: 0;
}
.interactivo section ul li section article header {
background-color: #ce606f;
border-radius: .5em .5em 0 0;
color: #fff;
padding: 10px 15px;
}
.interactivo section ul li section article h2 {
margin: 0;
font-size: 1rem !important;
}
.interactivo section ul li section article main {
background-color: #fff;
border-radius: 0 0 .5em .5em;
color: #7e7e7e;
padding: 10px 15px;
}
.interactivo section ul li section article main p{
margin:0;
font-size: .875em !important;
}
.interactivo footer{
border-top: 3px solid #ffffff;
background:#d6d0d0;
}
.interactivo footer ol{
display: flex;
padding: 10px;
list-style:none;
margin: 0;
}
.interactivo footer ol li section {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.interactivo footer ol li{
width:50%;
display: flex;
align-items: center;
}
.interactivo footer ol li section main:after {
animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: pop;
border-radius: 50%;
border: 1px solid #ce606f;
content: '';
height: 2em;
left: 0;
margin: -.5em 0 0 -.5em;
opacity: 0;
position: absolute;
top: 0;
width: 2em;
}
.interactivo footer ol li section main button {
display: flex;
align-items: center;
background: #778da1;
border: none;padding: 6px 13px;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.interactivo footer ol li section main button img{
max-width:12px;
margin-right:5px;
}
.interactivo footer ol li section main a {
color: #7e7e7e;
text-decoration: none;
}
.interactivo footer ol li section main a:hover {
background: #ececec;
}
.interactivo footer ol li section main a figure{
display: flex;
align-items: center;
margin: 0;
padding: 5px 8px;
}
.interactivo footer ol li section main a figure img{
 max-width: 20px;
 margin-right: 9px;
}
.interactivo footer ol li section main:hover section {
display: block;
}
.interactivo footer ol li section main section {
display: none;
left: -110%;
position: absolute;
bottom: 110%;
z-index: 999;
width: 210%;
}
.interactivo footer ol li section main section article {
border-radius: .5em;
box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
background: #ffffff;
padding: 10px;
display: flex;
flex-direction: column;
}
.interactivo footer ol li section main section article:after {
border-left: .5em solid transparent;
border-right: .5em solid transparent;
border-top: .6em solid #fff;
content: '';
height: 0;
left: 62%;
position: absolute;
top: 100%;
transform: translateX(-50%);
width: 0;
}
.punto01 { left: 16%;top: 2%;}
.punto01:after {animation-delay: 5s;}
.punto02 {left: 19%;top: 23%;}
.punto02:after {animation-delay: 5s;}
.punto03 {left: 56%;top: 45%;}}
.punto03:after {animation-delay: 3s;}
.punto04 {left: 28%;top: 67%;}
.punto04:after {animation-delay: 5s;}
.punto05 {left: 50%;top: 90%;}
.punto05:after {animation-delay: 3s;}
.punto06 {left: 34%;top: 73%;}
.punto06:after {animation-delay: 5s;}
.punto07 {left: 26%;top: 33%;}
.punto07:after {animation-delay: 5s;}
.tooltips {
animation-duration: .75s;animation-name: bounce-in;
}
@keyframes bounce-in {
0%, 20%, 40%, 60%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
0% {opacity: 0;transform: scale3d(0.3, 0.3, 0.3);}
20% {transform: scale3d(1.1, 1.1, 1.1);}
40% {transform: scale3d(0.9, 0.9, 0.9);}
60% {opacity: 1;transform: scale3d(1.03, 1.03, 1.03);}
80% {transform: scale3d(0.97, 0.97, 0.97);}
100% {opacity: 1;transform: scale3d(1, 1, 1);}
}
.pulso {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
margin: 10px;
height: 20px;
width: 20px;
transform: scale(1);
animation: pulse-black 2s infinite;
}
.pulso.red {
background: rgba(255, 82, 82, 1);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% {transform: scale(0.95);box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);}
70% {transform: scale(1);box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);}
100% {transform: scale(0.95);box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);}
}