/*
Theme Name: Happy Fish Project
Version: 1.2
Description: Custom theme for the Happy Fish Project
Author: Kat Clark
Author URI: https://kat-clark.dev
Text Domain:  HF

										   ,      ▐▓⌐                           
							 ,▄▄      «╫▓^▐▓▌m²<   ▓▌                           
							Γ ▓▌     Γ╒▓▌ ▓▌╓▓Γ4▀,▓▓                ,«─Ç▓▄      
						,▄▄ƒ ▓█`,.},ε ▓▓ ▓▓ ▄ ▄▓▓█▀        ,.═─^` ,▄▄▓▓▓█`      
					   Γ ▓▓ ▓▓ ▓ ▄▓▓ ▓▓ ▓▓.".▓▓.   ,.m²^ ,▄▄▄▓▓█▀▀▌▐ ▐▓`        
					  ƒ ▓▓ ▐▓ ╚ #▓▓ ▐▓▄▄▓  ▓█▀"`Γ,▄▄▄▓▓█▀▀▀▌▐▄ ▓▓,▓▀╒▓▌.        
					 ╒  , ╒▓▀,▄▄▄▓▓▓█▀▓▓.▓▓▄▓▓▓█▀▀,. ▄É╒▓`▄▓▓ ▄▓▀██ ,, {▓       
				,.  ╒`▐▓▌ ▓▌ z▀` ▄▄▄▓▓▓ ▐▓ ▄▄ ▓▓ ▄█ ▓▓ ▓.▓▓▀`╓▓▀    ▀▀╓▓▀       
		   ╒`  ▄▄ ▐▄Γ╒▓▓ ▓▓ ƒ ▓▓▀Γ,└▄ `╓▓▀▄█.▓▓Γ/▀,▓█╦  ,▄▓█▓▓▀     └ ▓▌        
		  ╙█▓ ▓▓ ╓▓▓▓▓▀▓╫▓ , ▓▓`▐▀ ▓▓Γ ▓▌╒▀,▓█Æ ,▄▓▀   `▀▀`└          ▀█         
		   ╒ ▄▓.▄▓ ▄µ ▓▌▐▄  ╓▓▀ ▀╓█▓ƒ ▓▓^╗▄▓▀/ ▓▓Γ.                             
		  ╒.╓█ ▓▓`▓▀╓▓█▌▐▓Γ╒▓▀╕,▄▄▓▓▀█▀     .▄▓▓                                
		  `╓▀ ▓▓▀ `²▀▓▄▌▐▌ ▓▓  └`└                                              
		,Γ  ,▓█ ^φ▓▓█▀ [  ▓▓                                                    
	,┘,▄▄▓▓▓█▀         │▄▓▓                                                     
	▀▀▀`.               ..                                                      
*/


@charset "utf-8";

/**
 * ----------------------------------------------------------------------------
 *    This is a variation of Normalize.css (http://necolas.github.io/normalize.css/)
 * ----------------------------------------------------------------------------
 */
 
/**
 * Base
 */
*,
*:before,
*:after {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/**
 * HTML5 display definitions
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Text-level semantic
 */
:focus,
:focus-visible,
:active {
  outline: none;
}

a {
  color: inherit;
  background-color: transparent;
  text-decoration: none;
}

a:active, a:hover {
  outline: 0;
}

b,
strong {
 font-weight: 900;
}

small {
  font-size: 80%;
}

p,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px 0;
  font-size: inherit;
  font-weight: inherit;
}

p, ul, ol {
	margin: 0 0 0.5em 0;
}

ul,
ol {
  margin: 0 0 1.2em 0;
  padding: 0 0 0 1.2em;
}

ul {
	list-style-type: disc;
}

ol {
  list-style-type: none;
  counter-reset: item;
  padding: 0;
}

li ol, 
li ul {
  margin: .6em 0;
}

ol > li {
  display: table;
  counter-increment: item;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

p:last-child,
ul:last-child,
ol:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-bottom: 0;
}

/**
 * Embedded content
 */
img {
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: top;
}

svg:not(:root) {
  overflow: hidden;
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

/**
 * Grouping content
 */

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 16px;
}

/**
 * Forms
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button,
input[type=submit] {
  padding: 0;
  overflow: visible;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
}

button,
select {
  text-transform: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
  border-radius: 0;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: none;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: inherit;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: inherit;
}

input::placeholder,
textarea::placeholder {
  color: inherit;
}

fieldset {
  border: 1px solid currentcolor;
  margin: 0 2px;
  padding: 6px 10px 12px;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

.rc-anchor-invisible { 
	display: none !important;
}

/**
 * Tables
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

/**
 * ----------------------------------------------------------------------------
 *    Grid LAYOUT
 * ----------------------------------------------------------------------------
 */

/* If multiple rows in bordered grid - use GridWrapper to hide the leftmost border */

.GridWrapper {
	overflow: hidden;
}
 
.Grid {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0 0 0 calc(var(--grid-gutter) * -1);
	width: calc(100% + var(--grid-gutter));
}

.Grid__Cell {
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
	padding: 0 0 0 var(--grid-gutter);
	margin: 0 0 calc(var(--grid-gutter) * 2) 0;
	vertical-align: top;
	position: relative;
}

.Grid__Cell--nomargin {
	margin: 0;
}

.Grid__Cell:last-child {
	margin-bottom: 0;
}

.Grid--middle {
	align-items: center;
}

.Grid--wide {
	margin: 0 0 0 calc(var(--grid-gutter) * -2);
	width: calc(100% + (var(--grid-gutter) * 2));
}

.Grid--wide > .Grid__Cell {
	padding: 0 0 0 calc(var(--grid-gutter) * 2);
	margin: 0 0 calc(var(--grid-gutter) * 2) 0;
}

.Grid--extra-wide {
	margin: var(--page-gutter) 0 0 calc(var(--page-gutter) * -1);
}

.Grid--extra-wide > .Grid__Cell {
	padding: 0 0 0 var(--page-gutter);
	margin: 0 0 var(--page-gutter) 0;
}

@media screen and (min-width: 1008px) {
	.Grid--middle .Grid__Cell {
		margin-bottom: 0;
	}
}

.Grid--reverse {
	flex-direction: row-reverse;
}

.Grid--stretch {
	align-items: stretch;
}

.Grid--nogutter {
	--grid-gutter: 0;
}

/**
 * ----------------------------------------------------------------------------
 *    Grid WIDTHS
 * ----------------------------------------------------------------------------
 */

