/* TYPOGRAPHY */
h2.bloqTitle {
	line-height: 1.1em;
}

/* HOME TAGLINE */
body .taglineoverlay {
	bottom: 200px;

	&>.taglines .tagline .taglineinner .title {
		font-size: calc(var(--fs0) + 25px);
		font-family: var(--font-normal);
		font-weight: 900;
	}
}

/* HOME TOP BACKGROUND */
div.hometopwrapper {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		width: calc(100% - 30px);
		height: calc(100% - 87px);
		top: 87px;
		left: 15px;
		background-color: #f2f2f2;
	}
}

/* QUICK LINKS */
section.LinksBloq {
	padding: 0 20px !important;
	margin-top: -65px !important;

	&>div.Thumbnail>ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 19px;
		margin-top: -72px;

		&>li {
			flex: 1 1 auto;
			min-width: 255px;
			max-width: 255px;

			&>.Item {
				height: 145px;
				border: 4px solid white;
				transition: 0.4s;
				margin: 0 0;

				&>.ItemInner {
					height: 100%;
					background-color: transparent;

					&>.Title {
						position: absolute;
						bottom: 15px;
						left: 50%;
						transform: translateX(-50%);
						text-transform: uppercase;
						font-size: 19px;
						letter-spacing: 0.1em;
						transition: 0.4s;
					}

					&>.ItemIcon {
						display: inline-grid;
						place-items: center;
						background-color: rgba(var(--button-background-color), 1);
						padding: var(--button-padding);
						font-size: var(--button-font-size);
						color: white;
						cursor: pointer;
						text-decoration: none;
						text-align: center;
						text-transform: var(--button-text-transform);
						border: 2px solid white;
						margin: var(--button-gap);
						border-radius: var(--button-border-radius);
						font-family: var(--button-font-family);
						font-weight: var(--button-font-weight);
						line-height: 1.5em;
						letter-spacing: 0.09em;
						min-width: 153px;
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 28px;
						top: auto;
						opacity: 0;
						transition: 0.4s;

						&:hover {
							background-color: white;
							color: rgb(var(--linkcolor));
						}

						&::before {
							content: 'VIEW HERE';
						}
					}

					&::before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-image: linear-gradient(to top, rgba(var(--linkcolor), 0.8) 0%, rgba(var(--linkcolor), 0.8) 50%, rgba(var(--linkcolor), 0.4) 70%, rgba(var(--linkcolor), 0) 100%);
						transition: 0.4s;
					}
				}

				&:hover {
					margin: -12px 0;
					height: 169px;

					&>.ItemInner {
						&>.Title {
							bottom: 83px;
						}

						&>.ItemIcon {
							opacity: 1;
						}

						&::before {
							background-image: linear-gradient(to top, rgba(var(--linkcolor), 0.8));
						}
					}
				}
			}

			&:nth-child(4n + 1),
			&:nth-child(4n + 4) {
				--linkcolor: var(--color2)
			}

			&:nth-child(4n + 2),
			&:nth-child(4n + 3) {
				--linkcolor: var(--color1)
			}
		}
	}
}

/* home welcome*/
body section.mod_chunky_welcome.ParagraphBloq {
	padding: 125px 20px !important;

	&>div.Welcome {
		&>.WelcomeFlex {
			position: relative;

			&>label {
				font-size: 16px;
				padding: 16px 10px;
				letter-spacing: 0.1em;
				border-width: 2px;
			}

			&>input:checked+label {
				border-color: rgb(var(--color1));
				background-color: rgb(var(--color1));
			}

			&>.ItemImage {
				height: fit-content;
				top: auto;
				bottom: 0;

				&>.ItemBefore {
					border-radius: 50%;
					position: relative;
					top: 0;
				}
			}

			&>h3.Title {
				line-height: 1.1em;
				margin-bottom: 0;
			}
		}
	}

	&::before {
		content: '';
		position: absolute;
		width: 19vw;
		height: 500px;
		right: 17px;
		top: -10px;
		background-image: var(--redbell);
		background-position: 100% 0%;
		background-size: contain;
		background-repeat: no-repeat;
		opacity: 0.1;
	}
}

/* HOME BANNER */
section.ParagraphBloq.mod_none {
	background-color: rgb(var(--color1));
	padding: 13px 20px !important;
	z-index: 1;

	&>div.Blockquote {
		position: relative;
		z-index: 1;

		ul {
			position: relative;
			max-width: 1200px;

			&>li .Item .ItemInner .ItemContent {
				text-align: center;

				&>.paracontent {
					color: white;
					font-family: var(--font-heading);
					font-style: italic;
					font-size: calc(var(--fs1) + 10px);
				}

				&::before,
				&::after {
					display: none;
				}
			}
		}

		&::before {
			content: '';
			position: absolute;
			width: 220px;
			height: calc(100% + 26px);
			left: -20px;
			top: -13px;
			background-image: var(--whitebell);
			background-position: 0% 0%;
			background-repeat: no-repeat;
			background-size: contain;
			opacity: 0.1;
		}

		&::after {
			content: '';
			position: absolute;
			width: 220px;
			height: calc(100% + 26px);
			right: -20px;
			top: -13px;
			background-image: var(--whitebell);
			background-position: 100% 0%;
			background-repeat: no-repeat;
			background-size: contain;
			opacity: 0.1;
		}
	}
}

