figure.below > video {width:100%;}

.hero-background-video-controls {
  right: 3vw;
  cursor: pointer;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 6;
  top: 3vw;
  max-height: 77px;
  display: inline-flex;
  align-items: center;
  position: absolute;
}

.button-hero-video {
    cursor: pointer;
    border:0;
    background-repeat: no-repeat;
    overflow: hidden;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    height:44px;
    width:74px;
    text-align: right;
    padding: 2.5px 11px 0 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.7);
        transition-duration: .5s;
    transition-property: color;
}

.button-hero-video.button-hero-video.button-hero-video-fill.paused {
    padding: 2.5px 18px 0 0;
}

.button-hero-video:hover {
       color: rgba(255, 255, 255, 1);
}

.button-hero-video:hover i.pause,
.button-hero-video:hover i.play{opacity:1;}

.button-hero-video i.play {
    width: 8px;
    height: 19px;
    margin-left: 11px;
    background-image: url(/newsinteractives/content/common/play-hero.svg);
    background-position: 0% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
    opacity:.7;
    transition-duration: .5s;
    transition-property: opacity;
}

.button-hero-video i.pause {
    width: 8px;
    height: 19px;
    margin-left: 10px;
    background-image: url(/newsinteractives/content/common/pause-hero.svg);
    background-position: 0% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    float:left;
    opacity:.7;
    transition-duration: .5s;
    transition-property: opacity;
}