/*
Theme Name: OpenLev
Version: 1.5
*/
:root {

  --container-width: 1260px;
  --container-padding: 32px;
  --container-narrow: 760px;
  --grid-gap:30px;
  --grid-gap-large: 60px;
  --button-size:50px;
  --button-offset:60px;
  --button-margin: 54px;
  --section-padding:120px;
  --header-height:152px;
  --header-padding:60px;
  --menu-offset:30px;

  --font-small: 14px; 
  --font-regular: 20px;
  --font-regular-large: 24px;
  --font-large:45px;
  --font-sans-serif: 'ABCMarfa';
  --font-serif: 'ImmortelInfraG1Trial';

  --black: #000000;
  --white: #FFFFFF;
  --orange: #FC6B1D;

  --transition-fade: 0.3s ease-out opacity, 0.3s ease-out visibility;
  --transition-color: 0.3s ease-out color;
  --transition-button: 0.3s ease-out border-color, 0.3s ease-out color;
  --transition-transform: 0.3s ease-out transform;
  --transition-filter: 1s ease-out filter;
  --transition-landing: 1s ease-out opacity, 0.5s ease-out transform;
  --transition-menu: 0.5s ease-out transform;

  --swiper-scrollbar-border-radius: 0px;
  --swiper-scrollbar-size: 5px;
  --swiper-scrollbar-drag-bg-color: #FFF;
  --swiper-scrollbar-border-radius: 0;
  --swiper-scrollbar-sides-offset:0;
  --swiper-scrollbar-bg-color: transparent;
  --swiper-scrollbar-bottom: auto;
  --swiper-scrollbar-top: auto;
  --swiper-pagination-bullet-size:15px;
  --swiper-pagination-color: #FFF;

 
  

}

/* Typography */
@font-face {
	font-family: 'ImmortelInfraG1Trial'; 
	src: url('assets/fonts/205TF-Immortel-InfraG1Roman.woff2') format("woff2");
	font-weight: normal;
	font-style: normal;
  font-display: swap;
}
@font-face {
	font-family: 'ImmortelInfraG1Trial'; 
	src: url('assets/fonts/205TF-Immortel-InfraG1Italic.woff2') format("woff2");
	font-weight: normal;
	font-style: italic;
  font-display: swap;
}

@font-face {
	font-family: 'ABCMarfa'; 
	src: url('assets/fonts/ABCMarfa-Black.woff2') format("woff2");
	font-weight: normal;
	font-style: normal;
  font-display: swap;
}

