/* mjriver.ca theme.css */
/*
	yellow: var(--theme-blue);
	green: #40aa67;
*/
:root {
	--theme-blue: #1289a7;
	--theme-blue-light: #11aebf;
	--theme-green: #69be56;
	--theme-yellow: #f1c53e;
	--theme-orange: #f28822;
	--theme-brown: #a56541;
	--font: open-sans, sans-serif;
}
@media (min-width: 0px) {
	body {
		font-family: var(--font);
	}
	h1, h2, h3, h4, h5, h6, 
	strong {
		font-weight: 700;
	}
	h2 {
		font-size: 3rem;
		padding: 24px 0 0 0;
	}
	p, td, a, span, div, li, article, section {
		font-weight: 400;
	}
	.btn-primary {
		background: var(--theme-yellow);
		border-color: var(--theme-yellow);
		color: #333;
		font-weight: 700;
		text-transform: none;
	}
	.btn-primary:active,
	.btn-primary:focus,
	.btn-primary:hover {
		background: var(--theme-orange);
		border-color: var(--theme-orange);
		color: #222;
	}
	.btn-secondary {
		font-size: inherit;
		background-color: var(--theme-blue);
		border: 1px solid var(--theme-blue-light);
		color: #fff;
		padding: 8px 20px;
	}
	.btn-secondary:hover {
		background: var(--theme-blue-light);
		border: 1px solid var(--theme-blue-light);
		color: #fff;
	}
	.btn-lg {
		font-size: 2.5rem;
		padding: 20px 44px;
	}
	.btn-ui {
		padding: 12px 8px;
	}
	.btn-more {
		color: #40aa67;
		font-size: 2rem;
		font-weight: 700;
		padding: 12px 0;
	}
	.btn-more:focus,
	.btn-more:hover {
		color: #888;
		text-decoration: none;
	}
		.btn-more .fas {
			font-size: 80%;
		}
	.btn-block {
		display: block;
		float: left;
		width: 100%;
	}
	.bg-green {
		background: var(--theme-green);
		color: #fff;
	}
	.list-group-item a:hover {
		color: #40aa67;
	}
	#topbar {
		background-color: #fff;
		color: #333;
	}
	.identity {
		width: 200px;
	}
		.identity-link {
			align-items: center;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			width: 100%;
		}
			.identity-img {
				float: left;
				height: 60px;
				margin: 0;
				padding: 0;
				width: auto;
				max-width: none;
			}
			.identity-title {
				color: #222;
				font-size: 1.5rem;
				padding-left: 8px;
				padding-top: 24px;
			}
				.identity-title-text {
					padding-bottom: 3px;
				}
				.identity-title-text,
				.identity-title-desc {
					font-weight: 400;
				}
	.mobile-action {
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-top: 10px;
	}
		.mobile-action-trigger {
			font-size: 18px;
			margin-bottom: 8px;
		}
	.search-toggle-lg-wrap {
		display: none;
	}
	/* correct searchbar height on .show */ 
	#searchbar.show {
		height: 64px;
	}
	#searchbar.show .search-wrap form {
		margin-top: 20px;
	}
	main {
		background: #fff;
		min-height: 60vh;
	}
	main .pan {
		padding: 0 12px;
	}
	/* banner */
	.h-banner,
	.h-banner-inner {
		height: 320px;
	}
	.h-banner {
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		margin-top: 0;
		overflow: hidden;
		position: relative;
	}
		.h-banner-inner {
			align-items: flex-end;
			display: flex;
			flex-direction: row;
			padding: 0;
			position: relative;
		}
			.h-banner-content {
				padding: 0 20px 20px 32px;
				width: 100%;
			}
				.h-banner-content-caption h1 {
					color: #fff;
					font-size: 2.5rem;
					font-weight: 900;
					line-height: 1.2;
					text-shadow: 2px 2px 8px #000;
					width: 100%;
				}

	.alert-panel {
		background: var(--theme-blue);
	}
		.alert-panel .pan {
			text-align: center;
		}
			.alert {
				color: #333;
				display: inline-block;
				padding: 44px;
				width: 100%;
			}
			.alert:hover {
				color: #000;
			}
				.alert h2 {
					font-size: 4rem;
				}

	.nav-list {
		display: flex;
		flex-direction: column;
		float: left;
		padding: 20px 0;
		width: 100%;
	}
		.nav-list-item {
			color: #333;
			font-size: 2rem;
			padding: 6px 8px;
		}
		.nav-list-item:hover {
			background: var(--theme-blue);
			color: #333;
			text-decoration: none;
		}
	.body-home .featured-menu {
		float: left;
		width: 100%;
	}
	.body-home .featured-menu .nav-list {
		padding-right: 32px;
	}
	.body-home .featured-menu .nav-list-item {
		border: 4px dotted #fff;
		margin-bottom: 4px;
		padding: 4px 8px;
	}
	.body-home .featured-menu .nav-list-item:hover {
		background: unset;
		border-color: var(--theme-blue-light);
		color: var(--theme-blue);
	}

	/* list without cards */
	.list {
		display: block;
		float: left;
		padding: 8px 0 44px 0;
		width: 100%;
	}	
		.list-item {
			padding: 32px 24px;
		}
			.list-item-heading,
			.list-item-heading a {
				color: #333;
				font-size: 2.6rem;
				font-weight: 700;
			}
				.list-item-heading a .fas {
					font-size: 80%;
					opacity: 0.8;
				}
			.list-item-desc {
				font-size: 1.75rem;
				line-height: 1.6;
			}
			.list-item button.btn-ui.btn-lg.btn-primary.collapse-button.collapsed,
			.list-item button.btn-ui.btn-lg.btn-primary.collapse-button {
				border: 0;
				font-size: 1.75rem;
				margin-top: 8px;
				padding: 8px 20px 8px 28px;
			}
			.list-item-body {
				background: #eee;
				margin: 24px -24px;
				padding: 16px 20px;
			}
			.list-item-body p,
			.list-item-body li,
			.list-item-body td {
				font-size: 1.75rem;
				line-height: 1.6;
			}
			.list-item-body table {
				width: 100%;
				max-width: 100%;
			}
			.list-item-body td {
				padding: 4px;
			}

	/* cards for list pages */
	.cards {
		padding: 24px 0;
	}
	.card {
		color: #333;
		display: flex;
		flex-direction: column;
		margin: 0 0 8px 0;
		padding: 0;
	}
	.card:hover {
		text-decoration: none;
	}
	.list-view .list-group-item .card:hover {
		background: #fff;
	}
		.card-poster { /* first flex element */
			background: #eee;
			color: #555;
			display: block;
			float: left;
			margin: 0;
			min-height: 12px;
			padding: 0;
			width: 100%;
		}
		.list-view .list-group-item .card.noimg:hover .card-poster {
			background: #40aa67;
			color: #fff;
		}
			.card-poster span {
				display: block;
				float: left;
				width: 100%;
			}
		.card.noimg .card-details,
		.card-details {
			display: block;
			float: left;
			font-size: 1.75rem;
			min-height: 12px;
			margin: 0;
			padding: 12px 16px;
			position: relative;
			width: 100%;
		}
		.card-details .card-date {
			font-weight: 700;
			padding: 0;
		}
		.card-details .card-time {
			font-weight: 400;
		}
		.card-details-text {
			font-size: 80%;
		}
	.card-content { /* second flex element */
		padding: 12px 16px;
	}
		.card-heading {
			font-size: 2.4rem;
		}
		.card-desc {
			color: #555;
			font-size: 1.75rem;
		}

	/* home lists */
	.home-list .list-group-item {
		margin: 0;
		padding: 0;
	}
	.card.home-list-card {
		flex-direction: column;
		background: none;
		border: 0;
		padding: 8px 0;
	}
		.card.home-list-card .card-details {
			padding: 0;
		}
		.card.home-list-card .card-details-heading {
			background: var(--theme-blue-light);
			color: #fff;
			font-size: 1.25rem;
			padding: 5px 10px;
			width: auto;
		}
		.card.home-list-card .card-content {
			padding: 0;
		}
			.card.home-list-card .card-content .card-heading {
				font-size: 2.2rem;
				padding: 6px 0 0 0;
			}
			.card.home-list-card .card-content .card-date { /* for articles */
				color: #999;
				font-size: 1.4rem;
				padding: 3px 0;
			}
			.card.home-list-card .card-content .card-text {
				color: #777;
			}
	/* job list overrides */
	.jobs .card.noimg {
		flex-direction: column-reverse;
	}
	.jobs .card.noimg .card-details {
		padding: 12px 16px;
		text-align: left;
	}
	.jobs .card.noimg .card-details .card-date {
		font-size: 1.75rem;
		font-weight: 400;
		line-height: 1.6;
	}
	#events,
	#news {
		padding-bottom: 24px;
	}
	#featured-menu {
		display: flex;
	}
	.home-about .pan-img {
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.home-about .pan-content {
		padding: 20px 32px 60px 24px;
	}
	.home-about .pan-content p {
		font-size: 2rem;
	}
	/* posts */
	.post {
		padding-bottom: 32px;
	}
	.post .pan {
		padding: 0 16px;
	}
	h1.page-title,
	.post-header {
		background-color: var(--theme-blue);
		color: #fff;
		font-size: 2.8rem;
		line-height: 1.2;
		margin-bottom: 0;
		padding: 44px 12px 32px 12px;
		text-align: center;
		text-shadow: 2px 2px 8px #000;
	}
	.post-desc {
		background: #eee;
		color: #777;
		font-size: 2.25rem;
		font-style: italic;
		padding: 32px 40px;
	}
	.body-has-banner .post-desc {
		background: var(--theme-green);
		color: #fff;
	}

	.post-publish {
		color: #999;
		font-size: 1.75rem;
		line-height: 1.1;
		margin: 40px 0 -20px 0;
		padding: 0 0 16px 0;
	}
	.post-img {
		float: left;
		margin: 0;
		padding: 0 0 16px 0;
		width: 100%;
		max-width: 100%;
	}
		.post-img img {
			border: 1px solid #e0e0e0;
			display: block;
			float: left;
			margin: 0;
			padding: 8px;
			width: 100%;
			max-width: 100%;
		}
	.post-body {
		padding: 24px 0;
	}
	.post-body h2 {
		color: #222;
		font-size: 3.8rem;
	}
	.post-body h2:first-child {
		padding-top: 8px;
	}
	.post-body h3 {
		color: #666;
		font-size: 2.8rem;
		padding: 24px 0 4px 0;
	}
	.post-body h4 {
		color: #555;
		font-size: 2.3rem;
	}
	.post-body h5 {
		color: #555;
		font-size: 2rem;
	}
	.post-body h6 {
		color: #555;
		font-size: 1.75rem;
		text-transform: uppercase;
	}
	.post-body p,
	.post-body ul li,
	.post-body ol li,
	.post-body td {
		font-size: 2rem;
		line-height: 1.85;
	}
	.post-body p {
		padding: 6px 0;
	}
	.post-body li {
		padding: 10px 0;
	}
	.post-body.disclaimer {
		border: 1px dashed #ccc;
		display: block;
		float: left;
		margin: 44px 0 32px 0;
		padding: 16px 24px;
		width: 100%;
	}
	.post-body.disclaimer h2 {
		color: #777;
		font-size: 2.25rem;
	}
	.post-body.disclaimer p {
		color: #555;
		font-size: 1.75rem;
	}
	.post-doc {
		float: left;
		padding: 0 0 24px 0;
		width: 100%;
	}
		.post-doc-embed {
			display: none;
		}
		.post-doc .btn {
			font-size: 1.75rem;
			font-weight: 400;
			border: 1px solid red;
		}
	.post-body table {
		width: 100%;
	}
		.post-body table tbody tr:nth-child(odd) {
			background: #eee;
		}
			.post-body table tbody tr th {
				background: #e0e0e0;
				font-size: 2rem;
				padding: 4px 6px;
			}
			.post-body table tbody tr td {
				padding: 4px 6px;
				vertical-align: top;
			}
	.gallery-item {
		padding: 6px;
	}
	.body-directory-profile .post-desc {
		font-size: 2.2rem;
		padding: 24px 0 28px 0;
	}
	/* events */
	.event-heading {
		background: #eee;
		float: left;
		padding: 0;
		width: 100%;
	}
	.event-details {
		display: flex;
		flex-direction: column;
		font-size: 2.8rem;
	}
		.event-details-item {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			line-height: 1.4;
			padding: 0 0 12px 0;
			width: 100%;
		}
		a.event-details-item {
			color: #333;
		}
		a.event-details-item:hover {
			color: #40aa67;
		}
			.event-details-item-icon {
				flex-grow: 0;
				font-size: 90%;
				padding: 6px 6px 0 0;
				text-align: center;
				width: 36px;
			}
			.event-details-item-label {
				flex-grow: 1;
			}
	.event-reg {
		margin-top: 24px;
	}
	.event-content {
		padding: 24px 0;
	}
	.event-content .pan {
		padding-bottom: 24px;
	}
	.event-desc {
		color: #666;
	}
	.event-body,
	.event-body p {
		font-size: 2rem;
		line-height: 1.8;
	}
	.event-body p {
		padding: 6px 0;
	}

	/* directory */
	.body-directory h2 {
		text-align: center;
	}
	.people-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
		.people-list-item {
			display: flex;
			flex-direction: column;
		}
		.people-list-item.noimg {
			min-height: 140px; /* 350 */
		}
		.people-list-item:hover {
			background-color: #40aa67;
		}
			.people-list-item-link {
				align-self: center;
				display: flex;
				flex-direction: column;
				min-height: 140px; /* 300 */
				width: 100%;
			}
			.noimg .people-list-item-link {
				border: 2px solid #40aa67;
				justify-content: center;
			}
				.people-list-item-heading {
					font-size: 2.2rem;
				}
				.people-list-item-photo {
					background-position: top center;
					background-repeat: no-repeat;
					background-size: cover;
					border: 1px solid #e0e0e0;
					height: 300px;
					max-height: none !important;
					margin: 0 0 12px 0;
					width: 100%;
				}
				p.people-list-item-text {
					line-height: 1.4;
					margin: 0;
					padding: 0;
				}
	/* directory profile */
	p.profile-text-desc {
		color: #555;
		font-size: 2.4rem;
	}
	.profile-photo,
	.profile-photo-img {
		width: 100%;
		max-width: 100%;
	}
	.profile-photo {
		padding-right: 0;
	}

	/* side nav */
	.sidenav {
		background: #eee;
		border: 1px solid #e0e0e0;
		margin-top: 32px;
		padding: 0 0 16px 0;
	}	
		.sidenav h4 {
			color: #777;
			font-size: 2.2rem;
			padding: 16px 24px;
		}
		.sidenav .nav {
			float: left;
			width: 100%;
		}
		.sidenav .nav .nav-item {
			font-size: 1.75rem;
			width: 100%;
		}
		.sidenav .nav .nav-item .nav-link {
			color: #777;
			float: left;
			font-size: 1.65rem;
			line-height: 1.4;
			padding: 14px 24px;
			width: 100%;
		}
		.sidenav .nav .nav-item .nav-link:hover {
			background: var(--theme-yellow);
			color: #000;
		}
			.sidenav .nav .nav-item.active .nav-link:hover,
			.sidenav .nav .nav-item.active .nav-link {
				background: var(--theme-blue);
				color: #fff;
			}
	.sidenav-item-details {
		color: inherit;
		display: inline-block;
		font-size: 80%;
		margin-bottom: 4px;
		padding: 0;
		width: auto;
	}
	.sidenav-item-label {
		color: inherit;
		display: block;
		float: left;
		width: 100%;
	}
	.body-event .sidenav-item-details {
		background: var(--theme-blue);
		color: #555;
		padding: 4px 10px;
		width: auto;
	}
	.body-article .sidenav h4,
	.body-event .sidenav h4 {
		padding-bottom: 0;
	}
	.body-event .sidenav .nav .nav-item.active .nav-link .sidenav-item-details {
		background: #fff;
		color: #555;
	}

	/* forms */
	.form label {
		font-size: 2.25rem;
		font-weight: 700;
		padding: 24px 0 0 0;
	}
	main .form input,
	main .form textarea {
		margin: 0;
	}
	main .form input:focus,
	main .form textarea:focus {
		box-shadow: 0 0 12px var(--theme-blue);
	}

	/* filter form */
	.form.filters {
		padding: 8px 16px 0 16px;
	}
	.form.filters label.filter {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		float: left;
		padding: 4px 0;
		width: 100%;
	}
		.form.filters label.filter .filter-input {
			flex-grow: 0;
			margin-right: 4px;
			position: relative;
			visibility: visible;
			width: 32px;
		}
		.form.filters label.filter .filter-text {
			flex-grow: 1;
			font-size: 1.75rem;
			font-weight: 400;
		}
	/* inline forms */
	form.form-inline {
		display: inline-block;
		width: auto;
	}
		form.form-inline .form-inline-text {
			font-size: 1.75rem;
		}
		form.form-inline .btn-inline {
			background: none;
			border: none;
			cursor: pointer;
			display: inline-block;
			font-size: inherit;
			font-weight: inherit;
			margin: 0;
			padding: 0;
			width: auto;
		}
	/* online registrations list */
	.list-group.forms {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0 44px 0;
	}
	.list-group-item dd .fas {
		font-size: 80%;
		padding: 4px;
	}
	.list-group.forms .list-group-item {
		padding: 16px 24px;
		min-width: 300px;
		max-width: 540px;
	}
	.list-group.forms .list-group-item .list-group-item-heading {
		font-size: 2.8rem;
	}
	.list-group.forms .list-group-item .list-group-item-details {
		font-size: 2rem;
	}
	.list-group.forms.list-group-item dl.details {
		color: #333;
		font-size: 1.75rem;
	}
		.list-group-item dl.details dd.desc {
			font-style: italic;
		}
		.list-group-item dl.details dd.dates {
			color: #777;
		}
	.list-group.forms .list-group-item .btn:hover {
		color: #333;
	}
	/* online registration form */
	/* form fields */
	.form-contact {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		float: left;
		width: 100%;
	}
	.form-contact label {
		padding-right: 16px;
		width: 50%;
	}
		.form-contact label input {
			width: 100%;
		}
	.form-contact label.error {
		width: 100%;
	}
	.f-group {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.f {
		background: #fbfbfb;
		border: 1px solid #bbb;
		float: left;
		margin: 12px 0;
		padding: 0 16px 12px 16px;
		width: 100%;
	}
	.f .editor-heading {
		padding-top: 20px;
	}
	.f p {
		padding: 12px 0 0 0;
	}
		.f p em {
			font-style: italic;
			color: #777;
		}
		.wg-group .wg-label:first-child,
		.field-group,
		.field-label {
			display: block;
			float: left;
			font-size: 1.75rem;
			line-height: 1.25;
			text-align: left;
			width: 100%;
		}
		.field-group {
			padding: 12px 0;
		}	
			.wg-group .wg-label:first-child,
			.field-label {
				background: none;
				border: none;
				color: #333;
				display: flex;
				flex-direction: column;
				margin: 0;
				padding: 8px 0 4px 0;
			}
			.wg-item-label {
				display: block;
				float: left;
				padding: 3px 0;
				width: 100%;	
			}
				.field-input input,
				.field-input textarea,
				.field-input select {
					border: 1px solid #ccc;
					margin: 3px 0;
					padding: 6px 10px;
					width: 100%;
				}
				.field-group-check .field-label {
					display: flex;
					flex-direction: row;
				}
				.field-group-check .field-label .field-input {
					flex-grow: 0;
					flex-shrink: 0;
					width: 30px;
				}	
					.wg-input-selector,
					.wg-label-text {
						margin-right: 4px;
					}
					.field-group-check .field-label .field-input input[type="checkbox"],
					.field-group-check .field-label .field-input input[type="radio"] {
						 height: 24px;
						 width: 24px;
					}
				.field-group-check .field-label .field-label-text {
					align-self: center;
					flex-grow: 1;
					flex-shrink: 1;
				}
					.field-group-check .field-label .field-label-text .field-label-desc {
						font-size: 80%;
						opacity: 0.8;
					}
				.field-input input:focus,
				.field-input textarea:focus,
				.field-input select:focus {
					border-color: #333;
					box-shadow: 1px 2px 8px #999;
				}
				.field-input select {
					width: 100%;
					max-width: 100%;
				}
		input[type="file"] {
			float: left;
			width: 220px;
		}
	/* contact info */
	.contact {
		float: left;
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
		.contact .contact-item {
			font-size: 1.75rem;
			line-height: 1.15;
			padding: 3px 0;
		}
			.contact .contact-item .contact-item-link {
				color: #333;
				display: flex;
				flex-direction: row;
			}
			.contact .contact-item .contact-item-link:hover {
				color: #555;
				text-decoration: none;
			}
			.contact .contact-item .contact-item-link .contact-item-icon {
				flex-grow: 0;
				padding: 0 2px;
				text-align: center;
				width: 32px;
			}
			.contact .contact-item .contact-item-link .contact-item-title {
				flex-grow: 1;
			}
			
			.contact .contact-item .contact-item-link span {
				transition: all 0.5s ease-out;
				-moz-transition: all 0.5s ease-out;
				-webkit-transition: all 0.5s ease-out;
				-o-transition: all 0.5s ease-out;
			}
			.contact .contact-item .contact-item-link:hover .contact-item-icon,
			.contact .contact-item .contact-item-link:hover .contact-item-title {
				color: #777;
			}

	/* contact page overrides */
	.contact-info {
		margin-top: 24px;
	}
		.contact-info h3 {
			font-size: 2.4rem;
			max-width: 280px;
		}
	.body-contact .contact .contact-item {
		font-size: 2rem;
	}
	.body-contact main .social {
		display: block;
		float: left;
		margin: 4px 0 12px 4px;
	}
	.body-contact .contact.social .contact-item {
		float: left;
		font-size: 3.5rem;
		margin: 6px 12px 0 0;
		width: auto;
	}

	/* sponsors */
    .sponsors {
		align-items: center;
		background: unset;
        display: flex;
        flex-direction: row;
		flex-wrap: wrap;
        float: left;
        justify-content: center;
        margin: 0;
        padding: 24px 0;
        width: 100%;
    }
        .sponsor {
			margin: 6px 0;
        }
            .sponsor-link {
				display: flex !important;
				width: 100%;
            }
                .sponsor-link img {
					display: inline-block;
                    max-width: 100%;
				}
				.sponsor h4,
				.sponsor-link h4 {
					color: var(--theme-blue);
					font-size: 2rem;
					font-weight: 400;
				}
		
	.sponsors .sponsor {
		height: auto;
		padding: 4px;
		width: auto;
	}
	.sponsors .sponsor h4,
	.sponsors .sponsor .sponsor-link {
		max-width: 100px;
	}
		.sponsors .sponsor .sponsor-link img {
			height: unset;
			max-height: none;
			max-width: 100px;
			width: unset;
		}
		.sponsors .sponsor h4,
		.sponsors .sponsor .sponsor-link h4 {
			background: #f9f9f9;
			border-radius: 8px;
			font-size: 1.25rem;
			padding: 4px 6px;
			text-align: center;
		}

	/* footer */
	.row-offcanvas-right.active .sidebar-offcanvas button.offcanvas-close {
		color: #fff;
		margin: 10px -12px 0 0;
		opacity: 0.7;
	}
	footer {
		background-color: #ebebeb;
		color: #222;
		padding: 24px 0 24px 0;
	}
	footer .pan {
		padding: 0 16px 44px 16px;
	}
	footer .form {
		padding-bottom: 0;
		padding-top: 0;
	}
	.footer-heading {
		color: #333;
	}
	.footer-heading {
		float: left;
		padding: 0 0 8px 0;
		width: 100%;
	}
	.footer-contact {
		display: flex;
		flex-direction: row;
	}
		.footer-contact-img {
			flex-grow: 0;
			flex-shrink: 0;
			width: 50px;
		}
		.footer-contact-info {
			padding-left: 8px;
		}
			.footer-contact-info h2 {
				font-size: 1.65rem;
			}
			.footer-contact-info ul li {
				font-size: 1.5rem;
			}
			.footer-contact-info .list-group {
				padding: 2px 0;
			}
			.footer-contact-info .list-group-item {
				padding: 0;
			}
			.footer-contact-info .list-group-item-link {
				display: flex;
				flex-direction: row;
				line-height: 1.3;
			}
				.footer-contact-info .list-group-item-link .list-group-item-icon {
					flex-grow: 0;
					flex-shrink: 0;
					text-align: center;
					width: 24px;
				}
				.footer-contact-info .list-group-item-link .list-group-item-title {
					flex-grow: 1;
					flex-shrink: 1;
				}
		footer .social {
			margin-top: 12px;
		}
		footer .form p {
			padding: 0;
		}
		footer .footer-donation .btn-block {
			background: var(--theme-blue-light);
			border: none;
			color: #fff;
			display: inline-block;
			float: none;
			padding: 24px 24px;
			width: auto;
		}
		footer .footer-donation .btn-block:hover {
			background: var(--theme-blue);
			border: none;
			color: #fff;
		}
	
	.sponsors {
		float: left;
		width: 100%;
	}
		.sponsor img {
			max-width: 80%;
			padding: 8px 0;
		}
	.by {
		background: #d3d3d3;
		display: block;
		float: left;
		padding: 8px 0;
		width: 100%;
	}
	.by:hover {
		background: #555;
	}
		.by a {
			color: #fff;
			display: block;
			float: right;
			font-size: 1rem;
		}
		.by a:hover {
			opacity: 0.75;
		}
}
@media (max-width: 767px) {
	.pan-img {
		min-height: 280px;
	}
	.list-item table tr {
		display: flex;
		flex-direction: column;
		float: left;
		width: 100%;
	}
	.list-item table tr:nth-child(odd) {
		background: #fff;
	}
	.list-item table tr td {
		float: left;
		padding: 4px 8px 4px 4px;
		width: auto !important;
	}
	#offcanvas {
		background: var(--theme-blue);
	}
		#offcanvas .offcanvas-nav-item {
			padding-left: 12px;
		}
		#offcanvas .offcanvas-nav-item-child {
			padding-left: 24px;
		}
}
@media (min-width: 480px) AND (max-width: 767px) {
	.profile-photo,
	.people-list-item-photo {
		margin: 0 auto 12px auto;
		height: 360px;
		width: 240px;
	}
}
@media (min-width: 540px) {
	.h-banner,
	.h-banner-inner {
		height: 440px;
	}
		.h-banner-content {
			padding: 0 40px 40px 40px;
		}
			.h-banner-content-caption h1 {
				font-size: 5rem;
			}
	.body-home .featured-menu {
		float: left;
		width: 100%;
	}
	.post-img {
		float: right;
		margin-top: 8px;
		padding: 0 12px 12px 12px;
		width: 50%;
		max-width: 50%;
	}
	.card {
		flex-direction: row;
		flex-wrap: nowrap;
	}
		.card-poster {
			flex-grow: 0;
			flex-shrink: 0;
			text-align: right;
			width: 33%;
		}
		.card-content {
			flex-grow: 1;
			flex-shrink: 1;
		}
	.jobs .card.noimg {
		flex-direction: column-reverse;
	}
	.jobs .card.noimg .card-poster,
	.jobs .card.noimg .card-content {
		width: 100%;
	}
	.post-body ul.columns {
		-webkit-column-count: 2;
		   -moz-column-count: 2;
				column-count: 2;
		  -webkit-column-gap: 16px;
     	     -moz-column-gap: 16px;
          		  column-gap: 16px;
	}
	.sponsor {
        max-width: 280px;
    }
	footer .location-heading {
		text-align: left;
	}
	footer .footer-contact-img {
		width: 92px;
	}
	footer .footer-donation .btn-block {
		padding: 24px 44px;
	}
}
@media (min-width: 768px) {
	#topbar {
		height: 92px;
		padding: 0;
	}
	#topbar .search-toggle-lg {
		margin-top: 24px;
		padding-right: 16px;
	}
	#searchbar.show {
		height: 84px;
		padding: 0 24px;
	}
	.header-login { /* opacity 0.8 from styles.css */
		background: #d5d5d5;
		font-size: 1rem;
		margin-right: 16px;
		padding: 4px 8px;
		z-index: 99999;
	}
	.header-login:hover {
		background: var(--theme-blue);
		color: #555;
	}
	.identity {
		flex-grow: 0;
		height: auto;
		margin-left: 0;
		width: 240px;
	}
		.identity-title {
			font-size: 120%;
		}
			.identity-title-text {
				padding-bottom: 0;
			}
		.identity-img {
			height: 72px;
		}
	.search-toggle-lg-wrap {
		display: block;
		flex-grow: 0;
		width: auto;
	}
	.mobile-action {
		display: none;
	}
	.nav-main {
		padding-top: 6px;
	}
		.nav > li > a.nav-main-item-link {
			color: #333;
			font-size: 1.5rem;
			padding: 16px 12px;
		}
		.nav-main.nav-tabs > li.nav-main-item > a.nav-main-item-link[aria-expanded="true"],
		.nav-main.nav-tabs > li.nav-main-item > a.nav-main-item-link[aria-expanded="true"]:focus,
		.nav-main.nav-tabs > li.nav-main-item > a.nav-main-item-link[aria-expanded="true"]:hover,
		.nav-main-item-child-menu.dropdown-menu > li > a:hover,
		.nav-main-item-child-menu.dropdown-menu > li > a:active,
		.nav-main-item-child-menu.dropdown-menu > li > a:focus {
			background: var(--theme-blue);
			color: #fff;
			text-shadow: 1px 1px 2px #333;
		}
		.nav-main-item-child-menu.dropdown-menu.show {
			min-width: 240px;
		}
		/* theme colors on hover */
		.nav-main .nav-main-item:nth-child(1n) .nav-main-item-link:hover,
		.nav-main.nav-tabs > li.nav-main-item:nth-child(1n) > a.nav-main-item-link[aria-expanded="true"]:focus,
		.nav-main .nav-main-item:nth-child(1n) .nav-main-item-child-menu.dropdown-menu > li > a:hover,
		.nav-main .nav-main-item:nth-child(1n) .nav-main-item-child-menu.dropdown-menu > li > a:active,
		.nav-main .nav-main-item:nth-child(1n) .nav-main-item-child-menu.dropdown-menu > li > a:focus {
			background: var(--theme-blue);
			color: #fff;
		}
		.nav-main .nav-main-item:nth-child(2n) .nav-main-item-link:hover,
		.nav-main.nav-tabs > li.nav-main-item:nth-child(2n) > a.nav-main-item-link[aria-expanded="true"]:focus,
		.nav-main .nav-main-item:nth-child(2n) .nav-main-item-child-menu.dropdown-menu > li > a:hover,
		.nav-main .nav-main-item:nth-child(2n) .nav-main-item-child-menu.dropdown-menu > li > a:active,
		.nav-main .nav-main-item:nth-child(2n) .nav-main-item-child-menu.dropdown-menu > li > a:focus {
			background: var(--theme-blue-light);
			color: #fff;
		}
		.nav-main .nav-main-item:nth-child(3n) .nav-main-item-link:hover,
		.nav-main.nav-tabs > li.nav-main-item:nth-child(3n) > a.nav-main-item-link[aria-expanded="true"]:focus,
		.nav-main .nav-main-item:nth-child(3n) .nav-main-item-child-menu.dropdown-menu > li > a:hover,
		.nav-main .nav-main-item:nth-child(3n) .nav-main-item-child-menu.dropdown-menu > li > a:active,
		.nav-main .nav-main-item:nth-child(3n) .nav-main-item-child-menu.dropdown-menu > li > a:focus {
			background: var(--theme-green);
			color: #fff;
		}
		.nav-main .nav-main-item:nth-child(4n) .nav-main-item-link:hover,
		.nav-main.nav-tabs > li.nav-main-item:nth-child(4n) > a.nav-main-item-link[aria-expanded="true"]:focus,
		.nav-main .nav-main-item:nth-child(4n) .nav-main-item-child-menu.dropdown-menu > li > a:hover,
		.nav-main .nav-main-item:nth-child(4n) .nav-main-item-child-menu.dropdown-menu > li > a:active,
		.nav-main .nav-main-item:nth-child(4n) .nav-main-item-child-menu.dropdown-menu > li > a:focus {
			background: var(--theme-yellow);
		}
		.nav-main .nav-main-item:nth-child(5n) .nav-main-item-link:hover,
		.nav-main.nav-tabs > li.nav-main-item:nth-child(5n) > a.nav-main-item-link[aria-expanded="true"]:focus,
		.nav-main .nav-main-item:nth-child(5n) .nav-main-item-child-menu.dropdown-menu > li > a:hover,
		.nav-main .nav-main-item:nth-child(5n) .nav-main-item-child-menu.dropdown-menu > li > a:active,
		.nav-main .nav-main-item:nth-child(5n) .nav-main-item-child-menu.dropdown-menu > li > a:focus {
			background: var(--theme-orange);
		}
	.search-toggle-lg-wrap {
		align-items: center;
		display: flex;
		flex-direction: row;
	}
		#topbar .search-toggle-lg {
			margin: 0;
			padding: 22px 16px 16px 16px;
		}
	
	.home-about {
		min-height: 360px;
	}
	.home-about .pan-content h2 {
		margin-top: 0;
		padding-top: 0;
	}
	.home-about .pan-content {
		align-self: center;
		padding: 72px 32px;
	}
		.home-about .pan-content .btn {
			margin-top: 12px;
		}
	.people-list-item { /* remove to use styles.css's 3-wide layout */
		width: 50%;
	}
	h1.page-title,
	.post-header {
		margin-top: 16px;
	}
	h1.page-title,
	.post-header,
	.h-banner-content-caption h1,
	.post-desc {
		text-align: center;
	}
	.body-home .h-banner-content-caption h1 {
		text-align: left;
	}
	.body-not-home h1.page-title,
	.body-not-home  .post-header,
	.body-not-home .h-banner-content-caption h1 {
		font-size: 4rem;
	}
	.body-directory-profile .post-desc,
	.post-desc {
		padding-left: 10%;
		padding-right: 10%;
	}
	.post-img {
		width: 40%;
		max-width: 40%;
	}
	.post-doc-embed {
		display: block;
		float: left;
		height: 80vh;
		margin-bottom: 16px;
		width: 100%;
	}
	.body-jobs .pan-list {
		padding: 4px 0 0 24px;
	}
	footer .pan {
		padding-bottom: 44px;
	}
	footer .footer-contact-info .location-heading {
		font-size: 2.4rem;
		line-height: 1.2;
		max-width: 280px;
	}
	footer h2 {
		padding-top: 0;
	}
}
@media (min-width: 840px) {
	.jobs .card.noimg {
		flex-direction: row-reverse;
		flex-wrap: nowrap;
	}
		.jobs .card.noimg .card-poster {
			flex-grow: 0;
			flex-shrink: 0;
			text-align: left;
			width: 33%;
		}
			.jobs .card.noimg .card-poster .card-details .card-date {
				font-size: 1.5rem;
			}
		.jobs .card.noimg .card-content {
			flex-grow: 1;
			flex-shrink: 1;
			width: auto;
		}
}
@media (min-width: 768px) AND (max-width: 991px) {
	footer .location-group {
		width: 100%;
	}
}
@media (min-width: 992px) {
	#searchbar.show,
	#topbar {
		height: 132px;
	}
	.identity {
		width: 312px;
	}
		.identity-img {
			height: 112px;
		}
		.identity-title {
			font-size: 175%;
			padding-top: 40px;
		}
	.nav-main {
		margin-top: 6px;
	}
	#topbar .search-toggle-lg {
		margin-top: 3px;
	}
	#topbar .search-toggle-lg,
	.nav-tabs > li > a.nav-main-item-link {
		font-size: 1.85rem;
	}
	.h-banner,
	.h-banner-inner {
		height: 540px;
	}
	.h-banner {
		background-position: top 25% center;
	}
	.h-banner-content-caption h1 {
		font-size: 5.4rem;
	}
	.h-banner-content-caption .btn {
		font-size: 2.8rem;
		padding: 24px 44px;
	}
	.body-not-home h1.page-title,
	.body-not-home  .post-header,
	.body-not-home .h-banner-content-caption h1 {
		font-size: 4.8rem;
	}
	.body-not-home h1.page-title,
	.body-not-home  .post-header {
		padding: 44px 0;
	}
	.body-directory-profile .post-desc,
	.post-desc {
		padding-left: 15%;
		padding-right: 15%;
	}
	.sponsors .sponsor {
		padding: 4px 8px;
	}
	.sponsors .sponsor .sponsor-link,
	.sponsors .sponsor h4,
	.sponsors .sponsor .sponsor-link img {
		max-width: 120px;
	}
	.sponsors .sponsor h4,
	.sponsors .sponsor .sponsor-link h4 {
		font-size: 1.4rem;
	}

	footer {
		padding-top: 32px;
	}
	footer .location-group {
		padding-right: 20%;
		width: 100%;
	}
}
@media (min-width: 1200px) {
	.header-login {
		font-size: 1.15rem;
		padding: 6px 12px;
	}
	#topbar {
		height: 140px;
	}
	#searchbar.show,
	.container,
	.header-wrap {
		padding: 0 8%;
	}
	.h-banner-content {
		padding: 0 0 48px 0;
	}
	.h-banner-content-caption h1 {
		font-size: 6rem;
	}
	.h-banner-content-caption .btn {
		font-size: 3rem;
		margin: 8px 0 24px 0;
		padding: 24px 44px;
	}
	#topbar .search-toggle-lg,
	.nav-tabs > li > a.nav-main-item-link {
		font-size: 2rem;
	}
	.nav-tabs > li > a.nav-main-item-link {
		padding: 32px 16px;
	}
	.home-about {
		min-height: 420px;
	}
		.home-about .pan-content {
			padding-left: 44px;
		}
	.h-banner,
	.h-banner-inner {
		height: 640px;
	}
	.body-directory-profile .post-desc,
	.post-desc {
		font-size: 2.4rem;
		padding-left: 20%;
		padding-right: 20%;
	}
	.post-body ul.columns {
		-webkit-column-count: 3;
		   -moz-column-count: 3;
				column-count: 3;
	}

	.people-list-item { /* remove to use styles.css's 3-wide layout */
		width: 33.3%;
	}
	.people-list-item-header {
		padding-left: 8px;
		padding-right: 8px;
	}
	.sponsors .sponsor .sponsor-link,
	.sponsors .sponsor h4,
	.sponsors .sponsor .sponsor-link img {
		max-width: 160px;
	}
	.sponsors .sponsor h4,
	.sponsors .sponsor .sponsor-link h4 {
		font-size: 1.5rem;
	}
	footer .footer-contact-img {
		width: 140px;
	}
	footer .footer-contact-info .list-group-item {
		font-size: 1.75rem;
	}
		footer .footer-contact-info .list-group-item-link {
			padding: 6px 0;
		}
}
@media (min-width: 1600px) {
	#topbar {
		height: 180px;
	}
		.identity {
			width: 440px;
		}
			.identity-img {
				height: 152px;
			}
			.identity-title {
				font-size: 210%;
				padding-top: 52px;
				width: auto;
			}
				.identity-title-text {
					padding-bottom: 4px;
				}
	.header-login {
		font-size: 1.25rem;
		padding: 8px 16px;
	}
	.nav-tabs > li > a.nav-main-item-link {
		padding: 40px 16px;
	}
	#searchbar.show,
	.container,
	.header-wrap {
		padding: 0 12%;
	}
	.nav-tabs > li > a.nav-main-item-link {
		padding-left: 22px;
		padding-right: 22px;
	}
	.first-panel {
		padding: 32px 0;
	}
	.home-about {
		min-height: 480px;
	}
	.home-about .pan-content {
		padding-right: 20%;
		padding-left: 52px;
	}
	.home-about .pan-content h2 {
		font-size: 4rem;
		margin: 0 0 8px 0;
		padding: 0;
	}
	.home-about .pan-content p {
		font-size: 2.2rem;
		line-height: 1.6;
		padding: 12px 0 16px 0;
	}
	.home-about .pan-content .btn {
		font-size: 2.4rem;
		padding: 20px 32px;
	}
	.h-banner,
	.h-banner-inner {
		height: 760px;
	}
	.h-banner-content-caption h1 {
		font-size: 7rem;
	}
	.h-banner-content-caption .btn {
		font-size: 3.4rem;
		padding: 32px 54px;
	}
	.body-home .h-banner-content {
		padding-bottom: 120px;
	}
	.people-list-item-photo,
	.noimg .people-list-item-link {
		height: 160px; /* 420 */
	}
	.body-directory-staff .people-list-item-photo,
	.body-directory-staff .noimg .people-list-item-link {
		height: 360px;
	}
	footer .footer-contact-img {
		width: 152px;
	}
	footer .footer-contact-info .location-heading {
		font-size: 2.6rem;
		line-height: 1.2;
		max-width: 320px;
	}
	footer .footer-contact-info .list-group-item {
		font-size: 1.85rem;
	}
		footer .footer-contact-info .list-group-item-link .list-group-item-icon {
			width: 32px;
		}
}
@media (min-width: 2000px) {
	.people-list-item {
		width: 25%; /* 20% */
	}
	.people-list-item-photo,
	.noimg .people-list-item-link {
		height: 160px; /* 380 */
	}
}