* { box-sizing: border-box; }
body {
	margin: 0;
	padding-top: 1rem;
	background-color: #fafafa;
	color: #444;
	font-family: nimbus-sans, Helvetica, sans-serif;
	font-size: 1.2em;
}

section {
	display: flex;
	min-height: 38rem;
}

h1 {
	font-family: courier-prime, courier;
	font-weight: normal;
	font-size: 3em;
	line-height: 1em;
	margin: 0 0 3rem 0;
	color: #222;
}
h1::before {
	animation: type 2s linear;
	content: "(beat)";
}
@keyframes type {
	0% { content: ""; }
	50% { content: "("; }
	65% { content: "(b"; }
	72% { content: "(be"; }
	83% { content: "(bea"; }
	95% { content: "(beat"; }
	100% { content: "(beat)"; }
}
h1 span { display: none; }
h2 {
	font-weight: normal;
	font-size: 1.5em;
	/*animation: appear 1.5s ease;
	animation-delay: 2.2s;*/
	/*opacity: 0; */
	animation-fill-mode: both;
}
@keyframes appear {
	0% { opacity: 0; transform: translate(0, 2rem); }
	100% { opacity: 1; transform:  translate(0,0); }
}

h1:after, .blink:after {
	content: '';
	display: inline-block;
	width: 4px;
	height: 1em;
	vertical-align: bottom; 

	margin-left: .05em;
	margin-bottom: .1em;
	transform: translateY(.05	em);

 	animation: blinker 1.3s linear infinite;
 	background-color: #333;
}

@keyframes blinker { 
  0% { opacity: 0; }
  1% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0; }
  100% { opacity: 0; }
}

h3 {
	max-width: 30rem;
	margin: 0 0 2rem 0;
	font-family: roboto-mono, times, serif;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.1em;
}
h3.blink:after {
	width: 2px;
	height: 1.15em;
	margin-bottom: -.05em;
}

h4 {
	text-transform: uppercase;
	letter-spacing: .1rem;
	font-size: .8em;
	font-weight: 600;
}
h5 {
	font-size: 1em;
}
.item h4 { margin-bottom: .5rem; }
.item p { font-size: .85em; line-height: 1.3em; }

p, li {
	font-size: .95em;
	line-height: 1.4em;
	letter-spacing: .02rem;
}
p {
	margin: .5rem 0 .5rem 0;
}
#faq p { font-size: .9em; }
a:link {
	color: #0088ee;
}
a:visited {
	color: #0077dd;
}

ul { padding-left: 1rem; }
li {
	margin: 0; 
	padding: .25rem 0 .25rem 0;
}


#overlay {
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease;

	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%;

	display: flex;
	align-items:  center;
	justify-content: center;
	z-index: 1000;
}
#overlay.active {
	opacity: 1;
	pointer-events: all;
}
#overlay .background {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%;

	background: rgba(0,0,0,.7);

	display: flex;
	align-items:  center;
	justify-content: center;
	z-index: -1;
}
.active .modal { opacity: 1; }
.modal {
	opacity: 0;
	max-width: 30rem;
	padding: 3rem;
	background-color: white;
	text-align: center;
	transform: translate(0,5rem);
	transition: all .75s ease;
}
.active .modal { transform: translate(0,0); }
.modal .icon {
	max-width: 40%;
	margin: 0 auto 2rem auto;

}
.icon img { max-width: 100%; }
.small {
	font-size: 80%;
}
.modal .small {
	margin-top: 2rem;
	color: #aaa;
}

/* SECTIONS */

#border {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%;
	border: solid 1rem white;
	pointer-events: none;
	z-index: 999;
}

section#intro {
	min-height: auto !important;
}
#intro {
	padding-left: 4rem;
	padding-top: 4rem;
	flex-direction: column;
	position: relative;
	background-color: white;
	/* background: linear-gradient(0deg, #e0e0e0 0%, #f5f5f5 100%); */
}

#intro p {
	max-width: 35rem;
}

#notification {
	padding: .5rem 1rem .5rem 1rem;
	margin: 0 1rem 0rem;
	border: solid 2px #0088ee;
}

#introduction .text {
	max-width: 36rem;
}
.image.introduction {
	width: auto;
	flex: 1;
	background-color: white;
}

.download-bar {
	margin: 3rem 0 1rem 0;
	display: flex;
}
.appstore {
	padding-right: 2rem;	
}
.appstore img {
	max-width: 10rem;
}
.adhoc {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.adhoc p {
	margin: 0;
}

@media screen and (max-width: 900px) {
	#introduction {
		flex-direction: column;
	}
	#introduction p {
		max-width: none;
	}
	#introduction .text .content {
		max-width: none;
	}
	#introduction .text {
		padding-bottom: 0;
		max-width: none;
	}
	.image.introduction {
		border-bottom: solid 2px white;
		padding-bottom: 50%;
	}
}

