/*
roughtly desktop @media only screen and (min-width: 1441px) { instead of @media only screen and (min-width: 1400px) {
@media only screen and (min-width: 1069px) {
roughly iPad @media only screen and (min-width:735px) and (max-width: 1068px) { instead of @media only screen and (min-width: 576px) and (max-width: 767.98px) { (maybe?)
roughly iPhone (vertical and horizontal): @media only screen and (max-width: 734px) { instead of @media only screen and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
declare 1068 before 734
declare 1069 before 1441
if 734 and 1441, doesn't matter???

Template:

{
	
}

@media only screen and (max-width: 734px) {
	{
		
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	{
		
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	{
		
	}
}

@media only screen and (min-width:735px) and (max-width: 1068px) {
	{
		
	}
}

@media only screen and (min-width:735px) and (max-width: 1068px) and (orientation: portrait) {
	{
		
	}
}

@media only screen and (min-width:735px) and (max-width: 1068px) and (orientation: landscape) {
	{
		
	}
}

@media only screen and (min-width: 1069px) and (max-width: 1440px) {
	{
		
	}
}

@media only screen and (min-width: 1069px) and (max-width: 1440px) and (orientation: portrait) {
	{
		
	}
}

@media only screen and (min-width: 1069px) and (max-width: 1440px) and (orientation: landscape) {
	{
		
	}
}

@media only screen and (min-width: 1441px) {
	{
		
	}
}

*/

body, html {
	margin: 0;
	overscroll-behavior: none;
}

@media only screen and (min-width:735px) and (max-width: 1068px) {
	body, html {
		max-width: 100%;
	}
}

@media only screen and (max-width: 734px) {
	body, html {
		max-width: 100%;
	}
}



@media only screen and (min-width:1441px) {
	.content {
		max-width: 1441px;
		margin: auto;
		
	}
}

@media only screen and (min-width: 1921px) {
	.content {
		max-width: 1920px;
		margin: auto;
	}
}



body {
	min-width: 375px;
	background-color: gray;
}

@media only screen and (min-width:735px) and (max-width: 1068px) {
	body {
		font-size: 1.7vw;
	}
}

@media only screen and (max-width: 734px) {
	body {
		font-size: calc(15px + 0.390625vw);
		-webkit-text-size-adjust: 100%;
	}
}

@media only screen and (min-width: 1441px) {
	body {
		font-size: 1.7vw;
	}
}

* {
  box-sizing: border-box;
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#correspondentDiv {
		position: relative;
		top: -5px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	#correspondentDiv {
		top: initial;
		transform: translateY(520px);
	}
}

#correspondentDiv {
	text-align: center;
	width: initial;
	margin-left: initial;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#correspondentDiv {
		top:0px;
		transform: translateY(-10px);
	}
}

@media only screen and (min-width: 1441px) {
	#correspondentDiv {
		top: initial;
		transform: translateY(580px);
	}
}

/*Unused currently*/
.narratorialHide {
	display: none;
}

.narratorialGerminationsHidden {
	visibility: hidden;
}

.whispers {
	width: max-content;
	margin: 0px; /*Collapses the margins for whispers, check with other media queries*/
}

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

.cursorPointer {
	cursor: pointer;
}

.clickableText {
	cursor: pointer;
	pointer-events: auto;
}

@media only screen and (min-width: 1441px) {
	.hideThis {
		visibility: hidden;
	}
}

/*Collapsible Menu*/
#collapsible {
	font-family: Alegreya_SC;
	font-size: .5em;
	color: #42180a;
	line-height: 1.4em;
	background-color: rgba(197,221,195,0.6);
	letter-spacing: 0.075em;
	outline: none;
	/*cursor: pointer;*/
	border: 1px solid #660000;
	z-index: 2;
	position: fixed;
}

@media only screen and (max-width: 734px) {
	#collapsible {
		font-size: 1em;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#collapsible {
		font-size: 16px;
	}
}

/*Unsure why this has a media query for hover, come back to here if something odd happens relating to collapsible look)*/
/*@media (hover) {*/
#collapsible:hover {
	border: 1px solid #660000;
	background-color: rgba(102, 77, 0, 0.1);
	color: #c5ddc3;
	cursor: pointer;
}
/*}*/

#content {
	margin-top: 25px;
	display: none;
	overflow: hidden;
  /*background-color: #f1f1f1;*/
	position: fixed;
	z-index: 1;
	font-size: 16px;
	font-family: Alegreya_Sans_SC;
	line-height: 1.4em;
	color: #42180a;
	/*cursor: pointer;*/
	padding: 18px;
	z-index:2;
}

@media only screen and (max-width: 734px) {
	#content {
		font-size: .8em;
		background-color: rgba(197,221,195,0.4);
	}
}


@media only screen and (max-width: 734px) and (orientation: portrait) {
	#readAuthor {
		top: initial;
		bottom: 20px;
		
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#readAuthor {
		top: initial;
		bottom: 30px;
		
	}
}


#collapsible, #content {
	top: 200px;
	left: 25px;
}

#collapsible {
	z-index: 2;
}

@media only screen and (max-width: 734px) {
	#collapsible {
		font-size: 1em;
	}
	
	#collapsible, #content {
		top: 125px;
	}
}

/*Beginning of dropUp CSS for video used in index.html*/
.dropUp {
  display: none;
}

.dropUp + label {
  position: relative;
  display: block;
}

.remember > .dropUp + label > video {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  height: auto;
  bottom: 110%;
  display: none;
  left: 30px;
}

.remember > .dropUp + label > img {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  height: auto;
  bottom: 110%;
  display: none;
  left: 30px;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.remember > .dropUp + label > video {
		left: -24px;
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.remember > .dropUp + label > img {
		left: -24px;
	}
}

.dropUp + label > span {
	position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  height: auto;
  bottom: 100%;
  display: none;
  left: 30px;
}

.dropUp:checked + label > video, .dropUp:checked + label > span {
  display: block;
}

.dropUp:checked + label > img, .dropUp:checked + label > span {
  display: block;
}

#everlyDropUpLabel {
	z-index: 1;
}

@media only screen and (max-width: 734px) {
	#everlyDropUpLabel {
		margin-top: -165px;
		/*left: -20px;*/
	}
}

/*Video related CSS*/

#whenIWas {
	width: 1080px;
	/*opacity: 55%; */
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#whenIWas {
		width: 360px;
		left: -25px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#whenIWas {
		width: 535px;
		transform: translateX(50px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	#whenIWas, #ancientArguments {
		width: 755px;
		transform: translatex(-150px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	#whenIWas, #ancientArguments {
		width: 1000px;
		transform: translateX(-130px);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#ancientArguments {
		width: 535px;
	}
}




.rememberVideos {
	width: 1080px;
	opacity: 55%;
}

@media only screen and (max-width: 734px) {
	.rememberVideos {
		width: 360px;
	}
}

.rememberVideosVertical {
	width: 405px;
	opacity: 55%;
	/*transform: translateY(-70%);*/
	right: 0px;
	position: absolute;
	display: none;
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.rememberVideosVertical {
		width: 340px;
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.rememberVideosVertical {
		width: 200px;
		/*transform: translateY(-140%);*/
	}
}

@media only screen and (min-width: 1441px) {
	.rememberVideosVertical {
		width: 476px;
	}
}


	
#ancientVideo {
	position: -webkit-sticky;
	position: sticky;
	padding-bottom: initial;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#ancientVideo {
		position: absolute;
		z-index: 1;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#ancientVideo {
		top: 375px;
		transform: translateY(-300%);
	}
}



/*#thisShiftingWomanhoodVideo {
	position: -webkit-sticky;
	position: sticky;
	padding-bottom: initial;
}*/

@media only screen and (max-width: 734px) {
	#ancientPoetDirect, #outOfTheVoidPoetDirect, #thisShiftingWomanhoodPoetDirect, #anotherLogicOfKinshipPoetDirect, #theUntoldYetPoetDirect {
		position: absolute;
		right: 3%;
		/*font-size: 1.25em;*/
		transform: translateY(-70px);
	}
	
	#ancientPoetDirect {
		transform: initial;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#ancientPoetDirect {
		top: 70px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#ancientPoetDirect {
		top: -48px;
	}
}

@media only screen and (min-width: 1441px) {
	#ancientPoetDirect {
		position: relative;
		top: -50px;
	}
}

@media only screen and (min-width: 1441px) {
	#outOfTheVoidPoetDirect {
		position: relative;
		top: -50px;
	}
}

@media only screen and (min-width: 1441px) {
	#thisShiftingWomanhoodPoetDirect {
		top: -60px;
	}
}

.poetDirectAppearing {
	pointer-events: none;
}

@media only screen and (min-width: 735px) {
	.ancientPoetDirect, .poetDirectAppearing {
		font-size:.9em;
		z-index: 2;
		position:relative;
	}
}

@media only screen and (min-width: 1441px) {
	.poetDirectAppearing {
		top: -50px;
	}
}

@media only screen and (min-width: 1441px) {
	#anotherLogicOfKinshipPoetDirect {
		top: -60px;
	}
}

.remember {
	position:sticky;
    top:100vh;
    transform:translateY(-225%);
	/*padding-bottom: 15vh;*/
	font-size: 1.5em;
	letter-spacing: .3em;
	font-weight: initial;
	color:  #42180a;
	opacity: 90%;
	margin-left: 38%;
	width: fit-content;
}

.poetRemember {
	position:sticky;
    /*top: 325px;*/
	top: 0px;
    /*transform:translateY(-225%);*/
}

.poetRemember > label > p {
	text-align:right;
}

@media only screen and (max-width: 734px) {
	.remember {
		margin-left: 5%;
		font-size: 23px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.remember {
		top: 475px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.remember {
		margin-left: initial;
		transform: translate(160px, -100px);
		font-size: 24px;
	}
}

@media only screen and (min-width: 1441px) {
	.remember {
		font-size: .9em;
	}
}

@media only screen and (max-width: 734px) {
	#remember {
		position: fixed;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#remember {
		transform: translate(160px, -130px);
	}
}

@media only screen and (min-width: 1441px) {
	#remember {
		transform: translateY(-500%);
	}
}

.fixed-bg {
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

@media only screen and (min-width: 1441px) {
	.fixed-bg {
	    background-attachment: fixed;
	}
}


.title {
	color: #42180a;
	font-family: Alegreya_SC;
	margin-bottom: 0px;
	text-align: left;
	font-weight: bold;
}

@media only screen and (max-width: 734px) {
	.title {
		font-size: 24.675px; /*1.5em*/
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.title {
		letter-spacing: 0.2em;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.title {
		letter-spacing: 0.5em;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1068px) {
	.title {
		font-size: 40px;
		letter-spacing: 0.39em;
	}
}

@media only screen and (min-width: 1069px) and (max-width: 1440px) {
	.title {
		font-size: 50px;
		letter-spacing: 0.39em;
	}
}

@media only screen and (min-width: 1441px) {
	.title {
		font-size: 48.95px; /*2.55vw*/
		letter-spacing: 1.3em;
	}
}

.opaque {
	opacity: 30%;
}

.opaqueForDarkBackground {
	opacity: 60%;
}

#subtitle {
	color: #c5ddc3;
	font-family: Alegreya_Sans_SC;
	font-weight: bold;
	text-align: right;
}

@media only screen and (max-width: 734px) {
	#subtitle {
		margin-top: 6px;
		font-size: 17.6px;
	}
}

@media only screen and (min-width:735px) and (max-width: 1440px) {
	#subtitle {
		font-size: 22px;
	}
}


@media only screen and (min-width: 1441px) {
	#subtitle {
		margin-top: 19.2px;
		font-size: 24px; /*1.25vw*/
		letter-spacing: 0.42em;
	}
}

