/*
	Website Name: Colorado Auto Recyclers Association
	Designed by: Katherine Leonard, Car-Part.com
	Last updated: 24 Nov 2021
*/

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* "Beat THAT ClearFix!" by Thierry Koblentz - http://www.cssmojo.com/ */
.btcf:after{content:"";display:table;clear:both}

/* "Frustration Fixes" by Katherine Leonard - http://www.kat-and-mouse.com/ */
html,body{height:100%;overflow-x:hidden;overflow-y:auto}a{color:inherit}strong,b,bold{font-weight:700}em,i,italic{font-style:italic}.left{float:left;text-align:left}.center{float:none;margin:0auto;text-align:center}.right{float:right;text-align:right}a[href^="tel"],.noU{text-decoration:none}.showU{text-decoration:underline}

html {
	font-size: 16px;
}
body {
	background: #111;
		background: -moz-linear-gradient( top, #111 0%, #333 50%, #111 100% );
		background: -webkit-linear-gradient( top, #111 0%, #333 50%, #111 100% );
		background: linear-gradient( to bottom, #111 0%, #333 50%, #111 100% );
	background-attachment: fixed;
	background-size: cover;
	color: #fff;
	font-family: Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
}
#pgHeader {
	position: relative;
	text-align: center;
}
#logo {
	display: block;
		max-width: 250px;
	margin: auto;
	padding: 2rem 0;
}
#logo img {
	display: block;
		width: 100%;
		height: auto;
}
#mainMenu {
	background-color: #1faa4a;
	font-weight: 700;
	position: relative;
	text-align: center;
}
#menuBtn {
	display: inline-block;
		width: 100%;
		vertical-align: middle;
	display: none;
	font-size: 2rem;
	padding: .75rem;
	text-align: left;
}
/* #menuBtn::before {
	content: "\f0c9";
	display: inline-block;
		vertical-align: middle;
	font-family: "Font Awesome 5 Free";
	font-size: 2em;
	font-weight: 400;
	margin: .1em .2em;
}*/
#mainMenu a {
	text-decoration: none;
}
#mainMenu ul {
	display: inline-block;
}
#mainMenu ul li {
	display: inline-block;
	padding: .5em 1em;
}
#mainMenu ul li:hover {
	background-color: #f6892e;
}
#menuBtn:hover, #menuBtn.active, #mainMenu ul li:hover {
}
#mainMenu ul li.parent a::after {
	content: "";
	padding-left: 1rem;
}
#mainMenu ul.submenu {
	background-color: #fff;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
	color: #111;
	margin-left: -1em;
	position: absolute;
		top: 2em;
		z-index: 150;
	text-align: left;
}
#mainMenu ul.submenu, #mainMenu ul.submenu li {
	display: none;
}
#mainMenu ul ul li {
	display: block;
}
#mainMenu ul li.parent:hover ul.submenu, #mainMenu ul li.parent:hover ul.submenu li {
	display: block;
}
#mainMenu ul.submenu li:hover {
	color: #fff;
}

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

#hero {
	background-attachment: fixed;
	background-image: url("../graphics/zachary-spears-LQVjNckCyzU-unsplash.jpg");
	background-position: center bottom;
	background-size: cover;
	display: block;
		min-height: 33vw;
	position: relative;
}
#hero .container {
}
#hero .caption {
	color: rgba( 255,255,255,0.6 );
	font-family: "Passion One", Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 5rem;
	padding: 1em;
	text-align: center;	
}
#hero .caption .line1 {
	position: absolute;
	right: 50%;
	top: calc( 50% - 3rem );
}
#hero .caption .line2 {
	position: absolute;
	left: calc( 50vw - 3ch );
	top: calc( 50% + 2rem );
}
#hero .caption .green {
	color: #13d84b;
	text-shadow: 1px 1px 0 rgba( 0,63,0,0.4 ), -1px 1px 0 rgba( 0,63,0,0.4 ), -1px -1px 0 rgba( 0,63,0,0.4 ), 1px -1px 0 rgba( 0,63,0,0.4 );	
}




