/********************************
*********************************

-----All Rights Reserved at The Organic Tech-notch Team 2016
-----Auther: Omalka Menuwan | TOT - Tech-notch

Main stylesheet for Orchid Villa Kandy Official Website
	1. General Stylings
		1.1 Fonts include
		1.2 Reset stylings
		1.3 Common stylings
		1.4 Navigation Styling
		1.5 Footer Styling
	2. Home Page	
		2.1 Slider Section
		2.2 About Section
		2.3 Hotels Section
	3. Rooms Page
		3.1 Tabs
	4. Restaurent Page	
		4.1 Restaurent content
		4.2 Menu Card
		
	5. Facilities Page
	6. Gallery Page
	7. Contact Page
********************************	
********************************/

/***************************************
******** 1. General Styling ************
****************************************/
/*<<<<<<<< 1.1 Fonts include >>>>>>>*/

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Thin.ttf');
	font-weight: 100;
	font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ThinItalic.ttf');
	font-weight: 100;
	font-style: Italic;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ExtraLight.ttf');
	font-weight: 200;
	font-style: normal;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ExtraLightItalic.ttf');
	font-weight: 200;
	font-style: Italic;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Light.ttf');
	font-weight: 300;
	font-style: normal;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-LightItalic.ttf');
	font-weight: 300;
	font-style: Italic;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Italic.ttf');
	font-weight: normal;
	font-style: Italic;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Medium.ttf');
	font-weight: 500;
	font-style: normal;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-MediumItalic.ttf');
	font-weight: 500;
	font-style: Italic;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf');
	font-weight: 600;
	font-style: normal;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-SemiBoldItalic.ttf');
	font-weight: 600;
	font-style: Italic;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Bold.ttf');
	font-weight: 700;
	font-style: normal;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-BoldItalic.ttf');
	font-weight: 700;
	font-style: Italic;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ExtraBold.ttf');
	font-weight: 800;
	font-style: normal;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf');
	font-weight: 800;
	font-style: italic;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Black.ttf');
	font-weight: 900;
	font-style: normal;
}
@font-face {
   font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-BlackItalic.ttf');
	font-weight: 900;
	font-style: Italic;
}
@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

/*<<<<<<<< 1.2 Reset Styling >>>>>>>*/
*{
	margin:0;
	padding:0;
}
body{
	font-family: 'Montserrat';
	font-size:15px;
	background: #fff;
	color:#212020;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-y:scroll;
	overflow-x:hidden;
}
body::-webkit-scrollbar {
    width: 4px;
}
 
body::-webkit-scrollbar-track {
    background:#212020;
}
 
body::-webkit-scrollbar-thumb {
  background-color: #B688C1;
  outline: 1px solid #000;
}
::-moz-selection { 
	background: #B688C1; 
	color:#fafafa;
}
::selection { 
	background: #B688C1; 
	color:#fafafa;
}
#wrapper{
	visibility:hidden;
}
/*<<<<<<<< 1.3 Common Styling >>>>>>>*/
section#about{
	padding: 10vh 7vw;
	position: relative;
	display: grid;
	grid-template-columns: 4fr 6fr;
}
h1.main-header{
	text-align:center;
	font-size:70px;
	text-transform:uppercase;
	background:url('../images/header.svg');
	background-position: 50% 10%;
	background-repeat: no-repeat;
	background-opacity:0.4;
	font-weight: 900;
}

/*<<<<<<<< 1.4 Popup section >>>>>>>>>>*/
div#popup{
	position:fixed;
	background:rgba(255,255,255,0.8);
	top:0;
	left:0;
	z-index:30;
	display:none;
	width:100vw;
	height:100vh;
}
div#popup div#msg_area{
	position:relative;
	width:70vw;
	height:80vh;
	margin:10vh 15vw ;
	background:#fafafa;
	border:9px solid #B688C1;
	padding: 15px 30px;
}
div#popup div#msg_area h1{
	color:#B688C1;
	font-size:60px;
	text-transform:uppercase;
	text-align:center;
	margin:0;
}
div#popup div#msg_area div.res_pop div.sec{
	margin:15px 0;
}
div#popup div#msg_area div.res_pop div.sec span{
	color:#B688C1;
	font-weight:500;
}
div#popup div#msg_area div.res_pop div.sec input.date{
	text-align:right;
}
div#popup div#msg_area div.res_pop div.sec input{
	background:none;
	width:100%;
	position:relative;
	border:0px;
	border-bottom:2px solid #B688C1;
	color:#B688C1;
	text-align:left;
	font-size:20px;
	font-weight:300;
	transition:border .2s ease;
}
div#popup div#msg_area div.res_pop div.sec input:focus{
	outline:0px;
	border-bottom:1px solid #B688C1;
	
}
div#popup div#message{
	height:50px;
	position:relative;
	width:100%;
	text-align:center;
}
div#popup  .variations{
	display: block;
    position: absolute;
    right: 0;
}
div#popup  .variations li {
  width: 70px;
  margin: 15px 20px;
  display: inline-block;
  vertical-align: top;
}
div#popup  .close {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  color:#B688C1;
}
div#popup  .close:hover::before,div#popup  .close:hover::after {
  background: #333232;
}
div#popup  .close::before, .close::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #000;
}
div#popup  .close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
div#popup  .close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
div#popup  .close.hairline::before,div#popup  .close.hairline::after {
  height: 1px;
}
div#popup div#msg_area div.res_pop div.sec select{
	background:none;
	width:100%;
	position:relative;
	border:0px;
	border-bottom:2px solid #B688C1;
	color:#B688C1;
	text-align:right;
	font-size:20px;
	font-weight:300;
}
div#popup div#msg_area div.res_pop div.submit_button {
	text-align:center;	
}
div#popup div#msg_area div.res_pop div.submit_button input{
	border:0px;
	width: 300px;
    padding: 13px;
    font-size: 20px;
    text-transform: uppercase;
    background: #B688C1;
	color:#fafafa;
} 
 
