caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}


#mainwrapper {
	font: 10pt normal Arial, sans-serif;
	height: auto; float:left; 
	text-align: center;
	width: 66%;
}

/* Image Box Style */
#mainwrapper .box {
	border: 2px solid #ccc; 
	cursor: pointer;
	width: 320px;
	height: 200px;
	float: left;
	margin: 6px;
	position: relative;
	overflow: hidden;
	
}
#mainwrapper .box img {
	position: absolute; 
	left: 0; width:100%;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
	transition: all 300ms ease-out;
}

/* Caption Common Style */
#mainwrapper .box .caption {
		background-color: rgba(0,0,0,0.6); text-align:center; font-size:21px; font-weight:bold;

	position: absolute;
	color: #fff;
	z-index: 100;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
		transition: all 300ms ease-out;
	left: 0;
}


#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption  {
	opacity: 0;
	width: 320px;
	height:200px;
	text-align: left;
	padding: 15px;
}


/** Caption 5: Rotate **

#mainwrapper .box .rotate {
	width: 200px;
	height: 400px;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;	
	transition: all 300ms ease-out;
}

/** Caption 6: Scale **/
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {
	position: relative;
	left: -200px;
	width: 170px;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;	
	transition: all 300ms ease-out;
}



#mainwrapper .box .scale-caption p {
	-webkit-transition-delay: 500ms;
	-moz-transition-delay: 500ms;
	-o-transition-delay: 500ms;
	-ms-transition-delay: 500ms;	
	transition-delay: 500ms;
}

/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	opacity: 1;
	transform: translateY(-100%);
}

/** Full Caption :hover Behaviour **/
#mainwrapper .box:hover .full-caption {
	-moz-transform: translateY(100%);
	-o-transform: translateY(100%);
	-webkit-transform: translateY(100%);
	opacity: 1;
	transform: translateY(100%);
}

/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {
	opacity: 1;
}

/** Slide Caption :hover Behaviour **/
#mainwrapper .box:hover .slide-caption {
	background-color: rgba(0,0,0,1) !important;
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	opacity: 1;
	transform: translateX(-100%);
}
#mainwrapper .box:hover img#image-4 {
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	opacity: 1;
}

/** Rotate Caption :hover Behaviour **/
#mainwrapper .box:hover .rotate {
	background-color: rgba(0,0,0,1) !important;
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

/** Scale Caption :hover Behaviour **/
#mainwrapper .box:hover #image-6 {
	-moz-transform: scale(1.4);
	-o-transform: scale(1.4);
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
}

#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {
	-moz-transform: translateX(200px);
	-o-transform: translateX(200px);
	-webkit-transform: translateX(200px);
	transform: translateX(200px);
}

@media only screen and (max-width:580px)
{ 
 #mainwrapper {margin:0 auto; float:none; width:90%;}

#mainwrapper .box {
	border: 2px solid #ccc; 
	cursor: pointer;
	width: 250px;
	height: 166px;
	float: none; margin:0 auto; margin-top:12px;
	
	position: relative;
	overflow: hidden;
	
}
}

@media only screen and (min-width:581px) and (max-width:1280px)
{ 
 #mainwrapper {margin:0 auto; float:none; width:90%;}
#mainwrapper .box {
	border:none; 
	cursor: pointer;
	width: 250px; border: 2px solid #ccc; 
	height: 166px;
	float:left; margin:10px;
	
	position: relative;
	overflow: hidden;
	
}
}


Mixology is an art! What is more, it is also the hallmark of Qu4tre, our lounge bar, where you are invited to relax in an intimate setting while tasting the original cocktails created by our Barmen. They are inventors of flavours, designer of taste sensations, consistent innovator and wizard of mixology. They explore all the arcane aspects of this alchemical discipline and offers a selection of original cocktails based around the 4 elements. Inspired by water, air, fire and earth, the Barmen of Le Qu4tre select rare alcoholic beverages and often overlooked aromatic spices and herbs and combines them to create the unexpected.


An inventive cocktail menu, utilising the freshest ingredients of the season paired with high-end spirits.

Pling is the hotel’s vibrant lux-lounge bar. Serving light meals by day, its fashionable, upbeat atmosphere makes it the perfect venue for winding down with friends or associates in the evening.