/*
Theme Name: Trinity - PHQ
Theme URI: 
Author: Arch Creative
Author URI: 
Description: Rawr
Version: 1.0
*/

                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                           

@import url("https://use.typekit.net/vpi7vke.css");

:root{
	--cream:#FFEFE0;
	--grrreen:#00423F;
	--fern:#337969;
	--ocean:#205178;
	--royal:#18284B;
	--gradient-green-blue:linear-gradient(45deg, #00423F 0%, #337969 33%, #205178 66%, #18284B 100%);
}

* { box-sizing:border-box; }

/* ===== GENERAL ===== */

html { width:100%;margin:0;padding:0;overflow-x:hidden;background-color:var(--cream); }

body { padding:0;margin:0;font-family: "pacaembu", sans-serif;font-weight:400;overflow-x:hidden;color:var(--grrreen);padding:2rem 1rem; }
/* body::before { display:block;content:"";background: linear-gradient(45deg, #00423F 0%, #337969 33%, #205178 66%, #18284B 100%);width:100%;height:100%;top:0;left:0;position:fixed; } */

h1,h2,h3,h4,h5,h6 { text-transform:uppercase; }
h1 { font-size: 3rem;font-weight:700;line-height:120%; }
h2 { font-size:2rem; }
h3 { font-size:1.25rem; }

p { font-size:1rem; }

a { color:var(--grrreen);text-decoration: none; }
a:hover { color:var(--fern); }

a.button { text-decoration: none;background:var(--ocean);color:var(--cream);text-transform:uppercase;display:inline-flex;align-items:center;width:fit-content;padding:0.8rem 1rem;border-radius:0.3rem;font-size:1.25rem;font-weight: 400;line-height:100%;gap:0.5rem;}
a.button:hover { background:var(--fern); }

a.button.cream { color:var(--grrreen);background:var(--cream); }
a.button.cream:hover { background:var(--ocean); }


main { width:100%; }

.container { width:100%;max-width:1320px;margin:0 auto;text-align:center;position:relative; }
.flex-wrapper { display:flex;flex-wrap:wrap;align-content:center;justify-content: center;gap:3rem; }
.flex-wrapper > div { width:100%;}

/* Navigation */
.logo { width:100%;max-width:420px;margin-bottom:3rem; }
#menu { display:flex;position:absolute;top:0;left:0;font-size:2rem;font-weight:700;color:var(--ocean);line-height:140%;gap:0.5rem; }
.toggle-bars { display:inline-flex;width:48px;height:48px;row-gap:1px;flex-wrap: wrap;padding:0.5rem;align-items:center; }
.toggle-bar { width:100%;height:4px;background:var(--ocean);display:inline-block;border-radius:100rem; }
#menu:hover { color:var(--fern);cursor:pointer; }
#menu:hover .toggle-bar { background:var(--fern); }
.book-tickets { position:absolute;top:0;right:0; }


/* Footer */
footer { background:var(--fern); }





.hero { padding:7rem;border-radius:2px; }
.divider { width:100%;height:2px;background:var(--grrreen);margin:1rem 0; }



/* Home */

.hero.home { background:var(--gradient-green-blue);color:var(--cream);  }

.hero-text { width:100%;max-width:555px;text-align:left; }
.dates h2 { width:100%;display:flex;justify-content: space-between; }




























.ontop { position:relative;z-index:2; }

form { width:100%;max-width:390px;display:block;margin:0 auto; }
form input[type="text"], form input[type="email"]  { width:100%;padding:0.5rem 1rem;text-align:center;border-radius:0.5rem;font-size:1.25rem;display:block;margin-bottom:1rem;border:none; }
form input[type="submit"] { text-decoration: none;background:var(--cream);color:var(--green-dark);text-transform:uppercase;display:inline-block;width:fit-content;padding:0.5rem 1rem;border-radius:0.3rem;font-size:1.25rem;font-weight: 400;margin-bottom:1rem;margin-top:1rem;border:none; appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-weight: inherit; }
form input[type="submit"]:hover { background:var(--green);color:var(--cream);cursor:pointer; }

.rex-wrap { position:relative; }
.rex { position:absolute;transform:scaleX(-1);object-fit: contain;width:1800px;height:1200px;object-position:right bottom;bottom:-260%;right:calc(100% - 21rem);pointer-events:none;opacity:1;z-index:1; }

.lockup { width:100%;max-width:420px;display:inline-flex;flex-wrap:nowrap;gap:0rem;margin:2rem 0;align-items:center; }
.lockup > div { border-right:1px solid rgba(255,255,255,0.4);padding:0 1.5rem; }
.lockup > div:last-child { border:none; }
.lockup svg { width:100%;height:100px;object-fit:contain; }

.ferns { position:fixed;top:0;left:0;width:100%;height:100%;
mix-blend-mode:color-burn;
 }
.ferns > div { position:absolute;animation: sway 15s linear infinite; }
/* .ferns > div::after { width:11px;height:11px;border-radius:100%;background:red;position:absolute;left:0%;top:0%;content:"";display:block;transform:translate(-50%, -50%); } */
.ferns img { width:auto;object-fit:contain;;opacity:0.3;height:100%; }

.ferns .animate {
  /* animation: rustle 0.5s ease-in-out infinite; */
}

@keyframes rustle {
  0%   { transform: skewX(0deg) scale(1); }
  10%  { transform: skewX(-1deg) scale(1.01); }
  25%  { transform: skewX(1.5deg) scale(1.015); }
  40%  { transform: skewX(-0.8deg) scale(1.008); }
  55%  { transform: skewX(1deg) scale(1.012); }
  70%  { transform: skewX(-1.2deg) scale(1.01); }
  85%  { transform: skewX(0.5deg) scale(1.005); }
  100% { transform: skewX(0deg) scale(1); }
}


@keyframes sway {
	 0%   { transform: skewX(-5deg); }
	 50% { transform: skewX(5deg); }
	 100%   { transform: skewX(-5deg); }
}



.ferns .f1 { top:0;left:22%;		height:30%;   transform-origin: 68% 0%; }
.ferns .f2 { bottom:0;left:5%; 		height:30%;   transform-origin: 48% 100%;	}
.ferns .f3 { top:0;left:36%;		height:15%;   transform-origin: 66% 0%; }
.ferns .f4 { bottom:0;left:60%;		height:15%;   transform-origin: 47% 100%; }
.ferns .f5 { top:30%;left:0;		height:60%;   transform-origin: 0% 48%; }
.ferns .f6 { top:0;left:15%;		height:20%;   transform-origin: 51% 0%; } 
.ferns .f7 { top:0;right:0;			height:17%;   transform-origin: 77% 0%; }
.ferns .f8 { bottom:0;right:0; 		height:22%;   transform-origin: 71% 100%; }
.ferns .f9 { bottom:0;left:0;		height:5%;    transform-origin: 0% 100%; }
.ferns .f10 { bottom:0;left:34%;	height:33%;   transform-origin: 49% 100%; }
.ferns .f11 { top:0;left:0;			height:60%;   transform-origin: 0% 33%; }
.ferns .f12 { bottom:0;left:55%;	height:25%;   transform-origin: 43% 100%; }
.ferns .f13 { bottom:0;left:15%;	height:28%;   transform-origin: 60% 100%; }
.ferns .f14 { bottom:0;left:0;		height:45%;   transform-origin: 53% 100%; }
.ferns .f14 { bottom:0;left:0;		height:42%;   transform-origin: 48% 100%; }
.ferns .f15 { top:0;right:19%;		height:33%;   transform-origin: 58% 100%; }
.ferns .f16 { bottom:0;right:10%;	height:38%;   transform-origin: 58% 100%; }
.ferns .f17 { bottom:-7%;left:13%;	height:60%;   transform-origin: 26% 88%; }
.ferns .f18 { top:0;right:0;		height:58%;   transform-origin: 100% 44%; }
.ferns .f19 { top:0;left:3%;		height:12%;   transform-origin: 40% 0%; }
.ferns .f20 { top:0;left:3%;		height:53%;   transform-origin: 44% 0%; }
.ferns .f21 { bottom:10%;right:0;	height:66%;   transform-origin: 100% 68%; }
.ferns .f22 { top:0;right:0;		height:48%;   transform-origin: 63% 0%; }
.ferns .f23 { top:0;right:25%;		height:18%;   transform-origin: 24% 0%; }


.nowrap { white-space: nowrap; }








.content { background:var(--cream);color:#000;padding:4rem 1rem 6rem;text-align:left;position:relative; }
.content::before, .content::after { position:absolute;content:"";display:block;top:0;left:0;width:100vw;height:100%;background:var(--cream); }
.content::before { left:100%; }
.content::after { left:auto;right:100%;}
.content :is(h1,h2,h3,h4,h5,h6) { color:var(--green-dark); }

.content .rex { position:absolute;transform:scaleX(1) translateY(-65%);object-fit: contain;width:1800px;height:1200px;object-position:left bottom;top:0%;right:auto;left:calc(100% - 14rem);pointer-events:none;opacity:1;z-index:1; }


.two-column	{ display:flex;flex-wrap:wrap;gap:4rem; }
.two-column > div { flex:1 1 400px; }

.apply-box { width:100%;border:1px solid var(--green-dark);border-radius:0.5em;padding:1rem;color:var(--green-dark);margin-top:3rem; }


#mc_embed_shell { text-align:center; }
#mc_embed_signup form { margin:0 auto !important; }
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {  }



a.button.join { background:var(--cream);color:var(--green-dark);position:static;top:2rem;right:2rem;z-index:3; }
a.button.join:hover { background:var(--green-dark);color:var(--cream); }

main.home { position:relative;  }

.divider { width:100%;max-width:1600px;margin:3rem auto;border-top:1px solid var(--green-dark); }

/* .container { display:none; } */

.mobile { display:none !important; }


.link-box { display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center; }
.socials { display:flex;gap:1rem; }
.socials a:hover svg path { fill:var(--green-dark); }


.disabled { pointer-events:none;opacity:0.4; }

@media(max-width:900px){
	.lockup { margin-top:3rem; }
	.mobile { display:inline-block !important; }
	.desktop { display:none !important; }
	h1 { display:grid;grid-template-columns:100%;justify-content:center;gap:3rem;transform:translateX(0); }
	h1 span { top:-0.4rem; }
	.flex-wrapper { gap:1rem; }
	
:root{
	--scaleSize:scale(0.4);
}

@keyframes rustle {
  0%   { transform: skewX(0deg) scale(0.4); }
  10%  { transform: skewX(-1deg) scale(0.41); }
  25%  { transform: skewX(1.5deg) scale(0.415); }
  40%  { transform: skewX(-0.8deg) scale(0.408); }
  55%  { transform: skewX(1deg) scale(0.412); }
  70%  { transform: skewX(-1.2deg) scale(0.41); }
  85%  { transform: skewX(0.5deg) scale(0.405); }
  100% { transform: skewX(0deg) scale(0.4); }
}


@keyframes sway {
	 0%   { transform: skewX(-5deg) var(--scaleSize); }
	 50% { transform: skewX(5deg) var(--scaleSize); }
	 100%   { transform: skewX(-5.2deg) var(--scaleSize); }
}


.ferns .f1 	{ transform:var(--scaleSize);transform-origin:left top; }
.ferns .f2 	{ transform:var(--scaleSize);transform-origin:left bottom; 	}
.ferns .f3 	{ transform:var(--scaleSize);transform-origin:left top; }
.ferns .f4 	{ transform:var(--scaleSize);transform-origin:left bottom;  }
.ferns .f5 	{ display:none; }
.ferns .f6 	{ transform:var(--scaleSize);transform-origin:left top; } 
.ferns .f7 	{ transform:var(--scaleSize);transform-origin:right top; 	}
.ferns .f8 	{ transform:var(--scaleSize);transform-origin:right bottom;  }
.ferns .f9 	{ transform:var(--scaleSize);transform-origin:left bottom;  	}
.ferns .f10 { transform:var(--scaleSize);transform-origin:left bottom;  }
.ferns .f11 { transform:var(--scaleSize);transform-origin:left top; }
.ferns .f12 { transform:var(--scaleSize);transform-origin:left bottom;  }
.ferns .f13 { transform:var(--scaleSize);transform-origin:left bottom;  }
.ferns .f14 { transform:var(--scaleSize);transform-origin:left bottom;  }
.ferns .f14 { transform:var(--scaleSize);transform-origin:left bottom;  }
.ferns .f15 { transform:var(--scaleSize);transform-origin:right top; }
.ferns .f16 { transform:var(--scaleSize);transform-origin:right bottom;  }
.ferns .f17 { display:none; }
.ferns .f18 { transform:var(--scaleSize);transform-origin:right top; }
.ferns .f19 { transform:var(--scaleSize);transform-origin:left top; }
.ferns .f20 { transform:var(--scaleSize);transform-origin:left top; }
.ferns .f21 { display:none; }
.ferns .f22 { transform:var(--scaleSize);transform-origin:right top; }
.ferns .f23 { transform:var(--scaleSize);transform-origin:right top; }

.rex { width:620px;bottom:100%;right:calc(100% - 12rem);transform:scale(-1.3, 1.3) translateY(-10%); }

	.container { padding:12rem 0;}

	.ferns > div { position:absolute;animation: sway 15s linear infinite; }

}



@media(max-width:560px){
	h1 { flex-wrap:wrap;justify-content:center;gap:3rem;font-size:2rem; }
	h1 span { font-size:6rem; }
	h2 { font-size:1.375rem; }
	.logo { width:100%;max-width:200px;margin-bottom:1rem; }
	
	/* .container { max-width:280px; } */
	.mobile { display:block; }
	main.home .container { padding:5rem 1rem 3rem;}
	.container { padding:6rem 1rem 3rem; }

	.rex { width:620px;bottom:80%;right:calc(100% - 8.5rem);transform:scaleX(-1) translateY(0); }
	main:not(.home) .content .rex { width:1000px;left:calc(100% - 11rem);transform:scaleX(1) translateY(-85%); }
	a.button.join { font-size:1rem;position:static; }
	.content { padding-left:0;padding-right:0; }
	form input[type="submit"] { font-size:1rem;font-weight:400;appearance: unset; }

}