/* SKELETON */ @charset "utf-8"; /* Table of Contents ================================================== #Desktop (1600) #Desktop (1366) #Desktop (1024) #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) /* #Additional - Large Screens beyond 1920px ================================================== */ @media only screen and (min-width: 1701px) and (max-width: 2100px) { #ourResponsibility .featuredvilla-slider-thumbs .owl-stage { transform: none !important; width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { width: 100% !important; } /*----------------- Inner Pages -----------------*/ } /* #Additional - Large Screens beyond 1600px ================================================== */ @media only screen and (min-width: 1451px) and (max-width: 1700px) { #welCome:after { left: -32%; } #welCome .content { padding: 0 85px; } #welCome .content h1 { font-size: var(--font-size-title); line-height: var(--desktop-line-height-title); } #welCome .content .description { padding-left: 150px; } #welCome .content .description:before { width: 140px; } .main-list:after { left: -37%; } .brandName { font-size: 250px; line-height: 250px; top: 25px; right: calc(var(--container-padding) - 80px); } .main-list .destin-listing { --destin-image-rl-padding: 85px; --destin-content-rl-padding: 245px; } .main-list .destin-listing .content h3 { font-size: var(--font-size-title); line-height: var(--desktop-line-height-title); } #ourResponsibility span.tagnumber { padding: 0 70px; } #ourResponsibility .featuredvilla-slider .content { padding: 50px 0 50px 70px; } #ourResponsibility .featuredvilla-slider .content h3 { font-size: var(--font-size-title); line-height: var(--desktop-line-height-title); } #ourResponsibility .featuredvilla-slider .content .description { column-gap: 20px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 80px 0; } #ourResponsibility .thumbs { padding: 50px 70px; } #ourResponsibility .featuredvilla-slider-thumbs .owl-stage { transform: none !important; width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { width: 100% !important; } .footerSection .ftr_logos ul li { margin: 0 25px 0 0; } /*----------------- Inner Pages -----------------*/ } /* #Additional - Large Screens beyond 1366px ================================================== */ @media only screen and (min-width: 1181px) and (max-width: 1450px) { #welCome:after { left: -37%; } #welCome .content { padding: 0 85px; } #welCome .content h1 { font-size: 62px; line-height: 72px; } #welCome .content .description { padding-left: 100px; } #welCome .content .description:before { width: 100px; transform: translateX(-60%); } .main-list:after { left: -45%; } .brandName { font-size: 240px; line-height: 240px; top: 25px; right: calc(var(--container-padding) - 80px); } .main-list .destin-listing { --destin-image-rl-padding: 85px; --destin-content-rl-padding: 175px; } #ourResponsibility span.tagnumber { padding: 0 70px; } #ourResponsibility .featuredvilla-slider .content { padding: 50px 0 50px 70px; } #ourResponsibility .featuredvilla-slider .content h3 { font-size: 62px; line-height: 72px; } #ourResponsibility .featuredvilla-slider .content .description { column-gap: 20px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 80px 0; } #ourResponsibility .thumbs { padding: 50px 70px; } #ourResponsibility .featuredvilla-slider-thumbs .owl-stage { transform: none !important; width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { width: 100% !important; } .footerSection .ftr_logos ul li { margin: 0 15px 0 0; } /*----------------- Inner Pages -----------------*/ } /* #iPad Pro - Large Screens beyond 1024px ================================================== */ @media only screen and (min-width: 960px) and (max-width: 1180px) { #searchForm .field { padding: 10px 10px; } #searchForm .field label { font-size: 16px; line-height: 20px; } #searchForm .field .form-control { font-size: 20px; } #searchForm .neobookings-submit-btn { padding: 23px 15px; font-size: 28px; } #welCome { padding-top: 100px; padding-bottom: 100px; } #welCome:after { left: -49%; } #welCome .content { padding: 0 15px; } #welCome .content h1 { font-size: 57px; line-height: 60px } #welCome .content .description { padding-left: 70px; } #welCome .content .description:before { width: 70px; transform: translateX(-30%); } .main-list { padding-top: 100px; padding-bottom: 100px; } .main-list:after { left: -57%; } .brandName { font-size: 175px; line-height: 175px; top: 25px; right: calc(var(--container-padding) - 57px); } .main-list .destin-listing { --destin-image-rl-padding: 30px; --destin-content-rl-padding: 0px; } .main-list .destin-listing .content h3 { margin: 0 0 20px 0; font-size: 57px; line-height: 60px } .main-list .destin-listing .content .customNavDots [class*=customDots] .owl-dot { margin: 0 10px; } #ourHotels { padding-top: 100px; padding-bottom: 100px; } #ourResponsibility { padding-top: 0px; padding-bottom: 0px; } #ourResponsibility span.tagnumber { padding: 0 0px; } #ourResponsibility .featuredvilla-slider .item img { width: 154%; max-width: 154%; margin-left: -27%; } #ourResponsibility .featuredvilla-slider .content { padding: 50px 15px 50px 0; } #ourResponsibility .featuredvilla-slider .content h3 { font-size: 57px; line-height: 60px } #ourResponsibility .featuredvilla-slider .content .description { column-gap: 15px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 80px 0; } #ourResponsibility .thumbs { padding: 50px 0 50px 15px; } #ourResponsibility .featuredvilla-slider-thumbs .owl-stage { transform: none !important; width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .item { padding: 15px 30px; } .footerSection .ftr_logos ul li { margin: 0 25px 0 0; vertical-align: middle; } /*----------------- Inner Pages -----------------*/ } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { #searchForm { bottom: 0; } #searchFormBtn { display: block; } #occupationBox .logo { display: block; } #occupationBox .occupationClose::before, #occupationBox .occupationClose::after { background-color: var(--primary-color); } #occupationBox > div { width: 100vw; height: 100vh; padding: 96px 15px 30px 15px; } #occupationBox > div .room { margin: 0 auto; } #welCome { padding-top: 70px; padding-bottom: 0px; } #welCome:after { background-size: 100%; opacity: 5%; top: -23%; left: -40%; } #welCome .content { padding: 0 15px; } #welCome .content span.tagnumber { margin: 0 0 30px 0; font-size: 20px; line-height: 25px; } #welCome .content span.tagnumber strong:after { width: 40px; margin: 0 15px; } #welCome .content h1 { margin: 0 0 30px 0; font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #welCome .content .description { padding-left: 60px; } #welCome .content .description:before { width: 40px; transform: translateX(0%); } #welCome .content h2 { margin: 0 0 30px 0; font-size: 18px; line-height: 23px; } #welCome .content p { font-size: 16px; line-height: 20px; } #welCome .content button { margin-top: 10px; padding: 0 0 5px 0; font-size: 18px; } #welCome .image .welcome-thumb { padding-bottom: 70px; } #welCome .image .welcome-thumb.owl-theme .owl-nav [class*=owl-] { width: 50px; height: 50px; } #welCome .image .welcome-thumb.owl-theme .owl-dots .owl-dot { height: 50px; } .main-list { padding-top: 70px; padding-bottom: 70px; } .main-list:after { background-position: left bottom 0px; background-size: 100%; opacity: 5%; top: -23%; left: -50%; } .brandName { font-size: 120px; line-height: 120px; top: 25px; right: calc(var(--container-padding) - 15px); } .main-list .title { margin-bottom: 30px; padding-left: 15px !important; } .main-list .title span.tagnumber { margin: 0; font-size: 20px; line-height: 25px; } .main-list .title span.tagnumber strong:after { width: 40px; margin: 0 15px; } .main-list .destin-listing { margin-bottom: 30px; } .main-list .destin-listing .image { padding: 0 0 0 15px; margin-bottom: 0; } .main-list .destin-listing:nth-child(even) .image { margin-bottom: 0; } .main-list .destin-listing .content { padding: 30px 15px 30px 0; } .main-list .destin-listing:nth-child(odd) .content { order: 2; padding: 30px 0 30px 15px; } .main-list .destin-listing .content h3 { margin: 0 0 20px 0; font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } .main-list .destin-listing .content .customNavDots { margin-top: 20px; } .main-list .destin-listing .content .customNavDots [class*=customNav] { display: inline-block; } .main-list .destin-listing .content .customNavDots [class*=customNav] [class*=owl-] { width: 50px; height: 50px; } .main-list .destin-listing .content .customNavDots [class*=customDots] { display: inline-block; margin-top: 0px; margin-left: 46px; } .main-list .destin-listing .content .customNavDots [class*=customDots] .owl-dot { margin: 0 10px; } #ourHotels { padding-top: 70px; padding-bottom: 70px; } #ourResponsibility { padding-top: 0px; padding-bottom: 0px; } #ourResponsibility span.tagnumber { margin: 0 0 30px 0; padding: 0 0px; font-size: 20px; line-height: 25px; } #ourResponsibility span.tagnumber strong:after { width: 40px; margin: 0 15px; } #ourResponsibility .featuredvilla-slider .item img { width: 180%; max-width: 180%; margin-left: -40%; } #ourResponsibility .featuredvilla-slider .content { display: block; width: 100%; height: auto; padding: 40px 15px; left: 0;} #ourResponsibility .featuredvilla-slider .content h3 { margin: 0 0 20px 0; font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #ourResponsibility .featuredvilla-slider .content .description { -moz-columns: 1; -webkit-columns: 1; column-count: 1; column-gap: 0px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 20px 0; } #ourResponsibility .featuredvilla-slider .content p { margin: 20px 0 0 0; } #ourResponsibility .thumbs { display: block; width: 100%; height: 150px; padding: 0 15px; top: auto; bottom: 0; right: 0; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { margin-bottom: 0; } #ourResponsibility .featuredvilla-slider-thumbs .item { padding: 15px 30px; } #ourResponsibility .featuredvilla-slider-thumbs.owl-theme .owl-nav { position: static; margin-top: 30px; text-align: left; } #footer { background-position: right 37% center; } .footerSection { padding-top: 50px; padding-bottom: 50px; } .footerSection .ftr_logo { margin-bottom: 30px; } .footerSection .ftr_info { padding: 0 15px; } .footerSection .ftr_info h4 { margin: 0 0 10px 0; } .footerSection .ftr_menu { margin-bottom: 30px; } .footerSection .ftr_logos { margin-bottom: 30px; } .footerSection .ftr_logos:last-child { margin-bottom: 0; } .footerSection .ftr_logos ul { display: grid; grid-template-columns: 50% 50%; grid-gap: 15px; align-items: center; } .footerSection .ftr_logos ul li { margin: 0; } .footerBottom .container { padding-top: 30px; padding-bottom: 30px; } .footerBottom .ftr_text { margin-bottom: 10px; text-align: center; } .footerBottom .ftr_text:last-child { margin-bottom: 0; text-align: center; } /*----------------- Inner Pages -----------------*/ } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { #searchFormPopup > #searchForm { bottom: 0; padding-bottom: 0;} #searchFormBtn { display: block; } #occupationBox .logo { display: block; } #occupationBox .occupationClose::before, #occupationBox .occupationClose::after { background-color: var(--primary-color); } #occupationBox > div { width: 100vw; height: 100vh; padding: 96px 15px 30px 15px; } #occupationBox > div .room { flex-direction: column; width: 100%; } #occupationBox > div .room select { width: calc(100% - 30px); } #occupationBox > div .room .ages-inputs { flex-direction: column; } #welCome { padding-top: 70px; padding-bottom: 0px; } #welCome:after { background-size: 100%; opacity: 5%; top: -23%; left: -40%; } #welCome .content { padding: 0 15px; } #welCome .content span.tagnumber { margin: 0 0 30px 0; font-size: 20px; line-height: 25px; } #welCome .content span.tagnumber strong:after { width: 40px; margin: 0 15px; } #welCome .content h1 { margin: 0 0 30px 0; font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #welCome .content .description { padding-left: 60px; } #welCome .content .description:before { width: 40px; transform: translateX(0%); } #welCome .content h2 { margin: 0 0 30px 0; font-size: 18px; line-height: 23px; } #welCome .content p { font-size: 16px; line-height: 20px; } #welCome .content button { margin-top: 10px; padding: 0 0 5px 0; font-size: 18px; } #welCome .image { padding: 0 15px; margin-top: 30px; } #welCome .image .welcome-thumb { padding-bottom: 70px; } #welCome .image .welcome-thumb.owl-theme .owl-nav [class*=owl-] { width: 50px; height: 50px; } #welCome .image .welcome-thumb.owl-theme .owl-dots .owl-dot { height: 50px; } .main-list:after { background-position: left bottom 0px; background-size: 100%; opacity: 5%; top: -23%; left: -50%; } .brandName { font-size: 120px; line-height: 120px; top: 25px; right: calc(var(--container-padding) - 15px); } .main-list .title { margin-bottom: 0; } .main-list .title span.tagnumber { margin: 0; font-size: 20px; line-height: 25px; } .main-list .title span.tagnumber strong:after { width: 40px; margin: 0 15px; } .main-list .destin-listing .image { padding: 0; margin-bottom: 0; } .main-list .destin-listing:nth-child(even) .image { margin-bottom: 0; } .main-list .destin-listing .content { padding-bottom: 30px; } #offers-list .main-list .destin-listing .content { padding-bottom: 0px; } .main-list .destin-listing:nth-child(odd) .content { order: inherit; } .main-list .destin-listing .content h3 { margin: 0 0 20px 0; font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } .main-list .destin-listing .content .customNavDots { margin-top: 40px; } .main-list .destin-listing .content .customNavDots [class*=customNav] { display: block; } .main-list .destin-listing .content .customNavDots [class*=customNav] [class*=owl-] { width: 50px; height: 50px; } .main-list .destin-listing .content .customNavDots [class*=customDots] { display: none; margin-top: 20px; margin-left: 0; } .main-list .destin-listing .content .customNavDots [class*=customDots] .owl-dot { margin: 0 10px; } #ourHotels { padding-top: 70px; padding-bottom: 70px; } .main-list .destin-listing { padding-bottom: 50px !important;} .main-list .destin-listing:last-child { padding-bottom: 0 !important; } #ourResponsibility { padding-top: 0px; padding-bottom: 0px; } #ourResponsibility span.tagnumber { margin: 0 0 30px 0; padding: 0 0px; font-size: 20px; line-height: 25px; } #ourResponsibility span.tagnumber strong:after { width: 40px; margin: 0 15px; } #ourResponsibility .featuredvilla-slider .content { display: block; width: 100%; height: auto; padding: 40px 15px; left: 0; } #ourResponsibility .featuredvilla-slider .content h3 { margin: 0 0 20px 0; font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #ourResponsibility .featuredvilla-slider .content .description { -moz-columns: 1; -webkit-columns: 1; column-count: 1; column-gap: 0px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 20px 0; } #ourResponsibility .featuredvilla-slider .content p { margin: 20px 0 0 0; } #ourResponsibility .thumbs { display: block; width: 100%; height: 150px; padding: 0 15px; top: auto; bottom: 0; right: 0; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { margin-bottom: 0; } #ourResponsibility .featuredvilla-slider-thumbs .item { padding: 15px 30px; } #ourResponsibility .featuredvilla-slider-thumbs.owl-theme .owl-nav { position: static; margin-top: 30px; text-align: left; } #footer { background-position: right 37% center; } .footerSection { padding-top: var(--space-between-sections); padding-bottom: 0; } .footerSection .ftr_logo { margin-bottom: 30px; } .footerSection .ftr_info { padding: 0 15px; } .footerSection .ftr_info h4 { margin: 0 0 10px 0; } .footerSection .ftr_menu { margin-bottom: 30px; } .footerSection .ftr_logos { margin-bottom: 30px; } .footerSection .ftr_logos:last-child { margin-bottom: 0; } .footerSection .ftr_logos ul { display: flex; align-items: center; flex-direction: column; height: auto;} .footerSection .ftr_logos ul li { margin: 0 0 15px; } .footerBottom .container { padding-top: 30px; padding-bottom: 100px; } .footerBottom .ftr_text { margin-bottom: 20px; text-align: center; } .footerBottom .ftr_text:last-child { margin-bottom: 0; text-align: center; } /*----------------- Inner Pages -----------------*/ } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { #Caption { top: 37%; } #occupationBox > div #rooms { max-height: 32vh; } #ourResponsibility .featuredvilla-slider .item img { width: 220%; max-width: 220%; margin-left: -60%; } /*----------------- Inner Pages -----------------*/ } /* FIN SKELETON */