.pagination {
margin: 2rem auto; a, button { font-weight: bold; padding: 0.5rem 1rem; min-width: 3em; text-align: center; border: 1px solid $ace-orange; &:hover, &:focus { color: $white; background: $ace-orange; border-color: $ace-orange; } &.next, &.prev { background: none; border: none; color: $ace-navy; &:hover, &:focus { background: none; color: $ace-orange; } } } .current { padding: 0; a, button { background: $ace-orange; color: $white; &:hover, &:focus { background: $ace-orange-h; } } }
}
.slick-dots {
position: absolute; bottom: 0; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; z-index: 10; li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; &:hover, &:focus { outline: none; &:before { opacity: 1; } } &:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 20px; height: 20px; background: $white; opacity: 0.8; border-radius: 20px; } } &.slick-active button:before { opacity: 1; } }
}