@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap');

/* Body, header, sections, footer */

	body { background: #A0CA92; font-family: 'Helvetica', sans-serif; }
	body, header, nav, section, footer { line-height: 150%; margin: 0; padding: 0; box-sizing: border-box; }
	header, section { background: white; margin:  1.5em auto 0 auto; padding: 1em; max-width: 1200px; width: 95%; }

/* Header */

	header { }
	header img { display: block; width: 100%; }
	
/* Navigation (not needed) */
 
	nav { background: white; }
	nav ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
	nav ul li { }
	nav ul li a { color: #1D3C71; display: inline-block; padding: 1em; text-decoration: none; }
	nav ul li a.on { background: #1D3C71; color: white; }
	nav ul li a:hover { background: #1D3C71; color: white; }

/* Login */

	form dl dt { font-weight: bold; margin: 0; padding: 0; }
	form dl dd { width: 100%; margin: 0; padding: 0; }
	form dl dd input[type='text'], form dl dd input[type='email'], form dl dd input[type='password'], textarea
	{
		background: white;
		box-sizing: border-box;
		margin-top: 1em;
		padding: 1em;
		width: 200px;
	}
	form input[type="submit"] { background: #A0CA92; border: 0; color: #444444; font-weight: bold; margin-top: 1em; padding: 1em; }
	form input[type="submit"]:hover { cursor: pointer; }
	
/* Title */

	section.title { font-family: 'Sansita Swashed', cursive; font-size: 2em; font-weight: bold; margin-top: 0.75em; }
	
/* Live */

	section.live { display: flex; }
	section div.video { flex-grow: 1; width: 65%; }
	section div.sidebar { flex: 0 0 35%; }
	
/* Faqs */
	
	section.faqs { background: white; text-align: center; }
	section.faqs > div { display: flex; justify-content: space-between; margin: 1em 0 0 0; text-align: left; }
	section.faqs > div > div { flex: 0 1 49%; margin: 0; text-align: left; }
	section.faqs > div > div dl { margin-top: 1em; }
	section.faqs > div > div dl dt { border: 2px solid #75B09C; font-weight: bold; }
	section.faqs > div > div dl dt a { color: #75B09C; box-sizing: border-box; display: inline-block; padding: 1em; text-decoration: none; width: 100%; }
	section.faqs > div > div dl dt a:hover { background: #75B09C; color: white; }
	section.faqs > div > div dl dd { display: none; line-height: 157%; margin: 0; padding: 1em; }
	/* section.faqs > div > div dl dt.clicked { background: #E32674; } */
	section.faqs > div > div dl dt.clicked a { background: #75B09C; color: white; }

@media screen and (max-width: 980px)
{
	section.faqs > div { flex-wrap: wrap; }
	section.faqs > div > div { flex: 0 0 100%; }
}
	
/* Classes */

	.cred { color: #cc0000; text-decoration: underline; }
	a.butt { background: #A0CA92; color: #444; display: inline-block; margin-top: 1em; padding: 0.7em 1em; text-decoration: none; }
	a.butt:hover { cursor: pointer; }
	a.butt.grey { background: grey; }