@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap);

:root {
	--nav-h:64px;
	--body-bg:#0b0f15;
	--clr-base:#e6e8ee;
	--font-base:'Roboto', sans-serif;
}

* {box-sizing:border-box;margin:0px;padding:0px;}
html, body {height:100%;}
body {background:var(--body-bg);color:var(--clr-base);font-family:var(--font-base);line-height:1.2em;font-size:14px;margin:0;padding:0px;}

/* Top navigation bar (logo only for now) */
.navbar {position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;padding:0 20px;z-index:10;background:rgba(14, 17, 20, 1);}
.brand {display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;user-select:none;}
.brand {float:left;width:100%;display:flex;align-items:center;justify-content:center;}
.nav-logo {float:left;width:100%;max-width:280px;}
.nav-logo img {float:left;width:100%;}

/* Video fills the entire screen;navbar sits on top */
.video-stage {position:fixed;inset:0;z-index:0;background:#000;height:calc(100% - var(--nav-h));top:var(--nav-h);}
.video-stage wistia,
.video-stage .wistia-video,
.video-stage .video-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

@media (max-width:480px) {
	:root {--nav-h:56px;}
	.nav-logo {max-width:180px;}
}