@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300);

/*font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif;*/


/*---------------------------------------
   1.2 GENERAL - CSS               
-----------------------------------------*/

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    /* PIXEL FALLBACK */
    font-size: 1.6rem;
    line-height: 1.5;
    overflow-x: hidden;
}

section {
    padding: 100px 0;
    text-align: center;
}

button,
.btn {
    text-transform: uppercase;
    line-height: 50px;
    padding: 0 20px;
    border: none;
    font-weight: 300;
    font-size: 18px;
    /* PIXEL FALLBACK */
    font-size: 1.8rem;
    border-radius: 0;
}

iframe {
    border: none;
}

input,
textarea {
    color: #333;
    font-size: 16px;
    /* PIXEL FALLBACK */
    font-size: 1.6rem;
    height: 50px;
    font-weight: 100;
    background: #fff;
    border: 1px solid #333;
    padding: 0 15px;
}

.special-padding {
    padding: 0 15%;
}

.center-line {
    display: inline-block;
    height: 2px;
    margin: 35px 0;
    width: 150px;
}

.center-line span {
    display: inline-block;
    height: 5px;
    width: 65px;
    vertical-align: top;
}

a,
a:hover,
a:focus,
input:focus,
textarea:focus,
button:focus {
    outline: none !important;
}


/*---------------------------------------
   1.3 TYPOGRAPHY               
-----------------------------------------*/

h1,
h2,
h4,
h5,
h6 {
    font-family: 'Roboto Slab', serif;
}

h1 {
    font-size: 60px;
    /* PIXEL FALLBACK */
    font-size: 6rem;
    font-weight: bold;
    text-transform: uppercase;
}

h2 {
    font-size: 48px;
    /* PIXEL FALLBACK */
    font-size: 4.8rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px;
}

h3 {
    font-size: 18px;
    /* PIXEL FALLBACK */
    font-size: 1.8rem;
    font-weight: bold;
}

h4 {
    font-size: 24px;
    /* PIXEL FALLBACK */
    font-size: 2.4rem;
    font-weight: bold;
    text-transform: uppercase;
}

p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    /* PIXEL FALLBACK */
    font-size: 1.8rem;
    font-weight: 300;
}

p small {
    font-size: 16px;
    /* PIXEL FALLBACK */
    font-size: 1.6rem;
}


/*---------------------------------------
   1.4 PRE-LOADER              
-----------------------------------------*/

#loading {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
    margin-top: 0px;
    top: 0px;
}

#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}

#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

#object {
    width: 30px;
    height: 30px;
    -webkit-animation: animate 1s infinite ease-in-out;
    animation: animate 1s infinite ease-in-out;
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
}


/*---------------------------------------
   1.5 PRE-LOADER ANIMATION               
-----------------------------------------*/

@-webkit-keyframes animate {
    0% {
        -webkit-transform: perspective(160px);
    }
    50% {
        -webkit-transform: perspective(160px) rotateY(-180deg);
    }
    100% {
        -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg);
    }
}

@keyframes animate {
    0% {
        transform: perspective(160px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
        -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    }
}


/* --------------------------------------
=========================================
   2. MASTER COLOR SETTINGS
=========================================
-----------------------------------------*/


/*---------------------------------------
   2.1 BACKGROUND COLOR SETTINGS               
-----------------------------------------*/

body,
.form-holder i {
    background: #fff;
}

button:hover,
.btn:hover {
    background: #321b15;
}

header,
.header-top,
footer,
.book-now-button {
    background: #321b15;
}

header:before,
.features-left:before,
.video:before {
    background-color: rgba(0, 0, 0, 0.3);
}

.contact-us:before {
    background-color: rgba(255, 255, 255, 0.8);
}

#loading,
.center-line,
.center-line span,
.logo > a,
.stats,
.featured,
.features-right,
.room,
.room-rate,
.facilities-box,
.contact-box,
.submit-btn,
.navbar-toggle,
button,
.btn,
#newsletter-error,
#signup-error {
    background: #f5ad1b;
}

.book-now-button:hover {
    background: #100a06;
}

#object,
.features-right .center-line,
.features-right .center-line span,
.facilities-box .center-line,
.facilities-box .center-line span,
ul.footer-social li a {
    background: #321b15;
}

#newsletter-success,
#signup-success {
    background: #3a8b27;
}


