/*iPhone 6/7/8 & 6+/7+/8+ vertical*/

body, html {
	margin: 0;
}
body {
	min-width: 320px;
	font-size: 4vw /*16px;*/
}

* {
  box-sizing: border-box;
}

#correspondentDiv {
	visibility: hidden;
}

/*Collapsible menu*/
/* Style the collapsible content. Note: hidden by default */
#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: 1;
	position: fixed;
}
#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: .5em;
	font-family: Alegreya_Sans_SC;
	line-height: 1.4em;
	color: #42180a;
	/*cursor: pointer;*/
	padding: 18px;
	z-index:2;
}

.cursorPointer {
	cursor: pointer;
}

/*Beginning of dropUp CSS used in index.html*/
		.dropUp + label {
		  position: relative;
		  display: block;
		}
		
		.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;
		}
		
		.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 {
		  display: none;
		}

		.dropUp:checked + label > video, .dropUp:checked + label > span {
		  display: block;
		}
		
		.videoForGreenPoetDirect {
		  position: absolute;
		  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		  height: auto;
			
		}
		
		/*.dropUp:checked + label > span {
			color: #b35900;
			text-decoration: underline;
		}*/
		/*End of dropUp CSS*/
		
/*Beginning of dropUp CSS used in index.html*/
		label {
		  position: relative;
		  display: block;
		  /*font-size: 0.833vw;*/
		}
		
		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;
		}

		#dropUpImg {
		  display: none;
		}

		#dropUpImg:checked + label > img {
		  display: block;
		}
		
		#dropUpImg:checked + label > span {
			color: #b35900;
			text-decoration: underline;
		}
		
/*Beginnig of dropUp CSS for paragraph pop up*/
		.dropUpP + label {
		  position: relative;
		  display: block;
		  /*font-size: 0.833vw;*/
		}
		
		.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;
		}

		.dropUpP {
		  display: none;
		}

		.dropUpP:checked + label > div {
		  display: block;
		}
		
		.dropUpP:checked + label > span {
			color: #b35900;
			text-decoration: underline;
		}
		
		#landingAuthortorialDropUpLabel {
			width: 1000px;
		}
		
		#landingAuthortorialDropUpLabel2 {
			top: -20px;
			left: 100px;
		}
		
		/*Use this once I figure out click events headache with labels in form*/
		#noteToVisitorSectionToShow {
			
		}
		
		.makeBold {
			font-weight: bold;
		}

		/*End of dropUp CSS*/
		
		#navigation {
			
		}
		
		#navigationContainer, #correspondentPopUp {
		  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;
		}
		
		#correspondentPopUp {
		   background-color: rgba(197,221,195,0.1);
		   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
		   line-height: 1.3em;
		   pointer-events: none;
		   opacity: 0.4;
		}
		
		.NarratorialGerminationsPopUp {
			position: relative;
			display: none;
			left: 360px;
			bottom: 46px;
		}
		
		#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;
		}
		
		#realia {
			display:none;
			position: absolute;
			bottom: 150px;
			z-index: 3;
			height: 400px;
			left: -200px;
		}
		
		#bifurcationImg {
			display: none;
			position: absolute;
			bottom: 70px;
			z-index: 3;
			height: 400px;
		}
		
		#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;
		}
		
		#groundOfBeing:hover {
			opacity: 0.9;
		}
		
		#secular {
			display:none;
			position: absolute;
		  bottom: -40px;
		  z-index: 3;
		  height: 400px;
		  left: 172px;
		}
		
		#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;
		}
		
		#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;
		}
		
		#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: 125px;
  z-index: 3;
  height: 380px;
  left: -262px;
		}
		
		#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;
		}
		
		#imgTransmutations:hover {
			opacity: 0.9;
		}
		
		#noteToVisitorSectionToShow, #correspondentSectionToShow {
			display: none;
		}
		
		/*.withEtymology {
			z-index: 1
		}*/
		

}