/*<<<<<<<< 1.4 Navigation Styling >>>>>>>*/
nav#normal{
	width:100%;
	position:fixed;
	top:0;
	z-index:25;
}
nav#normal .main_logo{
	width: 13vw;
	position: absolute;
	top: 1vh;
	left: 5vw;
	background: #fff;
	z-index: 26;
	transition: all .2s ease;
	box-shadow: 0 3px 3px rgb(0 0 0 / 10%), 0 3px 4px rgb(0 0 0 / 24%);
}
nav#normal div#upper{
	width:100%;
	height:50px;
	background: #cf94dd;
	position:relative;
	transition: height .2s ease;
}
nav#normal div#lower{
	width:100%;
	height:50px;
	background:#B688C1;
	position:relative;
	
}
nav#normal #upper .upper_content{
	float:right;
	display:block;
}
nav#normal #upper .main_menu2 {
    list-style-type: none;
    text-transform:uppercase;
    position: relative;
    width: 250px;
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-flex: 1; 
	-webkit-flex: 1; 
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 20px;
    margin:0;
	float:left;
}
nav#normal #upper #weather {
	text-transform: uppercase;
	display: block;
	float: left;
	padding:0 20px;
}
nav#normal #upper #weather:before {
	content: '';
    border-left: solid 1px #fafafa;
    /* border-right: solid 1px #fafafa; */
    height: 30px;
    width: 0;
    position: absolute;
    top: 10px;
    margin-left:-20px;
}
nav#normal #upper #weather i {
	color: #fff;
	font-family: weather;
	font-size:40px;
	font-weight: normal;
	font-style: normal;
	text-transform: none;
}
nav#normal #upper #weather p {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	line-height:46px;
	margin:0;
}
nav#normal #upper .main_menu2:after {
    content: '';
    border-left: solid 1px #fafafa;
   /*  border-right: solid 1px #fafafa; */
    height: 30px;
    width: 0;
    position: absolute;
    top: 10px;
    right: 0;
}
nav#normal #upper .main_menu2:before{
	content: '';
    border-left: solid 1px #fafafa;
    /* border-right: solid 1px #fafafa; */
    height: 30px;
    width: 0;
    position: absolute;
    top: 10px;
    left: 0; 
}
nav#normal #upper .main_menu2 li {
    position: relative;
    white-space: nowrap;
	padding:0px;
}
nav#normal #upper span.reservations{
	float:left;
	display:block;
	line-height:50px;
	color:#F3F1F3;
	padding:0 15px;
	font-size: 12px;
	font-style:italic;
	font-weight: 500;
}
nav#normal span.res_button a{
	line-height: 50px;
	margin: 0 0 0 20px;
	background: #F3F1F3;
	padding: 5px 10px;
	color:#B688C1 !important;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 600;
}
nav#normal #lower .shut{
	/* display:none; */
}
nav#normal #lower span.res_button a{
	margin:0;
}
nav#normal #upper span.res_button a:hover{
	background:#fff;
	text-decoration:none;
}
nav#normal #upper .main_menu2 li a {
    color: #F3F1F3;
    line-height: 50px;
    font-size: 18px;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
    font-weight: 500;
}
nav#normal #upper .main_menu2 li a:hover{
	color:#fff;
}
nav#normal #lower .main_menu {
    list-style-type: none;
    text-transform:uppercase;
    position: relative;
    width: 60%;
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-flex: 1; 
	-webkit-flex: 1; 
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0;
    float: right;
}
nav#normal #lower .main_menu li {
    position: relative;
    white-space: nowrap;
	padding:0px;
}