.\31\/2, .\32\/4, .\36\/12 {
	width: 50%;
}

.\31\/3, .\34\/12 {
	width: 33.33333%;
}

.\32\/3, .\38\/12 {
	width: 66.66667%;
}

.\31\/4, .\33\/12 {
	width: 25%;
}

.\33\/4, .\39\/12 {
	width: 75%;
}

.\31\/12 {
	width: 8.33333%;
}

.\32\/12 {
	width: 16.66667%;
}

.\35\/12 {
	width: 41.66667%;
}

.\37\/12 {
	width: 58.33333%;
}

.\31\30\/12 {
	width: 83.33333%;
}

.\31\31\/12 {
	width: 91.66667%;
}

@media screen and (max-width: 640px) {
	.Button--full-phone {
		width: 100%;
	}
	
	.hidden--phone {
		display: none !important;
	}

	.\31\/2--phone, .\32\/4--phone, .\36\/12--phone {
		width: 50%;
	}
	
	.\31\/3--phone, .\34\/12--phone {
		width: 33.33333%;
	}
	
	.\32\/3--phone, .\38\/12--phone {
		width: 66.66667%;
	}
	
	.\31\/4--phone, .\33\/12--phone {
		width: 25%;
	}
	
	.\33\/4--phone, .\39\/12--phone {
		width: 75%;
	}
	
	.\31\/12--phone {
		width: 8.33333%;
	}
	
	.\32\/12--phone {
		width: 16.66667%;
	}
	
	.\35\/12--phone {
		width: 41.66667%;
	}
	
	.\37\/12--phone {
		width: 58.33333%;
	}
	
	.\31\30\/12--phone {
		width: 83.33333%;
	}
	
	.\31\31\/12--phone {
		width: 91.66667%;
	}
}

@media screen and (min-width: 641px) and (max-width: 1007px) {
	.hidden--tablet {
		display: none !important;
	}
	
	.\31\/2--tablet, .\32\/4--tablet, .\36\/12--tablet {
		width: 50%;
	}
	
	.\31\/3--tablet, .\34\/12--tablet {
		width: 33.33333%;
	}
	
	.\32\/3--tablet, .\38\/12--tablet {
		width: 66.66667%;
	}
	
	.\31\/4--tablet, .\33\/12--tablet {
		width: 25%;
	}
	
	.\33\/4--tablet, .\39\/12--tablet {
		width: 75%;
	}
	
	.\31\/12--tablet {
		width: 8.33333%;
	}
	
	.\32\/12--tablet {
		width: 16.66667%;
	}
	
	.\35\/12--tablet {
		width: 41.66667%;
	}
	
	.\37\/12--tablet {
		width: 58.33333%;
	}
	
	.\31\30\/12--tablet {
		width: 83.33333%;
	}
	
	.\31\31\/12--tablet {
		width: 91.66667%;
	}
}

@media screen and (min-width: 641px) {
  .hidden--tablet-and-up {
		display: none !important;
  }

  .\31\/2--tablet-and-up, .\32\/4--tablet-and-up, .\36\/12--tablet-and-up {
		width: 50%;
  }

  .\31\/3--tablet-and-up, .\34\/12--tablet-and-up {
		width: 33.33333%;
  }

  .\32\/3--tablet-and-up, .\38\/12--tablet-and-up {
		width: 66.66667%;
  }

  .\31\/4--tablet-and-up, .\33\/12--tablet-and-up {
		width: 25%;
  }

  .\33\/4--tablet-and-up, .\39\/12--tablet-and-up {
		width: 75%;
  }

  .\31\/12--tablet-and-up {
		width: 8.33333%;
  }

  .\32\/12--tablet-and-up {
		width: 16.66667%;
  }

  .\35\/12--tablet-and-up {
		width: 41.66667%;
  }

  .\37\/12--tablet-and-up {
		width: 58.33333%;
  }

  .\31\30\/12--tablet-and-up {
		width: 83.33333%;
  }

  .\31\31\/12--tablet-and-up {
		width: 91.66667%;
  }
}

@media screen and (max-width: 1007px) {
  .u-caps--pocket {
	  text-transform: uppercase;
  }
  
  .hidden--pocket {
		display: none !important;
  }

  .\31\/2--pocket, .\32\/4--pocket, .\36\/12--pocket {
		width: 50%;
  }

  .\31\/3--pocket, .\34\/12--pocket {
		width: 33.33333%;
  }

  .\32\/3--pocket, .\38\/12--pocket {
		width: 66.66667%;
  }

  .\31\/4--pocket, .\33\/12--pocket {
		width: 25%;
  }

  .\33\/4--pocket, .\39\/12--pocket {
		width: 75%;
  }

  .\31\/12--pocket {
		width: 8.33333%;
  }

  .\32\/12--pocket {
		width: 16.66667%;
  }

  .\35\/12--pocket {
		width: 41.66667%;
  }

  .\37\/12--pocket {
		width: 58.33333%;
  }

  .\31\30\/12--pocket {
		width: 83.33333%;
  }

  .\31\31\/12--pocket {
		width: 91.66667%;
  }
}

@media screen and (min-width: 1008px) and (max-width: 1139px) {
	.hidden--lap {
		display: none !important;
	}

  .\31\/2--lap, .\32\/4--lap, .\36\/12--lap {
		width: 50%;
  }

  .\31\/3--lap, .\34\/12--lap {
		width: 33.33333%;
  }

  .\32\/3--lap, .\38\/12--lap {
		width: 66.66667%;
  }

  .\31\/4--lap, .\33\/12--lap {
		width: 25%;
  }

  .\33\/4--lap, .\39\/12--lap {
		width: 75%;
  }

  .\31\/12--lap {
		width: 8.33333%;
  }

  .\32\/12--lap {
		width: 16.66667%;
  }

  .\35\/12--lap {
		width: 41.66667%;
  }

  .\37\/12--lap {
		width: 58.33333%;
  }

  .\31\30\/12--lap {
		width: 83.33333%;
  }

  .\31\31\/12--lap {
		width: 91.66667%;
  }
}

