@charset "UTF-8";
/* CSS Document */

:root{
    --primaryColor01: #20211d;
    --siteFont: "canto-pen", serif;
    --transition: all ease-in-out 280ms;
}
html, body{ width: 100%; min-height: 100%; margin: 0; padding: 0; color: var(--primaryColor01); font-style: normal; font-size: 100%; font-size:19px; font-family: var(--siteFont); font-weight:700;  overscroll-behavior: none;}
a{color: var(--primaryColor01); text-decoration: none;}
img{width: 100%; height: auto; display: block;}
#container{position:absolute; width: 100%; min-height: 100vh; display:flex; justify-content: center; align-items: flex-start; box-sizing: border-box; padding-top: 5vh; flex-direction: column;}
#background{position:fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("images/earthsignchels-full-website.jpg"); background-size: cover; background-position:top center; }
#logo{ position:absolute; top: 20px; left: 20px; font-size: 1.5em; z-index: 99;}
#nav{position:absolute; top: 20px; right: 20px; width: 45%; display: flex;  z-index: 99;}
.center-content{width:100%; box-sizing: border-box; padding: 0 18px; max-width: 470px; align-self: center;}
.content-doors{display:flex; justify-content: space-between; column-gap:10px;}
.content-doors a{max-width:180px;}
.youtube-video-wrapper {width:100%;  margin:0 auto; aspect-ratio:16/9;}
.video {width:100%; height:100%; border:0;}
#footer{background: var(--primaryColor01); color: #fff; text-align: center; font-size:.85em;  width: 100%; box-sizing: border-box; padding: 12px; text-transform: lowercase; margin-top: 20px;}
#footer a{color: #fff; display: inline-block; margin: 0 3px}
 #footer{position:absolute; top: 100%; width: 100%; box-sizing: border-box; padding: 13px;}
/* nav */
#nav-toggle{position: fixed; top: 1rem; right: 1rem; z-index: 1001; width: 44px; height: 44px; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: #fff; border: none; cursor: pointer;}
#nav-toggle span{display: block; width: 22px; height: 2px; background: var(--primaryColor01); transition: transform 0.3s ease, opacity 0.2s ease;}
#nav-toggle[aria-expanded="true"] span:nth-child(1){transform: translateY(8px) rotate(45deg);}
#nav-toggle[aria-expanded="true"] span:nth-child(2){opacity: 0;}
#nav-toggle[aria-expanded="true"] span:nth-child(3){transform: translateY(-8px) rotate(-45deg);}

#nav{position: fixed; top: 0; right: 0; z-index: 1000; width: min(320px, 85vw); height: 100%; padding-top: 5rem; display: flex; justify-content: center; flex-direction: column; background: var(--primaryColor01); border-left: 1px solid var(--primaryColor01); transform: translateX(100%); visibility: hidden; transition: transform 0.4s ease, visibility 0s linear 0.4s;}
#nav-toggle[aria-expanded="true"] + #nav{transform: translateX(0); visibility: visible; transition: transform 0.4s ease, visibility 0s;}

#nav a{display: block; padding: 1rem 1.5rem; color: #fff; text-decoration: none; /*border-bottom: 1px solid var(--primaryColor01);*/ opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s ease;}
#nav-toggle[aria-expanded="true"] + #nav a{opacity: 1; transform: translateX(0);}
#nav-toggle[aria-expanded="true"] + #nav a:nth-child(1){transition-delay: 0.25s;}
#nav-toggle[aria-expanded="true"] + #nav a:nth-child(2){transition-delay: 0.35s;}
#nav-toggle[aria-expanded="true"] + #nav a:nth-child(3){transition-delay: 0.45s;}
#nav-toggle[aria-expanded="true"] + #nav a:nth-child(4){transition-delay: 0.55s;}
#nav-toggle[aria-expanded="true"] + #nav a:nth-child(5){transition-delay: 0.65s;}

/**/
#social{ display:flex; width: 100%; box-sizing: border-box; box-sizing: border-box; padding: 0 5px;}


@media (prefers-reduced-motion: reduce){#nav, #nav a, #nav-toggle span{transition-duration: 0.01s; transition-delay: 0s !important;}}
/**/

/* interior */
body.interior #container{padding-top:30vh;}
body.interior #background{ background:#fff;}
body.interior #header{ position: absolute; top:0; left: 0;  width:100%; box-sizing:border-box; height:max(30vh,200px); max-height:500px; background-size: contain; background-repeat: no-repeat; background-position: 40vw top; text-align: center; display: flex; align-items: center; justify-content: center;}
body.interior #header h1{ box-sizing: border-box;}
body.interior .center-content{max-width:700px; text-align: center;}

body.auditorium #header{ background-image: url("images/background-auditorium.png"); }
body.auditorium #header h1{padding-right:33%;}

body.memorium #header{ background-image: url("images/background-memorium.png"); background-position:15.5vw top; }
body.memorium #header h1{padding-left:25%;}

body.memorium .center-content{max-width:900px;}
body.memorium iframe{width:100%; border:none; height:69vh; scrollbar-width: thin; scrollbar-color:  var(--primaryColor01) #fff; 
}
.ExperienceCampaign div.PoweredBy{display:none !important;}

/**/
#newsletter-signup{text-align: center; background-color: rgba(255,255,255,.9); box-sizing: border-box; padding: 5px;}
form{width:100%; max-width: 500px; box-sizing: border-box; padding: 14px;}
form .sub-title{font-size:1.45em; line-height: 1em; margin-bottom: 20px;}
form .form-row{display:flex; width: 100%; box-sizing: border-box; margin-bottom: 10px;}
form input, form select  { width: 100%; border:none;  font-size: .9em; border: solid 1px var(--primaryColor01);  box-sizing: border-box;  color: var(--primaryColor01);  display: inline-block; outline: none; font-family:var(--siteFont2); padding:9px; background-color: transparent;}
form input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover { transition: background-color 999999s ease-in-out 0s; color: var(--primaryColor01) !important; -webkit-text-fill-color: var(--primaryColor01) !important; font-family:var(--siteFont) !important; }
form option{background-color: #000 !important; }
form input ~ input {margin-left:12px;}
::placeholder {	 color:var(--primaryColor01) !important;	opacity: 1 !important;	}
form button[type="submit"] { background-color:transparent; color: var(--primaryColor01);; font-size: 1em; font-family:var(--siteFont); border: solid 1px var(--primaryColor01); box-sizing: border-box; padding: 9px 18px; transition:var(--transition);  margin: 20px auto; cursor: pointer; display: block;}
form button[type="submit"]:hover { background-color:white; color: var(--backgroundColor01);}
form .legal{text-align:center; }
form .legal a{display:inline-block; margin: 0 4px;}
#thankyou{font-size:max(1.5em, 3vw); display: none; text-align: center;}
/**/

@media(orientation:portrait){
#background{background-image:url("images/earthsignchels-fullsite-mobile.jpg");  background-position: center top 10vh;}
body.interior #header{ height: max(21vh, 180px);}
body.memorium #header{background-position: 10vw top;}
}
@media(max-width:550px){
form .sub-title{font-size:1.15em;}
body.interior #header{background-position: 40vw top !important;}
body.interior #header h1{ padding-left: 0 !important; padding-right: 33% !important; }
}