nav#normal #lower .main_menu li a {
    color: #fafafa;
    line-height: 50px;
    font-size: 13px;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
    font-weight: 600;
    padding: 0.8em;
    position: relative;
}	
/*################################################*/
/*Navigation Scroll*/
nav#normal.scroll .main_logo{
	width:8vw;
}
nav#normal.scroll div#upper{
	height:0;
}
nav#normal.scroll div#upper .container{
	display:none;
}
/*################################################*/
/*Navigation Mobile*/
nav#responsive{
	width:100%;
	height:100px;
	background: #cf94dd;
	position:fixed;
	z-index:18;
	top:0;
	display:none;
}
nav#responsive img.main_logo{
	max-height: 100%;
    position: relative;
    margin: auto;
    background: #fff;
    width: 90px;
    top: 7px;
    display: block;
}
nav#responsive i#nav_bars{
	color:#fff;
	position:absolute;
	top:10px;
	right:10px;
	font-size:2em;
	z-index:20;
	cursor:pointer;
}
nav#responsive div#menu{
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	background:rgba(182,154,191,0.8);
	z-index:19;
	display:table;
	left:100%;
	transition:all 0.2s ease;
}
nav#responsive div#menu.nav{
	left:0;
}
nav#responsive div#inner_menu{
	display:table-cell;
	vertical-align:middle;
}
nav#responsive div#inner_menu ul{
	text-align:center;
	line-height:3;
	color:#fff;
	list-style:none;
}
nav#responsive div#inner_menu ul li a{
	color:#fff;
}
/*<<<<<<<< Datepicker >>>>>>>>>>>>>>>*/
.ui-widget.ui-widget-content{
	border:2px solid #B688C1 !important;
	border-radius:0px !important;
}
.ui-datepicker{
	padding:0 !important;
	width: 18em !important;
	background:#fafafa;
}
.ui-datepicker .ui-datepicker-header{
	position: relative;
    padding: .2em 0;
	background: #B688C1;
	color:#fafafa;
}
.ui-datepicker .ui-datepicker-header{
	position: relative;
    padding: .2em 0;
    width: 100%;
	border-radius:0px;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #888;
}
.ui-state-hover{
	color:#B688C1 !important;
}
.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}
.ui-state-disabled {
    cursor: default !important;
    pointer-events: none;
}
.ui-state-highlight{
	background:#B688C1 !important;
	color:#fafafa !important;
}
.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none;
}	
.ui-datepicker-calendar thead tr th{
	color:#666;
	font-weight:600;
	text-transform:uppercase;
}
a.ui-datepicker-prev:after {
    content: "\e257";
    font-family: 'Glyphicons Halflings';
    color: #fafafa;
    top: 4px;
    position: relative;
	cursor:pointer;
}
a.ui-datepicker-next:after {
    content: "\e258";
    font-family: 'Glyphicons Halflings';
    color: #fafafa;
    top: 4px;
    position: relative;
	cursor:pointer;
}
.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}
.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
	font-weight: 300;
    text-transform: uppercase;
}	
/*<<<<<<<< 1.5 Footer Styling >>>>>>>*/
footer{
	width:100%;
	background: #cf94dd;
	text-align:center;
	color:#fafafa;
	display: flex;
	flex-direction: column;
}
footer img{
	height:150px;
	position:relative;
}
footer h1{
	font-size:13px;
	margin:10px;
}
footer p{
	font-size:10px;
	margin:0;
}
footer a{
	color:#212020;
}
/***************************************
************ 2. Home Page **************
****************************************/
/*<<<<<<<< 2.1 Slider Section >>>>>>>*/
.carousel-caption{
	display:none;
}
.full-screen {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.carousel-fade .carousel-inner .item {
	opacity: 0.5;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
	opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	left: 0;
	opacity: 0.5;
	z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}
.carousel-fade .carousel-control {
	z-index: 2;
}

/*<<<<<<<< 2.2 About Section >>>>>>>*/
section#about.scroll div.row{
	top:0;
	opacity:1;
}
section#about div.row{
	margin-top:30px;
	top: 30px;
    display: block;
    position: relative;
	opacity:0;
	transition:all .5s ease-out .3s;
}
section#about .abt-img{
	position:relative;
	height:350px;
	padding:0;
}
section#about .main-cont{
	padding:0;
}
section#about .img-title{
	position:absolute;
	font-size:30px;
	color:#B688C1;
	background:rgba(255,255,255,0.9);
	padding:5px 10px;
	top:0px;
	font-weight:300;
}
section#about div.desc{
	font-size:14px;
	text-align:justify;
	padding:20px;
}
section#about div.desc p{
	font-size: 13px;
	padding:0 20px;
	color: #444;
}
section#about h1.main-header{
	margin:0 0 20px;
}
section#about div#kandy{
	background:url('../images/kandy.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
section#about div#orchid{
	background:url('../images/orchid.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
section#about h3#right{
	left:0;
}

/*<<<<<<<< 2.3 Rooms Section >>>>>>>*/
section#rooms div.room{
	width: 70%;
	position:relative;
	padding:0;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	cursor: pointer;
}
section#rooms div.room:nth-child(3){
	border:0px;
}
section#rooms.scroll h1.main-header{
	opacity:1;
	top:0;
}
section#rooms h1.main-header{
	top: 10px;
    position: relative;
	opacity:0;
	transition:all .5s ease-out .2s;
}
section#rooms div.rooms-header{
	position: relative;
	width:100%;
	padding: 20px;
	background: #fff;
	color: #4e4e4e;
	top:0;
	text-align: center;
	font-weight: 700;
	font-style: initial;
}
section#rooms div.rooms-footer{
	position:absolute;
	width:100%;
	height:30px;
	background:#212020;
	color:#B688C1;
	bottom:0;
}
section#rooms div.rooms-footer div.inner-container{
	width:90%;
	position:relative;
	margin:auto;
	color:#F3F1F3;
}
section#rooms div.rooms-footer div.inner-container p{
	margin:0;
	font-size:15px;
	line-height:30px;
	font-weight:200;
	text-transform:uppercase;
	display:inline;
}
section#rooms div.rooms-footer div.inner-container p span{
	font-size:20px;
	font-weight:500;
	padding-left:10px;
	font-style:italic;
}
section#rooms div.rooms-footer div.inner-container a{
	color:#B688C1;
	float:right;
	line-height:30px;
	text-decoration:none;
	font-size:13px;
	font-weight:600;
}
section#rooms div.rooms-footer div.inner-container i{
	padding-left:5px;
}
section#rooms div.rooms-header h2{
	text-transform:uppercase;
	font-weight:300;
	text-align:center;
	margin:0;
	font-size:20px;
	line-height:50px;
}
section#rooms.scroll div#rm_1{
	opacity:1;
	left:0;
}
section#rooms div#rm_1{
	background:url('../images/rooms/rm1/1.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	left: -20px;
    opacity:0;
	transition:all .8s ease-out .3s;
}
section#rooms.scroll div#rm_2{
	top:0;
	opacity:1;
}
section#rooms div#rm_2{
	background:url('../images/rooms/rm2/1.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 20px;
    opacity:0;
	transition:all .8s ease-out .3s;
}
section#rooms.scroll div#rm_3{
	right:0;
	opacity:1;
}
section#rooms div#rm_3{
	background:url('../images/rooms/rm3/1.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	right: -20px;
    opacity:0;
	transition:all .8s ease-out .3s;
}
/*<<<<<<<< 2.4 Locations Section >>>>>>>*/
section#location div.map_cover{
	height:400px;
	width:100%;
	position:relative;
	border:1px solid #212020;
}
section#location div#map{
	height:100%;
	position:relative;
}
section#location div#map-info{
	position:absolute;
	width:260px;
	height: 380px;
	background: rgb(255 255 255);
	top: 10px;
	right: 10px;
	display:table;
	box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
}
section#location div.legend {
	display:table-cell;
	vertical-align:middle;
	padding: 20px;
}
section#location div.legend span.pin{
	width: 30px;
    height: 30px;
    background: #B688C1;
    color: #fafafa;
    line-height: 30px;
    cursor: pointer;
    display: block;
    text-align: center;
    border-radius: 50%;
	float:left;
}
section#location div.legend span.name_loc{
	margin-top: 4px;
	width: 180px;
	margin: 0px 0 0 10px;
	display: inline-block;
	color: #888;
	font-size: 14px;
	font-weight: 500;
}
/***************************************
************ 3. Rooms Page *************
****************************************/
/*<<<<<<<< 3.1 About Section >>>>>>>*/
section#rm_abt{
	margin-top:120px;
	padding: 5vh 0;
}
section#rm_abt .slider_rm{
	width:100%;
	height:400px;
	background:#000;
	position:relative;
}
section#rm_abt  div.desc{
	height:400px;
	display:table;
}
section#rm_abt  div.desc i{
	color:#B688C1;
}
section#rm_abt  div.desc p{
	display:table-cell;
	vertical-align:middle;
	text-align:justify;
	font-size:14px;
	border:3px solid #B69ABF;
	outline:3px solid #B688C1;
	padding:30px;
	line-height:1.8;
	font-style:italic;
}

