/*
 * Header and footer of sportmassage-eerde.nl, matching what Elementor Pro templates
 * 586 (header) and 249 (footer) rendered. Breakpoints follow Elementor's: tablet up
 * to 1024px, mobile up to 767px. Colours and type come from the Elementor kit's
 * --e-global-* variables (Site Settings), with the current values as fallbacks.
 */

.sm-header,
.sm-footer {
	--sm-primary: var(--e-global-color-primary, #888973);
	--sm-light: var(--e-global-color-text, #f6f6f1);
}

/* Header ------------------------------------------------------------------ */

.sm-header {
	display: flex;
	margin-top: 50px;
}

.sm-header__brand,
.sm-header__menu {
	width: 50%;
	padding: 10px;
}

.sm-header__brand {
	text-align: center;
}

.sm-header .custom-logo-link {
	display: inline-block;
}

.sm-header .custom-logo {
	display: inline-block;
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.sm-menu__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.sm-menu__list a {
	display: flex;
	padding: 13px 20px;
	color: var(--sm-primary);
	font-family: var(--e-global-typography-f631c60-font-family, "Trirong"), sans-serif;
	font-size: var(--e-global-typography-f631c60-font-size, 18px);
	font-weight: var(--e-global-typography-f631c60-font-weight, 600);
	font-style: var(--e-global-typography-f631c60-font-style, normal);
	line-height: var(--e-global-typography-f631c60-line-height, 14px);
	letter-spacing: var(--e-global-typography-f631c60-letter-spacing, 3px);
	word-spacing: var(--e-global-typography-f631c60-word-spacing, 0);
	text-transform: var(--e-global-typography-f631c60-text-transform, uppercase);
	text-decoration: none;
	transition: .4s;
}

.sm-menu__list a:hover,
.sm-menu__list a:focus {
	color: var(--sm-primary);
	transform: scale(1.2);
}

.sm-menu-toggle {
	display: none;
}

@media (max-width: 1024px) {
	.sm-header {
		margin-top: 20px;
		padding: 0 20px;
	}

	.sm-header__brand {
		text-align: left;
	}

	.sm-header .custom-logo {
		width: 50%;
	}

	/* Hello's reset styles every <button>; undo that for the toggle. */
	.sm-menu-toggle,
	.sm-menu-toggle:hover,
	.sm-menu-toggle:focus {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		padding: .25em;
		border: 0;
		border-radius: 3px;
		background-color: rgba(0, 0, 0, .05);
		color: var(--sm-primary);
		font-size: 50px;
		line-height: 1;
		cursor: pointer;
	}

	.sm-menu-toggle svg {
		width: 1em;
		height: 1em;
		fill: currentColor;
	}

	.sm-menu-toggle[aria-expanded="true"] .sm-menu-toggle__open,
	.sm-menu-toggle[aria-expanded="false"] .sm-menu-toggle__close {
		display: none;
	}

	.sm-menu {
		max-height: 0;
		margin-top: 10px;
		overflow: hidden;
		background-color: var(--sm-light);
		visibility: hidden;
		transform: scaleY(0);
		transform-origin: top;
		transition: max-height .3s, transform .3s, visibility .3s;
	}

	.sm-menu.is-open {
		max-height: 100vh;
		visibility: visible;
		transform: scaleY(1);
	}

	.sm-menu__list {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.sm-menu__list a,
	.sm-menu__list a:hover,
	.sm-menu__list a:focus {
		justify-content: center;
		padding: 10px 20px;
		border-left: 8px solid transparent;
		transform: none;
	}
}

@media (max-width: 767px) {
	.sm-header {
		margin-top: 0;
		padding: 50px 20px 0;
	}

	.sm-header .custom-logo {
		width: 75%;
	}

	.sm-menu-toggle,
	.sm-menu-toggle:hover,
	.sm-menu-toggle:focus {
		font-size: 25px;
	}
}

/* Footer ------------------------------------------------------------------ */

.sm-footer {
	padding: 100px 0 50px;
	border-top: 5px solid #cecece;
	background-color: #ededed;
}

.sm-footer__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px;
}

.sm-footer__top,
.sm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
}

.sm-footer__intro,
.sm-footer__signup,
.sm-footer__legal {
	width: 50%;
	padding: 10px;
}

.sm-footer__title {
	margin: 0;
	color: var(--sm-primary);
	font-family: var(--e-global-typography-primary-font-family, "Trirong"), sans-serif;
	font-size: var(--e-global-typography-primary-font-size, 35px);
	font-weight: var(--e-global-typography-primary-font-weight, 400);
	font-style: var(--e-global-typography-primary-font-style, normal);
	line-height: var(--e-global-typography-primary-line-height, 45px);
	letter-spacing: var(--e-global-typography-primary-letter-spacing, 1px);
	word-spacing: var(--e-global-typography-primary-word-spacing, 0);
	text-transform: var(--e-global-typography-primary-text-transform, uppercase);
}

.sm-newsletter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	box-shadow: 0 0 48px 0 rgba(0, 0, 0, .11);
}

.sm-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Hello's reset styles inputs and buttons; these override it completely. */
.sm-newsletter .sm-newsletter__email {
	width: 66.666%;
	min-height: 33px;
	padding: 4px 12px;
	border: 0;
	border-radius: 0;
	background-color: #fff;
	color: var(--sm-primary);
	font-family: var(--e-global-typography-text-font-family, "Mulish"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 16px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	font-style: var(--e-global-typography-text-font-style, normal);
	line-height: var(--e-global-typography-text-line-height, 26px);
	letter-spacing: var(--e-global-typography-text-letter-spacing, 2px);
	word-spacing: var(--e-global-typography-text-word-spacing, 0);
	text-transform: var(--e-global-typography-text-text-transform, none);
}

.sm-newsletter .sm-newsletter__email::placeholder {
	color: inherit;
	font-family: inherit;
	opacity: .6;
}

.sm-newsletter .sm-newsletter__submit,
.sm-newsletter .sm-newsletter__submit:hover,
.sm-newsletter .sm-newsletter__submit:focus {
	width: 33.333%;
	min-height: 40px;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background-color: var(--sm-primary);
	color: var(--sm-light);
	font-family: var(--e-global-typography-2a6f91a-font-family, "Mulish"), sans-serif;
	font-size: var(--e-global-typography-2a6f91a-font-size, 16px);
	font-weight: var(--e-global-typography-2a6f91a-font-weight, 700);
	font-style: var(--e-global-typography-2a6f91a-font-style, normal);
	line-height: var(--e-global-typography-2a6f91a-line-height, 26px);
	letter-spacing: var(--e-global-typography-2a6f91a-letter-spacing, 2px);
	word-spacing: var(--e-global-typography-2a6f91a-word-spacing, 0);
	text-transform: var(--e-global-typography-2a6f91a-text-transform, none);
	cursor: pointer;
	transition: transform .3s;
}

.sm-newsletter .sm-newsletter__submit:hover,
.sm-newsletter .sm-newsletter__submit:focus,
.sm-newsletter .sm-newsletter__submit:active {
	transform: scale(1.1) rotate(4deg);
}

.sm-newsletter__message {
	margin: 10px 0 0;
	font-size: 1em;
	line-height: 1;
}

.sm-newsletter__message.is-success {
	color: #5cb85c;
}

.sm-newsletter__message.is-error {
	color: #d9534f;
}

.sm-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: 10px;
}

.sm-footer__follow {
	width: 50%;
	margin: 0;
	color: var(--sm-primary);
	font-family: var(--e-global-typography-text-font-family, "Mulish"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 16px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	font-style: var(--e-global-typography-text-font-style, normal);
	line-height: var(--e-global-typography-text-line-height, 26px);
	letter-spacing: var(--e-global-typography-text-letter-spacing, 2px);
	word-spacing: var(--e-global-typography-text-word-spacing, 0);
	text-transform: var(--e-global-typography-text-text-transform, none);
	text-align: center;
}

.sm-footer__facebook {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--sm-primary);
	font-size: 40px;
	line-height: 1;
}

.sm-footer__facebook:hover,
.sm-footer__facebook:focus {
	color: var(--sm-primary);
	animation: sm-pulse-grow .3s linear infinite alternate;
}

.sm-footer__facebook svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

@keyframes sm-pulse-grow {
	to {
		transform: scale(1.1);
	}
}

.sm-footer__legal {
	margin: 0;
	color: rgba(0, 0, 0, .38);
	font-family: var(--e-global-typography-primary-font-family, "Trirong"), sans-serif;
	font-size: 12px;
	font-weight: 300;
	font-style: var(--e-global-typography-primary-font-style, normal);
	line-height: var(--e-global-typography-primary-line-height, 45px);
	letter-spacing: var(--e-global-typography-primary-letter-spacing, 1px);
	word-spacing: var(--e-global-typography-primary-word-spacing, 0);
	text-transform: var(--e-global-typography-primary-text-transform, uppercase);
}

.sm-footer__credit {
	text-align: right;
}

.sm-footer__credit a,
.sm-footer__credit a:hover {
	color: inherit;
}

@media (max-width: 1024px) {
	.sm-footer {
		padding: 50px 20px;
	}

	.sm-footer__intro {
		width: 100%;
		margin-bottom: 20px;
		padding: 0;
	}

	.sm-footer__signup {
		width: 70%;
		padding: 0;
	}

	.sm-footer__legal {
		font-size: .5rem;
	}
}

@media (max-width: 767px) {
	.sm-footer {
		padding: 30px 20px;
	}

	.sm-footer__inner {
		padding: 0;
	}

	.sm-footer__signup {
		width: 100%;
	}

	.sm-newsletter .sm-newsletter__email,
	.sm-newsletter .sm-newsletter__submit,
	.sm-newsletter .sm-newsletter__submit:hover,
	.sm-newsletter .sm-newsletter__submit:focus {
		width: 100%;
	}

	.sm-footer__follow {
		width: 80%;
	}

	.sm-footer__legal {
		line-height: 15px;
	}
}

/* Tarieven: price cards built from free Elementor widgets ----------------- */
/*
 * The classes are set in the widgets' Advanced > CSS Classes field. The extra
 * "body .elementor" outranks Elementor's per-widget typography rule, which sets
 * the kit's 45px line-height on the price.
 */

.sm-price-card {
	overflow: hidden;
}

body .elementor .elementor-element.sm-price .elementor-heading-title {
	display: flex;
	justify-content: center;
	line-height: .8;
}

.sm-price__currency,
.sm-price__fraction {
	align-self: flex-start;
	font-size: .3em;
	line-height: 1;
}

.sm-price__currency {
	margin-right: 3px;
}

.elementor-widget-wrap > .elementor-element.sm-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	height: 150px;
	margin: 0;
	overflow: hidden;
	transform: rotate(90deg);
}

.sm-ribbon .elementor-heading-title {
	width: 200%;
	margin-top: 35px;
	background-color: var(--e-global-color-text, #f6f6f1);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
	text-align: center;
	transform: translateY(-50%) translateX(-50%) translateX(35px) rotate(-45deg);
}