#content, #memRsrc {
	background-color: #fff;
	color: #111;
}
#main, #events, #news, #board {
	padding: 1rem 0;
}
#main h1, #events h1, .pgTitle, #board h1 {
	font-size: 1.125rem;
	font-weight: 700;
	padding: 1.25rem 0;
}
#board h2 {
	border-bottom: 1px solid #1faa4a;
}
#content p {
	margin-bottom: 1rem;
}




#memInfo {
	background-attachment: fixed;
	background-image: url( "graphics/ColoradoStateCapitol_light.jpg" );
	background-size: cover;
	color: #000;
	display: block;
	padding-bottom: 2rem;
	position: relative;
}
#memInfo a, #memRsrc a {
	color: #1faa4a;
}
#memInfo a:hover, #memRsrc a:hover {
	color: #13d84b;
}
#memInfo h2, #memRsrc h2 {
	color: #1faa4a;
	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: #1faa4a;
}
#footerMenu li {
	display: inline-block;
}
#footerMenu li::after {
	content: " | ";
}
#footerMenu li:last-child::after {
	content: "";
}
#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: #1faa4a;
	color: #fff;
	display: inline-block;
	font-weight: 700;
	padding: 1rem;
}
div.btn:hover, ul.btn li:hover {
	background-color: #f6892e;
	cursor: pointer;
}
div.btn.active, ul.btn li.active, #searchCallout.btn, #mobileSearchNotice div.btn li {
	background-color: #333;
}
ul.features {
	list-style-type: square;
	margin-left: 3rem;
	margin-bottom: 1rem;
}
ul.features li {
	padding: .25rem;
}
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-img, .news-vid, .event-img {
	display: block;
	margin: 1rem auto;
}
#news article img, #news article ul.logo-list img, .news-img img, .event-img img {
	display: block;
		width: 100%;
		height: auto;
}
#news article main p a, #news article main a h1 { 
	color: #1faa4a;
}
#news article main p a:hover,  #news article main a:hover h1 {
	color: #13d84b;
}
#news article main h1 {
	color: #1faa4a;
	font-family: Oswald, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1em;
	text-decoration: none;
	text-transform: uppercase;
}
.w50 {
	max-width: 50%;
}

/* 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 {
	background-color: #00a651;
	color: #fff;
	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: #efe;
}
.cal_header {
	background-color: #f6892e;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	padding: 10px;
	text-align: center;
}
.event {
	border: 1px solid #eee;
	border-top: 0;
	padding: 10px;
}
.event h1 {
	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 .desc h1 {
	color: #1faa4a;
	font-family: Oswald, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
}
article.con header, article.con h1 {
	text-align: center;
}
article.con .content h1 {
	border-top: 1px solid #ccc;
	margin-top: 1em;
	padding-top: 1em;
}
.schedule h1 {
	margin-bottom: 0;
}
.schedule h2 {
	background-color: #073;
	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 */
main.board h2 {
	font-variant: small-caps;
	font-weight: 700;
}
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;
}

@media screen and (max-width: 999px) {
	#menuBtn {
		display: inline-block;
	}
	#mainMenu ul {
		background-color: #f6892e;
		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 {
		background-color: rgba( 255,255,255,0.25 );
		color: #fff;
	}
	#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;
	}
	#searchBox {
		display: none;
	}
	#content, #main, #board {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	#mobileSearchNotice {
		display: block;
		margin: auto;
	}
	#hero {
		background-size: cover;
	}
	#hero .caption {
		color: rgba( 255,255,255,0.6 );
		font-family: "Passion One", Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
		font-size: 5rem;
		padding: 1em;
		text-align: center;	
	}
	#hero .caption .line1, #hero .caption .line2 {
		position: relative;
		top: auto;
		right: auto;
		left: auto;		
	}
}
@media screen and (max-width: 849px) {
	#news, #assoc {
		display: block;
			width: auto;
		float: none;
		margin: 1rem auto;
	}
}
@media screen and (max-width: 699px) {
	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) {
	#map iframe {
		display: none;
	}
	#mapLink {
		display: block;
	}
}