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

-----All Rights Reserved at Createrix Labs 2017
-----Auther: Omalka Menuwan 

Main stylesheet for ---- Website
	1. General Stylings
		1.1 Fonts include
		1.2 Reset stylings
		1.3 General styling for css
			1.3.1 Menu
			1.3.2 Footer
			1.3.3 Reservations
			1.3.4 Other
	
********************************	
********************************/
/* ~ 1. General Stylings ~ */
    /* ~~ 1.1 Fonts include ~~ */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Hairline.ttf');
	font-weight:100;
	font-style:normal;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Light.ttf');
	font-weight:300;
	font-style:normal;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Regular.ttf');
	font-weight:400;
	font-style:normal;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Bold.ttf');
	font-weight:700;
	font-style:normal;
}
@font-face {
	font-family: 'Lato';
    src: url('../fonts/lato/Lato-Black.ttf');
	font-weight:900;
	font-style:normal;
}
@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 stylings ~~ */
*{
	margin:0;
	padding:0;
}
body{
    font-family: 'Lato';
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
    letter-spacing: 1.5;
}
::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    background:#aaa;
} 
::-webkit-scrollbar-thumb {
    background-color: #cf0010;
    outline: 1px solid #000;
}
::-moz-selection { 
    background: #cf0010; 
    color:#f1f1f1;
}
::selection { 
    background: #cf0010; 
    color:#f1f1f1;
}
.mobile-show{
    display: none;
}
.tbl{
	display: table;
}
.tbl-cell{
	display: table-cell;
	vertical-align: middle;
}
div#wrapper{
	visibility: hidden;
}
nav#normal{
    display: block;
}
nav#responsive{
    display: none;
}
.no-pad{
    padding:0;
}
#home{
    position: relative;
    width:100vw;
    height: 100vh;
}
.full-screen {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.full-h{
    position: relative;
    height: 100%;
}
.full-w{
    width:100%;
}
.half-h{
    position: relative;
    height: 50%;
}
.strip{
    position: absolute;
    height:100%;
    top:0;
    background: #cf0010;
}
.col-md-x{
    width:20%;
    float:left;
}
h1{
    color: #fff;
    background: #cf0010;
    position: absolute;
    padding: 5px 20px;
    z-index: 5;
    top: 0;
    text-transform: uppercase;
    font-size: 1.8em;
    font-weight: 300;
    letter-spacing: 2px;
}
.bg-red{
    background: #cf0010;
    color:#fff;
}
/*<<<<<<<< 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:#fff;
    border:9px solid #cf0010;
    padding: 15px 30px;
}
div#popup div#msg_area h1{
    color: #cf0010;
    font-size: 50px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    background: transparent;
}
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:#cf0010;
    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 #cf0010;
    color:#cf0010;
    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 #cf0010;

}
div#popup div#message{
    height:50px;
    position:relative;
    width:100%;
    text-align:center;
}
div#popup  .variations{
    display: block;
    position: absolute;
    right: 0;
    z-index: 50;
}
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:#cf0010;
}
div#popup  .close:hover::before,div#popup  .close:hover::after {
    background: #cf0010;
}
div#popup  .close::before, .close::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #cf0010;
}
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: 2px;
}
div#popup div#msg_area div.res_pop div.sec select{
    background:none;
    width:100%;
    position:relative;
    border:0px;
    border-bottom:2px solid #cf0010;
    color:#cf0010;
    font-size: 50px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    background: transparent;;
    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: #cf0010;
    color:#fff;
} 
.ui-widget.ui-widget-content{
    border:2px solid #cf0010 !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: #cf0010;
    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:#cf0010 !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:#cf0010 !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;
}
/*NAvigation*/
nav#normal{
    width:100vw;
    background: #cf0010;
    height:100px;
    position: fixed;
    top:0;
    left:0;
    z-index: 25;
    transition: .3s ease;
}
nav#normal.scroll{
    height:70px;
   
}
#logo-sec{
    height:150%;
    float: left;
    position: relative;
    transition: .3s ease;
}
nav#normal.scroll #logo-sec{
    height:100%;
}
.weather{
    transition:all .2s ease;
}
/**/
nav#normal.scroll .weather{
    height:0;
}
/*Navigation  Styles*/

