section.grafico {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    line-height: 23px;
    padding: 0;
    margin: 0;
  }

  
  section.grafico {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    min-height: 100vh;
    padding: 50px 0;
    background-color: #000;
  }

  section.grafico h2 {
    color: #fff;
  }

  section.grafico span {
      font-weight: 700;
  }
  .names {
    width: 100%;
    max-width: 810px;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
  }


  .name_display {
      position: relative;
  }

  .name_display .corazon { 
      position: absolute;
      left: 0;
      top: -5px;
      z-index: 4;
      width: 57px;
  }

  .name_display .corazon img {
      width: 100%;
  }
  .names .nombre {
    position: relative;
    display: inline-block;
    padding: 10px 0px 10px 2px;
    font-size: 13px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: #fff;
    max-width: 65px;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .nomspan {
      padding: 0 10px;
  }
  .info {
    position: relative;
    height: 0;
    width: 98vw;
    max-width: 450px;
    margin-left: -180px;
    border-radius: 10px;
    background-color: #fff;
    transition: height .8s;
  }

  .infohtml {
    position: absolute;
    top: 0;
    border-radius: 10px;
    width: 100%;
    padding-top: 15px;
    color: #000;
    z-index: 2;
    opacity: 0;
    text-align: center;
    pointer-events: none;
    transition: opacity .3s;
    left: 0;
  }

  .infohtmltext {
    text-align: left;
    padding: 10px;
  }
  .downarrow {
    position: absolute;
    top: 0px;
    left: 48%;
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 6px;
    /* background: linear-gradient(-45deg, #FFC0CB 50%, transparent 50%); */
    margin-left: -10px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .downarrow.intimo {
    background: linear-gradient(-45deg, #fb8072 50%, transparent 50%);
  }

  .downarrow.transfeminicidio {
    background: linear-gradient(-45deg, #bc80bd 50%, transparent 50%);
  }

  .downarrow.familiar {
    background: linear-gradient(-45deg, #fdb462 50%, transparent 50%);
  }

  .downarrow.investigado {
    background: linear-gradient(-45deg, #d9d9d9 50%, transparent 50%);
  }

  .downarrow.otro {
    background: linear-gradient(-45deg, #80b1d3 50%, transparent 50%);
  }

.cuads {
  max-width: 415px;
    margin: 0 auto;

    padding: 0 15px;

}

  .cuads img {
    width: 100%;
  }

  .legend {
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
  }

  .grafico h3 {
    color:#fff;padding: 0 20px;font-size:21px;font-weight: 700;
  }
  
/*PULSE*/

.anim {

  position: absolute;
    bottom: 25%;
    pointer-events: none;
    right: 30%;

}

.manito {
    position: absolute;
    top: 0;
    width: 25px;
    left: 0;
}

.manito img {
    transform: rotate(-45deg);
}
.pulse { 
    position: absolute;
    top: 25%;
    left: 30%;
    width: 1px;
    height: 1px;
    transform: translate(-505, -50%);
    
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 0 0 3px #fff, 0 0 0 2px #fff;
        } 
  
        .pulse:before, 
        .pulse:after { 
            content: ''; 
            position: absolute; 
            left: -30px; 
            top: -30px; 
            right: -30px; 
            bottom: -30px; 
            border: 2px solid #fff; 
            border-radius: 50%; 
            animation: animate 3s linear infinite;
        } 
  
        .pulse:after { 
            animation-delay: 1s; 
        } 
  
        @keyframes animate { 
            100% { 
                transform: scale(0.8); 
            } 
  
            0% { 
                transform: scale(0.2); 
            } 
        } 
   
        

        .uvn-infografia-video {
            max-width: 645px;
            margin: 0 auto;
            margin-bottom: 20px;
        }

        .uvn-infografia-video video {
            width: 100%;
        }


        .vid1 {
            padding-top: 0;
        }

        .separador {
            width: 120px;
            margin: 35px auto -28px auto;
            border-bottom: 2px solid #000;
        }

        .subtituloVideo {
            width: 100%;
            max-width: 680px;
            margin: 0 auto 20px auto;
            position: relative;
        }

        .subtituloVideo strong {
            font-family: 'Special Elite', cursive;
        }

        .subtituloVideo .subtituloTexto {
            font-family: 'Special Elite', cursive;
            font-size: 16px;
            line-height: 21px;
            background-color: #ffd400;
            padding: 10px 14px;
            position: relative;
            text-align: center;
            box-shadow: 1px 1px 3px;
        }

        .subtituloVideo .uvn-infografia-video {
            width: 100%;
            max-width: 680px;
            margin-top: 0px;
            margin: 0px auto 20px auto;
        }


        .subtituloVideo .subtituloTexto:after {
            content: '';
            position: absolute;
            bottom: 0%;
            left: 48%;
            width: 0;
            height: 0;
            border: 23px solid transparent;
            border-top-color: #ffd400;
            margin-left: -16px;
            margin-bottom: -43px;
        }


        /*VIDEO CON SUBTÍTULOS Y SLIDER*/
        .subtituloVideo {
            width: 100%;
            max-width: 680px;
            margin: 0 auto 20px auto;
            position: relative;
        }

        .subtituloVideo strong {
            font-family: 'Special Elite', cursive;
        }

        .subtituloVideo .subtituloTexto {
            font-family: 'Special Elite', cursive;
            font-size: 16px;
            line-height: 21px;
            background-color: #ffd400;
            padding: 10px 14px;
            position: relative;
            box-shadow: 1px 1px 3px;
        }

        .subtituloVideo .uvn-infografia-video {
            max-width: 680px;
            margin: 0px auto 20px auto;
        }

        .subtituloVideo .subtituloTexto:after {
            content: '';
            position: absolute;
            bottom: 0%;
            left: 48%;
            width: 0;
            height: 0;
            border: 23px solid transparent;
            border-top-color: #ffd400;
            margin-left: -16px;
            margin-bottom: -43px;
        }


        .placeholder {
            position: absolute;
            z-index: 2;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            pointer-events: none;
            transition: opacity 1s;
           }
    
           .placeholder img {
               width: 100%;
           }
    
           .jw-display-container {
               position: relative;
               z-index:10;
               text-align: left !important;
               vertical-align: top !important;
               padding: 15px 5px !important;
           }
    
           .jw-display-icon-rewind {
               display: none !important;
           }
    
           .fmg-rating-overlay {
               display: none !important;
           }

           
           .grafico h3.cuadh3 {
            color:#fff;padding: 20px 20px 0px;font-size:21px;font-weight: 700;width: 100%;text-align:center;max-width: 640px;
           }

           .fullname {
               font-weight: 700;
               margin-top: -5px;
               margin-bottom: 12px;
           }

           .val {
               font-weight: 700;
           }

           .tarj {
               display: inline-block;
               width: 48%;
           }

           .metodologia {
            margin: 40px auto;
            padding: 10px;
            font-size: 14px;
            color: gray;
            max-width: 600px;
            position: relative;
           }

           .metodologia:before {
               content:'';
               width:100px;
                border-top: 1px solid gray;
                position: absolute;
                top: -10px;
                left: 0;
           }

           a.dotted_link {
               color: #000;
               text-decoration: none;
               border-bottom: 1px dotted #000;
           }

           section.grafico a.dotted_link {
               color: #fff;
               border-bottom: 1px dotted #fff;
           }


.barra_superior .compartir {
  position: fixed;
  right: 0;
  top: 6px;
  transition: all 0.3s ease-out;
  z-index: 10000000;
  cursor: pointer;
}

.barra_superior .compartir {
  height: auto;
  width: 48px;
  height: 0;
  overflow: hidden;
  padding-top: 48px;
  background: url('https://static.univision.com/especiales/noticias/2018/sobreviviendo-al-huracan-maria-puerto-rico/assets/compartir.svg') no-repeat center 12px / 24px auto;
  position: absolute;
  right: 0;
  top: 5px;
  cursor: pointer;
}

.barra_superior .compartir.opened {
  height: 148px;
  background: url('https://static.univision.com/especiales/noticias/2018/sobreviviendo-al-huracan-maria-puerto-rico/assets/up_arrow.svg') no-repeat center 10px / 16px auto;
}

.barra_superior .compartir a {
  position: relative;
  z-index: 1999;
  width: 48px;
  height: 48px;
  display: block;
}

.barra_superior .compartir a.compartir_whatsapp {
  display: none;
}



.c_especial.movil .barra_superior .compartir a.compartir_whatsapp {
  display: block;
}

.barra_superior .compartir:after,
.barra_superior .compartir a:after {
  background-repeat: no-repeat;
  background-size: 25px auto;
  background-position: center center;
  content: ' ';
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

.barra_superior .compartir .compartir_twitter:after {
  background-image: url('https://static.univision.com/especiales/noticias/2018/sobreviviendo-al-huracan-maria-puerto-rico/assets/twitter.svg');
}

.barra_superior .compartir .compartir_facebook:after {
  background-image: url('https://static.univision.com/especiales/noticias/2018/sobreviviendo-al-huracan-maria-puerto-rico/assets/facebook.svg');
}

.barra_superior .compartir .compartir_whatsapp:after {
  background-image: url('https://static.univision.com/especiales/noticias/2018/sobreviviendo-al-huracan-maria-puerto-rico/assets/whatsapp.svg');
  background-size: 24px auto;
}


  @media screen and (min-width: 385px) {
    .names .nombre {
      max-width: 70px;
    }
  }
  @media screen and (min-width: 720px) {

    .downarrow {
        left: 48%;
    }
    .anim {
        right: 35%;
    }
    .grafico h3.cuadh3 {
        font-size: 25px;
    }

    .grafico h3 {
        font-size: 25px;
    }
    .names .nombre {
        max-width: 130px;
        font-size: 15px;
        padding: 10px 0;
        text-align: left;
    }
  }