html {
	font-size: 16px;
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
}

body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	color: #777777;
	/* primary */
}

h1 {
	color: #222;
	/* primary */
	font-family: "Hepta Slab", serif;
	font-weight: 500;
	/* letter-spacing: -1px; */
	line-height: 1.2;
	margin: 0;
}

h2 {
	color: #444444;
	/* secondary */
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.2;
	margin: 0;
}

h3 {
	color: #3c4858;
	font-family: Roboto, "Noto Sans", Helvetica, Arial, sans-serif; /* to match signup form */
	font-size: 1rem;
	font-weight: 700;
	/* letter-spacing: -1px; */
	line-height: 1.1;
	margin: 0 0 1em 0;
}

.email-form label {
	color: #4a088a;
	/* tertiary */
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	font-size: 1.1em;
	letter-spacing: -.75px;
}

section {
	width: 100%;
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.nobr {
	white-space: nowrap;
}

.block {
	width: 100%;
}

.contentbg.white,
.whitebox {
	background-color: rgba(255, 255, 255, .8);
	color: #222222;
}

.contentbg.black h2 {
	color: white;
}

.contentbg.black {
	background-color: black;
	color: #dddddd;
}

.contentbg.black h2 {
	color: white;
}

.contentbg.black.shaded {
	background-color: rgba(0, 0, 0, 0.5);
}

.contentbg {
	background-color: transparent;
	color: white;
}

.id {
	position: absolute;
	top: -80px;
	/* menu offset */
}

.cln {
	clear: both;
}

a.button {
    text-align: center;
    color: #FFFFFF !important;
    background-color: #028858;
    border-width: 0px;
	text-decoration: none !important;
	padding: .75rem 4rem;
	display: inline-block;
	width: fit-content;
	margin-top: .75rem;
}

a.button:hover {
    background-color: #015738;
	color: white !important;
	text-decoration: none !important;
}

header#section-intro {
	padding: 2rem 0;
	background-color: #ffffff;
	position: relative;
	height: 95vh;
	box-sizing: border-box;
}


header video {
	width: 100%;
	position: absolute;
	object-fit: contain;
	z-index: 0;
	top: 60px;
	left: 0;
}

#pitch {
	text-align: center;
	color: #333;
	font-family: 'Roboto', 'Noto Sans', Helvetica, Arial, sans-serif;
	padding-top: 20vh;
	line-height: 1.15;
	margin-left: 10px;
	margin-right: 120px;
}

#pitch .subject {
	font-size: 2.5rem;
	font-weight: 400;
}

#pitch .body {
	font-size: 1.75rem;
	font-weight: 300;
	margin: .6rem 0 0 0;
}

#pitch .body a{
	font-weight: 400;
}

#section-intro {
	padding-bottom: 100px;
}

#section-intro article {
	margin-top: 20vh;
}

#section-intro a {
	color: #000;
	text-decoration-thickness: 1px;
	text-decoration-style: dotted;
}

#section-intro a:hover {
	color: #333;
	text-decoration: underline;
}

#section-intro h2 {
	margin: .5rem 0;
	font-weight: 300;
	font-family: 'Roboto';
	font-size: 1.5rem;
	color: black;
	letter-spacing: 0;
}

#section-club {
	background-image: url('./images/desk-conversation.jpg');
	background-position: center center;
	background-color: black;
	padding-bottom: 400px;
}

#section-signup {
	background-image: url('./images/studio-desk.jpg');
	background-position: center center;
	background-color: transparent;
	padding-bottom: 100px;
	padding-top: 100px;
}

#section-project {
	background-image: url('./images/in-a-line-with-tools.jpg');
	padding-bottom: 700px;
}


.content {
	max-width: 1000px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
	padding-bottom: 1em;
}

.content img {
	max-width: 500px;
	width: 100%;
	display: inline-block;
	position: relative;
}

.content article {
	padding-top: 4em;
	padding-bottom: 4em;
}

.content article .inline-image {
	display: block;
	margin: 2em auto;
	max-width: 846px;
	float: none;
	border: 1px solid #001122;
	padding: 0;
}


#ks-info {
	/* text-align: center; */
	max-width: 540px;
	border-radius: 3px;
	border-width: 1px;
	border-color: #C0CCD9;
	border-style: solid;
	margin: 0 auto;
	padding: 2em;
	box-sizing: border-box;

}

