/* Theme Name: Skelementor Child Theme URI: https://mousebuilt.com.au/skelementor-theme/ Template: skelementor Author: Mousebuilt (Konker) Author URI: https://mousebuilt.com.au/ Description: Ultra-minimal theme designed specifically for Elementor Page Builder and to be as lightweight as possible. Tags: custom-logo,one-column,two-columns,translation-ready Version: 1.1.4.1716942509 Updated: 2024-05-29 00:28:29 */ * { box-sizing: border-box; } body { margin: 0 !important; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.no-scroll { overflow: hidden !important; height: 100dvh; } .elementor-location-header .home-header { display: none; } /* Header Style */ body:not(.elementor-editor-active) .home-header { position: fixed; } .elementor-editor-active .hide-from-elementor { display: none; } .elementor-location-footer { position: relative; z-index: 99; } /* Transparent background Header */ .accommodation-template-default .home-header:not(.sticky):has(nav.menu-nav .active:not(.sub-menu-content .active)):before, .post-type-archive-experiences .home-header:not(.sticky):has(nav.menu-nav .active:not(.sub-menu-content .active)):before, .experiences-template-default .home-header:not(.sticky):has(nav.menu-nav .active:not(.sub-menu-content .active)):before, .sample-itineraries-template-default .home-header:not(.sticky):has(nav.menu-nav .active:not(.sub-menu-content .active)):before, .page-id-568 .home-header:not(.sticky):has(nav.menu-nav .active :not(.sub-menu-content .active)):before, .tax-location .home-header:not(.sticky):has(nav.menu-nav .active:not(.sub-menu-content .active)):before { background: #FAF4EF; opacity: 1; } .accommodation-template-default .home-header:not(.sticky), .experiences-template-default .home-header:not(.sticky), .sample-itineraries-template-default .home-header:not(.sticky), .page-id-568 .home-header:not(.sticky), .tax-location .home-header:not(.sticky) { background-color: transparent; } .post-type-archive-experiences .home-header:not(.sticky) { background-color: #6A2B0A; } .accommodation-template-default .home-header:not(.sticky)::before, .post-type-archive-experiences .home-header:not(.sticky)::before, .experiences-template-default .home-header:not(.sticky)::before, .sample-itineraries-template-default .home-header:not(.sticky)::before, .page-id-568 .home-header:not(.sticky)::before, .tax-location .home-header:not(.sticky)::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 160px; background: inherit; opacity: 0.4; background: linear-gradient(to bottom, #000000, transparent); z-index: 0; } /* Normal background Header */ .home-header { width: 100%; background-color: #FAF4EF; display: flex; align-items: flex-end; justify-content: center; /* position: fixed; */ top: 0; z-index: 99; transition: background-color .3s ease; } .header-container { min-height: 76px; display: flex; align-items: center; justify-content: center; } nav.menu-nav { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; padding: 20px 60px; } /* Transparent Background Header */ .accommodation-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item, .experiences-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item, .page-id-568 .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item, .tax-location .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item { color: var(--e-global-color-text); transition: color .3s ease; } .accommodation-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item:hover, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item:hover, .experiences-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item:hover, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item:hover, .page-id-568 .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item:hover, .tax-location .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item:hover { color: #A53900; } .accommodation-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav a.menu-nav-item, .experiences-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item, .page-id-568 .home-header:not(.sticky) nav.menu-nav a.menu-nav-item, .tax-location .home-header:not(.sticky) nav.menu-nav a.menu-nav-item { color: #FFFFFF; transition: color .3s ease; } .accommodation-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item:hover, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav a.menu-nav-item:hover, .experiences-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item:hover, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item:hover, .page-id-568 .home-header:not(.sticky) nav.menu-nav a.menu-nav-item:hover, .tax-location .home-header:not(.sticky) nav.menu-nav a.menu-nav-item:hover { color: #FFFFFF; } /* Normal Background Header */ nav.menu-nav a.menu-nav-item { font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); color: var(--e-global-color-text); transition: color .3s ease; text-decoration: none; z-index: 2; } nav.menu-nav a.menu-nav-item:hover { color: var(--e-global-color-eca78c2); } nav.menu-nav a.menu-nav-item:not(.enquire-header) { padding-bottom: 12px; } /* CSS For Logo */ .not-homepage nav.menu-nav a.menu-nav-item.logo-header::after { display: none; } .not-homepage nav.menu-nav a.menu-nav-item.logo-header { padding: 0 !important; } nav.menu-nav a.menu-nav-item.logo-header { margin: 0 12% 0 5.5% !important; } .home nav.menu-nav a.menu-nav-item.logo-header { padding: 130px 0 0 !important; position: relative !important; transition: padding .3s ease; } .not-homepage nav.menu-nav a.menu-nav-item.logo-header { padding: 0 !important; position: relative !important; transition: padding .3s ease; } nav.menu-nav a.menu-nav-item.logo-header span { display: none; } /* Transparent Background Header */ .accommodation-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.logo-header img, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.logo-header img, .experiences-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.logo-header img, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.logo-header img, .page-id-568 .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.logo-header img, .tax-location .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.logo-header img { filter: brightness(0) invert(1); transition: filter .3s ease; } .accommodation-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.logo-header img, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.logo-header img, .experiences-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.logo-header img, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.logo-header img, .page-id-568 .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.logo-header img, .tax-location .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.logo-header img { filter: brightness(1) invert(0) !important; transition: filter .3s ease; } /* Normal Background Header */ nav.menu-nav a.menu-nav-item.logo-header img { min-width: 94px !important; opacity: 1 !important; z-index: 1; } .home nav.menu-nav a.menu-nav-item.logo-header::after { content: ''; width: 76px; height: 111px; background-image: url("https://ololo.wpenginepowered.com/wp-content/uploads/2024/04/Ololo_Graphic_RGB-BarkBrown.svg"); position: absolute; top: 0; left: 6px; background-size: contain; background-repeat: no-repeat; z-index: 2; opacity: 1 !important; transition: opacity .3s ease; } .not-homepage nav.menu-nav a.menu-nav-item.logo-header::after { opacity: 0 !important; height: 0 !important; } /* Enquire Button */ /* Transparent Background Header */ .accommodation-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header, .accommodation-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover::before, .accommodation-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover::before, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover, .experiences-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header, .experiences-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover::before, .experiences-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover::before, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover, .page-id-568 .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header, .page-id-568 .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover::before, .page-id-568 .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover, .tax-location .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header, .tax-location .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover::before, .tax-location .home-header:not(.sticky) nav.menu-nav a.menu-nav-item.enquire-header:hover { border: 1px solid #FFF !important; } .accommodation-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header, .experiences-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header, .page-id-568 .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header, .tax-location .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header { border: 1px solid #6A2B0A !important; } .accommodation-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover::before, .accommodation-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover::before, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover, .experiences-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover::before, .experiences-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover::before, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover, .page-id-568 .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover::before, .page-id-568 .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover, .tax-location .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover::before, .tax-location .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-nav-item.enquire-header:hover { border: 1px solid #A53900 !important; } /* Normal Background Header */ nav.menu-nav a.menu-nav-item.enquire-header { padding: 12px 24px !important; border-radius: 32px; border: 1px solid #6A2B0A; z-index: 2; position: relative; cursor: pointer; transition: border-color .5s ease !important; background-color: transparent; margin-right: 0; } nav.menu-nav a.menu-nav-item.enquire-header:hover::before, nav.menu-nav a.menu-nav-item.enquire-header:hover { background-color: transparent !important; border: 1px solid #A53900 !important; } nav.menu-nav a.menu-nav-item.enquire-header::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border: 1px solid transparent; border-radius: 34px; z-index: -1; opacity: 1; transition: border-color .3s ease, top .3s ease, left .3s ease, right .3s ease, bottom .3s ease; } nav.menu-nav a.menu-nav-item.enquire-header:hover::before { top: -6px; left: -6px; right: -6px; bottom: -6px; } /* CSS for sticky header */ .sticky nav.menu-nav a.menu-nav-item.logo-header.logo-header::after { opacity: 0 !important; } .sticky nav.menu-nav a.menu-nav-item.logo-header.logo-header { padding: 0 !important; } /* CSS for icon on hover for icon with children */ .home-header nav.menu-nav a.menu-item-has-children { position: relative !important; transition: color .3s ease; } /* Transparent Background Header */ .accommodation-template-default .home-header:not(.sticky) nav.menu-nav a.menu-item-has-children::after, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav a.menu-item-has-children::after, .experiences-template-default .home-header:not(.sticky) nav.menu-nav a.menu-item-has-children::after, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav a.menu-item-has-children::after, .page-id-568 .home-header:not(.sticky) nav.menu-nav a.menu-item-has-children::after, .tax-location .home-header:not(.sticky) nav.menu-nav a.menu-item-has-children::after { filter: brightness(0) invert(1); transition: filter .3s ease; } .accommodation-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-item-has-children::after, .post-type-archive-experiences .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-item-has-children::after, .experiences-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-item-has-children::after, .sample-itineraries-template-default .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-item-has-children::after, .page-id-568 .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-item-has-children::after, .tax-location .home-header:not(.sticky) nav.menu-nav:has(.active:not(.sub-menu-content .active)) a.menu-item-has-children::after { filter: brightness(1) invert(0) !important; transition: filter .3s ease; } /* Normal Background Header */ @keyframes rotateDeg { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } @keyframes rotateDegOpossite { 0% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } } .home-header nav.menu-nav a.menu-item-has-children::after { content: ''; position: absolute; top: 4px; right: -20px; width: 10px; height: 10px; background-image: url("https://ololo.wpenginepowered.com/wp-content/uploads/2024/04/Plus-Icon.svg"); background-size: contain; z-index: 2; opacity: 0 !important; transition: opacity .3s ease; animation: rotateDegOpossite .3s ease; } .home-header nav.menu-nav a.menu-item-has-children:hover::after { opacity: 1 !important; animation: rotateDeg .3s ease; } .home-header nav.menu-nav a.menu-item-has-children::after svg path { fill: #A53900 !important; } .home-header nav.menu-nav a.menu-item-has-children.active::after { content: ''; position: absolute; top: 4px; right: -20px; width: 10px; height: 10px; background-image: url("https://ololo.wpenginepowered.com/wp-content/uploads/2024/04/Plus-Icon.svg"); background-size: contain; z-index: 2; opacity: 1 !important; transition: opacity .3s ease; } .home-header nav.menu-nav a.menu-item-has-children.active { color: #A53900 !important; transition: color .3s ease; } /* CSS for Sub Menu */ .sub-menu { width: 100%; min-height: 620px; left: 0; top: 100%; display: flex; align-items: flex-start; justify-content: center; opacity: 0; position: absolute; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; transform: translateY(-20px); /* Adjust as needed */ visibility: hidden; } .menu-nav-item.active + .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); /* Adjust as needed */ } .sub-menu-content a { padding-bottom: 40px; } .sub-menu-content-children a { padding-bottom: 0; } .sub-menu span { font-family: var(--e-global-typography-secondary-font-family), Sans-serif; font-size: var(--e-global-typography-secondary-font-size); font-weight: var(--e-global-typography-secondary-font-weight); line-height: var(--e-global-typography-secondary-line-height); letter-spacing: var(--e-global-typography-secondary-letter-spacing); color: var(--e-global-color-primary); cursor: pointer; transition: color .3s ease; padding-bottom: 40px; } .sub-menu span:hover { color: #DD6729; } /* Destination Sub Menu */ .sub-menu:has(.default-container .destinations-sub-menu) { background-image: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/05/Group-7925.svg'); background-position: top 80px right -20px; background-repeat: no-repeat; } .destinations-sub-menu { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 80px 160px; } .sub-menu-content { width: 270px; position: relative; display: flex; flex-direction: column; } .destinations-title.active + .sub-menu-content-children { opacity: 1; left: 100%; visibility: visible; } .sub-menu-content-children { position: absolute; top: 0; opacity: 0; left: -100px; border-left: 1px solid #6A2B0A40; padding-left: 80px; padding-top: 16px; width: 320px; transition: left .6s ease, opacity 0.3s ease, visibility 0.3s ease; height: 500px; display: flex; flex-direction: column; gap: 24px; visibility: hidden; } .sub-menu-content-children a { color: var(--e-global-color-primary); font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: var(--e-global-typography-c5f1c43-font-weight); line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); word-spacing: var(--e-global-typography-c5f1c43-word-spacing); transition: color .3s ease; cursor: pointer; text-decoration: none; } .sub-menu-content-children a:hover { color: #DD6729; text-decoration: underline; } .sub-menu-content-children a:first-child { margin-left: -20px; } #destinations-img { height: 466px; border: 10px solid #FFF; transform: rotate(-3deg); transition: width .3s ease; } /* Safaris and About Menu */ .safaris-sub-menu, .about-sub-menu { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 80px 160px; } .safaris-sub-menu .sub-menu-content, .about-sub-menu .sub-menu-content { width: 340px; } .safaris-sub-menu .sub-menu-content a, .about-sub-menu .sub-menu-content a { text-decoration: none; } .sub-menu:has(.default-container .safaris-sub-menu) { background-image: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/05/Mask-Group-59.svg'); background-position: bottom right ; background-repeat: no-repeat; } .sub-menu:has(.default-container .about-sub-menu) { background-image: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/05/Mask-Group-60.svg'); background-position: bottom right ; background-repeat: no-repeat; } #safaris-img { height: 466px; border: 10px solid #FFF; transform: rotate(-3deg); transition: width .3s ease, transform .4s ease, src .4s ease; } #about-img { height: 466px; border: 10px solid #FFF; transform: rotate(-2deg); transition: width .3s ease, transform .4s ease, src .4s ease; } /* Home Header Mobile CSS */ .home-header-mobile { width: 100%; min-height: 80px; background-color: #FAF4EF; align-items: center; justify-content: space-between; padding: 16px 20px; position: relative; display: none; } .home-header-mobile .logo-header{ min-width: 70px !important; height: 29px; opacity: 1 !important; z-index: 2; order: 2; position: absolute; left: 45%; } .home-header-mobile a.enquire-header-mobile { font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); color: var(--e-global-color-text); text-decoration: none; display: flex; align-items: center; gap: 8px; justify-content: start; order: 1; z-index: 2; } .home-header-mobile .menu-header-mobile { width: 33px; height: 11px; order: 3; z-index: 2; } /* Background Transparent Header Mobile */ .accommodation-template-default .home-header-mobile, .experiences-template-default .home-header-mobile, .sample-itineraries-template-default .home-header-mobile, .page-id-568 .home-header-mobile, .tax-location .home-header-mobile { background-color: transparent; z-index: 1; margin-bottom: -80px; } .post-type-archive-experiences .home-header-mobile { background-color: transparent; margin-bottom: -80px; z-index: 9; } .accommodation-template-default .home-header-mobile svg path, .experiences-template-default .home-header-mobile svg path, .sample-itineraries-template-default .home-header-mobile svg path, .page-id-568 .home-header-mobile svg path, .tax-location .home-header-mobile svg path, .post-type-archive-experiences .home-header-mobile svg path { fill: #FAF4EF; } .accommodation-template-default .home-header-mobile::before, .post-type-archive-experiences .home-header-mobile::before, .experiences-template-default .home-header-mobile::before, .sample-itineraries-template-default .home-header-mobile::before, .page-id-568 .home-header-mobile::before, .tax-location .home-header-mobile::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 160px; background: inherit; opacity: 0.4; background: linear-gradient(to bottom, #000000, transparent); z-index: 0; } .accommodation-template-default .home-header-mobile a.enquire-header-mobile, .experiences-template-default .home-header-mobile a.enquire-header-mobile, .sample-itineraries-template-default .home-header-mobile a.enquire-header-mobile, .page-id-568 .home-header-mobile a.enquire-header-mobile, .tax-location .home-header-mobile a.enquire-header-mobile, .post-type-archive-experiences .home-header-mobile a.enquire-header-mobile { color: #FAF4EF; } /* Pop up Menu */ .popup-menu { visibility: hidden; position: fixed; top: 0; bottom: 0; left: -100%; background-color: #FAF4EF; z-index: 1000; transition: visibility 0.3s ease, left 0.3s ease; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 80px; padding: 0 20px; } .popup-menu.show { visibility: visible; left: 0; overflow-x: hidden; overflow-y: scroll; } .popup-header { display: flex; justify-content: flex-end; padding: 26px 20px; width: 100%; } .close-popup { background: none; border: none; font-size: 20px; cursor: pointer; } .popup-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 40px; } .popup-menu ul li a { text-decoration: none; font-weight: 600; font-size: 15px; font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; line-height: 19px; letter-spacing: 1.5px; color: #6A2B0A; text-transform: uppercase; } .menu-header-mobile { cursor: pointer; } a.menu-nav-item-mobile.menu-item-has-children { position: relative; cursor: pointer; transition: transform 0.3s ease; } a.menu-nav-item-mobile.menu-item-has-children::after { content: ''; position: absolute; right: -20px; top: 5px; width: 10px; height: 10px; background-image: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/04/Plus-Icon.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; transition: transform 0.3s ease; } a.menu-nav-item-mobile.menu-item-has-children.open::after { transform: rotate(45deg); } /* .sub-menu-mobile { display: flex; flex-direction: column; gap: 20px; height: 0; overflow: hidden; transition: height 0.5s ease, padding 0.5s ease; padding: 0; } .sub-menu-mobile.open { height: 0; overflow: visible; } .sub-menu-mobile a { display: flex; align-items: center; gap: 12px; } .grand-children { display: flex; flex-direction: column; gap: 20px; padding: 20px 0 0 0; height: 0; overflow: hidden; transition: height 0.5s ease, padding 0.5s ease; background-color: #FAF4EF; } */ .sub-menu-mobile { display: flex; flex-direction: column; gap: 20px; height: 0; overflow: hidden; transition: height 0.5s ease, padding 0.5s ease; padding: 0; } .sub-menu-mobile:has(.destinations-mobile) { gap: 20px; } .sub-menu-mobile.open { overflow: visible; } .sub-menu-mobile a { display: flex; align-items: center; gap: 12px; } .grand-children { display: flex; flex-direction: column; gap: 20px; padding: 20px 0 0 0; height: 0; overflow: hidden; transition: height 0.5s ease, padding 0.5s ease; background-color: #FAF4EF; } .grand-children.open { height: auto; } .popup-footer { display: flex; align-items: center; justify-content: flex-start; gap: 26px; padding: 40px 0 60px 0; } a.enquire-header-mobile-footer { padding: 20px 72px; border: 1px solid #6A2B0A; border-radius: 32px; text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: 15px; font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; line-height: 19px; letter-spacing: 1.5px; color: #6A2B0A; } .socials-popup-footer { height: 25px; width: auto; margin-right: 20px; } /* CSS For Countries Archive */ /* CSS - Banner */ .banner-countries .carousel-cell { background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100vh; position: relative; display: flex; align-items: flex-end; justify-content: start; padding: 32px 0; } .banner-countries .carousel-cell .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.25); z-index: 1; } .banner-countries .flickity-prev-next-button { top: 50%; width: 50%; height: 100%; border-radius: 0; transform: translateY(-50%); cursor: none !important; background-color: transparent; z-index: 3; } .banner-countries .flickity-prev-next-button:hover { background-color: transparent; } .banner-countries .flickity-prev-next-button.next { right: 0; } .banner-countries .flickity-prev-next-button.previous { left: 0; } .banner-countries svg.flickity-button-icon { display: none; } .banner-countries .carousel-cell span { color: #FFF; position: relative; bottom: 0; left: 50px; z-index: 2; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); } .banner-countries .carousel-cell span::before { content: ''; width: 13px; height: 19px; background-image: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/06/Group-7926.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; left: -24px; top: 4px; } .banner-countries ol.flickity-page-dots { padding: 0 40px; bottom: 38px; text-align: end; z-index: 2; } .banner-countries ol.flickity-page-dots li.dot { margin: 0 6px; background: transparent; border: 1px solid #FAF4EF; opacity: 1; } .banner-countries ol.flickity-page-dots li.dot:hover { background-color: #FAF4EF; } .banner-countries ol.flickity-page-dots li.dot.is-selected { background-color: #FAF4EF; } /* CSS for DpkCursor */ .dpkCursor { align-items: center; border: none !important; border-radius: 5rem; color: transparent !important; display: flex; height: 1.75rem; justify-content: center; left: 0; mix-blend-mode: difference; pointer-events: none; position: fixed; top: 0; transition: width 0.25s cubic-bezier(0.51, 1.07, 1, 1), height 0.25s cubic-bezier(0.51, 1.07, 1, 1), background-color 0.1s cubic-bezier(0.51, 1.07, 1, 1); width: 1.75rem; z-index: 999; } .dpkCursor.hover-active { /* font-size: 0.875rem; */ height: 95px !important; width: 95px !important; } /* CSS For Countries Content */ .country_content { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; } .country_content h2 { font-family: var(--e-global-typography-secondary-font-family), Sans-serif; font-size: var(--e-global-typography-secondary-font-size); font-weight: var(--e-global-typography-secondary-font-weight); line-height: var(--e-global-typography-secondary-line-height); letter-spacing: var(--e-global-typography-secondary-letter-spacing); color: var(--e-global-color-primary); max-width: 720px; text-align: center; margin-bottom: 42px; } .country_content p { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); color: var(--e-global-color-primary); max-width: 920px; text-align: center; } /* CSS for Why visit Destination? */ .visit_destination { display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 60px; column-gap: 60px; columns: 3; } .visit_destination_single { display: flex; flex-direction: column; gap: 12px; /* break-inside: avoid; */ } .visit_destination_single h3 { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 600; line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); color: #6A2B0A; text-wrap: balance; } .visit_destination_single p { font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: 400; line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); color: #6A2B0A; text-wrap: balance; } /* CSS for Local Activities */ .local_activities { display: flex; align-items: flex-start; justify-content: center; flex-wrap: nowrap; gap: 30px !important; padding-bottom: 20px; } .local_activities .local_activities_single { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .local_activities .local_activities_single:first-child { margin-left: 20px; } .local_activities .local_activities_single:last-child { margin-right: 20px; } .local_activities .local_activities_single img { height: 280px; width: 230px; border-radius: 120px; object-fit: cover; } .local_activities .local_activities_single p { font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: var(--e-global-typography-c5f1c43-font-weight); line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); color: #6A2B0A; width: 200px; text-align: center; text-wrap: balance; } /* CSS for Weather Panel */ .weather_panel { width: 100%; } .weather_panel_container { width: 100%; height: 840px; position: relative; border-radius: 10px; overflow: hidden; } .weather_panel_container .carousel-cell { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 10px; padding: 60px; display: flex; flex-direction: column; /* align-items: center; */ justify-content: space-between; } .weather_panel_container .carousel-cell h2 { font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: 500; line-height: 1.5em; letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); color: #FFF; } .weather_panel_container .carousel-cell p { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); text-wrap: balance; color: #FFF; } .weather_panel_container .carousel-cell .weather_panel_footer { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; z-index: 2; } .weather_panel_container .carousel-cell .weather_panel_header { z-index: 2; } .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_description { max-width: 660px; display: flex; flex-direction: column; align-items: flex-start; justify-content: start; gap: 20px; } .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_info { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px; background-color: #6A2B0A80; border-radius: 12px; mix-blend-mode: multiply; gap: 20px; } .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_info .weather_panel_footer_info_item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_info .weather_panel_footer_info_item h3 { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 800; line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); color: #FFF; margin-block-start: 0; margin-block-end: 0; margin-top: 6px; } .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_info .weather_panel_footer_info_item h4 { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 500; line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); color: #FFF; margin-block-start: 0; margin-block-end: 0; } .divider { width: 70px; height: 1px; background-color: #FFF; opacity: .5; } .weather_panel_container .carousel-cell .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.25); z-index: 1; } .weather_panel .button-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 4; position: absolute; top: 60px; right: 60px; } .weather_panel .button-group .button { font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: 600; line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); text-transform: uppercase; text-decoration: none; color: #FFF; border: none; background-color: transparent; border-radius: 15px; cursor: pointer; transition: background-color .3s ease, color .3s ease; width: 62px; height: 35px; display: flex; align-items: center; justify-content: center; } .weather_panel .button-group .button.active, .weather_panel .button-group .button:hover { background-color: #FFF; color: #6A2B0A; } .weather_panel_container .flickity-prev-next-button { top: 50%; width: 50%; height: 100%; border-radius: 0; transform: translateY(-50%); cursor: none !important; background-color: transparent; z-index: 3; } .weather_panel_container .flickity-prev-next-button:hover { background-color: transparent; } .weather_panel_container .flickity-prev-next-button.next { right: 0; } .weather_panel_container .flickity-prev-next-button.previous { left: 0; } .weather_panel_container svg.flickity-button-icon { /* display: none; */ opacity: 0; } /* CSS for Good to Know Section - Archive - Locations */ .good_to_know_content { display: flex; flex-direction: column; gap: 50px; } .good_to_know_cards_wrapper { border: 2px solid #FFF; padding: 12px; background-color: #FAF4EF; } .good_to_know_cards { background-color: #FFF; padding: 30px; display: flex; align-items: center; justify-content: space-between; gap: 60px; position: relative; } .good_to_know_cards_wrapper:nth-child(odd) .good_to_know_cards { flex-direction: row; padding-right: 60px; } .good_to_know_cards_wrapper:nth-child(even) .good_to_know_cards { flex-direction: row-reverse; padding-left: 60px; } .good_to_know_cards .stamp-icon { position: absolute; top: -50px; max-width: 108px; aspect-ratio: 1; } .good_to_know_cards_wrapper:nth-child(odd) .good_to_know_cards .stamp-icon { right: 60px; } .good_to_know_cards_wrapper:nth-child(even) .good_to_know_cards .stamp-icon { left: 60px; } .good_to_know_cards img:not(.stamp-icon) { width: 430px; height: 430px; aspect-ratio: 1; object-fit: cover; } .good_to_know_cards_content { width: 100%; } .good_to_know_cards_content h3 { color: #712A05; font-family: var(--e-global-typography-a2c139c-font-family), Sans-serif; font-size: 24px; font-weight: var(--e-global-typography-a2c139c-font-weight); line-height: var(--e-global-typography-a2c139c-line-height); letter-spacing: var(--e-global-typography-a2c139c-letter-spacing); } .good_to_know_cards_content p { color: #6A2B0A; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); text-wrap: balance; } .gallery_wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 220px; row-gap: 14px; column-gap: 14px; } .gallery_wrapper img { object-fit: cover; min-height: 220px; max-height: 220px; width: 100%; } /* CSS for Planning Section */ .planning_section_content { color: #FAF4EF; font-family: var(--e-global-typography-secondary-font-family), Sans-serif; font-size: var(--e-global-typography-secondary-font-size); font-weight: var(--e-global-typography-secondary-font-weight); line-height: var(--e-global-typography-secondary-line-height); letter-spacing: var(--e-global-typography-secondary-letter-spacing); text-align: center; } .planning_section_heading { text-align: center; color: var(--e-global-color-secondary); font-family: var(--e-global-typography-secondary-font-family), Sans-serif; font-size: var(--e-global-typography-secondary-font-size); font-weight: var(--e-global-typography-secondary-font-weight); line-height: var(--e-global-typography-secondary-line-height); letter-spacing: var(--e-global-typography-secondary-letter-spacing); margin-top: 60px; } /* Experiences Single Post */ .experiences_content { width: 100%; display: flex; flex-direction: column; gap: 60px; } .experiences_content .experiences_content_grid { display: grid; grid-template-columns: 1fr 1fr; } .experiences_content .experiences_content_grid img { width: 100%; height: 740px; object-fit: cover; order: 2; } .experiences_content .experiences_content_grid .experiences_content_caption { padding: 0 80px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; order: 1; } /* Change order */ .experiences_content .experiences_content_grid:nth-child(even) img { order: 2; } .experiences_content .experiences_content_grid:nth-child(even) .experiences_content_caption { order: 1; } .experiences_content .experiences_content_grid:nth-child(odd) img { order: 1; } .experiences_content .experiences_content_grid:nth-child(odd) .experiences_content_caption { order: 2; } .experiences_content .experiences_content_grid .experiences_content_caption h2 { color: #6A2B0A; font-family: var(--e-global-typography-secondary-font-family), Sans-serif; font-size: var(--e-global-typography-secondary-font-size); font-weight: var(--e-global-typography-secondary-font-weight); line-height: var(--e-global-typography-secondary-line-height); letter-spacing: var(--e-global-typography-secondary-letter-spacing); margin-bottom: 20px; } .experiences_content .experiences_content_grid .experiences_content_caption p { color: #6A2B0A; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); } /* Single Post - Accommodation */ /* Glance Section */ .glance_section { display: flex; align-items: flex-start; justify-content: center; gap: 30px; } .glance_section .glance_section_container { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 30px; max-width: 150px; width: 150px; } .glance_section .glance_section_container h3 { color: #6A2B0A; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 500; line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); margin-block-start: 0; margin-block-end: 0; text-align: center; } .glance_section .glance_section_container img { object-fit: contain; max-width: 50px; max-height: 40px; height: 40px; width: 100%; } /* Accommodation Details */ .accommodation_details { display: flex; flex-direction: column; gap: 150px; } .accommodation_details .accommodation_details_item:nth-child(odd) { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 140px; } .accommodation_details .accommodation_details_item:nth-child(even) { width: 100%; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 140px; } .accommodation_details .accommodation_details_item .accommodation_details_item_image { width: 728px; /* width: 100%; */ height: 720px; /* height: 100%; */ background-position: center; background-repeat: no-repeat; background-size: cover; } .accommodation_details .accommodation_details_item .accommodation_details_item_content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; max-width: 480px; } .accommodation_details .accommodation_details_item .accommodation_details_item_content h2 { font-family: var(--e-global-typography-secondary-font-family), Sans-serif; font-size: var(--e-global-typography-secondary-font-size); font-weight: var(--e-global-typography-secondary-font-weight); line-height: var(--e-global-typography-secondary-line-height); letter-spacing: var(--e-global-typography-secondary-letter-spacing); color: #6A2B0A; margin-block-start: 0; margin-block-end: 0; margin-bottom: 48px; } .accommodation_details .accommodation_details_item .accommodation_details_item_content h3 { font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: var(--e-global-typography-5bb86ec-font-weight); line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); word-spacing: var(--e-global-typography-5bb86ec-word-spacing); color: #712A05; margin-block-start: 0; margin-block-end: 0; } .accommodation_details .accommodation_details_item .accommodation_details_item_content p { font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: 400; line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); word-spacing: var(--e-global-typography-c5f1c43-word-spacing); color: #712A05; } .accommodation_details .accommodation_details_item .accommodation_details_item_content span, .accommodation_details .accommodation_details_item .accommodation_details_item_content span a { font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); fill: var(--e-global-color-primary); color: var(--e-global-color-primary); background-color: transparent !important; } .accommodation_details .accommodation_details_item .accommodation_details_item_content span.default-button { padding: 12px 32px; margin-top: 20px; } /* Travel Photos Page */ /* Travel Gallery */ .travel_gallery_wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 30px; column-gap: 16px; } .travel_gallery_wrapper a { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; gap: 6px; } .travel_gallery_wrapper img { object-fit: cover; min-height: 272px; max-height: 272px; width: 100%; } .travel_gallery_wrapper span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: 12px; font-weight: var(--e-global-typography-c5f1c43-font-weight); line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); word-spacing: var(--e-global-typography-c5f1c43-word-spacing); color: #6A2B0A; } /* Pagination */ .pagination { margin: 80px 0 0 0; display: flex; align-items: center; justify-content: center; gap: 40px; } .pagination a, .pagination .current-page { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 500; line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); } .pagination a { color: #6A2B0A; } .pagination .current-page { color: #6A2B0A; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: solid 1px #DD6729; border-radius: 50%; margin-right: -15px; margin-left: -15px; } /* Sample Itineraries */ /* Stage Wrapper */ .stage_wrapper { position: relative; display: flex; gap: 60px; height: auto; width: 100%; /* margin-left: 60px; */ } /* Stage Progress */ .stage_progress_container { position: relative; width: 3px; background: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/07/Path-7103.svg'); background-position: center; background-repeat: repeat-x; background-size: cover; margin-right: 60px; /* margin-top: 60px; */ } .stage_progress { /* width: 100%; */ height: 0; background-color: #A53900; border: 1px dotted #A53900; border-radius: 50px; } /* Progress Icons */ /* Location Icon */ .stage_header_icon { background-color: #FAF4EF; height: 100px; width: 40px; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: -141px; } /* Experiences Icon */ .stage_experiences_icon { background-color: #FAF4EF; height: 130px; width: 140px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; position: absolute; top: 80px; left: -191px; } .stage_experiences_icon img { width: 58px; height: 46px; object-fit: contain; } .stage_experiences_icon span { color: #6A2B0A; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 500; line-height: 1.2em; letter-spacing: var(--e-global-typography-text-letter-spacing); text-align: center; } /* Accommodation Icon */ .stage_accommodation_icon { background-color: #FAF4EF; height: 130px; width: 140px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; position: absolute; top: 120px; left: -191px; } .stage_accommodation_icon img { width: 50px; height: 45px; object-fit: contain; } .stage_accommodation_icon span { color: #6A2B0A; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 500; line-height: 1.2em; letter-spacing: var(--e-global-typography-text-letter-spacing); text-align: center; } /* Other Properties Icon */ .stage_other_properties_icon { background-color: #FAF4EF; height: 130px; width: 140px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; position: absolute; top: 180px; left: -191px; } .stage_other_properties_icon img { width: 50px; height: 45px; object-fit: contain; } .stage_other_properties_icon span { color: #6A2B0A; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 500; line-height: 1.2em; letter-spacing: var(--e-global-typography-text-letter-spacing); text-align: center; } /* Flight Transfer Time Icon */ .stage_flight_transfer_icon { width: 157px; height: 157px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; position: absolute; top: -50px; left: -201px; border-radius: 50%; border: 2px solid transparent; line-height: 160px; transition: border-top ease 1.5s, border-right ease 1.5s .75s; transform: rotate(45deg); } .stage_flight_transfer_icon span { color: #6A2B0A; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size); font-weight: 500; line-height: 1.2em; letter-spacing: var(--e-global-typography-text-letter-spacing); text-align: center; transform: rotate(-45deg); } @keyframes rotate_airplane { 0% { transform: rotate(-45deg); } 100% { transform: rotate(135deg); } } .stage_flight_airplane { background-color: transparent; padding-bottom: 128px; position: absolute; transform: rotate(-45deg); } .stage_flight_transfer_icon.airplane-fly { border-top: 2px solid #A53900; border-right: 2px solid #A53900; border-bottom: 2px solid #FAF4EF; border-left: 2px solid #FAF4EF; } .stage_flight_airplane.fly { animation: rotate_airplane 4s forwards; } .stage_flight_airplane img { transform: rotate(270deg); } /* Stage Header Content */ .stage_section { display: flex; flex-direction: column; gap: 160px; /* max-width: calc(100vw - 240px); */ max-width: calc(100% - 123px); } .stage_section .stage_single { display: flex; flex-direction: column; gap: 60px; } .stage_section .stage_single .stage_header { display: flex; align-items: flex-end; justify-content: space-between; /* gap: 240px; */ position: relative; padding-right: 160px } .stage_section .stage_single .stage_header .stage_header_content { display: flex; flex-direction: column; gap: 0; } .stage_section .stage_single .stage_header .stage_header_content h2 { color: #6A2B0A; font-family: var(--e-global-typography-primary-font-family), Sans-serif; font-size: var(--e-global-typography-primary-font-size); font-weight: var(--e-global-typography-primary-font-weight); line-height: var(--e-global-typography-primary-line-height); letter-spacing: var(--e-global-typography-primary-letter-spacing); margin-bottom: 12px; margin-top: -12px; } .stage_section .stage_single .stage_header .stage_header_content h3 { color: #A53900; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); margin-block-start: 0; margin-block-end: 0; } .stage_section .stage_single .stage_header .stage_header_content p { color: #712A05; font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: var(--e-global-typography-5bb86ec-font-weight); line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); max-width: 700px; } .stage_section .stage_single .stage_header .stage_header_content .stage_header_content_nights { display: none; } /* Stage Header Nights */ .stage_section .stage_single .stage_header .stage_header_nights { width: 110px; height: 110px; border: 1px solid #A53900; border-radius: 50%; display: flex; align-items: center; flex-direction: column; justify-content: start; gap: 10px; position: relative; padding-top: 24px; margin-bottom: 10px; margin-right: 10px; } .stage_section .stage_single .stage_header .stage_header_nights:before { content: ''; width: 120px; height: 120px; border: 1px solid #A53900; border-radius: 50%; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); } .stage_section .stage_single .stage_header .stage_header_nights h2 { color: #712A05; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-secondary-font-size); font-weight: var(--e-global-typography-secondary-font-weight); line-height: .8em; letter-spacing: var(--e-global-typography-accent-letter-spacing); } .stage_section .stage_single .stage_header .stage_header_nights h3 { color: #6A2B0A; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); margin-block-start: 0; margin-block-end: 0; } /* Stage Slider */ .stage_section .stage_single .stage_slider { width: 100%; height: 740px; } .stage_slider.flickity-enabled.is-draggable .flickity-viewport { margin-right: -160px; } .stage_section .stage_single .stage_slider .carousel-cell { height: 94%; width: 80%; background-position: center; background-repeat: no-repeat; background-size: cover; margin-right: 12px; margin-top: 20px; transition: height .5s ease, margin-top .5s ease; position: relative; } .stage_section .stage_single .stage_slider .carousel-cell.is-selected { height: 100%; margin-top: 0; } .stage_section .stage_single .stage_slider .carousel-cell .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(0, 0, 0); opacity: .25; z-index: 1; transition: opacity .3s ease; } .stage_section .stage_single .stage_slider .carousel-cell.is-selected .overlay { opacity: 0; } .stage_section .stage_single .stage_slider button.flickity-button.flickity-prev-next-button.next { background-color: transparent !important; right: 50px; } .stage_section .stage_single .stage_slider button.flickity-button.flickity-prev-next-button.next::before { content: ''; width: 18px; height: 35px; background-image: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/07/Group-7459.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; } .stage_section .stage_single .stage_slider button.flickity-button.flickity-prev-next-button.previous { display: none !important; opacity: 0 !important; } /* .stage_section .stage_single .stage_content { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; max-width: 100%; } */ .stage_section .stage_single .stage_content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 100%; padding-right: 180px } .stage_section .stage_single .stage_content .stage_content_left { width: 100% !important; max-width: 480px; } .stage_section .stage_single .stage_content .stage_content_left p { color: #712A05; font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: var(--e-global-typography-5bb86ec-font-weight); line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); } .stage_section .stage_single .stage_content .stage_content_right { width: 100% !important; max-width: 570px; } .stage_section .stage_single .stage_content .stage_content_right p { color: #6A2B0A; font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: 400; line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); } /* Stage Divider */ .stage_section .stage_divider { width: 100%; height: 1px; background-color: #E8DFD5; margin-top: 60px; margin-bottom: 60px; max-width: 1200px; } /* Stage Experiences */ .stage_section .stage_experiences { display: flex; align-items: flex-start; justify-content: start; gap: 30px; position: relative; } .stage_section .stage_experiences .local_activities .local_activities_single img { max-height: 240px; max-width: 200px; border-radius: 100px; object-fit: cover; } .stage_section .stage_experiences .local_activities .local_activities_single h2 { color: #712A05; font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: var(--e-global-typography-5bb86ec-font-weight); line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); } /* Stage Accommodation */ .stage_section .stage_accommodation { position: relative; padding-right: 180px; } /* Stage Other Properties */ .stage_section .stage_other_properties { display: flex; flex-direction: column; gap: 20px; position: relative; padding-right: 180px; } .stage_section .stage_other_properties h2 { color: #712A05; font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: var(--e-global-typography-5bb86ec-font-weight); line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); } .stage_section .stage_other_properties h2 a { color: inherit; } /* Stage Flight Transfer */ .stage_section .stage_flight_transfer { display: flex; flex-direction: column; gap: 10px; position: relative; } .stage_section .stage_flight_transfer h2 { color: #712A05; font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: var(--e-global-typography-5bb86ec-font-weight); line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); margin-block-start: 0; margin-block-end: 0; } .stage_section .stage_flight_transfer .stage_flight_transfer_time { display: flex; align-items: center; justify-content: start; gap: 6px; } .stage_section .stage_flight_transfer .stage_flight_transfer_time h4 { color: #6A2B0A; font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: 0.75rem; font-size: clamp(0.75rem, 0.703125rem + 0.23437500000000003vw, 0.9375rem); font-weight: 600; line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); text-transform: uppercase; margin-block-start: 0; margin-block-end: 0; } .stage_section .stage_flight_transfer .stage_flight_transfer_time img { width: 18px; height: 18px; object-fit: contain; } /* Stage Accommodation */ .stage_accommodation .stage_accommodation_content { width: 100%; display: flex; align-items: flex-start; justify-content: start; gap: 32px; } .stage_accommodation .stage_accommodation_content img { width: 580px; height: 440px; object-fit: cover; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right { display: flex; align-items: flex-start; justify-content: start; flex-direction: column; gap: 30px; width: 100%; /* max-width: 540px; */ } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .stage_accommodation_content_right_header { display: flex; align-items: flex-start; justify-content: start; flex-direction: column; gap: 0; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .stage_accommodation_content_right_header h2 { color: #712A05; font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: var(--e-global-typography-5bb86ec-font-weight); line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .stage_accommodation_content_right_header h3 { color: #712A05; font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: 400; line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); opacity: .5; margin-block-start: 0; margin-block-end: 0; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .accommodation_type_rooms { width: 100%; min-height: 45px; display: flex; align-items: center; justify-content: start; gap: 48px; border-top: 1px solid #E8DFD5; border-bottom: 1px solid #E8DFD5; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .accommodation_type_rooms h3 { margin-left: 40px; color: #6A2B0A; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: 12px; /* font-size: var(--e-global-typography-accent-font-size); */ font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .accommodation_type_rooms .type, .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .accommodation_type_rooms .rooms { position: relative; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .accommodation_type_rooms .type::before { content: ''; width: 22px; height: 20px; background-image: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/07/Group-7871.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; position: absolute; top: -3px; left: -32px; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .accommodation_type_rooms .rooms::before { content: ''; width: 25px; height: 17px; background-image: url('https://ololo.wpenginepowered.com/wp-content/uploads/2024/07/Group-7786.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; position: absolute; top: -2px; left: -32px; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right .accommodation_type_rooms .rooms::after { content: ' rooms'; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right p { color: #6A2B0A; font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: 400; line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right span, .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right span a { font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); fill: var(--e-global-color-primary); color: var(--e-global-color-primary); background-color: transparent !important; } .stage_accommodation .stage_accommodation_content .stage_accommodation_content_right span.default-button { padding: 12px 24px; } /* Other Properties Slider */ .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single { max-width: calc(25% - 15px); height: 480px; margin-right: 20px; display: flex; flex-direction: column; align-items: flex-start; justify-content: start; gap: 20px; } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single .stage_other_properties_slider_single_image { height: 100%; max-height: 410px; position: relative; width: 100%; } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single .stage_other_properties_slider_single_image span { background-color: #DD6729; padding: 14px 10px; position: absolute; top: 0; right: 0; writing-mode: vertical-rl; text-orientation: mixed; text-align: center; text-wrap: nowrap; transform: rotate(180deg); font-size: 14px !important; text-transform: none !important; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); color: #FFF; } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single .stage_other_properties_slider_single_image img{ height: 100%; max-height: 410px; object-fit: cover; width: 100%; } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single .stage_other_properties_slider_single_footer { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; gap: 0; } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single .stage_other_properties_slider_single_footer h3 { color: #712A05; font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: 500; line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); opacity: .5; margin-block-start: 0; margin-block-end: 0; } /* Sample Itineraries - What's Included Section */ .what_included_wrapper { columns: 2; column-gap: 180px; } .what_included_wrapper .what_included_single { break-inside: avoid; padding-bottom: 30px; margin-bottom: 40px; border-bottom: 1px solid #E8DFD5; display: flex; flex-direction: column; gap: 18px; } .what_included_wrapper .what_included_single.last-in-column { border-bottom: none; margin-bottom: 0; padding-bottom: 20px; } .what_included_wrapper .what_included_single h2 { color: #712A05; font-family: var(--e-global-typography-5bb86ec-font-family), Sans-serif; font-size: var(--e-global-typography-5bb86ec-font-size); font-weight: var(--e-global-typography-5bb86ec-font-weight); line-height: var(--e-global-typography-5bb86ec-line-height); letter-spacing: var(--e-global-typography-5bb86ec-letter-spacing); } .what_included_wrapper .what_included_single ul { margin-block-start: 0; margin-block-end: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; } .what_included_wrapper .what_included_single ul li { color: #6A2B0A; font-family: var(--e-global-typography-c5f1c43-font-family), Sans-serif; font-size: var(--e-global-typography-c5f1c43-font-size); font-weight: 400; line-height: var(--e-global-typography-c5f1c43-line-height); letter-spacing: var(--e-global-typography-c5f1c43-letter-spacing); } /* Media Query */ @media (max-width: 1440px) { /* Menu Nav Media Query 1440px */ nav.menu-nav { padding: 20px; } /* Destinations Media Query 1440px */ .destinations-sub-menu, .safaris-sub-menu, .about-sub-menu { /* width: calc(100% - 160px); */ padding: 40px 80px; } /* Local Activities */ .local_activities { overflow-x: scroll; justify-content: start; -ms-overflow-style: none; scrollbar-width: none; } .local_activities::-webkit-scrollbar { display: none; } /* Sample Itineraries - Single Post */ .stage_section { /* max-width: calc(100vw - 120px); */ } .stage_section .stage_single { padding-right: 0; } .stage_section .stage_single .stage_header { padding-right: 40px; gap: 0; } .stage_progress_container { margin-right: 0; } .stage_header_icon { left: -81px; } .stage_slider.flickity-enabled.is-draggable .flickity-viewport { margin-right: 0; } .stage_section .stage_single .stage_slider button.flickity-button.flickity-prev-next-button.next { right: 2%; } .stage_section .stage_single .stage_content { padding-right: 40px; display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; max-width: 100%; } /* Stage Experiences */ .stage_section .stage_experiences .local_activities { gap: 0; padding-right: 0; } .stage_experiences_icon { height: 90px; width: 100px; left: -111px; } .stage_experiences_icon img { width: 48px; } /* Stage Accommodation */ .stage_section .stage_accommodation { margin-right: 40px; padding-right: 0; } .stage_accommodation .stage_accommodation_content img { width: 480px; } .stage_accommodation_icon { height: 90px; width: 100px; left: -111px; } .stage_accommodation_icon img { width: 48px; } /* Stage Other Properties */ .stage_section .stage_other_properties { margin-right: 0; padding-right: 0; } .stage_other_properties_icon { height: 90px; width: 100px; left: -111px; } .stage_other_properties_icon img { width: 48px; } /* Stage Flight Transfer */ .stage_section .stage_flight_transfer { margin-right: 40px; margin-left: 10px; } } @media (max-width: 1440px) and (min-width: 768.1px) { .stage_experiences_icon span, .stage_accommodation_icon span, .stage_other_properties_icon span, .stage_flight_transfer_icon span { font-size: 14px !important; } .stage_flight_transfer_icon { width: 110px; height: 110px; top: -30px; left: -126px; } .stage_flight_airplane { padding-bottom: 86px; } } @media (max-width: 1201px) { /* Destinations Media Query 1201px*/ .destinations-sub-menu, .safaris-sub-menu, .about-sub-menu { /* width: calc(100% - 40px); */ padding: 40px 20px; } #destinations-img, #safaris-img, #about-img { height: 406px; } .sub-menu-content { width: 200px; } .sub-menu-content-children { padding-left: 40px; height: 420px; } /* Weather Panel Media Query */ .weather_panel_container { height: 720px; } .weather_panel_container .carousel-cell { padding: 30px; } .weather_panel .button-group { top: 30px; right: 30px; } /* Local Activities Media Query 1201px */ .local_activities { gap: 40px; } /* Experiences - Single Post */ .experiences_content .experiences_content_grid img { height: 660px; } .experiences_content .experiences_content_grid .experiences_content_caption { padding: 0 20px; } /* Accommodation - Single Post - Accommodation Details */ .accommodation_details { gap: 100px; } .accommodation_details .accommodation_details_item { gap: 60px !important; } /* Sample Itineraries - Single Post */ .stage_wrapper { width: calc(100vw - 80px); } .stage_section { /* max-width: calc(100vw - 120px); */ } /* Stage Slider */ .stage_section .stage_single .stage_slider { height: 520px; } /* Stage Accommodation */ .stage_accommodation .stage_accommodation_content img { width: 400px; } /* Simple Itineraries - What's Included */ .what_included_wrapper { column-gap: 80px; } } @media (max-width: 1024px) { /* Setting for Home Header display or not */ .home-header { display: none; } .home-header-mobile { display: flex; } /* Banner for Countries Media Query */ .banner-countries .carousel-cell { height: 600px; } .banner-countries .carousel-cell span { left: 40px; } .banner-countries ol.flickity-page-dots { padding-left: 0; padding-right: 20px; bottom: 34px; text-align: end; } /* Why Visit Destination? */ .visit_destination { display: block; /* grid-template-columns: 1fr 1fr; */ columns: 2; column-gap: 40px; row-gap: 40px; } .visit_destination_single { /* break-inside: avoid; */ margin-bottom: 20px; } /* Weather Panel */ .weather_panel_container { border-radius: 0 !important; max-height: 680px; } .weather_panel .button-group { gap: 8px; left: 20px; top: 100px; overflow: scroll; padding-bottom: 10px; } .weather_panel_container .carousel-cell { padding: 0; border-radius: 0 !important; } .weather_panel_container .weather_panel_header { padding: 40px 20px; } .weather_panel_container .weather_panel_footer { flex-direction: column; gap: 30px; align-items: flex-start !important; } .weather_panel_container .weather_panel_footer .weather_panel_footer_description { padding: 0 20px; } .weather_panel_container .weather_panel_footer .weather_panel_footer_info { flex-direction: row !important; width: 100%; padding: 16px 20px; } .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_info { padding: 20px; flex-direction: row !important; gap: 20px !important; border-radius: 0 !important; } .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_info .weather_panel_footer_info_item { flex-direction: row !important; justify-content: space-between !important; gap: 16px; } .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_info .weather_panel_footer_info_item h3 { margin-top: 0; } .weather_panel_container .weather_panel_footer .weather_panel_footer_info .divider { width: 1px; height: 42px; } .weather_panel_container .flickity-prev-next-button { display: none; } /* Gallery - Archive - Location */ .gallery_wrapper { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 160px; row-gap: 6px; column-gap: 6px; } .gallery_wrapper img { min-height: 160px; max-height: 160px; } /* CSS for Planning Section */ .planning_section_content, .planning_section_heading { font-size: 24px; } /* Accommodation - Single Post - Accommodation Details */ .accommodation_details .accommodation_details_item { flex-direction: column !important; } .accommodation_details .accommodation_details_item .accommodation_details_item_image { width: 100% !important; height: 480px; } .accommodation_details .accommodation_details_item .accommodation_details_item_content { max-width: 100%; } /* Sample Itineraries */ .stage_section .stage_single .stage_header .stage_header_content { max-width: 80%; } .stage_section .stage_single .stage_slider { height: 360px; } .stage_section .stage_single .stage_slider .carousel-cell { margin-top: 10px; } .stage_section .stage_divider { margin: 20px 0; } /* Stage Other Properties */ .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single { max-width: calc(30% - 15px); } /* Travel Photos Page */ /* Travel Gallery */ .travel_gallery_wrapper { grid-template-columns: 1fr 1fr; } /* Travel Tips */ .good_to_know_cards img:not(.stamp-icon) { width: 320px; height: 320px; /* aspect-ratio: 1; object-fit: cover; */ } .good_to_know_cards_content { /* width: 100%; */ padding-bottom: 20px; } /* Banner Countries */ .banner-countries .flickity-prev-next-button { display: none; } } @media (max-width: 1023.99px) { /* Display condition for Home Header and Home Header Mobile */ .home-header { display: none; } .home-header-mobile { display: flex; } } /* Media Query 768px */ @media (max-width: 768px) { /* Good to Know - Archive - Locations */ .good_to_know_content { gap: 30px; } .good_to_know_cards_wrapper { padding: 6px; } .good_to_know_cards { gap: 0; padding: 12px; } .good_to_know_cards_content { padding: 0 18px; } .good_to_know_cards_wrapper:nth-child(odd) .good_to_know_cards { flex-direction: column; padding-right: 12px; padding-bottom: 40px; } .good_to_know_cards_wrapper:nth-child(even) .good_to_know_cards { flex-direction: column; padding-left: 12px; padding-bottom: 40px; } .good_to_know_cards .stamp-icon { max-width: 80px; top: -30px; } .good_to_know_cards_wrapper:nth-child(odd) .good_to_know_cards .stamp-icon { right: 20px; } .good_to_know_cards_wrapper:nth-child(even) .good_to_know_cards .stamp-icon { left: 20px; } .good_to_know_cards img:not(.stamp-icon) { width: 100%; height: 360px; } /* Weather Panel - Archive - Location */ .weather_panel .button-group .button { padding: 0 12px; } /* Gallery - Archive - Location */ .gallery_wrapper { grid-template-rows: 120px; } .gallery_wrapper img { min-height: 120px; max-height: 120px; } /* Planning Section */ .planning_section_heading { margin-top: 30px; } /* Experiences - Single Post */ .experiences_content .experiences_content_grid { grid-template-columns: 1fr; row-gap: 40px; } .experiences_content .experiences_content_grid img { height: 320px; } .experiences_content .experiences_content_grid .experiences_content_caption { padding: 0; } .experiences_content .experiences_content_grid:nth-child(even) img { order: 1; } .experiences_content .experiences_content_grid:nth-child(even) .experiences_content_caption { order: 2; } /* Sample Itineraries */ .stage_wrapper { position: relative; /* flex-direction: column; */ gap: 0; width: 100%; } .stage_section { max-width: 100%; } .stage_section .stage_single { gap: 0; } .stage_progress_container { /* position: absolute; */ right: -50%; top: 0; transform: translate(-50%, 0); margin-right: 0; } .stage_section .stage_single .stage_header { padding: 0 20px; flex-direction: column; } .stage_section .stage_single .stage_header .stage_header_content { padding-top: 20px; padding-bottom: 30px; background-color: #FAF4EF; max-width: 100%; align-items: center; justify-content: center; text-align: center; margin-top: 100px; position: relative; } .stage_section .stage_single .stage_header .stage_header_content h2 { margin-top: 10px; margin-bottom: 26px; } .stage_section .stage_single .stage_header .stage_header_content .stage_header_content_nights { display: flex; align-items: center; justify-content: center; width: 80px; height: 24px; color: #712A05; border: 1px solid #712A05; position: relative; margin-bottom: 20px; } .stage_section .stage_single .stage_header .stage_header_content .stage_header_content_nights::after { content: ''; width: 86px; height: 30px; border: 1px solid #712A05; position: absolute; top: -4px; left: -4px; } .stage_section .stage_single .stage_header .stage_header_content .stage_header_content_nights h3 { font-size: 12px; } .stage_section .stage_single .stage_header .stage_header_nights { display: none; } .stage_header_icon { /* left: 47%;*/ top: -100px; left: 49.8%; transform: translate(-50%, 0); } /* Stage Slider */ .stage_section .stage_single .stage_slider { padding: 40px 0 28px; background-color: #FAF4EF; height: 420px; } .stage_section .stage_single .stage_slider .carousel-cell { margin-top: 10px; } /* Stage Content */ .stage_section .stage_single .stage_content { background-color: #FAF4EF; padding: 0 20px; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; z-index: 2; padding-bottom: 30px; } /* Hide Stage Divider */ .stage_divider { display: none; } /* Stage Experiences */ .stage_section .stage_experiences { background-color: #FAF4EF; margin-top: 80px; margin-bottom: 80px; padding-top: 140px; padding-bottom: 20px; } .stage_experiences_icon { top: 20px; left: 49.8%; transform: translate(-50%, 0); } .stage_section .stage_experiences .local_activities .local_activities_single { max-width: 160px; } .stage_section .stage_experiences .local_activities .local_activities_single .experience_item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .stage_section .stage_experiences .local_activities .local_activities_single .experience_item h2 { width: 160px; text-align: center; } .stage_section .stage_experiences .local_activities .local_activities_single img { max-height: 160px; max-width: 140px; } .stage_section .stage_experiences .local_activities .local_activities_single:first-child { margin-left: 0; } /* Stage Accommodation */ .stage_section .stage_accommodation { background-color: #FAF4EF; margin: 0 0 80px 0; padding: 140px 20px 40px 20px; } .stage_accommodation_icon { top: 20px; left: 49.8%; transform: translate(-50%, 0); } .stage_section .stage_accommodation .stage_accommodation_content { flex-direction: column; align-items: center; justify-content: center; gap: 30px; } .stage_section .stage_accommodation .stage_accommodation_content img { max-width: 100%; max-height: 340px; } /* Stage Other Properties */ .stage_section .stage_other_properties { background-color: #FAF4EF; margin: 0 0 80px 0; padding: 140px 0 60px 0; } .stage_section .stage_other_properties h2 { display: none; } .stage_other_properties_icon { top: 20px; left: 49.8%; transform: translate(-50%, 0); } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single { max-width: calc(50% - 20px); margin: 0 0 0 4px !important; padding-left: 16px !important; } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single .stage_other_properties_slider_single_footer h2 { display: block !important; } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single { height: 400px; width: 100%; } .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single .stage_other_properties_slider_single_image { max-height: 320px; width: 100%; } /* Stage Flight Transfer */ .stage_section .stage_flight_transfer { background-color: #FAF4EF; margin: 0; padding: 180px 0 20px 0; align-items: center; justify-content: center; gap: 20px; } .stage_flight_transfer_icon { top: -20px; left: 49.8%; transform: translate(-50%, 0) rotate(45deg); } /* Sample Itineraries - What's included */ .what_included_wrapper { columns: 1; } .banner-countries .carousel-cell span { bottom: 30px; } .banner-countries ol.flickity-page-dots { padding-right: 0; bottom: 20px; text-align: center; } } /* Media Query 481px */ @media (max-width: 481px) { /* Position Logo */ .home-header-mobile .logo-header { left: 42%; } /* Why Visit Destination? */ .visit_destination { /* grid-template-columns: 1fr; */ columns: 1; } /* Good To Know - Archive - Location */ .good_to_know_cards img:not(.stamp-icon) { height: 290px; } /* Weather Panel - Archive - Location */ .weather_panel_container .carousel-cell .weather_panel_footer .weather_panel_footer_info .weather_panel_footer_info_item { gap: 8px !important; } /* Gallery - Archive - Location */ .gallery_wrapper { grid-template-rows: 90px; } .gallery_wrapper img { min-height: 90px; max-height: 90px; } /* Stage Other Properties */ .stage_section .stage_other_properties .stage_other_properties_slider .stage_other_properties_slider_single { max-width: calc(70% - 20px); } /* Travel Photos Page */ /* Travel Gallery */ .travel_gallery_wrapper { grid-template-columns: 1fr; } /* Single post Accommodation */ .glance_section { display: grid; grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: 40px; } .glance_section .glance_section_container { flex-direction: row; } .glance_section .glance_section_container h3 { text-align: start; line-height: 1em; } }