body {background-color:#F1E8DF; margin:0; font-family:"Literata"; font-size:18px; background-image:url('edgepiece-bottombg2.png'); background-position:bottom left; background-repeat:no-repeat; background-size:65%;}
	.container {width:90%; margin:0 5%; }
	.maintitle {display:block; width:100%; }
	.bodytextcontainer {line-height:1.6em; margin-bottom:280px; font-family:"Literata", serif;} 
	h3 {text-align:center;}
	.navigation {margin-bottom:20px; text-align:center; font-family:Datatype, helvetica; font-size:1.1em; letter-spacing:.1em; padding-bottom:30px; border-bottom:1px solid #999; margin-bottom:10px;}
	.navigation a {display:inline-block; padding:5px 12px; margin:0 4px; background-color:#45798B; color:#F2E9DF; text-transform:uppercase; font-weight:bold; text-decoration:none;}
		a.currentitem {background-color:#BF7A79;}
	.reel {background:url('reel.jpg'); float:right; width:400px; height:400px;}
		


.scroll-image {
  height: 20vh;
  position: relative;
  overflow: hidden;
}

.scroll-image img {
  width: 100%;
  height: 260%;
  object-fit: cover;
  display: block;
  will-change: transform;
  position: absolute;
  bottom: 0;
  left: 0;
}

	@media screen and (min-width: 700px) {
		body {background-size:45%;}
		.maintitle {display:block; width:40%; float:left;}
		.bodytextcontainer {display:block; width:55%; margin-left:5%; float:left; margin-top:60px;}
		.reel {width:33%; float:left;}

		.container {
		  display: flex;
		  gap: 5%;
		  align-items: flex-start;
		}

		.maintitle {
		  width: 40%;
		  flex-shrink: 0;
		}

		.bodytextcontainer {
		  width: 55%;
		}

	}
	
	@media (prefers-reduced-motion: reduce) {
	  .scroll-image img {
		transform: none !important;
	  }
	}