body
{
 margin:0;
 padding:o;
 font-family: "Bookman Old Style",Helvetica, sans-serif;
}
.container
{
 position:relative;
 overflow:hidden;
 width:100%;
 height:90%;
}
.container .slider
{
 position:absolute;
 top:0;
 left:20%;
 width:250%;
 height:90%;
 animation:animate 100s linear infinite;
}


.container .slider .slide
{
 position:relative;
 width:20%;
 height:100%;
 float:left;
}



.container .slider .slide .caption
{
 position:absolute;
 bottom:40px;
 left:60px;
 right:60px;
 padding:30px;
 background:rgba(0,0,0,.5);
 box-sizing:border-box;
 transition:0.20s;
}

.container .slider .slide .caption h2
{
 margin:0 0 20px;
 padding:0;
 color:#fff;
 font-size:48px;
}

.container .slider .slide .caption p
{
 margin:0;
 padding:0;
 color:#fff;
 font-size:18px;
}

.container .slider .slide.slide1
{
  background:url(../images/water.jpg);
  background-size:cover;
  background-position:center;
}

.container .slider .slide.slide2
{
  background:url(../images/municipal_process_design1.jpg);
  background-size:cover;
  background-position:center;
}

.container .slider .slide.slide3
{
  background:url(../images/advanced_technologies.jpg);
  background-size:cover;
  background-position:center;
}

.container .slider .slide.slide4
{
  background:url(../images/Conveyance_Tunnelling.jpg);
  background-size:cover;
  background-position:center;
}

.container .slider .slide.slide5
{
  background:url(../images/energy.jpg);
  background-size:cover;
  background-position:center;
}

@keyframes animate
{
  0%
  {
  left:-0;
  }
  20%
  {
   left:-50%;
  }
  40%
  {
    left:-100%;
  }
  60%
  {
    left:-150%;
  }
  80%
  {
    left:-200%;
  }
  100%
  {
    left:-250%;
  }

}

@media (max-width:768px) and (min-width:468px)
{
 .container .slider .slide .caption
 {
   bottom:20px;
   left:20px:
   right:20px;
   padding:20px;
 }

 .container .slider .slide .caption h2
 {
   margin:0 0 10px;
   font-size:30px;
 }
 
 .container .slider .slide .caption p
 {
   font-size:16px;
 }