.screenPageTitle {
	color:  #732a12;
	font-size: 1.25em;/*20px;*/
	font-family: Alegreya_Sans_SC;
	font-weight: bold;
	/*width: 50%;*/
	/*margin-top: 4vw;*/
	/*margin-bottom: 4vw;*/
	/*margin-left: 2vw;*/
	text-align: left;
}

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

.narratorialTitleSubtitle {
	text-align: right;
}

@media only screen and (min-width: 1441px) {
	.narratorialTitleSubtitle {
		margin-right: -1.3em;
	}
}

.overlap {
	position: relative;
	top: -1em; /*-35px;*/
	padding-left: 35px;
	letter-spacing:0.423em;
}

@media only screen and (min-width: 1441px) {
	.screenPageTitle {
		letter-spacing: 1.5em;
	}
	
	#yourEconomiesOfExchange .screenPageTitle, .shortenSubtitleLength .screenPageTitle {
		letter-spacing: 1.35em;
	}
}

@media only screen and (max-width: 734px) {
	.longPageTitle {
		letter-spacing: 0.37em;
		font-size: 1.23em;
	}
}



.formWithNoClick {
	/*pointer-events: none;*/
}

.formWithNoClick > label > p {
	visibility: hidden;
}

@media only screen and (min-width: 1441px) {
	.narratorialReturnToSpine {
		left: 90.25vw;
		color: #732a12;
		margin-left: -1.56em;
	}
}

/* Related to different rows of content going down the spine
	consider looking into px padding adjustment for the different medias */
	
	/* Desktop is piggybacking off of General */
.mainSpine {
	color: #732a12;
	/*font-size: 16px; */
	font-size: 0.6em; /*3.865vw;*/
	/*letter-spacing: 1.1em;*/
	/*padding-left: 11vw;*/
	word-wrap: break-word;
	line-height: 1.7em;
	/*padding-left: 11vw;*/
	/*margin-top: 95px;*/
	/*position: center;*/
	text-align: center;
	position: absolute;
	/*padding-left: 50%;*/
	/*z-index: 1; WHY IS THIS NOT HIDING BEHIND Z-INDEX: 2?!?!?! Commenting it out for now as it doesn't seem to be used at all*/
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	white-space: pre-line;
}

@media only screen and (max-width: 734px) {
	.mainSpine {
		margin-top: initial;
		/*width: 73%;*/
		font-size: 1.2em;
		line-height: 1.2em;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.mainSpine {
		font-size: 24px;
		padding-top: 30px;
		margin-top: initial;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#theUntoldYetRightCarouselAuthortorialSpine {
		line-height: 1.5em;
		padding-top: initial;
	}
}

.spineVerticalCentering {
	position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.authortorialSpine {
	color: #732a12;
	word-wrap: break-word;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	white-space: pre-line;
}

@media only screen and (max-width: 734px) {
	.authortorialSpine {
		margin-top: initial;
		/*width: 73%;*/
		font-size: 1.2em;
		line-height: 1.2em;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.authortorialSpine {
		font-size: 24px;
		padding-top: 30px;
		margin-top: initial;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.landingAuthortorialSpine {
		top: 250px;
		width: 340px;
	}
}



@media only screen and (min-width: 735px) {
	.carouselContent {
		line-height: initial;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.carouselContent {
		width: 566px;;
	}
}



/*@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#carouselRightOfTheUntoldYet .slides .slide .carouselContent {
		width: 670px;;
	}
}*/

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.carouselContent {
		width: 740px;;
	}
}

@media only screen and (min-width: 1441px) {
	.carouselContent {
		width: 960px;
		font-size: 24px;
		top: 48%;
		color: #660000;
	}
}

.spine {
	color: #732a12;
	position: absolute;
	left: calc(50% - 0.57em); /*Recalculate whenever the font size changes oh no*/
	writing-mode: vertical-lr;
	text-orientation: upright;
	letter-spacing: 0.55em;
	/*margin-left: -8px;*/
	font-size: 0.65em;
	top: 270px;
}

@media only screen and (max-width: 734px) {
	.spine {
		color: #732a12;
		position: absolute;
		left: calc(50% - 0.57em); /*Recalculate whenever the font size changes oh no*/
		writing-mode: vertical-lr;
		text-orientation: upright;
		letter-spacing: 0.6em;
		/*margin-left: -8px;*/
		top: 115px;
		font-size: 1em;
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.spine {
		top: 80px;
		font-size: 1.2em;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.lShapedSpine {
		writing-mode: initial;
		text-orientation: sideways;
		left: 0.7em;
		position: inherit;
		width: max-content;
		/*bottom: 2.3em;*/
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#Seashore .spine {
		top: 110px;
		letter-spacing: 0.7em;
	}
}

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

.onlyShowPhoneLandscape {
	display: none;
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.onlyShowPhoneLandscape {
		display: block;
		margin-left: 140px;
		letter-spacing: .5em;
	}
	
	.hidePhoneLandscape {
		display: none;
	}
}

.returnToSpine {
	color:#732a12;
	font-family:Alegreya_SC;
	font-size:.5em;
	cursor: pointer;
	top: -40px;
	position: relative;
}

/* In this case, the phone piggybacks off of the general, sometimes, WHYYYYY */
#ourAncientSpine, #outOfTheVoidSpine, #thisShiftingWomanhoodSpine, #anotherLogicOfKinshipSpine, #theUntoldYetSpine {
	margin-top: 25px;
	z-index: 1;
}



@media only screen and (max-width: 734px) and (orientation: portrait) {
	#anotherLogicOfKinshipSpine {
		padding-top: 20%
	}
}

@media only screen and (min-width: 1441px) {
	
	#anotherLogicOfKinshipSpine {
		margin-top: 40px;
	}
	
	#ourAncientSpine, #outOfTheVoidSpine, #thisShiftingWomanhoodSpine, #anotherLogicOfKinshipSpine, #theUntoldYetSpine {
		margin-top: 60px;
		z-index: 1;
	}
}

@media only screen and (max-width: 734px) {
	#outOfTheVoidSpine {
		margin-top: -50px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#outOfTheVoidSpine {
		margin-top: 5px;
	}
}


#landingSpine, #theUntoldYetSpine, #anotherLogicOfKinshipSpine, #thisShiftingWomanhoodSpine, #outOfTheVoidSpine, #ourAncientSpine {
	height: 100%;
	margin-top: initial;
	
}


@media only screen and (max-width: 734px) and (orientation: portrait) {
	#theUntoldYetSpine, #anotherLogicOfKinshipSpine, #thisShiftingWomanhoodSpine, #outOfTheVoidSpine, #ourAncientSpine {
		padding-top: 25%;
	}
}

#yourEconomiesOfExchangeSpine {
	transform: translateY(0%) translateX(-50%);
	top: 0px;
	z-index: 1;
	height: 100%;
}

.rightCarouselAuthortorialSpine {
	left: 75px;
	z-index: 2;
}

@media only screen and (max-width: 734px) {
	.rightCarouselAuthortorialSpine {
		display: none;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.rightCarouselAuthortorialSpine {
		display: none;
	}
}

#carouselAuthortorialSpine {
	z-index: initial;
}

@media only screen and (max-width: 734px) {
	#carouselAuthortorialSpine {
		display:none;
	}
}

/* Happens to be desktop information */
.slideNumber {
	position: relative;
	margin-left: 91vw;
	top: -100px;
	font-size: 0.5em;
	color: #732a12;
}

/* might be a clue to fixing up the authortorial numbers so it's not based off of distance from left */
@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.slideNumber {
		right: 10px;
		text-align: right;
		width: 100%;
		display: inline-block;
		font-size: 16px;
		margin-left: initial;
	}
}