#ks-info article {
	padding: 0;
	font-size: 0.875em;
}

#ks-info ul {
	margin-top: 0;
}

#ks-tiers {
	display: none;
}

#sib-form-container {
	background-color: rgba(255, 255, 255, 0);
}

.sib-form {
	padding-top: 1rem;
}

/*   o
8b   8
8`b  8 .oPYo. o    o
8 `b 8 .oooo8 Y.  .P
8  `b8 8    8 `b..d'
8   `8 `YooP8  `YP'
..:::..:.....:::...::
:::::::::::::::::::::
:::::::::::::::::::*/

.menu {
	position: relative;
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	display: none;
	background: url("images/logo-words-white-60.png") no-repeat center center;
	background-size: 242px 60px;
	height: 70px;
}


.fix {
	position: fixed;
	top: 0;
	height: 80px;
	width: 100%;
	z-index: 999;
	transition: 0.7s ease;
	visibility: visible;
	background-color: black;
}

.fix.visible {
	height: 80px;
	background-color: #555555;
	visibility: visible;
	opacity: .85;
}

.fix .menu {
	display: block;
}

nav {
	float: right;
	margin: 10px 0 0 0;
}

@media only screen and (max-width: 800px) {
	[role=navigation] {
		float: left;
		margin: 10px 0 0 0;
	}
}

.nav__link {
	display: inline-block;
	float: right;
	font-size: 16px;
	border-radius: 0px;
	color: #fff;
	padding: 8px 10px 10px;
	font-variant: small-caps;
	text-decoration: none;
	margin: 5px;
	transition: background .5s;
}

.nav__link--left {
	position: absolute;
	top: 10px;
	left: 260px;
}

.nav__link.active {
	background: #2c222d;
}

.nav__link.active:hover {
	text-decoration: none;
}

.nav__link:hover {
	background: #2c222d;
}

.mleft {
	margin-top: 10px;
	float: left;
}


/*
o      o       8
8              8
8     o8 odYo. 8  .o  .oPYo.
8      8 8' `8 8oP'   Yb..
8      8 8   8 8 `b.    'Yb.
8oooo  8 8   8 8  `o. `YooP'
......:....::....::...:.....:
:::::::::::::::::::::::::::::
::::::::::::::::::::::::::::: */

#links, #faqs, #hobbies {
	padding: 1rem;
	box-sizing: border-box;

}

#links h1, #hobbies h1, #faqs h1 {
	padding: 1em 0;
	color: #333333;
	/* font-size: 2rem; */
	text-align: center;
	display: block;
}

#hobbies h2, #faqs h2 {
	text-align: center;
	margin-top: -1rem;
 }

#links ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#links li {
	padding: .5rem 0;
	margin: 0;
}

#links li a {
	box-sizing: border-box;
	text-align: center;
	background-color: #550055;
	text-decoration: none;
	color: #fff;
	display: block;
	width: 100%;
	padding: 1rem;
	font-size: 1.25rem;
	border-radius: 8px;
}

#faqs dl {
    max-width: 800px;
    margin: 2rem auto;
}

dt {
	padding-top: .75rem;
	display: inline-block;
	font-weight: bold;
}
dd {
	padding: .5rem 0;
	display: inline-block;
}

/*
o
8
8     .oPYo. oPYo. .oPYo. .oPYo.
8     .oooo8 8  `' 8    8 8oooo8
8     8    8 8     8    8 8.
8oooo `YooP8 8     `YooP8 `Yooo'
......:.....:..:::::....8 :.....:
:::::::::::::::::::::ooP'.:::::::
:::::::::::::::::::::...:::::::*/

@media only screen and (min-width: 1181px) {

	#section-intro {
		height: 90vh;
		background-image: url('./images/onwhitenew.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-attachment: fixed;
		background-position: center right;
		overflow: hidden;
	}


	h1 {
		font-size: 3em;
	}

	h2 {
		font-size: 2em;
	}

	section img {
		float: right;
	}

	section {
		padding-bottom: 600px;
	}

	.menu {
		background-position: center 10px;

	}
}


/*
o     o             8  o
8b   d8             8
8`b d'8 .oPYo. .oPYo8 o8 o    o ooYoYo.
8 `o' 8 8oooo8 8    8  8 8    8 8' 8  8
8     8 8.     8    8  8 8    8 8  8  8
8     8 `Yooo' `YooP'  8 `YooP' 8  8  8
..::::..:.....::.....::..:.....:..:..:..
::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::*/