/* Structure */
html, body { height: 100%; }
.container { width: 100%; max-width: var(--container-width); padding-left: var(--container-padding); padding-right: var(--container-padding); margin: auto; }
.container.narrow { max-width: var(--container-narrow); }
.container .container.narrow { padding-left: 0; padding-right: 0; }
.grid-gap-large { grid-gap: var(--grid-gap-large); }
.section-padding { padding-top:var(--section-padding); padding-bottom:var(--section-padding); }
.section-header { margin-bottom: 76px; }
.margin-bottom-small { margin-bottom: 1lh; }
.bg { top: 0; left: 0; background-image: url('assets/images/bg-01.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; position: fixed; height: 100dvh; width: 100vw; pointer-events: none; z-index: -1; }
.bg-video { top: 0; left: 0; position: fixed; height: 100dvh; width: 100vw; pointer-events: none; z-index: -1; background-size: cover; background-repeat: no-repeat; }
.bg-video video { width: 100%; height:100%; object-fit: cover;  }
.bg-video.is-image video { display: none; }

/* Typography */
body { color: var(--white); background-color: #c9ae6d; line-height: 1.214; font-size: var(--font-regular); font-family: var(--font-serif); display: flex; flex-direction: column; }
a { transition: var(--transition-fade); }
p { margin-bottom: 1.090909090909091lh; }
p:last-of-type { margin-bottom: 0; }
.sans-serif { font-family: var(--font-sans-serif); letter-spacing: 0.01em; }
.font-small { font-size: var(--font-small); }
.font-regular { font-size: var(--font-regular); }
.font-regular-large { font-size: var(--font-regular-large); }
.font-large { font-size: var(--font-large); }
.button { box-sizing: border-box; display: inline-flex; height: 30px; line-height: 27px; border-radius: 15px; font-family: var(--font-sans-serif); font-size: var(--font-small); text-transform: uppercase; border: 2px solid var(--white); padding: 0 10px; cursor: pointer; transition: var(--transition-button); }

/* Form */
input, textarea { padding:15px 0; color: var(--white); border-bottom: 1px solid var(--white); text-transform: uppercase; font-family: var(--font-sans-serif); font-size: var(--font-small); background: transparent; outline: var(--white); }
input[type="checkbox"] { border:1px solid var(--white); height: 30px; width: 30px; padding: 0; margin-right: 10px; }
input[type="checkbox"] + label { line-height: 30px; display: inline-flex; vertical-align: top; cursor: pointer; }
input[type="checkbox"]:checked { background-image:url('assets/images/icon-checkbox.svg'); background-size: 20px; background-repeat: no-repeat; background-position: center; }
textarea { padding: 15px; border:1px solid var(--white); }
input::placeholder, ::placeholder { color: var(--white); opacity: 1; }
.newsletter { margin-top:5px; }
.newsletter .response { text-align: left; padding:15px 0; }
.newsletter-submit { width: 30px; height: 30px; left: calc(100% - 30px); top:18px; }
#mc_embed_signup_scroll.is-submitted input, #mc_embed_signup_scroll.is-submitted button { display: none; }

/* Page Specific */
.page-our-story .bg  { background-image: url('assets/images/bg-02.jpg'); }
.page-events .bg { background-image: url('assets/images/bg-03.jpg'); }

/* Reveal */
.reveal { visibility: hidden; will-change: opacity, transform; transform: translateY(20%); opacity: 0; }

/* Swiper */
.swiper { user-select: none; }
.swiper-horizontal > .swiper-scrollbar { position:relative; margin-bottom: 57px; } 
.swiper-scrollbar { margin-bottom: 57px; height: 5px; }
.swiper-scrollbar:before { content:''; height: 1px; top:0; bottom: 0; position: absolute; left:0; right:0; margin:auto; background: var(--white); }
.swiper-pagination { margin-top:40px; position: static; }

/* Icons */
.icon-plus { stroke: currentColor; }

/* Header */
.header { top:0; left:0; right:0; height:var(--header-height); z-index: 3; padding:var(--header-padding) var(--container-padding); transform: translateY(-100%); will-change: transform; transition: var(--transition-transform); }
.header.is-visible { transform: translateY(0); }
.header-logo { width: 160px; height: 30px; display: block; }
.header-menu { margin-left: auto; margin-right: 134px; filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.25));}
.header-menu-item { margin-left:44px; border-color: transparent; }

/* Menu */
.menu { display: none; }

/* Landing */
.layout-landing { z-index: 1; transition: var(--transition-landing); width: 100%; height: 100%; overflow: hidden; top:0; left:0; display: none; }
.layout-landing canvas { margin: auto; width: 100vw; height: 56.25vw; top:50%; left:50%; transform: translate(-50%, -50%); position: absolute; }
.layout-landing.is-hidden { opacity: 0; pointer-events: none; transform: translateY(-25%); }
.has-landing .layout-landing { display: block; }
.has-landing .header { transition: var(--transition-fade), var(--transition-transform); }
.has-landing main { transition: var(--transition-fade); }
.is-loading .header,
.is-loading main { opacity: 0; }

/* Hero */
.layout-hero { min-height: 100dvh; z-index: 0; }
.layout-hero h1 { margin-bottom: 24px; max-width: 480px; }
.layout-hero article {  z-index: 2; filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.25)); }
.layout-hero video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.layout-hero .container { margin-left:0; margin-top:auto; z-index: 1; }
.layout-hero .button { margin-top:var(--button-margin); }
.button-unmute { width: 64px; height: 64px; top:44px; right:40px; z-index: 1; }
.button-unmute svg { position: absolute; top:0; left: 0; }
.button-unmute .icon-unmute { visibility: hidden; }
.button-unmute.is-muted .icon-unmute { visibility: visible; }
.button-unmute.is-muted .icon-mute { visibility: hidden; }

/* Text */
.layout-text h1 { margin-bottom: 24px; max-width: 480px; }
.layout-text .container { margin-left:0; margin-top:auto; margin-top: auto; }
.layout-text .button { margin-top:var(--button-margin); }
.layout-text .spacer { font-size: 40px; }
.layout-text.center .container { margin-left: auto; }
.layout-text.center h1 { max-width: none; }

/* Text & Image */
.layout-text-image { height: 100dvh; z-index: 0; overflow: hidden; }
.layout-text-image h2 { margin-bottom: 24px; }
.layout-text-image article { z-index: 1; max-width: 630px; margin-left: auto; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); }
.layout-text-image .image { left: 0; right: 0; top:-30%; bottom:0; z-index: 0; }
.layout-text-image .button { margin-right:auto; margin-top:var(--button-margin); }

/* Text & Images */
.layout-text-images h2 { margin-bottom: 18px; }
.layout-text-images .image { aspect-ratio: 540/730; }

