.box-container {
			grid-template-rows: repeat(3, auto);
			grid-template-areas:
			"content"
			"about"
			"exposition";
		}
.poet-container {
	/*background-size: cover;*/
	background-repeat: no-repeat;
	/*background-position-y: 1vw;*/
	display: grid;
	/*grid-template-columns: 1fr 10% 9% 20%;*/
	grid-template-rows: auto;
	grid-template-areas:
	"buffer leftVoice button rightVoice";
	background-size: 70%;
}
.leftVoiceBox {
	grid-area: leftVoice;
	/*font-size: 1em;*/
	font-size: 20.6px;
	letter-spacing: .4em;
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.leftVoiceBox {
		transform: translateX(136px);
		
		line-height: 1.45em;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.leftVoiceBox {
		font-size: 30px;
	}
}

@media only screen and (min-width: 1441px) {
	.leftVoiceBox {
		font-size: 29.37px;
	}
}

.economiesWhispers {
	opacity: 0;
}

.economiesWhispersLeft {
	opacity: 1;
}



.buttonBox {
	grid-area: button;
}
.rightVoiceBox {
	grid-area: rightVoice;
	/*font-size: 0.7em;*/
	text-align: right;
	/*margin-right: 80px;*/
	/*margin-right: 20%;*/
	/*margin-top: 67px;*/	
}

@media only screen and (min-width: 1441px) {
	.rightVoiceBox {
		padding-right: 20%;
	}
}

.box-4 {
	margin-top: 3vw;
}
.box-4 {
			grid-area: content;
		}
.box-5 {
			grid-area: about;
		}
.box-6 {
	grid-area: exposition;
}
.exposition-container {
	display: grid;
	grid-template-columns: 1fr 8% 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"exposition1 buffer exposition2";
}
.exposition1 {
	grid-area: exposition1;
	padding: 0px 0px 50px 150px;
}
.exposition2 {
	grid-area: exposition2;
	padding: 0px 150px 50px 0px;
}
.screenpageTitle {
	word-spacing: 3vw;
}

/*economies*/
.expositionButton {
		background-color: rgba(255,253,212,0.4);
		border: 1px solid #600;
		outline: none;
}

.expositionButton:hover {
	border: 1px solid #660000;
	background-color: rgba(102, 77, 0, 0.1)!important;
	color: white!important;
}

.exposition1, #leftButton, #expositionText{
	font-family: Cormorant-Regular;
	color: #1a0000; 			
	/*font-size: 1.1vw;*/
	font-size: 0.644em;
}

.exposition2, #rightButton, #expositionText2{
	font-family: Cormorant-Regular; 
	color: #1a0000; 
	/*font-size: 1.1vw;*/
	font-size: 0.644em;
}

#expositionText{
	display:none;
}
#expositionText2  {
	display:none;
}

#exposition {
	table-layout: fixed ;
	width: 92% ;
}
#exposition td {
	width: 40%;
	vertical-align: top;
}
.authorReference {
	font-family: Alegreya_Sans_SC; 
	color:#42180a; 
	font-size: 1em;
	padding: 0px 250px 30px;
  margin: 0px;
    margin-top: 0px;
  margin-top: -20px;
}		

#whispersEconomiesDiv {
	position: absolute;
  margin-left: 13%;
  margin-top: 10%;
}

#weYourGiftsVideo {
	position: absolute;
  opacity: 0.2;
  width: 700px;
  margin-left: -30px;
  z-index: -1;
}

@media only screen and (min-width: 1441px) {
	#weYourGiftsVideo {
		margin-left: -35px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#weYourGiftsVideo {
		width: 670px;
	}
}

#exposition1Content {
	overflow: hidden;
	height: 0em;
}
#exposition2Content {
	overflow: hidden;
	height: 0em;
}

#exposition1More {
	display:none;
}

#exposition2More {
	display: none;
}

#exposition1More:checked ~ #exposition1Content {
	height: auto;
}

#exposition2More:checked ~ #exposition2Content{
	height: auto;
}

