/* Primary style */
*, *::after, *::before {
	 -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			 box-sizing: border-box;
}
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

html, header {height: 100vh;}

body {color: #331d35; background-color: gainsboro; font-size: 1rem; font-family: 'hp_R', Arial, sans-serif; overflow: hidden; overflow-y: scroll;}
main {margin-top: 10vh;}
#plotList {list-style: none;}

.intro {
	position: fixed; top: 0; z-index: 10; overflow: hidden; width: 100%; height: 100%; background: var(--brand-hp);
	-webkit-transition: -webkit-transform 0.6s;
			transition: transform 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
			transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.container--open .intro {
	-webkit-transform: translate3d(0, -100%, 0) translate3d(0, 150px, 0);
			transform: translate3d(0, -100%, 0) translate3d(0, 150px, 0);
}

.intro-title {position: absolute; bottom: 1rem; padding: 0 3rem 1rem; font-size: 3.5rem; line-height: 1.25; color: white;}

.trigger {background: none;}
.trigger--active .open, .close {display: none;}
.trigger--active .close {display: block;}

@media screen and (max-width: 768px) {
	.intro-title {width: 70%; bottom: 1rem; padding: 1rem; font-size: 1.5rem;}
}