#slider {
  position: relative;
  width: 500px;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  background: black;
}
#slider ul {
  position: absolute;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  top: 0px;
  left: 0;
opacity: 0.9;
}
#slider ul li {
  position: relative;
  height: 100%;
 width: 500px;
  float: left;
  justify-content: center;
  align-items: center;
  display:flex;
}
#slider ul li img{
  max-width: 90%;
 max-height: 90%;
 margin: auto;
  display: block;
}
 

#slider #count{
position: absolute;
top: 8px;
color: white;
right: 0px;
z-index: 1;
background: black;
}
#slider #cntbox{
    position:absolute;
    bottom: 0px;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 1;
}
#slider #precnt{
    position:absolute;
	height: 21px;
	width: 22px;
    background: url(../img/navbuttons.gif) 0px -60px;
    display:block; 
    cursor:pointer;
    left: 2px;
    top: 210px;
    opacity: 0.3;
}
#slider #precnt:hover{
    opacity: 1;
}
#slider #playcnt{
    position:absolute;
	height: 21px;
	width: 22px;
    background: url(../img/navbuttons.gif);
    display:block; 
    cursor:pointer;
    left: 245px;
    bottom: 2px;
    opacity: 0.3;
}
#slider #playcnt:hover{
    opacity: 1;
}
#slider #nxtcnt{
    position:absolute;
	height: 21px;
	width: 22px;
    background:url(../img/navbuttons.gif) 0px -40px;
    display:block; 
    cursor:pointer;
    right:2px;
    top: 210px;
    opacity: 0.3;
}
#slider #nxtcnt:hover{
    opacity: 1;
}