@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&family=Poppins:wght@300;400;600;700&display=swap');
:root{
	--title-font:	'Fira Sans', sans-serif;
	--default-font:	'Poppins', sans-serif;
	--body-bg: #ffffff; 
	--body-fg: #999999;
	--brand-1-bg: #000000;
	--brand-1-fg: #ffffff;
	--brand-2-bg: #da0000;
	--brand-2-fg: #ffffff;
}
*,*:before,*:after{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html{ font-size: 16px; }
body{ min-height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; background-color: var(--body-bg); color: var(--body-fg); font-family: var(--default-font); }
.inner{ display: block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.branddot{ color: var(--brand-2-bg); font-size: 150%; font-weight: 700; }
	.branddot:before{ content: '.'; margin-left: 2px; }
.branded{ color: var(--brand-1-bg) !important; }

header{ padding: 1rem 0; border-bottom: solid 1px #000000; transform: translateY(-100%); }
	header .inner{ display: flex; align-items: flex-end; justify-content: space-between; }
		header #logo{ display: block; width: 100%; max-width: 10rem; }
		header .inner>div{ color: var(--brand-1-bg); font-size: 0.8rem; font-weight: 400; line-height: 0.8rem; }

article{ position: relative; flex: auto; text-align: center; }
	article.slideone{ display: flex; align-items: center; justify-content: center; }
		article.slideone h1{ display: inline-block; margin-top: -30%; }
			article.slideone h1 img{ display: inline-block; width: 100%; max-width: 30rem; }
		article.slideone p{ color: var(--body-fg); font-size: 0.8rem; }
			article.slideone p.branded{ margin-bottom: 3rem; font-size: 1rem; }