/* Common styles for all menus */
.menu {
    line-height: 1;
    float: right;
}

.menu__list {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu__item {
    display: block;
    margin: 1em 0;
}

.menu__link {
    font-size: 1.05em;
    font-weight: bold;
    display: block;
    padding: 1em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.menu__link:hover,
.menu__link:focus {
    outline: none;
}
.menu--titania .menu__item {
    margin: 0;
}

.menu--titania .menu__link {
    width: 120px;
    height: 3em;
    text-align: center;
    color: #b5b5b5;
    -webkit-transition: color 0.3s 0.2s;
    transition: color 0.3s 0.2s;
}

.menu--titania .menu__link:hover,
.menu--titania .menu__link:focus {
    color: #f1f1f1;
}

.menu--titania .menu__item--current .menu__link {
    color: #f1f1f1;
    -webkit-transition: color 0.7s 0.2s;
    transition: color 0.7s 0.2s;
}

.menu--titania .menu__lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 100%;
    pointer-events: none;
    border: 2px solid #f1f1f1;
    border-width: 2px 0;
    -webkit-transition: -webkit-transform 0.5s 0.2s;
    transition: transform 0.5s 0.2s;
    -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
    -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
    transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
}

/* vertical lines */
.menu--titania .menu__lines::before,
.menu--titania .menu__lines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #f1f1f1;
    border-width: 0 2px;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

/* animates out at transition start */
.menu--titania .menu__lines::before {
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
}

/* animates back in at transition end */
.menu--titania .menu__lines::after {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition: -webkit-transform 0.2s ease 0.7s;
    transition: transform 0.2s ease 0.7s;
}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::before,
.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {
    -webkit-transition: -webkit-transform 0s;
    transition: transform 0s;
}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
}

.menu--titania .menu__item:nth-child(1).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.menu--titania .menu__item:nth-child(2).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.menu--titania .menu__item:nth-child(3).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
}

.menu--titania .menu__item:nth-child(4).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(300%, 0, 0);
    transform: translate3d(300%, 0, 0);
}

.menu--titania .menu__item:nth-child(5).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(400%, 0, 0);
    transform: translate3d(400%, 0, 0);
}

@media screen and (max-width:55em) {
    .menu--titania .menu__lines {
        height: 20%;
        border-width: 0 2px;
    }

    /* horizontal lines */
    .menu--titania .menu__lines::before,
    .menu--titania .menu__lines::after {
        border-width: 2px 0;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
    }

    .menu--titania .menu__lines::before {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
    }

    .menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
    }

    .menu--titania .menu__item:nth-child(1).menu__item--current ~ .menu__lines {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .menu--titania .menu__item:nth-child(2).menu__item--current ~ .menu__lines {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    .menu--titania .menu__item:nth-child(3).menu__item--current ~ .menu__lines {
        -webkit-transform: translate3d(0, 200%, 0);
        transform: translate3d(0, 200%, 0);
    }

    .menu--titania .menu__item:nth-child(4).menu__item--current ~ .menu__lines {
        -webkit-transform: translate3d(0, 300%, 0);
        transform: translate3d(0, 300%, 0);
    }

    .menu--titania .menu__item:nth-child(5).menu__item--current ~ .menu__lines {
        -webkit-transform: translate3d(0, 400%, 0);
        transform: translate3d(0, 400%, 0);
    }
}

#social-weather{
    width: 10%;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
}
#social-weather .half-h{
    overflow: hidden;
}
.social-tab{
    position: relative;
    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;
    line-height: 50px;
    padding:0 20px;
    margin:0;
    transition: all .2s ease;
}
nav#normal.scroll .social-tab{
    height:100%;
    line-height: 70px;
}
.social-tab a{
    color: #cf0010;
    
}
nav#normal #weather {
    text-transform: uppercase;
    display: block;
    float: left;
    padding:0 20px;
}