@media screen and (min-width: 1008px) {
	.hidden--lap-and-up {
		display: none !important;
	}
	
	.block--lap-and-up {
		display: block !important;  
	}
	
	.\31\/2--lap-and-up, .\32\/4--lap-and-up, .\36\/12--lap-and-up {
		width: 50%;
	}

	.\31\/3--lap-and-up, .\34\/12--lap-and-up {
		width: 33.33333%;
	}

	.\32\/3--lap-and-up, .\38\/12--lap-and-up {
		width: 66.66667%;
	}
	
	.\31\/4--lap-and-up, .\33\/12--lap-and-up {
		width: 25%;
	}

	.\33\/4--lap-and-up, .\39\/12--lap-and-up {
		width: 75%;
	}

	.\31\/12--lap-and-up {
		width: 8.33333%;
	}

	.\32\/12--lap-and-up {
		width: 16.66667%;
	}

	.\35\/12--lap-and-up {
		width: 41.66667%;
	}

	.\37\/12--lap-and-up {
		width: 58.33333%;
	}

	.\31\30\/12--lap-and-up {
		width: 83.33333%;
	}

	.\31\31\/12--lap-and-up {
		width: 91.66667%;
	}
}

@media screen and (min-width: 1140px) {
	.hidden--desk {
		display: none !important;
	}

	.\31\/2--desk, .\32\/4--desk, .\36\/12--desk {
		width: 50%;
	}

	.\31\/3--desk, .\34\/12--desk {
		width: 33.33333%;
	}

	.\32\/3--desk, .\38\/12--desk {
		width: 66.66667%;
	}

	.\31\/4--desk, .\33\/12--desk {
		width: 25%;
	}

	.\33\/4--desk, .\39\/12--desk {
		width: 75%;
	}

	.\31\/12--desk {
		width: 8.33333%;
	}

	.\32\/12--desk {
		width: 16.66667%;
	}

	.\35\/12--desk {
		width: 41.66667%;
	}

	.\37\/12--desk {
		width: 58.33333%;
	}

	.\31\30\/12--desk {
		width: 83.33333%;
	}

	.\31\31\/12--desk {
		width: 91.66667%;
	}
}

/* Create each media query */
@media screen and (min-width: 1500px) {
	.hidden--widescreen {
		display: none !important;
	}

	.\31\/2--widescreen, .\32\/4--widescreen, .\36\/12--widescreen {
		width: 50%;
	}

	.\31\/3--widescreen, .\34\/12--widescreen {
		width: 33.33333%;
	}
	
	.\32\/3--widescreen, .\38\/12--widescreen {
		width: 66.66667%;
	}
	
	.\31\/4--widescreen, .\33\/12--widescreen {
		width: 25%;
	}
	
	.\33\/4--widescreen, .\39\/12--widescreen {
		width: 75%;
	}
	
	.\31\/12--widescreen {
		width: 8.33333%;
	}
	
	.\32\/12--widescreen {
		width: 16.66667%;
	}
	
	.\35\/12--widescreen {
		width: 41.66667%;
	}
	
	.\37\/12--widescreen {
		width: 58.33333%;
	}
	
	.\31\30\/12--widescreen {
		width: 83.33333%;
	}
	
	.\31\31\/12--widescreen {
		width: 91.66667%;
	}
}

/**
 * ----------------------------------------------------------------------------
 *    CSS Variables
 * ----------------------------------------------------------------------------
 */

:root {
	--grid-gutter: 20px;
	--color-orange: #Fa4205;
	--color-salmon: #ffc1ac; 
	--color-dark-salmon: #FF8B64; /* not used anymore */
	--color-light-salmon: #F8D1C2;
	--color-blue: #7DCFFF;
	--color-background: #000;
	--color-foreground: #fff;
	--cubic-bezier: cubic-bezier(0.72, 0.03, 0.28, 0.97);
	--intro-delay: 4.5s;
}

@media (max-width: 980px) {
	:root { --grid-gutter: 8px; }
}

/**
 * ----------------------------------------------------------------------------
 *    Custom Cursor
 * ----------------------------------------------------------------------------
 */

/* Default: no custom cursor, normal system cursor */
.Cursor { display: none !important; }
body { cursor: auto; }

/* Enable ONLY on devices that can hover and have a fine pointer (i.e. mouse) */
@media (hover: hover) and (pointer: fine) {
  body,
  body * { cursor: none !important; }
  .Cursor { --size: 40px; position: fixed; z-index: 999999; top: calc(-1 * var(--size) / 2); left: calc(-1 * var(--size) / 2); width: var(--size); height: var(--size); border-radius: 50%; transform: translate(-50%, -50%); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; pointer-events: none; -webkit-backdrop-filter: invert(1) grayscale(1); backdrop-filter: invert(1) grayscale(1); display: block !important; opacity: 0; }
  .Cursor--dot { --size: 8px; }
}

/* Extra belt-and-braces: if the device has only coarse pointers, never show */
@media (any-pointer: coarse), (any-hover: none) {
  .Cursor { display: none !important; }
  body { cursor: auto !important; }
}

/* If JS is off, keep normal cursor */
.no-js body { cursor: auto !important; }

/**
 * ----------------------------------------------------------------------------
 *    FONTS
 * ----------------------------------------------------------------------------
 */

