@font-face {
font-family: "Geometria";
src: url("FontGeometriaLigth.woff2") format("woff2"), url("FontGeometriaLigth.woff") format("woff");
font-weight: 300;
}
@font-face {
font-family: "Geometria";
src: url("FontGeometria.woff2") format("woff2"), url("FontGeometria.woff") format("woff");
font-weight: 400;
}
@font-face {
font-family: "Geometria";
src: url("FontGeometriaMedium.woff2") format("woff2"), url("FontGeometriaMedium.woff") format("woff");
font-weight: 600;
}
@font-face {
font-family: "De Valencia";
src: url("FontDeValencia.woff2") format("woff2"), url("FontDeValencia.woff") format("woff");
}
@font-face {
font-family: "Poiret";
src: url("FontACPoiret.woff2") format("woff2"), url("FontACPoiret.woff") format("woff");
}
.si {
display: inline-block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.si-facebook {
background-image: url('data:image/svg+xml;utf8,');
}
.si-x {
background-image: url('data:image/svg+xml;utf8,');
}
.si-youtube {
background-image: url('data:image/svg+xml;utf8,');
}
.si-linkedin {
background-image: url('data:image/svg+xml;utf8,');
}
.si-instagram {
background-image: url('data:image/svg+xml;utf8,');
}
/* Grayscale variants */
.si-facebook-gray {
background-image: url('data:image/svg+xml;utf8,');
}
.si-x-gray {
background-image: url('data:image/svg+xml;utf8,');
}
.si-youtube-gray {
background-image: url('data:image/svg+xml;utf8,');
}
.si-linkedin-gray {
background-image: url('data:image/svg+xml;utf8,');
}
.si-instagram-gray {
background-image: url('data:image/svg+xml;utf8,');
}
/* Hover effects - optional */
.si:hover {
opacity: 0.8;
transform: scale(1.1);
transition: all 0.3s ease;
}
/* Size variations */
.si-sm {
width: 24px;
height: 24px;
}
.si-md {
width: 40px;
height: 40px;
}
.si-lg {
width: 64px;
height: 64px;
}
html,
body {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
background-color: white;
font-family: "Geometria", sans-serif;
font-family: "neumond-dense", sans-serif;
font-family: "De Valencia", sans-serif;
font-family: "Poiret" sans-serif;
font-family: "neumond", sans-serif;
font-family: "quiverleaf-cf", sans-serif;
font-family: "amandine", sans-serif;
font-family: "Open Sans", sans-serif;
font-family: "pf-marlet-display", "Advent Pro", sans-serif;
font-family: "Advent Pro", sans-serif;
font-weight: 200;
font-style: normal;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
font-family: "pf-marlet-display", "Advent Pro", sans-serif;
}
body p {
font-family: "Geometria", sans-serif;
}
main,
html,
body {
scrollbar-color: #ffffff #292823;
scrollbar-width: thin;
}
.noise {
display: none;
position: absolute;
width: 0;
height: 0;
}
.font.Poiret {
font-family: "Poiret";
}
.font.DeValencia {
font-family: "De Valencia";
}
.font.Geometria {
font-family: "Geometria";
}
.font.AdventPro {
font-family: "Advent Pro";
}
.font.neumond-dense {
font-family: "neumond-dense";
}
.font.neumond {
font-family: "neumond";
}
.font.quiverleaf-cf {
font-family: "quiverleaf-cf";
}
.font.amandine {
font-family: "amandine";
}
.font.pf-marlet-display {
font-family: "pf-marlet-display";
}
.svg-ostria {
opacity: 0;
}
.svg-ostria .logo-ostria {
fill: rgba(255, 255, 255, 0);
stroke: #fff;
stroke-width: 0;
stroke-miterlimit: 10;
}
.svg-ostria .logo-resort {
fill: rgba(255, 255, 255, 0);
stroke: #fff;
stroke-width: 0;
stroke-miterlimit: 10;
}
.svg-ostria .logo-lines {
fill: rgba(255, 255, 255, 0);
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 0 10;
}
.svg-ostria .logo-lines-fill {
fill: rgba(0, 0, 0, 0);
}
.loaded .svg-ostria {
opacity: 1;
}
#wheel #sec .logo-rect {
fill: rgb(0, 0, 0);
}
#wheel #sec .logo-ostria {
fill: rgb(255, 255, 255);
stroke: #fff;
stroke-width: 2;
stroke-miterlimit: 10;
}
#wheel #sec .logo-resort {
fill: rgb(255, 255, 255);
stroke: #fff;
stroke-width: 1;
stroke-miterlimit: 10;
}
#wheel #sec .logo-lines {
fill: rgb(255, 255, 255);
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 0 10;
}
#wheel #sec .logo-lines-fill {
fill: rgb(0, 0, 0);
}
main {
background-color: white;
position: relative;
}
.ScrollSmoother-wrapper {
z-index: 100;
}
.hero {
position: relative;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
background-color: white;
}
.hero .video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0;
transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
transform-origin: center center;
transform: scale(0.7);
overflow: hidden;
border-radius: 20px;
perspective: 1000px;
transform-style: preserve-3d;
}
.hero .video-wrapper video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.loaded .hero .video-wrapper {
opacity: 1;
transform: scale(1);
border-radius: 0px;
}
.hero .video-wrapper .overlay {
transform-origin: center;
height: 100vh;
perspective-origin: 28% 0%;
}
.hero .video-wrapper .overlay:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 2;
transition: all 2s cubic-bezier(0.7, 0, 0.3, 1) 0.8s;
}
.bottom .index.progress .tr {
display: none;
}
.index.progress {
position: fixed;
top: 73.3%;
transform: translate(0%, -50%);
z-index: 100;
padding: 20px;
opacity: 0;
transition: opacity 0.3s ease-out;
margin: 0 auto;
width: 100%;
max-width: 100%;
mix-blend-mode: difference;
pointer-events: none;
}
.index.progress .mood-selection {
letter-spacing: 3px;
font-weight: 100;
display: flex;
font-size: 4vw;
color: white;
text-transform: uppercase;
text-shadow: -2px -1px 10px rgb(255, 255, 255);
width: 100%;
}
.index.progress .mood-selection .text {
flex: 1;
text-align: center;
font-weight: 200;
position: relative;
}
.index.progress .mood-selection .text .progress-line {
position: absolute;
bottom: -5px;
left: 0;
width: 0%;
height: 2px;
background-color: white;
}
.index.progress .mood-selection .text > div:not(.progress-line) {
filter: blur(60px);
}
.index.progress .sub-header {
font-size: 48px;
letter-spacing: 2px;
color: white;
text-align: center;
margin-top: 20px;
font-weight: 200;
}
.index.progress.visible {
opacity: 1;
}
/* END */
.reasons {
position: relative;
overflow: hidden;
background-color: white;
}
.reasons .headers {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.reasons .header__full {
width: 100%;
color: green;
text-align: center;
font-size: 68px;
padding: 50px 0px;
text-transform: uppercase;
font-weight: 100;
}
.reasons .header__sections {
display: flex;
align-items: center;
justify-content: center;
}
.reasons .header__sections .wrapper {
flex: 1;
}
.reasons .header__sections .progress {
text-align: center;
color: black;
font-size: 38px;
padding: 20px 0px;
}
.reasons .header__sections .subheader {
font-size: 18px;
text-align: center;
width: 100%;
}
.reasons .sections {
height: 100vh;
overflow: hidden;
position: relative;
width: 400vw;
display: flex;
flex-wrap: nowrap;
}
.reasons .sections .section {
height: 100vh;
width: 100vw;
position: relative;
}
.reasons .sections .section .section__inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.reasons .sections .section.part1 {
background-color: rgb(190, 209, 207);
}
.reasons .sections .section.part2 {
background-color: red;
}
.reasons .sections .section.part3 {
background-color: gray;
}
.reasons .sections .section2 {
background-color: rgb(0, 0, 0);
height: 100vh;
clip-path: rect(0% 100% 100% 0);
}
/* END reasons */
.slides-wrapper {
height: 100vh;
display: block;
flex-wrap: nowrap;
padding: 0;
overflow: hidden;
background-color: rgba(221, 221, 221, 0.8666666667);
white-space: nowrap;
}
.slides-wrapper .slide {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: left;
display: inline-block;
margin-right: -4px;
}
.slides-wrapper .slide > div {
position: relative;
}
.slides-wrapper .slide .first {
background-image: url("../Spa/spa2.jpg");
width: 100%;
height: 100vh;
background-position: center;
}
.slides-wrapper .slide .second {
width: 100%;
height: 100vh;
}
.slides-wrapper .slide .second .content {
position: absolute;
right: 0px;
top: 0;
bottom: 0;
width: 33.333%;
background-color: black;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background-color: #0e151f;
color: #d1a683;
white-space: normal;
flex-direction: column;
}
.slides-wrapper .slide .second .content a {
color: #d1a683;
border: 1px solid #d1a683;
padding: 15px 15px;
border-radius: 6px;
}
.slides-wrapper .slide .second .content .inner-text {
padding: 100px;
text-align: center;
font-size: 24px;
}
.slides-wrapper .slide .third {
width: 100%;
height: 100vh;
}
.slides-wrapper .slide .forth {
background-image: url("../Spa/spa4.jpg");
width: 100%;
height: 100vh;
background-size: cover;
position: relative;
}
.slides-wrapper .slide .forth video {
height: 100vh;
}
.slides-wrapper .slide .forth a {
width: 100%;
height: 100%;
display: block;
}
.slides-wrapper .slide .forth svg {
padding: 8vw;
}
.slides-wrapper .slide .forth svg .tree {
fill: rgba(255, 255, 255, 0);
stroke: #fff;
}
.slides-wrapper .slide .forth svg .tree-1 {
fill: rgba(255, 255, 255, 0);
stroke: #fff;
}
.slides-wrapper .slide .forth svg * {
fill: rgb(255, 255, 255);
stroke: #fff;
}
.slides-wrapper .slide .parallax {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
-o-object-fit: cover;
object-fit: cover;
transform: translateX(-40%);
}
.slides-wrapper .slide #slide3-img {
transform: translateX(0%);
transform: scale(1.1);
}
.tranquil-anim-wrapper {
overflow: hidden;
height: 100vh;
position: relative;
z-index: 10;
will-change: transform;
}
.tranquil-anim-wrapper .tranquil {
z-index: 20;
position: relative;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
padding-top: 80px;
will-change: transform;
}
.tranquil-anim-wrapper .tranquil .sub-title {
font-size: 48px;
margin-top: 150px;
margin-bottom: 20px;
font-family: "De Valencia", sans-serif;
}
.tranquil-anim-wrapper .tranquil img {
border-radius: 25px;
}
.tranquil-anim-wrapper .tranquil .tagline {
padding-left: 80px;
}
.tranquil-anim-wrapper .tranquil .tagline img {
max-width: 80%;
margin-top: 20px;
}
.tranquil-anim-wrapper .tranquil .content {
display: flex;
flex-direction: column;
padding-right: 80px;
}
.tranquil-anim-wrapper .tranquil .content .title {
font-family: "Geometria", sans-serif;
}
.tranquil-anim-wrapper .tranquil .content .title > div {
display: inline-block;
font-size: 48px;
}
.tranquil-anim-wrapper .tranquil .content .paragraph {
margin-top: 80px;
font-size: 32px;
font-family: "Geometria";
line-height: 45px;
}
.rooms {
background-color: #8b8575;
}
.rooms h2,
.rooms h3 {
text-align: center;
color: white;
margin: 0px 0px;
}
.rooms h2 {
margin-top: 20px;
}
.rooms h3 {
margin-top: 10px;
margin-bottom: 40px;
font-size: 32px;
font-weight: 100;
}
.rooms .video {
position: sticky;
top: 100px;
text-align: center;
height: 100vh;
}
.rooms .video video {
max-height: calc(100vh - 120px);
border-radius: 25px;
}
.rooms .images {
padding-left: 0px;
position: relative;
position: relative;
margin-bottom: 120px;
}
.rooms .images img {
border-radius: 25px;
margin-bottom: 0px;
display: block;
position: relative;
z-index: 1;
}
.rooms .images .parallax {
position: relative;
z-index: 10;
}
.rooms .images p {
margin: 60px 80px;
color: white;
font-size: 38px;
}
.reveal {
overflow: hidden;
}
.reveal .revealY,
.reveal .revealX {
opacity: 0;
transition: opacity 200ms ease-in 0s, transform 200ms ease-in 0s;
}
.reveal .revealY {
transform: translateY(100%) scale(0.9);
}
.reveal .revealX {
transform: translateX(-50%) scale(0.9);
}
.visible .reveal .revealY, .reveal.visible .revealY {
transform: translateY(0%) scale(1);
}
.visible .reveal .revealX, .reveal.visible .revealX {
transform: translateX(0%) scale(1);
}
.visible .reveal .revealY,
.visible .reveal .revealX, .reveal.visible .revealY,
.reveal.visible .revealX {
opacity: 1;
transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1), transform 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.visible .reveal .revealY.delay100,
.visible .reveal .revealX.delay100, .reveal.visible .revealY.delay100,
.reveal.visible .revealX.delay100 {
transition-delay: 100ms;
}
.visible .reveal .revealY.delay400,
.visible .reveal .revealX.delay400, .reveal.visible .revealY.delay400,
.reveal.visible .revealX.delay400 {
transition-delay: 400ms;
}
.visible .reveal .revealY.delay600,
.visible .reveal .revealX.delay600, .reveal.visible .revealY.delay600,
.reveal.visible .revealX.delay600 {
transition-delay: 600ms;
}
.visible .reveal .revealY.delay800,
.visible .reveal .revealX.delay800, .reveal.visible .revealY.delay800,
.reveal.visible .revealX.delay800 {
transition-delay: 800ms;
}
.visible .reveal .revealY.delay1s,
.visible .reveal .revealX.delay1s, .reveal.visible .revealY.delay1s,
.reveal.visible .revealX.delay1s {
transition-delay: 1000ms;
}
.abs-vertical-align {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
mix-blend-mode: overlay;
}
.cursor {
display: none;
}
@media (any-pointer: fine) {
.cursor {
position: fixed;
top: 0;
left: 0;
display: block;
pointer-events: none;
z-index: 1001;
}
.cursor__inner {
fill: var(--cursor-fill);
stroke: var(--cursor-stroke);
stroke-width: var(--cursor-stroke-width);
opacity: 0.7;
}
.no-js .cursor {
display: none;
}
}
.hover-reveal {
position: fixed;
z-index: 999;
width: 350px;
height: 250px;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
will-change: transform, filter, opacity;
}
.hover-reveal .hover-reveal__inner {
border-radius: 10%;
overflow: hidden;
will-change: transform, opacity;
}
.hover-reveal .hover-reveal__inner,
.hover-reveal .hover-reveal__img {
width: 100%;
height: 100%;
position: relative;
}
.hover-reveal .hover-reveal__img {
background-size: cover;
background-position: 50% 50%;
will-change: transform;
}
@media screen and (min-width: 53em) {
.menu__item-text .word {
padding: 0 3vw;
}
}
@media (any-pointer: fine) {
.cursor {
position: fixed;
top: 0;
left: 0;
display: block;
pointer-events: none;
z-index: 1001;
}
.cursor__inner {
fill: var(--cursor-fill);
stroke: var(--cursor-stroke);
stroke-width: var(--cursor-stroke-width);
opacity: 0.7;
}
.no-js .cursor {
display: none;
}
}
.experiances {
position: relative;
background-color: white;
}
.experiances .album {
position: relative;
--tiles-height: 52vw;
height: var(--tiles-height);
overflow: hidden;
z-index: 1;
}
.experiances .album .wrapper {
width: 150%;
position: absolute;
left: 50%;
top: 50%;
--tileswrap-height: calc(var(--tiles-height) * 1.8);
height: 93.6vw;
transform: translate3d(-50%, -50%, 0) rotate(22.5deg);
}
.experiances .album .wrapper .line {
display: flex;
}
.experiances .album .wrapper .line .img {
flex: none;
--tile-margin: 0.5vw;
margin: var(--tile-margin);
width: calc(16.6666% - var(--tile-margin) * 2);
height: calc(var(--tileswrap-height) / 5 - 4 * var(--tile-margin) / 2);
overflow: hidden;
}
.experiances .album .wrapper .line .img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.pin-spacer-marque {
mix-blend-mode: overlay;
}
.marque {
position: absolute;
top: 0px;
left: 0px;
color: white;
transform: translateX(-50%);
font-size: 150px;
font-weight: 900;
width: 100%;
text-align: center;
text-wrap: nowrap;
z-index: 999;
line-height: 109px;
}
.folder-slide {
height: 1000vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
background-color: #f3eee9;
}
.folder-slide .cabinet {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: calc(100vh + 100px);
margin: 0;
padding: 0;
}
.folder-slide .cabinet .folder {
--spacing: 8rem;
top: var(--spacing);
position: absolute;
width: 90vw;
height: calc(100vh - 400px);
margin-top: 25px;
border-radius: 30px;
background-color: #f7f2ee;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-bottom: 20px;
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
overflow: hidden;
transform: translateY(100vh);
opacity: 1;
-webkit-backdrop-filter: blur(6px) url(#glass-blur);
backdrop-filter: blur(6px) url(#glass-blur);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
background-color: rgba(0, 0, 0, 0.2);
color: white;
}
.folder-slide .cabinet .folder .cell {
height: 100%;
width: 50%;
}
.folder-slide .cabinet .folder .cell h2 {
margin: 0;
padding: 0;
margin-top: 20px;
margin-bottom: 50px;
margin-right: 20px;
font-family: "De Valencia";
color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 38px;
}
.folder-slide .cabinet .folder .cell p {
font-size: 24px;
margin-left: 5px;
margin-right: 20px;
}
.folder-slide .cabinet .folder .cell a {
display: inline-block;
color: white;
}
.folder-slide .cabinet .folder .cell img {
width: 100%;
padding-right: 20px;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.folder-slide .cabinet .folder:nth-child(1) {
top: calc(4rem * 1);
}
.folder-slide .cabinet .folder:nth-child(2) {
top: calc(4rem * 2);
}
.folder-slide .cabinet .folder:nth-child(3) {
top: calc(4rem * 3);
}
.folder-slide .cabinet .folder:nth-child(4) {
top: calc(4rem * 4);
}
.folder-slide .cabinet .folder:nth-child(5) {
top: calc(4rem * 5);
}
.folder-slide .cabinet .folder:nth-child(6) {
top: calc(4rem * 6);
}
.folder-slide .cabinet .folder:nth-child(7) {
top: calc(4rem * 7);
}
.folder-slide .cabinet .folder:nth-child(8) {
top: calc(4rem * 8);
}
.folder-slide .cabinet .folder:nth-child(9) {
top: calc(4rem * 9);
}
.folder-slide .cabinet .folder:nth-child(10) {
top: calc(4rem * 10);
}
.folder-slide .img-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.folder-slide .img-placeholder video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 25px;
}
.folder-slide .img-placeholder .overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0);
opacity: 1;
z-index: 0;
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
}
.folder-slide .img-placeholder img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
z-index: 1;
filter: grayscale(0);
}
.folder-slide .img-placeholder .heading {
position: absolute;
top: 30%;
left: 0;
right: 0;
transform: translateY(-50%);
color: white;
font-size: 88px;
z-index: 2;
font-size: 18px;
text-align: center;
mix-blend-mode: color-dodge;
}
.folder-slide .img-placeholder .heading .bg {
position: absolute;
inset: 0;
background-color: black;
z-index: -1;
border-radius: 25px;
}
.folder-slide .img-placeholder .heading h2 {
font-size: 58px;
font-weight: 400;
font-family: "De Valencia";
}
.folder-slide .img-placeholder .heading p {
font-size: 38px;
display: block;
}
.folder-slide .img-placeholder .heading .content {
display: inline-block;
width: 50vw;
position: relative;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 250px;
transform: translateX(-50%) translateY(-50%);
z-index: 100;
border-radius: 25px;
background-color: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 28px;
z-index: 9999999;
will-change: transform;
}
.circle div {
text-align: center;
color: #656675;
position: absolute;
opacity: 0;
background-color: #f3f4f6;
width: 100%;
transform: translateY(-50%);
transition: all 0.4s ease-out;
}
.circle div.visible {
opacity: 1;
transform: translateY(0%);
}
.festive {
background-color: white;
position: relative;
}
.scroll-inline {
position: relative;
height: 100vh;
display: flex;
z-index: 2;
}
.scroll-inline img {
height: 100vh;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
position: relative;
}
.scroll-inline .flex.panel {
position: relative;
width: 50%;
height: 100vh;
}
.scroll-inline .flex.panel .col {
position: absolute;
inset: 0;
}
.scroll-inline .flex.panel .col .img-wrapper {
overflow: hidden;
}
.scroll-inline .flex.panel .col.text {
height: 100vh;
padding: 10vh 8vw;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.1s ease-out;
color: rgba(0, 0, 0, 0.6);
visibility: hidden;
}
.scroll-inline .flex.panel .col.text.visible {
opacity: 1;
visibility: visible;
}
.scroll-inline .flex.panel .col.text.visible .text-wrapper > * {
transform: translateY(0%);
opacity: 1;
transition: all 0.8s ease-out 0.3s;
}
.scroll-inline .flex.panel .col.text .text-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
.scroll-inline .flex.panel .col.text .text-wrapper > * {
transform: translateY(30%);
opacity: 0;
transition: all 0.1s ease-in 0.1s;
}
.scroll-inline .flex.panel .col.text .text-wrapper h2 {
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.scroll-inline .flex.panel .col.text .text-wrapper h3 {
font-size: 32px;
font-family: "pf-marlet-display";
}
.scroll-inline .flex.panel .col.text .text-wrapper p {
text-align: center;
font-size: 20px;
line-height: 24px;
}
.scroll-inline .flex.panel .col.text .text-wrapper .heading {
text-align: center;
}
.scroll-inline .flex.panel h2,
.scroll-inline .flex.panel h3 {
font-family: "pf-marlet-display";
text-align: center;
}
.calendar {
background-color: #f2efe9;
position: relative;
padding-top: 50px;
padding-bottom: 100px;
z-index: 1;
overflow: hidden;
}
.calendar .swiper {
width: 100%;
}
.calendar h2 {
padding: 0;
margin: 0;
margin-bottom: 60px;
font-size: 134px;
color: #474747;
}
.calendar .wrapper {
position: relative;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 25px;
overflow: hidden;
margin-bottom: 20px;
background-color: #dfd7c9;
color: #181818;
}
.calendar .wrapper .banner {
position: relative;
}
.calendar .wrapper .sticker {
position: absolute;
top: 20px;
color: white;
font-weight: 400;
font-size: 24px;
}
.calendar .wrapper .sticker .label {
margin-bottom: 5px;
padding: 5px 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.calendar .wrapper .img {
position: relative;
overflow: hidden;
display: block;
}
.calendar .wrapper .img img {
aspect-ratio: 16/12;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.calendar .wrapper .text {
padding: 10px 15px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.calendar .wrapper .text.glass {
background-color: rgba(223, 215, 201, 0.6);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(16px);
color: #474747;
border: 0;
}
.calendar .wrapper .text h3 {
margin: 0;
padding: 0;
padding-bottom: 5px;
font-size: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.calendar .wrapper .text p {
margin: 0;
padding: 5px 0px 10px 3px;
font-size: 18px;
line-height: 25px;
font-weight: 400;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
.calendar .wrapper .text .links {
display: flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
}
.calendar .wrapper .text .links a,
.calendar .wrapper .text .links .href {
width: 100%;
display: block;
padding: 15px;
text-align: center;
border: 1px solid rgb(211, 212, 220);
margin: 0px 5px;
border-radius: 25px;
background-color: #e8e3d9;
color: #181818;
font-weight: 400;
transition: background-color 0.3s ease-out;
}
.calendar .wrapper .text .links a:hover,
.calendar .wrapper .text .links .href:hover {
background-color: #f2efe9;
}
.events {
position: relative;
}
.events .img-placeholder {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.events .img-placeholder .imgs {
transform: perspective(1000px) rotate3d(1, 1, 0, 10deg);
transform-style: preserve-3d;
perspective: 900px;
width: 80vw;
height: 80vh;
position: relative;
}
.events .img-placeholder .imgs:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.events .img-placeholder .imgs img {
position: absolute;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 100%;
height: 100%;
z-index: 0;
}
.events .img-placeholder .imgs img.second {
transition: all 0.8s ease-out;
clip: rect(0px 100% 100% 0px);
clip-path: inset(0% 100% 0% 0%);
}
.events .img-placeholder .imgs img.second.active {
clip-path: inset(0% 0% 0% 0%);
}
.events .img-placeholder .event-header {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 180px;
font-weight: 900;
color: white;
opacity: 0.9;
white-space: nowrap;
}
.events .events-list {
max-width: 600px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.events .events-list .event {
margin-top: 200px;
border-radius: 10px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.3);
}
.events .events-list .event .cell {
text-align: center;
background-color: white;
padding: 220px 80px;
border-radius: 10px;
}
.events .events-list .event .cell h2 {
font-size: 32px;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.events .events-list .event:last-child {
margin-bottom: 100vh;
}
.rainbow {
color: pink !important;
font-weight: 800;
font-size: 20px;
}
.rainbow span {
color: pink !important;
font-weight: 800;
font-size: 20px;
display: inline-block;
letter-spacing: 2px;
}
#transitionHelper {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
background-color: black;
display: none;
opacity: 1;
}
.btn {
background-color: transparent;
color: white;
border: 1px solid white;
padding: 15px 15px;
border-radius: 6px;
}
.btn.menu__item {
color: white;
}
/* Lenis CSS */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}/*# sourceMappingURL=style.css.map */