nav#normal #weather i {
    color: #cf0010;
    font-family: weather;
    font-size:40px;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    margin-top: -15px;
    display: inline-block;
    margin-bottom:-10px;
}
.value, .city{
    display:inline-block;
}
.city{
    font-size: 10px;
}
nav#normal #weather p {
    color: #cf0010;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    margin:0;
}
#nav-sec{
    width: 75%;
    right: 12%;
    position: absolute;
    transition: all .2s ease;
}
nav#normal.scroll #nav-sec{
    width:65%;
}
/*#nav-sec ul{
    width:100%;
    position: relative;
    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;
    margin:0;
    list-style: none;
    transition: .2s ease;
}*/
#nav-sec ul li a{
    color:#f1f1f1;
    text-transform: uppercase;
}
#nav-sec ul li a:active, #nav-sec ul li a:focus, #nav-sec ul li a:hover{
    text-decoration: none;
}
/*Navigation Mobile*/
nav#responsive{
    width:100%;
    height:100px;
    background: #cf0010;
    position:fixed;
    z-index:25;
    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:#cf0010;
    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;
    padding:0 35px;
}
nav#responsive div#inner_menu .menu_logo{
    width:35%;
    position: absolute;
    display: block;
    bottom: 10px;
    right:10px;
}
.menu-footer{
    position: absolute;
    left: 35px;
    bottom: 10px;
}
.menu-footer a{
    color:#fff;
    margin: 0 5px;
    font-size: 20px;
}
nav#responsive div#inner_menu ul{
    text-align: left;
    line-height: 1.6;
    color: #fff;
    list-style: none;
    border-bottom: 1px solid #fff;
    padding: 30px 0;
}
nav#responsive div#inner_menu ul li a{
    color: #fff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 700;
}
/*About Section*/
section{
    overflow: hidden;
}
#about{
    position: relative;
    padding:130px 0 80px;
    z-index: 1
}
#logo{
    height:100%;
    position: relative;
    top:10px;
    left:10px;
    transition: .3s ease;
}
nav#normal.scroll #logo{
    top:0;
    left:10px;
}
.inner-wrap{
    width:90vw;
    position: relative;
    margin: 0 auto;
    height: 350px;
    z-index: 4
}
#about h1{
    left: 10px;
}
#abt-image{
    background-image: url(../images/abt.jpg);
    width:90%;
    position: relative;
    margin: auto;
}
#about .strip{
    left:6vw;
    z-index: 2;
    width:60px;
}
#abt-inner{
    width:90%;
    margin: auto;
}
#abt-inner p{
    text-align: justify;
    font-size:  1.1em;
    color: #666;
}
.abt-faci{
    width: 100%;
    position: relative;
    height: 100px;
    margin: 20px auto;
    display:  flex;
    background: #f1f1f1;
}
.faci{
    width: 25%;
    height: 100%;
    position: relative;
    float:left;
    
}
.faci h2{
    text-align: center;
    font-size: 10px;
    color: #cf0010;
    text-transform: uppercase;
    font-weight: 800;
}
/*Contact Section*/
#contact{
    position: relative;
    width:100%;
    height: calc(100vh - 100px);
}
.attraction{
    height:10%;
    position: relative;
    width:100%;
}
.attr-img {
    width: 30%;
    position:  relative;
    float: left;
    height:  100%;
}

.content-attr {
    height: 100%;
    width: 50%;
    float:  left;
    line-height:  1;
    text-align:  center;
    padding: 8% 2%;
    background: #cf0010;
    color: #fff;
}

