/*
	Website Name: Missouri Auto and Truck Recyclers Association
	Designed by: Katherine Leonard, Car-Part.com
	Last updated: 14 Mar 2024
*/

html {
	font-size: 16px;
}
body {
	background: #111;
	background: #111 url( "../graphics/stripes.png" );
	color: #fff;
	font-family: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
#pgHeader {
	background: #ffd266;
	background-image: url( "../graphics/stripes.png" );
	background-blend-mode: overlay;
	position: relative;
	text-align: center;
}
#highline {
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	overflow: auto;
	text-align: center;
}
#highline i, #highline address, #highline ul, #highline ul li, #highline .block {
	display: inline-block;
}
#highline i {
	margin-right: 1em;
}
#highline .flex-child-col {
	padding: 1em;
	text-align: center;
}
#highline ul li {
	margin-left: 1rem;
}
#highline ul li:first-of-type {
	margin-left: 0;
}

#logoBlock {
	display: block;
	margin: auto;
	padding: 1rem;
}
#logo {
	display: block;
		max-width: 150px;
	margin: auto;
}
#logo img {
	display: block;
		width: 100%;
		height: auto;
}
#pgHeader .wrapper.sticky-menu {
	background-color: #fff;
	box-shadow: 0 .01rem .5rem rgba( 0,0,0,0.7 );
	position: fixed;
		top: 0;
		z-index: 100;
	text-align: right;
	width: 100%;
}
#pgHeader .wrapper.sticky-menu #logo {
	float: left;
	max-width: 100px;
	margin: 0;
	padding: 1rem;
}
#pgHeader .wrapper.sticky-menu #mainMenu {
	font-size: 1rem;
	padding-top: 1.1rem;
}

#mainMenu {
	color: #000;
	display: block;
	font-family: Oswald, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: .9rem;
	font-weight: 700;
	position: relative;
	text-align: center;
}
#menuBtn {
	display: inline-block;
		vertical-align: middle;
	display: none;
	padding: .5em;
	text-align: center;
}
#mainMenu a {
	text-decoration: none;
}
#mainMenu ul {
	display: inline-block;
}
#mainMenu ul li {
	display: inline-block;
	padding: 1rem;
}
#menuBtn:hover, #menuBtn.active, #mainMenu ul li:hover {
}
#mainMenu ul li.parent:hover {
}
#mainMenu ul li.parent ul {
	background-color: #000;
	box-shadow: 3px 3px 3px rgba( 0,0,0,.7 );
	display: none;
	margin: 1em 0 0 -1em;
	text-align: left;
}
#mainMenu ul li.parent ul li {
	display: block;
	color: #fff;
}
#mainMenu ul li.parent span.parent::after {
	content: "\25BE ";
}
#mainMenu ul li.parent:hover ul, #mainMenu ul ul.submenu {
	display: block;
	position: absolute;
		z-index: 300;
}
#menuBtn:hover, #menuBtn.active, #mainMenu ul li:hover {
	background-color: #000;
	color: #fff;
}
#mainMenu ul li.parent ul li:hover {
	background-color: #ffe5a8;
	color: #000;
}

#mainMenu li.mobile, #footerMenu li.mobile {
	display: none;
}

#hero {
	background-attachment: fixed;
	background-image: url("../graphics/sean-stratton-yttMVKZqllo-unsplash.jpg");
	background-position: center center;
	background-size: cover;
	position: relative;
}
#hero .container {
	display: flex;
		min-height: 33vw;
	align-items: center;
	flex-flow: row wrap;
	justify-content: space-around;
	position: relative;
}
#hero .info-box {
	background-color: rgba( 255,255,255,0.7 );
	color: #111;
	width: 50%;
	font-family: "Source Serif Pro", Georgia, "Times New Roman", Times, serif;
	font-size: 1.4rem;
	padding: 2rem;
	text-align: justify;
}

#info, #members, #search, #events, #news, #board, #contact, #links, #memInfo, #announcement {
	background-color: #fff;
	color: #111;
	padding: 1.5rem;
}
#partsInfo {
	background-color: #ffd266;
	color: #000;
	padding: 1.5rem;
}
.content p, .content ol, .event p {
	line-height: 1.25rem;
	padding-bottom: 1rem;
}
.content ol {
	list-style-type: decimal;
}
.content ol li {
	padding-bottom: .5rem;
}
.content ol ul:last-child {
	padding-bottom: 0;
}
.content ol ul {
	padding: 1rem 0;
}
.content h1, #events h1, .pgTitle, #board h1, .pgTitle {
	font-family: Oswald, "Source Sans 3", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1.25rem;
	font-weight: 700;
	padding: 1.25rem 0;
}
.content h2, .agency {
	font-size: 1.125rem;
	font-weight: 700;
	padding: 1.25rem 0;
}
#board h2 {
	border-bottom: 1px solid #1faa4a;
}