#exposition1ReadMore {
	cursor: pointer;
	padding-bottom: 50px;
}

#exposition2ReadMore {
	cursor: pointer;
	padding-bottom: 50px;
}




@media (orientation : portrait) {
	/*html {
		background: url("images/FeetBeachPortrait65.jpg") no-repeat center center fixed;
	}*/
	.box-container {
	grid-template-columns: 45% 55%;
	grid-template-areas:
		"title title"
		"buffer subtitle"
		"content content"
		"about about"
		"exposition exposition"
		"nextScreen nextScreen";
		
	}
	.screenpageTitle {
		word-spacing: 2vw;
	}
	.poet-container {
		font-size: unset;
		/*background-image: url(images/GenderTroubleGiftsOfExchangeCropped.png);*/
		
		
		grid-template-rows: auto;
		grid-template-areas:
		"buffer leftVoice button rightVoice";
	}
	.leftVoiceBox {
		/*font-size: 20.6px;*/
		line-height: 1.45em;
	}
	.rightVoiceBox {
		/*font-size: 4.4vw;*/
		font-size: 3.382vw;
		line-height: 1.9;
	}
	
	#outOfTheVoidClickable {
			/*visibility: hidden;*/
	}
	
	#animationButton {
		border: 1px;
		padding: 0px 1vw;
		letter-spacing: unset;
	}
	
	#animationButton:hover {
		border: 1px;
		padding: 0px 1vw;
		letter-spacing: unset;
	}
	.exposition-container {
		grid-template-columns: auto;
		grid-template-rows: auto 20px auto;
		grid-template-areas:
		"exposition1"
		"buffer"
		"exposition2";
	}
	.previousNext {
		font-size: 2.75vw;
	}
	.exposition1, #leftButton, #expositionText{			
		font-size: 4vw;
	}
	.exposition2, #rightButton, #expositionText2{
		font-size: 4vw;
	}
	.exposition1, .exposition2 {
		margin-top: 4vw;
		margin-bottom: 5vw;
		padding-left:1vw;
		padding-right:1vw;
		padding:10px;
		width: 55%;
		margin-left: 9%;
		background-color: rgba(255,253,212,0.15);
		/*border: 3px double;*/
	}
	.authorReference {
		font-size: 2.95vw;
	}
	

}
/*end of economies section*/



@media only screen and (min-width: 1400px) {
	.authorReference {
		font-size: 0.45em;
	}
}

/*economies animation*/
		@keyframes opacity {
		  from {opacity: 0;}
		  to {opacity: .99;}
		}
		
		/*#we1, */#yourSection, #noRight, #we2, #kindling, #how, #unearthing {
			opacity: 0;
		}
		
		#we1Section {
			opacity: 0;
			visibility: hidden;
		}
		
		#animationButton {
			border: 1px solid #660000;
			font-family: Open_Sans;
			background-color: rgba(255,253,212,0.6);
			padding: 0px 15px;
			letter-spacing: 0.072em;
			outline: none;
			font-size: 12px;
			cursor: pointer;
			position: absolute;
  left: 75%;
  top: 250px;
		}
		
		#animationButton:hover {
			border: 1px solid #660000;
			background-color: rgba(102, 77, 0, 0.1);
			color: white;
			padding: 0px 15px;
			letter-spacing: 0.072em;
		}
		/*end of economies animation*/
		
@media only screen and (max-width: 734px) {
	.rightVoiceBox {
		font-size: 20.5625px;
		/*margin-right: initial;*/
    /*margin-right: 3px;*/
	/*padding-right: 3px;*/
    line-height: 1.3em;
	margin-top: 40px;
	}
	
	
	#weYourGiftsVideo {
		opacity: 20%;
	}
	
	#animationButton {
		left: 37%;
		top: 120px;
		z-index: 1;
	}
	
	#weYourGiftsVideo {
		margin-left: -10px;
		width: 452px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.rightVoiceBox {
		font-size: 30px;
		line-height: 1.3em;
	}
}