.attr-distance {
    width: 20%;
    float: left;
    height:  100%;
    position:  relative;
}

.attr-img img {
    max-height: 100%;
    max-width: 100%;
}

.content-attr p {
    margin:  0;
}
#map{
    width: 100%;
    height: 100%;
    position: absolute !important;
    top: 0;
    left: 0;
}
#contact h1{
    top:30px;
    right:-20px;
}
.center-details{
    padding:20px;
    color: #444;
    text-align: center;
}

#contact h4{
    font-size: 16px;
    color: #444;
    letter-spacing: 1.8px;
    margin: 60px 0;
    line-height: 1.4;
    font-weight: 400;
}
.inner-form{
    padding: 30px 10vw;
    width:100%;
}
section#map-sec {
    position:  relative;
    height: 90vh;
}
.inner-form h3{
    text-transform: uppercase;
    font-weight: 400;
    font-size:20px;
    letter-spacing: 2px;
}
.inner-form input{
    display: inline-block;
    width:100%;
    background: transparent;
    border: 0px;
    border-bottom:2px solid #fff;
    height: 35px;
    margin: 30px 0;
    color:#f1f1f1;
    font-weight: 400;
    text-transform: inherit;
    z-index: 10;
}
.inner-form .classic{
    position:relative;
}
.classic:before{
    position:absolute;
    content:'';
    height:2px;
    background:#E91E63;
    width:0%;
    left: 50%;
    bottom: 30px;
    z-index:10;
    transition:all .5s cubic-bezier(0.25, 0.1, 0.26, 0.7);
    transform-origin:bottom right;
}
.classic:hover:before{
    width:50%;
}
.classic:after{
    position:absolute;
    content:'';
    height:2px;
    background:#E91E63;
    width:0%;
    right: 50%;
    bottom: 30px;
    z-index:10;
    transition:all .5s cubic-bezier(0.25, 0.1, 0.26, 0.7);
    transform-origin:bottom right;
}
.classic:hover:after{
    width:50%;
}
.inner-form input::placeholder{
    color:#ddd;
}
.inner-form input[type="submit"]{
    padding: 5px;
    background: #fff;
    color: #cf0010;
    text-transform: uppercase;
    margin: 20px 0;
    border: 0px;
    font-weight: 700;
    width: 100px;
}

/*Gallery*/
#gallery{
    padding:100px 0 50px;
    width: 90%;
    position: relative;
    display: block;
    margin: auto;
}
#gallery h1{
    font-size: 3em;
    position: relative;
    margin-bottom: 20px;
    padding-right: 50px;
    display: inline-block;
}
#gallery ul li{
    list-style: none;
    margin-bottom: 20px;
}
#gallery .strip{
    right:5vw;
    width:100px;
}
/*rooms section*/
.rooms{
    width:100%;
    position: relative;
    height: calc(100vh - 100px);
}
#room-cat{
    position: relative;
    height: 100px;
    text-align: center;
    color:#cf0010;
}
.main-img{
    position: absolute;
    width:100%;
    height: 100%;
    top:0;
    left: 0;
    background-position: center;
    background-size: cover;
}
.room1{
    background-image: url(../images/rooms/1/1.jpg);
}
.room2{
    background-image: url(../images/rooms/2/1.jpg);
}
.room3{
    background-image: url(../images/rooms/3/1.jpg);
}
.room4{
    background-image: url(../images/rooms/4/1.jpg);
}
.room5{
    background-image: url(../images/rooms/5/1.jpg);
}
.thumb-r{
    background-position: center;
    background-size: cover;
}
/*Rooms 1 Thumbnails*/
#r1i1{
    background-image: url(../images/rooms/1/2.jpg);
}
#r1i2{
    background-image: url(../images/rooms/1/3.jpg);
}
#r1i3{
    background-image: url(../images/rooms/1/4.jpg);
}
#r1i4{
    background-image: url(../images/rooms/1/5.jpg);
}

