body {
	height:100%;
	width:100%;
	background-color: #111;
	color: hsla(35, 35%, 88%, .7);
	font-family: 'base-mono-wide', monospace;
    -webkit-font-smoothing: antialiased;
}

/*	
	grey: #ccc;
	background: #111;
	yellow: #ede41d;
	olive: #524f24;		
*/

#content {
	padding: 1.5rem;
}

#content-homepage {
	padding: 16rem 1.5rem 40rem 1.5rem;
}

#content-top {
	padding: 8rem 1.5rem 6rem 1.5rem;
}

.logo-migrations {
    width: 100%;
    height:62vh;
    top:0;
    background-color: transparent;
    position: fixed;
    margin: 0 auto;
    -webkit-animation: slide 18s;
    -moz-animation: slide 18s;
    -o-animation: slide 18s;
    animation: slide 18s;
    animation-iteration-count: 1;
}

@-webkit-keyframes slide {
    0%       { transform: translatex(100%) translatey(100%) }
    15%	   { transform: translatex(40%) translatey(0%) }
    30%      { transform: translatex(15%)translatey(10%) }
    40%      { transform: translatex(15%) translatey(-11%) }
    50%     { transform: translatex(20%) translatey(140%) }
    70%     { transform: translatex(90%) translatey(100%) }   
}

@-moz-keyframes slide {
    0%       { transform: translatex(100%) translatey(100%) }
    15%	   { transform: translatex(40%) translatey(0%) }
    30%      { transform: translatex(15%)translatey(10%) }
    50%      { transform: translatex(15%) translatey(-11%) }
    70%     { transform: translatex(20%) translatey(140%) }
    80%     { transform: translatex(90%) translatey(100%) }
}

@-o-keyframes slide {
    0%       { transform: translatex(100%) translatey(100%) }
    15%	   { transform: translatex(40%) translatey(0%) }
    30%      { transform: translatex(15%)translatey(10%) }
    50%      { transform: translatex(15%) translatey(-11%) }
    70%     { transform: translatex(20%) translatey(140%) }
    80%     { transform: translatex(90%) translatey(100%) }
}

nav {
	background-color: transparent;
	box-shadow: none;
}

.nav-wrapper {
	background-color: transparent;
	height:9%;
}

.nav-logo {
	font-family: 'base-mono-wide', monospace;
	color:#524f24;
	font-size: 2rem;
	font-weight:400;
	padding-left:2.3rem;
	padding-top:0;
	margin-top:1.8rem;
}

a.nav-info {
	font-family: "base-9-sans", sans-serif;
	color:hsla(57, 85%, 52%,.9);
	font-size: 1.2rem;
	font-weight:400;
	padding-right:2.5rem;
	padding-top:0;
	margin-top:.6rem;
}

a.nav-project {
	font-family: 'base-mono-wide', monospace;
	color:hsla(57, 85%, 52%,.9);
	font-size: 2rem;
	font-weight:400;
	padding-left:2.3rem;
	padding-top:0;
	margin-top:1.2rem;
}

p.nav-active {
	font-family: "base-9-sans", sans-serif;
	color:#524f24;
	font-size: 1.2rem;
	font-weight:400;
	padding-right:1.7rem;
	padding-top:0;
	margin-top:1.8rem;
}

/* scroll bar */

/* width */
::-webkit-scrollbar {
  width: .8rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: #535024;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ede41d;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #cccccc;
}

section { position:relative; height:100vh; }
.one { background:transparent; }
.left-half, .right-half { position:fixed; top:8rem; left:18rem; }
.right-half { left:22rem; right:0; overflow:hidden; top:0; }
.one .right-half { background:transparent; }
.right-half { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:8rem 12rem 40rem 2rem; /* scrollbar offset */ }

.after {
	margin-top:2rem;
}

video {
	margin-bottom:1.1rem;
	outline: none;
	background-color: transparent;
}

video::-webkit-media-controls-volume-slider {
	display:none;
}

video::-webkit-media-controls-mute-button {
	display:none;
}

.last { padding-bottom:4rem; }

a {
	color:hsla(57, 85%, 52%,.9);
	font-weight: 500;
}

h1 a {
	color:hsl(57, 85%, 52%);
}

a:hover {
	color:#524f24;	
}

p {
	font-family: 'p22-underground', sans-serif;
	font-size: 1.3rem;
	font-weight: 300;
	line-height: 1.5;
	margin-bottom:3rem;	
}

.credit-full {
	font-family: 'p22-underground', sans-serif;
	font-size: .9rem;
	font-weight: 300;
	line-height: 1.5;
	color: hsla(35, 35%, 88%, .3);
	padding-top:0;
	margin-top:0;
	float:right;
	padding-right:1.7rem;	
}