/* HOME EVENTS */
section.mod_bubbles_slider.CalendarBloq {
	padding: 45px 30px 120px 30px !important;

	&>h2.bloqTitle {
		position: relative;
	}

	&>.filterSourceSideBySideButtons {
		&>.FilterSet {
			justify-content: center;
			position: relative;
			margin-bottom: 50px;

			&>.buttonstyle {
				min-width: 110px;
				border: 1px solid rgb(var(--color4));
				color: rgb(var(--color4));
				margin: 5px 7px;
				font-size: 13px;

				&.selected {
					background-color: rgb(var(--color4));
					color: white;
				}

				&:hover {
					background-color: rgb(var(--color4));
					color: white;
				}
			}
		}

		&>.sourceButtonWrapper {
			bottom: calc(var(--hp-bloq-padding) - var(--button-gap) + 20px);
		}

		.calendarPageLink {
			display: inline-grid;
			place-items: center;
			background-color: rgba(var(--button-background-color), 1);
			padding: var(--button-padding);
			font-size: var(--button-font-size);
			color: rgba(var(--button-color), 1);
			cursor: pointer;
			text-decoration: none;
			text-align: center;
			text-transform: var(--button-text-transform);
			border: var(--button-border);
			margin: var(--button-gap);
			border-radius: var(--button-border-radius);
			font-family: var(--button-font-family);
			font-weight: var(--button-font-weight);
			line-height: 1.5em;
		}
	}

	&>div.Slider {
		max-width: none;

		&>.SliderInner>ul>li .Item .ItemInner {
			&>.ItemDate {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 5px;

				&>d:first-child {
					letter-spacing: 0.09em;
				}

				&>d:nth-child(2) {
					font-size: 17px;
					line-height: 17px;
					letter-spacing: 0.1em;
				}

				&>d:nth-child(n+3) {
					color: rgb(var(--color2));
					left: 118px;
				}

				&>i {
					color: rgb(var(--color4));
				}

				&:not(:has(i))::after {
					color: rgb(var(--color2));
				}
			}

			&>.Title {
				color: rgb(var(--color2));
				font-size: 23px;
			}

			&>.ItemContent .paracontent .cardBottomLinks a {
				&::before {
					color: rgb(var(--color2));
					text-transform: none;
				}

				&::after {
					color: rgb(var(--color4));
				}
			}
		}

		&>.nav {
			bottom: -19px;
		}
	}

	&::before {
		content: '';
		position: absolute;
		width: calc(100% - 30px);
		height: calc(100% + 10px);
		top: -10px;
		left: 15px;
		background-color: #f2f2f2;
	}
}

/* HOME VALUES */
section.QuotesBloq {
	padding: 0 0 80px 0 !important;

	&>div.Concertina ul li {
		position: relative;
		--value-color: var(--color1);

		&>.Item {
			&>.ItemInner {
				transform: translateY(43%);
				z-index: 2;
				position: relative;

				&>.ItemIcon {
					display: none;
				}

				&>.Title {
					color: white;
					font-family: var(--font-normal);
					font-size: 16px;
					letter-spacing: 0.05em;
					text-transform: uppercase;
					margin-bottom: 0;
					transition: 0.4s;
					opacity: 0;

				}

				&>.ItemSubtitle {
					font-size: calc(var(--fs1) - 5px);
					font-weight: 700;
					font-family: var(--font-heading);
					color: white;
				}

				&>.ItemContent .paracontent {
					&>.buttonstyle {
						display: none;
					}
				}

				&::before {
					display: none;
				}
			}
		}

		&:hover {
			&>.Item &>.ItemInner {
				&>.Title {
					opacity: 1;
				}
			}

			&::before {
				background-image: linear-gradient(to top, rgba(var(--value-color), 0.8));
			}
		}

		&:nth-child(even) {
			--value-color: var(--color2)
		}

		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(to top, rgba(var(--value-color), 0.8) 0%, rgba(var(--value-color), 0.8) 20%, rgba(var(--value-color), 0.4) 50%, rgba(var(--value-color), 0) 60%);
			left: 0;
			top: 0;
			z-index: 1;
		}
	}

}