@media only screen and (max-width: 734px) {
	.slideNumber {
		font-size: 0.9em;
		position: absolute;
		margin-left: 250px;
		white-space: nowrap;
		top: 45px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.slideNumber {
		margin-left: 534px;
	}
}

.narratorialSlideNumber {
	left: -90vw;
	position: relative;
	margin-left: 90vw;
	top: -100px;
	font-size: 0.5em;
	color: #732a12;
}

@media only screen and (max-width: 734px) {
	.narratorialSlideNumber {
		font-size: 14px;
		margin-left: 0px;
		left: 0px;
		top: -20px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.narratorialSlideNumber {
		text-align: left;
		margin-left: 0px;
		left: 0px;
		top: -56px;
		font-size: 16px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	.narratorialSlideNumber {
		top: -40px;
	}
}

.narratorialTextBlock {
	position:absolute;
	color: #10370F;
	text-align: justify;
	text-align-last: center;
}

@media only screen and (max-width: 734px) {
	.narratorialTextBlock {
		/*width: 205px;
		margin-left: calc(100% - 235px);*/
		width: 300px;
		margin-left: 50px;
		transform: translateY(15px);
		/*top: -20px;*/
		font-size: 14.8px;
		/*transform: translateY(-20px);*/
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.narratorialTextBlock {
		width: 358px;
		margin-left: calc(100% - 388px);
		transform: translateY(-25px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.narratorialTextBlock {
		font-size: 19px;
		margin-left: calc(100% - 320px);
		width: 280px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.narratorialTextBlock {
		width: 380px;
		margin-left: calc(100% - 420px);
		transform: translateY(-30px);
	}
}


@media only screen and (min-width: 1441px) {
	.narratorialTextBlock {
		
		font-size: 1rem;
		
		margin-left: 63%;
		width: 250px;
	}
}

@media only screen and (max-width: 734px) {
	/*revisit to decide on how to handle textblock that is tied with the particular book image*/
	.narratorialTextBlock2 {
		width: 245px;
		margin-left: 109px;
		position: absolute;
		/*top: -20px;*/
		font-size: 0.9em;
		transform: translateY(-20px);
	}
}

@media only screen and (min-width: 1441px) {
	.narratorialTextBlock2 {
		position: absolute;
		font-size: 1rem;
		color: #10370F; 
		text-align: justify;
		text-align-last: center;
		width: 192px;
		left: 850px;
	}
}

.explainClick {
	color: #42180a;
	font-size: 16px;
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
}

@media only screen and (max-width: 734px) {
	.explainClick {
		left: -20px;
		/*transform: translateY(200px);*/
		
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.explainClick {
		left: -55px;
	}
}

@media only screen and (min-width: 1441px) {
	.explainClick {
		left: -100px;
	}
}

@media only screen and (max-width: 734px) {
	.germinationImage {
		height: 400px;
		/*transform: translateX(20px);*/
		position: relative;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.germinationImage {
		height: 330px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.germinationImage {
		height: 580px;
	}
}

@media only screen and (min-width: 1441px) {
	.germinationImage {
		height: 600px;
	}
}

/* TODO make general of repeated properties */
@media only screen and (max-width: 734px) {
	.germinationExplanationText {
		display: initial;
		position: absolute;
		width: 210px;
		font-size: 14px;
		color: #42180a;
		background-color: rgba(255,230,153,0.6);
		text-align: right;
		top: 50%;
		transform: translateY(-55%) translateX(100px);
		padding: 20px;
		/*border: 1px solid #660000;*/
		/*z-index: 1;*/
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.germinationExplanationText {
		
		width: 430px;
		background-color: rgba(255,230,153,0.7);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.germinationExplanationText {
		display: initial;
		position: absolute;
		width: 480px;
		font-size: 16px;
		color: #42180a;
		background-color: rgba(255,230,153,0.6);
		text-align: right;
		top: 50%;
		transform: translateY(-50%);
		padding: 20px;
		left: 45px;
	}
}
@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.germinationExplanationText {
		width: 720px;
	}
}

@media only screen and (min-width: 1441px) {
	.germinationExplanationText {
		display: initial;
		position: absolute;
		width: 860px;
		font-size: 16px;
		color: #42180a;
		background-color: rgba(255,230,153,0.6);
		text-align: right;
		top: 50%;
		transform: translateY(-50%);
		padding: 20px;
		left: 15px;
		/*border: 1px solid #660000;*/
	}
}
/*
.breakInShortWidth {
	display: none;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.breakInShortWidth {
		display: initial;
	}
}

.noBreakDesktop {
	display: initial;
}

@media only screen and (max-width: 734px) {
	.noBreakDesktop {
		display: initial;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.noBreakDesktop {
		display: none;
	}
	
	#yourEconomiesOfExchange .noBreakDesktop{
		display: initial;
	}
}

@media only screen and (min-width: 735px) {
	.noBreakDesktop {
		display: none;
	}
	
	.rightVoiceBox .noBreakDesktop {
		display: initial;
	}
}

@media only screen and (max-width: 734px) {
	.noBreakMobile {
		display: none;
	}
}

@media only screen and (min-width: 735px) {
	.noBreakMobile {
		display: initial;
	}
*/

@media only screen and (orientation: landscape) {
	.hideInLandscape {
		display: none;
	}
}

@media only screen and (orientation: portrait) {
	.hideInPortrait {
		display: none;
	}
}

@media only screen and (max-width: 734px) {
	.hideBecauseNoRoom {
		display: none;
	}
}

/*
@media only screen and (max-width: 734px) {
	.showInMobile {
		position: initial;
		visibility: initial;
		opacity: 1;
	}
}

@media only screen and (min-width: 1441px) {
	.showInMobile {
		position: absolute;
		visibility: hidden;
	}
}*/

.authortorialHidden {
	visibility: hidden;
	opacity: 0;
	/*transition: opacity 4s ease-in-out;*/
}

@media only screen and (min-width: 735px) {
	.authortorialHidden {
		transition: opacity 4s ease-in-out;
	}
}

.authortorialHidden2 {
	opacity: 0;
	transition: opacity 4s ease-in-out;
}

@media only screen and (max-width: 734px) {
	.authortorialHidden {
		/*display: none;*/
		position: absolute;
	}
	
	.authortorialPositioning .authortorialHidden {
		position: initial;
	}
}

.authortorialPositioning {
	transform: translateX(-50%);
	position: relative;
}

@media only screen and (max-width: 734px) {
	.authortorialPositioning {
		
		top: 20px;
		
		/*width: 960px;*/
		width: 340px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.authortorialPositioning {
		top: 40px;
		width: 621px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.authortorialPositioning {
		top: 180px;
		padding-top: initial;
			
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.authortorialPositioning {
		top: 70px
	}
}

@media only screen and (min-width: 1441px) {
	.authortorialPositioning {
		
		top: 86px;
		
		width: 960px;
	}
}

.authortorialShow {
	visibility: initial;
	opacity: 1;
}

.authortorialClick {
	color: rgb(197, 221, 195);
	font-family: Roboto_Mono;
	font-size: .60em;
}

@media only screen and (max-width: 734px) {
	.travelingAuthortorial {
		position: absolute;
		top: 187px;
		font-size: 0.9em;
		right: 100px;
		visibility: hidden;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.travelingAuthortorial {
		position: absolute;
		top: 152px;
		font-size: 30px;
		right: 4%;
	}
}

@media only screen and (min-width: 1441px) {
	/*travelingAuthortorial should be placed before slides if one background, before ending div if multiple backgrounds*/
	.travelingAuthortorial {
		position: absolute;
		top: 187px;
		font-size: 0.9em;
		right: 100px;
	}
}

.readMoreText {
	cursor: pointer;
	text-shadow: 1px 1px #10370F;
}

.whiteSpaceNormal {
	white-space:normal;
}

.authortorialRightText {
	position: relative;
	/*left: 12px;*/
	color: #10370F;
	font-family: caveat;
	display: block;
	text-align: right; /*hard right on poet*/
	margin-right: 5px;
}

@media only screen and (max-width: 734px) {
	.authortorialRightText {
		/*left:92px;*/
		left: 0px;
		/*display: block;*/
		/*text-align: right;*/
	}
}

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

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

@media only screen 

.DontWrap {
	white-space: nowrap ;
}

.align-right {
	text-align: right;
	width: max-content;
	margin-left: auto;
	/*margin-right: 4%;*/
	padding-right: 56px;
	display: block;
}

@media only screen and (max-width: 734px) {
	.align-right {
		/*margin-right: 10px;*/
		padding-right: 4px;
	}
}

.opacityZeroSection {
		opacity:0;
}

.infoElement {
	visibility:hidden;
	/*font-size: 25px;*/
}

@media only screen and (max-width: 734px) {
	.infoElement, .poetDirect, .greenPoet {
		font-size: 20.5625px;
	}
}

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

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

.poetDirect {
	/*font-size: .9em; /*1.145em 16px;*/
	font-weight:lighter; /*bold*/
	cursor: pointer;
	scroll-margin-bottom: 15px;
}



.authortorialPopUp {
	position:sticky;
    top:83vh;
    /*transform:translateY(-100%);*/
	/*padding-bottom: 15vh;*/
	font-size: 1.5em;
	/*letter-spacing: .2em;*/
	font-weight: initial;
	color: #42180a;
	/*color:   #061405;*/
	opacity: 90%;
	margin-left: 61%;
	width: fit-content;
}

@media only screen and (max-width: 734px) {
	.authortorialPopUp {
		font-size: 0.9em;
		top: 600px;
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#SeashoreFlip .authortorialPopUp {
		top: 560px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#SeashoreFlip .authortorialPopUp {
		top: 340px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.authortorialPopUp {
		position: inherit;
		top: 380px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.authortorialPopUp {
		/*top: initial;
		bottom: 90px;
		position: absolute;*/
		font-size: 18px;
		top: 762.767px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	.authortorialPopUp {
		top: 900px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	#SeashoreFlip .authortorialPopUp {
		top: 900px;
	}
}


@media only screen and (min-width: 1441px) {
	.authortorialPopUp {
		font-size: .5em;
	}
}

.whisperEty {
	font-size: 17pt;
}

#germinationsDiv, #germinations2Div {
	margin-left: 13%;
	position: absolute;
	width: max-content;
	color: #42180a;
}


@media only screen and (max-width: 734px) {
	#germinationsDiv, #germinations2Div {
		margin-left: 1%;
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#germinationsDiv, #germinations2Div {
		top: 510px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#germinationsDiv {
		top: 300px;
	}
}

@media only screen and (min-width: 735px) and (max-width:1440px) and (orientation: landscape) {
	#germinationsDiv, #germinations2Div {
		bottom: 110px;
		top: initial;
	}
}

@media only screen and (min-width: 735px) and (max-width:1440px) {
	#germinationsDiv, #germinations2Div {
		margin-left: 15px;
	}
}


.rotatedFont {
	/*transform: rotate(40deg);*/
	color: #D68484;
	font-family: Roboto_Mono;
	clear: both;
	font-size: 3em;
	opacity: 40%;
	text-align: center;
	pointer-events:none;
	
	position: absolute;
	top: 50%;
	opacity: 40%;
}

@media only screen and (max-width: 734px) {
	.rotatedFont {
		
		
		transform: translate(25%, -50%) rotate(30deg);
		font-size: 40px;
		width: fit-content;
		
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.rotatedFont {
		
		
		transform: translate(50px, -50%) rotate(30deg);
		font-size: 40px;
		width: 365px;
		
	}
}

@media only screen and (min-width: 1441px) {
	.rotatedFont {
		
		
		transform: translate(25%, -50%) rotate(30deg);
		font-size: 65px;
		width: 585px;
		
	}
}

.underConstruction {
	
	/*position: relative;*/
	position: absolute;
	transform: rotate(320deg) translateY(-50%);
	
	/*opacity: 60%;*/
	
	width: 100%;
}

@media only screen and (max-width: 734px) {
	.underConstruction {
		top: 250px;
		transform: rotate(320deg);
		font-size: 36px;
	}
}

@media only screen and (min-width: 1441px) {
	.underConstruction {
		width: 70%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(320deg);
	}
}

/*WEDGES*/
@media only screen and (max-width: 734px) {
	#outOfTheVoid #beingFemale .rotatedFont {
		left: -90px;
		font-size: 38px
	}
	
	#ourAncient #beingFemale .rotatedFont {
		left: -70px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#whoAreYou .rotatedFont {
		position: relative;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#whatIsShe .rotatedFont {
		opacity: .7;
	}
}

/*
@media only screen and (max-width: 734px) {
	#beingFemale .rotatedFont {
		
		transform: translate(55px, 150px) rotate(30deg);
		width: min-content;
		font-size: 40px;
	}
}

@media only screen and (max-width: 734px) {
	#thisShiftingWomanhood #beingFemale .rotatedFont {
		opacity: 55%;
	}
}
*/

#whoAreYou {
	width: fit-content;
}
/*
@media only screen and (min-width: 1441px) {
	#beingFemale {
		position: absolute;
		top: 350px;
		left: 250px;
	}
}
*/
@media only screen and (min-width: 1441px) {
	#beingFemaleLeftArrow {
		position: relative;
		left: 0px;
		top: 145px;
	}
}



/*from: https://wojtek.im/journal/targeting-safari-with-css-media-query*/
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	.spineArrows .up {
		/*font-size: 0.6em;*/
	}
}

@media only screen and (max-width: 734px) {
	.spineArrows {
		font-size: 1.5em;
		display: none;
	}
}

.spineArrows {
	width: max-content;
	position: fixed;
	transform: translate(-50%);
	font-family: Alegreya_Sans_SC,-apple-system,Arial,Verdana,sans-serif;
	font-size: 40px;
}

@media only screen and (min-width: 1441px) {
	.spineArrows {
		font-size: 1.5em;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.spineArrowsUp {
		top: 70px;
	}
}

@media only screen and (min-width: 1441px) {
	.spineArrowsUp {
		top: 130px;
	}
}

@media only screen and (max-width: 734px) {
	.spineArrowsDown {
		bottom: 4px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.spineArrowsDown {
		bottom: 5px;
	}
}

@media only screen and (min-width: 1441px) {
	.spineArrowsDown {
		bottom: 25px;
	}
}

#Seashore, #SeashoreFlip {
	position: relative;
	width: 100%;
	height: 667px;
	padding: 0.78em; /*10px;*/
	z-index: 1;
}

@media only screen and (max-width: 735px) and (min-height: 668px) {
	#Seashore, #SeashoreFlip {
		height: 100vh;
	}
}

@media only screen and (min-width:735px) and (max-width: 1440px) {
	#Seashore, #SeashoreFlip {
		/*scroll hitching, have to solve. Is it just height value related?*/
			height: 1080px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#Seashore, #SeashoreFlip {
		height: 510px;
	}
}

@media only screen and (min-width: 1441px) and (max-height: 928px) {
	#Seashore, #SeashoreFlip {
		height: 928px;
	}
}

@media only screen and (min-width: 1441px) and (min-height: 929px) {
	#Seashore, #SeashoreFlip {
		height: 100vh;
	}
}

#SeashoreBG, #SeashoreBGFlip {
	opacity:0.7;
	background-image: url("../images/Seashore/SeashoreVert.jpg");
	background-size: cover;
	background-position-x: right;
}

@media only screen and (min-width: 1441px) {
	#SeashoreBG {
		background-image: url("../images/Seashore/SeashoreHor.jpg");
	}
}

#SeashoreBGFlip { 
	transform: scaleX(-1);
}

@media only screen and (min-width: 1441px) {
	#SeashoreBGFlip { 
		background-image: url("../images/Seashore/SeashoreHor.jpg");
	}
}

#seashoreCarousel {
	z-index: 1;
}

#seaShore1TextBlock {
	transform: translateY(40px);
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#seaShore1TextBlock {
		transform: translateY(-10px);
	}
}