/*<<<<<<<< 3.2 Facilities Tabs >>>>>>>*/
section#rm_faci div.big_row{
	height:400px;
	/* border:1px solid #333232; */
}
section#rm_faci div.tabs_sec{
	border-right:3px solid #333232;
	height:100%;
	padding:0 5px;
}
section#rm_faci div.tabs_sec div.faci_ico{
	width:60px;
	height:60px;
	background:#B688C1;
	margin:20px 15px;
	cursor:pointer;
}
section#rm_faci div.tabs_sec div.faci_ico:hover{
	background:#333232;
}
section#rm_faci div#tabs{ 
    position: relative;
    height: 100%;
	padding:10px 0;
} 
section#rm_faci div#tabs ul span{
	font-weight:600;
	font-size:17px;
}
section#rm_faci div#tabs .ui-tabs-nav { 
    position: relative;
    padding:0;
} 
section#rm_faci div#tabs .ui-tabs-nav li { 
    border: none; 
    overflow: hidden; 
} 
#faci_ico_1{
	-webkit-mask: url('../images/services/1.svg') no-repeat 50% 50%;
	mask: url('../images/services/1.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
#faci_ico_2{
	-webkit-mask: url('../images/services/2.svg') no-repeat 50% 50%;
	mask: url('../images/services/2.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
#faci_ico_3{
	-webkit-mask: url('../images/services/3.svg') no-repeat 50% 50%;
	mask: url('../images/services/3.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
#faci_ico_4{
	-webkit-mask: url('../images/services/4.svg') no-repeat 50% 50%;
	mask: url('../images/services/4.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
#faci_ico_5{
	-webkit-mask: url('../images/services/5.svg') no-repeat 50% 50%;
	mask: url('../images/services/5.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
#faci_ico_6{
	-webkit-mask: url('../images/services/6.svg') no-repeat 50% 50%;
	mask: url('../images/services/6.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
#faci_ico_7{
	-webkit-mask: url('../images/services/7.svg') no-repeat 50% 50%;
	mask: url('../images/services/7.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
	
}
#faci_ico_8{
	-webkit-mask: url('../images/services/8.svg') no-repeat 50% 50%;
	mask: url('../images/services/8.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
#faci_ico_9{
	-webkit-mask: url('../images/services/9.svg') no-repeat 50% 50%;
	mask: url('../images/services/9.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
#faci_ico_10{
	-webkit-mask: url('../images/services/10.svg') no-repeat 50% 50%;
	mask: url('../images/services/10.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}
.ui-tabs-nav li:focus,
.ui-tabs-nav li.ui-state-active a:focus,
.ui-tabs-nav li.ui-tabs-selected a:focus{
	outline:none !important;
}
section#rm_faci div#tabs .ui-tabs-nav li.ui-tabs-selected div.faci_ico, 
section#rm_faci div#tabs .ui-tabs-nav li.ui-state-active div.faci_ico{ 
    background:#333232;
} 
section#rm_faci div#tabs .ui-tabs-nav li.ui-tabs-selected a, 
section#rm_faci div#tabs .ui-tabs-nav li.ui-state-active a { 
	color:#B688C1;
} 
section#rm_faci div#tabs .ui-tabs-nav li a { 
    float: right; 
    width: 100%; 
    text-align: center; 
	color:#212020;
	font-size:15px;
	font-weight:500;
	padding:0;
} 
section#rm_faci div#tabs .ui-tabs-panel { 
    height: auto; 
}
section#rm_faci div.tabs_header h1{
	margin:0 0 20px;
	text-align:center;
	font-size:25px;
}
section#rm_faci div.desc{
	height:300px;
	display:table;
	background: url('../images/header.svg') no-repeat 50% 50%;
}
section#rm_faci div.desc p{
	font-size:13px;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
	padding:20px;
	border:2px solid #B688C1;
}
section#rm_faci  div.faci_img{
	height:300px;
	/* border:2px solid #B688C1; */
}
section#rm_faci #faci_1{
	background:url('../images/faci/1.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_2{
	background:url('../images/faci/2.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_3{
	background:url('../images/faci/3.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_4{
	background:url('../images/faci/4.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_5{
	background:url('../images/faci/5.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_6{
	background:url('../images/faci/6.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_7{
	background:url('../images/faci/7.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_8{
	background:url('../images/faci/8.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_9{
	background:url('../images/faci/9.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#rm_faci #faci_10{
	background:url('../images/faci/10.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*<<<<<<<< 3.3 Resstaurent Content >>>>>>>*/
section#restaurent{
    padding: 5vh 5vw;
    position: relative;
}	
section#restaurent #rs_slider{
	height:300px;
	background:url('../images/restaurent/6.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	padding:0;
}
section#restaurent div.desc{
	font-size: 14px;
	padding:0 20px;
	color: #888;
	line-height: 1.7;
}
section#restaurent div.desc span{
	display:block;
	font-size:20px;
	font-weight:600;
	font-style:italic;
}
section#restaurent div.desc a{
	color:#F3F1F3;
	background:#B688C1;
	text-transform:uppercase;
	padding:10px;
	margin-top:20px;
	display:inline-block;
	transition:all .2s ease;
}
section#restaurent div.desc a:hover{
	text-decoration:none;
	background:#B69ABF;
}
/***************************************
********* 4. Things to do Page ***********
****************************************/
section#faci{
	margin-top:120px;
}
section#faci .row{
	margin-bottom:30px;
}
section#faci .abt-img{
	position:relative;
	height:350px;
	padding:0;
}
section#faci .main-cont{
	padding:0;
}
section#faci .img-title{
	position:absolute;
	font-size:30px;
	color:#B688C1;
	background:rgba(255,255,255,0.9);
	padding:5px 10px;
	top:0px;
	font-weight:300;
}
section#faci div.desc{
	font-size:14px;
	text-align:justify;
	padding:20px;
	height:350px;
	display:table;
	line-height:1.5;
}
section#faci div.desc p{
	display:table-cell;
	vertical-align:middle;
	padding:20px;
	border:3px solid #B69ABF;
	outline:3px solid #B688C1;
	font-size:13px;
}
section#faci div#kandy{
	background:url('../images/kandy.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
section#faci div.desc span{
	font-size:20px;
	font-weight:600;
}
section#faci div.dest_outer{
	padding: 0;
	width: 30%;
	text-align:center;
	margin-bottom: 30px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
