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

.accordion {

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

  }
  .accordion ul {

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

    .accordion ul li {

      display:table-cell;
      vertical-align:bottom;
      position: relative;
      width:16.666%; // 6 into 100
      height:450px;
      border-right: solid 3px #fff;

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

      transition:all 500ms ease;
          }

      .accordion ul li div {

          display:block;
          height:450px;
          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;
                  }

          .accordion ul li div * {

            opacity:0;
            margin:0;
            /*width:100%;*/
            color:#fff;
            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;

          }

          .accordion ul li div span {
            left: 30px;
            bottom: 30px;
            font-size:13.5px;
            position: absolute;
          }
          .accordion ul li .section-title {
            position: absolute;
            flex: 1;
            display: flex;
            align-items: flex-start;
            width: 100%;
            margin: 0;
            padding-top: 0px;
            padding-left: 0px;
            text-align: center;
            color: white;
            font-size: 11px;
          }
          .accordion ul li .section-title h2,.accordion ul:focus-within li:focus .section-title h2, .accordion ul li.eleHover .section-title h2 {
            background:rgba(0,0,0,.4);
            white-space: nowrap;
            opacity:1;
            overflow:visible;
            -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
            -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
            /*-moz-transform-origin: right top; */
            -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
            -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
            transform: translateX(-100%) rotate(-90deg); /* W3C */  
            -webkit-transform-origin: right top;
            -moz-transform-origin: right top;
            -ms-transform-origin: right top;
            -o-transform-origin: right top;
            transform-origin: right top;
          }

/*          .accordion ul li div a h2 {

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

            top:160px;

          }

          .accordion ul li div a p {
            top:250px;
            font-size:13.5px;
          }*/

    .accordion ul li:nth-child(1) { background-image:url('../img/accordion/1.jpg'); }
    .accordion ul li:nth-child(2) { background-image:url('../img/accordion/2.jpg'); }
    .accordion ul li:nth-child(3) { background-image:url('../img/accordion/3.jpg'); }
    .accordion ul li:nth-child(4) { background-image:url('../img/accordion/4.jpg'); }
    .accordion ul li:nth-child(5) { background-image:url('../img/accordion/5.jpg'); border:none;}
    .accordion ul li:nth-child(6) { background-image:url('../img/accordion/1.jpg');}

    .accordion ul:hover li,
    .accordion ul:focus-within li { width:8%; }

    .accordion ul li:focus {
      outline: none;
    }

    .accordion ul:hover li:hover,
    .accordion ul li:focus,
    .accordion ul:focus-within li:focus {

      width:60%;

    }


    .accordion ul:focus-within li:focus div *, .accordion ul li.eleHover div * {

      opacity:1;
      -webkit-transform:translateX(0);
      transform:translateX(0);

    }

    .accordion ul:hover li {
      width: 8% !important;
    }
    .accordion ul:hover li div * { opacity: 0 !important; }
    /*.accordion ul:hover li:hover div *,.accordion ul li.eleHover div * { opacity: 0 !important; }
*/
    .accordion ul:hover li:hover {
      width:60% !important;
    }

    .accordion ul:hover li:hover div, .accordion ul li.eleHover div {

      background:rgba(0,0,0,.4);

    }

    .accordion ul:hover li:hover div *, .accordion ul li.eleHover div * {

      opacity:1 !important;
      -webkit-transform:translateX(0);
      transform:translateX(0);

    }

    .accordion ul:hover li:hover .section-title *, .accordion ul li.eleHover .section-title *{
            opacity:0 !important;
          }
    .accordion ul:hover li .section-title * { opacity: 1 !important;}
    


    @media screen and (max-width: 600px) {

      // IE gets fussy if this isn't here
      body { margin:0; }

      .accordion {

        height:auto;


      }
      .accordion ul:hover li:hover,.accordion ul li,.accordion ul:hover li,.accordion ul li:hover {
          width: 100% !important;
      }
      .accordion ul li,.accordion ul:hover li:hover,.accordion ul li:hover,.accordion ul:hover li{


          position:relative;
          display:table;
          table-layout:fixed;
          width:100%;
          overflow:visible !important;

          -webkit-transition:none;
          transition:none;


      }

    }

.about {

  text-align:center;
  font-family:'Open Sans', sans-serif;
  font-size:12px;
  color:#666;

}

.about a {

  color:blue;
  text-decoration:none;

}

.about a:hover { text-decoration:underline; }

.dot {
  height: 7px !important;
  width: 7px !important;
  background-color: #fff !important;
  border-radius: 50% !important;
  display: inline-block !important;
  overflow: visible;
  bottom: 0px;
}
html .btn-accordion {
  margin-top: 10px !important;
    color: #0078A1 !important;
    background-color: #fff;
    background-image: none;
    border-color: #0078A1;
}
html .btn-accordion:hover, html .btn-accordion.hover {
    color: #FFF !important;
    background-color: #0078A1;
    border-color: #0078A1;
}