.accordion {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li .textBox1 {
  color: #fff!important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  transition: all .3s;
  
  
}

.accordion ul li:hover .textBox1 {
  opacity: 0;
  
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 25%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}
 
.accordion ul li .textBox2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5%;
  transition: all 400ms ease;
  width: 80%;
  margin: auto;
  opacity: 0;
  
}


.accordion ul li:hover .textBox2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 400ms ease;
  width: 80%;
  margin: auto;
  opacity: 1;
  transition-delay:.5s;
 
}


.accordion ul:hover li {
    width: 8%;
  } 
 .accordion ul:hover li:hover {
    width:17%;
  }
.accordion ul:hover li:hover a {
  background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
@media screen and (max-width: 1366px) {
.accordion ul:hover li:hover {
  width:13%;
}
}
@media screen and (max-width: 768px) {

.accordion ul li {
  
  height: 500px;
  
}

.accordion ul li .textBox1 {
   
  opacity: 0;
  
}

.accordion ul li .textBox2 {
   
  opacity: 1;
  bottom: 0;
  
}
}

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