@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'LucyCousins';
	src: url('../font/LucyCousins.otf') format('opentype'),
	url('../font/LucyCousins.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Form-elementen erven font-family niet; zonder deze regel vallen ze terug op
   de browser-default (Arial). Site-breed op het paginafont (Montserrat) zetten. */
input,
textarea,
select,
button {
	font-family: inherit;
}

.top_label {
	font-family: 'LucyCousins', cursive;
	font-size: 14px;
	line-height: 20px;
	color: var(--green);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.entry-content .top_label {
	font-size: 20px;
	line-height: 29px;
	font-weight: 400;
	text-transform: none;
}

#page {
	overflow: clip;
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#page > footer {
	margin-top: auto;
}

html,
body {
	padding: 0;
	margin: 0;
	max-width: 100%;
	color: var(--font-color);
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	line-height: 1.625;
}

@media (max-width: 991px) {
	html,
	body {
	}
}

.entry-content p {
	font-size: 16px;
	line-height: 1.625;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1350px; /* 1320px content + 15px left/right padding */
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.container.small_container {
	max-width: 1298px; /* 1268px content + 15px left/right padding */
}

button,
.button {
	padding: 14px 24px;
	border-radius: 40px;
	background-color: var(--green);
	color: white;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.42px;
	border: none;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

button:hover,
.button:hover {
	background-color: var(--pink);
}

.pink_inverse {
	background-color: transparent;
	color: var(--pink);
	border: 2px solid var(--pink);
}

.pink_inverse:hover {
	background-color: var(--dark-pink);
	border-color: var(--dark-pink);
	color: white;
}

.dark_inverse {
	background-color: transparent;
	color: var(--font-color);
	border: 2px solid var(--font-color);
}

.dark_inverse:hover {
	background-color: var(--pink);
	border-color: var(--pink);
	color: white;
}

.green_inverse {
	background-color: transparent;
	color: var(--green);
	border: 2px solid var(--green);
}

.green_inverse:hover {
	background-color: var(--dark-green);
	border-color: var(--dark-green);
	color: white;
}

.pink_button {
	background-color: var(--pink);
}

.pink_button:hover {
	background-color: var(--dark-pink);
}

.blue_button {
	background-color: var(--blue);
}

.blue_button:hover {
	background-color: var(--dark-blue);
}

.white_button {
	background-color: #FFF;
	color: var(--blue);
	border: 1px solid #FFF;
}

.white_button:hover {
	background-color: var(--blue);
	color: #FFF;
	border-color: #FFF;
}

input[type="text"],
input[type="email"] {
	padding: 12px 20px;
	border-radius: 34px;
	border: 2px solid var(--green);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.42px;
	transition: border-color 0.3s ease;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder {
	color: var(--font-color);
	text-transform: uppercase;
	transition: color 0.3s ease;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="email"]:hover,
input[type="email"]:focus {
	border-color: var(--pink);
	outline: none;
}

input[type="text"]:hover::placeholder,
input[type="text"]:focus::placeholder,
input[type="email"]:hover::placeholder,
input[type="email"]:focus::placeholder {
	color: var(--pink);
}

h1, h2, h3, h4, h5, h6,
.entry-content h2 {
	margin-top: 0;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
}

h2,
.entry-content h2 {
	font-size: 42px;
	line-height: 1.24;
	font-family: 'Montserrat', sans-serif;
}

h2, h3 {
	line-height: 1;
}

h3 {
	font-size: 28px;
}

p {
	margin-top: 0;
}

.secondary_link {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.42px;
	color: var(--font-color);
	transition: color 0.3s ease;
}

.secondary_link:hover {
	color: var(--pink);
}

.page-template-page-in-company .secondary_link:hover {
	color: var(--blue);
}

.courses-page-overview__breadcrumbs,
.tt-course-page__breadcrumbs {
	margin-bottom: 39px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.42px;
	color: #000;
}

.tt-course-page__subtitle {
	margin: 0 0 27px;
	font-size: 20px;
	line-height: 36px;
}

.tt-breadcrumbs__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tt-breadcrumbs__item a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.tt-breadcrumbs__item a:hover {
	color: var(--pink);
}

.tt-breadcrumbs__item--current {
	color: inherit;
}

.tt-breadcrumbs__separator {
	margin: 0 8px;
	color: inherit;
}

.tt-page-surface {
	background-color: var(--beige, #fdefda);
	position: relative;
	overflow: visible;
}

.page-in-company-page {
	background-color: var(--light-blue, #DDEAF5);
	position: relative;
	overflow: visible;
	padding-bottom: 150px;
}

.page-in-company-page .divider_curves {
	color: var(--light-blue, #DDEAF5);
}

.tt-page-surface::before {
	content: '';
	position: absolute;
	top: -25px;
	left: 0;
	width: 100%;
	height: 303px;
	background: linear-gradient(0deg, #fdefda 33.13%, #fff 93.11%);
	z-index: 0;
	pointer-events: none;
}

.tt-page-surface > .container {
	position: relative;
	z-index: 1;
}

.tt-page-surface__shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

.tt-page-surface__shape--green {
	width: 498px;
	height: 498px;
	background: var(--lighter-green, #ddf1e1);
	top: 0;
	left: 60px;
	transform: translateX(-100%);
}

.tt-page-surface__shape--beige {
	width: 218px;
	height: 218px;
	background: var(--beige, #fdefda);
	top: 0;
	right: 0;
}

.tt-page-surface__shape--pink {
	width: 300px;
	height: 300px;
	background: var(--light-pink, #fce4f2);
	top: 400px;
	right: 60px;
	transform: translateX(100%);
}

.divider_curves {
	position: absolute;
	width: 100%;
	left: 0;
	height: 36px;
	line-height: 0;
}

.divider_curves .curves_mobile {
	display: none;
}

.header_curves {
	top: 0;
	transform: translateY(-100%);
}

.footer_curves {
	bottom: 0;
	transform: translateY(100%);
	z-index: 1;
}

div.fullwidth {
	overflow: visible;
}

.ht-ctc {
	left: 15px !important;
	right: auto !important;
}

@media (max-width: 991px) {
	#wpadminbar {
		display: none !important;
	}

	html,
	body {
		margin-top: 0 !important;
	}

	.page-in-company-page .vc_custom_1499760143066 {
		margin-bottom: 0 !important;
	}

	.page-in-company-page {
		padding-bottom: 143px;
	}
}

@media (max-width: 767px) {
	.divider_curves {
		height: 24px;
	}

	.divider_curves .curves_desktop {
		display: none;
	}

	.divider_curves .curves_mobile {
		display: block;
	}

	.entry-content .top_label {
		font-size: 14px;
		line-height: 20px;
	}

	.ht-ctc {
		display: none !important;
	}

	h2, .entry-content h2 {
		font-size: 28px;
		line-height: 36px;
		font-family: 'Montserrat', sans-serif;
	}

	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.page-in-company-page .container .container {
		padding-left: 0;
		padding-right: 0;
	}
}

.vc_col-sm-8 .wpb_wrapper {
	max-width: 746px;
}

/* Een 1/3-kolom die op mobiel onder een 2/3-kolom stapelt krijgt ruimte erboven. */
@media (max-width: 767px) {
	.vc_col-sm-8 + .vc_col-sm-4 {
		margin-top: 49px;
	}
}

/* Opt-in utility voor WPBakery-rijen (zet "tt-stack-991" in het veld
   Extra class name van de rij): kolommen stapelen al vanaf <=991px i.p.v.
   WPBakery's standaard 767px. */
@media (max-width: 991px) {
	.tt-stack-991 > .vc_col-sm-8,
	.tt-stack-991 > .vc_col-sm-4 {
		width: 100%;
		float: none;
	}

	.tt-stack-991 > .vc_col-sm-8 + .vc_col-sm-4 {
		margin-top: 49px;
	}

	.tt-stack-991 .vc_col-sm-8 .wpb_wrapper {
		max-width: 100%;
	}
}

/* WPBakery content-elementen: ruimte eronder, behalve het laatste. */
.wpb_content_element:not(:last-child) {
	margin-bottom: 24px;
}

/* WPBakery buttons (vc_btn3) — standaard stijl.
   !important omdat VC's color/style-classes (vc_btn3-color-warning,
   vc_btn3-style-3d) anders bg/box-shadow/positie overrulen. */
.vc_btn3-container a.vc_btn3 {
	border-radius: 40px !important;
	text-align: center;
	background-color: var(--pink, #E4087E) !important;
	padding: 15px 24px !important;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 0.42px;
	font-weight: 600;
	/* 3D-shadow + neerwaartse beweging van vc_btn3-style-3d uit; transparante
	   rand zodat de outline-variant dezelfde hoogte houdt. */
	box-shadow: none !important;
	border: 2px solid transparent !important;
	top: 0 !important;
	text-decoration: none !important;
	/* !important omdat .page-default-surface .entry-content a de transition
	   anders beperkt tot alleen 'color' (bg sprong dan abrupt). */
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Default hover: donkerdere pink, geen beweging/underline. */
.vc_btn3-container a.vc_btn3:hover,
.vc_btn3-container a.vc_btn3:focus {
	background-color: var(--dark-pink, #C20068) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: none !important;
	top: 0 !important;
	text-decoration: none !important;
}

/* Tussenruimte tussen twee knoppen naast elkaar. We zetten de marge op de
   EERSTE knop (die gevolgd wordt door een andere) als margin-right, i.p.v.
   margin-left op de tweede. Zo staat de ruimte als trailing marge achter de
   eerste knop (onzichtbaar aan het regeleinde) en houdt de tweede knop géén
   linkermarge zodra hij naar een eigen regel wrapt. */
.vc_btn3-container:has(+ .vc_btn3-container) {
	margin-right: 24px;
}

.vc_btn3-container + .vc_btn3-container a.vc_btn3 {
	background-color: transparent !important;
	color: var(--pink, #E4087E) !important;
	border: 2px solid var(--pink, #E4087E) !important;
}

/* Outline hover: vult met normale pink, witte tekst. */
.vc_btn3-container + .vc_btn3-container a.vc_btn3:hover,
.vc_btn3-container + .vc_btn3-container a.vc_btn3:focus {
	background-color: var(--pink, #E4087E) !important;
	color: #fff !important;
	border-color: var(--pink, #E4087E) !important;
	box-shadow: none !important;
	top: 0 !important;
	text-decoration: none !important;
}

/* Single image (VC): afgeronde hoeken. */
.wpb_single_image img {
	border-radius: 15px;
}

/* Default page template: h2-styling. */
.page-template-default h2 {
	font-size: 28px;
	line-height: 36px;
	margin-top: 64px;
	margin-bottom: 28px;
}

/* Op mobiel krappere bovenmarge. */
@media (max-width: 767px) {
	.page-template-default h2 {
		margin-top: 48px;
	}
}

/* Geen margin-top als de h2 het allereerste element is in de main (col-sm-8) kolom. */
.page-template-default .vc_col-sm-8 .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child > .wpb_wrapper > h2:first-child {
	margin-top: 0;
}

.vc_col-sm-4 .vc_do_btn {
	margin-bottom: 32px;
}

.vc_do_btn {
	margin-bottom: 36px;
}

.vc_do_btn:last-child {
	margin-bottom: 0;
}

.wpb_text_column + .vc_do_btn,
.wpb_text_column + .vc_do_btn + .vc_do_btn {
	margin-top: 6px;
}

/* ===== WooCommerce-notices in huisstijl =====
   WooCommerce' eigen stylesheet is gedequeued (zie inc/enqueue.php), dus deze
   meldingen kwamen volledig kaal binnen: geen kader, geen achtergrond, en bij
   errors zelfs de bullet en inspring van de generieke <ul>-opmaak. Geldt voor
   alle vier de vormen: <div class="woocommerce-message">, <ul
   class="woocommerce-error"> (los of in een .woocommerce-NoticeGroup) en
   <div class="woocommerce-info">. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 2px solid;
    border-radius: 15px;
    list-style: none;
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;
    color: var(--font-color, #0A2636);
}

.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-message li + li,
.woocommerce-error li + li,
.woocommerce-info li + li {
    margin-top: 6px;
}

.woocommerce-message {
    border-color: var(--green, #1FA238);
    background: var(--light-green, #DCF1E0);
}

.woocommerce-error {
    border-color: var(--red, #D42121);
    background: var(--light-red, #FBE3E3);
}

.woocommerce-info {
    border-color: var(--blue, #1A75BB);
    background: var(--lighter-blue, #EEF5FA);
}

/* Links in meldingen (bv. "View cart") in dezelfde tekstkleur. */
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.woocommerce-message a:hover,
.woocommerce-message a:focus,
.woocommerce-error a:hover,
.woocommerce-error a:focus,
.woocommerce-info a:hover,
.woocommerce-info a:focus {
    text-decoration: underline;
}

/* Tekst alleen voor schermlezers: visueel verborgen, wel voorleesbaar.
   Standaardregel van WordPress; dit thema bracht hem niet mee, waardoor teksten
   als "Original price was: €75." zichtbaar naast een actieprijs stonden. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    word-wrap: normal !important;
}