/* www.HawkinsRails.net 

All CSS by RWH except Bootstrap code 

Index CSS

*/

/* TOP OF PAGE */

#top_row {
	margin-bottom: 15px;
}

.social {
	width: 353px;
	float: left;
}

.social img {
	height: 40px;
	width: 40px;
	margin-right: 4px;
}

.bar {
	background-color: #ffcb95;
	border-radius: var(--corners);
	height: 40px;
}

#top_row img {
	float: left;
}

.bar_text {
	font: small-caps 1.7rem "Lucida Grande", Lucida, Verdana, sans-serif;
}

.no_gap {
	word-spacing: 0;
}

/* MAIN BANNER */

.main_box {
	border: solid white 10px;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--corners);
	margin-bottom: 15px;
	position: relative;
}

.main_box img {
	width: 100%;
	height: 100%;
	display: block;
}

.main_overlay {
	position: absolute;
}

.main_logo {
	margin-bottom: 15px;
	width: 100%;
	border-radius: 5px;
}

/* SIDE BUTTONS ON MD LG SCREENS */

.md_side {
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 535px;
	padding: 10px 10px 0;
	width: 193px;
	margin-left: 19px;
	position: relative;
	border-radius: var(--corners-md);
}

.md_side img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	transition:
    transform 0.2s ease,
    box-shadow 0.3s ease;
	border-radius: 2px;
}

.md_side a:hover img {
  transform: scale(1.04);
  box-shadow: inset 0 0 10px rgba(255, 203, 149, 0.3);
}

#vertical_bar {
	position: absolute;
	width: 20px;
	height: 535px;
	background-color: white;
	left: -34px;
	top: 0;
	border-radius: calc(var(--corners-md) - 1px);
}

/* SUMMARY ON ALL SCREENS */

.paper {
	background-image: url(../images/paper_ruled.gif);
	padding: 2%;
	margin-bottom: 15px;
}

.summary {
	text-align: left;
	letter-spacing: 1px;
	font: 1.3rem Georgia, "Times New Roman", Times, serif;
	padding: 10px;
	border-radius: var(--corners);
}

.summary img {
	width: 20%;
	float: right;
	margin-top: 5px;
	margin-left: 5px;
	max-width: 125px;
}

.summary #tag_tablet {
	display: none;
}

/* BOXES FOR BUTTONS */

.xs_menu {
	background-color: white;
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
	width: 100%;
	padding: 10px 10px 0;
	border-radius: var(--corners);
}

.xs_menu img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	border-radius: var(--corners-button);
}

.mini_menu {
	display: flex;
	flex-wrap: wrap;
	background-color: white;
	justify-content: center;
	padding: 5px;
	box-sizing: border-box;
	margin-bottom: 15px;
	border-radius: var(--corners);
}

.mini_menu img {
	width: calc(50% - 15px);
	height: auto;
	margin: 5px;
}

.mini_menu {
	display: none;
}

.sm_menu {
	display: flex;
	flex-wrap: wrap;
	background-color: white;
	justify-content: center;
	padding: 5px;
	box-sizing: border-box;
	margin-bottom: 15px;
	border-radius: var(--corners-sm);
}

.sm_menu a  {
	width: calc(33.33% - 10px);
	box-sizing: border-box;
	display: block;
	text-decoration: none;
	margin: 5px;
}

.sm_menu img {
	width: 100%;
	height: auto;
	display: block;
	transition:
    transform 0.2s ease,
    box-shadow 0.3s ease;
	border-radius: var(--corners-button);
}

.sm_menu a:hover img {
	transform: scale(1.04);
	box-shadow: inset 0 0 10px rgba(255, 203, 149, 0.3);
}

.md_menu {
	background-color: #feffff;
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
	padding-right: 10px;
	border-radius: var(--corners-md);
}

.md_menu a {
	display: block;
	border-radius: var(--corners-button);
}

.md_menu img {
	width: calc(100% - 10px);
	margin: 10px;
	display: block;
	transition:
    transform 0.2s ease,
    box-shadow 0.3s ease;
	border-radius: 2px;
}

.md_menu a:hover img {
	transform: scale(1.04);
	box-shadow: inset 0 0 10px rgba(255, 203, 149, 0.3);
}

