body {
	margin: 0;
	font-family: "Helvetica Neue", helvetica, arial;
	font-size: 16px;
	line-height: 26px;
	color: #000;
	text-align: center;
}

a {
	color: #000;
	border-bottom: 1px solid #000;
	text-decoration: none;
	transition: border 0.5s;
}

a.img, a.img:hover {
	border: none;
}

a:hover {
	border-bottom: 1px solid #aaa;
	transition: border 0.1s;
}

h1, h2, h3 {
	font-weight: bold;
}

.hidden {
	display: none;
}

h2.has-subhead {
	margin-bottom: 6px;
}

h3, p.small, #footer p {
	font-size: 13px;
	line-height: 20px;
}

.faq h2 {
	margin-top: 72px;
}

.faq h3 {
	font-size: 18px;
	margin-top: 24px;
}

p.large {
	font-size: 24px;
	line-height: 32px;
}

#footer p {
	margin-bottom: 0;
}

#footer p a {
	font-weight: bold;
}

p, ul, ol, h3 {
	margin: 0 18px 1em 18px;
}

.faq p, .faq ul, .faq ol, .faq h3 {
	margin-left: 0;
	margin-right: 0;
}


.no-bottom-margin {
	margin-bottom: -7px;
}

.margin-after {
	margin-bottom: 112px !important;
}

.margin-caption {
	margin-top: 36px;
	margin-bottom: 48px;
}

.extra-top-padding {
	padding-top: 24px;
}

ul, ol {
	text-align: left;
	padding-left: 22px;
}

img, video, iframe {
	border: 0;
}

.ratio-16-9 {
	padding-bottom: 56.4%;
}

.ratio-4-3 {
	padding-bottom: 75%;
}

.proportional {
	position: relative;
	width: 100%;
	height: 0;
}

.proportional iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.mixcloud-embed {
	margin: 56px 18px 0 18px;
}

.instagram-embed {
	padding: 0 18px 0 18px;
	margin: 56px auto 0 auto;
}

.mixcloud-embed-container {
	margin-bottom: 56px;
}

.soundcloud-embed-container {
	margin: 56px 18px 0 18px;
}

.bandcamp-embed-container {
	margin: 56px 18px 0 18px;
}

.bandcamp-embed-container iframe {
	margin: 0 auto 0 auto;
}

.vimeo-embed-container {
	padding: 56px 0px 0px 0px;
}

.vimeo-embed-container-home {
	padding: 48px 18px 0px 18px;
}

.vimeo-embed-container-home-first {
	padding: 0 18px 48px 18px;
}

.twitch-embed-container-home-first {
	padding: 0 18px 0px 18px;
}

.video-above-screenshot {
	margin-bottom: 56px;
}

.instagram-embed {
	border: none;
}

.instagram-embed iframe {
	min-width: 220px !important;
	max-width: 1000px !important;
}

.twitter-timeline-container {
	/*margin: 48px 18px 0 18px;*/
	margin: 0px 18px 48px 18px;
	border: 1px solid rgba(15,70,100,.12);
}

img#sequencer-screenshot {
	max-width: 1249px;
}

img, video {
	 width: 100%;
	 height: auto;
}

img.portrait-mofo {
	max-width: 500px;
}

.no-top-margin {
	margin-top: 0;
}

.normal-bottom-margin {
	margin-bottom: 48px;
}

.header {
	width: 100%;
}

#mark-eats-header {
	height: 520px;
}

#sequencer-header {
	height: 780px;
	/* background: url('../images/sequencer-header.jpg') no-repeat; */
	/* background-size: cover; */
	/* background-position: center 25%; */
}

#title-container {
	margin: 0 48px 0 48px;
	position: relative;
	text-align: center;
}

#mark-eats-header #title-container {
	top: 48%;
	margin: 0 64px 0 64px;
}

#sequencer-header #title-container {
	top: 25%;
}

.title {
	max-width: 760px;
}

#content {
	margin: 36px auto;
	padding: 0 72px 0 72px;
}

.width-1280 {
	max-width: 1280px;
}

.width-1600 {
	max-width: 1600px;
}

.width-1920 {
	max-width: 1920px;
}

.section, .section-wide {
	margin: 56px auto;
	clear: both;
}

.section {
	max-width: 676px;
}

.section-wide {
	max-width: 100%;
}

.intro {
	max-width: 660px; /* This makes the intro text wrap nicely */
	margin: 0 auto 160px auto;
}

.column {
	width: 50%;
	float: left;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

#footer {
	padding-top: 18px;
	height: 2em;
}


/*** Small screens ***/

@media handheld, only screen and (min-width: 2200px) {
	#sequencer-header {
		height: 1000px;
	}
}

@media handheld, only screen and (max-width: 980px) {

	#content {
		padding: 0 36px 0 36px;
	}

	.mixcloud-embed {
		width: 284px;
		height: 284px;
	}
	#sequencer-header #title-container {
		top: 18% !important;
	}
}

@media handheld, only screen and (max-width: 720px) {

	body {
		font-size: 14px;
		line-height: 22px;
	}

	p.large {
		font-size: 18px;
		line-height: 26px;
	}

	h3, p.small, #footer p {
		font-size: 11px;
		line-height: 18px;
	}

	#mark-eats-header {
		height: 300px;
	}

	#sequencer-header {
		height: 400px;
	}

	#title-container {
		margin: 0 16px 0 16px;
		top: 10%;
	}

	#mark-eats-header #title-container {
		margin: 0 32px 0 32px;
	}

	#content {
		padding: 0;
	}

	#content.faq {
		padding-left: 18px;
		padding-right: 18px;
	}

	.column {
		width: 100%;
	}

	.margin-after, .intro {
		margin-bottom: 96px !important;
	}

	.stay-separate {
		margin-bottom: 48px;
	}

	.top-of-list {
		margin-bottom: 0;
	}

	/*.instagram-embed {
		width: 282px;
		height: 378px;
	}*/

	.mixcloud-embed {
		width: 284px;
		height: 284px;
	}

}