@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@100;300;400;500;600&display=swap');



* {box-sizing:border-box; /* padding:0; margin:0; */}


body {

	/* Theme Colors */
	--backcolor:#111;
	--forecolor:white;

	--limeglass:#0F04;
	--whiteglass:#FFF4;

	/* Gradient Background */
	--bgimg:linear-gradient( -45deg , lime , lawngreen , dodgerblue , royalblue );
	--bgimg:linear-gradient(135deg,dodgerblue,purple);

	/* Progress Bar */
	--barsize:.5rem;
	--barsize:.25rem;
	--barsize:.125rem;
	--dotsize:calc( var(--barsize) * 2 );

	/* Page Width */
	--pagewidth:80rem;
}


/* Box */
body {background-color:var(--backcolor); margin:0;}
body {color:var(--forecolor); font-family:Nunito,sans-serif;}
div#container {background-color:var(--backcolor); color:var(--forecolor);}
/* div#container {display:grid; place-items:center;} */
div#container {display:flex; flex-direction:column;  min-height:100vh; /* padding:1rem; */}


/* Section */
div#container section {z-index:10;}
div#container section div.grid {max-width:var(--pagewidth); margin:0 auto;}


/* Navbar Section */
div#container nav.navbar {position:fixed; inset:0; bottom:auto; z-index:20; padding:1rem; /* margin-top:1em; */}
div#container nav.navbar {/* opacity:1; visibility:visible; */ transition:.5s;}
/* div#container.imgmode nav.navbar, */
/* div#container.vidmode nav.navbar {opacity:0; visibility:hidden;} */
/* Navbar Section: Grid */
div#container nav.navbar div.grid {display:flex; flex-direction:row; justify-content:space-between; /* justify-content:center; */ align-items:center; gap:.5rem;}
/* div#container nav.navbar div.grid {display:grid; grid-template-columns:repeat(3,1fr); place-items:center;} */
div#container nav.navbar div.grid {max-width:var(--pagewidth); margin:0 auto;}
/* Navbar Section: Grid Cell */
/* div#container nav.navbar div.grid div.cell {} */
/* Navbar Section: Grid Cell Button */
div#container nav.navbar div.grid div.cell a.btn {background-color:black; padding:.5em;}
div#container nav.navbar div.grid div.cell a.btn {color:inherit; text-decoration:none; white-space:nowrap; border-radius:5rem;}
div#container nav.navbar div.grid div.cell a.btn img.logo {display:block; height:3em;}
/* div#container nav.navbar div.grid div.cell a.btn span.caption {} */
/* Navbar Section: Grid Home Button */
div#container nav.navbar div.grid div.cell a.homebtn {padding:0;}
/* Navbar Section: Grid Call Button */
div#container nav.navbar div.grid div.cell a.callbtn {background-color:white; height:3em; border:1px solid white; padding:.5em 1em;}
div#container nav.navbar div.grid div.cell a.callbtn {color:black; font-size:.75rem;}
div#container nav.navbar div.grid div.cell a.callbtn {display:flex; flex-direction:row; align-items:center; gap:0; transition:.25s;}
div#container nav.navbar div.grid div.cell a.callbtn:hover {gap:.5rem;}
/* div#container nav.navbar div.grid div.cell a.callbtn svg.icon {display:none;} */
div#container nav.navbar div.grid div.cell a.callbtn svg.icon {font-size:1.25em;}
div#container nav.navbar div.grid div.cell a.callbtn span.caption {overflow:hidden; max-width:0; transition:.5s;}
div#container nav.navbar div.grid div.cell a.callbtn:hover span.caption {max-width:10em;}
/* Navbar Section: Grid Navigation */
div#container nav.navbar div.grid nav.navmenu {display:none;}
div#container nav.navbar div.grid nav.navmenu {background-color:var(--whiteglass); backdrop-filter:blur(.5rem);}
div#container nav.navbar div.grid nav.navmenu {padding:.75rem 1rem; padding:.5rem; border:.125rem solid var(--whiteglass); border-radius:5rem;}
div#container nav.navbar div.grid nav.navmenu ul.ctrlist {list-style:none; padding:0; margin:0;}
/* div#container nav.navbar div.grid nav.navmenu ul.ctrlist {} */
div#container nav.navbar div.grid nav.navmenu ul.ctrlist {display:flex; flex-direction:row; align-items:center; justify-content:center; gap:.375em;}
/* div#container nav.navbar div.grid nav.navmenu ul.ctrlist li.ctrlitem {} */
div#container nav.navbar div.grid nav.navmenu ul.ctrlist li.ctrlitem button.ctrlbtn {color:black; font-size:.75rem; text-transform:uppercase;}
div#container nav.navbar div.grid nav.navmenu ul.ctrlist li.ctrlitem button.ctrlbtn {cursor:pointer; min-width:7em; padding:.5em 1.5em; border:0 none; border-radius:5rem;}
div#container nav.navbar div.grid nav.navmenu ul.ctrlist li.ctrlitem button.ctrlbtn {background-color:transparent; color:white; transition:.25s;}
div#container nav.navbar div.grid nav.navmenu ul.ctrlist li.ctrlitem button.ctrlbtn.on {background-color:white; color:black;}


