#hero-slider > figure[onclick] {cursor:pointer}

#hero-slider .pagination {
    top: 0;
    position: absolute;
    z-index: 5;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    font-size: 1.2rem;
}

#hero-slider .dot,
#hero-slider .prev,
#hero-slider .next {
    color: #888;
    
    -webkit-transition: color 0.5s;
    
    -o-transition: color 0.5s;
    
    transition: color 0.5s;
    
    cursor: pointer;
    vertical-align: middle;
}

#hero-slider .dot:before,
#hero-slider .prev:before,
#hero-slider .next:before {
    font-family: 'FontAwesome';
}

#hero-slider .dot:before {content: '\f111'}
#hero-slider .prev:before {content: '\f053'}
#hero-slider .next:before {content: '\f054'}

#hero-slider .dot.active {color: #7CCAAE}