.filterClose {
	display: none;

	@media screen and (max-width: 767px) {
		position: fixed;
		color: #f9f9f9;
		background-color: #007855;
		border-radius: 0 3px 3px 0;
		height: auto;
		transform: rotate(90deg);
		display: block;
		width: 165px;
		text-align: center;
		top: 0;
		line-height: 1;
		padding: 0.6em 0.2em;
		left: calc(100% + 1rem);
		font-weight: 700;
		letter-spacing: 1px;
		z-index: 9999999;
		transform-origin: left;
		top: 25svh;
	}
}

.filtercol {
	@media screen and (max-width: 767px) {
		position: fixed;
		z-index: 99999999999999;
		width: 100vw;
		background-color: #007855;
		height: 100%;
		top: 100px;
		left: 0;
		padding: 2rem 4rem;
		transform: translate(-100%);
		transition: 0.2s ease-in-out all;

		&.active {
			transform: translate(0);
			transition: 0.2s ease-in-out all;

			.filterClose {
				left: calc(100% - 1rem);
			}
		}
	}
}

.btn.btn-primary i,
.btn.btn-primary svg {
	font-size: 1em;
}

h1.page-title a {
	font-size: 1rem;
	vertical-align: middle;
	padding: 0 0 0 1rem;
}

.search-filter-base {
	margin-bottom: 2.25rem;

	.search-filter-label {
		text-transform: uppercase;
		font-weight: 700;
		color: #122548;
	}

	.search-filter-input-checkbox {
		.search-filter-input-checkbox__container {
			align-items: flex-start;

			span.search-filter-input-checkbox__label {
				line-height: 1.1;

				span.search-filter-input-checkbox__count {
					margin-left: auto;
				}
			}
		}
	}

	.search-filter-input-radio {
		label.search-filter-input-radio__container {
			span.search-filter-input-radio__label {
				span.search-filter-input-radio__count {
					margin-left: auto;
				}
			}
		}
	}
}

#eventsList {
	.col-12 {
		padding-left: 0;

		h1.page-title {
			@media screen and (max-width: 767px) {
				font-size: 2rem;
			}
		}
	}
}

.eventTitle {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	align-items: center;
	color: #fff;

	.search-filter-field {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-end;

		@media screen and (max-width: 767px) {
			flex-flow: column nowrap;
			align-items: flex-start;
			justify-content: flex-start;

			div#search-filter-label-0 {
				font-size: 2rem;
			}

			div#search-filter-input-radio-0 {
				font-size: 2rem;
			}
		}

		.search-filter-input-radio--is-active {
			.search-filter-input-radio__label {
				color: #fff;
				font-weight: 700 !important;
				text-decoration: underline !important;
			}
		}

		div#search-filter-label-0 {
			font-family: "Bebas Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
				Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
				"Segoe UI Emoji", "Segoe UI Symbol";
			color: #fff;
			letter-spacing: 1.1px;
			margin-bottom: 0;
			margin-top: 3px;
			font-size: 1.3rem;
			font-weight: 400;
			letter-spacing: 1.1px;

			@media screen and (max-width: 767px) {
				font-size: 2rem;
				display: none;
			}
		}

		div#search-filter-input-radio-0 {
			display: flex;
			justify-content: space-evenly;
			color: #fff !important;

			@media screen and (max-width: 767px) {
				flex-flow: column nowrap;
				align-items: flex-start;
				justify-content: flex-start;
			}

			.search-filter-input-radio__container {
				.search-filter-input-radio__control {
					display: none;
				}

				.search-filter-input-radio__label {
					color: #fff;
					margin-bottom: 0;
					padding-left: 3vw;

					@media screen and (max-width: 767px) {
						font-size: 2rem;
					}
				}
			}
		}
	}
}

div#page {
	z-index: 99999999999999;
	position: relative;
}

#eventsList {
	min-height: 80vh;
}