.credit {
	font-family: 'p22-underground', sans-serif;
	font-size: .9rem;
	font-weight: 300;
	line-height: 1.5;
	color: hsla(35, 35%, 88%, .3);
	padding-top:0;
	margin-top:0;
	float:right;
	padding-right:.4rem;	
}

.quote {
	font-size: 1.4rem;
	padding-left:1rem;
}

h1 {
	font-size: 6rem;
	font-weight: 700;
	font-style: normal;
	line-height: 1.1;
}

h2 {
	font-size: 3.8rem;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom:3rem;
	color: hsla(35, 35%, 88%, .8);
}

h3 {
	font-weight: 300;
	font-size: 2.2rem;
	line-height: 1.25;
	margin-bottom:3rem;
	max-width:92%;
}

h4 {
	font-weight: 400;
	font-size: 2.6rem;
	line-height: 1.5;
	margin-bottom:1rem;
}

h5 {
	font-weight: 200;
	font-size: 2rem;
	line-height: 1.2;
	margin-bottom:3rem;
	text-transform:uppercase;
}

h6 {
	font-family: 'p22-underground', sans-serif;
	font-style: normal;
	font-size:2rem;
	font-weight: 300;
	line-height: 1.4;
}

i {
	font-style: italic;
}

ol { margin-top:3rem; }

img {
	margin-bottom:3rem;
}

.scale-with-grid {
		max-width: 100%;
		height: auto;
}

@media (max-width: 1100px) {
	#content { padding: 1rem; }
	#content-top { padding: 6rem 1rem; }
	#content-homepage { padding: 36rem .4rem 44rem .4rem; }
	.nav-logo { padding-left:3rem;margin-top:3rem; }
	a.nav-info { padding-right:3em;margin-top:2rem; }
	.left-half, .right-half { position:fixed; top:12rem; left:5rem; bottom:0; }
	.right-half { left:8rem; right:0; overflow:hidden; padding-bottom:0; top:0; }
	.right-half { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:12rem 0 35rem 2rem; /* scrollbar offset */ }
	video { margin-bottom:1rem; }
	.last { padding-bottom:6rem; }
	::-webkit-scrollbar { width: .5rem; }
	.quote { font-size: 1.4rem; padding-left:2rem; }
	.after { margin-top:0; }
	h1 { font-size:6.4rem; }
	h2 { font-size: 3.2rem; }
	h3 { font-size:2rem;margin-bottom:4rem; line-height:1.4;max-width:100%; }
	h4 { font-size:3rem; }
}


@media (max-width: 1000px) {
	#content-homepage { padding: 20rem .4rem 36rem .4rem; }
	#content-top { padding: 4rem 1rem 6rem 1rem; }
	.nav-logo { margin-top:2.8rem; }
	a.nav-info { padding-right:3em;margin-top:1.8rem; }
	.left-half, .right-half { position:fixed; top:10rem; left:3.8rem; bottom:0; }
	.right-half { left:10rem; right:0; overflow:hidden; padding-bottom:0; top:0; }
	.right-half { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:10rem 2.4rem 20rem 2.4rem; /* scrollbar offset */ }
	h3 { font-size:2.2rem; margin-bottom:4rem; line-height:1.4;max-width:100%; }
	h4 { font-size:2rem; }
}

@media (max-width: 540px) {
	#content-homepage { padding: 14rem .4rem 29rem .4rem; }
	#content-top { padding: 4rem 1rem; }
	.nav-logo { padding-left:1.7rem;margin-top:1.3rem; }
	a.nav-info { padding-right:2rem;margin-top:.8rem;}
	a.nav-project { font-size:1.6rem;padding-left:1.5rem;margin-top:.8rem; }
	p.nav-active { margin-top:1.6rem; }
	.left-half, .right-half { position:fixed; top:7.6rem; left:1.8rem; bottom:0; }
	.right-half { left:8rem; right:0; overflow:hidden; padding-bottom:0; top:0; }
	.right-half { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:7.6rem .8rem 13.2rem .4rem; /* scrollbar offset */ }
	video { margin-bottom:.8rem; }
	.last { padding-bottom: 4.2rem; }
	p { font-size:1.3rem;margin-bottom:2rem; }
	.quote { font-size: 1.1rem; padding-left:0;margin-bottom:1rem;; }
	.after { margin-top:0; }
	h1 { font-size:3.4rem; }
	h2 { font-size: 1.8rem; }
	h3 { font-size:1.6rem; margin-bottom:3rem; line-height:1.3; }
	h4 { font-size:1.1rem; }
	h5 { font-size: 1.4rem; }
	h6 { font-size: 1.4rem; }
	img { margin-bottom:1rem; }
}