#workInProcessAuthortorialSentence2Clickable, #workInProcessAuthortorialSentence3Clickable, #workInProcessAuthortorialSentence4Clickable, .restartText {
	color: #c5ddc3;
	font-family: Roboto_Mono;
	font-size: .60em;
}

.restartText {
	cursor: pointer;
	text-shadow: 1px 1px #10370F;
}

@media only screen and (min-width: 735px) {
	.restartText {
		display: none;
	}
}

#Everly {
	padding: 0.78em;/*10px;*/
	width: 100%;
	position: relative;
	/*margin-top: -20px;*/
	z-index: 0;
}

@media only screen and (max-width: 734px) {
	#Everly {
		margin-top: 0px;
		height: 734px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#Everly {
		height: 861px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#Everly {
		height: 1300px;
	}
}

@media only screen and (min-width: 1441px) {
	#Everly {
		height: 1810px;
	}
}

#EverlyBG {
	background-image: url("../images/EverlySky/EverlyInSkyHor50Opacity.jpg");
}

@media only screen and (max-width: 1440px) {
	#EverlyBG {
		display: none;
	}
}

@media only screen and (min-width: 1441px) {
	#EverlyBG {
		background-image: url("../images/EverlySky/EverlyInSkyHor70Opacity.jpg");
		background-size: cover;
	}
}

#EverlySpine {
	position: fixed;
	/* top: 375px; */
	height: 100%;
}

@media only screen and (max-width: 734px) {
	#EverlySpine {
		/* position: fixed; */
		/*top: 40px;*/
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#EverlySpine {
		position: absolute;
		/*top: 100px;*/
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	#EverlySpine {
		position: absolute;
	}
}

@media only screen and (min-width: 1441px) {
	#EverlySpine {
		/* position: fixed; */
		/*top: 45px;*/
	}
}

#bookVideoMadelineMiller {
	transform: translateY(-5px);
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#bookVideoMadelineMiller {
		left: 12px;
		
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#bookVideoMadelineMiller {
		transform: translateX(55px) translateY(-5px);
	}
}

#background_wrap {
	margin-left: auto;
	margin-right: auto;   
}

@media only screen and (min-width: 1441px) {
	#background_wrap {
		display: none;
	}
}

#background_wrap img {
	z-index: -3;
	position: fixed;
	/*margin-left: -0.78em;
	margin-top: -200%;*/
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#background_wrap img {
		/*transform: scale(.8) translate(-1000px, -1200px);*/
		bottom: 0px;
		left: 0px;
		transform: translate(-800px, 100px);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#background_wrap img {
		transform: scale(.8) translate(-1000px, -1200px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#background_wrap img {
		transform: scale(1.5) translate(-350px, -800px);
	}
}

/* TODO: whatItWas2 is commented out in HTML, might be able to just remove it. */

#whatItWas, #whatItWas2 {
	/*width: 99%;*/
	margin-top: -30px;
	/*font-size: .9em;*/
	pointer-events: none;
}

@media only screen and (max-width: 734px) {
	#whatItWas, #whatItWas2 {
		/*font-size: 1.25em;*/
		line-height: 1em;
		position: absolute;
		top: 100px;
		right: 12px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape){
	#whatItWas, #whatItWas2 {
		right: 20px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#whatItWas {
		margin-top: initial;
		transform: translateY(-350px);
	}
}

@media only screen and (min-width: 1441px) {
	#whatItWas{
		/*font-size: .9em;
		width: 96%;
		position: relative;
		pointer-events: none;
		top: -450px;*/
		
		position: initial;
		transform: translateY(-250px);
		margin-top: initial;
	}
	
	#whatItWas2 {
		position: relative;
		pointer-events: none;
	}
}

@media only screen and (max-width: 734px) {
	/* Use if wanting to push 'in that long wait' down the screen. Have to figure out why Emily height does not adjust to content height.
	#thatLongWait {
		position: relative;
		top: 150px;
	}*/
}
	
@media only screen and (min-width: 1441px) {
	#thatLongWait {
		position: relative;
		top: 500px;
	}
}

#whatItWasSection, #whatPermissionsSection, #inThatLongWaitSection {
	visibility: hidden;
}


/*#whoAreYou {
	position: relative;
	top: -550px;
	right: -40px;
	width: 21%;
}

@media only screen and (max-width: 734px) {
	#whoAreYou {
		position: absolute;
		left: 100px;
		top: initial;
		z-index: -1;
	}
}*/

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#whoAreYou {
		position: sticky;
		/*left: 100px;*/
		top: 512px;
		padding-bottom: 60px;
		pointer-events: none;
	}
}

@media only screen and (min-width: 1441px) {
	#whoAreYou {
		position: sticky;
		top: 345px;
		margin-bottom: 180px;
	}
}



/* Was for traveling poet down and up the screen but currently tabled. Just here to satisfy the code in case removing it causes errors */
.slimEncouragementTransition {
	position: fixed;
	width: 96%;
	padding-right: 24px;
	left: 0px;
}

.subjectITransition {
	position: fixed;
	width: 96%;
	padding-right: 24px;
	left: 0px;
}

.subjectToSubjectTransition {
	position: fixed;
	width: 96%;
	padding-right: 24px;
	left: 0px;
}

.slimEncouragementEndPoint {
	position: relative;
}

.subjectIEndPoint {
	position: relative;
}

.subjectToSubjectEndPoint {
	position: relative;
}
/* end of tabled portion*/

#slimEncouragementBr {
	display: none;
}

#slimEncouragement {
	position: relative;
}

#subjectIBr {
	display: none;
}

#whatThisIs {
	/*right: 3%;*/
	font-size: 0.846em; /*14px;*/
	
	/*direction: rtl;*/
	/*position: absolute;*/
	
	/*left: 0px;
	right: 0px;*/
}

@media only screen and (max-width: 734px) {
	#whatThisIs {
		width: 96%;
		font-size: 1.25em;
		line-height: 1em;
		top: 65px;
		position: relative;
		/*margin-right: 5px;*/
		z-index: -1;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#whatThisIs {
		top: 25px;
		margin-right: 20px;
		margin-right: 6px;
	}
}

@media only screen and (min-width:735px) and (max-width: 1440px) {
	#whatThisIs {
		top: 65px;
		position: relative;
	}
}

@media only screen and (min-width: 1441px) {
	#whatThisIs {
		margin-top: 93.45px;
		width: 96%;
		font-size: 29.37px;
	}
}

#whatThisIs br {
	line-height: 12px;
}

#weTheSection {
	/*font-size: 1.4em;*/
}

@media only screen and (max-width: 734px) {
	#weTheSection {
		/*font-size: 1.25em;*/
		/*margin-left: 125px;*/
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#weTheSection {
		left: 150px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#weTheSection {
		left: 415px;
		padding-right: 10px;
	}
}

@media only screen and (min-width: 1441px) {
	#weTheSection {
		width:96%/*90%*/;
		/*position: absolute;*/
		/*font-size: .9em;*/
		margin-top: -20px;
		margin-bottom: 50px;
	}
}

@media only screen and (max-width: 734px) {
	#weTheSectionAuthortorial {
		right: 25px;
		font-size: 1.25em;
		line-height: 1em;
		top: 65px;
		position: absolute;
		z-index: -1;
		visibility:hidden;
	}
}

@media only screen and (min-width: 1441px) {
	#weTheSectionAuthortorial {
		top: 217px;
	}
}

#carouselLeftOfEverly {
	background-image: url("../images/EverlySky/EverlyInSkyOnlyHor.jpg");
	background-size: cover;
}

@media only screen and (max-width: 734px) {
	.EverlyNarratorialSlides {
		transform: translateY(100px);
	}
}

/*
@media only screen and (min-width: 1441px) {
	.EverlyNarratorialTopic {
		position: absolute;
		margin-left: 30%;
		margin-top: 10%;
	}
}
*/

/*
@media only screen and (max-width: 734px) and (orientation: portrait) {
	#whispersEconomiesNarratorial1Div {
		margin-left: 94px;
		top: 580px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#whispersEconomiesNarratorial1Div {
		position: fixed;
		top: 468px;
		margin-left: 47%;
		width: max-content;
	}
}

@media only screen and (min-width: 1441px) {
	#whispersEconomiesNarratorial1Div {
		position: absolute;
		margin-left: 41%;
		width: 100px;
	}
}
*/