@font-face { 
  font-family: 'Free Fat Font';
  src: url('assets/fonts/freefatfont-regular-webfont.woff2') format('woff2'),
    url('assets/fonts/freefatfont-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/**
 * ----------------------------------------------------------------------------
 *    Basics + Mutations
 * ----------------------------------------------------------------------------
 */

body, html { font-family: "Roboto Flex", sans-serif; font-size: 25px; font-weight: 200; font-style: normal; line-height: 1.5; color: var(--color-foreground); font-optical-sizing: auto; background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712; }

a { color: #fff; transition: color var(--cubic-bezier) 0.3s; } 
a:hover { color: var(--color-blue); }

/* Click Bubble Particles */
.bubble { position: absolute; border-radius: 100%; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2), inset 0px 1px 1px 1px rgba(255, 255, 255, 1);	overflow: hidden; }
.bubble:after { content: ""; background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */ box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.3); height: 90%; left: 5%; position: absolute; width: 90%; }

/* Interactive checkboxes */
/* Backup = input.Interactive { position: absolute; top: -9999px; left: -9999px; visibility: hidden; opacity: 0; } */
/* Keep it accessible to the label toggle, but prevent scroll jumps */
input.Interactive { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Flex */
.flex, .Flex { display: flex; }
.flex--col, .Flex--col { flex-direction: column; }
.flex--items-center, .Flex--items-center { align-items: center; }
.flex--items-stretch, .Flex--items-stretch { align-items: stretch; }
.flex--items-start, .Flex--items-start { align-items: flex-start; }
.flex--items-end, .Flex--items-end { align-items: flex-end; }
.flex--justify-center, .Flex--justify-center { justify-content: center; }
.Flex--justify-between { justify-content: space-between; }
.Flex--justify-around { justify-content: space-around; }
.Flex--justify-start { justify-content: flex-start; }
.Flex--nowrap { flex-wrap: nowrap; }
.Flex--wrap { flex-wrap: wrap; }

/* Media */
.Media { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; }
.Media img,
.Media video { width: 100%; display: block; }
.Media--contain img,
.Media--contain video,
.Media--contain svg { height: 100%; object-fit: contain; margin: auto; }
.Media--cover img,
.Media--cover video { height: 100%; object-fit: cover; }
.Media--top img,
.Media--top video { object-position: top center; }
.Media figcaption { margin: 30px 36px !important; position: absolute; bottom: 0; right: 0; }
.Media--screenratio { width: calc(100vw / 5); height: calc(100vh / 5); height: calc(100svh / 5); }
.Media--play::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-style: solid; border-width: 0.8em 0 0.8em 1.44em; border-color: transparent transparent transparent #fff; }
.Media--play::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3em; height: 3em; border: 2px solid #fff; border-radius: 50%; }
.Media--parallax { position: relative; width: 140%; height: 100%; left: -20%; will-change: transform; background: white; transition: none !important; max-width: unset !important; }
.Media--panorama { position: absolute; inset: 0; overflow: hidden; }
.Media--panorama  img { height: 100%; width: auto; max-width: unset; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .Media--parallax { transition: none; }
}

/* Not Used - but it's kind of cool so let's keep it */
.Media--underwater img,
.Media--underwater video {  
	transform-origin: center center;
	animation: underwater 6s ease-in-out alternate infinite;
}

.embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; } 
.embed-container iframe,
.embed-container object,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* General Page Width */
.PageWidth { width: 100%; max-width: 900px; margin: 0 auto; }
.PageWidth--wide { width: 1100px; max-width: calc(100% - var(--grid-gutter ) * 4); }
.PageWidth--padded { padding-top: calc(var(--grid-gutter ) * 2); }

/* Headings */
.u-h0,
h1, .u-h1,
h2, .u-h2,
h3, .u-h3,
h4, .u-h4,
h5, .u-h5,
h6, .u-h6 { font-weight: 300; font-size: 50px; margin-bottom: 0.2em; line-height: 1; }

.u-h0 { font-size: 130px; }
h1, .u-h1 { font-size: 70px; }
.u-h1-2 { font-size: 42px; }
h2, .u-h2 { font-size: 30px; font-weight: 500; }
h3, .u-h3 { font-size: 25px; }
h4, .u-h4 { font-size: 15px; }
h5, .u-h5 { font-size: 15px; }
h6, .u-h6 { font-size: 15px; }

.u-h0 a,
h1 a, .u-h1 a,
h2 a, .u-h2 a,
h3 a, .u-h3 a,
h4 a, .u-h4 a,
h5 a, .u-h5 a,
h6 a, .u-h6 a { color: var(--color-blue); }

.Heading { margin: 0 !important; }
.Heading a, a .Heading { color: var(--color-blue); }

ol, ul, p { margin-bottom: 2em; }
li { padding: 0.22em 0; }
p + ul { margin-top: -2em; }

.Text { transform: translateZ(0); } /* avoids blurry text during transform */
.Text--box { padding: 20px; background: rgba(50, 50, 50, 0.96); }
.Text--rounded { border-radius: 18px;  }
.Text--narrow { width: 100%; max-width: 800px; }
.Text--centered { margin-left: auto; margin-right: auto; }
.Text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.Heading + .Text { margin-top: 2em; }

@media (max-width: 980px) {
	body, html { font-size: 16px; }
	h1, .u-h1, .u-h0 { font-size: 50px; }
	.u-h1-2 { font-size: 28px; }
	h2, .u-h2 { font-size: 20px; }
}

/* Links */
.Link { cursor: pointer; }
.Link--full { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; text-indent: -200vw; overflow: hidden; }

/* Lists */
.List { list-style-type: none; padding: 0; line-height: 1; }
.List li { list-style-type: none; }
.HorizontalList { list-style-type: none; margin-left: -12px; padding: 0; }
.HorizontalList li { display: inline-block; margin-left: 12px; padding: 0; }
.HorizontalList--nogap { margin-left: 0; padding: 0; }
.HorizontalList--nogap li { margin-left: 0; }
.HorizontalList--alignright { text-align: right; }
.HorizontalList--aligncenter{ text-align: center; }

/* Buttons */
.Button { display: block; color: currentcolor; }
.Button--square { width: 44px; height: 44px; padding: 0; display: flex; justify-content: center; align-items: center; }
.Button--close { position: absolute; top: 0; right: 0; transition: all 0.35s ease-in-out; }
.Button--hamburger { position: relative; transition: all 0.35s ease-in-out; }
.Button--transparent { border: none; background-color: transparent; outline: none; }
.Button--arrow { background: transparent no-repeat center center url('assets/images/Arrow-down.png'); background-size: 100%; }
.Button--bounce { animation: bounceDown 1.4s infinite ease-in-out; }

.Button--hamburger::before,
.Button--hamburger::after,
.Button--hamburger .patty,
.Button--close::before,
.Button--close::after { content: ''; background-color: currentcolor; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 3px; height: 70%; margin: auto; transform: rotate(90deg); transition: all 0.35s ease-in-out; }

.Button--hamburger::before { transform: translateY(-30%) rotate(90deg); }
.Button--hamburger::after { transform: translateY(30%) rotate(90deg); }

.Button--back img { width: min(100%, 7vw); }

@media (min-width: 981px) {
	.Button--hamburger::before,
	.Button--hamburger::after,
	.Button--hamburger .patty,
	.Button--close::before,
	.Button--close::after { height: 100%; }
}

.Button--close::before { transform: rotate(-45deg); }
.Button--close::after { transform: rotate(45deg); }

@keyframes bounceDown {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(8px); }
  60%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

/* Interactive Checks  */
input.Interactive:checked + .Button--hamburger .patty { opacity: 0; }
input.Interactive:checked + .Button--hamburger::before { transform: rotate(-45deg); }
input.Interactive:checked + .Button--hamburger::after { transform: rotate(45deg); }

/* Modals */
.Modal { position: fixed; width: 100vw; height: 100vh; height: 100dvh; background: rgba(0,0,0,0.2); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; visibility: hidden; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 55px 0;  transition: opacity 0.3s ease-in-out; }
.Modal__Content { background: #222; color: #fff; border-radius: 18px; border: 1px solid rgba(255,255,255,0.2); width: min(90vw, 900px); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow: auto; box-shadow: 0 30px 60px rgba(0,0,0,.25); transform: scale(.92) translateY(20px); transition: transform .35s cubic-bezier(.17,.9,.37,1.01); padding: 20px; z-index: 2; }
.Modal__Button { margin: 10px; }
.Interactive:checked + .Modal { visibility: visible; opacity: 1; pointer-events: auto; }
.Interactive:checked + .Modal .Modal__Content{ transform: scale(1) translateY(0); }
/* Lock page scroll whenever any modal-toggle checkbox is checked */
html:has(.Interactive--modal:checked),
body:has(.Interactive--modal:checked) { overflow: hidden; }

/* Prompts */
.Prompt { position: fixed; left: 0; top: 50%; z-index: 1000; background: rgba(0,0,0,0.6); padding: var(--grid-gutter); transform: translate(-100%,-50%); transition: transform 0.3s var(--cubic-bezier); }
.Prompt.active { transform: translate(0,-50%); }
body.home .Prompt { pointer-events: none; }
@media (min-width: 981px) {
	body.home .Prompt { padding-left: calc(var(--grid-gutter) * 2 + 5%); }
}

/* Utilities */
.u-caps { text-transform: uppercase; }
.u-weight-100 { font-weight: 100; }
.u-weight-300 { font-weight: 300; }
.u-weight-500 { font-weight: 500; }
.u-caption { font-weight: 600; font-size: 16px; text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0.4); 
	/* margin: 30px 36px !important;  */
}
.u-text-right { text-align: right; }
.u-text-center { text-align: center; }
.u-italics { font-style: italic; }
.u-overflow-hidden { overflow: hidden; }
.u-screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; word-break: normal; }
.u-screen-reader-text:focus { background-color: var(--color-background); border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: var(--color-orange); display: block; font-size: 14px; height: auto; right: 5px; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
.u-fullscreen { /* height: calc(var(--vh, 1vh) * 100); */ height: 100vh; height: 100dvh; width: 100vw; margin: 0 !important; }
.u-centerscreen { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.u-hide-scroller { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
.u-hide-scroller::-webkit-scrollbar { display: none; }
.u-fixed { position: fixed; }
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-sticky { position: sticky; }
.u-grayscale { filter: grayscale(100%); }
.u-salmon { color: var(--color-salmon); }
.u-highlight { color: var(--color-orange); }
.u-blue { color: var(--color-blue); }
.u-playdown { opacity: 0.6; }
.u-whiteout { color: #545454; background: rgba(255,255,255,0.8); border-radius: 5px; padding: 0 5px; }

/**
 * ----------------------------------------------------------------------------
 *    Header
 * ----------------------------------------------------------------------------
 */
 
.Header { position: sticky; top: 0; left: 0; z-index: 110; width: 100%; padding: 17px 70px; gap: 5px; transition: transform 1s cubic-bezier(.21,.87,.5,.97); background: #000; }
.Header__Logo { margin: 0; padding: 0; position: relative; width: 300px; max-width: 40vw; text-align: center; }
[for="nav"] { z-index: 10; }
.Header__Logo svg { pointer-events: none; margin-bottom: 5px; }

@media (max-width: 480px) {
	.Header { padding: 5px var(--grid-gutter); }
}

body.prevent-scroll { height: calc(var(--vh, 1vh) * 100); height: 100svh; width: 100%; display: flex; flex-direction: column; justify-content: stretch; align-items: center; /* overflow: hidden;  */ }
body.prevent-scroll .Header { background: transparent; }

/**
 * ----------------------------------------------------------------------------
 *    Menus
 * ----------------------------------------------------------------------------
 */
 
#Menu { font-size: 30px; background-color: var(--color-background); width: 100vw; max-width: 260px; /* height: calc(var(--vh, 1vh) * 100); */ height: 100vh; overflow: auto; position: fixed; top: 0; right: 0; z-index: 9; display: flex; flex-direction: column; padding: 100px var(--grid-gutter); opacity: 0; pointer-events: none; transition: opacity 0.35s ease-in-out; }
#nav.Interactive:checked ~ #Menu { pointer-events: auto; opacity: 1; }

#Menu li a { color: #fff; }
#Menu li.current-menu-item > a,
#Menu li.current-menu-ancestor > a,
#Menu li.current-page-ancestor > a { color: var(--color-blue); }

#Menu .menu-item-has-children { padding-right: 50px !important; position: relative; }
#Menu .menu-item-has-children > a { display: inline-block; margin-right: 50px; }
#Menu .menu-item-has-children button[aria-expanded] { position: absolute; right: var(--grid-gutter); top: 0; transition: transform 0.3s ease-in-out; }
#Menu .menu-item-has-children button[aria-expanded] + ul { margin: 0; overflow: hidden; padding: 0 0 0 0.44em; font-size: 0.8em; transition: all 0.6s ease-in-out;  }
#Menu .menu-item-has-children button[aria-expanded] + ul li:first-child { padding-top: 0.44em; }
#Menu .menu-item-has-children button[aria-expanded="false"] + ul { max-height: 0; opacity: 0; }
#Menu .menu-item-has-children button[aria-expanded="true"] + ul { max-height: 90vh; opacity: 1; }
#Menu .menu-item-has-children button[aria-expanded="true"] { transform: rotate(-180deg); }

#menu-social { font-size: 35px; margin-top: 10px; text-align: center; }
#menu-social a { color: #fff; }
#menu-social .Icon { width: 80px; height: 80px;  }


/**
 * ----------------------------------------------------------------------------
 *    Forms
 * ----------------------------------------------------------------------------
 */

.nf-form-fields-required, .ninja-forms-req-symbol { display: none; }
.nf-before-form-content { padding-bottom: 10px; }

.nf-error-msg { margin-top: 5px; background-color: var(--color-orange); border-radius: 10px; padding: 5px 10px; color: #fff !important; }

.nf-form-content input.text:not(.qty), 
.nf-form-content input.title, 
.nf-form-content input[type="email"], 
.nf-form-content input[type="password"], 
.nf-form-content input[type="tel"], 
.nf-form-content input[type="text"], 
.nf-form-content select, 
.nf-form-content textarea { width: 100% !important; background: rgba(255,255,255,0.9); color: #000; border-radius: 5px; padding: 10px; font-weight: 300; }

.nf-form-content .listradio-wrap .nf-field-element input { position: absolute; opacity: 0; visibility: hidden; }
.nf-form-content .listradio-wrap .nf-field-element label { position: relative; }
.nf-form-content .listradio-wrap .nf-field-element label::before,
.nf-form-content .listradio-wrap .nf-field-element label::after { content: ""; position: absolute; width: 0.8em; height: 0.8em; left: -1.5em; top: 0.3em; border-radius: 50%; }
.nf-form-content .listradio-wrap .nf-field-element label::before { background: #fff; border: 1px solid var(--color-orange); }
.nf-form-content .listradio-wrap .nf-field-element label::after { background: var(--color-orange); transform: scale(0); transition: 120ms transform ease-in-out; }


.nf-form-content .listradio-wrap .nf-field-element label.nf-checked-label::after { transform: scale(1); }
/* .nf-form-content .listradio-wrap .nf-field-element label.nf-checked-label::before { background: var(--color-orange); } */
/* .nf-form-content input[type="checkbox"]:focus+label::after, input[type="radio"]:focus+label::after { box-shadow: none !important; } */

/* .list-radio-wrap .nf-field-element ul li,
.list-radio-wrap .nf-field-element ul li { margin-bottom: 15px; } */
/* These appear the first step of a form only and are dumb - I can't see a purpose for them
.nf-form-content .listradio-wrap .bs-radio { display: none !important; }
.list-radio-wrap .nf-field-element ul li label,
.list-checkbox-wrap .nf-field-element ul li label { margin-left: 30px; cursor: pointer; } */

.nf-form-content button, 
.nf-form-content input[type="button"], 
.nf-form-content input[type="submit"] { cursor: pointer; color: #fff !important; border: 2px solid var(--color-orange); border-radius: 100px; text-transform: uppercase; background-color: var(--color-orange); padding: 0.6em 2em; height: auto; }
.nf-form-content .submit-wrap .nf-field-element { text-align: right; }
/* .nf-form-wrap .nf-form-content .nf-field-element input[type="submit"] { background-color: var(--color-orange); } */

/* .nf-form-wrap .nf-response-msg { font-size: 16px !important; } */
/* .nf-form-wrap .nf-response-msg p:first-child { font-size: 23px !important; line-height: 1.4em; } */


/**
 * ----------------------------------------------------------------------------
 *    Homepage
 * ----------------------------------------------------------------------------
 */
 
body.home { align-items: center; overflow: hidden; position: fixed; /* Important - prevents window scrolling and reloading on mobiles */ touch-action: none; /* Important: without distortion of vector doesn't work on Android */ }
body.home .Header { padding-bottom: 9px; }

.Proposition { font-size: max(6vw, 40px); line-height: 1; font-weight: 150; text-transform: none; text-align: center; margin: 0; z-index: 11; pointer-events: none; width: 96%; }
.Proposition span { opacity: 0; }

/* Interactive WWTC vector */
.WWTC { width: 90%; padding: var(--grid-gutter); flex: 1 1 auto; position: relative; z-index: 105; min-height: 86px; touch-action: none; }
.WWTC__Word { width: 100%; min-height: 20px; /* Important */ display: flex; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; gap: 2px; flex: 1 1 25%; margin-top: 2px; opacity: 0; }
.WWTC__Letter { flex: 1 1 25%; min-width: 20px; /* Important */ min-height: 0; /* Important */ height: 100%; position: relative; }
.WWTC__Letter svg { width: 100% !important; height: 100%; object-fit: cover; }
.WWTC__Letter video,
.WWTC__Letter img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mask worked better cross browser than Clip path */
.WWTC__Letter #h-mask { 
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 79.01 82.09\' preserveAspectRatio=\"none\"><path fill=\"white\" d=\"M0,80.81V1.28C0,.51.51,0,1.28,0h36.04c.77,0,1.28.51,1.28,1.28v29.12h1.8V1.28c0-.77.51-1.28,1.28-1.28h36.04c.77,0,1.28.51,1.28,1.28v79.52c0,.77-.51,1.28-1.28,1.28h-36.04c-.77,0-1.28-.51-1.28-1.28v-27.83h-1.8v27.83c0,.77-.51,1.28-1.28,1.28H1.28c-.77,0-1.28-.51-1.28-1.28Z\"/></svg>') no-repeat 0 0 / 100% 100%;
		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 79.01 82.09\' preserveAspectRatio=\"none\"><path fill=\"white\" d=\"M0,80.81V1.28C0,.51.51,0,1.28,0h36.04c.77,0,1.28.51,1.28,1.28v29.12h1.8V1.28c0-.77.51-1.28,1.28-1.28h36.04c.77,0,1.28.51,1.28,1.28v79.52c0,.77-.51,1.28-1.28,1.28h-36.04c-.77,0-1.28-.51-1.28-1.28v-27.83h-1.8v27.83c0,.77-.51,1.28-1.28,1.28H1.28c-.77,0-1.28-.51-1.28-1.28Z\"/></svg>') no-repeat 0 0 / 100% 100%; }

.WWTC__Letter #e-mask { 
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 68.88 82.09\' preserveAspectRatio=\"none\"><path fill=\"white\" d=\"M0,80.81V1.28C0,.51.51,0,1.28,0h66.31c.77,0,1.28.51,1.28,1.28v28.73c0,.77-.51,1.28-1.28,1.28h-29.12v1.8h29.12c.77,0,1.28.51,1.28,1.28v14.62c0,.64-.51,1.15-1.28,1.15h-29.12v1.92h29.12c.77,0,1.28.51,1.28,1.15v27.58c0,.77-.51,1.28-1.28,1.28H1.28c-.77,0-1.28-.51-1.28-1.28Z\"/></svg>') no-repeat 0 0 / 100% 100%;
			mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 68.88 82.09\' preserveAspectRatio=\"none\"><path fill=\"white\" d=\"M0,80.81V1.28C0,.51.51,0,1.28,0h66.31c.77,0,1.28.51,1.28,1.28v28.73c0,.77-.51,1.28-1.28,1.28h-29.12v1.8h29.12c.77,0,1.28.51,1.28,1.28v14.62c0,.64-.51,1.15-1.28,1.15h-29.12v1.92h29.12c.77,0,1.28.51,1.28,1.15v27.58c0,.77-.51,1.28-1.28,1.28H1.28c-.77,0-1.28-.51-1.28-1.28Z\"/></svg>') no-repeat 0 0 / 100% 100%; 
}

.WWTC__Letter #c-mask { 
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 79.01 82.09\' preserveAspectRatio=\"none\"><path fill=\"white\" d=\"M79.01,42.2v21.93c0,11.54-6.41,17.96-17.96,17.96H17.96c-11.54,0-17.96-6.41-17.96-17.96V17.96C0,6.41,6.41,0,17.96,0h43.1c11.54,0,17.96,6.41,17.96,17.96v19.88c0,.77-.51,1.28-1.28,1.28h-36.04c-.77,0-1.28-.51-1.28-1.28v-15.26h-1.8v36.94h1.8v-17.32c0-.77.51-1.28,1.28-1.28h36.04c.77,0,1.28.51,1.28,1.28Z\"/></svg>') no-repeat 0 0 / 100% 100%;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 79.01 82.09\' preserveAspectRatio=\"none\"><path fill=\"white\" d=\"M79.01,42.2v21.93c0,11.54-6.41,17.96-17.96,17.96H17.96c-11.54,0-17.96-6.41-17.96-17.96V17.96C0,6.41,6.41,0,17.96,0h43.1c11.54,0,17.96,6.41,17.96,17.96v19.88c0,.77-.51,1.28-1.28,1.28h-36.04c-.77,0-1.28-.51-1.28-1.28v-15.26h-1.8v36.94h1.8v-17.32c0-.77.51-1.28,1.28-1.28h36.04c.77,0,1.28.51,1.28,1.28Z\"/></svg>') no-repeat 0 0 / 100% 100%; }