@media (max-width: 414px) {
	#content { padding: .8rem; }
	.nav-logo { font-size:1.5rem;padding-left:1.4rem;margin-top:1.2rem; }
	a.nav-info { font-size:1.1rem;padding-right:2rem;margin-top:.4rem;}
	a.nav-project { font-size:1.5rem;padding-left:1.4rem;margin-top:.4rem; }
	p.nav-active { margin-top:1.4rem; }
	.left-half, .right-half { position:fixed; top:5.2rem; left:1.2rem; bottom:0; }
	.right-half { left:7.2rem; right:0; overflow:hidden; padding-bottom:0; top:0; }
	.right-half { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:5.4rem .8rem 20rem .2rem; /* scrollbar offset */ }
	video { margin-bottom:.8rem; }
	.last { padding-bottom: 2rem; }
	p { font-size:1.3rem;margin-bottom:2rem; }
	.quote { font-size: 1.1rem; padding-left:0;margin-bottom:1rem;; }
	.after { margin-top:0; }
	h1 { font-size:3.4rem;line-height: 1; }
	h3 { font-size:1.3rem; margin-bottom:2rem; }
}

@media (max-width: 375px) {
	.left-half, .right-half { position:fixed; top:5.2rem; left:1.2rem; bottom:0; }
	.right-half { left:6rem; right:0; overflow:hidden; padding-bottom:0; top:0; }
	.right-half { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:5.4rem .8rem 20rem .2rem; /* scrollbar offset */ }

}

@media (max-width: 320px) {
	#content { padding: .6rem; }
	#content-homepage { padding: 10rem .3rem 16rem .3rem; }
	.nav-logo { font-size:1.3rem;padding-left:1.4rem;margin-top:1.1rem; }
	a.nav-info { padding-right:1.9rem;margin-top:.1rem; }
	a.nav-project { font-size:1.3rem;padding-left:1.4rem;margin-top:.2rem; }
	p.nav-active { font-size:1.1rem;padding-right:1.2rem;margin-top:1.2rem; }
	.left-half, .right-half { position:fixed; top:5rem; left:1.2rem; bottom:0; }
	.right-half { left:6rem; right:0; overflow:hidden; padding-bottom:0; top:0; }
	.right-half { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:5rem .8rem 10rem .2rem; /* scrollbar offset */ }
	h1 { font-size:3.4rem; }
	h2 { font-size:1.6rem; }
	h3 { font-size:1.1rem; margin-bottom:2rem; line-height:1.3; }
	h4 { font-size:1rem; }
	h5 { font-size: 1.3rem; }
	h6 { font-size: 1.2rem; }
}

@media (max-width: 280px) {
	#content { padding:.4rem; }
	#content-top { padding:4rem .5rem 2rem .5rem; }
	#content-homepage { padding: 12rem .2rem 28rem .2rem; }
	.nav-logo { font-size:1.1rem;padding-left:1.2rem;margin-top:1.1rem; }
	a.nav-info { font-size:1rem;padding-right:1.9rem;margin-top:0;}
	a.nav-project { padding-left:1.1rem;margin-top:.5rem; }
	.left-half, .right-half { position:fixed; top:5rem; left:1.2rem; bottom:0; }
	.right-half { left:6rem; right:0; overflow:hidden; padding-bottom:0; top:0; }
	.one .right-half { background:transparent; }
	.right-half { height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:5rem .8rem 19rem .2rem; /* scrollbar offset */ }
	video { margin-bottom:.8rem; }
	.last { padding-bottom: 2rem; }
	p { font-size: 1rem;margin-bottom:1.2rem; }
	.quote { font-size:.9rem;}
	.credit { font-size:.8rem; }
	.credit-full { font-size:.8rem; }
	h1 { font-size:2.6rem; }
	h2 { font-size:1.4rem;margin-bottom:1.2rem; }
	h3 { font-size:.9rem; margin-bottom:2rem; line-height:1.3; }
	h4 { font-size:.85rem; }
	h5 { font-size:1.2rem;margin-bottom:1.2rem; }
}		

/*
	.container-audio {
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    overflow: visible;
	}

	audio {
		width:100%;
		float:left;
		margin-bottom:3rem;
	}
	
	#divtoshow {position:absolute;display:none;color:#f6c125;background-color:transparent;font-size:10rem;margin-top:-2rem;height:0;font-weight:100; }
	
	#onme {width:100%;height:100vh;background-color:transparent;cursor:cell; }
*/