.feedCol {
	padding: 0 0rem;

	.beEventsFeed {
		/* border-left: 1px solid #E1CFB1;
		padding-left: 1.5rem;

		@media screen and (max-width: 767px) {
			padding-left: 0;
			border-left: none;
			width: 100% !important;
		} */

		/* .monthDivider {
			font-size: 1.125rem;
			width: auto;
			display: block;
			text-transform: capitalize;
			letter-spacing: 0.6px;
			margin-bottom: 1.5rem;
			position: relative;

			&:after {
				content: '';
				display: block;
				width: 100%;
				height: 1px;
				background-color: #E1CFB1;
				position: absolute;
				top: 50%;
				z-index: 1;
			}

			.monthDividerInner {
				display: inline-block;
				padding: 0 1rem 0 0;
				background-color: #F9F9F9;
				position: relative;
				z-index: 9;
				font-weight: 700;
				color: #122548;
				text-transform: uppercase;
			}
		} */

		.gecFeed {
			gap: 3rem 2rem;

			.featuredEventCard {
				width: calc(33% - 1.1rem);
				color: #fff;
				padding: 0;

				@media screen and (max-width: 1200px) {
					width: calc(33% - 1.2rem);
				}

				@media screen and (max-width: 767px) {
					width: calc(50% - 1.5rem);
				}

				@media screen and (max-width: 575px) {
					width: 100%;
				}

				.featuredEventCardContent {
					display: block;
					position: relative;
					padding: 0.6rem 0 0;
				}

				a {
					display: block;

					img {
						margin-bottom: 1rem;
					}
				}
				.textLink {
					color: #fff;
					text-decoration: none;
				}

				h3 {
					margin-bottom: 0;
					font-size: 1.75rem;
				}

				.btn-primary {
					display: initial;
				}

				&:hover {
					transition: all 0.2s ease-in-out;
					transform: scale(1.02);
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

					.textLink {
						text-decoration: underline;
						padding-top: 0.25rem;
					}
					.btn-primary {
						background-color: #fff;
						color: #007855;
						text-decoration: none;
					}
				}
			}
		}
	}
}

.single-brawn_events {
	position: relative;

	#beSingleEvent {
		overflow: visible;
		position: relative;

		.row {
			overflow: visible;
			position: relative;
			max-width: 1200px;
			margin: 0 auto;

			.mainEventDetails {
				color: #f9f9f9;

				h1,
				h2,
				h3,
				h4,
				h5,
				h6 {
					color: #f9f9f9;
				}

				div#beImg {
					aspect-ratio: 16 / 9;
					overflow: hidden;
					position: relative;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}
				}

				#betitle {
					display: flex;
					flex-flow: row wrap;
					justify-content: space-between;
					align-items: end;
					padding: 1rem 0 1rem;
					margin-bottom: 1rem;
					border-bottom: 1px solid #007855;
					scroll-margin-top: 150px;

					h1 {
						font-size: 2.5rem;
						line-height: 1;
						margin-bottom: 0;
						color: #f9f9f9;
						width: 100%;
					}

					.beHeaderButtons {
						@media screen and (max-width: 767px) {
							display: none;
						}

						.btn.btn-primary {
							margin: 0 0 0 auto;
							font-size: 1rem;
							padding: 0.2rem 1.3rem 0.2rem;
							height: 1.5rem;
							line-height: 1rem;
							font-weight: 400;
							font-family: "DM Sans";
							letter-spacing: 0.9px;

							&.disabled {
								opacity: 1;
								pointer-events: none;
								filter: saturate(0.3) blur(0.75px);
								background-color: #007a55;
								opacity: 0.7;
							}
						}
					}

					h3#beDates {
						margin: 0 auto -0.25rem 0;
						line-height: 1;

						@media screen and (max-width: 767px) {
							display: none;
						}

						span.time {
							margin-left: 1rem;
						}
					}
				}

				.beFAQs {
					padding: 1rem 0 0rem;

					.faqSection {
						background-color: transparent;
						border: 1px solid #f9f9f9;
						margin-bottom: 1rem;
						padding: 1rem;

						&:last-child {
							margin-bottom: 0;
						}

						h3 {
							margin-bottom: 0;
							display: flex;
							flex-flow: row nowrap;
							align-items: center;
							justify-content: space-between;

							i,
							svg {
								position: relative;
								transform: rotate(405deg);
								transition: all 0.5s ease-in-out;
								color: #f9f9f9;
							}

							&.collapsed {
								i,
								svg {
									transform: rotate(0deg) !important;
									transition: all 0.2s ease-in-out;
								}

								&:hover {
									i,
									svg {
										transform: rotate(45deg) !important;
										transition: all 0.2s ease-in-out;
									}
								}
							}
						}

						.card.card-body {
							background-color: transparent;
							border-radius: 0;
							padding: 0 0 0rem;
						}
					}
				}
			}

			.beActions {
				background-color: #f9f9f9;
				color: #0e0e0e;
				align-self: flex-start;
				padding: 0rem;
				border: 2px solid #f9f9f9;

				@media screen and (max-width: 767px) {
					display: none;
				}

				&.mobile {
					display: none;

					@media screen and (max-width: 767px) {
						display: block;
						width: 100%;
						margin-top: 1rem;

						h1,
						h2,
						h3,
						h4 {
							color: #0e0e0e;
						}
					}
				}

				span.mainAction,
				a.mainAction {
					color: #f9f9f9;
					background-color: #0e0e0e;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-family: "Bebas Neue";
					padding: 1.1rem 1rem;
					text-decoration: underline;

					i,
					svg {
						position: relative;
						transform: rotate(0deg) scale(1);
						transition: all 0.2s ease-in-out !important;
					}

					&:hover {
						i,
						svg {
							transform: rotate(-45deg) scale(1.2);
							transition: all 0.2s ease-in-out;
							transition: all 0.2s ease-in-out !important;
						}
					}

					&.disabled:hover {
						i,
						svg {
							transform: rotate(180deg) scale(1.2) !important;
							transition: all 0.2s ease-in-out !important;
						}
					}
				}
			}

			.sbItem {
				display: block;
				margin: 1rem;
				border-bottom: 1px solid #0e0e0e;
				padding-bottom: 1rem;

				&:last-child {
					border-bottom: none;
					margin-bottom: 0;
				}

				h3 {
					margin-bottom: 0;
				}
			}
		}
	}
}