/* #info main, #info aside, */ #recycling main, #recycling aside {
	display: inline-block;
		vertical-align: middle;
}
/* #info main,*/ #recycling main {
	max-width: 70%;
}
#info aside, #recycling aside {
	max-width: calc( 29% - 5.5rem );
	text-align: center;
}
#info aside {
	background-color: #ffe;
	margin-left: 2rem;
	padding: 1.5rem;
	text-align: center;
	vertical-align: top;
}
#info aside img, #recycling aside img {
	display: block;
		width: auto;
		height: auto;
	margin: auto;
}


#memInfo {
	background-attachment: fixed;
	background-image: url("../graphics/MissouriStateCapitol_light.jpg");
	background-size: cover;
	color: #000;
	display: block;
	padding-bottom: 2rem;
	position: relative;
}
#memInfo a, #memRsrc a {
	color: #d7a121;
}
#memInfo a:hover, #memRsrc a:hover {
	color: #ffd266;
}
#memInfo h2, #memRsrc h2 {
	color: #d7a121;
	font-size: 1rem;
	font-weight: 700;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.cBlock {
	display: block;max-width: 400px;
	font-size: 1.125rem;
	margin: 2rem auto;
	text-align: center;
}

#pgFooter {
	padding: 1rem;
}
#footerMenu {
	margin: 1em auto;
	text-align: center;
}
#footerMenu a {
	text-decoration: none;
}
#footerMenu a:hover {
	color: #ffe;
}
#footerMenu li {
	display: inline-block;
}
#footerMenu li::after {
	content: " | ";
}
#footerMenu li:last-child::after {
	content: "";
}
#pgFooter address {
	font-size: .9rem;
	line-height: 1.5em;
	margin: 2rem auto;
	text-align: center;
}
#copyright {
	font-size: .8rem;
	text-align: center;
}

a.btn {
	text-decoration: none;
}
div.btn, ul.btn li, #searchCallout.btn:hover, #mobileSearchNotice div.btn:hover li {
	background-color: #ffd266;
	color: #000;
	display: inline-block;
	font-weight: 700;
	padding: 1rem;
}
div.btn:hover, ul.btn li:hover {
	background-color: #ffe5a8;
	color: #000;
	cursor: pointer;
}
div.btn.active, ul.btn li.active, #searchCallout.btn, #mobileSearchNotice div.btn li {
	background-color: #000;
	color: #fff;
}
ul.features {
	list-style-type: square;
	margin-left: 3rem;
	margin-bottom: 1rem;
}
ul.features li {
	line-height: 1.25em;
	padding: .25em;
}
ul.features ul {
	list-style-type: circle;
	margin: .5rem 0 .5rem 3rem;
}
ul.social {
	color: rgba(0,0,0,0);
	display: block;
	font-size: 40px;
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
}
ul.social li {
	background-image: url("../graphics/social.png");
	background-repeat: no-repeat;
	background-size: auto 300%;
	display: inline-block;width: 1em;height: 1em;vertical-align: top;
	margin: .25rem;
	overflow: hidden;
	padding: 0;
}
ul.social .fb { background-position: 0 -2em; }
ul.social .tw { background-position: -1em -2em; }
ul.social .gp { background-position: -2em -2em; }
ul.social .yt { background-position: -3em -2em; }
ul.social .li { background-position: -4em -2em; }
ul.social .pt { background-position: -5em -2em; }
ul.social .eb { background-position: -6em -2em; }
ul.social .yl { background-position: -7em -2em; }
ul.social .em { background-position: -8em -2em; }
ul.social .ph { background-position: -9em -2em; }
ul.social .sk { background-position: -10em -2em; }
ul.social .ig { background-position: -11em -2em; }
ul.assoc, ul.pymt {
	text-align: center;
}
ul.assoc li, ul.pymt li {
	display: inline-block;vertical-align: middle;
	margin: .2rem .1rem;
}
ul.assoc li img {
	display: block;max-height: 60;width: auto;
}
ul.pymt .cc {
	background-size: auto 100%;
	background-image: url("../graphics/payments.png");
	background-repeat: no-repeat;
	border-radius: 5px;
	color: rgba(0,0,0,0);
	display: block;
		width: 3em;
		height: 2em;
	font-size: 20px;
}
ul.pymt .visa {background-position: 0 0}
ul.pymt .mc {background-position: -3em 0}
ul.pymt .disc {background-position: -6em 0}
ul.pymt .paypal {background-position: -9em 0}
ul.pymt .amex {background-position: -12em 0}
ul.pymt .debit {background-position: -15em 0}
ul.pymt .dc {background-position: -18em 0}
ul.pymt .bc {background-position: -21em 0}
.container {
	margin: 0 auto;
	max-width: 1200px;
}