#ancientVideo {
	position: -webkit-sticky;
	position: sticky;
	padding-bottom: initial;
}
#outOfVoidVideo {
	position: -webkit-sticky;
	position: sticky;
	padding-bottom: initial;	
}
#thisShiftingWomanhoodVideo {
	position: -webkit-sticky;
	position: sticky;
	padding-bottom: initial;
}
/*.bg-image {
  background-repeat: no-repeat;
}*/

/*consider looking into px padding adjustment for the different medias*/
#Seashore {
	position: relative;
	width: 100%;
	height: 736px;
	padding: 0.78em; /*10px;*/
	z-index: 1;
}

/*#LongBeach {
	position: relative;
	width: 100%;
	height: 736px;
	padding: 0.78em;
	z-index: 1;
}*/

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

#SeashoreBG {
	background-image: url("../images/Seashore/SeashoreVert.jpg");
	opacity:0.7;
}

#SeashoreBGFlip {
	opacity:0.7;
}

/*WORK ON GETTING THIS CLEANED UP*/
#migrantClickable {
	
	position: absolute;
  
  z-index: 1;
  color: #10370F;
}

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

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



/*TENTATIVE COME BACK HERE*/
#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;	
}

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

#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;
}

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

#carouselRightOfTheUntoldYet {
	background-image: url("../images/TheUntoldYet/authortorialLongBeachFallwSkyHor.JPG");
	background-size: cover;	
}

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

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

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

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

#permissionsRightArrow, #whoAreYouLeftArrow{
	position: initial;
}

#EverlySpine {
	position: fixed;
  top: 375px;
}

.clickableText {
	cursor: pointer;
}

#EverlyBG {
	background-image: url("../images/EverlySky/EverlyInSkyVert.jpg");
	opacity:0.90;
	background-position: 90%; /*-100px*/
	display: none;
}

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

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

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

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

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

.carouselPadding {
	padding: 0.78em;
}

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

#outOfTheVoidBG {
	background-image: url("../images/AppleTree/AppleTreeVert.jpg");
	opacity: 60%;
}

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

#thisShiftingWomanhoodBG {
	background-image: url("../images/ThisShiftingWomanhood/ThisShiftingWomanhoodVertBranch.jpg");
	opacity: 65%;
}

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

#anotherLogicOfKinshipBG {
	background-image: url("../images/AnotherLogicOfKinship/AnotherLogicOfKinshipVert.jpg");
	opacity: 60%;
}

#theUntoldYet {
	padding: 0.78em;/*10px;*/
	width: 100%;
	/*height: 1000px;*/
	background-size: contain;
	position: relative;
	/*top: -80px;*/
	z-index: 0;
}
#theUntoldYetBG {
	background-image: url("../images/TheUntoldYet/theUntoldYetBeachRain.jpg");
	opacity: 65%;
	background-size: cover;
}

.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;
}


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


.title {
	color: #42180a;
	font-family: Alegreya_SC;
	margin-bottom: 0px;
	/*padding-top: 3vh;*/
	text-align: left;
	font-weight: bold;
	/*font-size: 24.5em; */
	/*font-size: 24px;*/
	font-size: 2.5vw; /*5.797vw; ag don't know how this vw was figured?*/
	letter-spacing: 0.39em;
}

.opaque {
	opacity: 30%;
}

.opaqueForDarkBackground {
	opacity: 60%;
}

#subtitle {
	color: #c5ddc3;
	
	font-family: Alegreya_Sans_SC;
	font-weight: bold;
	/*width: 50%;*/
	/*margin-top: 4vw;*/
	/*margin-bottom: 4vw;*/
	/*margin-left: 2vw;*/
	text-align: right;
}

.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;
}

.formWithNoClick {
	pointer-events: none;
}

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

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

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

.rememberVideosVertical {
	width: 395px;
	opacity: 55%;
}

#outOfThe, #thisShifting, #anotherLogic {
display:none;
			left: 700px;
			z-index:1
}

#outOfThe {
	bottom: 0px;
  top: -550px;
}

#anotherLogic {
	bottom: -10px;
}

