.hero {
  background-color: #000080;
  /*$color-black;*/
  overflow: hidden;
  clear: both; }
  .hero .cycle-prev {
    left: 0;
    background-image: url(mm/sprites/ui.png);
    background-position: -433px -560px;
    width: 35px;
    height: 35px;
    margin-left: 10px;
    filter: invert(50%);
    }
  .hero .cycle-next {
    right: 0;
    background-image: url(mm/sprites/ui.png);
    background-position: -363px -630px;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    filter: invert(50%);
    }
  .hero .cycle-prev, .hero .cycle-next {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: 300px;
    z-index: 999; }
    @media screen and (max-width: 767px) {
      .hero .cycle-prev .hero .cycle-next, .hero .cycle-prev .hero .cycle-prev, .hero .cycle-next .hero .cycle-next, .hero .cycle-next .hero .cycle-prev {
        top: 230px; } }
  .hero .cycle-slideshow {
    position: relative; }
    @media screen and (max-width: 767px) {
      .hero .cycle-slideshow {
        height: 480px !important;
        /* Overriding Auto-Height from JS */
        max-width: 100%; } }
    .hero .cycle-slideshow .cycle-pager {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 33px;
      text-align: center;
      z-index: 998; }
      @media screen and (max-width: 1024px) {
        .hero .cycle-slideshow .cycle-pager {
          bottom: 6px; } }
      .hero .cycle-slideshow .cycle-pager .dot {
        background-image: url(mm/sprites/ui.png);
        background-position: 0px -843px;
        width: 107px;
        height: 17px;
        display: inline-block;
        position: relative; }
        @media screen and (max-width: 767px) {
          .hero .cycle-slideshow .cycle-pager .dot {
            width: 45px; } }
        .hero .cycle-slideshow .cycle-pager .dot:last-child {
          width: 15px; }
        .hero .cycle-slideshow .cycle-pager .dot a {
          height: 23px;
          width: 23px;
          display: inline-block;
          position: absolute;
          top: -4px;
          left: -4px; }
          .hero .cycle-slideshow .cycle-pager .dot a:hover {
            background-image: url(mm/sprites/ui.png);
            background-position: -680px -397px;
            width: 23px;
            height: 23px; }
      .hero .cycle-slideshow .cycle-pager .cycle-pager-active a {
        background-image: url(mm/sprites/ui.png);
        background-position: -680px -397px;
        width: 23px;
        height: 23px; }
  .hero .cycle-slide,
  .hero .banner {
    width: 100%;
    height: 100%;
    margin-bottom: -4px;
    background-repeat: no-repeat;
    max-height: 760px;
    min-height: 760px;
    text-align: center;
    overflow: hidden;
    position: relative; }
    .hero .cycle-slide img,
    .hero .banner img {
      max-width: 100%; }
    @media screen and (max-width: 1024px) {
      .hero .cycle-slide,
      .hero .banner {
        min-height: 425px; } }
    @media screen and (max-width: 767px) {
      .hero .cycle-slide,
      .hero .banner {
        height: 480px;
        min-height: 480px;
        max-width: 100%;
        overflow: hidden;
        position: relative; }
        .hero .cycle-slide img,
        .hero .banner img {
          max-height: 480px;
          max-width: none; } }
  .hero .cycle-slide {
    max-height: 576px; }