section#faci div.dest_outer h1{
	color:#333232;
	font-size:20px;
	margin-top:0;
	height:45px;
}
section#faci div.dest_outer div.dest_img{
	width:100%;
	height:200px;
	background:yellow;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.dest_img a{
	color:#F3F1F3;
	background: rgb(182 136 193 / 40%);
	padding:5px 10px;
	/* margin-top:20px; */
	display: grid;
	transition:all .2s ease;
	position: absolute;
	width: 100%;
	height: 100%;
	top: -100%;
	left: 0;
	place-items: center;
}
section#faci #desc_1{
	background:url('../images/tto/1.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#faci #desc_2{
	background:url('../images/tto/2.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#faci #desc_3{
	background:url('../images/tto/3.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#faci #desc_4{
	background:url('../images/tto/4.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#faci #desc_5{
	background:url('../images/tto/5.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#faci #desc_6{
	background:url('../images/tto/6.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#faci #desc_7{
	background:url('../images/tto/7.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#faci #desc_8{
	background:url('../images/tto/8.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section#faci #desc_9{
	background:url('../images/tto/9.jpg');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#desc_10{
	background-image: url('../images/tto/10.jpg') !important;
}
#desc_11{
	background-image:url('../images/tto/11.jpg') !important;
}
#desc_12{
	background-image:url('../images/tto/12.jpg') !important;
}
#desc_13{
	background-image:url('../images/tto/13.jpg') !important;
}

/*************************************
*********** 5. Gallery Page ************
****************************************/
section#gallery {
	margin-top:120px;
}

/* General style */
.grid-gallery ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.grid-gallery figure {
	margin: 0;
}

.grid-gallery figure img {
	display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.grid-gallery figcaption h3 {
	margin: 0;
	padding: 0 0 0.5em;
}

.grid-gallery figcaption p {
	margin: 0;
}

/* Grid style */
.grid-wrap {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 1em 1.875em;
}

.grid {
	margin: 0 auto;
}

.grid li {
	width: 25%;
	float: left;
	cursor: pointer;
}

.grid figure {
	padding: 2px;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.grid li:hover figure {
	opacity: 0.7;
}

.grid figcaption {
	background: #e4e4e4;
	padding: 25px;
}

/* Slideshow style */
.slideshow {
	position: fixed;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.slideshow-open .slideshow {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.slideshow ul {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,150px);
	transform: translate3d(0,0,150px);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow ul.animatable li {
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow-open .slideshow ul {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.slideshow li {
	width: 660px;
	height: 560px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -280px 0 0 -330px;
	visibility: hidden;
}

.slideshow li.show {
	visibility: visible;
}

.slideshow li:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.slideshow li.current:after {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
	transition: opacity 0.3s, visibility 0s 0.3s;
}

.slideshow figure {
	width: 100%;
	height: 100%;
	background: #fff;
	border: 25px solid #fff;
	overflow: hidden;
}

.slideshow figcaption {
	padding-bottom: 20px;
}

.slideshow figcaption h3 {
	font-weight: 300;
	font-size: 200%;
}

/* Navigation */
.slideshow nav span {
	position: fixed;
	z-index: 1000;
	color: #59656c;
	text-align: center;
	padding: 3%;
	cursor: pointer;
	font-size: 2.2em;
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.slideshow nav span.nav-next {
	right: 0;
}

.slideshow nav span.nav-close {
	top: 0;
	right: 0;
	padding: 0.5em 1em;
	color: #31373a;
}

.icon:before,
.icon:after {
	font-family: 'fontawesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

span.nav-prev:before {
	content: "\f104";
}

span.nav-next:before  {
	content: "\f105";
}

span.nav-close:before {
	content: "\f00d";
	color:#fafafa;
}

/* Info on arrow key navigation */
.info-keys {
	position: fixed;
	top: 10px;
	left: 10px;
	width: 60px;
	font-size: 8px;
	padding-top: 20px;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
}

.info-keys:before,
.info-keys:after {
	position: absolute;
	top: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
}

/* Example media queries (reduce number of columns and change slideshow layout) */

@media screen and (max-width: 60em) {
	/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
	.grid li {
		width: 33.3%;
	}

	.slideshow li {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: 0;
	}

	.slideshow li figure img {
		width: auto;
		margin: 0 auto;
		max-width: 100%;
	}

	.slideshow nav span,
	.slideshow nav span.nav-close {
		font-size: 1.8em;
		padding: 0.3em;
	}

	.info-keys {
		display: none;
	}

}

@media screen and (max-width: 35em) {
	.grid li {
		width: 50%;
	}
}

@media screen and (max-width: 24em) {
	.grid li {
		width: 100%;
	}
}
/***************************************
********** 6. Contact Page *************
****************************************/
section#contact {
	margin-top:120px;
	padding: 5vh 5vw;
}
section#contact div#map{
	height:400px;
	width:100%;
	position:relative;
	border:1px solid #212020;
}	
section#contact .desc{
	font-size:13px;
}
section#contact .desc h3{
	background:#B688C1;
	color:#F3F1F3;
	padding:5px 10px;
	display:inline-block;
	font-size:20px;
	text-transform:uppercase;
}
section#contact .desc table tr td:nth-child(2){
	width:15px;
	text-align:center;
}



.menu--iris .menu__link:hover,
.menu--iris .menu__link:focus {
    color: #929292;
    text-decoration: none;
}

.menu--iris .menu__item--current .menu__link {
    color: #d94f5c;
}

.menu--iris .menu__link::before,
.menu--iris .menu__link::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    border: 2px solid #ffffff;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
    z-index: 10;
}

.menu--iris .menu__link::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
    -webkit-transform: translate3d(10px, 10px, 0);
    transform: translate3d(10px, 10px, 0);
}

.menu--iris .menu__link::after {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
    -webkit-transform: translate3d(-10px, -10px, 0);
    transform: translate3d(-10px, -10px, 0);
}

.menu--iris .menu__item--current .menu__link::before,
.menu--iris .menu__item--current .menu__link::after,.menu--iris li:hover .menu__link::before,
.menu--iris li:hover .menu__link::after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


div#abt-img-sec {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 0 0 80px;
}

img#abt1 {
    position: relative;
    width: 70%;
    height: auto;
    top: 0;
    left: 80px;
    margin-bottom: 50px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

img#abt2 {
    position: absolute;
    width: 30%;
    bottom: 0;
    right: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

div#abt-txt-sec {
    position: relative;
    padding-left: 40px;
}

div#abt-txt-sec p {
    font-size: 14px;
    color: #888;
    line-height: 1.8;
    text-align: initial;
}

.title-bar-sec h2 {
    font-size: 4.5em;
    margin-bottom: 30px;
    margin-top: 0px;
    font-weight: 600;
    color: #222;
}

span.title-info {
    color: #cf94dd;
    font-style: italic;
    font-weight: 500;
}

section#rooms {
    padding: 5vh 5vw;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

section#rooms .title-bar-sec {
    width: 100%;
    position: relative;
    text-align: center;
}

