* {
	margin: 0;
	padding: 0;
	border: 0 none;

	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent
}
:focus {
	outline: none;
}

html,body,#all, #grfx {
	height: calc(100vh - var(--ios-gap, 0px));
}

body {
	background: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 62.5%;
}

html, body, #all, #grfx {
	overflow: hidden;
	height: calc(100vh - var(--ios-gap, 0px));
}







@keyframes pan {
	0% { background-position: 0 0; }
	100% { background-position: -81px 0; }
}
#all {
	background: url('triangle-dark.png') repeat;
	background-size: 81px 140px;
	animation: pan 5s linear infinite;
}
#grfx {
	height: calc(100vh - var(--ios-gap, 0px));
	transition: height 0.4s ease-in-out;
	position: relative;
}
#svgmask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#txt-mask path {
	transition: transform .4s cubic-bezier(0.57,-0.34, 0.4, 1.39);
}
#txt-mask rect {
	transition: transform .3s cubic-bezier(0.57,-0.34, 0.4, 1.39);
}
path#z0 {
	transition-delay: 0.4s;
}
path#z1 {
	transition-delay: 0.6s;
}
path#z9 {
	transition-delay: 0.2s;
}


.banner {
	height: 0;
	overflow: hidden;
	padding-left: 15%;
	padding-right: 15%;
	transition: height 0.4s ease-in-out, padding 0.4s ease-in-out;
	position: relative;
}

.showB #bannerB {
	height: 10vh;
	padding-top: 2.5vh; 
	padding-bottom: 2.5vh; 
}


.showT #bannerT {
	height: 10vh;
	padding-top: 2.5vh; 
	padding-bottom: 2.5vh; 
}


.showC #bannerC {
	transform: translateY(-50%) scale(1);
	pointer-events: initial;
	opacity: 1;
}

.showB #grfx,
.showT #grfx  {
	height: 85vh;
}

.showB.showT #grfx {
	height: 70vh;
}




#bannerB {
	color: white;
	background: #10242f;
}
#bannerB button {
	/*
	background: #00d2d8;
	background: #00b3e0;
	background: linear-gradient(45deg, #00d2d8 0%, #00b3e0 100%);
	*/
	background: linear-gradient(135deg, #fff 0%, #69dde0 50%, #007996 100%);
	background-size: 200% auto;
	background-position: 100% 0;
}
#bannerB button:hover {
	background-position: 0% 0;
}




#bannerT {
	background: #dfe6ea;
}
#bannerT button {
	background: linear-gradient(135deg, #d3d9da 0%, #9eb2b7 50%, #779198 100%);
	background-size: 200% auto;
	background-position: 0% 0;
}
#bannerT button:hover {
	background-position: 100% 0;
}



#bannerC {
	margin: 0 calc(15% - 2em);
	background: linear-gradient(135deg, #69dde0 -70%, #eafeff 30%, #69dde0 140%);
	height: calc(50vh - var(--ios-gap, 0px));
	position: absolute;
	top: calc(50vh - var(--ios-gap, 0px) / 2);
	transform: translateY(-50%) scale(2);

	box-sizing: border-box;
	padding: 2em 0 2em 2em;

	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 1em rgba(0,0,0, 0.2);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s, transform 0.4s;
}

#bannerC button {
	background: #10242f;
	color: #fff;
}

#bannerC button:hover {
	background: #000;
	text-shadow: 0 0 3px #999;
}

.close {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.close:hover {
	opacity: 1;
}

.scrollb {
	overflow: auto;
	padding-right: 2em;
	max-height: 100%;
}

#nfo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#infobutt {
	position: absolute;
	top:  2em;
	right: 2em;
	cursor: pointer;
}

#infotext {
	color: #000;
	background: #fff;
	position: absolute;
    top: 0;
    left: -100vw;
	width: 70%;
    height: calc(70vh - var(--ios-gap, 0px));
    padding: 15vh 15%;
    transition: left 0.4s ease-in-out;
}

.shownfo #infobutt svg {
	
}
.shownfo #infotext {
	left: 0;
}

#scroll {
	overflow: auto;
	border: 2px solid #000;
	border-left: 0 none;
	border-right: 0 none;
	height: 68vh;
	padding: 1vh;
}

h1, p {
	padding: 0.4em 0;
}
h1 {
	font-size: 4.8em;
	font-weight: 300;
}
p, button, blockquote {
	font-size: 1.6em;
}
#bannerC p, blockquote {
	line-height: 1.5em;
}

