:root {
	--barely-green: rgb(197, 219, 197);
	--live-red: darkred;
	--forest-green: rgb(38, 77, 54);
	--softwhite: #FFFEF8;
	--barely-gold: rgb(255,193,38);

	--shadow: 0 7px 3px rgba(0, 0, 0, .5);
}

body, html {
	margin: 0;
	overflow-x: hidden;
	padding: 0 }

html {
	background: var(--barely-gold);

  border-top: 2px solid var(--barely-gold);
  z-index: 0;
	border-bottom: 1px solid var(--forest-green) }

body {
	background-color: var(--barely-green);
	font-family: "Tofino4Web", "Verdana", "Arial", sans-serif; }

.container {
	width: 100%;
	max-width: 910px;
	margin: auto;
	box-sizing: border-box;
	position: relative;
	padding: 14px 21px }

.right { text-align: right }

.barely {
	-webkit-text-stroke: 1px var(--forest-green) !important;
	color: var(--barely-green) !important }

.clear {
	clear: both;
	display: block }


.notification {
	padding: 2px 7px;
	border: 1px solid var(--forest-green);
	border-radius: 3px;
	color: #333;
	font-style: italic;
	font-weight: 500;
	font-size: 14px;
	text-align: right;
	background: var(--softwhite);
 	z-index: 100;
 	box-shadow: var(--shadow);
	position: absolute;
	top: 39px;
	left: -100%;
	white-space: nowrap;
	animation: notification-slide 9s ease forwards }
	.noto.container { height:0;padding-top: 0; padding-bottom: 0 }
 
@keyframes notification-slide {
	0%   { left: -100% }
	5%   { left: 28px }
	95%  { left: 28px }
	100% { left: 300% }
}
 



p {
	font-size: 16px;
	line-height: 1.6;
	padding: 0;
	margin: 14px 0 }

a {
	color: #333;
	text-decoration: none }
	a:hover { color: var(--live-red) }

button:not(:disabled):not(.dis) { cursor: pointer }


h4 {
	text-transform: uppercase;
	font-size: 16px;
	margin: 7px 0 0 0;
}


