LayerSlider renders div blurry on mobile

I’ve configured a layerslider with a div layer that contains text and the positioning on the layer itself which produces the following:
<div class="cta_button" style="width: 200px; height: 40px; font-size: 20px; line-height: 40px; white-space: nowrap; padding: 0px; border-width: 1px;"> Sign Up for Free </div>

The rest of the styles are located on the external class, with style as follows

  .alternate_color div.cta_button,
  .cta_button{
  	color:#fff;
    font-family:arial, sans-serif;
    font-weight: bold;
    text-align:center;
    vertical-align:middle;
    
    background:#7cc423;
    border-style:solid;
		border-width:1px;
    border-color:#279621;
  }

when it loads on my nexus4 on chrome, the button shows up blurry as if the responsive calculation is stretching it by 10x. it does not repro on a small window on desktop, nor on nexus 4 firefox. Any thoughts?

If you’d like to take a look at the site, its here: http://www.avidretail.com