.events-header-bg {
	width: 100%;
	background-image: url('https://hoaconnecthouston.org/images/event-header-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover; 
	background-position: top center;
}
.events-header {
	margin:0 auto;
	text-align: center;
	background-image: linear-gradient(rgba(28,74,121,.8), rgba(0,159,165,.8));
	width:100%;
	height:200px;
	padding-right:0px;
	padding-left:0px;
}
.events-title-area {
	color: #2e7d32;
	padding-top: 30px;
	font-family: 'Causten', Arial, sans-serif; font-size: 36px;
	font-weight: 700;
	text-align: center;
	letter-spacing: normal;
}
.events-title {
	padding-top: 0;
	margin-top: 0;
	line-height: .75;
	font-size: 50px;
	font-family: 'Parisienne', cursive, script;
	font-weight: bold;
	font-style: italic; 
	color: #ffffff;
}
.events-header-description {
	margin-top: 20px;
}
.events-header-description,
.events-header-description h2 {
	color: white;
	font-size: 20px;
	font-weight: normal;
	width: 100%;
	line-height: 1;
}
.event-description-break {
	display: none;
}
.calendar-note {
	margin-bottom: 10px;
	font-style: italic;
	text-align: right;
	font-size: 14px;
}
@media(max-width: 700px) {
	.calendar-section {
		display: none;
	}
	.events-title {
		font-size: 40px;
	}
	.events-title-area {
		font-size: 30px;
	}
	.event-header-description {
		font-size: 14px;
	}
	.event-description-break {
		display: block;
	}
}
.calendar-wrapper .filters select {
	font-weight:bold;
	color:#565555;
}
.calendar-wrapper .toggle-views {
	display:flex;
	justify-content:center;
	margin-top:40px;
	margin-bottom:50px;
}
.calendar-wrapper .toggle-views > div {
	display:flex;
		font-size: 1.5vw;
		font-weight: 500;
		letter-spacing: 0.92px;
		line-height: 1.2;
}
.calendar-wrapper .toggle-views span {
	display:block;
	vertical-align:middle;
	width:25px;
	height:100%;
	margin-right:10px;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
.event-wrapper, .monthly {
	box-shadow: 0 0 8px 2px lightgray;
	padding: 20px;
}
.list-view {
		color: #565555;
}
.past-event .eventdetail {
	opacity:.3;
	pointer-events:none;
}
.eventdetail {
	/* padding:40px 0; */
}
.eventdetail .back-to {
		color: #2e7d32;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 0;
		line-height: 16.28px;
	text-transform:uppercase;
	margin-bottom:25px;
	display:block;
	/* margin-left: -150px; */
}
.eventdetail .wrapper {
	display:flex;
	justify-content:space-between;
}
.eventdetail .wrapper .left-side {
	width:50%;
	padding: 20px;
}
.eventdetail .wrapper .right-side {
	width:45%;
	font-size:16px;
	padding: 20px;
	background-color: #f9f9f9;
}
.eventdetail .wrapper .right-side h5 {
	font-size:18px;
}
.eventdetail .wrapper .right-side hr {
	background-color:#ccc;
}
.eventdetail h1 {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 1.15px;
	line-height: 35px;
	text-transform:uppercase;
	margin-bottom: 0;
}
.eventdetail .date {
	color: #256629;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.92px;
	line-height: 24px;
	text-transform:uppercase;
}
.eventdetail .date::after {
	content: "";
	display: block;
	width: 100px;
	border-bottom: 4px solid #979797;
	margin-bottom: 20px;
	margin-top: 20px;
}
.calendar-popup-toggle {
	margin-top: 15px;
}
.event-detail-left > div {
	border-right: 1px solid #eeeeee;
}
.eventdetail i {
	font-size: 20px;
}
@media (max-width:720px) {
	.event-detail-left > div {
		border-right: none;
	}
}
.calendar-popup {
	display: none;
	background-color: white;
	position: absolute;
	padding: 10px;
	box-shadow: 0 0 8px 2px lightgray;
	border: 1px solid darkgray;
	z-index: 999;
}
.calendar-add {
	
}
.eventdetail .category {
		color: #565555;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 0.65px;
		line-height: 20px;
	text-transform:uppercase;
	margin-top:15px;
}
.eventdetail .thumbnail {
	display:block;
	margin-bottom:10px;
	width:100%;
	border-radius: 10px;
	box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.3);
}
.eventdetail .buttons .button {
	display:block;
	margin-bottom:10px;
	text-align:center;
}
.eventdetail .buttons .button:hover {
	background-color: rgba(38, 51, 73, 1);
	color:#fff !important;
}
.eventdetail .addthis_toolbox {
		color: #256629;
		font-size: 24px;
		font-weight: bold;
		letter-spacing: 0.92px;
		line-height: 24px;
		display: flex;
		align-items: center;
	gap:20px;
	margin-top:25px;
}
.eventdetail .at-icon-wrapper {
	display:none;
}
body .addeventatc, body .addeventatc:hover {
	background:none;
	font-size:inherit;
	color:#fff !important;
	font-family:inherit !important;
	text-shadow:none !important;
	box-shadow:none !important;
	padding:0;
	line-height:1 !important;
	border:none;
}
body .addeventatc .addeventatc_icon {
	display:none;
}
#toggle-calendar img {
	width: 20px;
	margin-right: 10px;
}
#toggle-calendar span {
	padding-top: 0;
}
.calendar-wrapper .toggle-views > div.button:hover {
	background-color: rgba(38, 51, 73, 1);
	color:#fff !important;
}
.event-listing .header-bar {
	position: sticky;
	position: -webkit-sticky;
	top: 43px;
	/* top: 0; */
	z-index: 1;
	color:#fff;
	text-transform:uppercase;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.5px;
	line-height: 16px;
	padding: 15px 12px;
	margin-bottom:20px;
	border-top: 10px solid white;
	border-bottom: 5px solid white;
}
.event-listing {
	display:block;
}
.event-listing .item {
	margin-bottom:25px;
	display:flex;
	justify-content:space-between;
} 
.event-listing .item-wrapper {
	/*content-visibility: auto;*/
	contain-intrinsic-size: 240px;
	contain: layout paint style;
}
.event-listing .item .category{
	padding:5px 10px;
	background-color: #2e7d32;
	color:#fff;
	text-transform:uppercase;
	position:absolute;
	font-size: 13px;
	font-weight: bold;
	top:0;
	left:0;
	border-radius: 10px 0 0 0;
}
.event-listing .item .title,
.event-listing .item .title a
{
		color: #103445;
		font-size: 28px;
		font-weight: bold;
		letter-spacing: -0.15px;
	margin-bottom:8px;
	line-height:1.22;
}
.event-listing .item .type {
	text-transform:uppercase;
		color: #565555;
		font-size: 17px;
		font-weight: bold;
		letter-spacing: 0.65px;
		line-height: 20px;
		text-align: center;
	margin-bottom:15px;
}
/* .event-listing .item .buttonContainer {
	left:auto;
	right:0;
	margin-top:-30px;
} */
.event-listing .item .blurb {
	flex-grow:1;
	padding-bottom:20px;
	line-height:1.5;
}
.event-listing .item .wrapper .button {
	font-size: 14px;
	justify-self:flex-end;
		align-self: flex-start;
}
.event-listing .item .date {
	padding:10px 0;
		color: #2e7d32;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0.2px;
	text-transform:uppercase;
}
.event-listing .item .time {
		color: #103445;
		font-size: 22px;
		font-weight: bold;
		letter-spacing: -0.11px;
		line-height: 28px;
		text-align: right;	
	text-transform:none;
	margin-bottom: 10px;
}
.event-listing .item .wrapper {
	display: flex;
		flex-direction: column;
	width:55%;
}
.event-listing .item:nth-child(odd) {
}
.event-listing .item:nth-child(even) {
}
.event-listing .item .thumbnail {
	position:relative;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	width:40%;
	border-radius: 10px;
	box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.4);
	transition: transform 0.3s ease;
}
.event-listing .item:hover .thumbnail {
	transform: translate(-1px, -2px);
	box-shadow: 2px 4px 10px 0 rgba(0,0,0,0.4);
}
.event-listing .item .thumbnail::after{
	content:"";
	display:block;
	width:100%;
	padding-top:56.8%;
}
.event-listing .item .thumbnail a{
	/* position:absolute;
	left:0;right:0;top:0;bottom:0;
	width:100%; */
	height:100%;
}
.event-listing .item .bottom-line {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
/* Overall wrapper */
.monthly {
	color: #545454;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
	text-align:left;
	width: 100%;
	margin-bottom: 5px;
}
.monthly.active {
	display:block;
}
.toggle-buttons button {
	cursor: pointer;
	padding: 5px 20px;
	min-width: 115px;
	width: 170px;
	height: 35px;
}
.toggle-buttons button.selected {
	background-color: #256629;
	color: white;
	border: 1px solid buttonface;
}
/* Top bar containing title, navigation, and buttons */
.monthly-header {
	position: relative;
	text-align: center;
	padding: 0.5em 0;
	box-sizing: border-box;
		margin: 0px 10px;
}
/* Center area of top bar containing title and buttons */
.monthly-header-title {
	font-size: 4vw;

		color: #103445;
		font-weight: bold;
		letter-spacing: -0.15px;
		text-align: center;
}
.monthly-header-title-date {
	display:block;
}
/* Buttons for reverting to "today", and closing event list */
.monthly-header-title a:link,
.monthly-header-title a:visited {
	color:inherit;
	text-decoration:none;
}
/* current month/yr block */
.monthly-header-title-date,
.monthly-header-title-date:hover {
	cursor: default;
}
/* Button to reset to current month */
.monthly-reset {
		border-left: 0!important;
		background: #fff;
		padding: 0px 2vw;
		font-size: 2vw;
		color: #545454 !important;
		margin-left: 20px;
		position: relative;
		display: inline-block;
	position: absolute;
		right: 0;
		top: -20px;
}
.monthly-reset::before {
	content: '\21BB';
	margin-right: 0.25em;
}
/* Button to return to month view */
.monthly-cal {
	border-right: 0!important;
}
.monthly-cal::before {
	content: '\2637';
	margin-right: 0.25em;
}

/* wrapper for left/right buttons to make the clickable area bigger */
.monthly-prev,
.monthly-next {
	position: absolute;
	top: 0;
	height: 100%;
		display: flex;
		align-items: center;
	color:#404040;
	font-weight:normal;
	font-size:16px;
	text-decoration:none;
}
.monthly-prev {
	left: 0;
}
.monthly-next {
	right: 0;
}
.monthly-prev:hover,
.monthly-next:hover {
	opacity: 1;
	color:#8a8f4c;
	text-decoration:none;
}

/* Arrows */
.monthly-prev:before,
.monthly-next:after {
	display:inline-block;
}
/* Left Arrow */
.monthly-prev:before{
	content: '\00AB';
	padding-right:10px;
}
.monthly-next:after {
	content: '\00BB';
	padding-left:10px;
}
/* Day of the week headings */
.monthly-day-title-wrap {
	display: table;
	table-layout: fixed;
	width: 100%;
	border-spacing:10px 0;
}
.monthly-day-title-wrap div {
	font-size:1.4vw;
	font-weight:800;
	width: 14.28%!important;
	display: table-cell;
	background:#2e7d32;
	color:#fff;
	box-sizing: border-box;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	padding:7px 0;
}

/* Calendar days wrapper */
.monthly-day-wrap {
	display: table;
	table-layout: fixed;
	width: 100%;
	overflow: hidden;
	border-spacing:10px;
}
.monthly-week {
	display: table-row;
	width: 100%;
}
/* Calendar Days */
.monthly-day, .monthly-day-blank {
	width: 14.28%!important;
	display: table-cell;
	vertical-align: top;
	box-sizing: border-box;
	position: relative;
	color: inherit;
	background: rgba(240,240,240,.3);
	box-shadow: 0 0 0 1px rgba(0,0,0,.02);
	-webkit-transition: .25s;
	transition: .25s;
	padding: 0;
	text-decoration: none;
}

/* Trick to make the days' width equal their height */
.monthly-day:before {
	content: '';
	display: block;
	padding-top: 100%;
	float: left;
}

/* Hover effect for non event calendar days */
.monthly-day-wrap > a:hover {
	background: #A1C2E3;
}

/* Days that are part of previous or next month */
.monthly-day-blank {
	background: #ffffff;
}

/* Event calendar day number styles */
.monthly-day-event > .monthly-day-number {
	position: absolute;
	font-size:1.1vw;
	line-height: 1em;
	width:100%;
	text-indent:7px;
	background:#dedede;
	padding:4px 0;
	top:0;
	left:0;
}

/* Non-Event calendar day number styles */
.monthly-day-pick > .monthly-indicator-wrap {
	margin: 0;
}

.monthly-day-pick > .monthly-day-number:before,
.monthly-day-pick > .monthly-day-number:after {
	content: '';
	display: block;
	padding-top: calc(50% - 0.8em);
	width: 0;
	height: 0;
}

/* Days in the past in "picker" mode */
/*
.monthly-past-day:after{
	content: '';
	width: 150%;
	height: 2px;
	-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
					transform-origin: left top;
	-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
					transform: rotate(45deg);
	background: rgba(0, 0, 0, 0.1);
	position: absolute;
	left: 0;
	top: 0;
}
.monthly-past-day:hover {
	background: #fff!important;
}
*/
.monthly-past-day {
	opacity:.4;
}
/* Current day style */
.monthly-today .monthly-day-number {
	color: #FFF;
	background: #2e7d32;
}
.monthly-day-pick.monthly-today .monthly-day-number {
	padding: 0.15em;
	margin: calc(50% - 0.7em) auto auto auto;
	font-size: 1em;
}

/* Wrapper around events */
.monthly-indicator-wrap {
	position: relative;
	line-height: 0;
	margin: 0 auto;
	padding: 15px 5px;
}

/* Event indicator dots */
.monthly-day .monthly-event-indicator {
	display: block;
	margin: 0 0 1px 0;
	width: auto;
	line-height: 1.2em;
	padding: 0.125em 0 0.1em 0.125em;
	border-radius: 0;
	background-color: transparent;
	color: #333;
	text-decoration: none;
	box-sizing: border-box;
}
.monthly-day .monthly-event-indicator.monthly-event-continued {
	box-shadow: -1px 0 0 0;
}
.monthly-day .monthly-event-indicator span {
	display: block;
	width: auto;
	margin: 0;
	color: #333;
/*
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	*/
	font-size:1.1vw;
	line-height:1.2;
	margin-bottom:7px;
}
.monthly-day .monthly-event-indicator.more-events span {
	color:#103445
}
.monthly-day .monthly-event-indicator:hover {
	cursor: pointer;
}
/* Listing of events under calendar */
.monthly-event-list {
	background: rgba(233, 235, 236, 0.9);
	overflow: auto;
	position: absolute;
	top: 2.5em;
	width: 100%;
	height: calc(100% - 2.5em);
	display: none;
	-webkit-transition: .25s;
	transition: .25s;
	-webkit-transform: scale(0);
		-ms-transform: scale(0);
					transform: scale(0);
}

/* Days in Events List */
.monthly-list-item {
	position: relative;
	padding: 0.5em 0.7em 0.25em 4em;
	display: none;
	border-top: 1px solid #D6D6D6;
	text-align: left;
}

.monthly-list-item:after{
		padding: 0.4em 1em;
		display: block;
		margin-bottom: 0.5em;
 }

.monthly-event-list .monthly-today .monthly-event-list-date {
	color: #EA6565;
}

/* Events in Events List */
.monthly-event-list .listed-event {
	display: block;
	color: #fff;
	padding: 0.4em 1em;
	border-radius: 0.2em;
	margin-bottom: 0.5em;
}

.monthly-list-item a:link, .monthly-list-item a:visited {
	text-decoration: none;
}

.item-has-event {
	display: block;
}

.item-has-event:after{
		display: none!important;
}

.monthly-event-list-date {
	width: 4em;
	position: absolute;
	left: 0;
	top: 1.2em;
	text-align: center;
		font-weight: bold;
		line-height: 1.2em;
}

.monthly-list-time-start,
.monthly-list-time-end {
	font-size: .8em;
	display: inline-block;
}
.monthly-list-time-end:not(:empty):before {
	content: '\2013';
	padding: 0 2px;
}

/* Events List custom webkit scrollbar */
.monthly-event-list::-webkit-scrollbar {width: 0.75em;}

/* Track */
.monthly-event-list::-webkit-scrollbar-track {background: none;}

/* Handle */
.monthly-event-list::-webkit-scrollbar-thumb {
	background: #ccc;
	border: 1px solid #E9EBEC;
	border-radius: 0.5em;
}
.monthly-event-list::-webkit-scrollbar-thumb:hover {background: #555;}

/* Language-specific. Default is English. */
.monthly-reset:after		{ content: 'Today'; }
.monthly-cal:after			{ content: 'Month'; }
.monthly-list-item:after	{ content: 'No Events'; }

.monthly-locale-fr .monthly-reset:after		{ content: "aujourd'hui"; }
.monthly-locale-fr .monthly-cal:after		{ content: "mois"; }
.monthly-locale-fr .monthly-list-item:after	{ content: 'aucun événement'; }


/*
Calendar shows event titles if the device width allows for at least 3em per day (rounded
up to 25em total). This assumes the calendar font is close to the baseline font size and
the calendar takes up close to the full media width as the window is made smaller or the
font is zoomed. If one or both of these is not true, this will need to be overridden by
a layout-specific width, or you will need to use a library like css-element-queries to 
establish the rules based on the calendar element width rather than the device width.
*/
@media (min-width: 25em) {
	.monthly-day-event {
		padding-top: 1.3em;
	}
	.monthly-day-event > .monthly-indicator-wrap {
		width: auto;
		max-width: none;
	}
	.monthly-indicator-wrap {
	}
	.monthly-day:before {
		padding-top: calc(100% - 1.2em);
	}

}
@media (min-width:1600px) {
	.calendar-wrapper .toggle-views > div {
		font-size:15px;
	}
}
@media (min-width:1200px) {
	.monthly-day-title-wrap div {
		font-size:12px;
	}
	.monthly-day-event > .monthly-day-number {
		font-size:15px;
	}
	.monthly-day .monthly-event-indicator span {
			font-size: 12px;
			max-height: 30px;
			text-overflow: ellipsis;
			display: block;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
	}
	.monthly-header-title {
		font-size: 32px;
	}
	.monthly-reset {
			font-size: 14px;
			padding: 0px 10px;
	}
}
@media (min-width:1025px) {
	.event-listing .item {
	}
}
@media(min-width: 1000px) {
	.event-wrapper {
		/* margin-left: -150px;
		margin-right: -150px; */
	}
}
@media (max-width:999px) {
	.monthly-day .monthly-event-indicator span {
		overflow:visible;
		white-space:normal;
		line-height:1;
		padding:0;
	}
	.monthly-day .monthly-event-indicator {
		height:auto;
	}
	.monthly-day-event > .monthly-day-number {
		padding:2px 0;
	}
	.eventdetail .wrapper {
		flex-wrap:wrap;
	}
	.eventdetail .wrapper .left-side {
		margin-bottom:25px;
	}	
	.eventdetail .wrapper .left-side, .eventdetail .wrapper .right-side {
		width:100%;		
	}
	.eventdetail .back-to {
		margin-left: 0;
	}
	.event-listing .item {
		width:100%;
		margin-left:0 !important;
		margin-right:0 !important;
			flex-direction: column;
	}
	.calendar-wrapper .filters select {
		width:100%;
		margin-bottom:10px;
	}
	.calendar-wrapper .toggle-views > div {
		font-size:12px;
	}
	.monthly-day .monthly-event-indicator span  {
		font-size:11px;
	}
	.event-listing .item .thumbnail,
	.event-listing .item .wrapper
	 {
		width:100%;
	}
	.event-listing .item .wrapper {
		padding-top:10px;
	}
	.event-wrapper {
		/* width: 600px;
		margin: 0 auto; */
		/* padding-left: 250px;
		padding-right: 250px; */
	}
	.event-wrapper, .monthly, .container {
		box-shadow: none;
		padding: 0;
	}
	.event-wrapper .thumbnail {
		width: 100%;
	}
	.event-listing .header-bar {
		top: 90px;
	}
}
@media (max-width:700px) {
	.calendar-wrapper .monthly {
		display:none;
	}
	.header-bar {
		font-size: 22px !important;
	}
}
.jk-nbh-event span {
	color: white !important;
}