ul.neatlinks {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.neatlinks a {
	text-decoration: none;
	color: #444;
	display: block;
	padding: 7px 0 0 0;
	font-weight: 500 }
	ul.neatlinks a:hover { color: var(--live-red) }

a.golden, .golden {
	-webkit-text-stroke: 1px black;
	color: var(--barely-gold) !important }
	a.golden:hover, .golden:hover { -webkit-text-stroke: 2px var(--live-red) }

a.red, .red {
	-webkit-text-stroke: 1px black;
	color: var(--live-red) !important }

h2, h3, h4 {
	color: #333;
	text-transform: uppercase;
	font-style: italic;
	margin: 7px 0 14px 0;
}

h2.border, h3.border, h4.border {
	border-bottom: 3px solid #333 }

.whitebold h2, .whitebold h3, .whitebold h4,
h2.loose, h3.loose, h4.loose {
	font-style: italic;
	letter-spacing: 1px;
	color: white;

	text-shadow: 0px 6px 3px rgba(0, 0, 0, .8) }

@media (min-width: 780px) {
	.whitebold h2, .whitebold h3, .whitebold h4,
	h2.loose, h3.loose, h4.loose {
		margin: 0 0 7px 0 }
}

.whitebold h2.border, .whitebold h3.border, .whitebold h4.border,
h2.loose.border, h3.loose.border, h4.loose.border {
	border-bottom: 3px solid var(--softwhite);
	padding-bottom: 14px;
	box-shadow: -1px 4px 1px rgba(0, 0, 0, .8) }

.loose { margin: -7px 0 3px 0 }
h2.large {
	margin-top: 35px;
	font-size: 7vw } 

h3.large {
	text-transform: none;
	margin-top: 21px;
	font-size: 2vw }

h2.large+h3.large { margin-top: 0 }

h2 {
	font-size: 28px }
h3 {
	margin-top: 0;
	margin-bottom: 7px;
	font-size: 22px }
h3.border { padding-bottom: 2px; margin-bottom: 5px }
h4 { 
	margin-bottom: 0;
	font-size: 20px }


.card {
	background: var(--softwhite);
	outline: 1px solid var(--softwhite);
	border: 5px solid var(--forest-green);
	border-radius: 3px;
	box-shadow: var(--shadow);
	padding: 7px 14px;
	color: #333;
	text-shadow: 0 0 0 transparent ;
	margin-bottom: 21px;
	font-weight: 800 }
.card.large { padding: 14px 35px }

	.card p { font-size:16px }
	.card p:first-child { margin-top: 0 }
	.card p:last-child { margin-bottom: 0 }

	.card h2:first-child,
	.card img:first-child+h2,
	.card h3:first-child,
	.card img:first-child+h3,
	.card h4:first-child,
	.card img:first-child+h4 { margin-top: 0 }

.no-pad { padding: 0 }
.pad { padding: 7px 14px }

.about {
	font-weight: bold;
	font-style: italic;
	color: #333;
	text-align: right }
	.about p { font-size: 17px }
	.about p::first-line {
		font-style: normal;
		text-transform:uppercase }

header.main {  }


.barely-long {
	background: var(--barely-green);
	border-top: 1px solid var(--forest-green);
	border-bottom: 3px solid var(--forest-green) }
	
.barely-long .container { 
	width: 100%;
	aspect-ratio: 11 / 1;
	max-height: 50px;
	background-color: --var(barely-green);
	background-repeat: no-repeat;
	background-position: center;
	background-size: min(calc(100% - 28px), 500px) auto;
	background-image: url('/static/img/barely_logo_long.png') }
	.barely-long h1 {
		margin: 0;
		padding: 0;
		visibility:hidden }

.header-content {
	border-bottom: 4px solid var(--forest-green);
	background: var(--softwhite) }

	.header-content .container {
		padding-top: 0; padding-bottom: 0;
		position: relative }

		.header-content .logo {
			display: block;
  		position: absolute;
  		margin-top: 21px;
			width: 198px }
			.header-content .logo img {
				filter: drop-shadow(6px 8px 8px rgb(0 0 0 / 0.3));
				width: 100% }
		
		.header-content navigation.main {
			margin-bottom: 7px;
			display: block;
			width: 100% }
			
		navigation.main ul { 
			margin: 0; padding: 0;
			text-transform: uppercase;
			font-style: italic;
			font-weight: 800;
			display: block;
			list-style-type: none }
		navigation.main li {
			display: block;
			border-bottom: 1px solid var(--barely-green) }
		navigation.main a {
			display: block;
			text-decoration: none;
			color: black;
			font-size: 22px;
			text-align: right;
			padding: 14px 0px }
			navigation.main li:hover { border-bottom: 1px solid var(--live-red) }
			navigation.main a:hover {
				cursor: pointer }


navigation.main li.rsvp a {
	-webkit-text-stroke: 1px black;
	color: var(--barely-gold) !important }

.content-club navigation.main ul li.content a {
}
.content-club navigation.main ul li.content,
.meetups navigation.main ul li.meetups,
.events navigation.main ul li.events,
.rsvp navigation.main ul li.rsvp {
	border-bottom: 1px solid var(--live-red) } 

main {
	min-height: 70dvh;
	background-size: cover;
	background-image: url('/static/img/runners.png');
	border-top: 1px solid var(--softwhite);
	border-bottom: 1px solid var(--softwhite);
}

footer.main {
	background: var(--barely-green);
	border-bottom: 1px solid var(--forest-green);
	border-top: 7px solid var(--forest-green) }

	footer.main .nickf {}
		footer.main .nickf a { 
			width: 95%;
			max-width: 200px;
			margin: auto;
			aspect-ratio: 17 / 10;
			background-size: cover;
			background-image: url('/static/img/nf-logo.png');
			display: block;
			color: rgba(255, 255, 255, 0.0) }

footer.main h2, footer.main h3, footer.main h4 {
	margin-bottom:0;
	font-style: normal;
	margin-top: 0 }


footer.main .container {
	display: flex;
	flex-wrap: wrap;
  justify-content: flex-end }

	footer.main .nickf {
		border-bottom: 3px solid var(--forest-green);
		width: 100%	}

	footer.main .sponsors, footer.main .info {
		width: 100%;
		margin-top: 14px;
		text-align: center }

@media (min-width: 490px) {
	footer.main .sponsors, footer.main .info {
		width: 50% }
}

@media (min-width: 630px) {

	.header-content { margin-bottom: 0 }

	.header-content .container {
		display: flex }
	
	.header-content .logo {
		width: 20%;
		position: static }
		.header-content .logo img {
			max-width: 168px;
			margin-top: -70px;
			margin-bottom: -70px;
			width: 120% }
	
	.header-content navigation.main {
		margin-left: auto;
    margin-top: -3px;
		width: 77% }
	
	navigation.main ul { 
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap:0 }
 	navigation.main li {
		float: none;
		margin-left: 7px;
		display: inline-block }
	navigation.main a {
		font-size: 18px;
		padding: 14px 0 14px 28px }





	main {}

	footer.main {  }
		footer.main h4 {
			padding-bottom: 3px; 
			margin-bottom: 0;
			margin-top: 0 }
		footer.main .nickf, footer.main .sponsors, footer.main .info {
			text-align: left;
			width: 33% }
		footer.main .sponsors, footer.main .info { margin: 7px 0 }
		footer.main .sponsors {}
		footer.main .nickf { border-bottom: 0 }
			footer.main .nickf a {
				margin-left: 0;
				width: 170px }
}

@media (min-width: 540px) {
	.barely-long .container { 
		background-position: right 14px center }
}


.whitebold {
	color: var(--softwhite);
	font-weight: 800 }

	.whitebold p {
		font-style: italic;
		text-shadow: 0px 6px 3px rgba(0, 0, 0, .8);
		font-size: 20px }

.action.button {
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;

	text-shadow: 0;
	text-transform: uppercase; 
	color: white;
	-webkit-text-stroke: 2px black;

	border: 2px solid black;
	outline: 1px solid var(--softwhite);
	border-radius: 3px;
	display: inline-block;
	padding: 7px 21px;
	font-size: 22px;
	font-style: italic;
	font-weight: 900;
	box-shadow: var(--shadow);
	position: relative;
	z-index: 10;
	background: var(--barely-gold) }


	
	.action.button.right:after {
		position: relative;
		left: 0;
		transition: left .2s ease;
		content: ' ➡' }
	.action.button.right:hover:after { 
		left: 3px }

	.action.button.check.right:after {
		content: ' ✔';
		position: static }

.action.right.skew {
	transform: skew(-20deg);
	text-align: right }
.action.button.right.skew span {
	display:inline-block;
	font-style: italic;
	transform:skew(20deg) }

.action.button.left { position: relative }
.action.button.left.float,
.action.button.float-right { float: right }
.action.button.left:before {
	position: relative;
	right: 0;
	bottom: 2px;
	font-size: 140%;
	line-height: 0;
	transition: right .2s ease;
	content: '⬅︎ ' }
.action.button.left:hover:before { 
		right: 3px }

.action.button.white {
	background: var(--softwhite);
	color: var(--barely-green);
	-webkit-text-stroke: 1px solid #333;
}


.intro {
  display: block }

.about {
	font-weight: 800;
	font-style: italic;
	color: #333;
	text-align: right }
	.about p { font-size: 17px }
	.about p::first-line {
		font-style: normal;
		text-transform:uppercase }
.flyer {
  border: 4px solid var(--forest-green);
  border-radius: 3px;
  outline: 1px solid var(--softwhite);
  box-shadow: var(--shadow) }
.flyer img {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--softwhite) }

@media (min-width: 780px) {
  .intro, .invite {
    display: flex;
    gap: 1rem;
    align-items: flex-start }
  .intro-copy, .intro .flyer,
  .invite .info, .invite .flyer {
    flex: 0 0 calc((100% - 1rem) / 2);

  	clear: both;
    min-width: 0;
    max-width: 50%;
    box-sizing: border-box }
  .intro-copy {
    display: flex;
    flex-direction: column;
    gap: 1rem }
  .intro .flyer {
    order: -1 }
}


/*===============
  PAGES
================*/


.meetups {}

.invite {}
	.invite .info {
		margin-bottom: 14px }
	.invite .info .card {
		position: relative }
		.invite .info .card p {
			font-style: italic;
			margin: 0 }
		.invite .info .location-logo { 
			float: right;
			margin-right: -14px;
			margin-top: -7px;
			border: 1px solid var(--softwhite);
			width: 75px }
			.invite .info .location-logo img {
				width: 100%;
				display: block;
			  /*aspect-ratio: 16 / 9;
			  object-fit: cover;
			  object-position: center*/ }
		.invite .info .card h3 { width: 80% }
		.invite .info .map {
			border-top: 2px solid #333;
			overflow:hidden;
			position: relative }
			.invite .info .map img {
				display: block;
				margin: 0;
				width: 100% }
			.invite .info .map iframe {
				width: 100%;
				height:210px;
				border: 0;
				border-top: 2px solid #333;
			}





.rsvp {}

.rsvp .signup h3.member-name {
	position: relative;
	top: 9px;
	letter-spacing: 1px;
}




/*===============
  FORMS
================*/

form { min-height: 30px }

form .card { margin: 0 }

form .card p {
	margin: 0 0 14px 0 }
	.card form p:last-child { margin-bottom: 0 }

form .card label {
	display: block;
	text-transform: uppercase;
	font-style: italic;
	font-size: 14px;
	letter-spacing: .5px;
	color: #333;
	margin-bottom: 3px }

form .card input[type="text"],
form .card input[type="email"],
form .card input[type="tel"],
form .card input[type="date"],
form .card input[type="time"],
form .card input[type="number"],
form .card textarea,
form .card select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-weight: normal;
	font-size: 16px;
	color: #333;
	background: var(--softwhite);
	border: 2px solid var(--forest-green);
	border-radius: 3px;
	padding: 7px 10px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease }

	form .card input[type="text"]:focus,
	form .card input[type="email"]:focus,
	form .card input[type="tel"]:focus,
	form .card input[type="date"]:focus,
	form .card input[type="time"]:focus,
	form .card input[type="number"]:focus,
	form .card textarea:focus,
	form .card select:focus {
		background: var(--barely-green);
		box-shadow: 0 0 0 3px rgba(255, 193, 38, .35) }

form .card textarea {
	resize: vertical;
	min-height: 84px }

form .card input::placeholder,
form .card textarea::placeholder {
	color: #999;
	font-weight: normal;
	font-style: italic }

form .card ul.errorlist {
	list-style-type: none;
	margin: 3px 0 0 0;
	padding: 0;
	font-weight: 800;
	font-style: italic;
	font-size: 13px;
	color: var(--live-red);
	text-shadow: none }
	form .card ul.errorlist li { margin: 0 }

form .card .helptext {
	display: block;
	font-weight: normal;
	font-style: italic;
	font-size: 13px;
	color: #666;
	margin-top: 3px;
	text-shadow: none }

form .card button[type="submit"] {
	font-family: inherit;
	cursor: pointer;
	margin-top: 7px }