/*---------------------------------------
   2.2 BORDER COLOR SETTINGS               
-----------------------------------------*/

.logo > a:before {
    border-left: 188px solid #ffffff;
}

.room-rate:after {
    border-top: 40px solid #f5ad1b;
}

.header-top-scrolled .logo > a:before {
    border-left: 188px solid #f5ad1b;
}

.features-right:before {
    border-right: 65px solid #f5ad1b;
}

.facility-arrow,
.facility-arrow-left {
    border-top: 20px solid #f5ad1b;
}

.book-now-button:before {
    border-bottom: 40px solid #321b15;
}

.form-control {
    border: 1px solid #333;
}

.book-now-button:hover:before {
    border-bottom: 40px solid #100a06;
}

ul.footer-social li a {
    border: 1px solid #f5ad1b;
}


/*---------------------------------------
   2.3 TEXT COLOR SETTINGS               
-----------------------------------------*/

h2 {
    color: #222222;
}

h1,
h3,
h4,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:visited,
.navbar-default a,
.header-main p,
.video h2,
.video p,
.contact-icon i,
.contact-box p,
.submit-btn,
#newsletter-error,
#signup-error,
#newsletter-success,
#signup-success,
footer p,
ul.footer-social li {
    color: #fff;
}

button,
.btn,
.stats,
.stats h2,
.stats p,
.features-right h2,
.features-right p,
.room-rate,
.room h3,
.room p,
.facilities-box p,
.facilities-box h4,
ul.footer-social li a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
ul.footer-social li a:hover,
button:hover,
.btn:hover {
    color: #f8f5f3 !important;
}

.form-control,
.form-control::-webkit-input-placeholder,
.form-control:-moz-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder {
    color: #333;
}

.form-holder i {
    color: #f5ad1b;
}

#newsletter-success i,
#signup-success i {
    color: #3a8b27;
}

ul.footer-social li a {
    color: #f5ad1b;
}


/* --------------------------------------
=========================================
   3. HEADER SECTION
=========================================
-----------------------------------------*/

header {
    background: url(../img/slide.jpg) center fixed;
    background-size: cover;
    padding: 0;
    min-height: 700px;
    position: relative;
}

header:before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}


/* --------------------------------------
   3.1 HEADER TOP
-----------------------------------------*/

.header-top {
    height: 100px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99;
    transition: all ease 0.5s;
}

.logo > a {
    display: inline-block;
    padding: 30px 15px;
    position: relative;
    transition: all ease 0.5s;
}

.logo > a:before {
    content: "";
    border-bottom: 70px solid transparent;
    position: absolute;
    bottom: -70px;
    left: 0;
    height: 0;
    width: 0;
}

.navbar-collapse {
    padding: 0px;
}

.navbar {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    margin: 0;
}

.navbar-nav {
    float: right;
    margin-top: 25px;
}

