// Fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

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

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

// Page Title


.accordiontwo {

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

  ul {

    width:100%;
    display:table;
    table-layout:fixed;
    margin:0;
    padding:0;

    li {

      display:table-cell;
      vertical-align:bottom;
      position: relative;
      width:16.666%; // 6 into 100
      height:$a-height;

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

      transition:all 500ms ease;

      div {
        
        display:block;
        overflow:hidden;
        width:100%;

        a {
          
          display:block;
          height:$a-height;
          width:100%;

          position:relative;
          z-index:3;
          vertical-align:bottom;
          padding:5px 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;
            
            -webkit-transform:translateX(-20px);
            transform:translateX(-20px);

            -webkit-transition:all 400ms ease;
            transition:all 400ms ease;

          }

          h2 {

            font-family:Montserrat,sans-serif;
            text-overflow:clip;
            font-size:24px;
            text-transform:uppercase;
            margin-bottom:2px;
            
            top:$text-offset;

          }
          
          p {
            
            top:$text-offset;
            font-size:13.5px;
            
          }

        }

      }

    }
    
    // Background images
    li:nth-child(1) { background-image:url('/cdn/shop/files/hiddenpocketfeature2_2000x.jpg?v=1499189601'); }
    li:nth-child(2) { background-image:url('/cdn/shop/files/ipadpocketlg_2000x.jpg?v=1498676045'); }
    li:nth-child(3) { background-image:url('/cdn/shop/files/cordroutinglg_6c87130a-6ff7-483e-8342-4df3204710b8_2000x.jpg?v=1498676212'); }
    li:nth-child(4) { background-image:url('/cdn/shop/files/removablehood_2000x.jpg?v=1498676262'); }
    li:nth-child(5) { background-image:url('/cdn/shop/files/elasticbottleholder_02d56651-9833-49e7-ab15-060529bada3a_2000x.jpg?v=1498676288'); }
    li:nth-child(6) { background-image:url('/cdn/shop/files/pocketdividerdetial1_2000x.jpg?v=1498676315'); }
    li:nth-child(7) { background-image:url('/cdn/shop/files/waterrespockets1_2000x.jpg?v=1498676341'); }
    li:nth-child(8) { background-image:url(''); }

    &:hover li { width:8%; }

    &:hover li:hover {

      width:60%;

      a {
        
        background:rgba(0,0,0,.4);
        
        * {
          
          opacity:1;
          -webkit-transform:translateX(0);
          transform:translateX(0);
        
        }
      
      }

    }

  }

}

// Stack items
@media screen and (max-width: 600px) {
  
  // IE gets fussy if this isn't here
  body { margin:0; }
  
  .accordion {
    
    height:auto;
    
    ul,ul:hover {
      
      li,li:hover {
        
        position:relative;
        display:table;
        table-layout:fixed;
        width:100%;
        
        -webkit-transition:none;
        transition:none;
        
      }
      
    }
    
  }

}

.about {
  
  text-align:center;
  font-family:'Open Sans', sans-serif;
  font-size:12px;
  color:#666;
  
  a {
    
    color:blue;
    text-decoration:none;
    
    &:hover { text-decoration:underline; }
    
  }
  
}

/* SHORT TEXT */
.short {
	position: absolute;
	top:250px;
	left: 20px;
	width: 250px;
	-webkit-transform: rotate(-90deg);
	    	  -ms-transform: rotate(-90deg);
	    		  transform: rotate(-90deg);
	-webkit-transform-origin: left top;
	    -ms-transform-origin: left top;
	        transform-origin: left top;
	-webkit-transition: all 0.3s ease-in;
	        transition: all 0.3s ease-in;
}
.short p {margin:0;}
.short p span {
	 font-family:Montserrat,sans-serif;
            font-size:15px;
            text-transform:uppercase;
  color: #fff;

}

 .accli.hover .short,
 .accli:hover .short {
	opacity: 0;
}

.acclifirst:hover .shorttwo p span{
  color: bbb;
  
}