.room-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-content: center;
    justify-items: center;
    padding: 30px 5vw;
}

.room-bg {
    height: 300px;
    position: relative;
}

.room-container:before {content: '';position: absolute;background: #ffeaf8;width: 90%;height: 50%;top: 16%;left: 5%;}

div#abt-img-sec:before {content: '';position: absolute;background: #ffeaf8;width: 70%;height: 70%;left: 25%;top: 20%;}

section#location {
    position: relative;
    padding: 10vh 8vw;
}

section#location:before {content: '';width: 40%;height: 50%;background: #ffeaf8;position: absolute;left: 0;z-index: -1;top: 0%;}

.legend p {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 8fr;
    align-content: center;
    align-items: center;
}

.footer-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 5vh 5vw;
    align-items: self-start;
}

.footer-bottom {
    width: 100%;
    padding: 10px 50px;
    position: relative;
    display: flex;
    justify-content: space-between;
    background: #6f3e7a;
    font-size: 11px;
    align-items: center;
}

div#footer-logo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#footer-logo span {
    position: relative;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
}

h2.footer-title {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 800;
}

.footer-bot {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 11px;
}

.footer-bot a {
    color: #fff;
}

.footer-inner:before {content: '';position: absolute;height: 100%;width: 5vw;background: #ffeaf8;}

.footer-inner:after {content: '';position: absolute;width: 5vw;height: 100%;background: #ffeaf8;right: 0;}

section#faci .title-bar-sec {
    text-align: center;
}

div#tdt-container {
    position: relative;
    padding: 5vh 8vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.itm-header {
    position: relative;
    padding: 30px;
    font-weight: 700;
    color: #fff;
    background: #cf94dd;
}

.dest_outer:hover .dest_img a {
    top: 0;
}

section#gallery .title-bar-sec {
    text-align: center;
}