/* WHERE TO BEGIN */

.begin {
	background-color: var(--borange);
	padding: 10px;
	letter-spacing: .5px;
	margin-bottom: 15px;
	border-radius: var(--corners);
}

.begin p {
	font: 1.25rem "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.begin .arrow {
	width: 20px;
}

.xs_begin img {
	width: 100%;
}

.button_aboard {
	border: 5px solid var(--horange);
	border-radius: var(--corners-button);
}

#button_aboard_sm {
	display: none;
}

/* LITTLERAILS */

.littlerails {
	background-color: DimGray;
	padding: 10px;
	letter-spacing: .5px;
	margin-bottom: 15px;
	border-radius: var(--corners);
}

.littlerails p {
	font: 1.25rem "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: white;
}

.littlerails .button_kids {
	width: 100%;
	border-radius: var(--corners-button);
	margin-bottom: 10px;
}

.littlerails #junior {
	vertical-align: text-bottom;
	width: 50%;
	margin-bottom: 1px;
	margin-right: 5px;
}

/* MIDDLE TEXT BAR */

#middle_bars {
	text-align: center;
	word-spacing: 15px;
	margin-bottom: 15px;
	height: auto;
	padding: 10px 15px;
}

/* LIMITEDS AND LOCALS BOXES */

.box {
	margin-bottom: 15px;
	padding: 10px;
	border-radius: var(--corners);
}

.box h2 {
	text-transform: capitalize;
	border-top-style: none;
}

.box h2 img {
	float: right;
	width: 60px;
	transform: rotate(3deg);
	margin-right: 10px;
	margin-top: -20px;
}

.box_explanation {
	text-transform: uppercase;
	color: #A9A9A9;
	font-size: 1rem;
}

.box li {
	font-weight: bold;
	font-size: 1.1rem;
}

.box_seealso {
	color: gray;
	text-align: right;
}

.box_seealso img {
	width: 30px;
}

.box_seealso a {
	font-weight: bold;
	text-transform: uppercase;
}

.limiteds {
	background-image: url(../images/paper_linen.jpg);
}

#limiteds_ribbon {
	position: absolute;
	width: 15%;
	right: 10%;
	bottom: 15%;
}

.limiteds h2 {
	color: white;
	text-shadow: 1px 1px 1px #070606;
}

.locals {
	background-image: url(../images/paper_rice.jpg);
}

.locals h2 {
	background-color: #ccc;
	border-left-color: #999;
	color: gray;
}

.locals li a {
	color: black;
}

/* HERALD BARS */

.heralds {
	margin-bottom: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.heralds img {
	width: calc(100% / 6 - 10px);
	height: auto;
	display: block;
}

.heralds .shrink {
	padding: 5px;
}

/* MAP */

#leaflet-map-wrapper {
	height: 600px;
	margin-bottom: 15px;
	border: 10px solid white;
	z-index: 0;
	border-radius: var(--corners);
}

/* LOCO NOSE THUMBS */

.noses {
	background-color: #fff;
	padding: 5px;
	border-bottom: 5px solid #feffff;
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
	border-radius: var(--corners-sm);
}

.noses img {
	display: block;
	width: calc(100% / 10 - 5px);
	height: auto;
	margin: 2.5px;
}

/* SCRAPBOOKS PAGES */

.scrapbooks {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

.scrapbooks img {
	border-style: none;
	display: block;
	height: auto;
	width: calc(33.33% - 5px);
	margin: 2.5px;
}

/* LEADER IMAGES */

.pano {
	margin-bottom: 15px;
}

.pano img {
	width: 100%;
	border: 7px solid white;
	border-bottom: 10px solid white;
	border-radius: var(--corners);
}

/* LEGAL STUFF */

.legal {
	float: left;
	text-align: left;
	color: #797979;
	padding: 2%;
}

.legal #info img {
	float: left;
	width: 40px;
	margin-right: 7px;
}

.legal p {
	font-size: 1.1rem;
}

.legal p img {
	vertical-align: middle;
	margin-top: -1px;
}

#tile {
	width: 865px;
	float: left;
	background-color: white;
	margin-top: 10px;
	padding: 5px;
}