.navbar-default .navbar-nav > li > a {
    line-height: 45px;
    font-size: 12px;
    font-weight: bold;
    padding: 0 12px !important;
    text-align: center;
    transition: all ease 0.5s;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover {
    background: transparent none repeat scroll 0 0 !important;
}

.header-top-scrolled .logo > a:before {
    border-bottom: 0px solid transparent;
    bottom: -0px;
    left: 0;
}

.header-top-scrolled .logo > a {
    height: 100px;
    line-height: 95px;
    padding: 0 30px;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    color: #fff;
}


/* --------------------------------------
   3.2 HEADER MAIN
-----------------------------------------*/

.header-main.clearfix {
    padding-top: 100px;
}

.header-main p {
    margin: 250px 0 0;
    font-weight: 100;
    font-size: 30px;
    /* PIXEL FALLBACK */
    font-size: 3rem;
}

.header-main h1 {
    margin: 10px 0 20px 0;
}


/* --------------------------------------
=========================================
   4. EXCELLENT SECTION 
=========================================
-----------------------------------------*/

.stats {
    margin-top: 40px;
    padding: 60px 0;
}

.stats h2 {
    font-size: 60px;
}


/* 

=========================================
   5. FEATURED SECTION 
=========================================
-----------------------------------------*/

.featured {
    padding: 0px;
    text-align: left;
    overflow: hidden;
}

.features-left {
    height: 514px;
    position: relative;
}

.features-left img {
    position: absolute;
    right: 0;
}

.features-left .award {
    position: absolute;
    right: 50%;
    top: 50%;
    margin: -121px -121px 0 0;
}

.features-right {
    padding: 100px 30px;
}

.features-right:before {
    content: "";
    border-bottom: 255px solid transparent;
    border-top: 255px solid transparent;
    top: 0;
    left: -65px;
    position: absolute;
    width: 0;
}


/* --------------------------------------
=========================================
   6. HOTEL ROOMS SECTION 
=========================================
-----------------------------------------*/

.room {
    margin-top: 40px;
    padding: 0 15px 60px;
    position: relative;
    text-align: left;
}

.room-image {
    margin: 0 -15px;
    position: relative;
}

.room-image > img {
    width: 100%;
}

.room-rate {
    line-height: 40px;
    text-align: center;
    left: 0;
    position: absolute;
    top: 0;
    width: max-content;
    padding: 0 20px;
    font-weight: bold;
}

.room-rate:after {
    content: "";
    border-right: 40px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    right: -40px;
}

.room h3 {
    text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
    font-weight: normal;
}

.book-now-button {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-weight: 300;
    font-size: 16px;
    width: 150px;
    line-height: 40px;
}

.book-now-button:before {
    content: "";
    border-left: 40px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    left: -40px;
}


/* --------------------------------------
=========================================
   7. VIDEO SECTION 
=========================================
-----------------------------------------*/

.video {
    background: url(../img/video.jpg) center;
    display: inline-block;
    width: 100%;
    position: relative;
}

.video:before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

.video-inner {
    display: inline-block;
    margin: 80px 0;
    position: relative;
    text-align: left;
    vertical-align: middle;
    width: 850px;
}

.video h2 {
    font-weight: normal;
    margin: 0 0 10px;
}

.video p {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: normal;
}

.video a {
    padding: 0 20px 0 0;
    margin-right: 15px;
    float: left;
}

.video a:before {
    position: absolute;
    content: " ";
    border-right: 5px solid #fff;
    top: 10px;
    left: 115px;
    height: 80px;
    display: block;
    z-index: 0;
}

.video i {
    background: #f5ad1b none repeat scroll 0 0;
    border-radius: 50%;
    color: #321b15;
    cursor: pointer;
    font-size: 40px;
    line-height: 100px;
    padding: 0 0 0 11px;
    text-align: center;
    vertical-align: middle;
    width: 100px;
}

.video a:hover i {
    background: #c01827;
}


/* --------------------------------------
=========================================
   8. FACILITIES SECTION 
=========================================
-----------------------------------------*/


/* --------------------------------------
    8.1 FACILITIES LEFT
-----------------------------------------*/

.facilities-box {
    margin-top: 40px;
    text-align: left;
    position: relative;
}

.facility-image img {
    width: 100%;
}

.facilities-box p {
    margin: 0;
}

.facilities-box h4 {
    margin: 0;
}

.facilities-box .center-line {
    margin: 25px 0;
}


/* --------------------------------------
    8.2 FACILITIES RIGHT
-----------------------------------------*/

.facilities-box.box-right {
    text-align: right;
}

.facilities-right {
    padding: 40px 15px;
}

.facility-arrow {
    border-left: 40px solid transparent;
    height: 0;
    right: 0;
    position: absolute;
    width: 0;
    z-index: 1;
    bottom: -20px;
}

.facility-arrow-left {
    border-right: 40px solid transparent;
    bottom: -20px;
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
    z-index: 1;
}


/* --------------------------------------
=========================================
   9. CONTACT US SECTION 
=========================================
-----------------------------------------*/

.contact-us {
    background: url(../img/contact-bg.jpg) no-repeat;
    background-size: cover;
    position: relative;
}

.contact-us:before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

.contact-box {
    height: 250px;
    margin: 50px 0 15px;
    padding: 50px 0 30px;
}

.contact-icon i {
    font-size: 31px;
}

.contact-box > h4 {
    margin: 20px 0 15px;
}

.form-group {
    margin-bottom: 0;
}

.form-control {
    background: none repeat scroll 0 0 transparent;
    border-radius: 0;
    box-shadow: none;
    height: 50px;
    line-height: 38px;
    margin-top: 25px;
    width: 100%;
}

.form-control:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    opacity: 1;
}

.form-control::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    opacity: 1;
}

#description {
    height: 126px;
}

.submit-btn {
    border: medium none;
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    font-weight: 100;
    margin: 23px 0 0;
    text-transform: uppercase;
    width: 100%;
}

