.unslider {
    overflow: auto;
}
.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 {
    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
}

/**dots*/
.unslider-nav ol {
  list-style: none;
  text-align: center;
}
.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid yellow;
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #fff;
  cursor: default;
}

/* Style the arrows*/
.unslider {
        /* set the positioning context for the dots */
        position: relative;
}
.unslider-arrow { 
        /* position the navigation dots over the slides */
        position: absolute;
        top: 50%;

        z-index: 1000; /* Make sure the dots show over the images */

        font-size: 2em;
        visibility: hidden;
}

/* Change the arrow styles
        You could also use an image instead
*/
.unslider-arrow { 
    visibility: visible;	/* Hide the default arrows */
    font-size: 8em;
    line-height: 0pt;
    color: yellow;
    text-shadow: 2px 2px 2px rgba(0,0,0, .5);
}

/* Use dynamic content to add in a different character and show it */
/*
.unslider-arrow:before {
        visibility: visible;
}
.unslider-arrow.prev:before {
        content: '<<';
}
.unslider-arrow.next:before {
        content: '>>';
}
*/