@import url(BeasValley.css);

.darkButton:after, .roomsButton:after {
    content: '';
    left: 100%;
    z-index: 1;
    bottom: 0;
    width: 0
}

:root {
    --font-primary: 'Gilda Display',serif;
    --font-secondary: 'Barlow Condensed',serif
}

.font-primary {
    font-family: var(--font-primary)
}

.font-secondary {
    font-family: var(--font-secondary)
}

.CrBdBk80 {
    background-color: hsla(0,0%,0%,.8) !important
}

.CrBdBk40 {
    background-color: hsla(0,0%,0%,.4) !important
}

.FooterBack{
    height: 600px
}

@media(max-width: 768px){

    .FooterBack {
        height: 900px
    }

}

.TtBxFlStDiv {
    background-color: hsl(34deg 100% 95.86%);
    border-radius: var(--Pl24);
    border-width: var(--Pl1);
    border-style: solid;
    border-color: var(--CrTeBr);
    transition: border-color .14s ease-in-out,box-shadow .17s ease-in-out
}

.TtBxFlSt {
    position: relative;
    padding-top: var(--Pl9);
    padding-left: var(--Pl5);
    padding-right: var(--Pl4);
    padding-bottom: var(--Pl4);
    display: flex;
    width: 100%;
    align-items: center
}

.TtBxFlStLl14, .TtBxFlStLl15, .TtBxFlStLl16, .TtBxFlStLl17 {
    position: absolute;
    z-index: 10;
    background-color: var(--CrTe);
    left: var(--Pl11);
    font-weight: 600;
    padding: var(--Pl2) var(--Pl7)
}

.TtBxFlStLl14, .TtBxFlStLl15 {
    font-size: var(--Pl12);
    top: calc(-9 * var(--Pl1));
    border-radius: var(--Pl3)
}

.TtAa15, .TtAaCr15_CrBr, .TtAaRd15, .TtAaRdCr15_CrBr {
    height: var(--Pl30)
}

.TtAa14, .TtAa15, .TtAa16, .TtAa17, .TtAaLe14, .TtAaLe15, .TtAaLe16, .TtAaLe17, .TtAaRd14, .TtBx14:focus, .TtBx15:focus, .TtBx16:focus, .TtBx17:focus, .TtBxLe14:focus, .TtBxLe15:focus, .TtBxLe16:focus, .TtBxLe17:focus, .TtBxRd14:focus, .TtBxRd15:focus, .TtBxRd16:focus, .TtBxRd17:focus, TtAaRd15, TtAaRd16, TtAaRd17 {
    outline: 0 !important;
    border-width: var(--Pl2) !important;
    box-shadow: 0 0 var(--Pl7) var(--CrTeHrSw) !important;
    border-color: var(--CrTe) !important
}

.TtAaCr14_CrBr, .TtAaCr15_CrBr, .TtAaCr16_CrBr, .TtAaCr17_CrBr, .TtAaRdCr14_CrBr:focus, .TtAaRdCr15_CrBr:focus, .TtAaRdCr16_CrBr:focus, .TtAaRdCr17_CrBr:focus, .TtBx14_CrBr:focus, .TtBx15_CrBr:focus, .TtBx16_CrBr:focus, .TtBx17_CrBr:focus, .TtBxRdCr14_CrBr:focus, .TtBxRdCr15_CrBr:focus, .TtBxRdCr16_CrBr:focus, .TtBxRdCr17_CrBr:focus {
    outline: 0 !important;
    border-width: var(--Pl2);
    box-shadow: 0 0 var(--Pl7) var(--CrTeHrSw)
}

.TtBxTt14::placeholder, .TtBxTt15::placeholder, .TtBxTt16::placeholder, .TtBxTt17::placeholder {
    color: var(--CrPrTbSh)
}

.FrLkCr a, .JsHrDv:hover * {
    color: #fff !important
}