.WWTC__Details { width: 100%; max-height: 0; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; position: relative; transition: all 0.3s ease-in-out; }
.WWTC__Details h3 { font-family: "Free Fat Font"; text-align: center; letter-spacing: 0.02em; line-height: 0.8; text-transform: uppercase; font-size: max(5vw, 36px); margin: 0; padding: 0.08em 1em 0; }

/* TEMP */
.CS { margin: 10px; text-align: center; }
.Media .CS { position: absolute; top: 0; left: 0; right: 0; }
/* TEMP */

.WWTC__Details >:last-child { margin-bottom: var(--grid-gutter); }
.WWTC__Details .Button--close { transform: translateY(-50%); top: calc(max(5vw, 36px) / 2); z-index: 101; }

/* #wwtc-distort:not(:checked) ~ .WWTC__Word { flex: 0 0 5%; } */
[name="wwtc"]:checked + .WWTC__Word { min-height: calc(40% - 64px); pointer-events: none; }
[name="wwtc"]:checked + .WWTC__Word + .WWTC__Details { max-height: 50%; }
[name="wwtc"]:checked + .WWTC__Word .WWTC__Letter a { pointer-events: auto; }

@media (max-width: 980px) {
	.WWTC { width: 100%; }
}


/**
 * ----------------------------------------------------------------------------
 *    Splide general
 * ----------------------------------------------------------------------------
 */