.whisperEtyImg {
	display: none;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.whispersNarratorial {
		/*margin-left: 94px;*/
		top: 580px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.whispersNarratorial {
		position: fixed;
		top: 468px;
		margin-left: 47%;
		width: max-content;
		
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#ancientNarratorial2 .whispersNarratorial {
		top: 492px;
	}	
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	.whispersNarratorial {
		top: initial;
		bottom: 120px;
		position: absolute;
		/*top: 920px;*/
		transform: translateX(-100px);
		/*z-index: -1;*/
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.whispersNarratorial {
		top: initial;
		bottom: 150px;
		position: absolute;
		transform: translateX(-120px);
		
	}
}

@media only screen and (min-width: 1441px) {
	.whispersNarratorial {
		position: absolute;
		margin-left: 57%;
		width: 100px;
	}
}


#carouselRightOfEverly {
	background-image: url("../images/EverlySky/EverlyInSkyHor50Opacity.jpg");
	/*background-position-x: -766px;
	background-position-y: -255px;*/
}




@media only screen and (max-width: 734px) and (orientation: landscape) {
	#carouselRightOfEverly {
		/*height: 640px;*/
	}
}

/*
#whispersEverlyAuthortorial2Div {
	margin-left: 30%;
}

@media only screen and (max-width: 734px) {
	#whispersEverlyAuthortorial2Div {
		margin-left: 5%;
		/*margin-top: -50px;
		top: 590px;
		position: fixed;
		white-space: nowrap;
	}
}
*/

.whispersAuthortorial {
	margin-left: 30%;
	transform: translateY(18px);
}

@media only screen and (min-width: 1441px) {
	.whispersAuthortorial {
		top: initial;
		transform: translateY(140px);
	}
}
		

.whispersWithEty {
	/*transform: translateY(-28px);*/
}

@media only screen and (max-width: 734px) {
	.whispersAuthortorial {
		margin-left: 5%;
		/*margin-top: -50px;*/
		/*top: 590px;*/
		position: fixed;
		white-space: nowrap;
		bottom: 20px;
		top: initial;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.whispersAuthortorial {
		bottom: initial;
		top: 500px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	.whispersAuthortorial {
		top: initial;
		bottom: 90px;
		position: absolute;
		top: 900px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.whispersAuthortorial {
		top: initial;
		bottom: 90px;
		position: absolute;
		/*top: 670px;*/
	}
}

/*This is to add padding to every everly carousel slide, to match the main everly*/
.carouselEverly {
	padding:0.78em;
}

#ourAncient {
	padding: 0.78em;/*10px;*/
	width: 100%;
	/*height: 750px;*/
	background-size: contain;
	position: relative;
	/*top: -20px;*/
	z-index: 0;
}

/*#ourAncient .screenPageTitle {
	font-size: 1.23em;
}*/

@media only screen and (max-width: 734px) {
	#ourAncient {
		height: 667px;
	}
}

@media only screen and (min-width: 735px) and (max-width:1440px) {
	#ourAncient {
		height: 1080px;
	}
}

@media only screen and (min-width: 1441px) {
	#ourAncient {
		/*top: -40px;*/
		height: 1001px;
	}
}

#ourAncientBG {
	background-image: url("../images/OurAncient/SeineRiverVert.jpg");
	opacity: 0.7;
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#ourAncientBG {
		background-size: cover;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#ourAncientBG {
		background-size: cover;
	}
}

@media only screen and (min-width: 1441px) {
	#ourAncientBG {
		background-image: url("../images/OurAncient/SeineRiverHor.jpg");
		opacity: 0.7; /* why? */
	}
}





#subjectToSubjectBr {
	display: none;
}

/*
@media only screen and (max-width: 734px) {
	#ancientNarratorialAuthortorial {
		width: max-content;
		position: fixed;
		transform: translate(-50%, 90px);
	}
}

@media only screen and (min-width: 1441px) {
	#ancientNarratorialAuthortorial {
		position: fixed;
		width: max-content;
		transform: translate(-50%, 270px);
	}
}
*/
#carouselLeftOfAncient {
	/*background-color: lightblue;  NOTE TO KLEIGH   MY CHANGES TO BG DO NOT SEEM TO BE TAKING, NEW IMAGE OR TH LGITH BLUE */
	background-image: url("../images/OurAncient/ourAncientNarratorialTight150.jpg");
	background-size: cover;	
}
/*
@media only screen and (max-width: 734px) {
	.ourAncientNarratorialTopic {
		transform: rotate(320deg);
	}
}

@media only screen and (min-width: 1441px) {
	.ourAncientNarratorialTopic {
		position: absolute;
		top: 420px;
		left: 200px;
	}
}
*/

#ourAncientNarratorial2TextBlock a:link, #anotherKinshipNarratorial2TextBlock a:link{
	color: #175016;
}

#ourAncientNarratorial2TextBlock a:visited, #anotherKinshipNarratorial2TextBlock a:visited {
	color: #288c26;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#ourAncientNarratorial2TextBlock {
		font-size: 13.6px;
		transform: translateY(-26px);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#ourAncientNarratorial2TextBlock {
		width: 358px;
		margin-left: calc(100% - 388px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	#ourAncientNarratorial2TextBlock {
	
	}
}
/*
@media only screen and (min-width: 1441px) {
	#ourAncientNarratorial2TextBlock {
		width: 230px;
	}
}
*/
@media only screen and (max-width: 734px) {
	#adaStickyNote {
		position: absolute;
		transform: scale(40%) translateX(-500px) translateY(0px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#adaStickyNote {
		position: absolute;
		transform: scale(0.6);
		left: 284px;
		top: 0px;
	}
}

@media only screen and (min-width: 1441px) {
	#adaStickyNote {
		position: absolute;
		top: 45px;
		width: 75%;
		left: 360px;
		
	}
}

#carouselRightOfAncient {
	/*background-color: lightgreen;*/
	background-image: url("../images/OurAncient/ourAncientAuthortorialTS160.jpg"); /*NOTE TO KLEIGH  WAS ABLE TO CHANGE FROM LIGHT GREEEN TO NEW IMAGE*/
	background-size: cover;
	/*background-position: -400px 0px;*/
}

@media only screen and (max-width: 734px) {
	.yourEconomiesTitle {
		letter-spacing: 0.19em;
	}
}

.yEOE {
	padding: 0.78em;
	position: relative;
	width: 100%;
	/*top: -40px;*/
	/*margin-top: -4.5%;*/
	z-index: 0;
	/*display:none;*/
}

@media only screen and (min-width: 1441px) {
	.yEOE {
		height: 1461px;
	}
}



/* Does the website actually use this?? Yes it does, why is it coded this way?? */
.yEOECollapse {
	position: relative;
	width: 100%;
	/*top: -40px;*/
	/*margin-top: -4.5%;*/
	z-index: 0;
	height: 0px;
	display: none;
}

@media only screen and (max-width: 1440px) {
	.yEOE, .yEOECollapse {
		overflow-x: hidden;
	}
}




#yourEconomiesOfExchangeBG {
	background-image: url("../images/BeachFeet/BeachFeetHor.jpg");
	background-attachment: scroll;
	background-repeat: repeat-y;
	background-position: center top;
}

@media only screen and (min-width: 1441px) {
	#yourEconomiesOfExchangeBG {
		background-image: url("../images/BeachFeet/BeachFeetHor.jpg");
		background-size: 150%;
	}
}

@media only screen and (min-width: 1441px) {
	.box-5 {
		position: relative;
		top: -265px;
		left: -50px;
	}
}

.poet-container {
	/*background-image: url("../images/GenderTrouble/GenderTroubleVert.png");*/
	background-position: center top;
	background-repeat: repeat-y;
	grid-template-columns: 1fr 3% 35% 50%;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.poet-container {
		grid-template-columns: 1fr 3% 35% 55%;
	}
}

@media only screen and (min-width: 1441px) {
	.poet-container {
		/*background-image: url("../images/GenderTrouble/GenderTroubleHor.png");*/
		background-size: cover;
		/*background-position-x: -43vw;*/
		/*grid-template-columns: 1fr 3% 26% 60%;*/
		grid-template-columns: 1fr 10% 9% 20%;
		background-position-x: 200px;
		background-position-y: -50px;
	}
}

@media only screen and (max-width: 734px) {
	.rightVoiceBox {
		transform: translateY(-80px);
	}
}

@media only screen and (max-width: 734px) {
	#toEachOther {
		transform: translateY(-50px);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#toEachOther {
		transform: translateX(130px) translateY(-50px);
	}
}

@media only screen and (min-width: 1441px) {
	#toEachOther {
		margin-top: initial;
	}
}

@media only screen and (min-width: 1441px) {
	.leftVoiceBox, .rightVoiceBox {
		font-size: 29.37px;
	}
	
	.leftVoiceBox {
		line-height: 1.55em;
	}
}
/*
#whatIsShe {
	position: absolute;
	top: 300px;
	left: 280px;
	right: 0px;
	max-width: fit-content;
}

@media only screen and (max-width: 734px) {
	#whatIsShe {
		top: 360px;
		left: 10px;
	}
	
	#whatIsShe .rotatedFont {
		opacity:70%;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#whatIsShe {
		transform: translateX(-120px);
	}
}
*/

@media only screen and (min-width: 1441px) {
	#whatIsShe {
		width: 21%;
		/*position: absolute;
		top: 500px;
		left: 200px;
		opacity: 55%
		*/
	}
}

@media only screen and (max-width: 734px) {
	#economiesNarratorialAuthortorial {
		width: max-content;
		position: fixed;
		transform: translateX(-50%);
		top: initial;
		bottom: 30px;
	}
}

#carouselLeftOfEconomies {
	/*background-color: burlywood;*/
	background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),url("../images/GenderTrouble/butlerGenderTroubleTightShotBg.jpg");
	background-size: cover;	
}

/*
@media only screen and (min-width: 1441px) {
	.economiesNarratorialTopic {
		position: absolute;
		top: 420px;
		left: 200px;
		font-size: 1.75em;
	}
}
*/

@media only screen and (min-width: 1441px) {
	#economiesNarratorial1TextBlock, #thisShiftingWomanhoodNarratorial1TextBlock {
		top: 140px;
	}
}


#carouselRightOfEconomies {
	background-image: url("../images/GenderTrouble/yourEconomiesAuthortorialBg78op.jpg");
	background-size: cover;
}



/*
#economiesRightCarouselAuthortorialSpine {
	top: 400px;
}*/

#outOfTheVoid {
	padding: 0.78em;/*10px;*/
	width: 100%;
	/*height: 1000px;*/
	background-size: contain;
	position: relative;
	/*top: -80px;*/
	z-index: 0;
}

@media only screen and (max-width: 734px) {
	#outOfTheVoid {
		height: 1025px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape){
	#outOfTheVoid {
		height: 1050px;
	}
}

@media only screen and (min-width: 1441px) {
	#outOfTheVoid {
		height: 1540px;
	}
}

#outOfTheVoidBG {
	background-image: url("../images/OutOfTheVoid/outOfTheVoidBg3op200.jpg");
	background-size: cover;
	opacity: 60%;
}

