@charset "utf-8";
/*
Theme Name: Le Royal Express and Conrniche hotel
Theme URI: http://www.oi-me.com
Description: Designed by <a href="http://www.oi-me.com" title="Orange Interactive Technology">Orange</a>.
Date : 03-01-2016
Version: 0.1 English
Author: Abdul Rafeeque
Author URI: http://www.oi-me.com
*/

::selection {background: #535495; color:#fff }
::-moz-selection {background: #535495 ; color:#fff}

body{ color:#000000;font-family: 'Roboto', sans-serif; font-weight:400; font-size:16px; background:#fff}

*{font-family: 'Roboto', sans-serif; box-sizing:border-box; outline:none; }

img{ max-width:100%; outline:none}

a{color:#5c5b5b; text-decoration:none; outline:none}
a:hover,a:focus{ color:#e4001f;text-decoration:none }

strong,b{ font-weight:bold }
i,em{ font-style:italic}

.clearfix:after { visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/*--Placeholder style--*/
::-webkit-input-placeholder { opacity:1; color:#000}
:-moz-placeholder {opacity:1; color:#000}
::-moz-placeholder {opacity:1; color:#000}
:-ms-input-placeholder { opacity:1; color:#000}

/*==Header==*/
.oi-header-wrap{}

	/*--Two cols--*/
	.oi-two-cols{ }
	.oi-two-cols .oi-col-one,
	.oi-two-cols .oi-col-two{ width:50%; float:left; }
	
	/*--Hotel header--*/
	.oi-hotel-headers{ text-align:center ; position:relative}
	.oi-hotel-headers .oi-logo{ vertical-align:middle; background:rgba(255,255,255,.8); height:123px;position:absolute; padding:8px 0; left:0; right:0; top:0; z-index:5 }
	.oi-hotel-headers .oi-logo a{}
	
		/*--main banner--*/
		.oi-hotel-banner ul.slides li{ position:relative; height:680px; background-position:center; background-repeat:no-repeat; background-size:cover;}
		.oi-hotel-banner .flex-control-nav { bottom:0px; z-index:3; height:85px;}
		.oi-hotel-banner .flex-control-nav a{ width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:none;}
		.oi-hotel-banner .flex-control-nav a.flex-active{ border:2px solid #000; background:#fff !important}
		.oi-hotel-banner .flex-control-nav li{ margin:35px 6px}

	
		/*--Hotel Le royal--*/
		.oi-leroyal{ background:red;}
		
		.oi-hotel-banner #main_slider .flex-control-nav{ background:url(../images/gradient-1.png) bottom repeat-x;}
		.oi-hotel-banner #main_slider .flex-control-paging li a{ background:#535495}

		
		/*--Hotel Corniche--*/
		.oi-corniche{ background:blue;}
		
		.oi-corniche .oi-hotel-headers .oi-logo img{ margin-top:5px}
		
		.oi-hotel-banner #main_slider2 .flex-control-nav{ background:url(../images/gradient-2.png) bottom repeat-x;}
		.oi-hotel-banner #main_slider2 .flex-control-paging li a{ background:#7e4a75}

/*==Booking engine==*/	
.oi-booking-engine{ background:#000; padding:20px 0; text-align:center}
.oi-booking-engine li{ display:inline-block; text-align:left; vertical-align:top; width:110px; position:relative; margin:0 1px}
.oi-booking-engine li.item-first{ width:160px;}
.oi-booking-engine li.item-last{ width:165px;}
.oi-booking-engine li input,
.oi-booking-engine li select{ border:1px solid #fff; padding:0 5px; border-radius:3px; height:30px; background-color:#fff; font-size:14px; text-transform:uppercase; width:100%;}	
.oi-booking-engine li input.date-fld{ background:url(../images/icon-calender.png) right center no-repeat #fff}
.oi-booking-engine li .oi-btn{ border-radius:3px; background:#ff0000; color:#fff; border:1px solid #ff0000;font-family: 'Roboto', sans-serif; font-weight:700; text-transform:uppercase; height:30px; cursor:pointer}
.oi-booking-engine li .oi-btn:hover{background:#606060; border:1px solid #606060;color:#000; }
	
		.oi-booking-form .select-wrapper{  background:#fff url(../images/arrow-down-1.png) right center no-repeat; position:relative; padding:0; color:#000;display: inline-block; cursor: pointer;  font-size:14px;  border:1px solid #fff; border-radius:3px;	}
		.oi-booking-form .select-wrapper, 
		.oi-booking-form .select-wrapper select{height:30px;line-height: 28px; left:0; right:0; width:100%;}
		.oi-booking-form .select-wrapper .holder{display: block;margin:0 25px 0 5px;white-space: nowrap;overflow: hidden;cursor: pointer;position: relative;z-index: 1; text-transform:uppercase}
		.oi-booking-form .select-wrapper select{	margin: 0;position: absolute;z-index: 2; cursor: pointer;outline: none;	opacity: 0;	_noFocusLine: expression(this.hideFocus=true);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";	filter: alpha(opacity=0);-khtml-opacity: 0;	-moz-opacity: 0;}

/*==Content==*/
.oi-content-wrap{}
.oi-content-wrap h1{ font-size:33px; font-weight:700;font-family: 'Roboto Slab', serif; text-align:center; padding:0 0 10px; margin-bottom:10px;}
.oi-content-wrap p{ text-align:justify; line-height:25px; margin-bottom:25px; font-size:16px}
 
	/*--Special offer--*/
	.oi-special-offers{ margin:40px 0}
	.oi-special-offers ul{ margin:0 0; text-align:center}
	.oi-special-offers li{ display:inline-block; width:300px; height:150px; text-align:left; /*float:left;*/ margin:0 5px; overflow:hidden; position:relative}
	.oi-special-offers li a{ color:#fff; font-size:14px;}
	.oi-special-offers li img{ position:absolute; left:0; z-index:1; top:0}
	.oi-special-offers .oi-spl-ofr-cntnt{ padding:0 0 0 10px; display:table-cell; vertical-align:middle; background:url(../images/bg-1.png) no-repeat left top; width:137px;height:150px; position:relative; z-index:2}
	.oi-special-offers li .oi-offer-deatils{ display:none; position:absolute; vertical-align:middle; left:0; top:0; bottom:0; right:0; background:#7E4A75; color:#fff; padding:55px 10px 10px ; line-height:24px; text-align:center; z-index:10}
	.oi-special-offers li:hover .oi-offer-deatils{ display:block;}
	.oi-special-offers .oi-spl-ofr-cntnt span{ display:block; font-size:17px; }
	.oi-special-offers .oi-spl-ofr-cntnt span.oi-percent{ font-size:35px;font-weight:700;font-family: 'Roboto Slab', serif;}
		
	/*--gallery--*/
	.lslide img{ width:100%;}
	
	.lSSlideOuter .lSPager.lSGallery li.active, 
	.lSSlideOuter .lSPager.lSGallery li:hover{ border-radius:0 !important; position:relative}
	.lSSlideOuter .lSPager.lSGallery li.active:after{ height:3px; left:0; right:0; bottom:0; content:''; position:absolute;}

	/*--Hotel Le royal content--*/
	.oi-leroyal-content{ padding:30px 25px 40px;}
	.oi-leroyal-content h1{ border-bottom:1px solid #535495; color:#535495;}
	
	.oi-leroyal-content .oi-special-offers .oi-spl-ofr-cntnt{ background:url(../images/bg-1.png) no-repeat left top;}
	.oi-leroyal-content .oi-special-offers li .oi-offer-deatils{ background:#535495}
	
	.oi-leroyal-content .lSSlideOuter .lSPager.lSGallery li.active:after{ background:#535495}
		
	/*--Hotel corniche content--*/
	.oi-corniche-content{ padding:30px 25px 40px;}
	.oi-corniche-content h1{ border-bottom:1px solid #7e4a75; color:#7e4a75;}
	
	.oi-corniche-content .oi-special-offers .oi-spl-ofr-cntnt{ background:url(../images/bg-2.png) no-repeat left top;}
	
	.oi-corniche-content  .lSSlideOuter .lSPager.lSGallery li.active:after{ background:#7e4a75}

/*==Footer==*/
.oi-footer{ background:#000; padding:20px 30px; font-size:12px; color:#fff}
.oi-footer .oi-col-two{ text-align:right;}

	.oi-sm-media li{ display:inline-block;vertical-align:middle; margin-left:5px}
	.oi-sm-media li a{ width:20px; height:20px; background:#fff; border-radius:50%; display:block; }
	.oi-sm-media li a:hover{ background:#ff0000}




	@media 
	(-webkit-min-device-pixel-ratio: 1.5), 
	(min-resolution: 144dpi){ 
		.oi-special-offers li{ display:inline-block; width:290px; height:145px;}
		
		.oi-leroyal-content{ padding:30px 15px 40px;}
		.oi-corniche-content{ padding:30px 15px 40px;}
	}








		

/*=========RESPONSIVE======*/
@media (min-width: 1920px) {
 
}
@media (min-width: 1360px) and (max-width: 1919px) {
	
}
@media (min-width: 1000px) and (max-width: 1359px) {
	
}
@media (min-width: 768px) and (max-width: 999px) {

/*==Header==*/
		
		/*--Hotel header--*/
		.oi-hotel-headers .oi-logo{ height:85px}
		.oi-hotel-headers .oi-logo img{ height:70px }

		/*--main banner--*/
		.oi-hotel-banner ul.slides li{ height:400px;}
		
		/*--Hotel Corniche--*/
		.oi-corniche .oi-hotel-headers .oi-logo img{ margin-top:0}
		
/*==Booking engine==*/	
.oi-booking-engine li{ width:33%; margin-bottom:10px}
.oi-booking-engine li.item-first{  width:33%;}
.oi-booking-engine li.item-last{ width:33%; text-align:center; margin-bottom:0}

/*==Content==*/
.oi-content-wrap{}
.oi-content-wrap h1{ font-size:25px; }
.oi-content-wrap p{ text-align:justify; line-height:22px; margin-bottom:20px; font-size:14px}
	
	/*--Special offer--*/
	.oi-special-offers{ margin:30px 0}
	.oi-special-offers ul{ margin:0 0; text-align:center}
	.oi-special-offers li{ text-align:left; display:inline-block;float:none; margin:5px 0; }
	
	/*--Hotel Le royal content--*/
	.oi-leroyal-content{ padding:20px 15px 20px;}
	
	/*--Hotel corniche content--*/
	.oi-corniche-content{ padding:20px 15px 20px;}

}
@media (max-width: 767px) {
	
/*==Header==*/

	/*--Two cols--*/
	.oi-two-cols{ }
	.oi-two-cols .oi-col-one,
	.oi-two-cols .oi-col-two{ width:100%; float:none; }
		
		/*--Hotel header--*/
		.oi-hotel-headers .oi-logo{ height:85px}
		.oi-hotel-headers .oi-logo img{ height:70px }

		/*--main banner--*/
		.oi-hotel-banner ul.slides li{ height:400px;}
		
		/*--Hotel Corniche--*/
		.oi-corniche .oi-hotel-headers .oi-logo img{ margin-top:0}
		
/*==Booking engine==*/	
.oi-booking-engine li{ width:90%; margin-bottom:10px; display:none}
.oi-booking-engine li.item-first{  width:90%;display:inline-block}
.oi-booking-engine li.item-last{ width:90%; text-align:center; margin-bottom:0;display:inline-block}

/*==Content==*/
.oi-content-wrap{}
.oi-content-wrap h1{ font-size:20px; }
.oi-content-wrap p{ text-align:justify; line-height:22px; margin-bottom:20px; font-size:14px}
	
	/*--Special offer--*/
	.oi-special-offers{ margin:30px 0}
	.oi-special-offers ul{ margin:0 0; text-align:center}
	.oi-special-offers li{ text-align:left; display:inline-block;float:none; margin:5px 0; }
	
	/*--Hotel Le royal content--*/
	.oi-leroyal-content{ padding:20px 10px 20px;}
	
	/*--Hotel corniche content--*/
	.oi-corniche-content{ padding:20px 10px 20px;}
	

/*==Footer==*/
.oi-footer .oi-col-two{ text-align:center; margin-top:20px}



}
@media (max-width: 639px) {

}
@media (max-width: 479px) {

}

.errorMessage li{ color: red; display: inline; text-align: center; list-style-type: circle;margin: 13px; font-size:12px; line-height: 33px;}
    .ui-datepicker{ z-index: 10 !important}