.accordion {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 20px auto 0 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%;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

.accordion ul li div a {
  display: block;
  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 a * {
  opacity: 1;
  margin: 0;
  width: 100%;
/*  text-overflow: ellipsis; */
  position: absolute; bottom:30px; left:5px;
  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 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: 160px;
  font-size: 13.5px;
}

.accordionimg1 li:nth-child(1) { background-image: url("../images/elevation01.webp"); background-size:cover }
.accordionimg1 li:nth-child(2) { background-image: url("../images/elevation02.webp"); background-size:cover; border-left: solid 2px #ccc }
.accordionimg1a li:nth-child(1) { background-image: url("../images/elevation03.webp"); background-size:cover }

.accordionimg2a li:nth-child(1) { background-image: url("../images/amenity01.webp"); background-size:cover }
.accordionimg2a li:nth-child(2) { background-image: url("../images/amenity02.webp"); background-size:cover; border-left: solid 2px #ccc }
.accordionimg2b li:nth-child(1) { background-image: url("../images/amenity03.webp"); background-size:cover }
.accordionimg2b li:nth-child(2) { background-image: url("../images/amenity04.webp"); background-size:cover; border-left: solid 2px #ccc }
.accordionimg2c li:nth-child(1) { background-image: url("../images/amenity05.webp"); background-size:cover }
.accordionimg2c li:nth-child(2) { background-image: url("../images/amenity06.webp"); background-size:cover; border-left: solid 2px #ccc }
.accordionimg2d li:nth-child(1) { background-image: url("../images/amenity07.webp"); background-size:cover }
.accordionimg2d li:nth-child(2) { background-image: url("../images/amenity08.webp"); background-size:cover; border-left: solid 2px #ccc }
.accordionimg2e li:nth-child(1) { background-image: url("../images/amenity09.webp"); background-size:cover }

.accordionimg3a li:nth-child(1) { background-image: url("../images/int01.webp"); background-size:cover }
.accordionimg3a li:nth-child(2) { background-image: url("../images/int02.webp");  background-size:cover; border-left: solid 2px #ccc}
.accordionimg3b li:nth-child(1) { background-image: url("../images/int03.webp"); background-size:cover }
.accordionimg3b li:nth-child(2) { background-image: url("../images/int04.webp");  background-size:cover; border-left: solid 2px #ccc}
.accordionimg3c li:nth-child(1) { background-image: url("../images/int05.webp"); background-size:cover }
.accordionimg3c li:nth-child(2) { background-image: url("../images/int06.webp");  background-size:cover; border-left: solid 2px #ccc}
.accordionimg3d li:nth-child(1) { background-image: url("../images/int07.webp"); background-size:cover }
.accordionimg3d li:nth-child(2) { background-image: url("../images/int08.webp");  background-size:cover; border-left: solid 2px #ccc}

.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

/* .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: 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;
}
}

*/

.accordionimg1 .panel, .accordionimg2a .panel, .accordionimg3a .panel, .accordionimg2b .panel, .accordionimg3b .panel, .accordionimg3c .panel, .accordionimg3d .panel, .accordionimg4 .panel, .accordionimg5 .panel {	
	padding: 5px;
	text-shadow: 1px 1px 2px black, 0 0 5px black;
	color: #fff; min-width:200px;
	-moz-transform-origin: left bottom;
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
	-moz-transform: rotate(-90deg) translateY(100%);
	-webkit-transform: rotate(-90deg) translateY(100%);
	transform: rotate(-90deg) translateY(100%);
}



@media screen and (min-width: 300px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 200px;}
.accordionimg1 .panel, .accordionimg2a .panel, .accordionimg3a .panel, .accordionimg2b .panel, .accordionimg3b .panel, .accordionimg3c .panel, .accordionimg3d .panel, .accordionimg4 .panel, .accordionimg5 .panel {font-size: 10pt;}
}
@media screen and (min-width: 480px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 250px;}
.accordionimg1 .panel, .accordionimg2a .panel, .accordionimg3a .panel, .accordionimg2b .panel, .accordionimg3b .panel, .accordionimg3c .panel, .accordionimg3d .panel, .accordionimg4 .panel, .accordionimg5 .panel {font-size: 11pt;}
}
@media screen and (min-width: 768px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 300px;}
}
@media screen and (min-width: 1024px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 400px;}
}
@media screen and (min-width: 1280px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 500px;}
}
@media screen and (min-width: 1366px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 534px;}
.accordionimg1 .panel, .accordionimg2a .panel, .accordionimg3a .panel, .accordionimg2b .panel, .accordionimg3b .panel, .accordionimg3c .panel, .accordionimg3d .panel, .accordionimg4 .panel, .accordionimg5 .panel {font-size: 12pt;}
}
@media screen and (min-width: 1440px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 563px;}
}
@media screen and (min-width: 1600px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 625px;}
.accordionimg1 .panel, .accordionimg2a .panel, .accordionimg3a .panel, .accordionimg2b .panel, .accordionimg3b .panel, .accordionimg3c .panel, .accordionimg3d .panel, .accordionimg4 .panel, .accordionimg5 .panel {font-size: 14pt;}
}
@media screen and (min-width: 1900px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 750px;}
}