.responsive-accordion {
  width:100%;
  max-width:1080px;
  height:250px;
  overflow:hidden;
  margin:50px auto;
}
.responsive-accordion ul {
  width:100%;
  display:table;
  table-layout:fixed;
  margin:0;
  padding:0;
}
.responsive-accordion ul li  {
  display:table-cell;
  vertical-align:bottom;
  position: relative;
  width:16.666%;
  height:250px;

  background-repeat:no-repeat;
  background-position:center center;

  transition:all 500ms ease;
}
.responsive-accordion ul li div {
  display:block;
  overflow:hidden;
  width:100%;
}
.responsive-accordion ul li div div {
  display:block;
  height:250px;
  width:100%;
  position:relative;
  z-index:3;
  vertical-align:bottom;
  padding:15px 20px;
  box-sizing:border-box;
  color:#fff;
  text-decoration:none;
  transition:all 200ms ease;
}
.responsive-accordion ul li div div * {
  opacity:0;
  margin:0;
  width:100%;
  text-overflow:ellipsis;
  position:relative;
  z-index:5;
  white-space:nowrap;
  overflow:hidden;
  -webkit-transform:translateX(-20px);
  transform:translateX(-20px);
  -webkit-transition:all 400ms ease;
  transition:all 400ms ease;
}
.responsive-accordion ul li div div h2 {

  text-overflow:clip;
  font-size:24px;
  text-transform:uppercase;
  margin-bottom:2px;
  
  top:140px;
}
.responsive-accordion ul li div div p {       
  top:140px;
  font-size:13.5px;  
}
.responsive-accordion ul:hover li {
  width: 8%;
}
.responsive-accordion ul:hover li:hover {
  width: 60%;
}
.responsive-accordion ul:hover li:hover div {
  background:rgba(0,0,0,.4);
}
.responsive-accordion ul:hover li:hover div * {
  opacity:1;
  -webkit-transform:translateX(0);
  transform:translateX(0);  
}


@media screen and (max-width: 600px) {
  .responsive-accordion {
    height:auto;
  }
  .responsive-accordion ul li, .responsive-accordion ul li:hover, .responsive-accordion ul:hover li, .responsive-accordion ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }

}