.bottom {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: inherit;
	width: 100%;
    box-sizing: border-box;
}

button {
	font-family: inherit;
	padding: 0.3em 0.8em;
	margin-left: 0.8em;
	float: right;
	border-radius: 2px;
    cursor: pointer;
    transition: background-position 0.2s linear;
}
#infotext p {
	font-size: 2.4em;
}
a {
	color: #0AE;
}

blockquote {
	overflow: hidden;
	position: relative;
	padding-left: 2em;
	font-style: italic;
	background-color: rgba(255,255,255, 0.5);
	background-clip: content-box;
	border-radius: 3px;
	margin: 0.5em 0;
}



blockquote {
	border-left: 3px double rgba(0,0,0, 0.3);
	padding: 0.25em 1em;
	background-clip: padding-box;
}
/*
blockquote:before,
blockquote:after {
	content: '§';
	font-size: 2em;
	width: 0.8em;
	position: absolute;
	top: 0;
	left: 0;
	color: rgba(0,0,0, 0.5);
	height: 100%;
	font-style: normal;
	border-right: 3px double rgba(0,0,0, 0.5);
}
blockquote:after {
	top: 3px;
	left: 3px;
	border-right: 0 none;
}
*/

blockquote span {
	display: block;
	position: relative;
	padding-left: 1.5em;
}
blockquote span:before {
	content: 'f)';
	position: absolute;
	left: 0;
	top: 0;
}

@media (orientation: portrait){
	#z2 {
		transform: translate(220px,-176px);
	}
	#z0 {
		transform: translate(240px,-176px);
	}
	#z1 {
		transform: translate(-254px,200px);
	}
	#z9 {
		transform: translate(-198px,200px);
	}
	#barT{
		transform: matrix(.6, 0, 0, 1, 210, -150);
	}
	#barB{
		transform: matrix(.6, 0, 0, 1, 210, 180);
	}

}
@media (max-width: 1030px){
	.scrollb{
		overflow-y: scroll; /* has to be scroll, not auto */
		-webkit-overflow-scrolling: touch;
	}
}
@media (orientation: portrait), (max-width: 980px){
	.banner,
	#infotext {
		padding-left: 7%;
		padding-right: 7%;
	}
	#infotext {
		width: 86%;
	}
	#bannerC {
		margin: 0 calc(7% - 2em);
	}

	#infobutt {
		top:  1em;
		right: 1em;
	}
	#infobutt svg {
		width: 48px !important;
		height: 48px !important;
	}
}

@media (orientation: portrait), (max-height: 770px){

	.showB #bannerB {
		height: 15vh;
	}

	.showT #bannerT {
		height: 15vh;
	}

	.showB #grfx,
	.showT #grfx  {
		height: calc(80vh - var(--ios-gap, 0px));
	}

	.showB.showT #grfx {
		height: calc(60vh - var(--ios-gap, 0px));
	}

}


@media (orientation: portrait) and (max-height: 660px){

	.showB #bannerB {
		height: 20vh;
	}

	.showT #bannerT {
		height: 20vh;
	}

	.showB #grfx,
	.showT #grfx  {
		height: calc(75vh - var(--ios-gap, 0px));
	}

	.showB.showT #grfx {
		height: calc(50vh - var(--ios-gap, 0px));
	}

}


@media (max-height: 500px){

	.showB #bannerB {
		height: 25vh;
	}

	.showT #bannerT {
		height: 25vh;
	}

	.showB #grfx,
	.showT #grfx  {
		/* height: 70vh; */
		height: calc(70vh - var(--ios-gap, 0px));
	}

	.showB.showT #grfx {
		height: calc(40vh - var(--ios-gap, 0px));
	}

}


@media (max-width: 680px){
	h1 {
		font-size: 2.4em;
	}
	p, button, blockquote {
		font-size: 1.5em;
	}
	#infotext p {
		font-size: 1.6em;
	}


	#infobutt {
		top:  0.5em;
		right: 0.5em;
	}
	#infobutt svg {
		width: 32px !important;
		height: 32px !important;
	}
}
@media (max-width: 480px){
	p, button, blockquote {
		font-size: 1.4em;
	}
}
@media (max-width: 410px){
	p, button, blockquote {
		font-size: 1.3em;
	}
}
@media (max-width: 360px){
	p, button, blockquote {
		font-size: 1.2em;
	}
}