.TtAaTt14, .TtAaTt15, .TtAaTt16, .TtAaTt17, .TtBxMe14, .TtBxMe15, .TtBxMe16, .TtBxMe17, .TtBxTt14, .TtBxTt15, .TtBxTt16, .TtBxTt17 {
    margin: 0;
    border: none;
    width: 100%;
    background-color: transparent
}

.TtAaTt15, .TtBxMe15, .TtBxTt15 {
    padding: var(--Pl4);
    font-size: var(--Pl15);
    font-weight: 400
}

    .TtAaTt14, .TtAaTt15, .TtAaTt16, .TtAaTt17, .TtBxMe14:focus, .TtBxMe15:focus, .TtBxMe16:focus, .TtBxMe17:focus, .TtBxTt14:focus, .TtBxTt15:focus, .TtBxTt16:focus, .TtBxTt17:focus {
        outline: 0
    }

.InRdBr {
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    padding: var(--Pl3)
}

.LineDiv {
    border-bottom: thick;
}

.darkButton, .roomsButton {
    font-weight: 400;
    text-transform: uppercase;
    background: 0 0;
    padding: 12px 20px;
    margin: 0;
    font-size: 15px;
    letter-spacing: 3px;
    border: 1px solid rgba(255,255,255,.5);
    font-family: 'Barlow Condensed',sans-serif;
    position: relative
}

.SFade {
    animation-name: fade;
    animation-duration: 1s
}