/* Upcoming Events */
.upcoming-event { aspect-ratio: 293/391; z-index: 0; }
.upcoming-event label, .upcoming-event .button { z-index: 1; }
.upcoming-event label { top:15px; left:15px; }
.upcoming-event .button { bottom:15px; right:15px; pointer-events: none;}
.event-category span { content:''; width: 15px; height: 15px; border-radius: 50%; display: inline-flex; margin-right: 8px; }

/* Images */
.layout-images { overflow: hidden; width: 100vw; }
.layout-images .image { aspect-ratio: 410/547; }
.layout-images .button { margin-top:42px; }

/* Testimonials */
.testimonial { border: 2px solid var(--white); border-radius: 8px; padding: 24px 24px 24px 88px; }
.testimonial-person:before { content:'—'; display: block; font-size: var(--font-large); }
.layout-testimonials h3 { max-width: 500px; width: 100%; margin-left: auto; margin-right: auto; }
.testimonial-image { aspect-ratio: 1/1; border-radius: 50%; width: 48px; height: 48px; }

/* Columns */
.layout-columns h2 { margin-bottom: 0.5lh; }
.columns { border-top:1px solid var(--white); border-bottom:1px solid var(--white); padding-top: 60px; padding-bottom: 60px; }
.column h3 { margin-bottom: 30px; }

/* Biographies */
.biography-image { aspect-ratio: 1/1; width: 100%; max-width: 391px; margin: 0 auto auto auto; }

/* Follow */
.layout-follow .image { aspect-ratio: 286/381; }

/* Footer */
.footer { padding-bottom: 30px; }
.footer-menu { gap:var(--grid-gap-large); }
.footer-menu-item { padding: 15px 0; }

/* Gravity Forms */
.gfield_label, 
.gform-field-label,
.gfield_description  { color:var(--white) !important; }
.gfield_required { color:var(--white) !important; font-family: var(--font-serif) !important; font-weight: normal !important; text-transform: none !important; font-style:italic !important; }
.gform_body input, .gform_body select, .gform_body textarea { outline-color: var(--orange) !important; border:0 !important; }
.gform_button { background: transparent !important; display: block !important; border-radius: 15px !important; font-family: var(--font-sans-serif) !important; font-size: var(--font-small) !important; text-transform: uppercase !important; border: 2px solid var(--white) !important; padding: 0 15px !important; cursor: pointer !important; transition: var(--transition-button) !important; box-shadow:none !important; appearance: none !important; min-height: 30px !important; }
.gform_validation_errors { background-color: var(--white) !important; }
.gfield_consent_description { font-size:var(--font-small) !important; font-family: var(--font-serif)!important; text-transform: none !important; }
.gfield_consent_description h2 { font-size: var(--font-regular)!important; font-style: italic; margin-bottom:14px !important; }
.gfield_consent_description h3 { text-transform: uppercase; font-size: var(--font-small); font-family: var(--font-sans-serif) !important; }
.gfield_consent_description ul { margin-bottom:34px !important; }
.gfield_consent_description li { list-style-type: disc !important; list-style-position: inside !important; }

/* Hover */
@media (hover: hover) { 
  .button, .gform_button { transition: var(--transition-button); }
  .button:hover, .upcoming-event:hover .button { border: 2px solid transparent;  }
  .gform_button:hover { border: 2px solid transparent !important; }
  .menu-item:hover { font-family: var(--font-serif); font-style: italic; text-transform: none; }
  .header-menu-item:hover { border: 2px solid var(--white); }
}

/* Desktop */
@media screen and (min-width:768px) {

  /* Menu */
  .button-menu { display:none; }

  /* Text */
  .layout-text { min-height: 100dvh; }

  /* Text & Images */
  .layout-text-images .grid { grid-gap:90px; }
  .layout-text-images .swiper-scrollbar { display: none; }
  .layout-text-images .swiper-wrapper { height: auto; flex-direction: column; }
  .layout-text-images .swiper-slide:not(:last-child) { margin-bottom: 90px; }
  .layout-text-images .swiper-slide:nth-of-type(even) .image { order:2; }

  /* Testimonails */
  .testimonial-image { left:24px; top:24px; }

  /* Biographies */
  .biography:not(:last-of-type) { margin-bottom: 160px; }
  .biography.even figure { order: 2; }
  .biography.even .biography-image { margin-right: 0; }
  .biography.odd .biography-image { margin-left: 0; }

  /* Follow */
  .layout-follow h3 { margin:75px 0 48px 0; }

  /* Footer */
  .footer-newsletter { max-width: 660px; width: 100%; }
  .newsletter-inner { padding-right: 60px; }

}

/* Portrait */
@media screen and (orientation:portrait) {
  /* Background Images */
  .bg { background-image: url('assets/images/bg-01_portrait.jpg'); } 
  .page-our-story .bg { background-image: url('assets/images/bg-02_portrait.jpg'); }
  .page-events .bg { background-image: url('assets/images/bg-03_portrait.jpg'); }

}