#tile img {
	float: left;
	width: 134px;
	margin: 5px;
}

#bottom_row {
	margin-bottom: 15px;
}

#bottom_row img {
	float: right;
}

/* SOCIAL MEDIA BUTTONS */

.xs_social {
	display: flex;
	justify-content: center;
	padding: 2%;
}
	
.xs_social img {
	width: calc(100% - 10px);
	border-radius: var(--corners);
}

@media (min-width: 600px) and (max-width: 767px) {

.summary #tag_smartphone {
	display: none;
}

.summary #tag_tablet {
	display: block;
}

.xs_menu {
	display: none;
}

.mini_menu {
	display: block;
}

#button_aboard_sm {
	display: block;
	float: right;
	width: 50%;
	margin-left: 5px;
}

#triangle_down {
	transform: rotate(180deg);
}

#button_aboard_xs {
	display: none;
}

.box h2 img {
	width: 115px;
}
}


@media screen and (min-width:768px) {
	
.social img {
	border-radius: var(--corners-sm);
}
	
.bar {
	border-radius: var(--corners-sm);
}
	
#top_bar {
	float: left;
	width: 367px;
}

.bar_text {
	font-size: 1.5rem;
}
	
.main_box {
	border: 15px solid white;
	border-bottom: 15px solid white;
	border-radius: var(--corners-sm);
	width: 720px;
	height: 435px;
}
	
.summary {
	text-align: justify;
	padding: 10px;
	border-radius: var(--corners-sm);
}

.summary img {
	width: 100px;
}

.summary #tag_smartphone {
	display: none;
}

.summary #tag_tablet {
	display: block;
}

.begin {
	border-radius: var(--corners-sm);
}

.begin p a {
	font-weight: bold;
	text-transform: uppercase;
}
	
.xs_begin img {
	float: right;
	width: 33%;
	margin-left: 10px;
	border-width: 7.5px;
	margin-top: 5px;
	transition:
    transform 0.2s ease,
    box-shadow 0.3s ease;
}

.xs_begin a:hover img {
	transform: scale(1.02);
	box-shadow: inset 0 0 10px rgba(255, 203, 149, 0.3);
}

#button_aboard_xs {
	display: none;
}

#button_aboard_sm {
	display: block;
}

.littlerails {
	height: 175px;
}

.littlerails .button_kids {
	width: 33%;
	margin-right: 10px;
	float: left;
	transition: 
	transform 0.2s ease;
}

.littlerails a:hover img {
	transform: scale(1.02);
}

.littlerails #junior {
	margin-bottom: 0;
	width: 300px;
}

.littlerails p a {
	font-weight: bold;
}
	
#leaflet-map-wrapper {
	height: 518px;
	border: 10px solid white;
	border-radius: var(--corners-sm);
}

#snapshots_button_sm {
	width: calc(33.33% - 10px);
	height: auto;
	margin: 5px;
}

.scrapbooks img {
	width: calc(25% - 5px);
}

.pano {
	position: relative;
}

.pano img {
	border: 10px solid white;
	border-bottom: 15px solid white;
	border-radius: var(--corners-sm);
}

.pano .icon_overlay {
	border-style: none;
	width: 50px;
	position: absolute;
	right: 30px;
	top: 15px;
}

.box {
	border-radius: var(--corners-sm);
}

.box h2 img {
	width: 50px;
}

.box_explanation {
	font-size: .7rem;
}

.box li {
	font-size: 1rem;
}

.box_seealso {
	font-size: .9rem;
}

#limiteds_ribbon {
	width: 65px;
	right: 35px;
	bottom: 65px;
}

.legal {
	text-align: justify;
	padding: 0;
	margin-bottom: 15px;
}
	
#bottom_bar {
	width: 363px;
	float: left;
	margin-right: 4px;
}
}

@media screen and (min-width: 992px) {
	
#top_bar {
	width: 587px;
	float: left;
}

.social img {
	border-radius: var(--corners-md);
}

.bar {
	border-radius: var(--corners-md);
}

.main_box {
	border-radius: var(--corners-md);
	width: 700px;
	height: 420px;
}

.main_logo {
	height: 100px;
	width: 700px;
	border-radius: var(--corners-md);
}

