#image-slider { position: relative; cursor: pointer; background: #fff;box-shadow:0 0 30px #333;margin:20px auto;border-radius:10px;overflow:hidden;max-width:450px;display:block;}
#image-slider #slider-image  { width: 100%; display: block;}
#image-slider #slider-arrows { font-size: 5em;}
#previous-img, #next-img { color: #fff; text-shadow: 0px 0px 5px #000; position: absolute; top: 50%;transform: translateY(-50%); -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%); opacity: 0.4;}
#previous-img:hover, #next-img:hover { opacity: 1;}
#previous-img { left: 10px;}
#next-img { right: 10px;}
#slider-circles { position: absolute; left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);  bottom: 2em;opacity: 0.4;}
#slider-circles:hover { opacity: 1;}
.circle { display: none; width: 1em; height: 1em; float: left; border-radius: 50%; border: 1px solid #fff; box-shadow: 0px 0px 0.3em #000; margin: 0.5em;}
.circle.current { background: #fff;}
.circle:hover { background: rgba(255,255,255,0.2);}
.circle.current:hover { background: #fff;}
#slider-arrows, #slider-circles { display: none;}
#slider-circles, #previous-img, #next-img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;-ms-transition: all 0.3s ease;transition: all 0.3s ease;}
#slider-pbar-container { position: absolute; bottom: 0; width: 100%; height: 0.3em; z-index: 1;}
#slider-pbar { height: 0.3em; width: 0; background: #fff; opacity: 0.4;}