section#rm_abt .title-bar-sec {
    text-align: center;
}

section#contact .title-bar-sec {
    text-align: center;
}

section#restaurent .title-bar-sec {
    text-align: center;
}

section#rm_faci .title-bar-sec {
    text-align: center;
}

section#rm_faci {
    position: relative;
    padding: 5vh 5vw;
}

img.createrix {
    height: auto;
}

div#mycarousel_rm_1 {
    width: 100%;
}

section#slider-home {
    position: relative;
    display: grid;
    grid-template-columns: 8fr 4fr;
    align-items: center;
    justify-items: center;
}

div#hc-inner {
    width: 60%;
    height: 60%;
    position: relative;
    text-align: center;
    background: #b688c1;
    color: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    font-size: 2em;
    text-transform: uppercase;
    box-shadow: 0 3px 3px rgb(0 0 0 / 10%), 0 3px 4px rgb(0 0 0 / 24%);
    align-items: center;
    justify-content: center;
}

div#home-content {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
}

div#hc-inner:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: -10%;
    top: 10%;
    background: #ffeaf8;
    z-index: -1;
}

span.sp-1 {
    font-size: 2em;
    line-height: 1;
    font-weight: 200;
}

span.sp-3 {
    font-size: 0.7em;
    font-weight: 800;
}

span.sp-4 {
    font-size: 0.4em;
    margin-top: 20px;
}

span.sp-5 {
    line-height: 1;
    font-weight: 200;
    margin-top: 15px;
}

span.sp-2 {
    line-height: 1;
    font-weight: 700;
}
@media screen and (max-width: 1000px) {
    .room-container{
        padding: 30px 0;
    }
    section#rooms div.room{
        width: 90%;
    }
    section#rm_faci div.big_row {
        height: auto;
    }
    section#slider-home{
        grid-template-columns: 1fr;
    }
    div#home-content{
        display: none;
    }
}
@media screen and (max-width: 800px) {
    .dest_outer{
        width: 45% !important;
    }
    section#about{
        grid-template-columns: 1fr;
    }
    div#abt-img-sec{
        display: none;
    }
    div#abt-txt-sec{
        padding: 0;
    }
    div#abt-txt-sec .title-bar-sec, section#location .title-bar-sec{
        text-align: center;
    }
    div#abt-txt-sec p{
        text-align: justify;
    }
    div#popup-outer{
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
    }
    div#popup-inner{
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: flex-start;
        justify-content: center;
    }
    div#room-desc-sec{
        padding: 0 !important;
    }
}
@media screen and (max-width: 640px) {
    .room-container{
        grid-template-columns: 1fr;
    }
    section#rooms div.room {
        margin-bottom: 10px;
    }
    .title-bar-sec h2{
        font-size: 2.5em;
    }
}
@media screen and (max-width: 600px) {
    .footer-inner{
        grid-template-columns: 1fr;
    }
    div#footer-logo{
        margin-top:20px;
    }
    .footer-bottom{
        flex-direction: column-reverse;
    }
    .footer-bottom span:nth-child(2){
        margin-bottom: 10px;
    }
    .dest_outer{
        width: 100% !important;
    }
    div#popup-outer{
        padding: 30px !important;
    }
}

section#room-popup {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,.8);
    z-index: 50;
    top: -150%;
    left: 0;
    display: grid;
    place-items: center;
}

section#room-popup.active {
    top: 0;
}

div#popup-outer {
    width: 60%;
    min-width: 800px;
    position: relative;
    height: auto;
    background: #fff;
    display: grid;
    padding: 50px;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    overflow: hidden;
}

span#popup-close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 52;
    display: grid;
    place-items: center;
    color: #b688c1;
}

