body{
	background-color: #000;
}

.container{
	margin-left:auto;
	margin-right:auto;
}

.welcome{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100dvh;
	display: none;

	background-color: #000;
}

.welcome h1{
	color:#fff;
	font-family: ogg, sans-serif;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
}

.welcome .sans{
	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.welcome a{
	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
	color:#fff;
	border-bottom: 1px solid #fff;
	transition: color 600ms, border-bottom 600ms;
	cursor: pointer;
}

.welcome a:hover{
	color:#9b1818;
	border-bottom: 1px solid #9b1818;
	transition: color 600ms, border-bottom 600ms;
}

.welcome .volumeCheck{
	letter-spacing: 0;
	position: fixed;
	bottom:40px;
	left:40px;
}

.loadingInfo{
	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#fff;
	text-transform: uppercase;
	opacity:0;
}

.backgrounds{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100dvh;
}

.backgrounds div{
	background-size: cover;
	background-position: center;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100dvh;
	opacity:0;
}

.haikus{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100dvh;
}

.haikus .haiku{
	opacity:0;
	position: absolute;
	width:100%;
	
	transform-origin:bottom left;
	text-shadow: 0px 0px 8px rgba(0,0,0,1);
}

.haiku p{
	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#fff;
	

	font-size: 3.75vw;
	line-height:4.5vw;
	letter-spacing:-.1vw
}

.haiku .serif{
	font-family: ogg, sans-serif;
	font-weight: 700;
	font-style: normal;

	font-size: 6vw;
	line-height:7.5vw;
}

.haiku p span{
	opacity: 0;
}

.haiku:nth-of-type(1) p:nth-of-type(1){
	
}

.haiku:nth-of-type(1) p:nth-of-type(2){
	margin-left: 22vw;
}

.haiku:nth-of-type(1) p:nth-of-type(3){
	margin-left: 5vw;
	margin-bottom:4.5vw;
}

.haiku:nth-of-type(1) p:nth-of-type(4){

}

.haiku:nth-of-type(1) p:nth-of-type(5){
	margin-left: 11vw;
}

.haiku:nth-of-type(1) p:nth-of-type(6){
	margin-left: 22vw;
	margin-bottom:7.5vw;
}

.haiku:nth-of-type(1) p:nth-of-type(7){

}

.haiku:nth-of-type(1) p:nth-of-type(8){
	margin-left: 5vw;
}

.haiku:nth-of-type(1) p:nth-of-type(9){

}

/*////*/

.haiku:nth-of-type(2) p:nth-of-type(1){
	margin-left: 11vw;
}

.haiku:nth-of-type(2) p:nth-of-type(2){
	margin-left: 31vw;
	margin-bottom:4.5vw;
}

.haiku:nth-of-type(2) p:nth-of-type(3){
	
}

.haiku:nth-of-type(2) p:nth-of-type(4){
	margin-left: 21vw;
	margin-bottom:7.5vw;
}

.haiku:nth-of-type(2) p:nth-of-type(5){
	margin-left: 11vw;
}

.haiku:nth-of-type(2) p:nth-of-type(6){
	margin-left: 5vw;
}

.haiku:nth-of-type(2) p:nth-of-type(7){

}

/*////*/

.haiku:nth-of-type(3) p:nth-of-type(1){
	margin-left: 23vw;
}

.haiku:nth-of-type(3) p:nth-of-type(2){
	margin-left: 4.5vw;
	margin-bottom:4.5vw;
}

.haiku:nth-of-type(3) p:nth-of-type(3){
	margin-left: 3vw;
}

.haiku:nth-of-type(3) p:nth-of-type(4){
	margin-left: 10vw;
}

.haiku:nth-of-type(3) p:nth-of-type(5){
	margin-left: 19vw;
	margin-bottom:7.5vw;
}

.haiku:nth-of-type(3) p:nth-of-type(6){
	
}

.haiku:nth-of-type(3) p:nth-of-type(7){
	margin-left: 19vw;
}

/*////*/

.haiku:nth-of-type(4) p:nth-of-type(1){
	
}

.haiku:nth-of-type(4) p:nth-of-type(2){
	margin-left: 12vw;
}

.haiku:nth-of-type(4) p:nth-of-type(3){
	margin-left: 25vw;
	margin-bottom:4.5vw;
}

.haiku:nth-of-type(4) p:nth-of-type(4){
	
}

.haiku:nth-of-type(4) p:nth-of-type(5){
	margin-left: 6vw;
}

.haiku:nth-of-type(4) p:nth-of-type(6){
	margin-left: 12vw;
}

.haiku:nth-of-type(4) p:nth-of-type(7){
	margin-left: 9vw;
}

.haiku:nth-of-type(4) p:nth-of-type(8){
	margin-left: 6vw;
	margin-bottom:7.5vw;
}

.haiku:nth-of-type(4) p:nth-of-type(9){

}

.haiku:nth-of-type(4) p:nth-of-type(10){
	margin-left: 48vw;
}

.haiku:nth-of-type(4) p:nth-of-type(11){
	margin-left: 60vw;
}

.next{
	cursor: pointer;
	position: fixed;
	width: 100%;
	height: 100dvh;
	top:0;
	left:0;
	display: none;
}

.button{
	cursor: pointer;

	width:40px;
	height:40px;
	display: block;

	background-color: rgba(255,255,255,1);

	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	color:#9b1818;

	transition: background-color 600ms, color 600ms;
}

.button:hover{
	background-color: #9b1818;
	color:#fff;
}

.nextArrow{
	position: absolute;
	right:0;
	bottom:0;
}

svg{
	display: block;
}

.st0 {
	fill: #9b1818;
	transition: fill 600ms;
}

.button:hover .st0{
	fill: #fff;
	transition: fill 600ms;
}

.st1 {
	fill: none;
	stroke: #9b1818;
	stroke-miterlimit: 10;
	stroke-width: 2px;
}

.button:hover .st1{
	stroke: #fff;
	transition: stroke 600ms;
}

.menuButton{
	position: fixed;
	top:0;
	right:0;
	height:40px;
	display: none;
}

.identityButton{
	position: sticky;
	top:0;
	left:0;
	height:40px;
/*	display: none;*/
	float:left;

	background-color: #9b1818;
	z-index: 1;
}

.identityButton:hover{
	background-color: #fff;
}

.identityButton .st0{
	fill: #fff;
	transition: fill 600ms;
}

.identityButton:hover .st0{
	fill: #9b1818;
	transition: fill 600ms;
}

.infoButton{
	clear:left;
	position: sticky;
	bottom:0;
	left:0;
	height:40px;
}

.info .closeButton2{
	position: absolute;
	top:0;
	right:0;
	height:40px;
	border-bottom:none;

	background-color: #9b1818;
	transition: background-color 600ms;
}

.info .closeButton2:hover{
	background-color: #fff;
	transition: background-color 600ms;
}

.info .closeButton2 .st0{
	fill: #fff;
	transition: fill 600ms;
}

.info .closeButton2:hover .st0{
	fill: #9b1818;
	transition: fill 600ms;
}

.menu{
	position: fixed;
	top:0px;
	right:-40px;
	transition:right 600ms;
}

.reveal{
	right:0;
	transition:right 600ms;
}

.reestablishFullWidthElement{
	background-color: #fff;
	pointer-events: auto;
}

.textNarrative{
	position: relative;
	padding-top: 100dvh;
	padding-bottom: 100dvh;
	pointer-events: none;
}

.textNarrative h3{
	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.textNarrative .haiku p{
	color:#9b1818;
}

.info{
	background-color: #9b1818;
	color: #fff;

	position: fixed;
	height: 100dvh;
	top:0;
	left:0;

	padding:40px;

	display: none;
	z-index: 2;
}

.info h6 a{
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff;
	transition: color 600ms, border-bottom 600ms;
}

.info h6 a:hover{
	color:#000;
	border-bottom: 1px solid #000;
	transition: color 600ms, border-bottom 600ms;
}

.info h4{	
	font-family: "aptos-mono", sans-serif;
	font-weight: 700;
	font-style: normal;

	margin-bottom: 16px;

	font-size: 20px;
	letter-spacing: 2px;
}

.info h5{	
	font-family: "aptos-mono", sans-serif;
	font-weight: 700;
	font-style: normal;

	margin-bottom: 10px;

	font-size: 16px;
}

.info h6{
	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;

	margin-bottom: 5px;

	font-size: 12px;
	line-height: 20px;
}

.info p{
	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;

	margin-bottom: 20px;

	font-size: 12px;
	line-height: 20px;

	text-indent: -10px;
}

.info cite{	
	font-family: "aptos-mono", sans-serif;
	font-weight: 400;
	font-style: normal;

	display: block;

	margin-bottom: 20px;

	font-size: 10px;
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
/*		width:90%;*/
		width:calc(100vw - 80px);
	}

	.welcome h1:nth-of-type(1){
		padding-top:calc(50dvh - 10vw);
		letter-spacing: .5vw;
		margin-bottom: 0;
	}

	.welcome h1{
		font-size: 10vw;
		margin-bottom: 5vw;
	}

	.welcome .sans{
		margin-left: 12.25vw;
		letter-spacing: 1.65vw;
	}

	.welcome a{
		font-size: 3vw;
		padding-bottom:.5vw;
		letter-spacing: .5vw;
	}

	.loadingInfo{
		padding-top:5vw;
		font-size: 2vw;
		letter-spacing: .5vw;
	}

	.haikus .haiku{
		left:40px;
		bottom:40px;
	}

	.textNarrative .container{
		padding-bottom:25vw;
	}

	.textNarrative h3{
		font-size: 3.6vw;
		width:75%;
		margin-left: 25%;
		line-height: 5.5vw;
	}

	.exdent{
		text-indent: -2.25vw;
	}

	.textNarrative .top{
		padding-top:25vw;
	}

	.textNarrative .bottom{
		padding-bottom:25vw;
	}

	.info{
		width:calc(100% - 80px);
	}
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container{
/*		width:95%;*/
		width:calc(100vw - 80px);
	}

	.welcome h1:nth-of-type(1){
		padding-top:calc(50dvh - 5vw);
		letter-spacing: .25vw;
		margin-bottom: 0;
	}

	.welcome h1{
		font-size: 5vw;
		margin-bottom: 2.5vw;
	}

	.welcome .sans{
		margin-left: 6.125vw;
		letter-spacing: .825vw;
	}

	.welcome a{
		font-size: 1.5vw;
		padding-bottom:.25vw;
		letter-spacing: .25vw;
	}

	.loadingInfo{
		padding-top:2.5vw;
		font-size: 1vw;
		letter-spacing: .25vw;
	}

	.haikus .haiku{
		left:40px;
		bottom:40px;

		transform: scale(.75);
	}

	.textNarrative .container{
		padding-top:10vw;
	}

	.textNarrative h3{
		font-size: 2.6vw;
		margin-left: 37.5%;
		line-height: 3.75vw;
		width:50%;
	}

	.exdent{
		text-indent: -1.5vw;
	}

	.textNarrative .shift{
		margin-left: 50%;
	}

	.textNarrative .haiku{
		transform: scale(.75);
		margin-left: -14.25%;
	}

	.info{
		width:calc(50% - 80px);
	}
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){
	.container{
/*		width:95%;*/
		width:calc(100vw - 80px);
	}

	.welcome h1:nth-of-type(1){
		padding-top:calc(50dvh - 2.5vw);
		letter-spacing: .125vw;
		margin-bottom: 0;
	}

	.welcome h1{
		font-size: 2.5vw;
		margin-bottom: 1.25vw;
	}

	.welcome .sans{
		margin-left: 3.0625vw;
		letter-spacing: .4125vw;
	}

	.welcome a{
		font-size: .75vw;
		padding-bottom:.125vw;
		letter-spacing: .125vw;
	}

	.loadingInfo{
		padding-top:1.25vw;
		font-size: .5vw;
		letter-spacing: .125vw;
	}

	.haikus .haiku{
		left:40px;
		bottom:40px;

		transform: scale(.5);
	}

	.textNarrative .container{
		padding-top:10vw;
	}

	.textNarrative h3{
		font-size: 1.35vw;
		margin-left: 43.75%;
		width:25%;
		line-height: 2.15vw;
	}

	.exdent{
		text-indent: -.75vw;
	}

	.textNarrative .shift{
		margin-left: 50%;
	}

	.textNarrative .haiku{
		transform: scale(.5);
		margin-top:-10%;
		margin-bottom:-10%;
	}

	.info{
		width:calc(33% - 80px);
	}
}