div.homelowerwrapper {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		width: calc(100% - 30px);
		height: 55%;
		bottom: 0;
		left: 15px;
		background-image: var(--homebackgroundimage);
		background-size: cover;
		background-position: 50% 50%;
	}

	&::after {
		content: '';
		position: absolute;
		width: calc(100% - 30px);
		height: 100%;
		left: 15px;
		top: 0;
		background-image: linear-gradient(to bottom, rgba(var(--grey10), 1) 0%, rgba(var(--grey10), 1) 45%, rgba(var(--grey10), 0.95) 55%, rgba(var(--grey10), 0.95) 100%);

	}

	/* HOME LOWER QUOTES */

	&>section.QuotesBloq {
		--block-quote-max-width: 1070px;
		padding: 80px 20px 110px 20px !important;
		z-index: 1;

		&>div.Blockquote ul {
			justify-content: center;

			&>li .Item {
				&>.ItemInner {
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;

					&>.Title {
						margin-top: 20px;
						margin-bottom: 0;
						text-transform: uppercase;
						font-family: var(--font-normal);
						font-size: 26px;
						letter-spacing: 0.1em;
						color: rgb(var(--color4));
					}

					&>.ItemSubtitle {
						margin-top: 2px;
						margin-bottom: 35px;
						text-transform: uppercase;
						font-family: var(--font-normal);
						font-size: 15px;
						letter-spacing: 0.1em;
						color: rgb(var(--color1));
						font-weight: 700;
					}

					&>.ItemContent {
						order: -1;

						&>.paracontent {
							font-style: italic;
							color: rgb(var(--color1));
							font-size: calc(var(--fs2) - 2px);
						}

						&::before,
						&::after {
							display: none;
						}
					}
				}
			}

			&>.switcherlabel {
				margin: 5px 5px 0;
				opacity: 1;
				background-color: rgb(var(--color4));
			}

			&>.switcherradio:checked+.switcherlabel {
				background-color: rgb(var(--color1));
			}
		}
	}
}

/* ATTENDANCE */
div.attendancewrapper {
	padding-bottom: 100px;
	position: relative;
	z-index: 1;

	&>h2.bloqTitle {
		text-align: center;
		position: relative;
		z-index: 1;
	}

	&>div.tabset {
		justify-content: center;
		position: relative;
		z-index: 1;

		&>label.tabsettab {
			display: inline-grid;
			place-items: center;
			background-color: rgba(var(--button-background-color), 1);
			padding: var(--button-padding);
			cursor: pointer;
			text-decoration: none;
			text-align: center;
			text-transform: var(--button-text-transform);
			border-radius: var(--button-border-radius);
			font-family: var(--button-font-family);
			font-weight: var(--button-font-weight);
			line-height: 1.5em;
			letter-spacing: 0.09em;
			min-width: 110px;
			border: 1px solid rgb(var(--color4));
			color: rgb(var(--color4));
			margin: 5px 7px;
			font-size: 13px;
			flex-grow: 0;

			&:hover {
				background-color: rgb(var(--color4));
				color: white;
			}
		}

		&>input:checked+label.tabsettab {
			background-color: rgb(var(--color4));
			color: white;
		}

		&>section.mod_chunky_bars {
			max-width: 850px;
			margin: 61px auto 0 auto;
			--text-space: 140px;

			&>div.Bars>ul>li .statistic {
				&>.StatText {
					border-radius: 20px;
					overflow: hidden;

					&>.StatTitle {
						line-height: 38px;
						text-align: center;
						background-color: rgba(var(--grey8), 1);
						font-size: 15px;
						font-weight: 600;
						letter-spacing: 0.08em;
						color: white;

					}

					&>.AnimationWrapper {
						height: 38px;
						background-color: rgba(var(--grey8), 1);

						&>.StatFigure {
							line-height: 38px;
							font-weight: 700;
							font-size: 21px;
							padding: 0 19px 0 5px;
						}

						&>.AnimationElement {
							border-radius: 0 20px 20px 0;
						}
					}
				}
			}
		}
	}

	&::before {
		content: '';
		position: absolute;
		width: 19vw;
		height: 500px;
		right: 15px;
		top: 100px;
		background-image: var(--redbell);
		background-position: 100% 0%;
		background-size: contain;
		background-repeat: no-repeat;
		opacity: 0.1;
	}

	&::after {
		content: '';
		position: absolute;
		width: 19vw;
		height: 500px;
		left: 15px;
		top: 100px;
		background-image: var(--redbell);
		background-position: 0% 0%;
		background-size: contain;
		background-repeat: no-repeat;
		opacity: 0.1;
	}
}




@media only screen and (max-width: 800px) {
	div.hometopwrapper {
		&::before {
			width: 100%;
			left: 0;
		}
	}

	body section.mod_chunky_welcome.ParagraphBloq {
		&>div.Welcome {
			&>.WelcomeFlex {
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				padding-right: 0;

				&>label {
					flex: 0 1 auto;
					min-width: 240px;
					padding: 12px 10px;
					margin-left: 0;
					font-size: 14px;
				}

				&>.ItemImage {
					display: none;
				}
			}
		}
	}

	section.ParagraphBloq.mod_none div.Blockquote ul li .Item .ItemInner .ItemContent .paracontent {
		font-size: calc(var(--fs1) - 5px);
	}

	section.mod_bubbles_slider.CalendarBloq {
		padding: 45px 20px 120px 20px !important;

		&::before {
			width: 100%;
			left: 0;
		}
	}

	div.attendancewrapper {
		padding: 0 20px 50px 20px !important;
	}

	div.homelowerwrapper section.QuotesBloq {
		padding: 0px 20px 100px 20px !important;
	}

	div.homelowerwrapper {

		&::before,
		&::after {
			left: 0;
			width: 100%;
		}
	}
}

