#starting-box {
    z-index: 2;
}

ul.buttons {
    z-index: 3;
}

.previous-page-arrow, .next-page-arrow {
    z-index: 3;
}

.neighborhood-schoolbuilding {
    z-index: 1;
}

.no-box {
	font-size: 0.9em;
	height: 500px;
	text-align: left;
	line-height: 1.1em;
	margin: 0.2em 2.5em;
}

.no-box p {
	margin: 0;
}

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

.recap-question {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#page-2 {
    top: 60%;
    width: 82%;
    left: 8.5%;
    font-size: 1.6em;
    line-height: 1.25em;
    text-align: left;
    height: 35%;
}

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

/* -- Poster from data -- */

#chart_container {
    height: 75%;
    width: 75%;
    border-left: 8px solid white;
    position: relative;
}

#chart_container .x-line:first-child { border-top: 4px solid white }

#chart_container .x-line {
    border-bottom: 4px solid white;
    height: 20.1%;
    width: 100%
}

#chart_container .x-label {
    font-size: 1em;
    font-weight: 600;
    color: #ffcc4b;
    position: relative;
    top: -20%;
	display: flex;
    right: 4%;
	width: 20px;
    justify-content: center;
}

#bar6, #bar7, #bar8, #bar9, #bar10 {
    display: none;
    background-color: #FB3A69;
    width: 8%;
}


#bar1, #bar2, #bar3, #bar4, #bar5 {
    background-color: #ffcc4b;
}

#bar1, #bar6 {
    position: absolute;
    left: -1%;
    bottom: 0
}

#bar2, #bar7 {
    position: absolute;
    left: 19.1%;
    bottom: 0
}

#bar3, #bar8 {
    position: absolute;
    left: 39.3%;
    bottom: 0
}

#bar4, #bar9 {
    position: absolute;
    left: 59.4%;
    bottom: 0
}

#bar5, #bar10 {
    position: absolute;
    left: 79.6%;
    bottom: 0
}

.column-bar {
    width: 15%;
    height: 0;
    background: #763fa1;
    margin: 0 24px;
    transition: 0.1s linear;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-animation: fade-in-text 2.2s .1s forwards;
    -moz-animation: fade-in-text 2.2s .1s forwards;
    animation: fade-in-text 2.2s .1s forwards
}

.legend-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#legend .legend-key {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    margin: 0;
    font-size: 0.3em;
    height: 40%;
}

.legend-title {
    font-size: 0.2em;
    height: 0.9em;
    line-height: 1em;
}

#legend {
	position: absolute;
    top: 5%;
    width: 14%;
    right: 17.5%;
    height: 13%;
    padding: .2%;
    z-index: 1;
    background-color: #fff;
    color: var(--violet-color);
}

.legend-holder {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 60%;
}

.bar-one-color {
    background-color: #fb3a69;
    flex: 1;
}

.bar-two-color {
    background-color: #ffcc4b;
    flex: 1;
}

#chart-x-container {
	display: flex;
	flex-direction: row;
    width: 75%;
	height: 18%;
    position: relative;
	justify-content: space-around;
}

#chart-x-container div {
	width: 19%;
	font-size: 0.7em;
	background-color: #22BAA3;
	border-radius: 0.5em;
	text-align: center;
}

.no-box.graph {
	flex-direction: column;
}

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

.no-box img {
	height: 90%;
}

.no-box:not(.health) {
	display: flex;
    align-items: center;
    justify-content: center;
}

.drawing-container {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9em;
    height: 500px;
    text-align: left;
    line-height: 1.1em;
    margin: 0.2em 2.5em;
}

.no-box.health {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/*  First Image in Carousel  */

#answer.neighborhood {
    transform: scaleX(.74) scaleY(.75);
    top: -38px;
    left: -68px;
    position: relative;
    z-index: 2;
}

#answer.shore {
    transform: scaleX(.81) scaleY(.77);
    top: -24px;
    left: -1px;
    position: relative;
    z-index: 1;
}

#answer.wavy {
    transform: scaleX(.68) scaleY(.8);
    top: -24px;
    left: -110px;
    position: relative;
    z-index: 1;
}

.neighborhood-container {
    position: relative;
    top: 0%;
    left: 0%;
    width: 90%;
	margin: auto;
}

/* .neighborhood-container .neighborhood-schoolbuildingreflectiveroof, .neighborhood-container .neighborhood-flood, .neighborhood-container .neighborhood-streetbikelane, .neighborhood-container .neighborhood-streettreetwo, .neighborhood-container .neighborhood-streettree, .neighborhood-container .neighborhood-streettreethree, .neighborhood-container .neighborhood-busstop, .neighborhood-container .neighborhood-noidlingsign, .neighborhood-container .neighborhood-roofgarden, .neighborhood-container .neighborhood-rainbarrel {
	visibility: hidden;
} */

.neighborhood-schoolbuildingreflectiveroof {
    z-index: 2;
}

.neighborhood-streetbikelane {
    height: auto;
    z-index: 0;
}

.neighborhood-street {
    z-index: -1;
}

.neighborhood-flood, .neighborhood-busexhaust {
	visibility: hidden;
}

#answer {
	cursor: auto;
    position: absolute;
    overflow: hidden;
}

#drawing-board {
	pointer-events: none;
	z-index: 100;
    position: absolute;
    top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.drawing-container > img {
	height: 80%;
}

#drawing-area {
	position: absolute;
    top: 5%;
    width: 78%;
    height: 90%;
    margin: auto;
}

.sticker {
	z-index: 1;
}

/*  Image Carousel Styles  */

.no-box.survey {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.no-box.survey img {
	width: 100%;
	height: auto;
}

#page-2 textarea {
	margin-top: 0.8em;
	height: 8em;
	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; }

/* Lucys Walk Revisited Slide */

.textbox-container {
	display: flex;
	flex-direction: row;
	height: 100%;
	gap: 13px;
    padding: 10px;
}

.textbox-container > div {
    flex: 1;
    position: relative;
}

.drag-drop-box {
    width: 100%;
    height: 100%;
}

.drag-box {
	border-radius: 0.5em;
}

.drag-box .title-box {
	font-size: 1em;
	height: 15%;
	color: var(--violet-color);
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.drag-box.green {
	background-color: #319391;
	padding: 1em;
}

.drag-box.blue {
	background-color: #179DA6;
	padding: 1em;
}

.drawing-container  >img.neighborhood-background {
	border: 3px solid white;
}

.quote-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 85%;
    font-size: 0.7em;
    font-weight: bold;
}

/* Wildlife Survey Slide */

.yellow-box {
    background-color: #FFCC4B;
    height: 30%;
    line-height: 1.1em;
    border-radius: 0.3em;
}

.bottom.yellow-box {
	top: 37%;
}

.top.yellow-box {
	top: 14%;
}

.yellow-box .title {
    color: var(--violet-color);
    font-weight: bold;
    font-size: 1em;
    height: 20%;
    display: flex;
    align-items: center;
    padding: 10px;
}

#holder-1 {
	display: flex;
    justify-content: flex-start;
	align-items: center;
    width: 95%;
	height: 80%;
    margin: auto;
}

#holder-1 .image-box {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 12%;
    height: auto;
}

#holder-1 .image-box img{
	display: flex;
	flex:1;
	max-width:100%;
	max-height:100%;
	margin: 0;
}


.image-box img {
	top: 0px;
	left: 0px;
	position: relative;
	width: 100%;
	height:100%;
}

#holder-1 .image-box.plankton {
    width: 7%;
}