/* News page */
#news article.box {
	border-bottom: 2px solid #999;
	margin: 20px;
	padding-bottom: 20px;
}
#news article.box:last-of-type {
	border-bottom: 0;
}
#news article.box h1 {
	font-weight: 700;
}
#news .box h2 {
	font-size: 13px;
	font-style: italic;
	margin-bottom: 1.125em;
}
#news article ul.logo-list {
	margin: auto;
	margin-bottom: 1em;
}
#news article ul.logo-list li {
	display: inline-block;
		width: 100px;
	margin: 10px;
}
#news article img, #news article ul.logo-list img {
	display: block; 
		width: 100%; 
		height: auto;
}
#news article .video {
	display: block;
		width: 560px;
		height: 315px;
	margin: auto;
	margin-bottom: 1em;
}
.center-img {
	display: block;
	margin: 1rem auto;
	text-align: center;
}

/* Contact form styling */
#contactForm {
	max-width: 350px;
	margin: auto;
}
#contactForm h2, #contactForm address {
	text-align: center;
}
#contactForm h2 {
	font-weight: 700;
}
#contactForm form {
	margin-top: 1em;
}

/* Member list styling */
#member-list {
	text-align: center;
}
#memList ul li.member {
	clear: both;
	overflow: auto;
	padding: 2rem;
}
#memList .member-name {
	font-size: 1.2rem;
	font-weight: 700;
}
#memList a {
	text-decoration: none;
}
#memList .member-name a::after {
	content: "website \00bb";
	font-variant: small-caps;
	margin-left: 1em;
}
#memList .member-contact a {
	text-decoration: underline;
}
#memList h1 {
	padding: .5em;
}

/* Parts Search */
#searchBox {
	display: block;
		max-width: 100%;
	margin: 0 auto;
	padding: 0 1rem;
	text-align: center;
}
ul.search {
	margin-bottom: 1.5rem;
}
ul.search li {
	display: inline-block;
	font-weight: 700;
	margin: 0;	
}
#searchBox iframe {
	display: block;
		width: 900px;
		height: 500px;
	margin: auto;
}
#mobileSearchNotice {
	display: none;
	text-align: center;
}


/* Events */
#events .event:nth-child(even) {
	background-color: #ffe;
}
.cal_header {
	background-color: #ffd266;
	color: #000;
	font-size: 18px;
	font-weight: 700;
	padding: 10px;
	text-align: center;
}
.event {
	border: 1px solid #eee;
	border-top: 0;
	padding: 10px;
}
.event h1 {
	font-family: Oswald, "Source Sans Pro", Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 16px;
	margin-bottom: .125em;
}
.event .date {
	font-style: italic;
}
.event .location {
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.event .desc {
	margin: 0 20px;
}
.event ul {
	list-style-type: square;
	margin-left: 40px;
}
.event p {
	padding-bottom: 1rem;
}
.event img {
	height: auto;
}
.event img.lg {
	width: 75%;
}
.event img.med {
	width: 50%;
}
.event img.sm {
	width: 25%;
}

article.con header, article.con h1 {
	font-family: Oswald, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	text-align: center;
}
article.con .content h1 {
	border-top: 1px solid #ccc;
	font-family: Oswald, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	margin-top: 1em;
	padding-top: 1em;
}
.schedule h1 {
	font-family: Oswald, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	margin-bottom: 0;
}
.schedule h2 {
	background-color: #ffe;
	color: #fff;
	font-variant: small-caps;
	font-weight: 700;
	margin-top: 14px;
	padding: 5px;
	text-align: center;
}
.schedule .slot {
	display: block;
	margin-bottom: .5em;
	padding: 2px;
}
.schedule .time, .schedule .session {
	display: inline-block;
		vertical-align: top;
}
.schedule .time {
	width: 140px;
}
.schedule .session {
	max-width: 520px;
}
.schedule .title {
	font-weight: 700;
}
.schedule ul {
	margin: 1em 0 1em 2em;
}
.schedule ul li {
}
.schedule .topic {
	font-style: italic;
}

/* Board of Directors */
section#board h2 {
	font-size: 1.5rem;
	font-variant: small-caps;
	font-weight: 700;
}
section#board h3 {
	font-size: 1.3rem;
	font-style: italic;
	padding-top: 1.3rem;
}
ul.board {
}
ul.board li {
	display: inline-block;
		width: 220px;
		vertical-align: top;
}
ul.board ul {
	margin: 15px;
}
ul.board ul li {
	display: block;
}
ul.board li.person {
	font-weight: 700;
}
ul.board li.title {
	font-style: italic;
}