#newsletter-error,
#signup-error {
    padding: 30px;
    margin-bottom: 20px;
    display: none;
}

#newsletter-success,
#signup-success {
    padding: 30px;
    margin-bottom: 20px;
    display: none;
}

#newsletter-error ul,
#signup-error ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.form-holder {
    display: inline-block;
    margin: 20px 0 0;
}

.form-holder i {
    font-size: 38px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    margin-bottom: 20px;
    line-height: 80px;
}

#newsletter-error label,
#signup-error label {
    margin: 0;
    padding: 0;
}


/* --------------------------------------
=========================================
   10. FOOTER
=========================================
-----------------------------------------*/

footer {
    padding: 50px 0;
}

footer p {
    margin: 10px 0 0;
}

.footerl-right {
    text-align: right;
}

footer a 
{
        color: #f5ad1b;
}

ul.footer-social {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

ul.footer-social li {
    display: inline-block;
    margin-left: 15px;
}

ul.footer-social li a {
    display: inline-block;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    width: 50px;
    transition: all ease .3s;
}

ul.footer-social li a:hover {
    background: none;
}


/* --------------------------------------
=========================================
   11. RESPONSIVE FIXES
=========================================
-----------------------------------------*/


/* --------------------------------------
        Max-Widht 991PX
-----------------------------------------*/

@media only screen and (max-width: 992px) {
    .navbar-default .navbar-nav > li > a {
        padding: 0 10px !important;
    }
    .special-padding {
        padding: 0;
    }
    .features-left {
        height: auto;
    }
    .features-left img {
        position: relative;
        width: 100%;
    }
    .features-left .award {
        max-width: 242px;
    }
    .features-right {
        padding: 0 15px;
    }
    .featured {
        padding: 100px 0;
    }
    .featured h2 {
        margin-top: 20px;
    }
    .video-inner {
        width: auto;
        text-align: center;
    }
    .video a {
        padding: 0;
        margin: 0;
        float: none;
    }
    .video a:before {
        border-right: 0px;
    }
    .video h2 {
        margin: 20px 0 10px;
    }
    .facilities-box {
        text-align: left !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .facility-image {
        overflow: hidden;
        text-align: center;
    }
    .facility-image img {
        width: 135%;
    }
}


/* --------------------------------------
        Max-Widht 767X
-----------------------------------------*/

@media only screen and (max-width: 767px) {
    .logo {
        max-width: 218px;
        width: 100%;
        z-index: 10;
    }
    .logo > a::before {
        display: none;
    }
    .logo > a {
        padding: 0 15px;
        height: 100px;
        line-height: 95px;
    }
    .btn.focus,
    .btn:focus,
    .btn:hover {
        color: #321b15;
        text-decoration: none;
    }
    .navbar-collapse {
        border-top: medium none !important;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    }
    .navbar-toggle {
        border: medium none !important;
        border-radius: 0;
        padding: 11px 10px;
    }
    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {
        background-color: #c01827;
    }
    .navbar-header {
        position: absolute;
        right: 0;
        top: -80px;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff;
    }
    .navbar-nav {
        margin: 0;
        float: none;
        background: #f5ad1b;
    }
    .features-left .award {
        max-width: 121px;
        margin: -60px -60px 0 0;
    }
    .facilities-box {
        text-align: center !important;
    }
    .contact-box {
        margin: 30px 0 0;
    }
    .col-sm-6.footerl-left {
        text-align: center;
    }
    .footerl-right {
        margin: 30px 0 0;
        text-align: center;
    }
    ul.footer-social li {
        margin: 0 8px;
    }
}



.pan_ylw
{
    color: #f5ad1c !important;
}

.image_responsive
{
    width: 100% !important;
}

a:focus, a:hover 
{
    color: #f5ad1b;
    text-decoration: underline;
}

a {
    color: #321b15;
    text-decoration: none;
}

.room-rate span
{
        font-size: 1.2rem;
    color: #321b15;
    font-weight: 600;
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    z-index: 999999;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
    color: #000000;
}

.modal-body {
    position: relative;
    padding: 15px;
    color: #000;
}

.modal-body h4
{
    color: #000;
    margin-bottom: 20px;
}

.modal-body p
{
    color: #000;
    margin-bottom: 30px;
}

.logo > a
{
    background: #ffffff;
}