/* ????????????????????????????????????????????????????????? Multi Evenbt ??????????????????????????????????????????????????????? */

.multiEvent#beSingleEvent {
	& .row {
		& .mainEventDetails {
			#betitle {
				padding: 1rem 0 0.5rem;
				margin-bottom: 0rem;
				border-bottom: 0px solid #007855;
			}

			.allChildren {
				padding: 0.5rem 0 2rem;
				scroll-margin-top: 8rem;
				position: relative;

				.childEvent {
					display: flex;
					flex-flow: row wrap;
					width: 100%;
					justify-content: space-between;
					padding-bottom: 0.6rem;
					margin-bottom: 0.6rem;
					border-bottom: 1px solid #007855;

					h3 {
						margin: 0;
						width: 100%;
						display: flex;
						flex-flow: row nowrap;
						align-items: space-between;
						justify-content: space-between;

						@media screen and (max-width: 575px) {
							flex-flow: row wrap;
							/* margin-bottom: 1rem; */
						}

						span {
							width: fit-content;

							@media screen and (max-width: 575px) {
								width: 100%;
							}
						}
					}

					h4 {
						margin: 0;
						width: 100%;
						display: flex;
						flex-flow: row nowrap;
						justify-content: flex-start;

						span.tHold {
							span.tDate {
								display: inline-block;
								margin-right: 1rem;
								width: 140px !important;

								@media screen and (max-width: 575px) {
									width: 100% !important;
								}
							}
						}
					}

					.btn-primary.smaller {
						margin: 0 0 0 auto;

						&.disabled {
							opacity: 1;
							pointer-events: none;
							filter: saturate(0.3) blur(0.75px);
							letter-spacing: 1px;
							background-color: #007a55;
							opacity: 0.7;
						}
					}
				}
			}
		}
	}
}

.beActions.multiday {
	span.mainAction,
	a.mainAction {
		i,
		svg {
			transform: rotate(90deg) scale(1) !important;
		}

		&:hover {
			i,
			svg {
				transform: rotate(135deg) scale(1.2) !important;
				transition: all 0.2s ease-in-out !important;
			}
		}

		&.disabled:hover {
			i,
			svg {
				transform: rotate(90deg) scale(1.2) !important;
				transition: all 0.2s ease-in-out !important;
			}
		}
	}
}

div#back {
	padding-bottom: 1rem;

	.btn-text {
		&:hover {
			color: #f9f9f9;
		}
	}
}

a.fc-event {
	background-color: #f9f9f9;
	padding: 0.5rem 0.25rem;
	color: #0e0e0e;
}

.eventTitle {
	@view-transition {
		transition: all 0.5s ease-in-out;
		navigation: auto;
	}
}