#outOfVoid {
	width: 1080px;
	opacity: 55%;
	left: -175px;
}

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

#thatweAre {
	margin-left: 3vw;
}

#weAll {
	margin-left: 6vw;
}

#readAuthor {
	
}



/*revisit class vs id (based on how many things that we inherit from class is changed withint ID*/

.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;
}


.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;
}

#ourAncientSpine, #outOfTheVoidSpine {
	margin-top: 25px;
}

#yourEconomiesOfExchangeSpine {
	transform: translateY(0%) translateX(-50%);
  top: 0px;
}
	
.rightCarouselAuthortorialSpine{
	left: 75px;
	z-index: 2;
}


#carouselAuthortorialSpine {
	z-index: initial;
}

#economiesRightCarouselAuthortorialSpine {
	top: 400px;
}



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

/*#thatSlimEncouragement {
	top: 0px;
}*/

.authortorialHidden{
	visibility: hidden;
	opacity: 0;
}

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

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

.whiteSpaceNormal {
	white-space:normal;
}

.authortorialRightText{
	position: relative;
	left: 450px;
	color: #10370F;
	font-family: caveat;
}

.movingTextRightSide {
	/*right: 3.35%;
	bottom: 0px;
	left: 0px;
	top: 517px;*/ /*718px;*/
	/*top: 865px;*/
}

.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;
}


.DontWrap {
	white-space: nowrap ;
}

.align-right {
	text-align: right;
	width: max-content;
	margin-left: auto;
	margin-right: 4%;
}

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

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

#weTheSection, #inHerSection {
	font-size: 1.4em;
}

.opacityZeroSection {
		opacity:0;
}

#slimEncouragementBr {
	display: none;
}

#slimEncouragement {
	position: relative;
}

#subjectIBr {
	display: none;
}

#subjectToSubjectBr {
	display: none;
}

.variableBreak {
	display: none;
}

.infoElement {
	visibility:hidden;
}

/*#weClickable {
	visibility:hidden;
}*/

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

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



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

#collapsible {
	z-index: 2;
}

#seashoreCarousel {
	z-index: 1;
}

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

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

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

.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;
}

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

#whispersDiv {
	margin-left: 30%;
}

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

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

#ancientDropUpLabel {
	/*padding-bottom: 5px;*/
}
/*#outOfVoidDropUpLabel {
	padding-bottom: 5px;
}*/

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

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

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

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

#whatIsShe {
	position: absolute;
    top: 300px;
    left: 280px;
    right: 0px;
	}

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

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

.underConstruction {
	top: 250px;
  position: relative;
  transform: rotate(320deg);
  opacity: 60%;
}

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

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

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

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

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


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

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

.noBrakeDesktop {
		display: initial;
	}

/*$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
*/

/*iPhone SE vertical just for OurAncientArgument letter-spacing*/
/*@media only screen and (max-width:320px) {
	body, html {
		overflow-x: hidden;
		max-width: 100%;
	}

	.title {
		font-size: 1.5em;
		letter-spacing: 0.2em;
	}

}*/