/*
@media only screen and (max-width: 734px) {
	.outOfTheVoidNarratorialTopic {
		transform: rotate(320deg) translateX(15px);
		top: 165px;
	}
}

@media only screen and (min-width: 1441px) {
	.outOfTheVoidNarratorialTopic {
		position: absolute;
		top: 410px;
		left: 200px;
		word-spacing: -.124em;
	}
}
*/

#carouselLeftOfOutOfTheVoid {
	background-image: url("../images/OutOfTheVoid/whenIWasBorn2.jpg");
	background-size: cover;
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#carouselLeftOfOutOfTheVoid{
		background-image: url("../images/OutOfTheVoid/whenIWasBorn2op.jpg");
	}
}

@media only screen and (min-width: 1441px) {
	#carouselLeftOfOutOfTheVoid {
		/* background-image: url("../images/OutOfTheVoid/whenIWasBorn2.jpg"); */
		height: 100vh;
		/* background-size: cover; */
	}
}

#carouselRightOfOutOfTheVoid {
	background-image: url("../images/OutOfTheVoid/whenIWasBorn2op.jpg");
	background-size: cover;
}

#thisShiftingWomanhood {
	padding: 0.78em;/*10px;*/
	width: 100%;
	/*height: 1000px;*/
	background-size: contain;
	position: relative;
	/*top: -80px;*/
	z-index: 0;
}

@media only screen and (max-width: 734px) {
	.thisShiftingTitle {
		letter-spacing: 0.25em;
	}
}

@media only screen and (max-width: 734px) {
	#thisShiftingWomanhood {
		height: 1100px;
		background-size: contain;
	}
}	/*#thisShiftingWomanhood #beingFemale .rotatedFont {
	  opacity: 55%;
	}*/

@media only screen and (min-width: 735px) and (max-width:1440px) {
	#thisShiftingWomanhood {
		height: 1600px;
	}
}

#thisShiftingWomanhoodBG {
	background-image: url("../images/ThisShiftingWomanhood/ThisShiftingWomanhoodVertBranch.jpg");
	opacity: 50%;
	background-size: cover;
}
/*
@media only screen and (max-width: 734px) {
	#thisShiftingWomanhoodBG {
	  opacity:45%;
  }
}
*/
/*@media only screen and (min-width: 1441px) {
	#thisShiftingWomanhoodBG {
		background-image: url("../images/ThisShiftingWomanhood/ThisShiftingWomanhoodBranchHor.jpg");
		background-size: cover;
		opacity: 40%;
	}
}*/

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	#emergenceClickable br {
		display: none;
	}
}

#carouselLeftOfThisShiftingWomanhood {
	background-image: url("../images/ThisShiftingWomanhood/thisShiftingWomanhoodNarratorial125op.jpg");
}

/*
@media only screen and (min-width: 1441px) {
	.thisShiftingWomanhoodNarratorialTopic {
		position: absolute;
		  top: 420px;
		  left: 425px;
	}
}
*/

#carouselRightOfThisShiftingWomanhood {
	background-image: url("../images/ThisShiftingWomanhood/streamStillwBranch78op.jpg");
}

@media only screen and (min-width: 1441px) {
	#justNowAuthortorial {
		top: 177px;
	}
}

#anotherLogicOfKinship {
	padding: 0.78em;/*10px;*/
	width: 100%;
	/*height: 1000px;*/
	background-size: contain;
	position: relative;
	/*top: -80px;*/
	z-index: 0;
}

@media only screen and (max-width: 734px) {
	.anotherLogicTitle {
		letter-spacing: 0.28em;
	}
}

@media only screen and (max-width: 734px) {
	#anotherLogicOfKinship {
		height: 900px;
	}
}

@media only screen and (min-width: 1441px) {
	#anotherLogicOfKinship {
		/* height: 100vh; */
	}
}

#anotherLogicOfKinshipBG {
	/*background-image: url("../images/AnotherLogicOfKinship/AnotherLogicOfKinshipVert.jpg");*/
	background-image: url("../images/AnotherLogicOfKinship/anotherLogicOfKinshipBg125op.jpg");
	opacity: 60%;
	background-size: cover;
}
/*
@media only screen and (max-width: 734px) {
	#anotherLogicOfKinshipBG {
		opacity: 40%;
	}
}
*/
@media only screen and (max-width: 734px) and (orientation: landscape) {
	#anotherLogicOfKinshipBG {
		/*background-size: cover;*/
	}
}

@media only screen and (min-width: 1441px) {
	#anotherLogicOfKinshipBG {
		background-image: url("../images/AnotherLogicOfKinship/anotherLogicOfKinshipBg125op.jpg");
		/*background-size: cover;*/
	}
}



#carouselLeftOfAnotherLogicOfKinship {
	background-image: url("../images/AnotherLogicOfKinship/narratorialEtymologyHor75op.jpg");
}
/*
@media only screen and (min-width: 1441px) {
	#anotherKinshipNarratorial2TextBlock {
		top: 120px;
		width: 15%;
	}
}*/

/*WHY DO I HAVE YOU???
.narratorialTextBlock br {
	display: block; /* makes it have a width 
    content: ""; /* clears default height 
    margin-top: 0; /* change this to whatever height you want it 
} */

/*
@media only screen and (min-width: 1441px) {
	.anotherLogicOfKinshipNarratorialTopic {
		position: absolute;
		  top: 410px;
		  left: 445px;
	}
}
*/

#carouselRightOfAnotherLogicOfKinship {
	background-image: url("../images/AnotherLogicOfKinship/anotherLogicOfKinshipBg125op60.jpg");
}

#theUntoldYet {
	padding: 0.78em;/*10px;*/
	width: 100%;
	/*height: 1000px;*/
	background-size: contain;
	position: relative;
	/*top: -80px;*/
	z-index: 0;
}

@media only screen and (max-width: 734px) {
	#theUntoldYet {
		height: 1174px;
	}
}

@media only screen and (min-width: 1441px) {
	#theUntoldYet {
		/*height: 1300px;*/
	}
}

#theUntoldYetBG {
	background-image: url("../images/TheUntoldYet/theUntoldYetBeachRain.jpg");
	opacity: 65%;
	background-size: cover;
}

#theUntold {
	margin-top: -50px;
}

/*rotate(270deg) margin-top: 50px then allow the different media queries to pull the video to the right to offset rotation*/
/*
#theUntold {
	transform: rotate(270deg);
	margin-top: 50px;
	width: initial;
}

@media only screen and (max-width: 734px) {
	#theUntold {
		height: 200px;
		right: -50px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#theUntold {
		height: 340px;
		right: -86px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#theUntold {
		right: -100px;
		margin-right: -60px;
		height: 395px;
	}
}

/*iOS specific media query but not sure how to make it differentiate between iphone and ipad
@supports (-webkit-text-size-adjust:none) and (font: -apple-system-body) { 

		#theUntold {

		   margin-right: -60px;

		} 

}

@media only screen and (min-width: 1441px) {
	#theUntold {
		right: -120px;
	}
}*/

.narratorialAuthortorial {
	width: max-content;
	position: fixed;
	transform: translate(-50%);
	top: initial;
	margin:4px;
}

/* Double check if this affects the iPhone too much)*/
@media only screen and (max-width: 1440px) {
	.narratorialAuthortorial {
		bottom: 50px;
	}
}
@media only screen and (min-width:1441px) {
	.narratorialAuthortorial {
		bottom: 60px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#theUntoldYetNarratorialAuthortorial {
		transform: translate(-50%);
		top: initial;
		bottom: 20px;
	}
}

#carouselLeftOfTheUntoldYet {
	background-image: url("../images/TheUntoldYet/narratorialLanguageOfCodeHor50op.jpg");
	background-size: cover;	
}

/*
@media only screen and (min-width: 1441px) {
	.theUntoldYetNarratorialTopic {
		position: absolute;
		top: 410px;
		left: 530px;
	}
}
*/
/*
@media only screen and (min-width: 1441px) {
	#theUntoldYetNarratorial1TextBlock {
		top: 120px;
		width: 11%;
	}
}
*/
#carouselRightOfTheUntoldYet {
	background-image: url("../images/TheUntoldYet/authortorialLongBeachFallwSkyHor.JPG");
	background-size: cover;	
}

@media only screen and (min-width: 1441px) {
	#theUntoldYetRightCarouselAuthortorialSpine {
		margin-top: -10px;
	}
}



.Background {
	position: absolute;
	z-index:-1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.underlayBG {
	position: absolute;
	z-index: -2;
	
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/*for use with underlayBG (currently)*/
.green {
	background-color: #c5ddc3;
}

.white {
	background-color:#fff;
}

.notSpine {
	display:none;
	height: 100vh;
	height: 640px;
	/*margin-top: -20px;*/
}

@media only screen and (min-width: 1441px) {
	.notSpine {
		height: 920px;
		/*height: 100vh;*/
	}
}

@media only screen and (min-width: 1441px) and (min-height: 921px) {
	.notSpine {
		height: 100vh;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.notSpine {
		height: 650px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.notSpine.rightToLeftSlides {
		height: 560px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	.notSpine {
		height: 1042px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.notSpine {
		height: 772px;
	}
}
/*
@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.notSpine {
		height: 810px;
	}
}
*/

/*Unused Currently*/
/*.bg-image {
  background-repeat: no-repeat;
}*/

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.hideSpineSpace {
		display: none;
	}
}
	
@media only screen and (max-width: 734px) {
	.mobile {
		display: initial;
	}
}

@media only screen and (min-width: 735px) {
	.mobile {
		display: none;
	}
}
	
@media only screen and (max-width: 734px) {
	.desktop {
		display: none;
	}
}

@media only screen and (min-width: 1441px) {
	.desktop {
		display: display;
	}
}



/* Navigation between carousels */
.narratorialAuthortorial {
  /*top: 464px;*/
  color: rgb(214, 132, 132);
  font-size: 1rem;
}

#EverlyNarratorialAuthortorial {
	/*position: fixed;*/
	position: fixed;
	  writing-mode: initial;
	  text-orientation: initial;
}

@media only screen and (max-width: 734px) {
	#EverlyNarratorialAuthortorial {
		letter-spacing: initial;
		width: max-content;
		transform: translateX(-50%);
		top: initial;
		bottom: 32px;
		font-size: .9em;
	}
}



@media only screen and (min-width: 1441px) {
	#EverlyNarratorialAuthortorial {
		letter-spacing: initial;
	}
}

#permissionsRightArrow, #whoAreYouLeftArrow {
	position: initial;
}

/*Beginning of dropUp CSS for img used in index.html*/
/*Unused currently*/
label {
  position: relative;
  display: block;
  /*font-size: 0.833vw;*/
}

/*Unused currently*/
label > img {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  max-width: 100%;
  height: auto;
  /*bottom: 100%;*/
  display: none;
  z-index: 2;
}

/*Unused currently*/
#dropUpImg {
  display: none;
}

/*Unused currently*/
#dropUpImg:checked + label > img {
  display: block;
}

/*Unused currently*/
#dropUpImg:checked + label > span {
	color: #b35900;
	text-decoration: underline;
}

