@font-face {
  font-family: Yerington;
  src: url("fonts/yerington_typeface-webfont.woff2");
}
@font-face {
  font-family: Quisas;
  src: url("fonts/quisas-updated-webfont.woff2");
}

* {
  box-sizing: border-box;
}

body {
	background-color:#000000;
	color:#FFFFFF;
	font-family: "Arial", non-serif;
	font-size:17px;
	margin: 60px auto;
	width: 90%;
}

a {
	color:#FFFFFF;
	text-decoration:none;
}
	a {
  		position: relative;
	}
	a::before {
    	content: '';
    	position: absolute;
    	width: 100%;
    	height: 2px;
    	border-radius: 1px;
    	background-color: #f0f312;
    	bottom: 0;
    	left: 0;
    	transform-origin: right;
    	transform: scaleX(0);
    	transition: transform .3s ease-in-out;
  	}
	a:hover::before {
		transform-origin: left;
		transform: scaleX(1);
	}

.clear {
	clear:both;
}

.divider {
	background-image:url("imgs/divider.png");
	background-position: top center;
	background-repeat:no-repeat;
	height: 62px;
	margin: 120px 0;
	width: 100%;
}

.spacer {
	margin: 120px 0 0 0;
}

#navi {
	color:#333333;
	font-family:"Quisas", sans-serif;
	margin:0 auto;
	text-align:center;
}
	#navi span {
		display:inline-block;
		margin: 0 40px;
	}
	#navi a {
		color:#FFFFFF;
	}
	#navi h1 {
		display:inline-block;
		font-size:1.2em;
	}
#navi ul {
	display:inline-block;
	font-size:1.2em;
	list-style-type:none;
	margin: 0 0 0 0;
	padding:0 0 0 0;
}
#navi ul li {
	display:inline-block;
	padding: 0 6px;
}

main {
	margin: 0 auto;
}
	main h2 {
		color:#FFFFFF;
		font-family:Yerington;
		font-size: 4em;
		letter-spacing: .05em;
		margin: auto auto 0 auto;
		text-align:center;
	}
	main p {
		margin: 0 auto 26px auto;
		text-align:center;
		width:65%;
	}
	.listen, .extras {
		margin-top:26px;
		text-align:center;
		width:45%;	
	}
		.listen {
			float: left;
		}
		.extras {
			float:right;
		}
			.listen ul, .extras ul, .social ul {
				display:inline-block;
				list-style-type: none;
				margin: 0;
				padding:0;
			}
			.listen ul li, .extras ul li, .social ul li {
				display:inline-block;
				margin:0;
				padding:0;
			}
				.listen ul li + li::before, .extras ul li + li::before, .social ul li + li::before {
					color: #333333;
  					content: '|';
					margin: 0 12px 0 8px;
				}
			.listen .tag, .extras .tag {
				color:#000000;
				display:inline-block !important;
				font-size:.85em;
				font-weight:bold;
				letter-spacing: .05em;
				margin-right: 12px;
				text-align:center;
				text-transform:uppercase;
			}
			.listen .tag {
				background-image: url("imgs/listen-bg.png");
				background-repeat:no-repeat;
				height:32px;
				padding: 8px 0 0 0;
				width:116px;
			}
			.extras .tag {
				background-image: url("imgs/extras-bg.png");
				background-repeat:no-repeat;
				height:32px;
				padding: 8px 0 0 0;
				width:111px;
			}
aside {
}
	aside h2 {
		color:#FFFFFF;
		font-family:Yerington;
		font-size: 3.2em;
		letter-spacing: .05em;
		margin: auto auto 0 auto;
		text-align:center;
	}
	aside p.desc {
		margin: 0 auto 26px auto;
		text-align:center;
	}
#about {
	justify-content: center;
	display: grid;
	column-gap: 50px;
	grid-template-columns: auto auto auto auto auto;
}
	.anna-about, .lynn-about, .tiff-about, .jordan-about, .theguy-about {
		margin: 0 auto 24px auto;
	}
		.anna-about img, .lynn-about img, .tiff-about img, .jordan-about img, .theguy-about img {
			float:left;
			margin: 0 auto 0 auto;
			text-align:center;
			padding: 0 3% 0 0;
			width: 30%;
		}
		.anna-about p, .lynn-about p, .tiff-about p, .jordan-about p, .theguy-about p {
			float:right;
			margin: 0;
			padding: 0 0 0 0;
			width:68%;
		}

footer {
	margin: 0 auto;
}

	footer .copy, footer .sign-off, footer .social {
		text-align:center;
	}
	footer .copy {
		float:left;
		padding-top:30px;
		width:40%;
	}
	footer .sign-off {
		margin: 0 auto;
		width:15%;
	}
	footer .social {
		float:right;
		padding-top:30px;
		width:40%;
	}


/* Small Devices (under 768px) */
@media only screen and (max-width: 1024px) {
	body {
		margin: 0 auto;
		width:90%;
	}
	#navi h1 {
		display:block;
	}
	#navi span {
		display:none;
	}
	#about {
			grid-template-columns: auto;
	}
		.anna-about img, .lynn-about img, .tiff-about img, .jordan-about img, .theguy-about img {
			float:left;
			margin: 0 3% 0 0;
			width: 20%;
		}
		.anna-about p, .lynn-about p, .tiff-about p, .jordan-about p, .theguy-about p {
			float:right;
			padding: 10px 0 0 0;
			width:74%;
		}
	footer .copy, footer .sign-off, footer .social {
		width: 100%;
		text-align:center;
	}
	footer .sign-off {
		margin: 30px auto;
	}
	footer .copy, footer .social {
		float:none;
		padding-top:10px;
	}
}