.summary {
	padding: 15px;
	border-radius: var(--corners-md);
}

#snapshots_button_md {
	display: block;
	margin: 10px 0 10px 10px;
	height: 66px;
}

.begin {
	padding: 15px 10px 5px;
	border-radius: var(--corners-md);
}

.begin p {
	font-size: 1.1rem;
	letter-spacing: .25px;
	text-align: right;
}

.md_begin img {
	float: right;
	width: 33%;
	margin-left: 10px;
	border-width: 7.5px;
	margin-top: 5px;
	transition:
    transform 0.2s ease,
    box-shadow 0.3s ease;
	border-radius: 2px;
}

.md_begin a:hover img {
  transform: scale(1.02);
  box-shadow: inset 0 0 10px rgba(255, 203, 149, 0.3);
}

.md_begin .question {
	float: left; 
	width: 60px;
	margin: 5px 5px 5px 0;
}

#steamer {
	width: 100%;
	margin-left: 10px;
	margin-top: 20px;
}

.stacks {
	margin-top: 15px;
	margin-bottom: 45px;
}

.stacks img {
	transform: rotate(-3deg);
	border-radius: 3px;
	margin-right: -15px;
	width: 165px;
	margin-top: 0;
}

.stacks .oppositeY {
	transform: rotate(3deg);
	margin-bottom: -35px;
}

.littlerails {
	padding: 15px 15px 15px 10px;
	height: 160px;
	border-radius: var(--corners-md);
}

.littlerails p {
	font-size: 1.1rem;
}

.littlerails #junior {
	width: 240px;
}

#diesels {
	width: 100%;
	margin-top: 10px;
	margin-left: -10px;
}

.pano img {
	border-radius: var(--corners-md);
}

#leaflet-map-wrapper {
	height: 522px;
	border: 10px solid white;
	border-radius: var(--corners-md);
}

#middle_bars {
	word-spacing: 20px;
}

.box {
	padding: 15px;
	border-radius: var(--corners-md);
}

.box h2 img {
	width: 75px;
	margin-top: -30px;
}

.box_explanation {
	font-size: 1rem;
}

.box li {
	font-size: 1.1rem;
}

.box_seealso {
	font-size: 1rem;
}

#limiteds_ribbon {
	width: 85px;
	right: 50px;
	bottom: 75px;
}

.heralds img {
	width: calc(100% / 8 - 10px);
}

.noses {
	border-radius: var(--corners-md);
}

.noses img {
	width: calc(100% / 11 - 5px);
}

.scrapbooks img {
	width: calc(100% / 6 - 5px);
}

.pano .icon_overlay {
	width: 65px;
}
	
#bottom_bar {
	width: 583px;
}
}

@media screen and (min-width: 1200px) {
	
#top_bar {
	float: left;
	width: 787px;
}

.main_box {
	width: 850px;
	height: 510px;
}

.main_logo {
	width: 850px;
	height: 125px;
}

.md_side {
	height: 650px;
	width: 235px;
	margin-left: 26px;
}

#vertical_bar {
	height: 650px;
	left: -37px;
}

#snapshots_button_md {
	display: block;
	margin: 10px 0 10px 10px;
	height: 81px;
}

#steamer {
	margin-top: 10px;
}

.stacks img {
	width: 198px;
}

.littlerails {
	height: 190px;
}

.littlerails #junior {
	width: 465px;
}

.heralds img {
	width: calc(100% / 9 - 10px);
}

#leaflet-map-wrapper {
	height: 658px;
	border: 10px solid white;
}

#middle_bars {
	word-spacing: 25px;
}
	
.scrapbooks {
	padding-left: 2.5px;
}
	
.pano .icon_overlay {
	width: 75px;
}

.box {
	padding: 20px;
}

.box h2 img {
	width: 100px;
	margin-right: 20px;
}

.box li {
	font-size: 1.2rem;
}

.box_seealso {
	font-size: 1.1rem;
}

#limiteds_ribbon {
	width: 85px;
	right: 75px;
	bottom: 100px;
}

.noses img {
	width: calc(100% / 13 - 5px);
}
	
#bottom_bar {
	width: 783px;
}
}