.splide__slide {}
.splide__slide--parallax { width: calc(35vh * 1.33);  overflow: hidden; }
.wp-theme-HF .splide__arrows { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; }
.wp-theme-HF .splide__arrow { border-radius: 0; background: transparent; top: auto; bottom: 0; transform: translateY(0); opacity: 1; }
.wp-theme-HF .splide__arrow:disabled { opacity: 0.5; }
.splide.u-pagination-under .splide__pagination { position: static; }


/**
 * ----------------------------------------------------------------------------
 *    Standard Page Template
 * ----------------------------------------------------------------------------
 */
 .Page { padding-top: calc(var(--grid-gutter ) * 2); }
 
 /* .PageWidth { width: 100%; max-width: 900px; margin: 0 auto; }
 .PageWidth--wide { width: 1100px; max-width: calc(100% - var(--grid-gutter ) * 4); }
 .PageWidth--padded { padding-top: calc(var(--grid-gutter ) * 2); } */
 
 /* Page__Template is for pages where the Title is at the bottom */
.Page__Template { width: 100%; height: calc(100dvh - var(--hh, 100px)); padding: 0 min(10vw, 70px) min(130px, 8vh); gap: 20px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 2; }
.Page__Heading { margin: 0; order: 100; }

.Page__Template .splide { width: 100vw; padding: 0 0 40px 0; margin: 0 max(-10vw, -70px) 10px max(-10vw, -70px); text-align: center; max-height: 100%; }
.Page__Template .splide__track  { max-height: 100%; }
/* .Page__Template .splide__slide { max-width: 26vw; } */
.Page__Template .splide__slide .Media { height: 35vh; margin-bottom: 10px; max-width: 100vw; filter: grayscale(1); transition: all 0.3s ease-in-out; }
.Page__Template .splide__slide .Media img { max-height: 35vh; max-height: 35svh; }	
.Page__Template .splide__slide .Heading { opacity: 0; transform: translateY(-20px); transition: all 0.3s ease-in-out; margin: 0; text-transform: none; }

