:root {
  --sprite-count: 12;
}

#building {
  background-image: url('../img/filmstrip.png');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 0;
  padding-bottom: calc(2066/3842 * 100%); /* fix aspect, see https://css-tricks.com/aspect-ratio-boxes/ */
  position: relative;
  width: 100%;
}

svg {
  /* height: 100%; */
  /* width: 100%; */
  left: 0;
  position: absolute;
  top: 0;
}

#building.balcony_and_doors,
#building.clear_wall,
#building.corner,
#building.intermediate_floor,
#building.foundation,
#building.glazing_transition,
#building.interior_wall,
#building.joint,
#building.point,
#building.parapet,
#building.roof,
#building.spandrel {
}

#building.balcony_and_doors {
  background-position: left 0% top calc(1/var(--sprite-count) * 100%);
}
#building.clear_wall {
  background-position: left 0% top calc(2/var(--sprite-count) * 100%);
}
#building.corner {
  background-position: left 0% top calc(3/var(--sprite-count) * 100%);
}
#building.intermediate_floor {
  background-position: left 0% top calc(4/var(--sprite-count) * 100%);
}
#building.foundation {
  background-position: left 0% top calc(5/var(--sprite-count) * 100%);
}
#building.glazing_transition {
  background-position: left 0% top calc(6/var(--sprite-count) * 100%);
}
#building.interior_wall {
  background-position: left 0% top calc(7/var(--sprite-count) * 100%);
}
#building.joint {
  background-position: left 0% top calc(8/var(--sprite-count) * 100%);
}
#building.point {
  background-position: left 0% top calc(9/var(--sprite-count) * 100%);
}
#building.parapet {
  background-position: left 0% top calc(10/var(--sprite-count) * 100%);
}
#building.roof {
  background-position: left 0% top calc(11/var(--sprite-count) * 100%);
}
#building.spandrel {
  background-position: left 0% top calc(12/var(--sprite-count) * 100%);
}

.bordertitle {
	border: solid; 
	border-color: #00908a;
}

.borderInstructions {
	border: solid; 
	border-color: #00908a;
	background: #00908a;
	color: #fff;
	font-size:1.25em;
}