.green-box {
	left: 9%;
	top: 2%;
	width: 82%;
	height: 94%;
}

.neighborhood-container {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
	height: 100%;
	z-index: 0;
}

#answer.neighborhood {
    transform: scaleX(.5) scaleY(.65);
    top: -95px;
    left: -237px;
}

#answer.shore {
    transform: scaleX(.55) scaleY(.65);
    top: -80px;
    left: -180px;
}

#answer.wavy {
    transform: scaleX(.45) scaleY(.65);
    top: -80px;
    left: -280px;
}

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

.neighborhood-streetbikelane {
    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: 0%;
    width: 100%;
    height: 100%;
    margin: auto;
}

#box-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.background-image {
    width: 100%;
    /* height: 100%; */
	margin-top: auto;
    border: 2px solid white;
}

.sticker {
	z-index: 1;
}

#drawing-board {
	left: 0;
    top: 0;
	width: 100%;
	height: 100%;
}

.sticker.draggable {
	pointer-events:none!important;
}

.neighborhood-flood{
	visibility: hidden;
}

.solid-light-purple-box {
	top: 29%;
	position: fixed;
	left: 10%;
	width: 80%;
}

.box { position: absolute; }

.contents {
	border: 6px solid white;
	border-radius: 5px;
	width: 490px;
	height: 360px;
	overflow: hidden;
}

.box p {
	margin-top: 0.4em;
	font-size: 0.8em;
	width: 490px;
}

.contents > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.no-border { border: none; }

/* ---- Panel 1 ---- */
#wavy-bay-pic,
#seal-beach-pic {
	position: absolute;
	width: 72%;
	object-fit: unset;
	height: unset;
	overflow: hidden;
	border: 4px solid white;
	border-radius: 0.25em;
}

#wavy-bay-pic {
	top: 3%;
	left: 2%;
	transform: rotate(-2deg);
}

#seal-beach-pic {
	top: 36%;
	left: 25%;
	transform: rotate(5deg);
}

#wavy-bay-pic img,
#seal-beach-pic img {
	width: 350px;
}

#wavy-bay-pic p,
#seal-beach-pic p {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0.25em;
	font-weight: 600;
}


/* ---- Panel 4 ---- */
#old-wavy-bay {
	position: absolute;
	top: 4%;
	left: 10%;
	width: 78%;
	object-fit: unset;
	height: unset;
	overflow: hidden;
	border: 4px solid white;
	border-radius: 0.25em;
	transform: rotate(-2deg);
}

#box-1 {
	left: 2.3%;
	top: 6.4%;
}

#box-2 {
	left: 51.2%;
	top: 6.4%;
}

#box-2 p {
	letter-spacing: -0.01em;
	margin-left: 0;
}

#box-3 {
	left: 2.3%;
	top: 53.2%;
}

#box-4 {
	left: 51.2%;
	top: 53.2%;
}

/* ---- Panel 3 ---- */
.pic {
	position: absolute;
	width: 57%;
	object-fit: unset;
	overflow: hidden;
	border: 4px solid white;
	border-radius: 0.25em;
	height: 40%;
}

#pic1 img, #pic2 img, #pic3 img {
	width: 100%;
	object-fit: contain;
}

#pic1 { left: 0%;  top: 0%;  transform: rotate(2deg); }
#pic2 { left: 20%; top: 40%; transform: rotate(-2deg); }
#pic3 { left: 40%; top: 9%; transform: rotate(-6deg); }

/* ---- Panel 4 ---- */
.neighborhood-container {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
	height: 100%;
	z-index: 0;
}

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

.neighborhood-flood{
	visibility: hidden;
}

.solid-light-purple-box {
	top: 29%;
	position: fixed;
	left: 10%;
	width: 80%;
}