/*
.green-box {
	left: 9%;
	top: 2%;
	width: 82%;
	height: 10%;
	line-height: 1.1em;
}
*/
.no-box {
	font-size: 0.9em;
/*
	width: 61%;
*/
	height: 500px;
	text-align: left;
	line-height: 1.1em;
	margin: 0.2em 2.5em;
}

.no-box p { margin: 0; }

#page-1  {
	top: 2%;
	width: 82%;
	left: 8.5%;
	height: 10%;
}

#page-1 p {
	line-height: 1.1em;
	margin: 0.25em;
}

#carousel-holder {
	top: 13%;
	width: 82%;
	left: 8.5%;
	height: 56.7%;
}

#page-2 {
	top: 71.3%;
	width: 82%;
	left: 8.4%;
	font-size: 1.6em;
	line-height: 1.25em;
	text-align: left;
	height: 24.7%;
}

.ending-box .solid-light-purple-box {
	top: 30%;
	left: 25%;
	width: 50%;
	position: fixed;
}

 .recap-question {
	padding-top: 5em;
	margin: 1.5em !important;
 }

/* ---- Map Key ---- */
#map-key {
	background-color: #ffffff;
	border-radius: 0.25em;
	position: absolute;
	top: 1%;
	width: 31%;
	left: 34.5%;
	color: var(--violet-color);
	border: 5px solid white;
	padding-bottom: 0.25em;
}

#map-key .title {
	position: relative;
	width: 100%;
	margin: auto;
	font-size: 0.7em;
	text-align: center;
}

.key {
	width: 48%;
	height: 40px;
	font-size: 0.55em;
	text-align: left;
	margin: 0;
	display: inline-block;
}

#building-key { margin-top: 9px; }
#building-key p { line-height: 1.15em; }

.key img {
	width: 35px;
	height: 35px;
	margin: 7px 0 0 6px;
	padding: 0;
}

.key p {
	font-size: 0.9em;
	width: 110px;
	line-height: 1.1em;
	float: right;
	margin: 0.4em 0 0 0;
	line-height: 2.5em;
}
/* ---- */

.carousel-indicators {
	margin: auto;
}

#wavy-bay-map, #seal-beach-map {
	width: 350px;
	height: 490px;
	position: absolute;
	border-radius: 0.25em;
	top: 4%;
	border: none;
}

#wavy-bay-map { left: 51.5%; }
#seal-beach-map { left: 12%; }

.map-pic p {
	bottom: 0;
	top: unset !important;
}

#wavy-bay-pic, #seal-beach-pic {
	width: 422px;
	height: 255px;
	position: absolute;
	border-radius: 0.25em;
	top: 31.1%;
}

#wavy-bay-pic { left: 51.5%; }
#seal-beach-pic { left: 8%; }

.pic p {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.1em;
	font-weight: 600;
	color: #FFFFFF;
	text-transform: uppercase;
	margin: 0.25em 0.5em;
}

.pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 5px solid #FFFFFF;
	border-radius: 0.5em;
}

.solid-violet-box {
	position: absolute;
	top: 2%;
	left: 8.5%;
	width: 82%;
	height: 92.7%;
}

#page-2 .solid-light-purple-box {
	top: 63.3%;
	width: 82.3%;
	left: 8.4%;
	font-size: 1.6em;
	background-color: transparent;
	box-shadow: none;
}

/* ---- Lined Questions  ---- */
.pre-question {
	display: inline-block;
	vertical-align: top;
	float: left;
	line-height: 1.5em;
}

.additional-info { margin-bottom: 2em !important; }

#revise3-1-because,
#revise3-2-because,
#revise3-3-because {
	height: 4em;
	background-image: none !important;
	overflow-y: auto;
	line-height: 1.2em;
}

#page-2 textarea {
	margin-top: 0.8em;
	height: 4em;
	line-height: 1.25em;
	background-image: repeating-linear-gradient(transparent,transparent 30px,#FFFFFF80 31px,#FFFFFF80 32px,transparent 32px);
	background-position-y: -1px;
}

#data-carousel {
	height: 100%;
	width: 100%;
}

.carousel-control-next, .carousel-control-prev {
	width: 8%;
	z-index: 0;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
	height: 40px;
	width: 40px;
	z-index: 0;
}

.carousel-indicators { z-index: 0; }

.carousel-indicators li { height: 9px; }

/* ---- Graphs ---- */
#graph-holder {
	position: absolute;
	top: 1.1%;
	left: 19.4%;
	height: 99%;
	width: 60.8%;
	font-size: 0.8em;
}

.graph-before-label, .graph-after-label {
	position: absolute;
	color: #FFFFFF;
	font-size: 0.75em;
	font-weight: bold;
	top: -6%;
}

.graph-before-label { left: 12%; }

.graph-after-label { left: 54.4%; }

#graph-2 .graph-before-label,
#graph-2 .graph-after-label,
#graph-4 .graph-before-label,
#graph-4 .graph-after-label {
	display: none;
}

#graph-1, #graph-2, #graph-3, #graph-4 {
	position: absolute;
	width: 62%;
	height: 40.5%;
}

#graph-1 { left: -19%; top: 3.6%;  }
#graph-2 { left: -19%; top: 50%; }
#graph-3 { left: 50%;  top: 3.6%; }
#graph-4 { left: 50%;  top: 50%; }

.graph-line {
	height: 10%;
	margin-left: 8.4%;
	border-bottom: 2px solid #FFFFFF80;
}

.graph-line.thick {
	margin-left: 7%;
	border-bottom: 4px solid white;
}

.graph-label {
	font-size: 0.8em;
	font-weight: 600;
	color: #FFFFFF;
	position: relative;
	left: -1.1em;
}

.graph-vert {
	width: 1%;
	height: 100%;
	position: absolute;
	left: 8.6%;
	top: 8%;
	border-left: 4px solid white;
}

.graph-title-box {
	top: 6.6%;
	left: 109%;
	height: 59px;
	width: 213.4px;
	transform: rotate(90deg);
	transform-origin: top left;
	position: absolute;
	display: inline;
	font-size: 1em;
}

.graph-title-box p {
	line-height: 1.1em;
	font-size: 0.75em;

	margin: 0.5em;
	color: #FFFFFF;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
}

.graph-bar-before,
.graph-bar-after {
	position: absolute;
	height: 98.9%;
	width: 32%;
	top: 10%;
}

.graph-bar-before { left: 15%; }
.graph-bar-after { left: 55%; }

.filler {
	position: absolute;
	top: 100%;
	bottom: 1%;
	width: 100%;
	transition: 0.2s linear;
}

.count {
	font-weight: normal;
	text-transform: none;
}

#graph-1 .before { top: 60%; }
#graph-1 .after  { top: 0%; }
#graph-2 .before { top: 0%; }
#graph-2 .after  { top: 50%; }
#graph-3 .before { top: 50%; }
#graph-3 .after  { top: 90%; }
#graph-4 .before { top: 90%; }
#graph-4 .after  { top: 20%; }

#graph-1 .graph-bar { background-color: var(--yellow-color); }
#graph-2 .graph-bar { background-color: var(--green-color); }
#graph-3 .graph-bar { background-color: var(--blue-color-hover); }
#graph-4 .graph-bar { background-color: var(--purple-color); }

#graph-2 .graph-label { left: -1.7em; }
#graph-2 .graph-line:not(.top) { height: 16.66%; }
#graph-2 .graph-line:not(.top) .graph-label { top: 0.45em; left: -1.4em; }