/*---------------------------------------
   1.1 IMPORT GOOGLE WEBFONT               
-----------------------------------------*/

@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: #f065ff;
}

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

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: #7e4a9d;
}

.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: #ffffff;
}

#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 #f065ff;
}

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

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

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

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

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

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

ul.footer-social li a {
    
}


/*---------------------------------------
   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: #ffffff;
}

.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: #b41624;
}

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

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


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

/*header {
   /* background: url(../img/header-bg.png) 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;
}*/
header {
    position: relative;
    height: 130vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

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

.header-top {
    height: 70px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 98;
    transition: all ease 0.5s;
    background: #7e4a9d;
}

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

.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: 17px;
}

.navbar-default .navbar-nav > li > a {
    line-height: 26px;
    padding: 5px 20px !important;
    text-align: center;
    transition: all ease 0.5s;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover {
    background: #ffffff 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: #f065ff !important;
    background: #ffff !important;
}


/* --------------------------------------
   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: 100px;
    font-size: 18px;
    /* PIXEL FALLBACK */
    font-size: 1.8rem;
    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;
    color: #ffffff !important;
    background: #420d79;
}

.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: #f065ff none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    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 {
    
    background: #7e4a9d;
    padding: 10px 0 4px;
}

footer p {
    margin: 10px 0 0;
}

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

footer a {
    color: #ffffff;
}

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

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

ul.footer-social li a {
    display: inline-block;
    line-height: 25px;
    text-align: center;
    text-decoration: none;
    width: 31px;
    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: 10px 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: #ffdb84;
        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: #1a1a1b;
    }
    .navbar-header {
        position: absolute;
        right: 0;
        top: -80px;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff;
    }
    .navbar-nav {
        margin: 0;
        float: none;
     background: #7e4a9d;
    }
    .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;
    }
	.header-top {
    height: 104px;
	}
}


/* --------------------------------------
=========================================
           /END STYLE.CSS
=========================================
-----------------------------------------*/

.map iframe {
    border: 0;
    width: 100% !important;
    height: 350px;
}
.gallery
{
    display: inline-block;
    margin-top: 20px;
}
.navbar-default .navbar-nav>li>a{
    color:#fff;
}
.navbar-default .navbar-nav > .active > a{
    color:#50146b !important;
}
..navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > .active > a:focus,.navbar-default .navbar-nav > .active > a{
    color:#f065ff !important;
}