@media only screen and (max-width: 1180px) and (min-width: 750px) {

	#section-intro {
		height: 90vh;
		background-image: url('./images/onwhitenew.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-attachment: fixed;
		background-position: center right;
		overflow: hidden;
	}


	#section-intro video {
		width: 200%;
		margin-left: -45%;
		/* translateX(-50%); */
	}

	#section-intro article {
		padding-top: 10vh;
	}

	#section-intro h2 {
		font-size: 1.5em;
	}


	.menu {
		background-size: 202px 50px;
	}

	h1 {
		font-size: 2.25em;
	}

	h2 {
		font-size: 1.75em;
	}

	section img {
		float: right;
		padding-left: 2em;
	}

	.content img {
		max-width: 400px;
	}

	section {
		padding-bottom: 420px;
	}

	article {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	#pitch {
		padding-top: 20vh;
	}

	#pitch .subject {
		font-size: 2.25rem;
	}

	#pitch .body {
		font-size: 1.75rem;
		margin: .6rem 0 0 0;
	}

}


/*
.oPYo.                8 8
8                     8 8
`Yooo. ooYoYo. .oPYo. 8 8
    `8 8' 8  8 .oooo8 8 8
     8 8  8  8 8    8 8 8
`YooP' 8  8  8 `YooP8 8 8
:.....:..:..:..:.....:....
::::::::::::::::::::::::::
::::::::::::::::::::::::*/

@media only screen and (max-width: 820px) {
	header#section-intro {
		height: 115vh;
		background-image: url('./images/onwhitenew.png');
		background-position: 40vw 30vh;
		background-repeat: no-repeat;
		background-size: 70vw auto;
		background-attachment: fixed;
	}

	#section-intro video {
		display: none
	}

	#section-intro article {
		margin-top: 30vh;
	}

	#section-intro h2 {
		font-size: 1.1em;
	}

	.menu {
		background-size: 160px 40px;
		margin: 0;
		width: 100%
	}

	.nav__link {
		font-size: .75em;
		padding: 8px 6px;
		font-variant: small-caps;
	}

	h1 {
		font-size: 1.5em;
	}

	h2 {
		font-size: 1.25em;
	}

	article {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	section img {
		display: block;
	}

	section {
		padding-bottom: 320px;
	}

	#pitch {
		padding-top: 10vh;
		margin-left: auto;
		margin-right: auto;
	}

	#pitch .subject {
		font-size: 2rem;
	}

	#pitch .body {
		font-size: 1.5rem;
	}

}

@media only screen and (max-width: 574px) {
	#ks-info {
		margin: 0 0.75em;
	}
}


/*
o                       8
8                       8
8     .oPYo. odYo. .oPYo8 .oPYo. .oPYo. .oPYo. .oPYo. .oPYo.
8     .oooo8 8' `8 8    8 Yb..   8    ' .oooo8 8    8 8oooo8
8     8    8 8   8 8    8   'Yb. 8    . 8    8 8    8 8.
8oooo `YooP8 8   8 `YooP' `YooP' `YooP' `YooP8 8YooP' `Yooo'
......:.....:..::..:.....::.....::.....::.....:8 ....::.....:
:::::::::::::::::::::::::::::::::::::::::::::::8 ::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::..:::::::::::: */

@media only screen and (max-width: 1099px) and (min-width: 640px) and (orientation: landscape) {
	#section-intro {
		height: 90vh;
		background-image: url('./images/onwhitenew.png');
		background-position: center right;
		background-repeat: no-repeat;
		background-size: 30vw; /* 841x1078 */
		background-attachment: fixed;
	}

	#section-intro video {
		display: none
	}

	#section-intro article {
		margin-top: 0;
		padding-top: 15vh;
		margin-left: 40vw;
	}

	#section-intro article h1 {
		font-size: 1.25rem;
	}

	#section-intro article h2 {
		font-size: 1rem;
		margin-bottom: 0;
	}

	#section-intro article a {
		font-size: .9rem;
		line-height: 1;
	}


	#section-intro .contentbg.black.shaded {
		background-color: transparent;
	}

	#pitch {
		margin-left: auto;
		margin-right: auto;
	}
}