body { font-family:"letter-gothic-std",monospace; font-weight:700; line-height:1em;}
body { background-color:#fac6c8;} /* NOTE: hex from indesign mockup */
body { background-color:#fce8e9;} /* NOTE: matches display color of indesign mockup */

p,
div {padding:0; margin:0;}

p,
.row { margin-top:2rem;}

h1,
h2,
h3,
.tagline {
	font-family:"Souvenir-Bold",serif;
	font-weight:bold;
	line-height:1em;
	text-transform:none;
	letter-spacing: 0.01em
}

hr {border-color:black;}

h1 { margin:0;padding:0; margin-bottom:0.3rem; text-align:center;}
h2 { margin:0;padding:0; margin-bottom:0.3rem;}
h3 { margin:0;padding:0; margin-bottom:0.3rem;}

a { color:black; text-decoration:none;}
a:hover {color:black; text-decoration:underline;}


#nav ul {margin:0;}
#nav li {display:inline-block; font-size:2.1rem; font-family:"Souvenir-Bold", serif; font-weight:bold; line-height:1em;text-transform:none; margin:0; padding:0 2rem;}

#nav a {border-bottom:0.6rem solid transparent;color:black; text-decoration:none;}
#nav a.active,
#nav a:hover {text-decoration:none; border-bottom-color:black;}


.socialLinks a:hover,
.sharelinks a:hover {
	/*color:deeppink;*/
	color:#F68C5A;
}

.columns.centered,
.column.centered {
	text-align:center;
}

#playscape {
	margin-bottom:4rem;
}

#contact {
	position:relative;
	min-height:100vh;
}

#loop-thing {
	position: absolute;
	top:-3.5rem;
	left:-18rem;
}

.falsefooter {line-height: 3em;}
.tagline{ display:inline-block; font-size:2.2rem;}
.comingsoon { display:inline-block; text-transform: uppercase; font-size:1.7rem;}
.socialLinks { display:inline-block; margin-left:-1rem; position:relative; top:-0.25rem }
.socialLinks i.fa {margin:0 0.5rem; font-size:1.9rem;}
.socialLinks::before{
	content: "|";
	font-size:1.3em;
}

.contentWrapper {}
.contentWrapper img {max-width:100%; height:auto;}

.eyebrow,
.sharelinks,
.subscribeLink,
.eventListing .dateTime,
.eventListing .location {
	font-size:1.5rem;
	text-transform:uppercase;
	margin-bottom:.8rem;
}

#home {padding-top:4rem; margin-top:0;}
#events {position:relative;}
#pluggything {position:absolute; right:8rem; z-index:-1; width:13rem;}
#katieHeadshot { max-width:50%; height:auto; margin:auto;}

.hero {
	background-image:url("../img/mudtype.png");
	background-repeat:no-repeat;
	background-size:contain;
	padding-top:9rem;
	margin-top:2.5rem;
}

.jumbo {
	font-size:3rem;
	font-family:"Souvenir-Bold", serif;
	font-weight:bold;
	line-height:1.2em;
	text-transform:none;
	padding-top:8rem;
}

.tight {margin-top:0;}



.archivelinks p {
	margin:0;
	font-family:"alternate-gothic-no-1-d";
	font-weight:normal;
	text-transform:uppercase;
	font-size:3rem;
}

.subscribeLink {
	margin-top:1em;
	margin-bottom:1.8em;
}

.fa-long-arrow-right {
	overflow:hidden;
}
.fa-long-arrow-right:before
{
	position:relative;
	left:-1.25rem;
	top:.15em;
}

.fa-long-arrow-right:before
{
	position:relative;
}

.linkbutton {
	display:inline-block;
	border:0.3rem solid black;
	padding:0.8rem 3rem 0.4rem 3rem;
	line-height:2.4rem;
	text-decoration: none;
	background-color:white;
	font-family:"alternate-gothic-no-1-d";
	font-weight:normal;
	text-transform:uppercase;
	font-size:3rem;
	color:black;
}

.caption {
	font-size:.9em;
	color:blue;
}


@media (max-width:549px) {

	.hero {margin-top: 0;	}

	#hbgz {

		position:fixed;
		left:1rem;
		top:1rem;
	}

	#hbgz input {
		display: block;
		width: 40px;
		height: 32px;
		position: absolute;
		top: -7px;
		left: -5px;

		cursor: pointer;

		opacity: 0; /* hide this */
		z-index: 2; /* and place it over the hamburger */

		-webkit-touch-callout: none;
	}

	#hbgz input:checked ~ nav {
		position:fixed;
		left:0;
		background-color:#ffffff;
	}

	#navContainer {
	position:absolute;
	left:-100rem;
	}


}


@media (min-width: 550px) {

	#hbgz>i, #hbgz>input {display:none;}

	body.fixed-nav #navContainer {
	  width:100%;
	  max-width:100%;
	  position:fixed; top:0;
	  z-index:2000;
		margin-top:2rem;
	}

	body.fixed-nav #nav {width:100%; margin:0 auto; position:fixed; margin:auto;}

	#nav {margin-top:5rem;}

	/****  extra columns widths for skeleton ****/
	.four-and-a-half.columns        { width: 33%;}
	.seven-and-a-half.columns       { width: 59%;}

	#about {position:relative}

	body,
	#about .katie p  {font-size:1.4rem; line-height:1.5em;}

	#about p { font-size:1.7rem; margin-top:1em; line-height:1.6em}

	h1	{font-size:3rem; margin-top:12rem;}
	h2	{font-size:2rem;}
	h3	{font-size:1.7rem;}

	#katieHeadshot { max-width:unset;}

	.bigpad{padding-top:0rem;}
	.heroShift{
		margin-left:0; padding-left:0; min-width:100%;
	}

	.heroShift p:first-of-type {
		margin-top:0;
	}

	.jumbo { font-size:4rem; }

	.footer {text-align:center; margin-top:2rem;}
	.footer a {margin:0 0.5rem; padding:0; display:inline;}

}

@media (min-width:700px) {

	h1	{font-size:3rem; margin-top:8rem;}
	h2	{font-size:2rem;}
	h3	{font-size:1.7rem;}

}

@media (min-width:840px) {

	h1	{font-size:4rem; margin-top:8rem;}
	h2	{font-size:3rem;}
	h3	{font-size:2rem;}}

	.comingsoon {margin:0 1.8rem 0 1.8rem; padding:0;}

@media (min-width: 1000px) {

	h1	{font-size:6rem; margin-top:8rem;}
	h2	{font-size:3.6rem;}
	h3	{font-size:3rem;}

	.subscribeLink {
		margin-top:2em;
		margin-bottom:.8em;
	}

	.heroShift{
		margin-left:-16rem; padding-left:15rem; min-width:unset;
		position:relative; left:3rem;
	}
	.bigpad{padding-top:19rem;}

}

@media (min-width: 1125px) {
	.heroShift{margin-left:-16rem; padding-left:10rem}
}

@media (min-width: 1200px) {
	.bigpad	{padding-top:23rem;}

}