/*
Theme Name: ASDE
Author: Alliance for Self-Directed Education
Author URI: https://www.self-directed.org
Description: Custom theme for self-directed.org. DO NOT USE THE WP CUSTOMIZER!
Text Domain: sd
*/

/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption {margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-family: inherit; font-style: inherit; font-weight: inherit}
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, figure img, figcaption, input, textarea, select, div:before, div:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
html {height: 100%; font-size: 62.5%; overflow-y: auto; overflow-x: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}
embed, iframe, object, pre, img, select, audio, video, .img, .mw100p {max-width: 100%}
article, aside, footer, header, main, nav, section, .block {display: block}
table {border-collapse: separate; border-spacing: 0}
caption, th, td {font-weight: normal; text-align: left}
blockquote:before, blockquote:after {content: ""}
blockquote {quotes: '' ''}
q {quotes: '“' '”' '‘' '’'}
a:focus {outline: thin dotted}
a:hover, a:active {outline: 0}
a img {border: 0}

/* Basic Tags */

body {background: #ccc}
body, button, input, select, textarea {color: #000; font: normal 16px/1.5 Lato,Roboto,Helvetica,sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased}
h1, h2, h3, .title {line-height: 1.2; font-weight: 400}
h1, .title {font-size: 40px} h2 {font-size: 32px} h3 {font-size: 24px} h4 {font-size: 20px}
hr {background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.2em}
hr.thick {height: 5px}
hr.black {background-color: #000}
p, .p {margin-bottom: 1.2em; color: rgba(0,0,0,.87)}
ul, ol {margin: 0 0 1.2em 1.5em}
ul {list-style: disc}
ol.lower-alpha {counter-reset: list}
ol.lower-alpha > li {list-style: none; position: relative}
ol.lower-alpha > li:before {content: counter(list, lower-alpha) ") "; counter-increment: list; position: absolute; left: -1.4em}
li > ul, li > ol {margin-bottom: 0; margin-left: 1.2em}
dt {font-weight: bold}
dd {margin: 0 1.5em 1.2em}
b, strong {font-weight: bold}
dfn, cite, em, i {font-style: italic}
blockquote {margin: 0 0 1em 8px; padding: 5px 0 5px 12px; font-family: Lato,Roboto,Helvetica,sans-serif; border-left: solid 5px #eee}
blockquote p:last-child {margin-bottom: 0}
address {margin: 0 0 1.2em}
pre {background: #eee; font: 15px/1.5 "Courier New", Courier, monospace; margin-bottom: 1.2em; overflow: auto; padding: 1.5em}
code, kbd, tt, var {font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace}
abbr, acronym {border-bottom: 1px dotted #777; cursor: help}
mark, ins {background: #fff9c0; text-decoration: none}
sup, sub {font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline}
sup {bottom: 1ex} sub {top: .5ex}
table {margin: 0 0 1.2em}
th {font-weight: bold}
img {height: auto}

/* Buttons & Forms */

button, input, select, textarea {font-size: 100%; margin: 0; vertical-align: baseline}
button, input[type="button"], input[type="reset"], input[type="submit"] {color: #fff; background: #777; border: solid 1px #777; padding: 7px 15px; cursor: pointer;}
button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {outline: 1px dotted rgba(0,0,0,.5)}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {background: #273d90; outline: none}
button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {background: #273d90; outline: none}

.chBox, .rBtn, input[type="checkbox"], input[type="radio"] {-moz-appearance: none; -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: #f8f8f8; border: solid 1px #ccc; border-radius: 0; vertical-align: middle; margin: 0 3px 4px 0}
.rBtn, input[type="radio"] {border-radius: 50%}
.chBox:checked, input[type="checkbox"]:checked {border-color: #15cfa5; background: #15cfa5; background-image: url("/img/chBox.png"); background-size: cover}
.rBtn:checked, input[type="radio"]:checked {border-color: #15cfa5; background: #15cfa5; box-shadow: 0 0 0 2px #fff inset}
.rBtn.red:checked, input[type="radio"].red:checked {border-color: red; background: red}
.chBox:focus, .rBtn:focus, input[type="checkbox"]:focus, input[type="radio"]:focus {outline: none; border: solid 2px #999}
input.smBtn, .hide input[type="checkbox"] {width: 18px; height: 18px}
a.capBtn:hover {background: #15cfa5; color: #000 !important; text-decoration: none !important}

.list-desc {margin: 0 10px 10px 32px; font-size: 13px; color: #777; max-width: 320px}

button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], .fake-input, textarea
	{width: 100%; max-width: 300px; padding: 7px 12px; color: #555; border: 1px solid #bbb; background: #fcfcfc}
input[type="text"], textarea {max-width: 1000px}
.post-password-form input[type="password"] {width: 140px}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus {color: #000}
input[type="search"] { -webkit-appearance: textfield}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none}
textarea {overflow: auto; padding: 2px 6px; vertical-align: top}
select {padding: 2px 15px 2px 5px; border: 1px solid #bbb; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(/img/selectbg.png) right/12px no-repeat #f8f8f8}
select::-ms-expand {display: none; /* remove arrow, ie10/11 */ }


/* Links */
a {text-decoration: none; color: #263db0}
a:visited {color: #465d90}
a.nv:visited, .nv a:visited, #prev-next a:visited {color: #263db0}
a:hover, a:focus, a:active {color: #44e}
a b:hover {color: #66d}

.news-body a, .body a, .post-body a, .callout p a, a.underlined {
	/* hack for thin underline */
	box-shadow: inset 0 -0px 0 white, inset 0 -1px 0 #263db0
}

.news-body a:hover, .body a:hover, .post-body a:hover, .callout p a:hover, a.underlined:hover {
	box-shadow: inset 0 -0px 0 white, inset 0 -2px 0 #263db0;
	text-decoration: none;
}

h2.archive-title a, .grayspace-section a, #sp-logos a, .aBtns a, .share-btns a, .ctrblock > a, a.btn, a.capBtn, a.emBtn, a.nohover {
	box-shadow: none !important;
}

a.nohover:hover, a.nohover:focus, a.nohover:active {
	text-decoration: none !important;
}

.breadcrumbs a, .breadcrumbs a:visited,
.comment-meta a, .comment-meta a:visited {color: #88c}
a.showbio, a.showbio:visited,
.bbp-breadcrumb a, .bbp-breadcrumb a:visited,
.bbp-topic-tags a, .bbp-topic-tags a:visited {color: #66d}

/* For screen readers */
.screen-reader-text {clip: rect(1px, 1px, 1px, 1px); position: absolute !important}
.screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus {background-color: #eee; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px; text-decoration: none; top: 5px; width: auto; z-index: 100000}

/* Comments */
#comments {margin-top: 20px; padding-top: 10px; border-top: solid 2px #e1e1ff}
.comment-list .comment {margin: 15px 0}
.comment-list .comment .comment {padding-left: 15px}
.comment-list .comment > blockquote {color: #000; font-size: 14px}
.by-author {}
.comment-author {margin: 1em 0 .3em; font-style: italic}
.comment-content a {word-wrap: break-word}
.comment-meta {text-align: right; padding: 0 12px; margin-top: -0.3em; font-size: 12px; line-height: 1.2}
.comment-meta {color: #88c}
.form-allowed-tags, .form-allowed-tags code {font-size: 10px; color: #999; margin-top: -1em}

/* Search */
.rd-search {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.rd-search input[type="text"] {
	flex: 1;
}

.search-results h2 {margin: 10px 0 2px; font-size: 20px}
.search-results .byline {margin: 0 0 8px}
.search-results .search-form {text-align: center; margin: 8px 0; white-space: nowrap}
.search-results input#s  {width: 70%}

/* No-wrap + ellipsis */
.nb, .card .pretitle, .card .subtitle, .byline, .ellipsis,
.bbp-user-page h1.title, .bbp-user-edit h1, #prev, #next {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nodots {text-overflow: clip}
nobr {white-space: nowrap}
hy, .hy { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto}
.breakable {word-wrap: break-word}
a:not(.nb) {word-wrap: break-word; overflow-wrap: break-word}

/************************** PAGE STRUCTURE ******************************/

#alert {text-align: center; background: #ff9; font: bold 125%/200% Arial}
#alert a {color: #00c}

#wrap-all {min-height: 100%; position: relative; max-width: 1440px; margin: 0 auto; background: #fff}
.wrap6p {padding: 0 6%}
.wrap6m {margin: 0 6%}
main, .min50vh {min-height: 50vh}
main {
	/* set this to relative so that #fmenu has a reliable anchor */
	position: relative;
}

/* Header + Menu Button */
.top-menu {max-width: 1440px; margin: 0 auto; padding: 0 15px}
.top-menu:first-of-type{
	border-bottom: 1px solid #ccc;
	background: #f7f7f7;
}
.top-menu:last-of-type{
	padding-left: 5px;
}

#header-logo {float: left; padding-top: 8px;}
#header-logo img, #mBtn img, #asde img {display: block; width: 36px}

#header-logo img {
	float: left;
	padding-right: 8px;
}


#site-name {
	color: #263d90;
	float: left;
	line-height: 1.1;
	font-size: 30px;
	font-weight: 300;
}

a:hover #site-name {
	color: black;
}

#mBtn {position: absolute; display: none; top: 0; right: 15px; z-index: 50; padding-top: 8px;}
#mBtn:hover {cursor: pointer}
#asde {margin-top: 8px}


/* Nav + Search */
.top-menu>ul {font-size: 18px; list-style-type: none; margin: 0; padding: 0; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center}
.top-menu>ul.flex-end {justify-content: flex-end;}
.top-menu>ul li {text-transform: uppercase; position: relative; white-space: nowrap; margin: 0; padding: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto}
.top-menu>ul li li {text-transform: none}
.has-sub > a:after {content: "\0025BE"; padding-left: .2em; color: #bbb}
.top-menu>ul a:not(.btn), .top-menu>ul a:not(.btn):visited {color: #777}
.top-menu>ul a:not(.btn):hover, .top-menu>ul a:not(.btn):active {color: #000; background: #eee}
.top-menu>ul a#avt:hover, .top-menu>ul a#avt:active {background: none}
.top-menu>ul li.menu > a:not(.btn) {padding: 9px 12px; display: block}
.top-menu>ul li.menu ul {list-style-type: none; margin: 0; padding: 0; background: #fff; border: solid 1px #ccc; cursor: pointer; position: absolute; z-index: 999; min-width: 80%; display: none}
.top-menu>ul li.menu.rt0 ul {right: -8px; top: 50px}
.top-menu>ul li.menu li a {display: block; padding: 7px 20px 7px 12px}
.top-menu>ul .menu li a:not(.btn):hover {background: #eee}
.top-menu>ul li.menu:hover ul {display: block}
#menu-mask {display: none; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 990; background: rgba(0,0,0,.15)}

.top-menu>ul #search {position: relative; padding: 0 10px; margin-right: 10px;}
.top-menu>ul #search img {width: 24px; display: block}
.top-menu>ul #search:hover img, #header-logo:hover img, #mBtn:hover img, #fmBtn:hover img, #asde:hover img, .share-btns img:hover, .bright0 {-webkit-filter: brightness(0); filter: brightness(0)}
.top-menu>ul .search-form {margin: -3px 0 0; padding: 0; position: absolute; top: 0; right: 0; z-index: 999}
.top-menu>ul .search-field {width: 0; color: #fff; background-color: transparent; padding: 2px 0 2px 60px; margin:0; border: none; cursor: pointer; -webkit-transition: all 400ms ease; transition: all 400ms ease}
.top-menu>ul .search-field:focus {background-color: #555; box-shadow: -9px 0 9px #fff; cursor: text; outline: 0; padding: 2px 10px; width: 280px}
.top-menu>ul .search-submit {display:none}
.top-menu>ul .user-menu {padding: 7px 10px; margin-left: 12px;}
a#avt, a#avt:visited {color: #fff; padding: 0 !important; position: relative}
a#avt img, a#avt div {display: block; height: 36px; width: 36px; overflow: hidden; text-align: center; background: #15cfa5; border-radius: 50%; line-height: 36px}
.top-menu>ul a#login {padding: 5px; display: inline}
.has-sub > a#avt:after {position: absolute; right: -16px; top: 8px}

/* Footer */
#wrap-footer {background: #3f3939; width: 100%; padding: 40px 20px 30px}
footer {max-width: 1024px; margin: 0 auto; color: #eee}
footer, #footer-menus {display: -ms-flexbox; display: -webkit-flex; display: flex}
footer {-ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around}
#footer-menus {-ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between}
#footer-pt1,#footer-pt2, #footer-menus ul {-webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto}
#footer-pt1 {padding: 0 20px}
#footer-pt2 {padding: 0 20px; max-width: 640px}

#footer-logo {width: 256px}
#footer-contact {font-weight: 300; font-size: 18px; margin: 24px 28px 0; line-height: 1.2}
#footer-social {margin: 20px 28px 0 20px}
#footer-social img {padding: 0 8px; width: 32px}
#footer-social a:hover, .brightness50 {-webkit-filter: brightness(50%); filter: brightness(50%)}
#footer-vision {font: italic 20px Merriweather,Georgia,serif; margin: 0 0 25px; padding: 0 0 25px; border-bottom: 1px solid #555}
#footer-donate-btn {font: normal bold 17px Lato,Roboto,Helvetica,sans-serif; margin: 3px 0 10px 40px; padding: 8px 24px}

#footer-menus {clear: both; font-size: 18px; font-weight: 300}
#footer-menus ul {list-style-type: none; margin: 0; padding: 0}
#footer-menus a, #footer-menus a:visited {color: #ddd}
#footer-menus a:hover {text-decoration: underline}
#footer-menu-2 {margin: 0 20px}
#copyright {clear: both; font-size: 11px; text-align: center; padding: 3px; color: #bbb; background: #555}
#copyright a, #copyright a:visited {color: #ccf}

/* Content */
.fw, .grayspace-section, .fw-section {width: 1440px; max-width: 1440px; position: relative; left: 50%; margin-left: -720px}
.post-header {margin-bottom: 20px}
.post-body {max-width: 900px; margin: 0 auto 50px; padding: 0 30px; font: 300 24px/1.3 Lato,Roboto,Helvetica,sans-serif}
.tp .post-body {max-width: 760px; font: 18.1px/1.8 Merriweather,Georgia,serif}
.ar .post-body {font: 18.1px/1.8 Merriweather,Georgia,serif}
.post-body strong {font-weight: 400}
.tp .post-body strong, .ar .post-body strong {font-weight: bold}
.feat {font: 300 24px/1.2 Lato,Roboto,Helvetica,sans-serif}
.news-body h3 {margin-bottom: 20px}
.news .subtitle {color: #777; font-size: 18.1px; margin-top: 10px}
article.news {font-size: 17px}
.tp-news {line-height: 1.1; font-size: 24px; margin: 0; padding: 0 0 30px}
.tp-news td {padding: 0 15px 15px 0; vertical-align: top}
.tp-news td img {max-width: unset}
.tp-news td.tplink {padding-right: 0}
.tp-news-sum {padding-top: 8px; font-size: 14px; color: #555}
.tp-news-by {padding-top: 10px; font-size: 16px}
.avatar-left {width:100px; border: solid 1px #eee; border-radius: 50%; float:left; margin: 0 15px 10px 0}

.twoBtns {text-align: center}
.twoBtns a {display: inline-block; min-width: 170px; margin: 0 20px}
.summary, .pullout {color: #555; text-align: center; font: italic 300 32px/1.1 Lato,Roboto,Helvetica,sans-serif; padding: 0 0 36px; border-bottom: solid 8px #999; margin: 0 0 36px}
.pullout {padding: 18px 0; border: solid 4px #ddd; border-width: 4px 0; margin: 20px 0}
.pullout.left, .pullout.right {width: 320px; text-align: left; float: left; margin: 7px 40px 20px -100px}
.pullout.right {float: right; margin: 7px -100px 20px 30px}
.pullout b, .pullout strong, .summary b, .summary strong {font-weight: 400}
.pullout i, .pullout em, .summary i, .summary em {font-style: normal}
.post-body .summary {margin-top: 30px}
.tp.ar .post-body > p:not(.no-drop):first-of-type:first-letter, .drop {float: left; color: #999; font-size: 3.6em; padding-right: 5px; line-height: .99}
.tp-section-title {margin: 1.2em 0 1em; font-weight: bold; font-size: 22px}

.bios {max-width: 1100px; margin: 0 auto; font-size: 16px; font-weight: 400; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap}
.bios .bio {clear: both; -webkit-flex: 0 0 50%; -ms-flex: 0 0 49%; flex: 0 0 50%}
.bios .pic, .tp .pic {float: left; width: 100px; margin: 3px 9px 40px 0; text-align: center; line-height: 1.1; font-weight: bold; font-size: 14px; color: #555}
.tp .pic.r {margin: 3px 0 40px 9px}
.bios img {border: solid 1px #ddd; border-radius: 50%; margin-bottom: 7px}
.bios p {margin: 0 40px 40px 125px}
.bios.one-col {display: block; font-size: 17px}
.bios.one-col .bio {margin-top: 50px}
.bios.one-col .pic {width: 152px; font-family: Lato,Roboto,Helvetica,sans-serif}
.bios.one-col p {margin: 0 0 1.5em 175px}
.postmeta {margin: 40px 0 60px; position: relative}
.authorphoto {float: left; border: 1px solid #ddd; border-radius: 50%; width: 88px}
.postbio {color: #555; margin: 0 0 0 100px; font-size: 16px; line-height: 1.4; max-width: 400px}
.postbio b {color: #000} 
.postdate {color: #999; font-style: italic; margin-top: 3px}
.share-btns {white-space: nowrap; display: block !important}
.postmeta .share-btns {position: absolute; right: 0; top: 0}
.share-btns img {width: 32px; border-radius: 5px; vertical-align: middle}
.share-btns a {margin-left: 12px; display: inline !important}
.share-btns a:first-child {margin-left: 0}
.tp-art a, .tp-art a:visited {color:#000}
.tp-art a:hover {color:#15cfa5; text-decoration:none}

/* tipping points translations */
.tp .post-tabs {max-width: 760px; margin: 0 auto 50px; padding: 0 30px 0; font: 18.1px/1.8 Merriweather,Georgia,serif}
.tp .post-tabs .tab{text-decoration: none;font-weight: bold;color: #000;border: solid 1px #ddd;padding: 4px 20px;cursor: pointer;}
.tp .post-tabs .tab.selected{background-color: #ccc;}
.tp .post-tabs .tab:last-child{border-left: 0;}

/* Images, Hero Titles, Banners */
.img.fw {max-width: 1440px}
.fw img, .img img {width: 100%; display: block}
.overlay, .rel {position: relative}
.overlay > .title {position: absolute; font-size: 50px; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,.5); top: 10%; left: 5%; right: 65%; text-align: center}

.title-below > .title {text-align: center; margin: 50px 20px 0}
.tp.ar .title-below > .title {max-width: 760px; padding: 0 30px; margin: 50px auto 0; text-align: left}
.fw .subtitle {font: normal 24px Lato,Roboto,Helvetica,sans-serif; color: #555; text-transform: none; margin-top: 8px}
.overlay .subtitle {color: #fff; font-size: 30px; margin-top: 6px}
.overlay.black-text > .title {color: #000; text-shadow: 0 0 5px rgba(255,255,255,.5)}
.black-text .subtitle {color: #555}
.no-shadow, .no-shadow .title, .no-shadow .subtitle {text-shadow: none !important}
.fw-credit {text-align: right; margin: 0 10px -16px 0; font-size: 11px; color: #999; font-style: italic}
.credit-overlay .fw-credit {margin: -16px 10px -0 0; color: #777; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff}

.bgNews  {background: #2e3192 url(/img/bgNews.png) repeat-x; background-size: auto 100px}
.bgRsrcs {background: #ef6b4f url(/img/rd/bgResources.png) repeat-x; background-size: auto 150px}
.bgFlock {background: #2e3192 url(/img/bgFlock.png) repeat-x; background-size: auto 150px;}

.bgFlockBig {
	background: #2e3192 url(/img/bgFlock.png) repeat-x;
	background-size: auto 150px;
	background-position: center;
	height: 150px;
}
.overlay.bgFlockBig > .title{
	position: absolute;
	color: white;
	margin: 0;
	left: 20%; 
	right: 20%; 
	top: 15%;
}
.overlay.bgFlockBig .subtitle{
	color: white;
}

.banner {position: relative; padding: 10px 0; height: 100px}
.banner h1 {position: absolute; bottom:0;left: 0;right:0; max-width: 600px; margin: 0 auto 12px; line-height: 1.1; color: #fff}
.banner a, .banner a:visited {color: #fff} .banner a:hover {color: #ddf}

.img {margin-bottom: 1.2em}
.img.l {float: left; margin: .3em 1.5em .5em 0}
.img.r {float: right; margin: .3em 0 .5em 1.5em}
.img, .caption-outside img, .credit img {padding: 1px; border: solid 1px #ccc}
.img.no-border, .img.no-border img, .img.caption-outside, .img.credit, .img.fw {border: none; padding: 0}
.gray-border, .gray-border img {border-color: #999}
.black-border, .black-border img {border-color: #000}
.img figcaption {font-size: 90%; color: #555; margin: 4px}
.credit figcaption {font-size: 11px; font-style: italic; color: #888; margin-top: 1px; padding-right: 5px; text-align: right}
.shadow {box-shadow: 5px 5px 12px rgba(0,0,0,.4)} r.shadow {box-shadow: -5px 5px 12px rgba(0,0,0,.4)}
.l.shadow, .r.shadow {margin-bottom: .7em}
.img.r.breakout {margin-right: -110px}
.img.l.breakout {margin-left: -110px}
.img.c.breakout {margin-left: -110px; width: 920px; max-width: 920px}

/* Post Gallery / Cards */

.gallery-5post {width: 100%; margin: 0 0 30px}
.gallery-post, .card-img {position: relative; background: #ccc url(img/default-post-img.png) no-repeat center center; background-size: cover}
.gallery-post {display: block; height: 100%; cursor: pointer; border: solid 1px rgba(0,0,0,.1);}

.gallery-post.vimeo:hover::after, 
.gallery-post.vimeoAlbum:hover::after, 
.gallery-post.youtube:hover::after{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	border-style: solid;
	border-width: 25px 0 25px 50px;
	border-color: transparent transparent transparent rgba(255,255,255,0.3);
}

.gallery-post.nextEvent {
	background: #ccc;
}

.gallery-post.nextEvent:hover .gallery-post-title,
.gallery-post.nextEvent .gallery-post-title {
	background: none;
}

.gallery-post.border::after {border-color: rgba(0,0,0,.3)}
.gallery-post-wrap {display: block; float: left; width: 33.5%; height: 266px}
.gallery-post-wrap.post1 {width: 33%; height: 533px}
.gallery-post-wrap.post2 {padding: 0 0 4px 8px}
.gallery-post-wrap.post3 {padding: 0 0 4px 8px}
.gallery-post-wrap.post4 {padding: 4px 0 0 8px}
.gallery-post-wrap.post5 {padding: 4px 0 0 8px}

.gallery-post-title {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 3% 5%;
	font-size: 27.2px;
	line-height: 1.1;
	color: #fff;
	background-color: rgba(0,0,0,0);
	background-image: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 30%);
	text-shadow: 0 0 10px rgba(0,0,0,1);
}

.gallery-post:hover, .hoverbright:hover {-webkit-filter: brightness(1.06); filter: brightness(1.06); text-decoration: none}
.gallery-post:hover	.gallery-post-title {background-image: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 30%)}

.grayspace-section {text-align: center; padding: 70px 6% 40px; margin-top: 60px; margin-bottom: -50px; background: #eee}
.arrow-top-down:before {content: " "; position: absolute; top: 0; left: calc(50% - 50px); width: 1px; border: solid 50px transparent; border-top-color: #fff; border-width: 30px 50px 0 50px}
.grayspace-section.arrow-top-down {padding-top: 100px; margin-top: 75px}
.cards-3 {text-align: center; padding: 10px 0 40px; white-space: nowrap; overflow: hidden}
.card {display: inline-block; vertical-align: top; text-align: left; white-space: normal; background: #fff; width: 396px; height: 288px; margin: 0 .7%; font-family: Lato,Roboto,Helvetica,sans-serif; transform: translateZ(0); transition: all 0.2s ease-in-out}
.card-img {height: 158px; margin: 0 0 7px}
.card .pretitle, .card .subtitle {margin: 3% 2% 1% 5%; font-weight: 400; font-size: 18px; color: #777}
.card .subtitle {margin: 0 2% 0 5%; position: absolute; left: 0; right: 0; bottom: 4.5%}
.card-title {color: #000; font-size: 33px; font-weight: 300; line-height: 1.15; margin: 0 13px 0 20px; overflow: hidden; max-height: 28%}
.card-title.li3 {max-height: 41%}
.card-title.li1 {max-height: 15%}
.card::after {content: ""; position: absolute; left:0;right:0;top:0;bottom:0; border: solid 1px rgba(0,0,0,.1); transition: all 0.2s ease-in-out}
.card:hover {transform: translateY(-5px); text-decoration: none !important}
.card:hover::after {border-bottom-width: 5px; margin-bottom: -5px}
.subscribe {margin: 50px 0; font-size: 18px}
.subscribe .pretitle {line-height: 1.2; margin: 0 0 6px; font-weight: 400}
.subscribe h2 {margin: 0 0 15px}
.subscribe input {margin: 0 0 12px}

/* Scaling Elements (width b/t 960 & 1440) */
@media all and (max-width: 1440px) {
	.fw, .grayspace-section, .fw-section {width: 100vw; margin-left: -50vw}
	.fw img {width: 100%}
	.overlay > .title {font-size: 3.5vw}
	.overlay .subtitle {font-size: 2vw; margin-top: .4vw}
	.gallery-post-wrap {height: 18.5vw}
	.gallery-post-wrap.post1 {padding: 0; height: 37vw}
	.gallery-post-wrap.post2 {padding: 0 0 .25% .5%}
	.gallery-post-wrap.post3 {padding: 0 0 .25% .5%}
	.gallery-post-wrap.post4 {padding: .25% 0 0 .5%}
	.gallery-post-wrap.post5 {padding: .25% 0 0 .5%}
	.gallery-post-title {font-size: 1.9vw}
	.card {width: 27.5vw; height: 20vw}
	.card-img {height: 11vw; margin: 0 0 .5vw}
	.card .pretitle {font-size: 1.25vw}
	.card .subtitle {font-size: 1.25vw}
	.card-title {font-size: 2.29vw; margin: 0 1vw 0 1.4vw}
}

/* Initially Hidden Elements */
.nav .search-submit, .collapsed, .hidden {display: none}
.invisible, .inv {visibility: hidden}

/* Content (posts or archives) */
.archive-title {font-size: 24px; margin-bottom: 8px; padding-top: 12px; border-top: solid 1px #ccc; line-height: 1}
.excerpt {font-size: 15px; line-height: 1.3; margin-bottom: 13px}
.news-meta {color: #999; font-size: 12.5px}
.news-meta a, .news-meta a:visited {color: #66d; padding: 0 2px; font-style: normal}
.date-posted {float: right; font-weight: 400; font-size: 12px; color: #999; padding: 3px 0 0 12px; }
.byline {font-size: 12px; color:#999; margin: 0 0 24px 18px}
#index, #comments, #search-results, .not-found, .ctr640 {max-width: 640px; margin-left: auto; margin-right: auto}

/* Blog Posts */
.blog #post-content {padding: 20px 0 1px; font-size: 16px}
#main-text h3 {text-align: center; margin-bottom: 20px}
#main-text, #iyg {padding-bottom: 7px; line-height: 1.75}
#pretitle {text-align:center; margin:0 0 17px; font-size:14px; color:#bba}
#pretitle b, #pretitle i {border-bottom: solid 1px #e4e4e0; padding: 0 5px 3px}

h2 small {font-size: 18px}
#post-by {text-align: center; font-size: 13px; font-style: italic; padding: 0 0 20px}
#post-by a, #post-by a:visited {color: #88d}
#index #prev-next, .archive #prev-next {border-top: 1px solid #ccc}
.tp-art #prev-next {border-top: none}
#prev-next {padding: 10px 0; font-style: italic; font-size: 14px}
#prev {padding: 0 9px 0 22px; float: left; position: relative; max-width: 97%}
#next {padding: 0 22px 0 9px; float: right; position: relative; max-width: 95%}
#prev:after {left: 0; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-right-color: #bbb; border-width: 5px 15px 5px 0; margin-top: -5px}
#next:after {right: 0; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-left-color: #bbb; border-width: 5px 0 5px 15px; margin-top: -5px}

/* RD */
.opt-cond li span {display: inline-block; width: 20px; text-indent: 0}
.opt-cond li div {text-indent: 0}
.rsrc-info {margin: 0 0 8px 6em; font-size: 15px}
.rsrc-info label {margin-left: -6em; color: #888; float: left; clear: both}
.rdview a:hover {text-decoration: underline}
.rdcat {font-size: 12px; color: #999; margin: -4px 0 2px}

[t-tip] {position: relative; text-indent: 0; border-bottom: 1px dashed #999; cursor: help}
[t-tip]:before {visibility: hidden; opacity: 0; transition: all .05s 0s; content: attr(t-tip); position: absolute; z-index: 9999; bottom: calc(100% + 10px); width: 250px; padding: 6px 9px; background: #2e3192; color: #fff; font: normal bold 14px Lato, Arial; box-shadow: 0 0 8px 5px #fff; border-radius: 5px}
[t-tip]:after {visibility: hidden; opacity: 0; transition: all .05s 0s; content: ""; position: absolute; z-index: 9999; bottom: 10px; left: 20px; border: solid 10px transparent; border-top-color: #2e3192}
[t-tip]:hover:before, [t-tip]:hover:after {visibility: visible; opacity: 1}

/* My Account */
.donations {border: solid 1px #ddd; background: #ddd; border-spacing: 1px; font-size: 13px; width: 100%; max-width: 500px}
.donations th,
.donations td {padding: 1px 5px; background: #fff}
.donations tr:nth-child(odd) td {background:#fcfcfc;}
.donations th {
	font-size: 18px;
	background: #eee
}
.donations tr td:nth-child(2),
.donations tr th:nth-child(2) {
	text-align: right;
}
.donations tr td:nth-child(2){
	font-size: 16px;
}

.donated div {margin: 0 0 6px 7.7em}
.donated label {margin-left: -7.7em; float: left; clear: both}
.tinyBtn, .tinyBtn:visited {background: #f8f8f8; border: solid 1px #e5e5e5; border-radius: 3px; padding: 0 7px 2px; font-size: 12px; font-weight: 400; color: #66c}
.tinyBtn:hover {background: #ddf; border-color: #ddf; color: #00a}

/******* SMALLER SCREENS ********/

@media all and (max-width: 1099px) {
	.don-date {height: 33px}
	.top-menu>ul li {text-transform: none}
}

.show960 {
	display: none;
}

@media all and (max-width: 959px) {
	.show960 {
		display: inherit;
	}

	.top-menu {
		position: relative;
		height: 51px;
	}
	.top-menu:not(:first-of-type) {
		height: 0;
	}

	#site-name {
		display: block;
		position: absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		line-height: 1.2;
		margin: 9px 54px 0;
		max-height: 42px;
		font-size: 14px;
		letter-spacing: .5px;
		text-align: center;
	}

	#site-name nobr {
		text-transform: uppercase;
	}

	#mBtn {display: block}
	#asde, #search, .hide960 {display: none}
	.top-menu>ul {display: none;position: absolute; top: 100%; right: 0; margin: 0; min-width: 280px; background: #fff; border: solid #ddd; border-width: 1px 0 2px 3px; font-size: 18px; z-index: 999}
	.top-menu>ul a, .top-menu>ul a:visited {color: #444}
	.top-menu>ul > li, .top-menu>ul a#login {text-transform: uppercase}
	.top-menu>ul li li:not(.m-search) {white-space: normal; border-bottom: solid 1px #ddd}
	.top-menu>ul li.menu > a {border-bottom: solid 1px #ddd}
	.top-menu>ul li.menu a {padding: 9px 16px; display: block}
	.top-menu>ul li.menu ul {position: relative; display: block; border: none}
	.top-menu>ul li.menu li a {padding: 9px 9px 9px 27px}
	.top-menu>ul li.user-menu li a {padding-left: 12px;}
	.top-menu>ul li.user-menu {
		border-top: 3px solid #ddd;	
	}
	.top-menu>ul li.hidden.menu {display: block;}
	.top-menu>ul li.menu.rt0 ul {top: auto; right: 0}
	.top-menu>ul .user-menu {padding: 0; margin: 0;}
	.top-menu>ul a#login {padding: 12px; display: block}
	.cards-3 {padding-bottom: 20px}
	.card {display: block; width: 396px; height: 288px; margin: 0 auto 50px}
	.card-img {height: 158px; margin: 0 0 7px}
	.card .pretitle, .card .subtitle {font-size: 18px}
	.card-title {font-size: 33px; margin: 0 13px 0 20px}
	.subscribe {margin: 20px 0 30px}
	#footer-vision {font-size: 18px}
	#footer-pt2 {max-width: 500px; min-width: 35%}
	#footer-menus {font-size: 14px; font-weight: normal}
	.gallery-post-wrap {width: 50.5%; height: 27.5vw}
	.gallery-post-wrap.post1 {height: 54.99vw; width: 49.5%}
	.gallery-post-wrap.post2 {padding: 0 0 .5% 1%}
	.gallery-post-wrap.post3 {padding: .5% 0 0 1%}
	.gallery-post-wrap.post4 {padding: 1% 0 0 0; width: 49.5%}
	.gallery-post-wrap.post5 {padding: 1% 0 0 1%}
	.gallery-post-title {font-size: 2.85vw}
	.title-below .subtitle {font-size: 22px; margin-top: 7px}
	h1, .title {font-size: 35px} h2 {font-size: 30px}
	.pullout.left, .pullout.right {width: 100%; text-align: center; float: none; margin: 20px 0}
	.img.r.breakout {margin-right: -30px}
	.img.l.breakout {margin-left: -30px}
	.img.c.breakout {margin-left: -30px; width: 760px; max-width: 760px}
	.bios {display: block; max-width: 600px}
	.bios.one-col {max-width: 700px}
}
@media all and (max-width: 799px) {
	#footer-vision {display: none}
	#footer-menus {-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 200px; margin: 0 auto}
	#footer-menu-2 {margin: 0}
	#footer-menus b {margin-left: -10px}
	.fw > .title {font-size: 30px; color: #000; margin: 5vw 0; padding: 0 30px; position: static; text-shadow: none; text-transform: none}
	.fw .subtitle {font-size: 20px; color: #555; margin-top: 7px}
	h1, .title {font-size: 30px} h2 {font-size: 26px} h3 {font-size: 22px} h4 {font-size: 18px}
	.img.r.breakout, .img.l.breakout, .img.c.breakout {margin: 1.2em auto; float: none; min-width: 280px; max-width: 100%}
	.postmeta .share-btns {position: static; margin: 9px 0 0 100px}
	.lt800-ctr {text-align: center !important}
}
@media all and (max-width: 699px) {
	.fw > .title {font-size: 27px}
	.post-body {font-size: 21px}
	.tp .post-body, .ar .post-body {font-size: 16px}
	p {color: #000}
	.summary, .pullout {font-size: 27px}
	.summary {padding-bottom: 30px; margin-bottom: 30px}
	.bios.one-col .pic {width: 102px}
	.bios.one-col p {margin-left: 125px; font-size: 15px}
	.tp-art figure {width: 100% !important; float: none !important; margin: 0 !important}
	.tp-art .auth2 {padding-bottom: 10px}
	.archive-title {font-size: 20px}
	.excerpt {font-size: 13px}
}
@media all and (max-width: 599px) {
	#footer-pt2 {display: none}
	.gallery-post-wrap {width: 360px !important; margin: 20px auto; float: none; height: 198px; padding: 0 !important}
	.gallery-post-wrap.post1 {width: 100% !important; height: 110vw; margin: 0 0 30px}
	.gallery-post-title {font-size: 20.5px}
	.post1 .gallery-post-title {font-size: 5.7vw}
	.feat {font-size: 22px}
	.bios.one-col p {margin: 0 0 1.2em 0}
	.bios.one-col .pic {margin: 0 20px 15px 0}
	.twoBtns a {float: none; display: block; max-width: 200px; margin: 20px auto}
	.subscribe {font-size: 16px}
	.hide600 {display: none}
	.lt600-ctr {text-align: center}
	.img.r, .img.l {margin: 1.2em auto; float: none; min-width: 280px; max-width: 100%}
}
@media all and (max-width: 479px) {
	h1, .title, .fw > .title {font-size: 24px} h2 {font-size: 22px} h3 {font-size: 20px}
	.fw .subtitle {font-size: 19px}
	.post-body, .home .post-body, article .title {padding: 0 6% !important}
	.post-body {font-size: 19px}
	.tp .post-body, .ar .post-body {font-size: 14px}
	.summary, .pullout {font-size: 24px}
	.summary {padding-bottom: 28px; margin-bottom: 28px}
	.gallery-post-wrap {width: 300px !important; margin: 10px auto; height: 166px}
	.gallery-post-wrap.post1 {width: 100% !important; height: 110vw; margin: 0 0 30px}
	.gallery-post-title {font-size: 17px}
	.feat {font-size: 20px}
	.cards-3 {padding: 5px 0 20px}
	.card {width: 300px; height: 218px}
	.card-img {height: 120px; margin: 0 0 6px}
	.card .pretitle, .card .subtitle {font-size: 13.6px}
	.card-title {font-size: 25px; margin: 0 11px 0 15px}
	.subscribe .pretitle {margin: 0 15px 6px}
	.hide480 {display: none}
	#site-name {letter-spacing: normal}
}
@media all and (max-width: 399px) {
	.overlay > .title {font-size: 24px}
	.overlay .subtitle {font-size: 18px}
	.summary, .pullout {font-size: 22px}
	.summary {padding-bottom: 24px; margin-bottom: 24px}
	.gallery-post-wrap.post1 {margin: 0 0 15px}
	.feat {font-size: 18px}
	.grayspace-section, .fw-section {padding: 30px 0}
	.grayspace-section.arrow-top-down {padding-top: 70px; margin-top: 45px}
	.tp-art {padding: 0 20px}
	.subscribe {padding-top: 0}
	.subscribe h2 {font-size: 24px}
	.card {margin: 0 auto 30px}
	.bios p {margin: 0 0 1.2em 0}
	.bios .pic, .tp .pic {margin: 0 20px 15px 0}
	.tp .pic.r {margin: 0 0 15px 20px}
	.lt400-small {font-size: 80%}
	#sp-logos img {max-width: 260px; padding: 15px 10px !important}
}

/* Admin */

#user_switching_switch_to {list-style: none; display: inline-block; margin: 0; font-size: 11px}
#user_switching_switch_on {margin: 3px 0 4px; font-size: 14px; text-align: center}
a.x, a.ed {display: inline-block; width: 12px; height: 12px; background: url(/img/edit.png) top/12px no-repeat; margin: 3px}
a.x {background-image: url(/img/delete.png)}

/* BUTTONS */
.btn, .btn:visited {
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	background: #ee6B4f;
	border-color: #ee6B4f;
	padding: 4px 20px;
	cursor: pointer;
}

.btn:focus {
	color: #fff;
}

.btn:hover {
	color: #fff;
	text-decoration: none;
	background: #f86;
	text-shadow: 0 0 5px rgba(0,0,0,.3);
}

.btn:disabled {
	background: #eee;
	border-color: #ccc;
	color: #bbb;
	cursor: default;
}

.btn:disabled:hover {
	background: #eee;
	text-shadow: none;
}

/* Gray Button */
.btn.gray, .btn.gray:visited {
	font-weight: 300; 
	color: #777;
	background: #fff;
	border: solid 1px #999;
}

.btn.gray:hover {
	background: #b6cdff;
	color: #263db0;
	text-shadow: none;
}

/* Green Button */
.btn.btn-green, .btn.btn-green:visited {
	background: #15cfa5;
}

.btn.btn-green:hover {
	background: #28eec1;
}

/* Blue Button */
.btn.btn-blue, .btn.btn-blue:visited {
	background: #263d90;
}

.btn.btn-blue:hover {
	background: #4d68ca;
}

/* Alternatve hover-state */
.btn.green-hover:hover {
	background: #15cfa5;
	color: #fff;
}

.btn.btn-huge {
	padding: 8px 25px;
	font-size: 20px;
}

/* Menu button overrides */
.top-menu .btn {
	display: inline-block;
	margin: 10px 8px;
	padding: 2px 14px;
}

.page-numbers,
.aBtns a, .aBtns a:visited, .aBtn, aBtn:visited {color: #777; border: solid 1px #ddd; margin: 0 4px; padding: 2px 7px; background: #fff; line-height: 30px}
a.cBtn, a.cBtn:visited {float: right; font-size: 11px; background:#bab8ff; color:#fff; padding: 1px 5px !important; border-radius: 4px; font-weight: bold}
.page-numbers:hover, .page-numbers:active,
.aBtns a:hover, .aBtns a:active, .aBtn:hover, .aBtn:active {background: #eee; text-decoration: none}
.aBtns a.disabled:hover, .aBtns a.disabled:active, .aBtn.disabled:hover, .aBtn.disabled:active {background: none; text-decoration: none}
.btnDisabled {font-size: 16px; line-height: 1.2; color: #777; padding: 5px 14px; background: #f5f5ff; border: solid 2px #dde; border-radius: 20px}
.hum {display: inline-block; background: #fcfcfc; border: solid 1px #aaa; width: 20px; height: 20px; margin: -4px 5px 0 0; vertical-align: middle}
.emBtn, .emBtn:visited {cursor: pointer; border: solid 1px #ddd; border-radius: 8px; padding: 2px 7px; color: #555}
.emBtn:hover, .emBtn:active {background: #eee; text-decoration: none !important}

/* MISC */

.sans, figcaption, .title {font-family: Lato,Roboto,Helvetica,sans-serif}
.serif, .ar .title, .tp .title:not(.sans) {font-family: Merriweather,Georgia,serif}
.i {font-style: italic} .notI, .i i {font-style: normal}
.b {font-weight: bold} .notB, .fw400 {font-weight: normal !important}
.thin, .fw300 {font-weight: 300} .thin b, .thin strong, .fw600 {font-weight: 600}
.u {border-bottom: solid 1px #999; padding-bottom: 2px}
.q:before {content: '“'} .q:after {content: '”'}
.smcaps {font-variant: small-caps}
.upper, .uppercase {text-transform: uppercase}
.not-upper, .normal-case {text-transform: none !important}
.spread {letter-spacing: .4em}
.loose {letter-spacing: .05em}
.hilite {background: yellow; border-radius: 4px}
.hoversaturate:hover {filter: saturate(250%)}
.qt:before, .qt:after {content: '"'}
.clear {clear: both}
.clear-after:after, .gallery-5post:after, .postmeta:after {content: ""; display: block; clear: both}
.ctr, .alignC, .c, .hr33 {text-align: center}
.ctrblock, .ctr-block {margin-left: auto; margin-right: auto}
.ib {display: inline-block}
.il, .inline {display: inline}
.vaBot {vertical-align: bottom}
.floatL {float: left} .floatR {float: right}
.alignL, .l {text-align: left} .alignR, .r {text-align: right}
.justify, .j, .j960 {text-align: justify} .justify.last, .j.last {text-align-last: justify}
.v-resp {height: 43px} @media all and (max-width: 1440px) { .v-resp {height: 3vw} }
.ptr {cursor: pointer} .txt {cursor: text}
.no-border {border: none}
.noselect, .top-menu>ul a { -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none}
.nobul {list-style-type: none}
.r-info {position: relative; margin: 2px 13px 0 6px}
.r-info:after {position: absolute; left: 0; top:3px; content: " "; width: 16px; height: 16px; background: #ddd url(/img/info64wh.png) top/contain no-repeat; border-radius: 50%}

.page-numbers.current, .page-numbers.current:hover, .page-numbers.current:active {background: #eee; font-weight: bold}
.page-numbers.dots, .page-numbers.dots:hover, .page-numbers.dots:active {background: none; padding: 0; border: none}
.blueblock {display: block; border: solid 3px #ced1ff; background: #ced1ff; padding: 0 10px 5px}
.msg, message, .notice, .warning, .error, .alert, .update, .bbp-template-notice {background-color: #eef; border: 2px solid #ccd; padding: 4px 10px 6px; margin: 10px 0; border-radius: 8px}
.bbp-template-notice p {margin: 0}
.warning, .error, .alert {background-color: #ff6; border-color: #cc3}
.not-published{position:absolute; top:0; left:0; margin:5px; padding:2px 10px 0; z-index:99999;}
ul.msg {padding-left: 1.5em}
.helpbox {background: #f8f8f8; font-weight: normal; border: solid 1px #ddd; padding: 10px 15px}
.graybox {background: #eee; padding: 1px 5px 10px 15px}
.blackbar {background: #000; color: #fff; font: bold 16px Lato, sans-serif; padding: 8px; text-align: center}
#reqCon button {font: bold 14px Lato, sans-serif; color: #555; border-width: 2px; border-radius: 15px; padding: 2px 14px}

#vidBG, .vidBG {display: none; position: fixed; top:0;bottom:0;left:0;right:0; background: rgba(0,0,0,.5); z-index:1111; padding: 15px 20px}
#vidbox, .vidbox {border: solid 1px #000; max-width: 873px; margin: 0 auto; z-index:1112}
#vidbox div, .vidbox div {position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%; background: #fff}
#vidbox iframe, .vidbox iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%}

.lbox-mask {background: rgba(0,0,0,.7); position: fixed; left:0;right:0;top:0;bottom:0; z-index: 10; line-height: 100vh; text-align: center}
.lbox {display: inline-block; vertical-align: middle; text-align: left; max-height: 100%; overflow-y: auto; background: #fff; margin: 15px 15px 35px; padding: 15px 12px 5px 20px}

.ans {clear: both; margin-bottom: 13px}
.ans div {margin: 0 0 9px 28px}
.ans input[type="checkbox"], .od-radio {float: left; width: 20px; height: 20px; margin: 0 0 20px !important}
#join .ans label {
	font-weight: normal;
	cursor: pointer;
}
.ans .revealable {display: none}
.ans input[type="checkbox"]:checked ~ .revealable {display: block}
.spin {height: 50px; width: 50px; vertical-align: middle; margin: -5px 0 0 10px; display:none}

div.flash {background: #f8f8f8; -webkit-animation: yflash 3s; animation: yflash 3s}
@-webkit-keyframes yflash { from {background-color: #ff0} to {background-color: #f8f8f8} }
@keyframes yflash { from {background-color: #ff0} to {background-color: #f8f8f8} }

.progress-text {float: right; padding-left: 8px; font-size: 12px; line-height: 12px; color: #777}
.progress-bar {background: #e8e8e8; overflow: hidden; border-radius: 12px}
.progress {height: 12px; background: #ef6b4f; border-radius: 12px}

.b-top {border-top: 1px solid #ccc}
.b-bot {border-bottom: 1px solid #ccc}
.rad0 {border-radius: 0} .rad5 {border-radius: 5px} .rad10 {border-radius: 10px}
.rad15 {border-radius: 15px} .rad20 {border-radius: 20px} .circle, .rad50 {border-radius: 50%} 
ul.sq {list-style-type: square}
.arrows { list-style: none; margin-left:0}
.arrows > li {padding-left: 18px; position: relative}
.arrows > li:before {position: absolute; left: 0; content: "\0027A1"; color: #55b}

/* margins, padding, width; font size & color */

.mw200 {max-width: 200px} .mw300 {max-width: 300px} .mw350 {max-width: 350px} .mw400 {max-width: 400px} .mw450 {max-width: 450px}
.mw500 {max-width: 500px} .mw550 {max-width: 550px} .mw600, .bbp-template-notice {max-width: 600px} .noMW {max-width: none !important}
.mh300 {min-height: 300px}
.mt0 {margin-top: 0 !important} .mt3 {margin-top: 3px !important} .mt5 {margin-top: 5px !important}
.mt10 {margin-top: 10px !important} .mt15 {margin-top: 15px !important}
.mt20 {margin-top: 20px !important} .mt30 {margin-top: 30px !important} .mt50 {margin-top: 50px !important}
.mb0 {margin-bottom: 0 !important} .mb3 {margin-bottom: 3px !important} .mb5 {margin-bottom: 5px !important}
.mb10 {margin-bottom: 10px !important} .mb15 {margin-bottom: 15px !important}
.mb20 {margin-bottom: 20px !important} .mb30 {margin-bottom: 30px !important} .mb50 {margin-bottom: 50px !important}
.mb-50 {margin-bottom: -50px !important}
.mr0 {margin-right: 0 !important} .mr5 {margin-right: 5px !important}
.mr10 {margin-right: 10px !important} .mr15 {margin-right: 15px !important}
.mr20 {margin-right: 20px !important} .mr30 {margin-right: 30px !important}
.ml0 {margin-left: 0 !important} .ml5 {margin-left: 5px !important}
.ml10 {margin-left: 10px !important} .ml15 {margin-left: 15px !important}
.ml20 {margin-left: 20px !important} .ml30 {margin-left: 30px !important}
.od15 {text-indent: -15px} .od20 {text-indent: -20px} .od30 {text-indent: -30px}
.p0, .p0 img {padding: 0 !important} .p2 {padding: 2px} .p5 {padding: 5px} .p8 {padding: 8px} .p10 {padding: 10px}
.p20  {padding: 20px;} .p30  {padding: 30px;} .p50  {padding: 50px;}
.pt0 {padding-top: 0 !important} .pt5 {padding-top: 5px !important}
.pt10 {padding-top: 10px !important} .pt15 {padding-top: 15px !important}
.pt20 {padding-top: 20px !important} .pt30 {padding-top: 30px !important} .pt50 {padding-top: 50px !important}
.pb0 {padding-bottom: 0 !important} .pb5 {padding-bottom: 5px !important}
.pb10 {padding-bottom: 10px !important} .pb15 {padding-bottom: 15px !important}
.pb20 {padding-bottom: 20px !important} .pb30 {padding-bottom: 30px !important} .pb50 {padding-bottom: 50px !important}
.pr0 {padding-right: 0 !important} .pr5 {padding-right: 5px !important}
.pr10 {padding-right: 10px !important} .pr15 {padding-right: 15px !important}
.pr20 {padding-right: 20px !important} .pr30 {padding-right: 30px !important}
.pl0 {padding-left: 0 !important} .pl5 {padding-left: 5px !important}
.pl10 {padding-left: 10px !important} .pl15 {padding-left: 15px !important}
.pl20 {padding-left: 20px !important} .pl30 {padding-left: 30px !important}

.mbli5 li {margin-bottom: 5px} .mbli10 li {margin-bottom: 10px}
.ml1em {margin-left: 1em !important} .ml2em {margin-left: 2em !important}
.mlr20 {margin-left: 20px; margin-right: 20px} .mlr30 {margin-left: 30px; margin-right: 30px}
.w25, .hr25 {width: 25%} .w33, .hr33 {width: 33%} .w50 {width: 50%} .w75 {width: 75%} .w100 {width: 100%}

small, .small {font-size: 75%} .no-small small, .no-small .small, .size100p {font-size: 100%}
big {font-size: 125%} .size90p {font-size: 90%} .size10, .sm {font-size: 10px} .tiny {font-size: 8px}
.size11 {font-size: 11px} .size12 {font-size: 12px} .size13 {font-size: 13px} .size14 {font-size: 14px} .size15 {font-size: 15px}
.size16 {font-size: 16px} .size18 {font-size: 18px} .size20 {font-size: 20px} .size22 {font-size: 22px} .size24 {font-size: 24px}
.lh1 {line-height: 1} .lh12 {line-height: 1.2} .lh13 {line-height: 1.3} .lh15 {line-height: 1.5} .lh17 {line-height: 1.7}
.lh2 {line-height: 2} .lh25 {line-height: 2.5} .lhi {line-height: inherit}

.gray5 {color: #555 !important} .gray7 {color: #777 !important} .gray9 {color: #999 !important} .grayB {color: #bbb !important}
.red {color: red !important} .green {color: #096 !important} .white {color: #fff !important} .black {color: #000 !important}
.xp {color: rgba(0,0,0,0.6)} .blue {color: #2e3192 !important} .paleblue {color: #5e6192 !important} .fff {color: #fff}
.bgFFF {background: #fff} .bgEEE {background: #eee} .bgDDD {background: #ddd} .bgCCC {background: #ccc}
.bgBlue {background: #2e3192} .bgGreen {background: #15cfa5} .bgOrange {background: #ef6b4f}

@media all and (max-width: 959px) {
	.j960 {text-align: left}
}
@media all and (max-width: 479px) {
	.lt480-ctr {text-align: center}
	.lt480-mr0 {margin-right: 0 !important} .lt480-ml0 {margin-left: 0 !important}
	.lt480-pr0 {padding-right: 0 !important} .lt480-pl0 {padding-left: 0 !important} 
}

/* Donation Form */
#join input, #join select {max-width: none; padding: 6px; margin: 2px 0 8px}
#join label {display: block; font-weight: bold; font-size: 90%; margin-top: 5px}
#join label.size100p {font-size: 100%}
	
#footer-donate-btn {visibility: hidden}
#donation-form input, #donation-form select {max-width: none; padding: 6px; margin: 2px 0 8px}
#donation-form label {display: block; font-weight: bold; font-size: 90%; margin-top: 5px}
#donation-form label.size100p {font-size: 100%}

#payMo input {border-color: #0b9; background: #eee}
#payMo input:checked {background: #0b9}
#payMo .ib {display: inline-block; margin-top: 8px; min-width: 100px}
#pay1t .ib {display: inline-block; min-width: 88px}
#pay1t label, #payMo label {
	font-size: 100%;
	font-weight: normal;
}
mo {font-style: normal; color: rgba(0,0,0,.5); font-size: 90%}
#pay1t select, #payMo select {width: 70px; padding: 2px 14px 2px 7px; border-color: #ccc; color: #bbb}
#nopay-button.btn {border-color: #ddd; color: #777; background: #eee}
#nopay-button.btn:hover {text-shadow: none; color: #333; background: #ddd}
button#nopay-button.btn:disabled {color: #bbb; background: #f8f8f8}

#cc-wrap {border: solid 1px #ccc; padding: 7px; margin: 7px 0 25px; max-width: 360px}
label#cc-label {font-size: 13px; font-weight: 400}
#card-errors {height: 0; padding: 0 10px; margin-top: 0; background: #ff8; font-size: 15px; line-height: 1; transition: all .3s}
.StripeElement--invalid ~ #card-errors, #card-errors.show {height: auto; padding: 7px 10px; margin-top: 7px}
.adjacentFlds {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between}
.adjacentFlds .fld {width: 100%; max-width: calc(50% - 5px)}
.height0 {padding-top: 0; padding-bottom: 0; max-height: 0; overflow: hidden; transition: all 0.4s}
@media all and (max-width: 499px) { .adjacentFlds .fld {max-width: 100%} }
@media all and (max-width: 359px) { #cc-wrap {padding: 7px 3px 7px 6px; margin: 10px -6% 25px -3%} }

.om-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.om-list > a {
	transition: all 100ms;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 4px;
	width: 234px;
	height: 100px;
	margin-bottom: 20px;
	margin-left: 10px;
	margin-right: 10px;

	display:flex;
	align-items:center;
	justify-content:center;
}

.om-list > a:hover {
	transform: translateY(-3px);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.08);
}

.om-list > a > img {
	max-height: 100%;
}

/* avoid regular underline and create useful outline/hover effect */
a.block {
	display: block;
	text-decoration: none;
	border: 2px solid #263db0;
	padding: 0;
	margin: 0;
}

a.block img {
	display: block;
}

a.block:hover img {
	opacity: 0.8;
}

#perks label {
	font-weight: normal;
}
#perks input {
	margin-right: 0.25em;
}