#intro .some {
	position: absolute;
	right: 2.5rem;
	top: 2.5rem;
	font-size: .6em;
	vertical-align: middle;
}
.some img { vertical-align: middle; opacity: .7; }
.some a { text-decoration: none; opacity: .8; color: #444; }
.some a:hover img { opacity: 1; }

.headline {
	margin-top: 3rem;
	margin-bottom: 3rem;
}
.learnmore {
	font-size: 1.1em;
	/* position: absolute;
	left: 2rem; bottom: 2rem; */
	margin-bottom: 0;
	flex: 0;
	padding: 0 0 3rem 0;
}

#introduction {
	background: #f0f0f0;
}

.appstore a img {
	border: none;
}

#footer {
	min-height: auto;
	padding: 4rem 2rem 4rem 2rem;

	background: #151515;
	color: #666;
	text-align: center;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#footer h3 {
	font-family: courier-prime, courier;
	margin-bottom: 0em;
	color: #aaa;
}
#footer h3.blink::after {
	background: #aaa;
	margin-bottom: 0.05rem;
}
#footer p.copyright { margin-top: 0; margin-bottom: 1rem; }
#footer a:link { color:  #888; } #footer a:visited { color: #666; }
#footer p {
	margin: .25em;
	font-size: .7em;
}

#faq {
	flex-wrap: wrap;
}
#faq h5 {
	margin-bottom: 0;
}
#faq h3 {
	margin-bottom: 0;
}
#faq .columns {
	margin-top: -3rem;
}

.text {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: 4rem;
	padding-left: 6%;
}
.text .text { padding: 0; }
.columns .text {
	padding-top: 1rem;
	width: 45%;
	justify-content: normal;
}
.columns {
	display: flex;
}
.top { padding: 3rem 4.5rem 0rem 3.5rem; max-width: none !important; margin: 0;}
.text .content {
	max-width: 30rem;
}
.text.grey {
	background: #eee;
}
.text.dark {
	background: #333;
	color: #eee;
}
.text.light {
	background: #fff;
}
.image {
	width: 40%; background: #aaa;
	background-size: cover;
	background-position: center center;
}
.image.dark {
	background-color: #333;
}

.image.center { background-size: auto; }
.item .image {
	width: 100%; padding-bottom: 60%; border: solid .3rem white;
	box-shadow: 0 .1rem 1rem rgba(0,0,0, .1);
}

#features {
	background: #eee;
	padding: 2rem 0 2rem 0;
	flex-direction: column;
}
#features h3 {
	margin: 2rem 0 0 0;
	margin-left: auto; margin-right: auto;

}
.list {
	padding: 1.5rem;
	margin-left: auto; margin-right: auto;
	max-width: 65rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.list .item {
	width: calc(33.33% - 2rem); margin: 1rem;
	display: flex;
	flex-direction: column;
}


.downloads { margin: 4rem 0 0 0; }

.download .bit {
	display: block;
	padding: .5rem;
	padding-left: 1rem;
	font-size: .6em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Courier-prime, courier;
	color: #999;
}

.download a.link {
	padding: .5rem .8rem .5rem .8rem;
	text-decoration: none;
	border: solid 2px #0088ee;
	color: #0088ee;
	font-weight: bold;
	font-size: .7em;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-family: inherit;
}
.buy, .version {
	margin-top: .5rem;
	color: #999;
	font-size: .7em;
	max-width: 20rem;
}
.version {
	color: #444;
}

.paper {
	max-width: 30rem;
	margin: 3rem auto auto;
}

@media screen and (max-width: 700px) {
	#introduction p {
		font-size: 1em;
	}
	p {
		font-size: .9em;
	}
	.list .item { width: calc(50% - 2rem); }
}
@media screen and (max-width: 600px) {
	h1 {
		font-size: 3em;
	}
	h3 {
		font-size: 1.1em;
		margin: 0 0 1rem 0;
	}
	p {
		font-size: .8em;
		line-height: 1.3em;
	}
	#border { border-width: .5rem; }
	.item p {
		font-size: .8em;
	}
}
@media screen and (max-width: 500px) {
	section { flex-direction: column; min-height: auto; }
	.image { width: 100%; order: 0; padding-bottom: 40%; }
	.text { width: 100%; order: 2; }
	.content { order: 2; }
	.item p { font-size: .7em; }
	.text { padding: 1.5rem; }
	#intro { height: 20rem; }
	.learnmore { display: none; }
	.headline { max-width: 80%; }
	.some { display: none; }
}