/* Hero Section */
div#container section.hero {/* background-color:var(--limeglass); */ position:relative; height:400vh; /* height:200vh; */}
div#container section.hero div.grid {position:sticky; top:0; height:100vh; width:100%; overflow:hidden; max-width:none}
div#container section.hero div.grid div.bar {opacity:0; visibility:hidden; transition:.5s;}
div#container.scrub section.hero div.grid div.bar {opacity:.375; visibility:visible;}
div#container section.hero div.grid div.bar {position:absolute; inset:2rem; top:auto; width:90%; margin:0 auto;}
div#container section.hero div.grid div.bar {background-color:var(--whiteglass); height:var(--barsize); border-radius:10em;}
div#container section.hero div.grid div.bar div.progress {background-color:lime; display:block; height:100%; width:var(--scrollprogress); border-radius:inherit;}
div#container section.hero div.grid div.bar div.progress {position:relative; --scrollprogress:0%;}
div#container section.hero div.grid div.bar div.progress::after {position:absolute; left:100%; top:50%; transform:translate(-50%,-50%);}
div#container section.hero div.grid div.bar div.progress::after {background-color:inherit; content:''; height:var(--dotsize); width:var(--dotsize); border-radius:50%;}
div#container section.hero div.grid img.heroframe,
div#container section.hero div.grid video.herovid,
div#container section.hero div.grid canvas.heroframe {background-color:var(--whiteglass); background-image:var(--bgimg); display:none; opacity:.5; object-fit:cover; height:100%; width:100%; pointer-events:none; user-select:none;}
div#container section.hero div.grid canvas.heroframe {display:block;}
/* Hero Section (image mode) */
div#container.imgmode section.hero div.grid img.heroframe {display:block;}
div#container.imgmode section.hero div.grid video.herovid {display:none;}
div#container.imgmode section.hero div.grid canvas.heroframe {display:none;}
/* Hero Section (video mode) */
div#container.vidmode section.hero div.grid img.heroframe {display:none;}
div#container.vidmode section.hero div.grid video.herovid {display:block;}
div#container.vidmode section.hero div.grid canvas.heroframe {display:none;}
/* Hero Section (canvas mode) */
/* div#container.canvasmode section.hero div.grid img.heroframe {display:none;}
div#container.canvasmode section.hero div.grid video.herovid {display:none;}
div#container.canvasmode section.hero div.grid canvas.heroframe {display:block;} */


/* Content Section */
div#container section.content {background-color:#181818; min-height:200vh; padding:7.5rem /* 10vw */ 0;}
div#container section.content div.grid {text-align:center;}
/* div#container section.content div.grid h1.head {} */
/* div#container section.content div.grid p.subhead {} */
div#container section.content div.grid div.spacer {height:150vh; height:200vh;}