/*iPhone 6/7/8 vertical*/
@media only screen and (width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
	body, html {
		overflow-x: hidden;
		max-width: 100%;
	}
	body {
		font-size: calc(15px + 0.390625vw);
	}
	.title {
		font-size: 1.5em;
		letter-spacing: 0.2em;
	}
	
	#migrantClickable {
		font-size: 1.25em;
		top: 125px;
		right: 16px;
		text-align: right;
		line-height: 1em;
	}
	
	#whatThisIs {
		width: 96%;
		font-size: 1.25em;
		line-height: 1em;
		top: 65px;
		position: relative;
		margin-right: 5px;
		z-index: -1;
	}
	
	#SeashoreBG {
		background-position-x: right;
	}
	
	#SeashoreBGFlip { 
		background-image: url("../images/Seashore/SeashoreVert.jpg");
		background-size: cover;
		transform: scaleX(-1);
		background-position-x: right;
	}
	/*#ourAncient .screenPageTitle {
		letter-spacing: 0.3em;
	}*/
	/*#Everly .screenPageTitle {
		letter-spacing: 0.8em;
	}*/
	
	.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;
	}
	
	.mainSpine {
		margin-top: initial;
		width: 73%;
		font-size: 1.2em;
		line-height: 1.4em;
	}
	
	#EverlySpine {
	position: fixed;
	  top: 40px;
	}
	
	#EverlyNarratorialAuthortorial {
	  letter-spacing: initial;
	  width: max-content;
    top: 550px;
    font-size: .9em;
	}
	
	.hideSpineSpace {
		display: none;
	}
	
	.mobile {
		display: initial;
	}
	
	.desktop {
		display: none;
	}
	
	#collapsible {
		font-size: 1em;
	}
	
	#content {
		font-size: .8em;
		background-color: rgba(197,221,195,0.2);
	}
	
	#collapsible, #content {
		top: 125px;
	}
	
	.noBrakeDesktop {
		display: initial;
	}
	
	.authortorialPopUp {
		font-size: 0.9em;
		top: 600px;
	}
	
	#navigationContainer {
		left: -215px;
	}
	
	#carouselAuthortorialSpine {
		display:none;
	}
}

/*iPhone SE Vertical*/
@media only screen and (max-width: 320px) {
	.title {
		font-size: 1.25em;
	}
	
	#SeashoreBG {
		background-position-x: right;
		right: -18px;
	}
}

/*iPhone 6/7/8 and 6/7/8 plus horizontal*/
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	.title {
		/*font-size: 17px;*/
	/*font-size: 21px; */
	letter-spacing: 0.5em;
	}
	.dontWrapWide {
		white-space: wrap ;
	}
	#whatThisIs {
		font-size: 14px;
	}
	.poetDirect {
		font-size: 14px;
	}
	.authortorialSpine {
		margin-top: 110px;
	}
	.remember {
		font-size: 16px;
		letter-spacing: 0.063em;
	}

	#Seashore {
	/*background-image: url("../images/SeashoreLanding55414X738.png");
	padding: 10px;
	width: 100%;
	height:720px;*/
}

	#SeashoreBG {
	background-image: url("../images/Seashore/SeashoreMid.jpg");
	background-size: cover;
	background-position: -240px;
}


	/*.img1 {
		background-image: url("../images/SeashoreStillSilhouette414.jpg");
		background-image: 100%;
		min-height: 486px;
	}*/
}


/*iPad vertical*/
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	.title {
		font-size: 28px;
		letter-spacing: 1em;
	}

}

/*iPad Pro horizontal (we hope we hope)*/
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
	.title {
		/*font-size: 24px;*/
	}
	/*.img1 {
		background-image: url("../images/SeashoreStill.jpg");
		background-image:100%;
		min-height:1078px;
	}*/
}

/*desktop horizontal (we hope)*/
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
	.title {
		font-size: 45px;
		font-weight: bold;
		letter-spacing: 1.787em;
	}
	.img1 {
		content: url("../images/SeashoreStill.jpg");
	}
	#whatThisIs {
		width: 5%;
		font-size: 16px;
		top: 200px;
	}
	.poetDirect {
		padding-right: 0px;
		letter-spacing: 0.041em;
	}
	.dontWrapWide {
		white-space: nowrap ;
	}
	.infoElement {
		letter-spacing: 0.245em;
	}
	.variableBreak {
		display: initial;
	}
	.screenPageTitle {
		font-size: 24px;
		text-align: right;
		width: 100%;
	}

}