div#popup-inner {
    grid-template-columns: 6fr 4fr;
    display: grid;
    position: relative;
}

div#room-desc-sec {
    padding: 0 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    color: #444;
    z-index: 51;
}

div#room-desc-sec h2 {
    font-weight: 800;
    font-size: 2.3em;
    margin: 0 0 20px;
}

div#room-desc-sec p {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    font-weight: 400;
}

div#room-desc-sec:before {
    content: '';
    position: absolute;
    background: #ffeaf8;
    width: 30%;
    height: 70%;
    z-index: -1;
    left: 75%;
    top: -20%;
}

div#mycarousel_rs {
    z-index: 51;
}

div#popup-outer:before {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: #ffeaf8;
    bottom: 0;
}

.num-span {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 11px;
}

.numbers-inner {
    position: relative;
    width: 70%;
}

.footer-column {
    display: grid;
    align-items: start;
    justify-items: center;
}

.num-span span:nth-child(2) {
    justify-items: start;
    display: grid;
    margin-left: 10px;
    font-weight: 500;
}

.num-span span:nth-child(1) {
    display: grid;
    justify-items: end;
    margin-right: 10px;
}

.kayak-container {
    position: relative;
    max-width: 150px;
    width: 100%;
}

.kayak {
    width: 100%;
    position: relative;
}

section.restaurent-menu {
    background: #b28abf;
    background-image: url(../images/bg.png);
    display: flex;
    flex-direction: column;
    padding: 5rem 5vw;
    align-items: center;
}

.mn-logo-area {
    width: 180px;
}

.mn-logo {
    background: #fff;
    display: block;
    width: 100%;
}

.mn-logo img {
    width: 100%;
}

.menu-main {
    text-transform: uppercase;
    font-size: 4.5rem;
    color: #fff;
    font-weight: 900;
    margin-top: 4rem;
}

.btn-prime {
    color: #B688C1;
    background: #fff;
    text-transform: uppercase;
    padding: 10px;
    margin-top: 20px;
    display: inline-block;
    transition: all .2s ease;
    font-weight: 500;
}

.menu-main-h {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}

.menu-sub-h {
    width: 100%;
    margin-top: 2rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.ms-header {
    color: #fff;
    font-size: 3.2rem;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    margin-right: 3rem;
}

.ms-line {
    flex-grow: 1;
    position: relative;
    background: #fff;
    width: auto;
    height: 3px;
    top: 40%;
}

.menu-item-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 4rem 0 0;
}

.time-container {
    background: #ce93dc;
    display: flex;
    padding: 20px;
    border: 3px solid #fff;
    color: #fff;
    align-items: flex-end;
    margin-right: 2rem;
    margin-bottom: 2rem;
}

.tc-ico {
    width: 80px;
}

.tc-img {
    margin-right: 20px;
}

.tc-desc {
    display: flex;
    flex-direction: column;
}

.tc-it-name {
    font-weight: 600;
    font-size: 18px;
}

.con-header {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 3px solid;
}

.conditions-c {
    width: 60%;
    padding: 20px 4rem;
    flex-direction: column;
    align-items: flex-start;
}

.op-container {
    position: relative;
    margin-left: 3rem;
    margin-top: 2rem;
}

.op-clue {
    margin-left: 3rem;
}

.op-header {
    font-weight: 600;
}

.inner-conditions {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.cond-option {
    position: relative;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 5px;
}

.mi-img {
    width: 200px;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 50%;
    margin: 20px 0;
    overflow: hidden;
    border: 10px solid #fff;
}

.menu-items-outer {
    position: relative;
    display: flex;
    width: 50%;
    margin-bottom: 4rem;
    align-items: flex-start;
}

.menu-items-outer:before {
    content: '';
    position: absolute;
    width: calc(100% - 125px - 3rem);
    height: 100%;
    border: 5px solid #fff;
    left: 125px;
}

.mi-info {
    margin: 1.5rem 0 2.5rem 1.5rem;
    color: #fff;
    position: relative;
    width: calc(100% - 200px);
    padding-right: 3rem;
}

.mi-name {
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
}

.mi-inner-info {
    margin-left: 3rem;
    padding-right: 20px;
}

.mi-serv-it {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.menu-items-outer:nth-child(2n) {
    padding-left: 4rem;
}

.menu-items-outer:nth-child(2n-1) {
    padding-right: 3rem;
}

.mi-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.laundry-menu {
    background: #ffffff;
    background-image: url(../images/lbg.png);
    display: flex;
    flex-direction: column;
    padding: 5rem 5vw;
    align-items: center;
}

.laundry-menu .menu-main {
    color: #b28abf;
}

.btn-prime.invert {
    color: #fff;
    background: #B688C1;
    text-transform: uppercase;
    padding: 10px;
    margin-top: 20px;
    display: inline-block;
    transition: all .2s ease;
    font-weight: 500;
}

.l-menu-outer {
    position: relative;
    width: 60%;
    background: #b28abf;
    padding: 3rem;
    border-radius: 1rem;
    color: #fff;
}

.l-menu-inner .mi-inner-info {
    margin-bottom: 10px;
}

h4.sub-itme-x {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 18px;
    text-decoration: underline;
}

.mis-price {
    margin-left: 10px;
}

p.mid-text {
    text-align: center;
    margin-bottom: 3rem;
    font-style: italic;
}