/* Avoid Hero images in the homepage to appear blurry at 100% page size */
/*@media all and (max-width: 1464px)
{
	#hero img
	{
		width: 100%;
	}
}*/
/* transition for homepage highlights */
/*#hero img {
	position: relative;
	top: 3px;
	-webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	-moz-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	-ms-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	-o-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#hero img:hover {
	top: 0;
}*/
/* Specific for local fixes to the hero image on the front page */
#hero a.blocklink {
  display: block;
  position: relative;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}
#hero .hero-arm-video {
  z-index: 1;
  /* Place below logo image, because glow video is loaded after image in HTML */
  position: absolute;
  transform-origin: top left;
}
#hero .hero-arm-logo {
  z-index: 2;
  /* Place on top of video, because logo image is loaded first in HTML */
  position: absolute;
  transform-origin: top left;
  /* Has to be this elaborate because some browsers still don't support simple border-radius */
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
#hero .hero-arm-slogan {
  position: absolute;
  transform-origin: top left;
}
/* Extra small */
@media all and (max-width: 550px) {
  /* wrap: 336px, height: 156px */
  #hero,
  #hero .blocklink {
    width: 336px;
    height: 147px;
  }
  #hero .hero-arm-video,
  #hero .hero-arm-logo,
  #hero .hero-arm-slogan {
    transform: scale(0.24566929);
  }
  #hero .hero-arm-video {
    left: 121px;
    top: 7px;
  }
  #hero .hero-arm-logo {
    left: 136px;
    top: 22px;
  }
  #hero .hero-arm-slogan {
    left: 82px;
    top: 104px;
  }
}
/* Small */
@media all and (min-width: 550px) {
  /* wrap: 511px, height: 237px */
  #hero,
  #hero .blocklink {
    width: 511px;
    height: 224px;
  }
  #hero .hero-arm-video,
  #hero .hero-arm-logo,
  #hero .hero-arm-slogan {
    transform: scale(0.37322835);
  }
  #hero .hero-arm-video {
    left: 184px;
    top: 11px;
  }
  #hero .hero-arm-logo {
    left: 206px;
    top: 34px;
  }
  #hero .hero-arm-slogan {
    left: 124px;
    top: 158px;
  }
}
/* Medium */
@media all and (min-width: 760px) {
  /* wrap: 748px, height: 333px */
  #hero,
  #hero .blocklink {
    width: 748px;
    height: 314px;
  }
  #hero .hero-arm-video,
  #hero .hero-arm-logo,
  #hero .hero-arm-slogan {
    transform: scale(0.52440945);
  }
  #hero .hero-arm-video {
    left: 276px;
    top: 15px;
  }
  #hero .hero-arm-logo {
    left: 308px;
    top: 48px;
  }
  #hero .hero-arm-slogan {
    left: 193px;
    top: 222px;
  }
}
/* Large */
@media all and (min-width: 980px) {
  /* wrap: 966px, height: 428px */
  #hero,
  #hero .blocklink {
    width: 966px;
    height: 404px;
  }
  #hero .hero-arm-video,
  #hero .hero-arm-logo,
  #hero .hero-arm-slogan {
    transform: scale(0.67401575);
  }
  #hero .hero-arm-video {
    left: 355px;
    top: 20px;
  }
  #hero .hero-arm-logo {
    left: 396px;
    top: 62px;
  }
  #hero .hero-arm-slogan {
    left: 248px;
    top: 288px;
  }
}
/* Extra large */
@media all and (min-width: 1465px) {
  /* wrap: 1436px, height: 635px */
  #hero,
  #hero .blocklink {
    width: 1436px;
    height: 600px;
  }
  #hero .hero-arm-video,
  #hero .hero-arm-logo,
  #hero .hero-arm-slogan {
    transform: scale(1);
  }
  #hero .hero-arm-video {
    left: 528px;
    top: 30px;
  }
  #hero .hero-arm-logo {
    left: 588px;
    top: 93px;
  }
  #hero .hero-arm-slogan {
    left: 368px;
    top: 425px;
  }
}