/*Beginnig of dropUp CSS for paragraph pop up*/
/*Unused currently*/
.dropUpP + label {
  position: relative;
  display: block;
  /*font-size: 0.833vw;*/
}

/*Unused currently*/
.dropUpP + label > div {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  max-width: 100%;
  height: auto;
  bottom: 100%;
  display: none;
  z-index: 2;
  background-color: rgba(197,221,195,0.8);
  pointer-events:none;
}

.clickableTextWithinPopup {
	pointer-events:auto;
}

/*Unused currently*/
.dropUpP {
  display: none;
}

/*Unused currently*/
.dropUpP:checked + label > div {
  display: block;
}

/*Unused currently*/
.dropUpP:checked + label > span {
	color: #b35900;
	text-decoration: underline;
}

/*Unused currently*/
#landingAuthortorialDropUpLabel {
	width: 1000px;
}

/*Unused currently*/
#landingAuthortorialDropUpLabel2 {
	top: -20px;
	left: 100px;
}

/*Use this once I figure out click events headache with labels in form*/
/*Unused currently - actually used later for a display:none, investigate later*/
#noteToVisitorSectionToShow {
	
}

#noteToVisitorSectionToShow, #correspondentSectionToShow {
	display: none;
}

@media only screen and (min-width: 1441px) {
	#noteToVisitor {
		left: -400px;
		padding: 25px;
		margin-bottom: 20px;
	}
}

/*Unused currently but could be used to replace style declaration multiple places in html*/
.makeBold {
	font-weight: bold;
}

/*End of dropUp CSS*/


/*seashore authortorial section*/
/*Unused currently*/
@media only screen and (max-width: 734px) and (orientation: landscape) {
	#navigation {
		top:10px;
		transform: translate(-65px, -20px);
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#navigation {
		transform: translateX(-150px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	#navigation {
		transform: translateX(-70px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	#navigation {
		transform: translateX(-50px);
	}
}


@media only screen and (max-width: 734px) and (orientation: landscape) {
	#attributions {
		transform: translate(0px, -60px);
	}
}

#navigationContainer, .correspondentsPopUp, #attributionsContainer {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  height: auto;
  bottom: 100%;
  display: none;
  z-index: 2;
  background-color: rgba(197,221,195,0.8);
  width: 670px;;
  /*left: -200px;*/
  /*margin-bottom: 20px;
  padding: 25px;*/
  margin-bottom: 30px;
  padding: 15px;
}

#attributionsContainer {
	width: 400px;
	left: -40px;
	font-size: 19px;
	border-style: double;
	border-color: #732a12;
	color: #42180a;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#attributionsContainer {
		transform: translate(-180px, 20px);
		width: 330px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#attributionsContainer {
		transform: translate(-400px, -50px);
		width: 640px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	#attributionsContainer {
		transform: translate(-200px, -20px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	#attributionsContainer {
		transform: translate(-150px, 20px);
	}
}


#attributionsSlide1 .Cormorant-Italic{
	font-weight: bold;
}

.attributionsTitle {
	font-size: 1.1em;
	font-weight: bold;
}

.attributionsLocation {
	margin-left: 70%;
}

@media only screen and (max-width: 734px) {
	#navigationContainer {
		left: -215px;
		width: 350px;
		font-size: 0.75em;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#navigationContainer {
		left: -394px;
		width: 648px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#navigationContainer {
		left: -395px;
	}
}

#navigationContainer {
	border-style: double;
	border-color: #732a12;
}
	

.correspondentsPopUp {
	/*background-color: rgba(197,221,195,0.1);*/
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
	pointer-events: none;
	/*opacity: 0.4;*/
	margin-bottom: initial;
	padding: initial;
	bottom: initial;
	width: 100%;
	text-align: center;
	background-color: initial;
	/*transition: opacity 4s; Look into this for quick opacity work when correspondents is clicked
	opacity: 0;*/
}

@media only screen and (max-width: 734px) {
	#correspondentPopUp {
		left: -230px;
		width: 380px;
		bottom: -20px;
		font-size: 0.7em;
	}
}

@media only screen and (max-width: 734px) {
	.correspondentsPopUp {
		width: calc(100% - 1.64em);
	}
}

@media only screen and (max-width: 734px) {
	.carouselEverly .correspondentsPopUp {
		padding-left: 0.87em;
		width: calc(100% - 0.87em);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#correspondentPopUp {
		width: 551px;
		left: -340px;
		bottom: 0px;
		top: 30px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: portrait) {
	.correspondentsPopUp {
		width: 1100px;
		transform: translateX(-10%) translateY(-60px);
	}
}



.authortorialCorrespondence {
	padding: initial;
}

.correspondentsSlide {
	width: 60%;
	text-align: left;
	font-size: 18px;
	display: none;
	color: #732a12;
	
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.correspondentsSlide {
		width: 90%;
		font-size: 13px;
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.correspondentsSlide {
		width: 100%;
		font-size: 10px;
	}
}

@media only screen and (min-width:735px) and (max-width:1440px) and (orientation: landscape) {
	.correspondentsSlide {
		width: 98%;
		transform: translateY(-70px) translateX(-3px);
		margin: 6px;
		font-size: 16px;
	}
}


.correspondentsReadAll {
	pointer-events: auto;
	cursor: pointer;
	display: none;
	
}

.correspondentsClick {
	cursor: pointer;
}

.correspondenceHiddenType {
	opacity: 0;
	transition: opacity 8s;
}

.citationPopupClick {
	cursor: pointer;
	color: #144813;
	text-decoration: underline;
}

.citationPopup {
	background-image: url("../images/Citations/citationDef.jpg");
	align-items: center;
	display: grid;
	font-size: 10pt;
	font-family: Open_Sans;
	width: max-content;
	height: 45px;
	padding: 10px;
	position: absolute;
	bottom: -16px;
	left: 118px;
	background-position-y: -7px;
	border-style: double;
	border-color: #732a12;
	color: #42180a;
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.citationPopup {
		left: -20px;
		width: 300px;
		padding: 4px;
		height: auto;
		z-index: 1;
		bottom: 0px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.citationPopup {
		left: -20px;
		width: 480px;
		padding: 4px;
		height: auto;
		z-index: 1;
		bottom: 0px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.citationPopup {
		width: 550px;
		height: auto;
		z-index: 1;
	}
}

.citationHidden {
	visibility: hidden;
}

.showing {
	opacity: 0.6;
}

@starting-style {
	.showing {
		opacity: 0;
	}
}

.slideActive {
	display: inline-block;
}

.clickToNextSlide {
	pointer-events: auto;
}

.authortorialCorrespondence .title {
	padding: 0.78rem 0px 0px 0.78rem
}

.authortorialCorrespondence .subtitle {
	padding-left: calc(10px + 25.454px);
}

.authortorialCorrespondence .screenPageTitle {
	padding-left: 23px;
}

/*Germinations pop up in Narratorial sections*/
.NarratorialGerminationsPopUp {
	/*position: absolute;*/
	/*display: none;*/
	margin-left: 360px;
	bottom: 46px;
	width: fit-content;
}

@media only screen and (max-width: 734px) {
	.NarratorialGerminationsPopUp {
		margin-left: 20px;
		transform: translateY(-20px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.NarratorialGerminationsPopUp {
		margin-left: initial;
		transform: translate(80px, 130px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.NarratorialGerminationsPopUp {
		transform: translate(70px, -30px);
	}
}

@media only screen and (min-width: 1441px) {
	.NarratorialGerminationsPopUp {
		position: relative;
		width: 400px;
	}
}

@media only screen and (max-width: 734px) {
	.slideshow-container {
		position: absolute;
	}
}

/*Realia Of Keywords*/
#nascent {
	display:none;
	position: absolute;
	bottom: 250px;
	z-index: 3;
	height: 400px;
	left: 150px;
}

#amalgamator {
	display:none;
	position: absolute;
	bottom: 220px;
	z-index: 3;
	height: 400px;
	left: 30px;
}

#germination {
	display:none;
	position: absolute;
	bottom: 85px;
	z-index: -1;
	height: 400px;
	left: -200px;
}

#ReadyMade {
	display:none;
	position: absolute;
	bottom: 69px;
	z-index: -1;
	width: 400px;
	left: 85px;
}

/* desktop is using this */
#realia {
	display:none;
	position: absolute;
	bottom: 160px;
	z-index: 3;
	height: 83px;
	left: 135px;
}

@media only screen and (max-width: 734px) {
	#realia {
		height: 249px;
		left: 40px;
		height: 83px;
		bottom: 0px;
		top: 270px;
	}
}

/*Unused Currently*/
#bifurcationImg {
	display: none;
	position: absolute;
	bottom: 70px;
	z-index: 3;
	height: 400px;
}

/*Unused Currently*/
#nurturingImg {
	display: none;
	position: absolute;
	bottom: 70px;
	z-index: 3;
	height: 400px;
	left: 93px;
}

#groundOfBeing {
  display:none;
  position: absolute;
  bottom: -195px;
  z-index: 3;
  height: 175px;
  left: 85px;
}

@media only screen and (max-width: 734px) {
	#groundOfBeing {
	  bottom: -151px;
	  height: initial;
	  left: -260px;
	  transform: scale(0.3, 0.3);
	}
}

#groundOfBeing:hover {
	opacity: 0.9;
}
/*
#secular {
	display:none;
	position: absolute;
  z-index: 3;
  transform: translate(-85%, -20%) scale(0.5);
}

@media only screen and (max-width: 734px) {
	#secular {
		bottom: -166px;
	  height: initial;
	  left: -298px;
	  transform: scale(0.25, 0.25);
	}
}
*/

.etymologyContainer {
	position: absolute;
	transform: translate(-280px, -18px);
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	.etymologyContainer {
		transform: translate(-350px, -18px);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.etymologyContainer {
		transform: translate(-330px, -18px);
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	.etymologyContainer {
		left: -58px;
		transform: translateY(-18px);
	}
}

/*Hides the whispers ety in narratorial on iPhone and ipad screen sizes for the time being*/
@media only screen and (max-width: 1440px) {
	#whispersCommonsText, #whispersInspireText {
		display: none;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#literacyContainer {
		transform: translate(-350px, 18px);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#literacyContainer {
		transform: translate(-200px, 18px);
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#literacyContainer {
		transform: translate(0px, 0px);
	}
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
	#swordEtymology {
		transform: translate(-120px, -20px);
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) and (orientation: landscape) {
	.etymologyWordRightMost {
		transform: translate(-450px, -18px);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	.etymologyWordRightMost {
		transform: translate(-400px, -18px);
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#relationContainer {
		transform: translate(-300px, -18px);
	}
}

.etymologyGroup {
	/*display:none;*/
	position: absolute;
	z-index: 3;
	
}

.etymologyGroupHidden {
	visibility: hidden;
}

.rootLabel {
	/*transform: translate(-420px, -18px);*/
	font-size: 0.9rem;
	color: #42180a;
	text-decoration-line: underline;
	cursor: pointer;
	font-family: Alegreya_SC;
}

/*
@media only screen and (max-width: 734px) and (orientation: portrait) {
	.rootLabel {
		transform: translateY(-70px);
		left: -40px;
	}
}
*/

.definition {
	/*transform: translate(-110%, -70%);*/
	height: 26px;
	/*width: 315px;*/
	transform: translate(50px);
}

/*
@media only screen and (max-width: 734px) and (orientation: portrait) {
	.definition {
		transform: translateY(-45px);
		left: -30px;
	}
}
*/

.etymology {
	cursor: pointer;
	/*height: 36px;*/
	width: 310px;
	/*transform: translate(-100%, -120%);*/
	transform: translate(60px, -80%);
}

/*
@media only screen and (max-width: 734px) and (orientation: portrait) {
	.etymology {
		transform: translateY(-70px);
		left: -5px;
	}
}
*/

.secularEtymology {
	transform: translate(-82%, -70%);
	position: absolute;
	width: 300px;
	cursor: pointer;
	display: none;
}

#obscureOriginEtymology {
	transform: translate(-82%, -50%) scale(0.5);
}

#nurtureWordRoot {
	display:none;
	position: absolute;
  bottom: 42px;
  z-index: 3;
  height: 352px;
  left: -196px;
}

