.demo-1{
  padding:0;margin:0; width:100%;height:100%;
}
.content {
	position: relative;
	display: grid;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin: 0 auto;
	min-height: 100vh;
}

.content--fixed {
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	display: grid;
	align-content: space-between;
	width: 100%;
	max-width: none;
	min-height: 0;
	height: 100vh;
	padding: 1.5em;
	pointer-events: none;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto auto 4em;
	grid-template-areas: 'header ...'
	'... ...'
	'github demos';
}

.content--fixed a {
	pointer-events: auto;
}

/* Canvas positions */
.content__inner {
	grid-area: 1 / 1 / 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-content: center;
}

.scene {
	position: absolute;
}

.scene--left {
	width: 100vmin;
	height: 100vmin;
	transform: translate3d(-50vmin,0,0);
}

.scene--full {
	width: 100%;
	height: 100vh;
}

.scene--up {
	height: 150vmin;
	width: 150vmin;
	top: -50vh;
	left: 50%;
	margin-left: -75vmin;
}




.content__title {
	font-family: 'Playfair Display', serif;
	font-size: 10vw;
	font-weight: normal;
	color: rgba(200,200,200,0.7);
	text-align: center;
	margin: 0;
	pointer-events: none;
}

.content__subtitle {
	font-size: 1.25em;
	background: #ac1122;
	color:  #fff;
	padding: 0.45em 0.5em;
	line-height: 1;
	margin: 0;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	font-weight: bold;
	text-transform: uppercase;
}

.content__holder {
    width: 100%;
    height: 400px;
    text-align:center;
	position:absolute;
    left:0; right:0;
    top:0; bottom:0;
	margin:auto;
	
	max-width:100%;
	max-height:100%;
	overflow:hidden;
}

@media screen and (max-width: 55em) {
	.content__title {
		font-size: 3em;
	}
	.content__subtitle {
		font-size: 0.85em;
	}
}