.Page__Template .splide__slide .Heading.u-h4::after { color: var(--color-orange); content: "more..."; margin-left: 1em; }
.Page__Template .splide__slide:hover .Media,
.Page__Template .splide__slide.is-active .Media { filter: grayscale(0); }
.Page__Template .splide__slide:hover .Heading, 
.Page__Template .splide__slide.is-active .Heading { opacity: 1; transform: translateY(0); }
.Page__Template .splide__pagination { bottom: 0; }
.Page__Template .splide__pagination li { padding: 0; }
.Page__Template .splide__pagination__page { margin: 10px; }






@media (max-width: 640px) {
	.Page__Template .splide__slide { width: 100vw; }
}

@media (min-width: 641px) {
	/* .Page__Template { padding: 0 min(10vw, 70px) 10vh; } */
}
@media (min-width: 641px) and (max-height: 700px) {
	/* .Page__Template { padding-bottom: 0; justify-content: center; } */
	.Page__Template .splide { padding: 0 0 10px 0; margin: 0 0 10px 0; }
}




/**
 * ----------------------------------------------------------------------------
 *    Pokies loading animation
 * ----------------------------------------------------------------------------
 */

.Pokies { inset: 0%; pointer-events: none; transform: scale(1.33);
	/* display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; height: 100svh; position: fixed;  */
}
/* .Wheel { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } */
.Wheel:nth-child(odd) .Media { transform: translateY(100vh) scale(0.8); }
.Wheel:nth-child(even) .Media { transform: translateY(-100vh) scale(0.8); }