ul.board li.member {
}
ul.board li.phone {
}
ul.officers, ul.directors {
	margin-bottom: 2em;
}


/* Membership Application and Benefits */
.duesList {
	max-width: 400px;
	margin: auto;
	margin-bottom: 1em;
}
.duesList h2 {
	font-weight: 700;
	text-align: center;
}
.duesList ul {
	margin-top: .5em;
}
.duesList .header {
	font-weight: 700;
}
.duesList .left {
	margin-left: 2em;
}
.callout {
	font-size: 16px;
	font-weight: 700;
	margin: 2em auto;
	text-align: center;
}
dl.benefits {
	margin-left: 3em;
}
dl.benefits dt {
	font-weight: 700;
	margin-bottom: .25em;
}
dl.benefits dd {
	margin-bottom: 1em;
}
dl.benefits ul {
	list-style-type: disc;
	margin-left: 3em;
}
dl.benefits ul li {
	margin-bottom: .25em;
}

/* Useful Links */

dl.links {
	margin-left: 3em;
}
dl.links dt {
	font-weight: 700;
	margin-bottom: .25em;
}
dl.links dd {
	margin-bottom: 1em;
}
ul.links {
	list-style-type: disc;
	margin-left: 3em;
}
ul.links li {
	margin-bottom: .25em;
}

/* Newsletters */
ul.newsletters {
	display: block;
}
ul.newsletters li {
	display: inline-block;
		width: calc( 32% - 4rem );
	padding: 2rem;
	text-align: center;
}
ul.newsletters li img {
	margin: auto;
		max-width: 150px;
		height: auto;
}

@media screen and (max-width: 999px) {
	#menuBtn {
		display: inline-block;
	}
	#mainMenu ul {
		background-color: #000;
		display: block;
			width: 100%;
		display: none;
		position: absolute;
			z-index: 100;
	}
	#mainMenu ul li {
		color: #fff;
		display: block;
		padding: .5em;
		padding-left: 2.5em;
		text-align: left;
	}
	#mainMenu ul li:hover {
	}
	#mainMenu li.desktop, #mainMenu li.parent ul, #mainMenu li.parent:hover ul, #footerMenu li.desktop {
		display: none;
	}
	#mainMenu li.mobile {
		display: block;
	}
	#footerMenu li.mobile {
		display: inline-block;
	}
	#hero {
		min-height: none;
		height: auto;
		padding: 1rem;
	}
	#hero .info-box {
		font-size: 1rem;
		width: 70%;
	}
	#searchBox {
		display: none;
	}
	#content, #main, #board {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	#mobileSearchNotice {
		display: block;
		margin: auto;
	}
	#info main, #info aside, #recycling main, #recycling aside { 
		display: block; 
		margin: auto; 
		width: 100%; 
		max-width: auto; 
		margin: auto;
	}
	#footerMenu {
		display: none;
	}
}
@media screen and (max-width: 699px) {
	#highline {
		flex-flow: column wrap;
	}
	ul.newsletters li {
		width: calc( 49% - 4rem );
	}
	ul#member-list li {
		display: block;
		margin: .5rem auto;
	}
	ul.pymt .cc {
		background-size: auto 100%;
		border-radius: 3px;
		font-size: 10px;
	}
	#footerMenu {
		display: none;
	}
}
@media screen and (max-width: 399px) {
	ul.newsletters li {
		width: calc( 100% - 4rem );
	}
	#map iframe {
		display: none;
	}
	#mapLink {
		display: block;
	}
}