@media only screen and (min-width: 1400px) {
	body {
		font-size: 1.7vw;
	}
	
	.ancientPoetDirect, .poetDirectAppearing {
		font-size:.9em;
		z-index: 2;
		position:relative;
	}
	
	.poetDirectAppearing {
		top: -50px;
	}
	
	#Seashore {
		height: 928px;
	}
	
	/*#LongBeach {
		height: 928px;
	}*/
	
	#SeashoreFlip {
		height: 928px;
	}
	
	#whatThisIs {
		margin-top: 5%;
		width: 96%;
		font-size: .9em;
	}
	
	#weTheSection {
		width:96%/*90%*/;
		/*position: absolute;*/
		font-size: .9em;
		margin-top: -20px;
		margin-bottom: 50px;
	}
	
	#inHerSection {
		font-size: 1em;
	}
	
	#whatItWas{
		font-size: .9em;
		/*width: 96%;*/
	}
	
	#whatItWas {
		position: relative;
		/*pointer-events: none;*/
		top: -450px;
	}
	
	#thatLongWait {
		position: relative;
		top: 500px;
	}
	
	#whatItWas2 {
		position: relative;
		pointer-events: none;
	}
	
	#ourAncientBG {
	background-image: url("../images/OurAncient/SeineRiverHor.jpg");
	opacity: 0.7;
}

	
	#SeashoreBG {
		background-image: url("../images/Seashore/SeashoreHor.jpg");
		background-size: cover;
	}
	
	/*#LongBeachBG {
		background-image: url("../images/Seashore/SeashoreHorFlipped.JPG");
		background-size: cover;
	}*/
	
	#SeashoreBGFlip { 
		background-image: url("../images/Seashore/SeashoreHorFlip.jpg");
		background-size: cover;
	}
	
	#EverlyBG {
		background-image: url("../images/EverlySky/EverlyInSkyHor70Opacity.jpg");
		background-size: cover;
		display: initial;
	}
	
	#EverlySpine {
		position: fixed;
	  top: 45px;
	}
	
	#EverlyNarratorialAuthortorial {
	  top: 840px;
	  letter-spacing: initial;
	}
	
	#skyBG {
		background-image: url("../images/SkyClouds/SkyDesktop.jpg");
		background-size: cover;
		display: initial;
	}
	
	#background_wrap {
		display: none;
	}
	
	/*#yourEconomiesOfExchangeBG {
		background-image: url("../images/GenderTrouble/GenderTroubleHor.jpg");
		background-size: cover;
		opacity: 0.3;
	}*/
	
	#yourEconomiesOfExchangeBG {
		background-image: url("../images/BeachFeet/BeachFeetHor.jpg");
		background-size: 150%;
	}
	
	.box-5 {
		position: relative;
		top: -265px;
		left: -50px;
	}
	
	.leftVoiceBox, .rightVoiceBox {
		font-size: .9em;
	}
	
	.leftVoiceBox {
		line-height: 1.55em;
	}
	
	#outOfTheVoidBG {
		background-image: url("../images/OutOfTheVoid/outOfTheVoidBg3op200.jpg");
		background-size: cover;
	}
	
	#thisShiftingWomanhoodBG {
		background-image: url("../images/ThisShiftingWomanhood/ThisShiftingWomanhoodBranchHor.jpg");
		background-size: cover;
		opacity: 40%;
	}
	#anotherLogicOfKinshipBG {
		background-image: url("../images/AnotherLogicOfKinship/anotherLogicOfKinshipBg125op.jpg");
		background-size: cover;
	}
	
	/*#thisUntoldYetBG {
		background-image: url("../images/ThisUntoldYet/ThisUntoldYetHor.jpg");
		background-size: cover;
	}*/
	
	.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;
	}
	
	#whoAreYou {
		position: sticky;
		top: 150px;
		left: 280px;
		right: 0px;
	}
	#whatIsShe {
		width: 21%;
		/*position: absolute;
		top: 500px;
		left: 200px;
		opacity: 55%
		*/
	}
	
	#beingFemale {
		position: absolute;
		top: 350px;
		left: 250px;
	 }
	 
	#beingFemaleLeftArrow {
		position: relative;
  left: 0px;
  top: 145px;
	}
	
	#howToPut {
		position: absolute;
		top: 350px;
		left: 200px;
		opacity: 55%
	}		
	#whatMakes {
		position: absolute;
		top: 350px;
		left: 200px;
		opacity: 55%
	}	
	#howToGrow {
		position: absolute;
		top: 350px;
		left: 200px;
		opacity: 65%	
	}	
	#whatIsLiteracy {
		position: sticky;
		top: 350px;
		width: 45%;
		opacity: 55%
	}
	
	.rotatedFont {
		font-size: 2em;
	}
	.fixed-bg {
	    background-attachment: fixed;
	}
	.noBrakeDesktop {
		display: none;
	}

	.title {
		font-size: 2.55vw;
		letter-spacing: 1.3em;
	}

	#subtitle {
		margin-top: 1vw;
		font-size: 1.25vw; /*16px;*/
		letter-spacing: 0.42em;
	}
	
	.screenPageTitle {
		letter-spacing: 1.5em;
	}
	#yourEconomiesOfExchange .screenPageTitle, .shortenSubtitleLength .screenPageTitle {
		letter-spacing: 1.35em;
	}
	
	#ourAncient {
		/*top: -40px;*/
	}
	
	.remember {
		font-size: .9em;
	}
	
	.authortorialPopUp {
		font-size: .5em;
	}
	
	#remember {
		transform: translateY(-500%);
	}
	
	.hideThis {
		visibility: hidden;
	}
	
	.carouselContent {
		font-size: 0.75em;
		line-height: initial;
		top: 48%;
		color: #660000;
	}
	
	/*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;
	}
	
	#weTheSectionAuthortorial {
		top: 217px;
	}
	
	#justNowAuthortorial {
		top: 177px;
	}
	
	
	/*#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");
	}*/
	
	#carouselRightOfEverly {
		background-image: url("../images/EverlySky/EverlyInSkyHor50Opacity.jpg");
	}
	
	#economiesAuthortorial1 {
		background-image: url("../images/GenderTrouble/yourEconomiesAuthortorialBg78op.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");
	}
	
	#outOfTheVoidAuthortorial1, #outOfTheVoidAuthortorial2 {
		background-image: url("../images/OutOfTheVoid/whenIWasBorn2op.jpg");
	}
	
	#carouselLeftOfOutOfTheVoid {
		background-image: url("../images/OutOfTheVoid/whenIWasBorn2.jpg");
		height: 100vh;
    background-size: cover;
	}
	
	#thisShiftingWomanhoodAuthortorial1, #thisShiftingWomanhoodAuthortorial2 {
		background-image: url("../images/ThisShiftingWomanhood/streamStillwBranch78op.jpg");
	}
	
	/*#thisShiftingWomanhoodNarratorial1, #thisShiftingWomanhoodNarratorial2, #thisShiftingWomanhoodNarratorial3 {
		background-image: url("../images/ThisShiftingWomanhood/thisShiftingWomanhoodNarratorial125op.jpg");
	}*/
	
	#carouselLeftOfThisShiftingWomanhood {
		background-image: url("../images/ThisShiftingWomanhood/thisShiftingWomanhoodNarratorial125op.jpg");
	}
	
	/*#anotherLogicOfKinshipNarratorial1, #anotherLogicOfKinshipNarratorial2, #anotherLogicOfKinshipNarratorial3 {
		background-image: url("../images/AnotherLogicOfKinship/narratorialEtymology150op.jpg");
	}*/
	
	#carouselLeftOfAnotherLogicOfKinship {
		background-image: url("../images/AnotherLogicOfKinship/narratorialEtymologyHor75op.jpg");
	}
	
	#anotherLogicOfKinshipAuthortorial1, #anotherLogicOfKinshipAuthortorial2, #anotherLogicOfKinshipAuthortorial3 {
		background-image: url("../images/AnotherLogicOfKinship/anotherLogicOfKinshipBg125op.jpg");
	}
	
	.narratorialHeightAndBackground, .authortorialHeightAndBackground {
		height: 100vh;
		background-size: cover;
	}
	
	/*#EverlyNarratorial1 {
		background-image: url("../images/EverlySky/EverlyInSkyOnlyHor.jpg");
	}*/
	
	/*#ancientNarratorial1, #ancientNarratorial2 {
		background-image: url("../images/OurAncient/OurAncientNarratorialBg.jpg");
	}*/
	
	#economiesNarratorial1 {
		background-image: ;
	}
	
	.narratorialTextBlock {
	position: absolute;
	  font-size: 1rem;
	  color: #10370F; 
	  margin-left: 63%;
    width: 10%;
	text-align: justify;
	text-align-last: center;
	}
	
	.explainClick {
	position: absolute;
		color: #42180a;
		  top: 50%;
		  font-size: 16px;
		  transform: translateY(-50%);
		  left: -100px;
	}
	
	.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;*/
	}
	

	
	.narratorialTitleSubtitle {
		text-align: right;
		margin-right: -1.3em;
	}
	
	.narratorialReturnToSpine {
		left: 90.25vw;
		color: #732a12;
		margin-left: -1.56em;
	}
	
	#ancientPoetDirect {
		position: relative;
		top: -50px;
	}
	
	#thisShiftingWomanhoodPoetDirect {
		top: -60px;
	}
	
	#noteToVisitor {
		left: -400px;
		padding: 25px;
		margin-bottom: 20px;
	}
	.ourAncientNarratorialTopic {
		position: absolute;
		  top: 420px;
		  left: 200px;
	}
	
	.outOfTheVoidNarratorialTopic {
		position: absolute;
		  top: 410px;
		  left: 200px;
		  word-spacing: -.124em;
	}
	
	.thisShiftingNarratorialTopic {
		position: absolute;
		  top: 410px;
		  left: 200px;
	}
	
	.anotherLogicOfKinshipNarratorialTopic {
		position: absolute;
		  top: 410px;
		  left: 445px;
	}
	
	.theUntoldYetNarratorialTopic {
		position: absolute;
		  top: 410px;
		  left: 530px;
	}
	
	.EverlyNarratorialTopic {
		position: absolute;
		margin-left: 30%;
		margin-top: 10%;
	}
	
	.economiesNarratorialTopic {
		position: absolute;
		  top: 420px;
		  left: 200px;
		  font-size: 1.75em;
	}
	
	.thisShiftingWomanhoodNarratorialTopic {
		position: absolute;
		  top: 420px;
		  left: 425px;
	}
	
	#anotherLogicOfKinship {
		/*height: 100vh;*/
	}
	
	#theUntoldYet {
		/*height: 1300px;*/
		}
	
	#whispersEverlyNarratorial1Div {
		position: absolute;
	  margin-left: 55%;
	  width: 100px;
	}
	
	#adaStickyNote {
		position: absolute;
	  top: 45px;
	  width: 75%;
	  left: 360px;
	}
	
	.authortorialPositioning {
		position: relative;
		top: 0px;
		transform: translateY(0%) translateX(-50%);
		width: 960px;
	}
	
	#anotherLogicOfKinshipSpine {
		margin-top: 40px;
	}
	
	#theUntoldYetRightCarouselAuthortorialSpine {
		margin-top: -10px;
	}
	
	#thisShiftingWomanhoodSpine {
		top: 715px;
	}
	
	#theUntoldYetSpine {
		top: 770px;
	}
	
	#economiesNarratorial1TextBlock, #thisShiftingWomanhoodNarratorial1TextBlock {
		top: 140px;
	}
	
	#ourAncientNarratorial2TextBlock {
		width: 11%;
		top: 120px;
	}
	
	#anotherKinshipNarratorial2TextBlock {
		top: 120px;
  width: 15%;
	}
	
	#theUntoldYetNarratorial1TextBlock {
		top: 120px;
		width: 11%;
	}
	
	#outOfTheVoidPoetDirect {
		position: relative;
  top: -50px;
	}
	
	#migrantClickable {
		font-size: .9em;
		right: 100px;
		top: 25%;
	}
	
	.mobile {
		display: none;
	}
	
	.desktop {
		display: display;
	}
	
	.NarratorialGerminationsPopUp {
		width: 400px;
	}
}