<div class="flex-accordion">
                                    <ul>
                                        <li class="at-accordion__panel is-open" style="background-image:url('https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=74553159742c7cf05c6eb04baabc408c')">
                                            <div class="panel-inner">
                                                <!-- <a href="case.html"> -->
                                                <div class="title">
                                                    <!-- <div class="title__inner"> -->
                                                    <h3 class="title__text">Study</h3>
                                                    <!-- </div> -->

                                                </div>
                                                <a href="case.html" class="button bg-sun">View Case Study</a>
                                                <!-- </a> -->
                                            </div>
                                        </li>
                                        <li class="at-accordion__panel" style="background-image:url('https://images.unsplash.com/photo-1473163928189-364b2c4e1135?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=0721657b46ce27df52955f73818ab5b7')">
                                            <div class="panel-inner">
                                                <!-- <a href="case.html"> -->
                                                <div class="title">
                                                    <!-- <div class="title__inner"> -->
                                                    <h3 class="title__text">Discover</h3>
                                                    <!-- </div> -->

                                                </div>
                                                <a href="case.html" class="button bg-sun">View Case Study</a>
                                                <!-- </a> -->
                                            </div>
                                        </li>
                                        <li class="at-accordion__panel" style="background-image:url('https://images.unsplash.com/photo-1475439242971-afb6fcc1ba22?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=c221a5935a8ea54887ae7178aeff7725')">
                                            <div class="panel-inner">
                                                <!-- <a href="case.html"> -->
                                                <div class="title">
                                                    <!-- <div class="title__inner"> -->
                                                    <h3 class="title__text">Explore</h3>
                                                </div>
                                                <a href="case.html" class="button bg-sun">View Case Study</a>
                                                <!-- </div> -->
                                                <!-- </a> -->
                                            </div>
                                        </li>

                                    </ul>
                                </div>

// Accordion Height
$a-height: 550px;

// Position text along bottom
$text-offset: $a-height - 90;


.flex-accordion {

  width:100%;
  // max-width:1080px;
  height:$a-height;
  overflow:hidden;
  // margin:50px auto;

  
  ul {
    height: 100%;
    width:100%;
    display: flex;
    flex-wrap: wrap;
    // display:table;
    // table-layout:fixed;
    margin:0;
    padding:0;

    li{
      display: flex;
      flex-wrap: wrap;
      // display:table-cell;
      // vertical-align:bottom;
      position: relative;
      // width:calc(100% / 3);
      // height:$a-height;
      height: 100%;
      background-size: cover;
      background-repeat:no-repeat;
      background-position:center center;

      transition:all .5s ease;
      

      // div {
      .panel-inner {
background-repeat: no-repeat;
// background-size: cover;
background-position:center center;
        // display:block;
        overflow:hidden;
        // width:100%;

        // a {

          display:inline-block;
          // height:$a-height;
          height: 100%;
          width:100%;

          position:relative;
          z-index:3;
         
          .button{
            position: absolute;
            bottom: 10px;
            left: 130px;
            width: auto;
            opacity:0;
            // margin:0;
            // width:100%;
            text-overflow:ellipsis;
            // position:relative;
            z-index:5;
            background-color: white;
            padding:20px;

            white-space:nowrap;
            overflow:hidden;

            transform:translateX(-20px);

            transition:all .5s ease;
           

          }//end btn
          .title{
            background-color: transparentize(black, .2);
            color: yellow;
            width: 100px;
            height: 100%;
            position: relative;
            cursor: pointer;
           
            &__inner{
              position: absolute;
              transform: rotate(-90deg);
            }
            &__text{
              font-size: 30px;
              display: inline-block;
              width: 500px;
              text-align: center;
              transform: rotate(-90deg) translate3d(-50%,-665%,0)!important;
             
             
              
            }
          }//end title

        // }

      }//end div panel inner
      &.is-open{
        // width: 100%;
        flex-grow: 1;
        transition:all .5s ease;
        .button{
          opacity: 1 !important;
        }
        a {
          * {
            opacity:1;
          }

        }
      }//end open panel
      &:not(.is-open){
        width: 100px;
        .title{
         

        }
      }//end not open panel
    }// end li panel
  }//end ul panel list

}//end accordion

var panel = $('.at-accordion__panel');

panel.click( function(){
  // console.log('click');
  panel.removeClass('is-open');

  $(this).addClass('is-open');
});