.accordion {
    width: 100%;
    max-width: 1080px;
    height: 250px;
    overflow: hidden;
    margin: 20px auto;
    border-radius: 7px;
    ul {
      width: 100%;
      display: table;
      table-layout: fixed;
      margin: 0;
      padding: 0;
      li {
        display: table-cell;
        vertical-align: bottom;
        position: relative;
        width: 33.33%;
        height: 250px;       
        transition: all 500ms ease;      
        
        div {
          display: block;
          overflow: hidden;
          width: 100%;
          a {
            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;
            font-family: Open Sans, sans-serif;
            transition: all 200ms ease;
            * {
              opacity: 0;
              margin: 0;
              width: 100%;
              text-overflow: ellipsis;
              position: relative;
              z-index: 5;
              white-space: nowrap;
              overflow: hidden;
              transform: translateX(-20px);
              transition: all 400ms ease;
            }
            h2 {
              font-family: Montserrat, sans-serif;
              text-overflow: clip;
              font-size: 30px;
              font-weight:800;
              text-transform: uppercase;
              margin-bottom: 2px;
              top: 80px;
              color: rgba(255,151,0,1);
            }
            p {
              top: 160px;
              font-size: 13.5px;
            }
          }
        }
      }
      /*ul*/
      &:hover {
        li {
          width: 10%;
          &:hover {
            width: 80%;
            a {
              background: rgba(0, 0, 0, 0.4);
              * {
                opacity: 1;
                transform: translateX(0);
              }
            }
          }
        }
      }
    }
  }
  
  @media screen and (max-width: 600px) {
    body {
      margin: 0;
    }
    .accordion {
      height: auto;
      ul li,
      ul li:hover,
      ul:hover li,
      ul:hover li:hover {
        position: relative;
        display: table;
        table-layout: fixed;
        width: 100%;
        -webkit-transition: none;
        transition: none;
      }
    }
  }