@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); /* Base colors */ :root { --bs-body-color: #2F2F2F; --bs-body-color-rgb: 47, 47, 47; --bs-light: #ECECEC; --bs-light-rgb: 236, 236, 236; --ek-primary-color: #211E1B; --ek-primary-color-rgb: 33, 30, 27; --ek-primary-color-dark: #54514E; } /* Transitions */ .py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; } .pt-6 { padding-top: 6rem !important; } .pb-6 { padding-bottom: 6rem !important; } header { position: fixed; top: calc(var(--ds-popup-outer-height, 0px) + var(--wp-admin--admin-bar--height, 0px)); left: 0; width: 100%; z-index: 1050; } header .navbar { -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; transition: all 0.1s ease-out; background: rgb(0, 0, 0); box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.031372549); /* * Toggler (hamburger) */ } header .navbar .menu-item a { font-weight: 400; color: var(--bs-white); font-family: "Cormorant Garamond", serif; font-size: 1.3em; } header .navbar .menu-item a:hover { text-decoration: underline; } header .navbar .menu-item.active > a { text-decoration: underline; } header .navbar .dropdown-menu li a { font-weight: 400; color: var(--ek-primary-color); font-family: "Cormorant Garamond", serif; font-size: 1.3em; } header .navbar .dropdown-menu li a:hover { text-decoration: underline; } header .navbar .dropdown-menu li a:active { background: var(--ek-primary-color); color: var(--bs-white); } header .navbar .dropdown-menu li.active > a { text-decoration: underline; } header .navbar .navbar-toggler { border: none; background: transparent !important; padding: 1em 0 !important; } header .navbar .navbar-toggler:focus { outline: none; background: transparent !important; } header .navbar .navbar-toggler .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: var(--bs-white); transition: ease all 0.2s; } header .navbar .navbar-toggler .icon-bar + .icon-bar { margin-top: 4px; } header .navbar .navbar-toggler .icon-bar:nth-child(2) { width: 16px; } header .navbar .navbar-toggler:hover > .icon-bar:nth-child(2), header .navbar .navbar-toggler:active > .icon-bar:nth-child(2) { width: 22px; } header .navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 4px); } header .navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) { opacity: 0; } header .navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); } header .navbar.shrink { background: var(--ek-primary-color); box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.031372549); } header .navbar.transparent-navbar:not(.shrink) { background: linear-gradient(180deg, black 10%, transparent 90%); } header .navbar-sidebar { background: var(--ek-primary-color); font-size: 1.3em; } header .navbar-sidebar .close-button { color: var(--bs-white); } header .navbar-sidebar .navbar-nav .menu-item a { font-weight: 400; color: var(--bs-white); font-family: "Cormorant Garamond", serif; font-size: 1.3em; } header .navbar-sidebar .navbar-nav .menu-item a:hover { text-decoration: underline; } header .navbar-sidebar .navbar-nav .menu-item.active > a { text-decoration: underline; } header .navbar-sidebar .navbar-nav .dropdown-menu li a { font-weight: 400; color: var(--ek-primary-color); font-family: "Cormorant Garamond", serif; font-size: 1.3em; } header .navbar-sidebar .navbar-nav .dropdown-menu li a:hover { text-decoration: underline; } header .navbar-sidebar .navbar-nav .dropdown-menu li a:active { background: var(--ek-primary-color); color: var(--bs-white); } header .navbar-sidebar .navbar-nav .dropdown-menu li.active > a { text-decoration: underline; } /* Logo */ .logo { width: 100%; height: auto; max-width: 80px; } .ek-card { overflow: hidden; height: 100%; } .ek-card figure img { aspect-ratio: 2000/1333; width: 100%; height: 100%; object-fit: cover; } .ek-card .content { padding: 2rem 3rem; background: var(--bs-white); height: 100%; } .ek-card .content .title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ek-primary-color); } .galleries .gallery .gallery-card > a { display: block; } .galleries .gallery img { aspect-ratio: 2000/1333; width: 100%; height: 100%; object-fit: cover; } .galleries .gallery .gallery-overlay { position: absolute; bottom: 0; padding: 1em; color: white; background: linear-gradient(360deg, black 10%, transparent 90%); width: 100%; overflow-wrap: anywhere; } .galleries .gallery .gallery-overlay h4 { margin: 0.5rem 0 0; font-size: clamp(1.25rem, 2.5vw, 1.5rem); } .galleries .gallery .gallery-overlay a { color: var(--bs-white); text-decoration: none; } .galleries .gallery .gallery-overlay a:hover { text-decoration: underline; color: var(--bs-white); opacity: 0.8; } .gallery-detail .gallery-albums .btn { white-space: normal; text-align: left; line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; } .gallery-detail .gallery-photos a { display: block; overflow: hidden; } .gallery-detail .gallery-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } @media (max-width: 575.98px) { .galleries .gallery .gallery-overlay { position: relative; background: var(--ek-primary-color); padding: 1rem; } } /* Maps */ #the-map { width: 100%; height: 600px; } .modal-backdrop { z-index: 1049 !important; } footer ul { list-style: none; padding: 0; color: var(--bs-white); } footer ul li a { color: var(--bs-white); } footer ul li a:hover { text-decoration: underline; color: var(--bs-white); opacity: 0.8; } footer ul.menu li a { text-decoration: none; } .small { font-size: 0.8em; font-weight: 300; } .extra-small { font-size: 0.7em; } .line { display: block; width: 100px; height: 3px; background: #eee; margin: 15px 0; } .filter { background: rgba(0, 0, 0, 0.7); } a { color: var(--ek-primary-color); text-decoration: underline; } a:hover { color: var(--ek-primary-color-dark); } .color-primary { color: var(--ek-primary-color) !important; } .color-primary-dark { color: var(--ek-primary-color-dark) !important; } .bg-primary { background-color: var(--ek-primary-color) !important; } .bg-primary-dark { background-color: var(--ek-primary-color-dark) !important; } .bg-transparent { background-color: transparent !important; } a.color-primary { color: var(--ek-primary-color) !important; } a.color-primary:hover, a.color-primary:focus { color: var(--ek-primary-color-dark) !important; } a.color-primary-dark { color: var(--ek-primary-color-dark) !important; } a.color-primary-dark:hover, a.color-primary-dark:focus { color: var(--ek-primary-color) !important; } a.text-white:hover, a.text-white:focus { color: var(--ek-primary-color) !important; } a:focus, button:focus, .btn:focus { outline: none; box-shadow: unset !important; } .btn { border-radius: 0; padding: 0.6em 1.5em; font-size: 1em; font-weight: 700; text-transform: uppercase; line-height: 1; display: inline-flex !important; align-items: center; justify-content: center; } .btn-sm { font-size: 0.9em; } .btn-primary { color: var(--bs-white); background-color: var(--ek-primary-color); border-color: var(--ek-primary-color); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:first-child:active, :not(.btn-check) + .btn-primary:active { color: var(--bs-white); background-color: var(--ek-primary-color-dark); border-color: var(--ek-primary-color-dark); } .btn-primary:disabled, .btn-primary.disabled { color: var(--bs-white); background-color: var(--ek-primary-color); border-color: var(--ek-primary-color); } .btn-outline-primary { color: var(--ek-primary-color); background-color: transparent; border-color: var(--ek-primary-color); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:first-child:active, :not(.btn-check) + .btn-outline-primary:active { color: var(--bs-white); background-color: var(--ek-primary-color); border-color: var(--ek-primary-color); } .btn-outline-primary:disabled, .btn-outline-primary.disabled { color: var(--ek-primary-color); background-color: transparent; border-color: var(--ek-primary-color); } .btn-outline-white { color: var(--bs-white); background-color: transparent; border-color: var(--bs-white); } .btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active, .btn-outline-white:first-child:active, :not(.btn-check) + .btn-outline-white:active { color: var(--bs-white); background-color: var(--ek-primary-color); border-color: var(--ek-primary-color); } .btn-outline-white:disabled, .btn-outline-white.disabled { color: var(--bs-white); background-color: transparent; border-color: var(--bs-white); } /* Pagination */ nav.nav__pagination { text-align: center; } nav.nav__pagination ul { display: inline-block; white-space: nowrap; padding: 0; border-right: 0; margin: 1px; } nav.nav__pagination ul li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; } nav.nav__pagination ul li a, nav.nav__pagination ul li span { margin: 0; text-decoration: none; line-height: 1; font-size: 1em; font-weight: 400; padding: 0.5em; min-width: 1em; display: block; } nav.nav__pagination ul li a:focus, nav.nav__pagination ul li a:hover, nav.nav__pagination ul li span.current { background: var(--bs-white); color: var(--bs-body-color); } #breadcrumb-section { box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 7px; position: relative; } #breadcrumb-section .breadcrumb { background: none; font-size: 0.9em; color: var(--ek-primary-color); padding: 0; margin-bottom: 0; } #breadcrumb-section .breadcrumb .breadcrumb-item.active { color: var(--ek-primary-color); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; text-decoration: none !important; } #breadcrumb-section .breadcrumb .breadcrumb-item a { color: var(--ek-primary-color); } #breadcrumb-section .breadcrumb .breadcrumb-item a:hover, #breadcrumb-section .breadcrumb .breadcrumb-item a:focus { text-decoration: underline; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } #breadcrumb-section .ek-breadcrumb { overflow-x: auto; white-space: nowrap; } #breadcrumb-section .ek-breadcrumb::after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 100px; background: linear-gradient(to left, var(--bs-white), transparent); } #breadcrumb-section .ek-breadcrumb .breadcrumb-item { display: inline-flex !important; } @keyframes shadeAnimation { from { opacity: 0; } to { opacity: 0.5; } } @keyframes coverContentAnimation { from { opacity: 0; } to { opacity: 1; } } .sample-cover { min-height: 500px; display: flex; align-items: end; } @media (max-width: 767.98px) { .sample-cover { min-height: 300px; } } #cover { width: 100%; position: relative; overflow: hidden; height: calc(70dvh - var(--wp-admin--admin-bar--height, 0px)); min-height: 500px; display: flex; flex-direction: column; } #cover .cover { height: 100%; width: 100%; overflow: hidden; position: relative; } #cover .cover .cover-shade { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; top: 0; opacity: 0.5; } #cover .cover .cover-shade { background: linear-gradient(0deg, rgb(0, 0, 0) 30%, rgba(255, 255, 255, 0) 100%); } #cover .cover .cover-image { width: 100%; height: 100%; object-fit: cover; } #cover .cover .cover-content { height: 100%; width: 100%; min-height: 500px; position: absolute; bottom: 0; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 0; animation: coverContentAnimation 0.5s ease 0.3s forwards; } #cover .cover .cover-content .title { font-size: 4em; } @media screen and (max-width: 1024px) { #cover .cover .cover-content .title { font-size: 3em; } } #cover .cover .cover-content .description { font-size: 1.5em; } @media screen and (max-width: 1024px) { #cover .cover .cover-content .description { font-size: 1em; } } #cover-small { width: 100%; position: relative; overflow: hidden; height: 300px; min-height: 300px; display: flex; flex-direction: column; background: var(--ek-primary-color); color: var(--bs-white); } #cover-small .cover-small { height: 100%; width: 100%; display: flex; align-items: end; } .swiper.gallery-thumbs .swiper-slide { opacity: 0.4; cursor: pointer; } .swiper.gallery-thumbs .swiper-slide figure { margin: 0; background-color: var(--bs-light); } .swiper.gallery-thumbs .swiper-slide figure img { aspect-ratio: 2000/1333; width: 100%; height: 100%; object-fit: contain; } .swiper.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; } .swiper.gallery-thumbs img { max-height: 70px; object-fit: cover; } .swiper.gallery-top .swiper-slide figure { margin: 0; background-color: var(--bs-light); } .swiper.gallery-top .swiper-slide figure img { aspect-ratio: 2000/1333; width: 100%; height: 100%; object-fit: contain; } .swiper.horizontal-swiper .swiper-button-disabled { opacity: 0.3; pointer-events: none; } .swiper.horizontal-swiper .swiper-wrapper .standard-template a { transition: transform 0.3s ease; color: var(--bs-white) !important; } .swiper.horizontal-swiper .swiper-wrapper .standard-template a:hover { transform: scale(1.02); transition: transform 0.3s ease; } .swiper.horizontal-swiper .swiper-wrapper .standard-template figure { aspect-ratio: 1333/2000; border-radius: var(--ek-border-radius); overflow: hidden; transition: all 0.3s ease; margin: 0; } .swiper.horizontal-swiper .swiper-wrapper .standard-template figure img { width: 100%; height: 100%; object-fit: cover; } .swiper.horizontal-swiper .swiper-wrapper .standard-template figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--ek-primary-color-rgb), 0.8) 0%, transparent 35%); border-radius: var(--ek-border-radius); transition: all 0.3s ease; } .swiper.horizontal-swiper .swiper-wrapper .standard-template figure figcaption { position: absolute; bottom: 0; left: 0; text-transform: uppercase; color: var(--bs-white); font-weight: 600; padding: 1.5em 2em; z-index: 1; font-size: 1.3em; transition: all 0.3s ease; } .swiper.horizontal-swiper .swiper-wrapper .standard-template figure:hover { cursor: pointer; } .swiper.horizontal-swiper .swiper-wrapper .standard-template figure:hover::after { background: linear-gradient(to top, rgba(var(--ek-primary-color-rgb), 0.2) 0%, transparent 35%); transition: all 0.3s ease; } .swiper.horizontal-swiper .swiper-wrapper .standard-template figure:hover figcaption { transform: translateY(-30%); transition: all 0.3s ease; } .swiper.horizontal-swiper .swiper-slide { height: auto; } .swiper.horizontal-swiper .swiper-slide figure { transition: opacity 0.3s ease; } @media (max-width: 767px) { .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active) a, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide ~ .swiper-slide a { pointer-events: none; background: var(--bs-white); border-radius: var(--bs-border-radius); } .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active) a figure, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide ~ .swiper-slide a figure { position: relative; opacity: 0.3; transition: opacity 0.3s ease; } .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active) a figure::after, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide ~ .swiper-slide a figure::after { background-color: rgba(var(--bs-white-rgb), 0.7); } .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active) .custom-template, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide ~ .swiper-slide .custom-template { opacity: 0.3; transition: opacity 0.3s ease; } } @media (min-width: 768px) and (max-width: 991px) { .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-active ~ .swiper-slide) a, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide ~ .swiper-slide a { pointer-events: none; background: var(--bs-white); border-radius: var(--bs-border-radius); } .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-active ~ .swiper-slide) a figure, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide ~ .swiper-slide a figure { opacity: 0.3; transition: opacity 0.3s ease; } .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-active ~ .swiper-slide) .custom-template, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide ~ .swiper-slide .custom-template { opacity: 0.3; transition: opacity 0.3s ease; } } @media (min-width: 992px) { .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-active ~ .swiper-slide) a, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide ~ .swiper-slide a { pointer-events: none; background: var(--bs-white); border-radius: var(--bs-border-radius); } .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-active ~ .swiper-slide) a figure, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide ~ .swiper-slide a figure { opacity: 0.3; transition: opacity 0.3s ease; } .swiper.horizontal-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-active ~ .swiper-slide) .custom-template, .swiper.horizontal-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide ~ .swiper-slide .custom-template { opacity: 0.3; transition: opacity 0.3s ease; } } #slider { width: 100%; position: relative; overflow: hidden; height: calc(70dvh - var(--wp-admin--admin-bar--height, 0px)); min-height: 400px; display: flex; flex-direction: column; --swiper-pagination-bottom: 20px; } #slider .swiper { height: 100%; width: 100%; } #slider .swiper .swiper-pagination-bullet { width: 20px !important; height: 3px !important; border-radius: 0 !important; background-color: var(--bs-white) !important; transition: 0.2s; opacity: 1; } #slider .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 30px !important; transition: 0.2s; background-color: var(--ek-primary-color) !important; } #slider .swiper .swiper-pagination-bullet:focus { height: 7px !important; } #slider .swiper .swiper-slide { overflow: hidden; } #slider .swiper .swiper-slide.swiper-slide-active .swiper-slide-shade { opacity: 0.6; transition-delay: 0.3s; } #slider .swiper .swiper-slide.swiper-slide-active .swiper-content .overlay-content { transition-delay: 0.3s; opacity: 1; } #slider .swiper .swiper-slide .swiper-slide-shade { transition: opacity 0.6s; opacity: 0; } #slider .swiper .swiper-slide .swiper-content .overlay-content { opacity: 0; transition: 0.6s; } #slider .swiper .swiper-slide .swiper-content .overlay-content .title { font-size: 4em; } @media (max-width: 991.98px) { #slider .swiper .swiper-slide .swiper-content .overlay-content .title { font-size: 3em; } } #slider .swiper .swiper-slide .swiper-content .overlay-content .description { font-size: 1.5em; } @media (max-width: 991.98px) { #slider .swiper .swiper-slide .swiper-content .overlay-content .description { font-size: 1em; } } #slider .swiper .swiper-content, #slider .swiper .slider-content { height: 100%; } #slider .swiper .swiper-content .overlay-content, #slider .swiper .slider-content .overlay-content { width: 100%; min-height: 400px; position: absolute; bottom: 0; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; } #slider .swiper .swiper-slide-shade { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; top: 0; opacity: 1; } #slider .swiper .swiper-slide-shade { background: linear-gradient(180deg, var(--ek-primary-color), rgba(var(--ek-primary-color-rgb), 0.75)); } #slider .swiper .swiper-image, #slider .swiper .slider-image { width: 100%; height: 100%; object-fit: cover; } html { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: "Montserrat", sans-serif; font-weight: 300; overflow-x: hidden; overflow-y: auto; } h1, h2, h3, h4, h5, h6 { font-family: "Cormorant Garamond", serif; font-weight: 600; } @media (max-width: 1199.98px) { html { font-size: 0.95em; } } @media (max-width: 991.98px) { html { font-size: 0.9em; } } @media (max-width: 767.98px) { html { font-size: 0.85em; } } @media (max-width: 575.98px) { html { font-size: 0.8em; } }