/* ==========================================================================
	#Reset
========================================================================== */
* { padding: 0; margin: 0; outline: 0; box-sizing: border-box; }

/* ==========================================================================
	#Basic
========================================================================== */
html,
body { height: 100%; }

html { overflow-y: scroll; }
body { min-width: 990px; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; color: #000; }

a { text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

img { border: 0; vertical-align: middle; }

ol,
ul { list-style-position: inside; }

/* ==========================================================================
	#Helpers
========================================================================== */
.alignleft { float: left; }
.alignright { float: right; }

.clearfix:before,
.clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* ==========================================================================
	#General
========================================================================== */
input[type="text"],
input[type="email"],
input[type="submit"],
input[type="button"],
textarea,
select {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}
button { background: none; }

/* ==========================================================================
   #Transitions
========================================================================== */
.camera,
.camera .cameraImage,
.thumbImage img,
.sliderThumbs .sliderPrev,
.sliderThumbs .sliderNext,
.roomInfo a,
.roomInfoInner { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

/* ==========================================================================
	#Icons
========================================================================== */
.ico { display: inline-block; vertical-align: middle; }

.icoInfo { width: 40px; height: 40px; background: url(https://www.maison-de-lolivier.com/PHPJabbers-InteractiveFloorPlan/app/web/img/frontend/icoInfo.png) no-repeat 4px 3px; }

/* ==========================================================================
	#Sliders
========================================================================== */
.slider,
.slider .sliderClip { position: relative; overflow: hidden; }
.slides { overflow: hidden; list-style: none outside none; }
.slide { float: left; }

/* ==========================================================================
	#Colorbox
========================================================================== */
#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; }
#cboxWrapper { max-width: none; }
#cboxOverlay { position: fixed; width: 100%; height: 100%; }
#cboxMiddleLeft, #cboxBottomLeft { clear: left; }
#cboxContent { position: relative; }
#cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; max-width: 980px; max-height: 600px; padding: 40px 10px 10px; background: #fff; border-radius: 6px; }
#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }

#cboxPrevious,
#cboxNext { position: absolute; top: 4px; overflow: hidden; display: inline-block; width: 32px; height: 32px; margin-right: 5px; border: 0; background-color: rgba(0, 0, 0, .5); background-repeat: no-repeat; background-position: 4px 4px; white-space: nowrap; text-indent: 200%; }
#cboxPrevious:hover,
#cboxNext:hover { background-color: rgba(0, 0, 0, .7); }
#cboxPrevious { background-image: url(https://www.maison-de-lolivier.com/PHPJabbers-InteractiveFloorPlan/app/web/img/frontend/popupPrev.png); left: 10px; }
#cboxNext { background-image: url(https://www.maison-de-lolivier.com/PHPJabbers-InteractiveFloorPlan/app/web/img/frontend/popupNext.png); left: 46px; }

.cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; max-width: 100%; max-height: 100%; }
.cboxIframe { width: 100%; height: 100%; display: block; border: 0; padding: 0; margin: 0; }
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; }

#cboxOverlay { background: rgba(0, 0, 0, .7); }
#colorbox { outline:0; }
#cboxClose { position: absolute; top: 4px; right: 10px; border: 0; width: 32px; height: 32px; border: 4px solid #444; background: #444 url(https://www.maison-de-lolivier.com/PHPJabbers-InteractiveFloorPlan/app/web/img/frontend/popupClose.png) no-repeat 0 0; text-indent: -9999px; opacity: .7; }
#cboxClose:hover { opacity: 1; }

/* ==========================================================================
	#Containers
========================================================================== */
.wrapper { min-height: 100%; }
.shell { width: 100%; margin: 0 auto; }

/* ==========================================================================
	#sectionHomePlan
========================================================================== */
.sectionHomePlan { padding: 0 30px; }
.sectionHomePlan .sectionBody { position: relative; z-index: 1; margin: 0 auto;overflow: auto;-ms-overflow-y: hidden;overflow-y:hidden;position: relative;}

.plan { position: relative;}
.plan > img { width: 100%; }

.cameras { list-style: none outside none; }
.camera { position: absolute; opacity: 0; }
.sectionHomePlan:hover .camera { opacity: .7; }
.sectionHomePlan .camera:hover { opacity: 1; }
.camera a { position: absolute; display: block; width: 25%; height: 25%; z-index: 1; }
.camera .cameraImage { position: absolute; width: 200px; height: 200px; margin: -120px; padding: 10px; border: 1px solid #000; background: #fff; opacity: 0; transform: scale(0); }
.camera a:hover .cameraImage { margin: 0; opacity: 1; transform: scale(1); }
.camera .cameraImage img { width: 100%; height: 100%; }
.camera a .cameraImageTopRight { bottom: 100%; left: 100%; }
.camera a .cameraImageTopCenter { bottom: 100%; right: 50%; margin-right: -100px !important; }
.camera a .cameraImageBottomLeft { top: 100%; right: 100%; }
.camera a .cameraImageTopLeft { bottom: 100%; right: 100%; }
.camera a .cameraImageBottomRight { top: 100%; left: 100%; }
.camera a .cameraImageBottomCenter { top: 100%; right: 50%; margin-right: -100px !important; }

.camera .cameraIcon { position: relative; }
.camera .cameraIcon,
.camera .cameraIcon img { width: 100%; height: 100%; }

.roomsInfos { list-style: none outside none; }
.roomInfo { position: absolute; width: 40px; height: 40px; }
.roomInfo a { position: relative; display: block; width: 100%; height: 100%; text-align: center; opacity: 0; }
.roomInfo a:hover { text-decoration: none; opacity: 1; }
.plan:hover .roomInfo a { opacity: 1; }

.roomInfoInner { position: absolute; width: 200px; padding: 10px; border: 1px solid #000; background: #fff; opacity: 0; transform: scale(0); z-index: 99999;}
.roomInfo a:hover .roomInfoInner { opacity: 1; transform: scale(1); }
.roomInfoInner p { overflow: hidden; font-size: 14px; line-height: 1.4; color: #000; }
.roomInfoInner .roomInfoTitle { padding-bottom: 5px; font-size: 16px; font-weight: bold; text-transform: capitalize; }
.roomInfoMeta { padding-bottom: 10px; list-style: none outside none; }
.roomInfoMeta dl { font-size: 0; }
.roomInfoMeta dt,
.roomInfoMeta dd { display: inline-block; width: 50%; padding: 0 5px; font-size: 13px; color: #000; }
.roomInfoMeta dt { text-align: right; }
.roomInfoMeta dd { text-align: left; }

/* ==========================================================================
	#sliderThumbs
========================================================================== */
.sliderThumbs,
.sliderThumbs .sliderClip { height: 150px; }
.sliderThumbs { padding: 0 40px; }
.sliderThumbs .slides { font-size: 0; }
.sliderThumbs .slide { overflow: hidden; width: 140px; height: 140px; padding: 5px; }

.thumb { position: relative; overflow: hidden; display: block; width: 100%; height: 100%; padding: 5px; border: 1px solid #000; background: #fff; }
.thumb:hover { text-decoration: none; }
.thumbImage { overflow: hidden; }
.thumbImage,
.thumbImage img { width: 100%; height: 100%; }
.thumbImage img { transform: scale(1); }
.thumb:hover .thumbImage img { transform: scale(1.2); }

.sliderThumbs .sliderPrev,
.sliderThumbs .sliderNext { position: absolute; top: 50%; width: 30px; height: 60px; margin-top: -30px; background: rgba(0, 0, 0, .6); color: #fff; line-height: 60px; text-align: center; }
.sliderThumbs .sliderPrev:hover,
.sliderThumbs .sliderNext:hover { background: rgba(0, 0, 0, .8); text-decoration: none; }
.sliderThumbs .sliderPrev { left: 0; }
.sliderThumbs .sliderNext { right: 0; }

/* ==========================================================================
	#Responsive
========================================================================== */
@media only screen and ( max-width: 990px ) {
	/* ==========================================================================
		#General
	========================================================================== */
	body { min-width: 100%; }
	.shell { width: 96%; }
}