/* Hero */

#hero-container {
  width: 100%;
  position: absolute;
  top: 17px;
  left: 0;
  z-index: 1;
  height: 299px;
  overflow: hidden;
  background:#FFF;
}

.hero-wrapper {
  height: 299px;
  width: 100%;
}

ul#hero-frames {
  z-index: 100;
  position: absolute;
  right: 0;
  bottom: 0px;
  right:15px;
  width: 105px;
}

ul#hero-frames li {
  float: left;
  margin-left: 5px;
}

ul#hero-frames li a {
  display: block;
  width: 20px;
  height: 20px;
}

a.frame-1 {background: url(../imgs/frame-1.png) 0 0 no-repeat;}
a.frame-2 {background: url(../imgs/frame-2.png) 0 0 no-repeat;}
a.frame-3 {background: url(../imgs/frame-3.png) 0 0 no-repeat;}
a.frame-4 {background: url(../imgs/frame-4.png) 0 0 no-repeat;}

a.frame-1:hover, a.frame-2:hover, a.frame-3:hover, a.frame-4:hover {background-position: 0 -20px;}

a.frame-1-active {background: url(../imgs/frame-1.png) 0 -40px no-repeat;}
a.frame-2-active {background: url(../imgs/frame-2.png) 0 -40px no-repeat;}
a.frame-3-active {background: url(../imgs/frame-3.png) 0 -40px no-repeat;}
a.frame-4-active {background: url(../imgs/frame-4.png) 0 -40px no-repeat;}

.hero_image {
  z-index: 10;
  position: absolute;
  display: block;
}