body {
	font-family: 'Verdana', 'Helvetica', 'Arial';
	margin: 0;
	padding: 0;
}

.container {
	width: 1170px !important;
}

.choose-floor {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;
}

.menu {
	width: 111px;
	float: left;
}

.menu ul {
	width: 111px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu li {
	
}
.menu li a {
	display: block;
	background: #2b2c2d;
	color: #fff;
	width: 74px;
	height: 72px;
	line-height: 72px;
	text-align: center;
	border-bottom: 2px solid #404142;
	font-size: 27px;
	cursor: pointer;
	transition: 200ms;
}
.menu li:last-child a {
	border-bottom-style: none;
}
.menu li a:hover,
.menu li a.active{
	width: 111px;
	background: #2ebc2f;
	text-decoration: none;
	border-bottom-color: #2ebc2f;
}
.menu li a:hover span,
.menu li a.active span{
	position: relative;
	left: 20px;
}

.plan {
	width: 625px;
	float: left;
}
.floor {
	position: relative;
	display: none;
}
.floor.active {
	display: block;
}
.floor-1 {
	background: url('../images/1p.png') 50% 0 no-repeat;
	min-height: 1000px;
}
.floor-2,
.floor-3,
.floor-4,
.floor-5,
.floor-6,
.floor-7 {
	background: url('../images/2-7p.png') 50% 0 no-repeat;
	min-height: 1000px;
}
.floor-8 {
	background: url('../images/8p.png') 50% 0 no-repeat;
	min-height: 1000px;
}
.floor-9 {
	background: url('../images/9p.png') 50% 0 no-repeat;
	min-height: 1000px;
}

.room {
	/*background: #6fcc4a;*/
	background: #00a401;
	opacity: 0.7;
	display: table;
	color: #fff;
	position: absolute;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
   transition: all 0.5s ease-in-out;
}
.room.reserved {
	background: #f3bc5c;
	cursor: default;
}
.room.rented {
	background: #f35c5c;
	cursor: default;
}
.room.last-bed {
	background: #39a0ff;
}
.room:hover  {
	opacity: 0.98;
	color: #fff;
	z-index: 999;
}
.room .basic {
	display: table-cell;
	vertical-align: middle;
}
.room .name-apartment {
	font-size: 16px;
	font-weight: bold;
}
.room .beds {
	margin-top: 10px;
}

.room-info {
	text-align: left;
	width: 240px;
	position: absolute;
	top: 110%;
	left: 50%;
	margin-left: -120px;
	visibility: hidden;
	background: rgba(0,0,0,0.9);
	padding: 15px 20px;
}
.room-info.position-right {
	top: 50%;
	left: 110%;
	margin: -40% 0 0 0;
}
.room-info.position-left {
	top: 50%;
	left: -200%;
	margin: -40% 0 0 0;
}
.room-info.position-top {
	top: -62%;
	left: 50%;
}

.room:hover .room-info {
	visibility: visible;
}


/* 1 PATRO */
.a101_1 {
	width: 115px;
    height: 118px;
    top: 5px;
    left: 155px;
}
.a101_2 {
	width: 83px;
    height: 118px;
    top: 5px;
    left: 272px;
}
.a102_1 {
	width: 82px;
    height: 152px;
    top: 5px;
    left: 357px;
}
.a102_2 {
	width: 108px;
    height: 152px;
    top: 5px;
    left: 441px;
}
.a103_1 {
	width: 131px;
    height: 100px;
    top: 297px;
    left: 418px;
}
.a104_1 {
	width: 136px;
    height: 193px;
    top: 597px;
    left: 77px;
}
.a105_1 {
	width: 136px;
    height: 94px;
    top: 793px;
    left: 77px;
}
.a105_2 {
	width: 184px;
    height: 101px;
    top: 889px;
    left: 77px;
}

/* 2 - 7 PATRO */
.a201_1,
.a301_1,
.a401_1,
.a501_1,
.a601_1,
.a701_1 {
	width: 115px;
    height: 118px;
    top: 5px;
    left: 155px;
}
.a201_2,
.a301_2,
.a401_2,
.a501_2,
.a601_2,
.a701_2 {
	width: 83px;
    height: 118px;
    top: 5px;
    left: 272px;
}
.a202_1,
.a302_1,
.a402_1,
.a502_1,
.a602_1,
.a702_1 {
	width: 82px;
    height: 152px;
    top: 5px;
    left: 357px;
}
.a202_2,
.a302_2,
.a402_2,
.a502_2,
.a602_2,
.a702_2 {
	width: 108px;
    height: 152px;
    top: 5px;
    left: 441px;
}
.a203_1,
.a303_1,
.a403_1,
.a503_1,
.a603_1,
.a703_1 {
	width: 131px;
    height: 100px;
    top: 297px;
    left: 418px;
}
.a204_1,
.a304_1,
.a404_1,
.a504_1,
.a604_1,
.a704_1 {
	width: 136px;
    height: 95px;
    top: 399px;
    left: 77px;
}
.a204_2,
.a304_2,
.a404_2,
.a504_2,
.a604_2,
.a704_2 {
	width: 136px;
    height: 98px;
    top: 496px;
    left: 77px;
}
.a205_1,
.a305_1,
.a405_1,
.a505_1,
.a605_1,
.a705_1 {
	width: 136px;
    height: 100px;
    top: 596px;
    left: 77px;
}
.a205_2,
.a305_2,
.a405_2,
.a505_2,
.a605_2,
.a705_2 {
	width: 136px;
    height: 94px;
    top: 697px;
    left: 77px;
}
.a206_1,
.a306_1,
.a406_1,
.a506_1,
.a606_1,
.a706_1 {
	width: 92px;
    height: 132px;
    top: 857px;
    left: 263px;
}
.a206_2,
.a306_2,
.a406_2,
.a506_2,
.a606_2,
.a706_2 {
	width: 107px;
    height: 197px;
    top: 792px;
    left: 77px;
}

/* 8 PATRO */
.a801_1 {
	width: 199px;
    height: 97px;
    top: 48px;
    left: 156px;
}
.a802_1 {
	width: 192px;
    height: 119px;
    top: 48px;
    left: 357px;
}
.a803_1 {
	width: 192px;
    height: 100px;
    top: 294px;
    left: 357px;
}
.a804_1 {
	width: 95px;
    height: 95px;
    top: 396px;
    left: 77px;
}
.a804_2 {
	width: 95px;
    height: 98px;
    top: 493px;
    left: 77px;
}
.a805_1 {
	width: 136px;
    height: 100px;
    top: 593px;
    left: 77px;
}
.a805_2 {
	width: 136px;
    height: 92px;
    top: 695px;
    left: 77px;
}
.a806_1 {
	width: 92px;
    height: 131px;
    top: 855px;
    left: 263px;
}
.a806_2 {
	width: 107px;
    height: 196px;
    top: 790px;
    left: 77px;
}

/* 9 PATRO */
.a901_1 {
	width: 94px;
    height: 192px;
    top: 2px;
    left: 140px;
}
.a902_1 {
	width: 96px;
    height: 147px;
    top: 48px;
    left: 278px;
}
.a903_1 {
	width: 94px;
    height: 190px;
    top: 196px;
    left: 140px;
}




.freeSquare {
	width: 17px;
	height: 17px;
	background: #6fcc4a;
	display: inline-block;
	margin-right: 8px; 
	position: relative;
	top: 4px;       
}
.reservedSquare {
	width: 17px;
	position: relative;
	top: 4px;       
	height: 17px;
	background: #f3bc5c;
	display: inline-block;
	margin-right: 8px;
}
.oneReservedSquare {
	width: 17px;
	position: relative;
	top: 4px;       
	height: 17px;
	background: #39a0ff;
	display: inline-block;
	margin-right: 8px;
}
.rentedSquare {
	width: 17px;
	position: relative;
	top: 4px;       
	margin-right: 8px;
	height: 17px;
	background: #f35c5c;
	display: inline-block;
}


/* HELPERS */
.clearfix:before,
.clearfix:after {
  	content: "";
  	display: table;
}
.clearfix:after {
  	clear: both;
}
.clearfix {
  	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.beds {
	display: none;
   transition: all 1.5s ease-in-out;
	/*white-space: nowrap;*/
}
.basic:hover .beds {
	display: block;
	/*white-space: nowrap;*/
}
span.size {
	display: block;
	/*white-space: nowrap;*/
}