/*Rooms 2 Thumbnails*/
#r2i1{
    background-image: url(../images/rooms/2/2.jpg);
}
#r2i2{
    background-image: url(../images/rooms/2/3.jpg);
}
#r2i3{
    background-image: url(../images/rooms/2/4.jpg);
}
#r2i4{
    background-image: url(../images/rooms/2/5.jpg);
}
/*Room 3 Thumbnails*/
#r3i1{
    background-image: url(../images/rooms/3/2.jpg);
}
#r3i2{
    background-image: url(../images/rooms/3/3.jpg);
}
#r3i3{
    background-image: url(../images/rooms/3/4.jpg);
}
#r3i4{
    background-image: url(../images/rooms/3/5.jpg);
}
/*Room 4 Thumbnails*/
#r4i1{
    background-image: url(../images/rooms/4/2.jpg);
}
#r4i2{
    background-image: url(../images/rooms/4/3.jpg);
}
#r4i3{
    background-image: url(../images/rooms/4/4.jpg);
}
#r4i4{
    background-image: url(../images/rooms/4/5.jpg);
}
/*Room 5 Thumbnails*/
#r5i1{
    background-image: url(../images/rooms/5/2.jpg);
}
#r5i2{
    background-image: url(../images/rooms/5/3.jpg);
}
#r5i3{
    background-image: url(../images/rooms/5/4.jpg);
}
#r5i4{
    background-image: url(../images/rooms/5/5.jpg);
}
.rooms h1{
    bottom:30px;
    right:-30px;
    top:auto;
    padding:10px 50px;
}
.rooms .strip{
    z-index: 4;
    right:0;
    width:80px;
}
.icon-set{
    width:100%;
    position: relative;
    /* display:  flex; */
    /* flex-direction:  column; */
}
.icon-i {
    width:33%;
    padding:10px 5px;
    float: left;
    text-align: center;
    color: #cf0010;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    min-height: 92px;
}
.icon-i h5{
    font-size: 10px;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;;
}
.booknow{
    border: 0px;
    background: #cf0010;
    color: #fff;
    text-transform: uppercase;
    width: 100px;
    position: absolute;
    bottom: 30px;
    left: calc(50% - 50px);
    padding: 5px;
}
.hide-bullets {
    list-style:none;
    position: relative;
    display: block;
    padding: 0 20px;
    height: 100%;
}
.content-sec{
    padding: 0 30px;
    text-align: justify;
    color: #666;
}
#slider{
    height:80%;
    position: relative;
}
.slider-thumbs{
    position: relative;
    height: 20%;
}
.thumbnail{
    padding:0;
    margin:0;
    border-radius: 0px;
}
#room-cat h3{
    margin: 0;
    text-transform: uppercase;
    font-size: 20px;
}
#room-cat .full-h{
    border : 2px solid #cf0010;
    transition: all .6s ease;
    cursor: pointer;
}
#room-cat .full-h.active{
    background: #cf0010;
    color:#fff;
}
#room-cat .full-h:hover{
    background: #cf0010;
    color:#fff;
}
.icon{
    width: auto;
    height: 30px;
    position: relative;
    display: block;
    margin: auto;
}
#mobile-room{
    padding: 20px 0;
}
#mobile-room .row{
    position: relative;
    margin:10px 0;
}
.img-main{
    width: 100%;
    height: 150px;
    position: relative;
    background-position: center;
    background-size: cover;
}
#mobile-room h3{
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    padding: 5px;
    background: #cf0010;
    display: inline-block;
    color: #fff;
    position: absolute;
    right:0px;
}
.faci-m{
    width:80%;
    position: relative;
    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;
    margin:15px auto;
}
.faci-m img{
    width: 20px;
    height: 20px;
}
#mobile-room .booknow{
    position: relative;
    font-size: 12px;
    bottom: auto;
}
#mobile-room .inner-cont{
    padding:10px;
}
#mobile-room p{
    font-size: 13px;
    text-align: justify;
}
.bsp-text-container{
    display: none !important;
}
/*Footer Content*/
footer{
    width: 100%;
    height:50px;
    background: #cf0010;
    color: #fff;
    position: relative;
}
#left{
    width:50%;
    height:100%;
    position: relative;
    padding:0 20px;
    line-height: 50px;
    float:left;
}
#right{
    width:50%;
    height: 100%;
    padding:0 20px;
    line-height: 50px;
    position: relative;
    float:left;
    text-align: right;
}
footer p{
    margin:0;
}
#offer-box{
    position: absolute;
    bottom: 5vh;
    left:-205px;
    width:200px;
    height: 200px;
    z-index: 20;
    transition: all .3s cubic-bezier(0.59, 0.1, 0.58, 0.81);
}
#offer-box.slide{
    left:0;
}
.pkg-btn{
    width: 15vw;
    padding: 20px;
    border-radius: 0px;
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
    border: 2px solid #fff;
    transition: all .3s cubic-bezier(0.59, 0.1, 0.58, 0.81);
}
.pkg-btn span{
    font-weight: 800;
}
.pkg-btn:hover, .pkg-btn:focus, .pkg-btn:active{
    outline: 0px;
    border-color: #fff;
    
}
#pkg-1{
    background: #F9690E;
}
#pkg-1:hover{
    background: #D35400;
}
#pkg-2{
    background: #F39C12;
}
#pkg-2:hover{
    background: #EB9532;
}
.pkg-pop .modal-content{
    overflow: hidden;
}
.pkg-pop .modal-header{
    background: #cf0010;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}
.pkg-pop .modal-title{
    font-size: 30px;
    text-align: left
}
.pkg-pop .close:after{
    display: none;
}
.pkg-pop .info{
    text-align: center;
    padding: 10px 30px 0;
    font-size: 15px;
}
.pkg-pop h3{
    text-align: center;
    text-transform: uppercase
}
.pkg-pop .offer-cover{
    position: relative;
    text-align: center;
    margin: 10px 0;
    overflow: auto;
    background: #F5D76E;
    padding: 15px;
}
.pkg-pop .offer-cover h4{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 30px;
}
.pkg-pop .offer-inner{
    padding: 10px;
    background: #cf0010;
}
.pkg-pop .offer-inner h5{
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
}
.pkg-pop .offer-single{
    padding: 20px 10px;
    background: #fff;
    color: #444;
    height: 280px;
    position: relative;
    display: block;
    overflow: auto;
}
.pkg-pop .offer-single h6{
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 300;
}
.pkg-pop .offer-single h6 span{
    text-transform: lowercase;
    font-size: 15px;
    font-weight: 400;
}
.pkg-pop .offer-single p{
    margin: 0;
    font-size: 25px;
}
.pkg-pop .offer-single p.single{
    font-size: 13px;
}
.pkg-pop .close{
    color:#fff;
}
.pkg-pop .close:hover, .close:focus{
    color: #f1f1f1;
    
}
.btn{
    line-height: 1.2;
}
.bb,.hb{
    width: 60px;
    height: 60px;
    margin: 5px auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bb{
    background-image:  url(../images/bb.png);
}
.hb{
    background-image: url(../images/hb.png);
}
.offer-local{
    width:50%;
    margin:10px auto;
    position: relative;
    background: #E87E04;
    text-align: center;
    color: #fff;
    padding:20px;
}
.offer-local h3{
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 300;
}
.offer-local h3 span{
    font-size: 28px;
}
#offer-showcase{
    width:100px;
    height:100px;
    background-image: url(../images/offer.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    position: absolute;
    left:100%;
    top:0;
    background-color: #FFEB3B;
    opacity: 1;
    cursor: pointer;
}
#offer-box.slide #offer-showcase{
    opacity: 0;
}
#offer-close{
    position: absolute;
    width: 50%;
    height: 25px;
    background: #fff;
    bottom: 100%;
    right: -5px;
    line-height: 25px;
    padding: 0 10px;
    text-transform: uppercase;
    cursor: pointer;
}
.attr-legend{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background: #F5D76E; */
    padding-top: 5%;
}
.attr-row {
    display:  flex;
    flex-direction: row;
    width: 100%;
    margin: 0% 0 2%;
    align-items: center;
    justify-content: space-evenly;
    /* background: red; */
}

