/* Responsive layer — keeps the original vintage look on desktop,
   makes it usable on phones/tablets without redesigning it. */

img { max-width: 100%; height: auto; }

#contactinfo a { color: #ffffff; }

/* Tablet and below: let the fixed-width frame shrink */
@media (max-width: 1024px) {
	#box { width: 100%; max-width: 1000px; }
}

@media (max-width: 860px) {
	#box, #box2 { width: 100%; max-width: 100%; box-sizing: border-box; }
	#wrapper { background-size: cover; }
}

/* Phone layout: stack columns, drop the large top background offset,
   make the header readable and the nav tappable */
@media (max-width: 768px) {
	body { font-size: 16px; }

	#box2 { padding: 0 10px; box-sizing: border-box; }

	#header {
		height: auto;
		min-height: 120px;
		background: #1f6f9a;
		text-align: center;
		padding: 10px 0;
		overflow: hidden;
	}
	#logo { float: none; display: inline-block; margin: 0 auto; max-width: 70%; }
	#eagle { display: none; }

	#nav { float: none; }
	#nav .nav { float: none; margin: 10px 0 0 0; width: 100%; display: block; }
	.nav tbody, .nav tr { display: flex; flex-wrap: wrap; width: 100%; gap: 6px; }
	.nav td {
		display: block;
		width: auto;
		flex: 1 1 auto;
		min-width: 96px;
		height: auto;
		min-height: 44px;
		background: #e8e8e8;
		border: 1px solid #999;
		border-radius: 4px;
	}
	.nav a {
		padding: 12px 6px;
		min-height: 44px;
		box-sizing: border-box;
		font-size: 16px;
	}

	#contactinfo {
		float: none;
		width: 100%;
		margin: 10px 0 0 0;
		text-align: center;
		box-sizing: border-box;
		font-size: 15px;
		line-height: 1.5;
	}

	/* Drop the giant homepage/bikes background offset on phones */
	#content, #content.bikes-content {
		padding-top: 0;
		background: none;
	}

	#left { float: none; width: 100%; padding-left: 0; box-sizing: border-box; }
	#text { float: none; width: 100%; padding-left: 0; box-sizing: border-box; font-size: 16px; }
	#text p, #text li { font-size: 16px; line-height: 1.55; }

	#right { float: none; width: 100%; }
	#right table, #right tbody { display: block; width: 100%; }
	#right tr { display: inline-block; width: 48%; vertical-align: top; }
	#right td { display: block; }
	#right img { width: 100%; box-sizing: border-box; }

	#title, #title2 { width: 100%; box-sizing: border-box; font-size: 28px; }

	#text table { width: 100% !important; }
	#text td { display: block; width: 100% !important; box-sizing: border-box; }

	h1 { font-size: 26px; line-height: 1.3; }
	h2 { font-size: 22px; line-height: 1.3; }
	h3 { font-size: 18px; line-height: 1.4; }

	a { word-break: break-word; }
}

@media (max-width: 480px) {
	#right tr { width: 100%; }
}