.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/bianca/elevation01.jpg"); background-size:cover }
.accordionimg1 li:nth-child(2) { background-image: url("../images/bianca/elevation03.jpg"); background-size:cover }
.accordionimg4 li:nth-child(1) { background-image: url("../images/bianca/elevation04.jpg"); background-size:cover }
.accordionimg4 li:nth-child(2) { background-image: url("../images/bianca/elevation05.jpg"); background-size:cover }
.accordionimg5 li:nth-child(1) { background-image: url("../images/bianca/elevation02.jpg"); background-size:cover }

.accordionimg2a li:nth-child(1) { background-image: url("../images/bianca/amenity01.jpg"); background-size:cover }
.accordionimg2a li:nth-child(2) { background-image: url("../images/bianca/amenity02.jpg"); background-size:cover }
.accordionimg2b li:nth-child(1) { background-image: url("../images/bianca/amenity03.jpg"); background-size:cover }
.accordionimg2b li:nth-child(2) { background-image: url("../images/bianca/amenity04.jpg"); background-size:cover }

.accordionimg3a li:nth-child(1) { background-image: url("../images/bianca/int01.jpg"); background-size:cover }
.accordionimg3a li:nth-child(2) { background-image: url("../images/bianca/int02.jpg");  background-size:cover}
.accordionimg3b li:nth-child(1) { background-image: url("../images/bianca/int03.jpg"); background-size:cover }
.accordionimg3b li:nth-child(2) { background-image: url("../images/bianca/int04.jpg");  background-size:cover}

.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, .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, .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, .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, .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, .accordionimg4 .panel, .accordionimg5 .panel {font-size: 14pt;}
}
@media screen and (min-width: 1900px) {
.accordion, .accordion ul li, .accordion ul li div a {height: 750px;}
}