.attaction {
    display:  flex;
    flex-direction:  column;
    /* padding: 1%; */
    justify-content:  center;
    align-items: center;
    background: #fff;
    /* border: 2px solid #cf0010; */
    font-size:  1.5em;
    font-weight: 600;
    color: #cf0010;
    cursor:  pointer;
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    width: 27%;
    height: 18vh;
    position:  relative;
}
.attaction img{
    max-height: 100%;
    /* transform: scale(1.5); */
    max-width: 100%;
}
#map-sec h3 {
    text-transform: uppercase;
    font-size: 2.3em;
    width: 100%;
    text-align:  center;
    color: #fff;
    background: #cf0010;
    margin:  0;
    padding: 1%;
    position:  absolute;
    top: 0;
    font-weight: 800;
}
.attr-legend h4 {
    color: #5d2018;
    text-transform: uppercase;
    margin-top: 15px;
    font-weight: 600;
}
span.distance {
    background: #fff;
    font-size:  .8em;
    position:  absolute;
    bottom: 0;
    width:  100%;
}
div#notification-pop {
    width: 15vw;
    height: 15vw;
    position: fixed;
    z-index: 50;
    background: red;
}

.attraction-tab {
    width: 100%;
    position:  absolute;
    top: 49px;
    left: 0;
    height:10vh;
}
.attraction-tab li{
    width:20%;
    border-radius:0px;
    background:#d91e18;
    text-align:center;
    text-transform:uppercase;
    position:relative;
    height:100%;

}
.attraction-tab li a{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:400;
}
.attraction-tab li a i{
    font-size:1.5em;
    margin-bottom:5px;
}
.attraction-tab li:hover a, .attraction-tab li.active a, .attraction-tab li:focus a, .attraction-tab li:active a, .attraction-tab li.active{
    color:#d91e18;
    border:  0px;
    background:  #eeeeee;
}