/* Mobile */
@media screen and (max-width:768px) {

  :root {
    --body-padding:140px;
    --grid-gap-large: 30px;
    --font-regular-large: 16px;
    --font-large:24px;
    --container-padding:30px;
    --header-height:90px;
    --header-padding:30px;
    --menu-offset:15px;
    --button-margin:24px;
  }

  /* Structure */
  .m\:grid { display: grid; }
  .m\:grid-cols-1	{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .m\:grid-cols-2	{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m\:col-span-all { grid-column: 1/-1; }

  main { width:100vw; overflow-x: hidden; }
  body { padding-top:var(--body-padding); display: block; }
  body.has-hero { padding-top: 0; }
  .section-header { margin-bottom: 24px; }
  .section-padding { padding-top:0; padding-bottom: 90px; } 
  .button, .upcoming-event .button {  border: 2px solid var(--white);  }

  /* Swiper */
  .swiper { padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
  .swiper-horizontal > .swiper-scrollbar { margin-bottom: 30px; }

  /* Header */
  .header-menu { display: none; }
  .button-unmute { top: 12px; right: 60px; }
  .has-menu-open .header { transform: translateY(0) !important; }

  /* Menu */
  .menu { top:0; left:0; right:0; bottom:0; padding: 142px 30px 30px 30px; line-height: 4; transition: var(--transition-menu); z-index: 1; background-size: cover; display: block; }
  .menu-mask { background-color: rgba(79,22,13,0.5); z-index: 1; top: 0; left: 0; bottom: 0; right: 0; }
  .menu-container { z-index: 2; width: 100%; height: 100%; transition: var(--transition-fade); overflow-y: auto; position: fixed;}
  .menu-inner { transition: var(--transition-fade); transition-delay: 0.4s; }
  .menu-container[aria-hidden='true'] { opacity: 0; pointer-events: none; }
  .menu-container[aria-hidden='true'] .menu { transform: translateY(-100%); }
  .menu-container[aria-hidden='true'] .menu-inner { opacity: 0; }
  .button-menu { top:22px; right:18px; width: 44px; height:44px; z-index: 2; }
  .button-menu svg { transition: var(--transition-transform); stroke:none; }
  .button-menu.is-active svg { transform: rotate(45deg); }

  /* Hero */
  .layout-hero { margin-bottom: 55px; }
  .layout-hero .container { margin-bottom: var(--container-padding); }
  .layout-hero + .layout-text-image { margin-top:-55px; }

  /* Text */
  .layout-text { margin-bottom: 90px; }
  .layout-text .spacer { font-size: var(--font-large); }
  .layout-text br { display: none; }

  /* Text & Image */
  .layout-text-image { margin-bottom: 55px; }
  .layout-text-image .container { margin-top: 50dvh; }
  .layout-text-image h2 { margin-bottom: 16px; }

  /* Text & Images */
  .layout-text-images { width: 100vw; }
  .layout-text-images .swiper { overflow: visible; padding-left: 0; }
  .layout-text-images .swiper-scrollbar { margin-top:30px; }
  .layout-text-images article { padding: 0 0 0 30px; }

  /* Biographies */
  .layout-biographies h3 { text-wrap: balance; }
  .biography:not(:last-of-type) { margin-bottom: 55px; }

  /* Follow */
  .layout-follow h3 { margin-bottom: 24px; }
  .layout-follow .sbi_item:nth-of-type(3) { display: none !important; }

  /* Upcoming Events */
  .layout-upcoming-events { width: 100vw; }
  .layout-upcoming-events .swiper { overflow: visible; }
  .upcoming-events-scrollbar { display: none; }

  /* Columns */
  .column h5 { margin-top:10px; }

  /* Testimonials */
  .layout-testimonials { width: 100vw; }
  .layout-testimonials .swiper { overflow: visible; }
  .testimonial { padding: 24px; }
  .testimonial-image { position: relative; margin-top: 10px; }

  /* Images */
  .layout-images { padding-left:60px; padding-right:60px; }
  .layout-images .section-header { padding-left:0; padding-right:0; }
  .layout-images .images { padding-left: 0; padding-right: 0; }

  /* Biographies */
  .layout-biographies { width: 100vw; }
  .biography-text { font-size: var(--font-regular-large); }

  /* Footer */
  .footer { flex-direction: column; padding-bottom: 30px; }
  .footer-menu { margin-bottom: 52px; }
  .footer-menu-item { width: 50%; }
  .newsletter-inner { grid-gap:10px; }
  .newsletter-submit { position: static; margin-top:20px; }

  /* Instagram */
  #sb_instagram, #sbi_images { padding-bottom: 0 !important; } 
  #sbi_images { grid-gap:var(--container-padding) !important;  }
}