.hero {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.hero-carousel article {
    width: 1200px;
    margin: 0 auto;
    height: 420px;
    display: block;
    float: left;
    position: relative;
    text-align: center;
}
.hero-carousel-container article {
    position: relative;
    float: left;
    background-color: #000;
    background-size:cover;
    background-position:center center;
}
.hero-carousel article img {
    position: relative;
    z-index: 1;
    width:100%;
}
.hero-carousel article .contents {
    position: absolute;
    z-index: 2;
    list-style: none;
    max-width: 500px;
    left: 50%;
    margin-left: -250px;
    top: 20%;
    padding: 20px;
}
.hero-carousel-nav {
    width: 1200px;
    z-index: 2;
    margin: 0px auto;
    display: table;
    overflow: hidden;
}
.hero-carousel-nav li {
    position: absolute;
    top: 50%;
    margin-top:-86px;
    right: 48px;
    list-style: none;
    z-index: 6000;
}
.hero-carousel-nav li.prev {
    left: 48px;
    right: auto;
}

.hero-carousel-nav li.prev a {
     background-position: 0 0;
}

.hero-carousel-nav li a {
    border: none;
    outline: none;
    display: block;
    float: left;
    height:40px; width:20px; background-image: url('slide-arrow.png'); background-position: -20px 0;
}
.hero-carousel-nav li a:active,
.hero-carousel-nav li a:focus {
    border: none;
    outline: none;
}
.hero-carousel .contents h4 { font-size:50px; text-transform:uppercase; color:#FFF; font-weight:300; text-shadow:0 0 4px #333 }
.hero-carousel .contents h4 span { padding-top:10px; display:block; border-top:1px solid #FFF; color:#FFF; font-size:20px; font-weight:300 }
.hero-carousel .contents a { text-shadow:0 0 4px #333; font-size:25px; margin:0 auto; display:table; padding:6px 15px; color:#FFF; text-transform:uppercase; font-weight:300; margin-top:15px;  }
.hero-carousel .contents a strong { display:block; font-size:35px; color:#FFF; font-weight:bold; }

.hero-carousel .current:before { pointer-events:none; position:absolute; top:0; left:0; right:0; bottom:0; content:" "; z-index: 100; background-color:transparent }
.hero-carousel article:before { pointer-events:none; position:absolute; top:0; left:0; right:0; bottom:0; content:" "; z-index: 100; background-color:rgba(0,0,0,0.5) }

.hero-carousel-pagination { position:relative; display:table; margin:0 auto; bottom:15px; margin-top:-30px; }
.hero-carousel-pagination li { float:left; list-style-type:none; }
.hero-carousel-pagination li a { display:block; border-radius:50%; margin:2px; height:12px; width:12px; border:1px solid #CCC; padding:3px; background-color:#666; }
.hero-carousel-pagination li a.active { background-color:#FFF; }