@keyframes fade {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

.SLeftIn {
    animation-name: SLeftIn;
    animation-duration: .6s
}

@keyframes SLeftIn {
    from {
        transform: translateX(-50%)
    }

    to {
        transform: translateX(0)
    }
}

.SRightIn {
    animation-name: SRightIn;
    animation-duration: .8s
}

@keyframes SRightIn {
    from {
        transform: translateX(50%)
    }

    to {
        transform: translateX(0)
    }
}

.SZoomOut {
    animation-name: ScaleOut;
    animation-duration: .6s
}

@keyframes ScaleOut {
    from {
        transform: scale(95%)
    }

    to {
        transform: scale(100%)
    }
}

.SZoomIn {
    animation-name: ScaleIn;
    animation-duration: .8s
}

@keyframes ScaleIn {
    from {
        transform: scale(120%)
    }

    to {
        transform: scale(100%)
    }
}

.SAngular {
    animation-name: SAngular;
    animation-duration: .9s
}

@keyframes SAngular {
    0% {
        transform: scale(150%) skew(-8deg,-8deg) perspective(0);
        opacity: .5;
        -webkit-filter: blur(1px);
        filter: hue-rotate(45deg)
    }

    100% {
        transform: skewX(0deg,0deg) scale(100%) perspective(none);
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: hue-rotate(0)
    }
}

@keyframes SlideOverlay {
    from {
        display: block;
        opacity: .5;
        z-index: 10000000000;
        -webkit-filter: blur(1px);
        transform: scale(150%) skew(10deg,10deg) perspective(0)
    }

    to {
        display: none;
        opacity: 0;
        z-index: -1;
        -webkit-filter: blur(0px);
        transform: scale(100%) skew(2deg,2deg) perspective(none)
    }
}

.SColor {
    animation-name: SColor;
    animation-duration: 2s
}

@keyframes SColor {
    0% {
        -webkit-filter: grayscale(100%);
        opacity: 50%
    }

    100% {
        -webkit-filter: grayscale(0%);
        opacity: 100%
    }
}

.SlideFullCloseBn, .SlideNextUT, .SlidePrevUT, .SlideShowUT {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none
}

    .SlideFullCloseBn:hover {
        transform: rotate(360deg) scale(1.05)
    }

.SlideContainer::-webkit-scrollbar {
    display: none
}

.SlideContainer {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.heroSection {
    animation: 1.5s ease-out heroSection
}

#experienceSection {
    opacity: 0
}

.experienceSection {
    opacity: 0;
    animation: 2s ease-out forwards heroSection
}

@keyframes heroSection {
    from {
        transform: translateY(50%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.roomsButton {
    color: #fff
}

    .roomsButton:after {
        height: 100%;
        position: absolute;
        -webkit-transition: .3s;
        transition: .3s;
        background: #fff
    }

    .darkButton span, .roomsButton span {
        position: relative;
        z-index: 2
    }

    .darkButton:hover:after, .roomsButton:hover:after {
        width: 100%;
        left: 0;
        -webkit-transition: width .3s;
        transition: width .3s
    }

    .roomsButton:hover span {
        color: #222
    }

.roomsAndSuitesCard {
    position: relative;
    overflow: hidden
}

.darkButton {
    color: #fff;
    cursor: pointer
}

    .darkButton:after {
        height: 100%;
        position: absolute;
        -webkit-transition: .3s;
        transition: .3s;
        background: #000
    }

    .darkButton:hover span {
        color: #fff !important
    }

.OurNews .cardContainer, .roomAndSuitesBottomContent {
    transform: translateY(20%);
    transition: transform .3s ease-in-out
}

.roomAndSuitesBottomContentIcons {
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.roomsAndSuitesCard:hover .roomAndSuitesBottomContent {
    transform: translateY(0)
}

.roomsAndSuitesCard:hover .roomAndSuitesBottomContentIcons {
    opacity: 1
}

.roomsAndSuitesCardImage {
    transition: transform .7s ease-in-out
}

.roomsAndSuitesCard:hover .roomsAndSuitesCardImage {
    transform: scale(1.05);
    filter: brightness(30%)
}

.roomsAndSuitesCardHr {
    transition: width .7s ease-in-out
}

.FrLkCr a:hover::after, .roomsAndSuitesCard:hover .roomsAndSuitesCardHr {
    width: 100%
}

.OurNews img, .restaurantSection img {
    transition: transform .3s ease-in-out;
}

    .OurNews img:hover, .restaurantSection img:hover {
        transform: scale(1.05);
        transform-origin: center;
    }

.restaurantSection .Fx1 {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity .8s ease-out,transform .8s ease-out
}

    .restaurantSection .Fx1.right {
        transform: translateX(100px);
        overflow:hidden;
    }

    .restaurantSection .Fx1.show {
        opacity: 1;
        transform: translateX(0)
    }

.OurNews .SlideImage:hover .cardContainer {
    transform: translateY(-50%)
}

@keyframes slideDownFadeIn {
    0% {
        transform: translateY(-100px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.slideDownFadeIn {
    animation: .5s ease-out slideDownFadeIn
}

#promotionalVideoButton {
    transition: transform .3s ease-in-out,color .3s ease-in-out
}

    #promotionalVideoButton:hover {
        transform: scale(1.2);
        color: red
    }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Gilda Display',serif
}

.JsHrDv {
    font-family: 'Barlow Condensed',sans-serif;
    background-color: #fff;
    color: #222;
    transition: .3s
}

.JsSeCr {
    color: #666;
}
.JsAeRwCr:nth-child(odd){
    background-color: #F8F5F0 !important;
}
.JsAeRwCr:nth-child(even){
    background-color:white !important;
}

.JsHrDv:hover {
    background-color: #8E1616 !important
}

.CrBrJsDv {
    border-color: #f1eeeb !important;
    margin-top: -1px
}

.FrLkCr a {
    position: relative
}

    .FrLkCr a:hover {
        color: #f8f5f0 !important
    }

    .FrLkCr a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #f8f5f0;
        transition: width .3s
    }

.JsAyBn {
    background-color: hsla(34deg,34%,50%,1);
    color: #fff;
    border: none;
    border-radius: 20px;
    transition: .5s
}

    .JsAyBn span {
        display: inline-block;
        position: relative;
        transition: .5s
    }

        .JsAyBn span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -50px;
            transition: .5s
        }

    .JsAyBn:hover span {
        padding-right: 25px
    }

        .JsAyBn:hover span:after {
            opacity: 1;
            right: 0
        }

.icc {
    transition: ease-in-out
}

.IccTn, .TeBr th {
    display: none
}

.icc:hover .IccTn {
    display: block
}

.InBd {
    font-size: 10px;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    padding: 3px;
    transition: .4s ease-in-out
}

.OyFx {
    position: fixed;
    z-index: 9999;
    top: 0;
    width: 100%;
    height: 100%
}

.NvSeBgCeBn, .NvSeBgOnBn {
    position: fixed;
    font-weight: 600;
    padding: var(--Pl10);
    font-size: var(--Pl20);
    width: auto;
    height: auto;
    background-color: var(--CrTe);
    cursor: pointer;
    z-index: 10;
    border-top-right-radius: var(--Pl3);
    border-bottom-right-radius: var(--Pl3)
}
    .NvSeBgCeBn{
        top: 55%;
        right: 17%;
    }

    .NvSeBgOnBn {
        left: 0;
        top: 35%
    }

.TeBr td {
    border: 1px solid #ddd;
    padding: 8px
}

.TeBr tr:nth-child(odd) {
    background-color: hsl(34deg 100% 95.86%)
}

.TeBr tr:hover {
    background-color: hsl(34deg 100% 80.86%)
}

.TeStrip {
    border-collapse: collapse;
    width: 100%;
    text-align: left
}

.BrBg {
    border-color: transparent;
    border-width: var(--Pl2);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--Pl24);
    padding: var(--Pl5) var(--Pl10)
}

.LineThemeFadeDiv {
    display: block;
    height: var(--Pl1);
    width: 94%;
    margin: var(--Pl3);
    background-image: linear-gradient(to right,rgba(255,0,0,0),var(--CrTe),rgba(255,0,0,0))
}

.NvSeBg {
    position: sticky;
    top: 90px;
    background-color: #fff;
    overflow-y: scroll;
    opacity: 1;
    height: 100vh;
    transition: width .35s ease-in-out;
    display: flex;
}

#NvSeBgMob {
    position: sticky;
    background-color: #fff;
    overflow-y: scroll;
    height: 100vh;
    width: 80%;
}

ul.breadcrumb {
    padding: 0 16px;
    list-style: none
}

    ul.breadcrumb li {
        display: inline;
        font-size: 18px
    }

.LineDiv {
    width: 100px;
    height: 3px;
    margin: 16px auto 8px;
    border-bottom: 2px solid var(--CrTe);
    display: block
}

.PnCrTpLtInOt {
    top: 0;
    left: 6%;
    margin: 0;
    position: absolute;
    transform: translate(-50%,-50%);
    background-color: hsl(34deg 34% 50% / 64%)
}

@media only screen and (max-width:768px) {
    .NvSeBg {
        display: none
    }
}

@media only screen and (min-width:768px) {
    .NvSeBgOnBn {
        display: none !important;
    }

    #closebtn0987 {
        display: none !important
    }
}

#popup, .loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    width: 100%
}

.TtOrFwVeLe1, .TtOrFwVeLe2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.loader {
    background-color: var(--CrBdTt30);
    overflow: hidden;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 9999999999
}

.loader__element {
    border-radius: 100%;
    border: 5px solid var(--CrTe);
    margin: calc(5px*2)
}

    .loader__element:first-child {
        animation: .6s ease-in-out infinite alternate preloader
    }

    .loader__element:nth-child(2) {
        animation: .6s ease-in-out .2s infinite alternate preloader
    }

    .loader__element:nth-child(3) {
        animation: .6s ease-in-out .4s infinite alternate preloader
    }

.TtOrFwVeLe1 {
    -webkit-line-clamp: 1
}

.TtOrFwVeLe2 {
    -webkit-line-clamp: 2
}