/**
 * ----------------------------------------------------------------------------
 *    Longform Page Template
 * ----------------------------------------------------------------------------
 */
 
.Longform { flex: 1 1 100%; overflow: auto; margin-top: calc(var(--grid-gutter) * 2); padding-bottom: 20vh; padding-bottom: 20svh; }
@media (min-width: 981px) {
	.Longform { padding-bottom: 40vh; padding-bottom: 40svh; }
}
  
/**
 * ----------------------------------------------------------------------------
 *    Subpage template
 * ----------------------------------------------------------------------------
 */
 
.Introduction { width: 980px; max-width: 100%; margin-bottom: var(--grid-gutter); }
.Introduction--quote { margin-top: var(--grid-gutter); }
.SubPage { position: relative; padding: var(--grid-gutter) 0 0 0; }
.SubPage__Media { order: 0; min-width: 0; /* important */ gap: var(--grid-gutter); padding-bottom: 50px; width: 100%; transition: all 0.35s ease-in-out; }
.SubPage__Text { order: 1; min-width: calc(20px + 5vw); /* important */ position: sticky; top: 70px; right: 0; overflow: hidden; transition: all 0.35s ease-in-out; }
.SubPage__Tabs { position: absolute; top: 0; right: 0; z-index: 11; width: 17px; transition: all 0.35s ease-in-out; }
.SubPage__Tabs li { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-bottom: 40px; }
.SubPage__Tabs label { display: block; line-height: 0.8; }
.SubPage__Tab { position: absolute; top: 0; left: 0; width: 100%; max-height: 100%; overflow: auto; opacity: 0; padding: 0 30px 0 var(--grid-gutter); padding-bottom: 40vh; padding-bottom: 40svh; transition: all 0.35s ease-in-out; }

.SubPage #option1:checked ~ .SubPage__Text .SubPage__Tab--1,
.SubPage #option2:checked ~ .SubPage__Text .SubPage__Tab--2,
.SubPage #option3:checked ~ .SubPage__Text .SubPage__Tab--3,
.SubPage #option4:checked ~ .SubPage__Text .SubPage__Tab--4,
.SubPage #option5:checked ~ .SubPage__Text .SubPage__Tab--5,
.SubPage #option6:checked ~ .SubPage__Text .SubPage__Tab--6 { opacity: 1; z-index: 10; }
.SubPage #option1:checked ~ .SubPage__Text [for="option1"],
.SubPage #option2:checked ~ .SubPage__Text [for="option2"],
.SubPage #option3:checked ~ .SubPage__Text [for="option3"],
.SubPage #option4:checked ~ .SubPage__Text [for="option4"],
.SubPage #option5:checked ~ .SubPage__Text [for="option5"],
.SubPage #option6:checked ~ .SubPage__Text [for="option6"] { color: var(--color-blue); }

.SubPage input[type="checkbox"]:checked ~ .SubPage__Media { min-width: 30%; }
.SubPage input[type="checkbox"]:checked ~ .SubPage__Text { min-width: 70%; }
.SubPage input[type="checkbox"]:checked ~ .SubPage__Text .SubPage__Tab { transition-delay: 0.4s; }

@media (max-width: 980px) {
	/* .SubPage__Tab { width: calc(96vw * 0.7 - 50px); position: static; transform: none; } */

	/* .SubPage__Tab { display: none; }
	.SubPage #option1:checked ~ .SubPage__Text .SubPage__Tab--1,
	.SubPage #option2:checked ~ .SubPage__Text .SubPage__Tab--2,
	.SubPage #option3:checked ~ .SubPage__Text .SubPage__Tab--3,
	.SubPage #option4:checked ~ .SubPage__Text .SubPage__Tab--4,
	.SubPage #option5:checked ~ .SubPage__Text .SubPage__Tab--5,
	.SubPage #option6:checked ~ .SubPage__Text .SubPage__Tab--6 { display: block; } */
}

@media (min-width: 981px) {
	.SubPage__Text { min-width: calc(30px + 5vw); }
	.SubPage__Tab { padding-right: 50px; }
	.SubPage__Tabs:hover { transform: translateX(-5px); }
	.SubPage input[type="checkbox"]:checked ~ .SubPage__Media,
	.SubPage input[type="checkbox"]:checked ~ .SubPage__Text { min-width: 50%; }
	.SubPage__Tabs { width: 25px; }

}

/**
 * ----------------------------------------------------------------------------
 *    Video Template
 * ----------------------------------------------------------------------------
 */

.Video { position: relative; max-height: 100%; height: 100%; }
.Video__Page { position: relative; flex: 0 1 100%; width: 100%; min-height: 0; }

/**
 * ----------------------------------------------------------------------------
 *    Animations - none of these are used (fairly sure)
 * ----------------------------------------------------------------------------
 */

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes trigger {
	to {
		--animate: true;
	}
}

@keyframes pop {
	from {
		scale: var(--scale-start);
	}
	to {
		scale: var(--scale-end);
	}
}

@keyframes text-gradient {
	100% {
		background-position: 150% center;
	}
}
   
@keyframes pop-back {
	from {
		scale: var(--scale-end);
	}
	to {
		color: var(--color);
		scale: var(--scale-start);
	}
}

@keyframes hover {
	from,
	to {
		translate: 0 calc(var(--hover-offset) * -1);
	}
	50% {
		translate: 0 var(--hover-offset);
	}
}  
 
@keyframes fadeIn {
	from {
		opacity: 0;
		pointer-events: none;
	}
	to {
		opacity: 1;
		pointer-events: auto;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
		pointer-events: auto;
	}
	to {
		opacity: 0;
		pointer-events: none;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(50px);
		pointer-events: none;
	}
	to {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% { 
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}

@keyframes underwater {
	0%,
	100% {
		transform: skew(0deg, 0deg) scale(1.35, 1.35);
		filter: saturate(100%) invert(0%);
	}

  	25% {
		filter: saturate(180%) invert(10%);
  	}
	
	50% {
		transform: skew(2deg, 2deg) scale(1.35, 1.35);
		filter: saturate(100%) invert(0%);
 	}
  
  	75% {
	  	filter: saturate(150%) invert(20%);
  	}
}