/* ----------------- font-family: "Quattrocento", serif; --------------------- */ .hiddenTitle { width: 0; height: 0; overflow: hidden;} /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background-clip: content-box; border: 2px solid transparent; } ::-webkit-scrollbar-thumb { background-color: #000; } ::-webkit-scrollbar-thumb:hover { background-color: #000 } ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track { background-color: var(--titleColor); ; } /* */ .mobMenu { display: none;} /* -------------------------- Reset -------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } picture, video, canvas, svg { display: block; max-width: 100%; height: auto; vertical-align: top; } img, svg { max-width: 100%; height: auto; vertical-align: top; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul, li, p, h1, h2, h3, h4, h5, h6, img, figure, article, section, figure, img { padding: 0; margin: 0;} ul, li, ol { list-style-type: none; } a:link, a:visited { text-decoration: none; color: var(--color); display: inline-block;} :root { --gutter:120px 0; --gutter40:40px; --gutter60:60px 0; --gutter80:80px 0; --color:#1e1e1e; --titleColor:#416f31; --border:1px solid #eee; --primaryButton:#1d407d; --mainTitle:#00416b } .flex-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: normal; align-content: normal; } .img-full { width: 100%; height: auto;} .text-cap { text-transform: uppercase;} .text-center { text-align: center; } #page { font-family: "Quattrocento", serif; font-size: 14pt; letter-spacing: 1px; font-weight: 500; line-height: 24px; color: var(--color); text-align: justify; background: #fff; width: 100%; overflow: hidden;} p { padding: 10px 0; line-height: 28px;} address { font-style: normal;} /* -------------------------- Reset -------------------------- */ /* -------------------------- Common -------------------------- */ .container { max-width: 1400px; width: calc(100% - 0px); padding: 0; margin: 0 auto;} .two-column-wrapp { gap: 60px; } .two-column { width: calc(50% - 30px);} .align-center { align-items: center; } .img-radius, .border-radius { border-radius: 25px; overflow: hidden;} .full-link { position: absolute; left: 0; top: 0; z-index: 100; width: 100%; height: 100%;} .spacer-image { padding: var(--gutter60)} .middle-text { max-width: 1000px; margin: 0 auto;} .clear { float: none; clear: both;} /* -------------------------- Common -------------------------- */ .hme-explore-wrapp, .hme-dining-wrapp, .hme-expe-slider { padding: var(--gutter); } #sub-page { padding: var(--gutter60); padding-bottom: 80px;} .header-wrapp { position: fixed; top: 0; left: 0; z-index: 6000; width: 100%; } .header-align { padding: 15px 50px; position: relative; transition: all 0.5s ease; background-color: rgba(0,0,0,0); align-items: center;} .header-fix .header-align { padding: 12px 50px; background-color: rgba(0,0,0,0.7); display: none; } .header-fix .header-right { display: none;} .menu-header-fix .header-align { background-color: rgba(237,245,232,0) !important; } .hme-align {position: relative; z-index: 1200;} .home-banner-wrapp { position: absolute; top: 0; left: 0; width: 100%;} .hme-right-side { position: absolute; right: 50px; top:400px; z-index: 1200;} .hme-right-side a:link, .hme-right-side a:visited { display: block; padding: 10px 0;} .home-caption-wrapp { position: relative; z-index: 1000; height: 100vh; } .hme-banner-align { position: relative;} .hme-banner-mtn-image { } .hm-banner-forest { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; } .banner-caption {text-align: center; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%;} .hme-cap-border { display: block; background-color: #fff; height: 1px; margin: 50px auto 0 auto; width: 200px; } .welc-title { position: absolute; width: 100%; bottom: 80px; left: 0;} .welc-title h1 span { display: block; padding-bottom: 20px;} .welcome-content-block { padding-top: 60px;} .hme-accom-wrapp { position: relative; } .hme-accom-wrapp::before { content: ""; display: block; background-image: url(../images/hme-accommodation-bg.webp); background-position: top center; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; transform: translateY(-140px); } .hme-accm-hold {position: relative; padding-top: 700px;z-index: 100;} .hme-thrall-wrapp { padding-top: 140px; padding-bottom: 140px; position: relative; color: #fff } .hme-thrall-wrapp .hme-thrall-bg { background-image: url(../images/thrall-bg.webp); background-position: center center; height: 1100px;} .hme-thrall-wrapp .container { position: relative; height: 100%;} .hme-thrall-wrapp .align { } .thrall-img-1 { position: absolute; top: -140px; left: 0; } .thrall-img-2 { position: absolute; bottom: -150px; right: 0; } .thrall-top-cnt { position: absolute; top: 100px; right: 0; width: calc(50% - 0px); } .thrall-btm-cnt { position: absolute; bottom: 100px; left: 0; width: calc(50% - 0px); } .hme-meeting-events-wrapp {padding: var(--gutter60);} .hme-meeting-events-wrapp .align { position: relative; } .meeting-cnt { position: absolute; bottom: 0; width: calc(50% - 0px); background-color: #fff; padding: 45px 45px 0 0;} .hme-facilities-wrapp { background-image: url(../images/hme-pool-bg.webp); background-position: center 150px; background-repeat: no-repeat; } .hme-facil-blk article { padding-top: 25px; } .hme-facil-blk-wrapp { gap: 100px} .hme-facil-blk { width: calc(50% - 50px);} .hme-pool-wrapp { padding-top: 650px; padding-bottom: 110px;} .hme-testi-wrapp { background-image: url(../images/testimonials-bg.webp); background-position: center center; padding: var(--gutter); color: #fff;} .hme-test-holder { width: calc(55% - 0px); } .widget-title-testi {padding-bottom: 40px; } .hme-places-wrapp { padding: var(--gutter); padding-bottom: 60px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+0,f7f7f7+100&0+0,1+100 */ background: linear-gradient(to bottom, rgba(247,247,247,0) 0%,rgba(247,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .footer-warpp { background-image: url(../images/footer-bg.webp); background-position: center top; background-repeat: repeat-x; padding-top: 195px;} .footer-top span { display: block; text-transform: uppercase; font-size: 9.5pt; } .footer-top .container { position: relative; height: 85px; margin-bottom: 50px;} .footer-logo { position: absolute; left: 50%; top: 0; transform: translateX(-50%);} .footer-menu-wrapp { padding: 50px 0; border: 1px solid rgba(255,255,255,0.5); border-left: none; border-right: none; } .footer-menu-wrapp { position: relative;} .footer-address { position: absolute; left: 50%; transform: translateX(-50%); text-align: center;} .footer-address p strong { font-weight: 800; padding-bottom: 10px; text-transform: uppercase; font-size: 13pt; display: block; } .footer-contact { padding-top:19px; } footer { font-size: 12pt; font-weight: 600;} .footer-address p { padding: 0;} .footer-menu { gap: 50px;} .footer-menu li a:link, .footer-menu a:visited { display: block; padding: 4px 0;} .footer-address span { font-size: 14pt; } .cpywrapp { padding: 45px 0; } .btm-call, .btm-mail { font-size: 14pt; font-weight: 600; background-image: url(../images/icon/footer-call.webp); background-repeat: no-repeat; background-position: left center; padding-left: 55px;} .btm-mail { background-image: url(../images/icon/footer-mail.webp);} .welcome-banner { position: relative;} .welcome-banner .welcome-slider { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%;} .welcome-banner .owl-dots { position: absolute; bottom: 20px; width: 100%; left: 0;} .welcome-text { padding-top: 40px; position: relative; padding-left: 420px;} .welco-read-more { position: absolute; width: 420px; text-align: center; left: 0; top: 50%; transform: translateY(-50%);} .stay-content-wrapp {padding-top: 80px;} .stay-hme-left { width: calc(40% - 0px); padding-left: 20px;} .stay-hme-content { width: calc(60% - 0px);} .hme-welcome-wrapp { position: relative; z-index: 500;} .welc-rm-btn { position: absolute; width: calc(50% - 0px); background-color: #fff; top: 0; right: 0; padding: 40px 0; display: grid; justify-content: right;} .sub-banner-wrapp { position: relative;} .page-title-wrapp { position: absolute; width: 100%; left: 0; bottom: 0; z-index: 1200; padding-bottom: 150px;} .header-wrapp-sub { padding: 20px 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.67+25,0+84,0+100 */ background: linear-gradient(to bottom, rgba(0,0,0,0.67) 0%,rgba(0,0,0,0.67) 25%,rgba(0,0,0,0) 84%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ height: 200px; transition: all 0.5s ease; } .header-fix.header-wrapp-sub, .header-scroll-section { height: 99px; background: rgba(0,0,0,0.7); } .header-wrapp-sub .container, .header-scroll-section .container { width: calc(100% - 50px); max-width: 100%; } .header-home .header-align { flex-direction: row-reverse; } #overlay-menu-app .container { position: relative; z-index: 100; } .logo-sub { width: 205px; transition: all 0.5s ease;} .header-fix .logo-sub { width: 160px;} .overview-page-content, .page-content-bg { background-image: url(../images/over-view-top-bg.webp); background-repeat: no-repeat; background-position: left top;} .page-content-bg { background-image: url(../images/page-top-bg.webp); } .about-parallax { background-image: url(../images/about-image-bottom.webp); background-position: center center; background-size: auto; background-attachment: fixed; height: 600px; } .content-title { padding-bottom: 40px;} .about-top, .page-top-cnt { padding: var(--gutter40);} .our-story-wrapp .align {position: relative; justify-content: flex-end; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f2f2+0,f2f2f2+100&0+0,1+36,1+73,0+100 */ background: linear-gradient(to bottom, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 36%,rgba(242,242,242,1) 73%,rgba(242,242,242,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .img-breaker { padding: var(--gutter80); } .every-day-slide-blk { overflow: hidden; } .every-day-slide-blk .owl-stage { right: -240px; } .about-cnt-btm .align { position: relative; } .align-right { justify-content: flex-end; } .about-cnt-btm { padding: var(--gutter80); padding-top: 0; } .page-bottom-wrapp { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+0,f7f7f7+100&0+33,1+85 */ background: linear-gradient(to bottom, rgba(247,247,247,0) 0%,rgba(247,247,247,0) 33%,rgba(247,247,247,1) 85%,rgba(247,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ padding: var(--gutter80); padding-bottom: 0; position: relative; } .page-bottom-wrapp::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6f6f6+0,f6f6f6+100&1+0,0.97+12,0+100 */ background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(246,246,246,0.97) 12%,rgba(246,246,246,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .page-bottom-wrapp .container { position: relative; z-index: 120;} .btm-title { padding-bottom: 30px; } .accom-slider figure { position: relative;} .accom-slider figure a { display: block; position: relative;} .accom-slider figure a::after { content: ""; display: block; width: 100%; left: 0; top: 0; height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.45+84 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 84%,rgba(0,0,0,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ position: absolute; z-index: 100; } .room-land-title { padding: 25px 0; align-items: center; } .accom-slider figcaption { position: absolute; bottom: 0; z-index: 100; width: 100%; text-align: center; font-size: 20pt; color: #fff; z-index: 500; text-transform: uppercase; padding-bottom: 30px;} .accomm-single-wrapp .container { gap:60px } .room-lnd-blk { width: calc(50% - 30px);} .facil-block figure { width: calc(50% - 0px); } .facil-block article { width: calc(50% - 0px); padding-left: 60px; } .facil-block:nth-child(odd) { flex-direction: row-reverse; } .facil-block:nth-child(odd) article { padding-right: 60px; padding-left: 0; } .our-story-wrapp article, .our-story-image, .every-day-slide-blk, .about-cnt-btm article { width: calc(50% - 0px);} .story-text, .over-lay-content { width: calc(100% - 0px); position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .our-story-wrapp article { padding-right: 100px;} .over-lay-content article { padding-left: 100px;} .places-wrapp { gap: 30px; } .places-block { width: calc(33.33% - 30px);} .places-block figure { position: relative;} .places-block figcaption { position: absolute; bottom: 0; width: 100%; text-align: center; padding: 30px 0; color: #fff; z-index: 200; font-size: 16pt; text-transform: uppercase; } .places-block figure::after { content: ""; display: block; top: 0; left: 0; z-index: 100; position: absolute; width: 100%; height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,0+36,0.49+88 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0) 36%,rgba(0,0,0,0.49) 88%,rgba(0,0,0,0.49) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ padding: var(--gutter80); } .places-wrapp { padding: var(--gutter80); padding-top: 0; } .common-places { padding: var(--gutter80); } .common-place-listig { position: relative; z-index: 150;} .common-places-wrapp { background-image: url(../images/places-btm-bg.webp); background-size: contain; background-attachment: fixed; background-position: center center; padding: var(--gutter80); background-size: cover; position: relative; color: #fff; } .common-places-wrapp:after { content: ""; display: block; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background-color: rgba(0,0,0,0.5); z-index: 100;} .testi-block { padding: 60px;} .testi-block:nth-child(odd), .testi-block:nth-child(odd) h3 span { background-color: #f3f0f0;} .testi-block h3 { padding-top: 15px; position: relative; font-size: 18pt; font-weight: 600; text-align: right; } .testi-block h3::after { content: ""; display: block; width: 100%; height: 1px; background-color: #bfa2a2; top: 27px; position: absolute; left: 0;} .testi-block h3 span { position: relative; z-index: 100; background-color: #fff; padding-left: 15px; } .testi-block p { line-height: 26pt; } #sub-page.overview-page-content { padding-bottom: 0; } .qte-left, .qte-right { display: inline-block; padding-left: 70px; background-image: url(../images/icon/quote-left.webp); background-repeat: no-repeat; background-position: 25px top; } .qte-right { background-image: url(../images/icon/quote-right.webp); padding-left: 0; padding-right: 40px; background-position: right top; } .contact-wrapp { background-color: #f6f6f6; align-items: center; position: relative; } .contact-address { width: calc(40% - 0px); } .contact-address p { padding: 5px 0; } .contact-logo { padding-bottom: 15px; } .gmap-holder { width: calc(100% - 0px); padding-left: 500px; } .contact-address { position: absolute; width: calc(500px - 0px); padding-left: 80px; } .g-map { position: relative; height: 600px;} .g-map iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .room-nav ul { justify-content: center; } .room-nav li { padding: 5px 5px;} .room-nav a:link, .room-nav a:visited { display: block; text-transform: uppercase; display: block; padding: 12px 25px 10px 25px; border-radius: 10px; } .room-nav a.active:link, .room-nav a.active:visited { background-color: #443f3f; color: #fff; } .room-image-wrapp { padding: var(--gutter60);} .room-gallery ul { gap: 10px; justify-content: center; padding-top: 35px;} .room-gallery li { display: block; width: calc(33.33% - 10px);} .room-details { padding: 0 100px 80px 100px; text-align-last:center;} .room-fa-block { padding: 80px; background-color: #f2f1f1; } .facili-images { gap: 60px; padding-top: 60px;} .facili-images figure { width:calc(50% - 60px);} .pack-land-item figure, .pack-land-item article { width: calc(50% - 0px);} .pack-land-item article { padding-left: 50px; } .pack-land-item li { display: inline-block; padding: 3px 15px 3px 10px; font-size: 12pt; position: relative; text-align: left; } .pack-land-item li:before { content: ""; display: block; width: 7px; height: 7px; background-color: #ad9f9f; border-radius: 50%; position: absolute; top: 11px; left: 0;} .btn-group { justify-content: flex-start; gap: 20px; padding-top: 25px;} .pack-land-item:nth-child(odd), .pack-details-wrapp .container { flex-direction: row-reverse;} .pack-land-item:nth-child(odd) article { padding-left: 0px; padding-right: 50px; } .packa-main-area figure, .pack-details-wrapp figure { width: calc(45% - 0px); } .packa-main-area article, .pack-details-wrapp article { width: calc(55% - 0px); padding-right: 60px; } .packa-main-area, .pack-details-wrapp {padding: var(--gutter80);} .pack-details-wrapp article {padding-right: 0; padding-left: 60px;} .packMainIteneries { padding: var(--gutter80); padding-bottom:0; } .itenery-three-column{ justify-content: left; row-gap: 20px; column-gap: 60px;} .itenery-pack { width: calc(33.333% - 60px);} .pack-details-wrapp { background-color: #f7f5f5;} .packa-main-area { padding-top: 0;} .pack-bottom { padding: 50px 0;} .cpywrapp { position: relative;} /* ------------------------------------- */ h1, h2, h3, h4, h5 { letter-spacing: 2px; font-weight: 400;} .banner-caption, .welc-title h1, .widget-title-accom h2 { color: #fff; } .welc-title h1, .hme-facl-title, .widget-title-testi, .hme-dlient-name h4, .widget-title-places, .widget-title-accom h2, .stay-title, .hme-ding-title, .hme-facil-blk h3, .page-title, .widget-title { text-transform: uppercase; } .hme-facl-title h2 { color: #a3a3a3 } .widget-title-accom h2 { text-align: center;} .welcome-title h2, .widget-title-accom h2 { font-size: 48pt; line-height: 56pt;} .banner-caption { font-size: 16pt; line-height: 30pt;} .welc-title h1 { font-size: 31pt; line-height: normal; letter-spacing: 15px; } .welc-title h1 span { font-size: 12pt; letter-spacing: 6px; } .hme-facil-blk h3 { font-size: 16pt; padding-bottom: 15px; } .hme-facil-blk h3 { font-size: 24pt;} .hme-facl-title h2 { font-size: 36pt; line-height: normal; } .hme-facl-title { padding-bottom: 45px; } .hme-facl-title span { font-size: 24pt; display: block; } .hme-pool-cap h3 { font-size: 30pt; text-align: center; color: #fff; padding-bottom: 80px; line-height: 36pt; } .widget-title-testi h2 { font-size: 42pt; line-height: 46pt;} .widget-title-testi h2 span { display: block; font-size: 30pt; line-height: 34pt;} .hme-test-holder p { font-size: 18pt; line-height: 30pt;} .hme-dlient-name h4 { font-size: 20pt; padding-bottom: 10px; } .widget-title-places h2 { font-size: 42pt; line-height: 42pt;} .widget-title-places h2 span { font-size: 18pt; display: block; } .widget-title-places {padding-bottom: 60px;} .footer-title { font-size: 17pt; font-weight: 700; text-transform: uppercase; padding-bottom: 15px; } .stay-title { font-size: 80pt; line-height:80pt;} .stay-title span { display: block; font-size: 53pt; line-height: 53pt; padding-top: 15px; padding-left: 70px;} .stay-hme-content p { font-size: 25pt; line-height: 36pt;} .thrall-top-cnt p { font-size: 36pt; line-height: 44pt; text-align: left; } .thrall-btm-cnt p { font-size: 20pt; line-height: 32pt;} .meeting-cnt h4 { font-size: 24pt; text-transform: uppercase; padding-bottom: 10px; } .hme-ding-title { font-size: 42pt; line-height: 62pt; position: absolute; left: 80px; top: 80px; z-index: 100;} .welcome-text p { font-size: 16pt; line-height: 26pt;} .page-title h1 { font-size: 60pt; line-height: normal; color: #fff; text-align: center;} .content-title h2 { font-size: 36pt; line-height: 44pt; text-transform: uppercase; letter-spacing: 8px; } .btm-title h4 { font-size: 38pt; line-height: 42pt;} .content-title h2 span, .btm-title span { display: block; font-size: 18pt; text-transform: uppercase; line-height: 27pt; letter-spacing: 3px;} .about-top p { font-size: 20pt;line-height: 30pt;} .page-top-cnt p { padding: 10px 110px; } .widget-title-accom {padding-bottom: 20px;} .sub-title { font-size: 42pt; line-height: 52pt; padding-bottom: 20px;} .room-land-title h2 { font-size: 24pt; text-transform: uppercase; } .small-title { font-size: 22pt; padding-bottom: 15px; font-weight: 600;} .listing li { display: block; padding: 5px 0 5px 15px; margin: 2px 0; position: relative; } .listing li:before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: #0fab4c; position: absolute; top: 12px; left: 0;} .activities-block .listing, .activities-block figure, .activities-block article { width: calc(50% - 0px);} .activities-block .listing { padding-left: 50px;} .activities-block:nth-child(odd) { flex-direction: row-reverse;} .activi-gallery { padding: var(--gutter80); padding-bottom: 0;} .activities-bxslider img { width: 100%;} .activi-gallery ul { } .activi-gallery li { width: calc(25% - 0px);} .text-left { text-align: left;} .btm-title { text-transform: uppercase;} .room-title { font-size: 28pt; text-transform: uppercase; padding-bottom: 25px; } .room-fa-title { font-size: 24pt; padding-bottom: 30px; text-transform: uppercase; text-align: center; } .pack-land-item h4, .widget-title { font-size: 18pt; font-weight: 600; padding-bottom: 15px;} .widget-title { padding-bottom: 30px;} /* ------------------------------------- */ .read-more-btn { } .read-more-btn a:link, .read-more-btn a:visited { display: block; width: 220px; text-align: center; padding: 20px 0; border: 1px solid #d3d2d2; border-radius: 60px; text-transform: uppercase; font-size: 12pt; } .welco-read-more .read-more-btn a:link, .welco-read-more .read-more-btn a:visited, .page-bottom-wrapp .read-more-btn a:link, .page-bottom-wrapp .read-more-btn a:visited { margin: 0 auto; transition: all 0.5s ease;} .stay-hme-content .read-more-btn { padding-top: 25px;} .view-details-btn a:link, .view-details-btn a:visited { display: block; padding: 10px 25px 5px 25px; border-radius: 15px; background-color: #e3e3e2; font-size: 11.5pt; text-transform: uppercase;} .book-now-btn { padding-top: 35px;} .book-now-btn a:link, .book-now-btn a:visited { width: 200px; margin: 0 auto; background-color: #cd9d37; padding: 15px 40px 13px 15px; text-align: center; border-radius: 15px; color: #fff; text-transform: uppercase; position: relative; } .book-now-btn a::after { content: ""; display: block; position: absolute; top: 18px; right: 22px; background-image: url(../images/icon/btn-arrow.webp); width: 16px; height: 13px; } .facili-listing ul.listing li { margin: 10px 0;} .page-bottom-wrapp .read-more-btn { margin-top: 40px;} .btnBookNow, .btnReadNow { } .btnBookNow a:link, .btnReadNow a:link, .btnBookNow a:visited, .btnReadNow a:visited { display: block; font-size: 11pt; padding: 10px 20px; border-radius: 15px; text-transform: uppercase; background-color: #289a48; color: #fff; font-weight: 600; } .packCost { padding: 20px; border: 1px solid #d3d2d2; margin-top: 30px; } .btnReadNow a:link, .btnReadNow a:visited { background-color: #a77711 } .read-more-btn, .view-details-btn, .btnBookNow, .btnReadNow { transition: all 0.5s ease; transform: translateY(0); } .read-more-btn:hover, .view-details-btn:hover, .btnBookNow:hover, .btnReadNow:hover { transform: translateY(5px); } .view-details-btn a:link, .view-details-btn a:visited, .book-now-btn a:link, .book-now-btn a:visited, .btnBookNow a:link, .btnReadNow a:link, .btnBookNow a:visited, .btnReadNow a:visited { transition: all 0.5s ease; opacity: 1;} .read-more-btn a:hover, .view-details-btn a:hover { background-color: #f5f5f5; } .book-now-btn a:hover { opacity: 0.8;} .hme-testi-wrapp .read-more-btn a:link, .hme-testi-wrapp .read-more-btn a:visited { color: #fff;} .hme-testi-wrapp .read-more-btn a:hover { background-color: rgba(0,0,0,0.5);} /* -------------------------- slick slider reset ---------------------------- */ .slider-nav { text-align: center; width: calc(100% - 0px); margin: 0 auto; padding-bottom: 0; } .slider-nav a:link, .slider-nav a:visited { display: inline-block; padding:10px 0px; font-size: 16pt; text-transform: uppercase; color: #fff; margin: 8px 1px; font-weight: 500; position: relative; } .slider-nav a:after { content: "I"; padding: 0 20px; } .slider-nav a:last-child::after { content: "";} .slider-nav a.active:link, .slider-nav a.active:visited { } .slick-next, .slick-prev, .slick-next:hover, .slick-prev:hover { right: 0; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; z-index: 200; opacity: 1; visibility: visible; display: block;} .slick-prev, .slick-prev:hover { right: auto; left: 0;} .slick-prev:before, .slick-next:before { display: none; } .slide-image { position: relative; border-radius: 40px; overflow: hidden;} .slide-image a { display: block; position: relative;} .slide-image a::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0+33,0.21+99 */ background: linear-gradient(to bottom, rgba(231, 213, 213, 0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.21) 99%,rgba(0,0,0,0.21) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ z-index: 100; } .slide-image figcaption { position: absolute; bottom: 0; width: calc(100% - 0px); padding:0px 80px 50px 80px; z-index: 120; } .slide-room-name { color: #fff; font-size: 30pt; text-transform: uppercase; line-height: 30pt; } .booknow-top a:link, .booknow-top a:visited { text-transform: uppercase; font-size: 11.5pt; padding: 10px 25px; color: #fff; border-radius: 8px;} .top-res-btn a:link, .top-res-btn a:visited { display: block; padding: 10px 40px 10px 20px; position: relative; background-color: rgba(193,133,5,0.8); color: #fff; border-radius: 10px; text-transform: uppercase; font-size: 11.5pt;} .top-res-btn a:after { content: ""; display: block; background-image: url(../images/icon/btn-arrow.webp); background-repeat: no-repeat; width: 16px; height: 13px; position: absolute; right: 16px; top: 12px; } .top-res-btn { padding-left: 80px;} /* -------------------------- slick slider reset ---------------------------- */ /* ------------- primary menu ------------- */ .primary-menu { } .primary-menu li { display: inline-block; padding: 0;} .primary-menu { padding: 0; } .primary-menu nav div, .resorts-sing-menu nav div { } .primary-menu ul, .resorts-sing-menu ul { margin: 0px; padding: 0px; list-style-type: none; position: relative; } .primary-menu ul { } .primary-menu ul li { display: inline-block; } .primary-menu ul li a:link, .primary-menu ul li a:visited { letter-spacing: 1px; display: block; text-transform: uppercase; padding: 17px 15px; font-size: 12pt; font-weight: 400; color: #fff; } .primary-menu ul li a:hover, .primary-menu ul li a.active:link, .primary-menu ul li a.active:visited, .services-single-page .dpMenuWhat a:link, .services-single-page .dpMenuWhat a:visited { color: #fff; } .primary-menu ul li.dpMenu ul, .resorts-sing-menu ul li.dpMenu ul { position: absolute; min-width: auto; width: 540px; display:none; opacity: 0; box-shadow: 3px 3px 35px 0px rgba(0,0,0,0.45); background:#fff; border-radius: 4px; left: -35px; } .primary-menu ul li.dpMenu ul::before, .resorts-sing-menu ul li.dpMenu ul::before { content: ""; display: block; position: relative; z-index: 120; width: 0px; height: 0px; border-style: solid; border-width: 0 9px 16px 9px; border-color: transparent transparent #fff transparent; transform: rotate(0deg); transform: translate(30px, -15px); display: none} .primary-menu ul li.dpMenu-small ul, .resorts-sing-menu ul li.dpMenu-small ul, .primary-menu ul li.dpMenu-small ul li a, .resorts-sing-menu ul li.dpMenu-small ul li a { width: 190px; } .primary-menu ul li.dpMenu ul li, .resorts-sing-menu ul li.dpMenu ul li { display: block; color: #000; } .primary-menu ul li.dpMenu ul li:last-child a, .resorts-sing-menu ul li.dpMenu ul li:last-child a { /* border: none !important; */ } .primary-menu ul li.dpMenu:hover ul, .resorts-sing-menu ul li.dpMenu:hover ul { display: flex; animation: mymove 0.5s forwards; animation-delay: 0.2s; opacity: 0; transform: translateY(-2px);} @keyframes mymove { 0% { opacity: 0; transform: translateY(-15px); } 100% {opacity: 1; transform: translateY(-4px); } } .resorts-sing-menu ul li ul { padding: 30px 0 !important; } .primary-menu ul li .dpMenu:hover ul li, .resorts-sing-menu ul li .dpMenu:hover ul li { transition: all 0.5s ease; transform: translateY(100px); opacity: 1; padding: 60px; } .primary-menu ul li ul li ul { display: block !important; } .primary-menu ul li ul li a, .resorts-sing-menu ul li ul li a { width: calc(100% - 0px); text-transform: uppercase; padding:16px 20px !important; border-bottom: var(--border); border-color: rgba(134, 102, 57, 0.2);; text-align: left; } .primary-menu ul li ul li.subDpMenu ul { display: none !important; } .primary-menu ul li ul li.subDpMenu:hover ul { display: block !important; right: -196px; top: 40px;} .dpMenu ul li a:link, .dpMenu ul li a:visited { color:var(--color) !important; letter-spacing: 0.5px; font-size: 13px !important; } .dpMenu ul li a:link span, .dpMenu ul li a:visited span { color:var(--color) !important; text-transform: capitalize;} .resorts-sing-menu ul li ul.valle-dpM { margin-top: 20px !important;} .primary-menu ul li .dpMenu:hover ul li, .resorts-sing-menu ul li .dpMenu:hover ul li { display: none !important; opacity: 0 !important; background-color: red;} .primary-menu ul li.dpmenuHotel ul li { padding: 0 !important;} .primary-menu ul li.dpmenuHotel ul li a:link, .primary-menu ul li.dpmenuHotel ul li a:visited { padding: 2px 0 2px 40px !important; display: block; width: calc(100% - 0px); text-transform: uppercase; } .primary-menu ul li.dpmenuHotel .hote-res-hd { padding-left: 0 !important; } .primary-menu ul li.dpmenuHotel ul li { display: block;} .nav-hotel-menu { top: 47px; } .primary-menu ul li ul li a:link, .primary-menu ul li ul li a:visited { font-size: 11.5pt !important; } .primary-menu ul li.dpmenuHotel ul li a:hover, .hote-res-menu a:hover { color: #fff !important } .primary-menu ul li ul li a:link, .primary-menu ul li ul li a:visited, .primary-menu ul li.dpmenuHotel ul li a:link, .primary-menu ul li.dpmenuHotel ul li a:visited, .hote-res-menu a:link, .hote-res-menu a:visited { text-transform: uppercase; text-align: left } .primary-menu ul li.dpmenuHotel ul li a:link, .primary-menu ul li.dpmenuHotel ul li a:visited, .hote-res-menu a:link, .hote-res-menu a:visited { } .primary-menu ul li.dpMenu ul, .resorts-sing-menu ul li.dpMenu ul { padding: 12px 0 11px 0 !important } .primary-menu ul li ul li a:hover, .primary-menu ul li ul li a.active:link, .primary-menu ul li ul li a.active:visited { } .primary-menu ul li ul li:hover .menu-images-epoxy, .primary-menu ul li ul li:hover .menu-images-grouting, .primary-menu ul li ul li:hover .menu-images-fitting { opacity: 1; z-index: 100;} .primary-menu-full ul li a:link, .primary-menu-full ul li a:visited { font-size: 11.5pt; font-weight: 500;} .primary-menu ul li.dpMenu ul li { width: calc(50% - 0px);} /* ------------- primary menu ------------- */ /* -------------------------------------- Owl slider --------------------------- */ .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /* -------------------------------------- Owl slider --------------------------- */ /* ---------------- menu --------------------- */ .hamburger { width: 30px; } .hamburger .line { width: 30px; height: 2px; background-color: #013333; display: block; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hamburger:hover { cursor: pointer;} /* ONE */ #hamburger-1.is-active .line:nth-child(2) { opacity: 0;} #hamburger-1.is-active .line:nth-child(1) { -webkit-transform: translateY(6px) rotate(45deg); -ms-transform: translateY(6px) rotate(45deg); -o-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg);} #hamburger-1.is-active .line:nth-child(3) { -webkit-transform: translateY(-9px) rotate(-45deg); -ms-transform: translateY(-9px) rotate(-45deg); -o-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg); } /* ------------------------------ */ .menu-overlay { position: fixed; width: 100%; height: 100vh; z-index: 4500;transform: translateX(-100%); transition: all 0.2s ease; top: 0; left: 0; } .menu-overlay .align { position: relative; width: 100%; height: 100%; align-items: center; background-color: #f8f9f1; background-image: url(../images/menu-bg.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0; } .menu-overlay .align:after { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; } .menu-links { width: 350px; padding: 0px; } .menu-links-villas { width: 650px; padding-left: 100px; border-left: 1px solid rgba(255,255,255,0.2); } .menu-contact { width: 100%; text-align: center; padding-top: 50px; margin-top: 50px; border-top: 1px solid rgba(255,255,255,0.2)} .menu-links a:link, .menu-links a:visited { display: block; padding: 15px 0 15px 30px; position: relative; } .menu-links a:hover { color:var(--titleColor); } .menu-contact a:link, .menu-contact, .menu-contact a:visited, .menu-links a:link, .menu-links a:visited { color: #fff;} .menu-links li a::before { content: ""; display: block; background-color: #fff; position: absolute; width: 5px; height: 5px; border-radius: 50%; left: 12px; top: 23px; opacity: 0.5;} .menu-overlay.menu-open { transform: translateX(0); } .primary-menu-overlay { width: 1100px; margin:200px auto 0 auto } .menu-overlay.menu-open .align {animation: menuRevealAnim 0.5s ease forwards; animation-delay: 0.2s ; } @keyframes menuRevealAnim { 0% { opacity: 0; } 100% { opacity: 1; } } .menu-header-fix .primary-menu { visibility: hidden; opacity: 0;} .menu-header-fix .booknow-top a:link, .menu-header-fix .booknow-top a:visited { color: #fff; } .menu-heading { color: #fff; font-size: 22px; width: 100%; padding-bottom: 15px; text-transform: uppercase;} .header-fix #site-logo:link, #site-logo:visited { top: 0px; padding-top: 8px; } #site-logo-overlay { display: block; width: 180px; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1200; } .menu-header-fix #site-logo { display: none; } #hamburger-1.is-active .line:nth-child(3), #hamburger-1.is-active .line:nth-child(1) { background-color: #fff; } .fancybox__container { z-index: 1000001; } /* ------------------ menu rolls ------- */ #site-logo-scrl img { width: 150px; height: auto; position: relative; z-index: 100;} #site-logo-scrl {position: absolute; left: 50px; top: 10px; padding:0 20px 20px 20px;} .header-wrapp-sub { justify-content: right;} #site-logo-scrl:after { position: absolute; content: ""; display: block; width: 100%; left: 0; bottom: 0; background-color: rgba(237,245,232,0.8); height: 79px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; transition: all .5s ease; box-shadow: 0px 3px 4px 0px rgba(0,0,0,0);} .header-wrapp { box-shadow: 0px 3px 4px 0px rgba(0,0,0,0); } .header-fix.header-wrapp { box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.2);} .header-fix #site-logo-scrl:after { bottom: 9px; background-color: rgba(237,245,232,1); box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.2); } .header-fix.header-wrapp-sub.menu-header-fix, .header-scroll-section.menu-header-fix { box-shadow: 0px 3px 4px 0px rgba(0,0,0,0) !important; background: none !important;} .home-page #site-logo-scrl { top: 1px;} .header-scroll-section { display: none; opacity: 0; align-items: center; position: relative; width: 100%;} .header-fix .primary-menu-scrl-hide, .header-fix #site-logo { animation: hmeScrlHide 0.5s forwards; opacity: 1; } @keyframes hmeScrlHide { 0% { opacity: 1; } 100% { opacity: 0; margin-top: -200px;} } .header-fix .header-scroll-section { opacity: 0; transform: translateY(30px); animation: hmeScrlShow 0.5s forwards; display: flex;} @keyframes hmeScrlShow { 10% { opacity: 0; transform: translateY(30px); } 11% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0px); } } .primary-menu-full { position: absolute; left: 50%; transform: translateX(-50%); width: 945px; } /* ------------------ menu rolls ------- */ /* -------------- Smo ----------------- */ .cpr-wrapp .align { position: relative;} .home-page .smo { position: absolute; top: 44px; left: 50%; transform: translateX(-50%);} .sub-page .cpr-wrapp .align { flex-direction: row-reverse;} .smo { margin-top: 0px; justify-content: center; } .smo ul { justify-content: center;} .smo li, .smo-banner li { display: block; margin: 0 10px; padding: 0;} .smo svg, .smo-banner svg { fill: #2e302f } .smo a:link, .smo a:visited, .smo-banner a:link, .smo-banner a:visited { display: block; } .smo li svg, .smo-banner li svg { width: 10px; height: auto; } .smo li:nth-child(2n) svg { width: 20px;} .smo li:nth-child(3n) svg { width: 19px;} .smo li:nth-child(4n) svg { width: 28px;} .smo li:nth-child(5n) svg { width: 30px; } .owl-carousel .owl-nav .owl-next span, .owl-carousel .owl-nav .owl-prev span { border-radius: 50%; text-indent: -9999px; display: block; width: 50px; height: 50px; background-image: url(../images/icons/right-arrow.webp); background-size: 100% auto; } .owl-carousel .owl-nav .owl-prev span { background-image: url(../images/icons/left-arrow.webp); } .owl-carousel .owl-nav .owl-next:hover, .owl-carousel .owl-nav .owl-prev:hover { background: none; background-color: transparent;} .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { position: absolute; top: 50%; transform: translateY(-50%); padding-bottom: 60px;} .owl-carousel .owl-nav .owl-next { right: -40px;} .owl-carousel .owl-nav .owl-prev { left: -40px;} .bx-wrapper { background-color: transparent; background: none; box-shadow:none; border:none; } .no-space-top { padding-top: 0;} .no-space-btm { padding-bottom: 0; } /* ------------------------------ Gallery --------------------------- */ .gallery-menu { border: 1px solid #f3f3f3; border-left: none; border-right: none;} .gallery-menu ul { justify-content: center;} .gallery-menu a:link, .gallery-menu a:visited { display: block; padding: 20px 25px; text-transform: uppercase;} .gallery-menu a.active:link, .gallery-menu a.active:visited { font-weight: 600; background-color: rgba(0,0,0,0.1);} .gallery-block { padding-top: 40px ;} .gallery-block ul { gap: 15px;} .gallery-block li { display: block; width: calc(25% - 15px);} .gallery-block img { border-radius: 10px;} .video-gallblk { width: 1000px; margin: 0 auto;} .video-gallery-block, .downloads-wrapp { padding-top: 50px;} .down-eb-cn { padding: 50px 25px; border: 1px solid #f4f1e8; max-width: 400px; margin: 0 auto;} .down-eb-cn-img img { width: 110px;} .down-icon table { width: 100%; padding: 5px 20px; background-color: #ededed;} .down-eb-cn-img { text-align: center; padding-bottom: 30px;} /* ------------------------------ Gallery --------------------------- */ .hme-banner-align { width: 100%; overflow: hidden; } .hm-banner-forest { z-index: 200; } /* ---------- Fog ---------- */ .fog-holder { position: absolute; width: 100%; height: 100%; z-index:100; left: 0; top: 0;} .fog-layer { position: relative; width: 100%; height: 100%; left: 0; top: 0; z-index: 1200; opacity: 1;} .home-banner { overflow: hidden; } .fogwrapper { height: 100%; position: absolute; top: 0; width: 100%; -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2); filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);} #foglayer_01, #foglayer_02, #foglayer_03 { height: 100%; position: absolute; width: 200%; } #foglayer_01 .image01, #foglayer_01 .image02, #foglayer_02 .image01, #foglayer_02 .image02, #foglayer_03 .image01, #foglayer_03 .image02 { float: left; height: 100%; width: 50%; } #foglayer_01 { -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite; -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite; animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite; } #foglayer_02, #foglayer_03 { -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite; -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite; animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite; } /* ---------- Moving Fog ---------- */ #foglayer_01 .image01, #foglayer_01 .image02 { background: url("../images/fog1.png") center center/cover no-repeat transparent; } #foglayer_02 .image01, #foglayer_02 .image02, #foglayer_03 .image01, #foglayer_03 .image02{ background: url("../images/fog2.png") center center/cover no-repeat transparent; } /* ---------- Keyframe Layer 1 ---------- */ @-webkit-keyframes foglayer_01_opacity { 0% { opacity: .1; } 22% { opacity: .5; } 40% { opacity: .28; } 58% { opacity: .4; } 80% { opacity: .16; } 100% { opacity: .1; } } @-moz-keyframes foglayer_01_opacity { 0% { opacity: .1; } 22% { opacity: .5; } 40% { opacity: .28; } 58% { opacity: .4; } 80% { opacity: .16; } 100% { opacity: .1; } } @-o-keyframes foglayer_01_opacity { 0% { opacity: .1; } 22% { opacity: .5; } 40% { opacity: .28; } 58% { opacity: .4; } 80% { opacity: .16; } 100% { opacity: .1; } } @keyframes foglayer_01_opacity { 0% { opacity: .1; } 22% { opacity: .5; } 40% { opacity: .28; } 58% { opacity: .4; } 80% { opacity: .16; } 100% { opacity: .1; } } /* ---------- Keyframe Layer 2 ---------- */ @-webkit-keyframes foglayer_02_opacity { 0% { opacity: .5; } 25% { opacity: .2; } 50% { opacity: .1; } 80% { opacity: .3; } 100% { opacity: .5; } } @-moz-keyframes foglayer_02_opacity { 0% { opacity: .5; } 25% { opacity: .2; } 50% { opacity: .1; } 80% { opacity: .3; } 100% { opacity: .5; } } @-o-keyframes foglayer_02_opacity { 0% { opacity: .5; } 25% { opacity: .2; } 50% { opacity: .1; } 80% { opacity: .3; } 100% { opacity: .5; } } @keyframes foglayer_02_opacity { 0% { opacity: .5; } 25% { opacity: .2; } 50% { opacity: .1; } 80% { opacity: .3; } 100% { opacity: .5; } } /* ---------- Keyframe Layer 3 ---------- */ @-webkit-keyframes foglayer_03_opacity { 0% { opacity: .8 } 27% { opacity: .2; } 52% { opacity: .6; } 68% { opacity: .3; } 100% { opacity: .8; } } @-moz-keyframes foglayer_03_opacity { 0% { opacity: .8 } 27% { opacity: .2; } 52% { opacity: .6; } 68% { opacity: .3; } 100% { opacity: .8; } } @-o-keyframes foglayer_03_opacity { 0% { opacity: .8 } 27% { opacity: .2; } 52% { opacity: .6; } 68% { opacity: .3; } 100% { opacity: .8; } } @keyframes foglayer_03_opacity { 0% { opacity: .8; } 27% { opacity: .2; } 52% { opacity: .6; } 68% { opacity: .3; } 100% { opacity: .8; } } /* ---------- Keyframe moveMe ---------- */ @-webkit-keyframes foglayer_moveme { 0% { left: 0; } 100% { left: -100%; } } @-moz-keyframes foglayer_moveme { 0% { left: 0; } 100% { left: -100%; } } @-o-keyframes foglayer_moveme { 0% { left: 0; } 100% { left: -100%; } } @keyframes foglayer_moveme { 0% { left: 0; } 100% { left: -100%; } } @media only screen and (min-width: 280px) and (max-width: 767px) { #foglayer_01 .image01, #foglayer_01 .image02, #foglayer_02 .image01, #foglayer_02 .image02, #foglayer_03 .image01, #foglayer_03 .image02 { width: 100%; } } /* ------------------ fog layer ---------------------- */ .owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span { background-image: url(../images/icon/prev-arrow.webp); background-repeat: no-repeat; background-size: 100%;} .owl-carousel .owl-nav button.owl-next span { background-image: url(../images/icon/next-arrow.webp);} .every-day-slide-blk .owl-carousel .owl-nav .owl-next { right: 0; } .every-day-slide-blk .owl-carousel .owl-nav .owl-prev { left: 0;}