:root {--boradius:1rem;}

html {background-color: var(--custom9) !important;}
body {background: url('bg-tile.png') 50% 50% / 20rem repeat scroll transparent !important;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 300;}
h1 {line-height:1;}
h2 {line-height:1.2;}
h3 {line-height:1.3;}
h4 {line-height: 1.4;}
h5 {line-height: 1.5; font-size: 1.2rem;}
h6 {line-height: 1.5;}

.cover .top:before {background-image: url("cover-seal.png");}

.border {border-color:var(--primary) !important; border-radius: var(--boradius);}
[class*='frame-'] {position: relative; overflow: unset;}
[class*='frame-']:before, .frame-top-bottom:before {-webkit-mask-image: url('png-frame.png'); mask-image: url('png-frame.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--primary); content:""; display: block; width:10rem; height: 4rem; top: -3rem; position: absolute; left: 50%; transform: translateX(-50%);}
.frame-bottom:before, .frame-bottom-top:before {top: auto; bottom: -3rem; transform: translateX(-50%) scale(-1);}
.bg-primary [class*='frame-']:before {background-color: var(--light);}

.spring {position: relative; overflow: unset; margin-top:2rem;}
.spring:before {background: url('png-spring.png') 50% 50% / contain no-repeat scroll transparent; content:""; display: block; width:calc(100% - 30px); height: 40px; top: -20px; position: absolute; left: 50%; transform: translateX(-50%);}
.countdown [class*='c-'], .block-header.date span {border-color: var(--primary);}
.countdown [class*='c-']:before {background-image: url('png-spring1.png') !important;}

:root {--divh:10rem;}
.divider-top, .divider-bottom {-webkit-mask-size: cover; -webkit-mask-repeat: repeat-y;}
.divider-top {z-index: 1; margin-top: calc(-1 * var(--divh)); padding-top:calc(0rem + var(--divh)) !important; -webkit-mask-image: url('divider-top.svg'); -webkit-mask-position: center top !important;}
.divider-bottom {z-index: 2; padding-bottom:calc(0rem + var(--divh)) !important; -webkit-mask-image: url('divider-bottom.svg'); -webkit-mask-position: center bottom !important;}
.divider-bottom + div {margin-top: calc(-1 * var(--divh)); z-index: 1; padding-top: calc(var(--divh) / 2);}

.sticky-top {position: sticky; position: -webkit-sticky; top: 0; height: 100svh !important;}
.sticky-bottom {position: sticky; position: -webkit-sticky; bottom: 0;}

:root {}
.hero {min-height: 300svh; position: unset; overflow-y: unset; overflow-x: clip;}
.hero > .block-section-container {}
.hero .hero-icon {filter:saturate(0) brightness(20) invert(1); width: 40vw; position: absolute; overflow: unset; left: 50%; transform: translate(-50%, -50%); top: 50%; z-index: -1;}

.hero > img {transform: scale(-1); position: sticky; inset: 0; z-index: 1; height: 50vh; object-position: top;}
.hero .hero-cover {
  margin-top: -50vh;
  display: grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  grid-template-columns: 0.5fr 1fr 2fr 2fr 1.5fr 0.5fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 2fr 0.5fr 0.7fr 0.3fr;
  gap: 1em;
  grid-template-areas:
    ". . . . . g2 g2"
    ". . g1 g1 g1 g2 g2"
    "g6 g6 g1 g1 g1 . ."
    "g6 g6 g1 g1 g1 . ."
    ". . g1 g1 g1 . g3"
    ". . g1 g1 g1 . ."
    ". g5 g5 . g4 g4 ."
    ". g5 g5 . . . .";
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100svh;
  transition: var(--translowest);
  transform-origin: center center;
  transform: scale(2);
  img, video {object-fit: cover; height: 100%; width: 100%;}
  > [class*='g'] {overflow: hidden; height: 100%; width: 100%; transition: var(--trans);}
  > [class*='g']:not(.g1) {}
  .g1 { grid-area: g1; width: 60svw; height: 60svh; margin-top: 1em !important; filter:brightness(0.7);}
  .g2 { grid-area: g2; }
  .g3 { grid-area: g3; }
  .g4 { grid-area: g4; }
  .g5 { grid-area: g5; }
  .g6 { grid-area: g6; }
  > [class*='g']:not(.g1):hover {transform: scale(1.2);}
  > .g1:hover {filter: brightness(.8);}
}
.hero .hero-cover:has(> [class*='g']:not(.g1):hover) > [class*='g']:not(:hover):not(.g1) {filter: saturate(0) brightness(.8); transform: scale(.8);}
.hero:hover .hero-cover > [class*='g'] {border-radius: calc(var(--boradius) * 3);}


html.theme-2 .hue-rotate {filter: hue-rotate(283deg);}
html.theme-3 .hue-rotate {filter: hue-rotate(212deg);}
html.theme-4 .hue-rotate {filter: brightness(.6) contrast(1.5);}
html.theme-5 .hue-rotate {filter: hue-rotate(40deg);}
html.theme-6 .hue-rotate {filter: hue-rotate(100deg);}
html.theme-7 .hue-rotate {filter: saturate(0) contrast(1.5) brightness(0.5);}
html.theme-8 .hue-rotate {filter: hue-rotate(43deg) saturate(1.2) brightness(0.7);}

main > .block-section:not(.full-width-all,.full-width-all-md) > .block-section-container:has(.row:nth-child(1).d-none):has(.row:nth-child(2).d-none) {padding-block:0 !important;}

@media (max-width:767px) {

  .hero .hero-icon {top:40%; width: 80vw;}
  .hero .sticky-top {position: sticky !important; position: -webkit-sticky !important;}
  .frame-top {margin-top: 4rem;}
  .frame-top-bottom:before {top: auto; bottom: -3rem; transform: translateX(-50%) scale(-1);}
  .frame-bottom-top:before {top: -3rem; bottom: auto; transform: translateX(-50%);}

} @media (max-width:558px) {

  h1 {font-size: 3.5rem;}
  .divider-bottom + div {padding-block: calc(var(--divh) / 1) calc(var(--divh) / 1.5);}
  .divider-top {padding-block:calc(var(--divh) / 1.5) !important;}


}