.tab-content {
    width: 100%;
    height: 100%;
    padding-top: 10vh;
    text-align: center;
    display:  flex;
    flex-direction:  column;
    align-items: center;
    justify-content:  center;
    background:#eeeeee;
}

.tab-pane {
    position:  relative;
    width: 100%;
}

.faci-head {
    background: #cf0010;
    color:  #fff;
    margin: 0;
    padding-left: 10px;
    display:  flex;
    flex-direction:row;
    align-items:center;
    width: 20%;
}
.faci-head h3{
    margin:0;
    font-size: 1.3em;
    font-weight: 300;
    text-transform: uppercase;
}
div#loader-contact.active .loader{
    opacity:1;
}
.loader {
    border: 5px solid #ddd; /* Light grey */
    border-top: 5px solid #cd313d; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    opacity:0;
    transform: all .3s ease .3s;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


div#loader-contact {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    background: rgba(250, 250, 250, 0.9);
    top: -100%;
    left: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
}
div#loader-contact.active {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    background: rgba(250, 250, 250, 0.9);
    top: 0;
    left: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    transform: all .3s ease;
}
.notification {
    text-align: center;
    position: absolute;
    width: 70%;
    padding: 10px;
    background: #cf0010;
    top: -100%;
    color: #fff;
    transform: all .3s ease .3s;
}
div#loader-contact.text .notification {
    top:0;
    
}