html {
	font-family: 'Roboto Mono';	
	line-height: 1.75;
	font-size: 18px;
	border: 1em solid #CED2D3;
	padding-bottom: 6em;
}	

body {
	padding: 0;
	margin: 0;
}

h1 {
	font-size: 3em;
	letter-spacing: inherit;
	font-weight: 500;
	line-height: 1.2;
}

h1, h2 {
	text-transform: uppercase;
}

#news h3 {
	margin: 1.5em 0 0;
	padding: 0;
	font-weight: 500;
	font-size: 1rem;
}

#news h3+p {
	margin-top: 0;
}

header nav {
	display: flex;
	justify-content: space-evenly;
	max-width: 100%;

}

header nav a {
	display: block;
	color: white;
	min-width: 10em;	
	margin: 18px auto;
	text-align: center;
	padding: .5em;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .05em;
}

header .backhome {
	display: block;
	margin-top: -2em;
	margin-bottom: 3em;
}

.cta {
	font-style: italic;
	text-align: center;
	margin-bottom: 0;
	padding-bottom: 0;
}

.btn-colors1 {
	box-shadow:-6px 6px 0 0 #70C29F;
	background-color: #8B184B;
}

.btn-colors2 {
	box-shadow:-6px 6px 0 0 #C17893;
	background-color: #3C6484;
}

.btn-colors3 {
	box-shadow:-6px 6px 0 0 #3CBEE6;
	background-color: #FF5A13;
}

main, article, header {
	padding: 0 4em;
}

article + article, main + article, section + aside {
	padding-top: 2em;
}

section img, main img {
	max-width: 100%;
	height: auto;
}

hr {
	border-top: 1px dashed #666;
	border-bottom: none;
}



li+li {
	margin-top: 1.5em;
}

#how-to-help ol {
	counter-reset:li; /* Initiate a counter */
	margin-left:0; /* Remove the default left margin */
	padding-left:0; /* Remove the default left padding */
}
#how-to-help ol > li {
	position:relative; /* Create a positioning context */
	padding: .75em; /* Add some spacing around the content */
	list-style:none; /* Disable the normal item numbering */
	border-top:2px solid #666;
	background:#f1f1f1;
}
#how-to-help ol > li:before {
	content:counter(li); /* Use the counter as content */
	counter-increment:li; /* Increment the counter by 1 */
	/* Position and style the number */
	position:absolute;
	top:-2px;
	left:-2em;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	width:2em;
	/* Some space between the number and the content in browsers that support
	   generated content but not positioning it (Camino 2 is one example) */
	margin-right: .5em;
	padding: .75em;
	border-top:2px solid #666;
	color:#fff;
	background:#666;
	font-size: 1em;
	font-weight:bold;
	text-align:center;
}

* + .twitter-tweet-rendered {
	margin-top: 2em !important;
}



  .embed-container { 
  	position: relative; 
  	padding-bottom: 56.25%; 
  	height: 0; 
  	overflow: hidden; 
  	max-width: 100%; 
  	margin: 3em 0;
  } 

  .embed-container iframe, .embed-container object, .embed-container embed { 
  	position: absolute; 
  	top: 0; 
  	left: 0; 
  	width: 100%; 
  	height: 100%; 
  }

  .twitter-tweet {
  	width: 100% !important;
  	max-width: 100% !important;
  	box-sizing: border-box !important;
  	min-width: 100px !important;
  }


@media (min-width: 1280px) {

	main, article, header {
	 	display: grid;
	 	grid-template-columns: 40rem 50fr 50fr;
	 	grid-gap: 4em;
	}

	section, aside {
	    grid-column: 1;
	    order: 1;
	  }

	header nav {
		display: block;
	}

	header nav a {
		width: min-content;
	}


	  aside.right {
	  	grid-column: 2;
	  	order: 2;
	  }

	  aside.right2 {
	  	grid-column: 2 / 4;
	  	order: 2;
	  }

	  aside.right, aside.right2 {
	  	margin-top: 1em;
	  }

	  .cta {
	  	margin-top: 8em;
	  }

}

@media (min-width: 1280px) and (max-width: 1360px) {
	.twitter-tweet {
		width: 28vw !important;
	}
}

@media (max-width: 1280px) {

	aside.menu {
		padding-top: 3em;
		margin-bottom: 4em;
	}

	h1 {
		text-align: center;
	}

	header img {
		margin: 0 auto;
		display: block;
	}
}

@media (max-width: 800px) {

	html {
		font-size: 16px;
	}

	h1 {
		font-size: 2em;
		text-align: center;
	}

	main, article, header {
		padding: 0 2em;
	}

	
	header nav {
		display: block;
	}

	header nav a {
		margin-left: auto;
		margin-right: auto;
		width: 50%;
}

	header .backhome {
		text-align: center;
		margin-top: -1em;
	}


@media screen and (min-width: 1800px) {
	html {
		font-size: 2vw;
	}
}