#economiesGift {
	display:none;
	position: absolute;
	bottom: 176px;
	z-index: 3;
	height: 352px;
	left: -56px;
}

@media only screen and (max-width: 734px) {
	#economiesGift {
		height: initial;
		bottom: 0px;
		left: -287px;
		transform: scale(0.25,0.25);
	}
}

#faith {
	display:none;
	position: absolute;
	bottom: -10px;
	z-index: 3;
	height: 400px;
	left: -56px;
}

#grief {
	display:none;
	position: absolute;
	bottom: -125px;
	z-index: 3;
	height: 400px;
	left: -164px;
}

#searching {
	display:none;
	position: absolute;
	bottom: 190px;
	z-index: 3;
	height: 400px;
	left: -184px;
}

#search {
	display:none;
	position: absolute;
	bottom: 160px;
	left: -184px;
	height: initial;
	transform: scale(0.7,0.7);
}
/*
#literacy {
	display:none;
	position: absolute;
	bottom: 150px;
	left: -199px;
	height: initial;
	transform: scale(0.5, 0.5);
}
*/
#wilderness {
	display:none;
	position: absolute;
	bottom: 84px;
	left: 56px;
	height: initial;
	transform: scale(0.7, 0.7);
}
/*
#inspiring {
	display:none;
	position: absolute;
	top: 60px;
	z-index: 3;
	height: 352px;
	left: -226px;
}*/
/*
#authority {
	display:none;
	position: absolute;
	top: 250px;
	z-index: 3;
	height: 352px;
	left: -250px;
}
*/
#fontFamilyCourierPrime {
	display:none;
	position: absolute;
	bottom: 166px;
	z-index: 3;
	height: 270px;
	left: -262px;
}
@media only screen and (max-width: 734px) {
	#fontFamilyCourierPrime {
		bottom: -196px;
		height: initial;
		left: -556px;
		transform: scale(0.25, 0.25);
	}
}

#authority:hover {
	opactiy: 0.9;
}

#faith:hover {
	opacity: 0.9;
}

#inspiring:hover {
	opacity: 0.9;
}

#searching:hover {
	opacity: 0.9;
}

#grief:hover {
	opacity: 0.9;
}

#secular:hover {
	opacity: 0.9;
}

#economiesGift:hover {
	opacity: 0.9;
}

#nurtureWordRoot:hover {
	opacity: 0.9;
}

#nascent:hover {
	opacity: 0.9;
}

#amalgamator:hover {
	opacity: 0.9;
}

#germination:hover {
	opacity: 0.9;
}

#realia:hover {
	opacity: 0.9;
}

#imgTransmutations {
	display:none;
	position: absolute;
	bottom: 55px;
	z-index: 3;
	height: 400px;
	left: -35px;
}

@media only screen and (max-width: 734px) {
	#imgTransmutations {
		bottom: 65px;
		height: 270px;
	}
}

#imgTransmutations:hover {
	opacity: 0.9;
}


.returnToTop {
	display: block;
}


/*Height of narratorial and authortorial + its background*/
.narratorialHeightAndBackground, .authortorialHeightAndBackground {
		/*height: 100vh;*/
		background-size: cover;
}



/*Authortorial Carousels background*/
/*This was duplicated outside of media query and within desktop mediaquery, why?*/







/*Video Related*/
/*Unused currently*/
.videoForGreenPoetDirect {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  height: auto;
}

/* GreenPoet Related */



#migrantClickable {
	position: absolute;
	z-index: 1;
	
	text-align: right;
}

@media only screen and (max-width: 734px) {
	#migrantClickable {
		/*font-size: 20.5625px;*/
		top: 125px;
		right: 16px;
		line-height: 1em;
		width: 100px;
	}
}

@media only screen and (max-width: 734px) and (orientation: landscape) {
	#migrantClickable {
		top: 100px;
		width: initial;
		right: 24px;
	}
}

@media only screen and (min-width: 735px) and (max-width: 1440px) {
	#migrantClickable{
		/*font-size: 25px;*/
		top: 160px;
		right: 30px;
		padding-right: calc(56px - 0.78em);
	}
}

@media only screen and (min-width: 1441px) {
	#migrantClickable {
		/*font-size: 29.37px;*/
		top: 232px; /*magic 25% height*/
		right: 100px;
		padding-right: calc(24.5333px * 0.78 + 56px);
		right: 0px;
	}
}


.carouselPadding {
	padding: 0.78em;
}

/*
@media only screen and (min-width: 1441px) { instead of @media only screen and (min-width: 1400px) {
@media only screen and (min-width: 1069px) {
@media only screen and (min-width:735px) and (max-width: 1068px) { instead of @media only screen and (min-width: 576px) and (max-width: 767.98px) { (maybe?)
@media only screen and (max-width: 734px) { instead of @media only screen and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
declare 1068 before 734
declare 1069 before 1441
if 734 and 1441, doesn't matter???



*/

/* Possible orphaned ones? */
#thatweAre {
	margin-left: 3vw;
}

#weAll {
	margin-left: 6vw;
}



.variableBreak {
	display: none;
}

#whatIsLeftArrow {
	
  position: relative;
  left: -30px;
  top: 175px;
  /*opacity: 40%;*/
}

.leftArrow, .rightArrow {
	font-size: 40pt;
	color: #D68484;
	cursor: pointer;
}

@media only screen and (min-width: 1441px) {
	/*#EverlyAuthortorial1 {
		background-image: url("../images/EverlySky/EverlyInSkyHor70Opacity.jpg");
	}
	
	#EverlyAuthortorial2 {
		background-image: url("../images/EverlySky/EverlyInSkyHor70Opacity.jpg");
	}
	
	#EverlyAuthortorial3 {
		background-image: url("../images/EverlySky/EverlyInSkyHor50Opacity.jpg");
	}
	
	#EverlyAuthortorial4 {
		background-image: url("../images/EverlySky/EverlyInSkyHor20Opacity.jpg");
	}*/
	
	/*#economiesAuthortorial2 {
		background-image: url("../images/GenderTrouble/yourEconomiesAuthortorialBg78op.jpg");
	}
	
	#economiesAuthortorial3 {
		background-image: url("../images/GenderTrouble/yourEconomiesAuthortorialBg78op.jpg");
	}
	
	#economiesAuthortorial4 {
		background-image: url("../images/GenderTrouble/yourEconomiesAuthortorialBg78op.jpg");
	}*/
	
	/*#thisShiftingWomanhoodAuthortorial1, #thisShiftingWomanhoodAuthortorial2 {
		background-image: url("../images/ThisShiftingWomanhood/streamStillwBranch78op.jpg");
	}*/
	
	/*#thisShiftingWomanhoodNarratorial1, #thisShiftingWomanhoodNarratorial2, #thisShiftingWomanhoodNarratorial3 {
		background-image: url("../images/ThisShiftingWomanhood/thisShiftingWomanhoodNarratorial125op.jpg");
	}*/
	
	/*#anotherLogicOfKinshipNarratorial1, #anotherLogicOfKinshipNarratorial2, #anotherLogicOfKinshipNarratorial3 {
		background-image: url("../images/AnotherLogicOfKinship/narratorialEtymology150op.jpg");
	}*/
	
	/*#anotherLogicOfKinshipAuthortorial1, #anotherLogicOfKinshipAuthortorial2, #anotherLogicOfKinshipAuthortorial3 {
		background-image: url("../images/AnotherLogicOfKinship/anotherLogicOfKinshipBg125op.jpg");
	}*/
	
	/*#EverlyNarratorial1 {
		background-image: url("../images/EverlySky/EverlyInSkyOnlyHor.jpg");
	}*/
	
	/*#ancientNarratorial1, #ancientNarratorial2 {
		background-image: url("../images/OurAncient/OurAncientNarratorialBg.jpg");
	}*/
}

#everlyDropUpLabel {
	/*padding-bottom: 140px;*/
}

@media only screen and (max-width: 734px) {
	#ancientDropUpLabel {
		/*padding-bottom: 5px;*/
		top: 50px;
	}
}
/*#outOfVoidDropUpLabel {
	padding-bottom: 5px;
}*/

#whatPermissions {
	/*width: 99%;*/
	/*font-size: 1.4em;*/
}

#removeWhiteSpaceBelow {
	margin-bottom: -80px;
}

/*#Everly .screenPageTitle {
	letter-spacing: 1em;
}*/

@media only screen and (min-width: 1441px) {
	#skyBG {
		background-image: url("../images/SkyClouds/SkyDesktop.jpg");
		background-size: cover;
		display: initial;
	}
}

@media only screen and (min-width: 1441px) {
	#howToPut {
		position: absolute;
		top: 350px;
		left: 200px;
		opacity: 55%
	}
}

@media only screen and (min-width: 1441px) {
	#whatMakes {
		position: absolute;
		top: 350px;
		left: 200px;
		opacity: 55%
	}
}


@media only screen and (min-width: 1441px) {
	#howToGrow {
		position: absolute;
		top: 350px;
		left: 200px;
		opacity: 65%	
	}
}

@media only screen and (min-width: 1441px) {
	#whatIsLiteracy {
		position: sticky;
		top: 350px;
		width: 45%;
		opacity: 55%
	}
}

@media only screen and (min-width: 1441px) {
	#economiesNarratorial1 {
		background-image: ;
	}
}

/*
@media only screen and (min-width: 1441px) {
	.thisShiftingNarratorialTopic {
		position: absolute;
		top: 410px;
		left: 200px;
	}
}
*/

/*
@media only screen and (max-width: 734px) {
	.greenPoet {
		font-size: 20.5625px;
	}
}

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

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

.showDisplayInitial {
	display: initial;
}

.showDisplayInlineBlock {
	display: inline-block;
}