.unslider {
    overflow: auto;
    margin: 0;
    padding: 0
}

.unslider-wrap {
    position: relative
}

.unslider-wrap.unslider-carousel > li {
    float: left
}

.unslider-vertical > ul {
    height: 100%
}

.unslider-vertical li {
    float: none;
    width: 100%
}

.unslider-fade {
    position: relative
}

.unslider-fade .unslider-wrap li {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 8
}

.unslider-fade .unslider-wrap li.unslider-active {
    z-index: 10
}

.unslider li, .unslider ol, .unslider ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none
}

.unslider-arrow {
    position: absolute;
    left: 20px;
    z-index: 2;
    cursor: pointer
}

.unslider-arrow.next {
    left: auto;
    right: 20px
}

/**
*   Here's where everything gets included. You don't need
*   to change anything here, and doing so might break
*   stuff. Here be dragons and all that.
*/
/**
 *   Default variables
 *
 *   While these can be set with JavaScript, it's probably
 *   better and faster to just set them here, compile to
 *   CSS and include that instead to use some of that
 *   hardware-accelerated goodness.
 */
.banner-container {
    background-color:rgba(225, 225, 225, 0.5);
    margin-top: 21px;
    margin-bottom: 10.5px;
}

.banner h4 {
    text-align: left;
    color: #fff;
    font-weight: 800;
    margin-top:20px;
}

.banner p {
    text-align: left;
    color: #fff;
    font-size:14px;
    line-height: 2;
}

.unslider-button {
    float:right;
}
.unslider-button a {
    color: #fff;
}
.unslider-button-text {
    text-decoration: underline;
    text-transform: uppercase;
}
.unslider-nav {
    float:left;
    display: inline;
    /*margin-top: -18px;*/
}
.unslider-nav ol {
    list-style: none;
    text-align: left;
    margin-bottom: 10px;
}

.unslider-nav ol li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 4px;
    background: transparent;
    border-radius: 14px;
    overflow: hidden;
    text-indent: -999em;
    border: 2px solid #fff;
    cursor: pointer;
}

.unslider-nav ol li.unslider-active {
    background: #fff;
    cursor: default;
}

@media only screen and (max-width: 1024px) {
    .banner p {
        line-height: 1.35;
    }
}

@media only screen and (max-width: 640px) and (min-width: 320px) {
    .banner-container{
        margin-right: -15px;
        margin-left: -15px;
        margin-bottom: 0;
    }
    .hero h4 {
        font-size: 18px;
    }
    .hero .banner p {
        font-size: 12px;
    }
    .unslider-nav {
        float: none;
    }
    .unslider-nav ol {
        text-align: center;
    }
}