/*
 *
 * Theme main styles
 */
* {
	box-sizing: border-box;
}


html,
body {
	margin: 0;
	padding: 0;
	border: 0;
	scroll-behavior: smooth;
	background: var(--color-primary);
	/* background: var(--color-primary-dark); */

}

body {
	min-height: 100%;
	height: auto;
	overflow-x: hidden;
	font-family: var(--typography_fonts_text);
	font-size: var(--typography_size_html);
	color: var(--color-font-dark);

}

a {
	color: var(--color-font-dark);
	text-decoration: none;
	outline: 0;
	font-weight: 500;

	border-bottom: 1px dotted;
}

a:hover {
	color: var(--color-font-dark);
	text-decoration: none;
	border-bottom: 1px solid;
}


h1,
h2,
h3,
.entry-content h3,
.pre-title,
button,
.button,
.tiny-text,
nav {
	font-family: var(--typography_fonts_headings);
}

h1,
h2,
h3 {
	word-wrap: break-word;
	white-space: normal;
}

.container-small,
.small-text-col .main>.container {
	max-width: 650px;
}

.main>.container,
.main>article {
	padding-top: 40px;
}

a.anchor {
	display: block;
	position: relative;
	top: -80px;
	visibility: hidden;
}


.container-wide {
	max-width: 9999px;
	width: auto;
	padding: 0 20px;
}

.container-wide-swiper {
	display: flex;
	justify-content: center;
	max-width: 9999px;
	width: auto;
	padding: 0 20px;
}

/* prevent double width */
.container .container {
	width: 100%;
}

.text-uppercase {
	text-transform: uppercase;
}

.tiny-text {
	font-weight: 300;
	font-size: 9px;
}

.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}

.flex-center {
	justify-content: center;
}

.flex-center>* {
	margin-left: 20px;
	margin-right: 20px;
}

.flex-top {
	align-items: flex-start;
}


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

.content.hidden {
	display: none;
}

.single-insight .content {
	padding-top: 40px;
}

.header {
	background: rgba(var(--color-primary-dark-darker-rgb), 0.8);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
	transition: all 250ms ease-in-out;
}

.header.sticky {
	background: var(--color-primary-dark-darker);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.header .menu-bar,
.footer .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
}

.header .menu-bar {
	padding: 10px 0;
}

@media only screen and (max-width: 1120px) {
	.header .menu-bar nav {
		height: 100px;
	}
}
@media only screen and (max-width: 900px) {
	.header .menu-bar nav {
		height: unset
	}
}

.header a.logo {
	display: block;
	width: 300px;
	height: 60px;
	background: url(../img/new_logo/hagetisse-logo-langwerpig-wit.png) no-repeat left top / cover;
	background-size: contain;
	border-bottom: none;
}

.header.sticky a.logo {
	background: url(../img/new_logo/hagetisse-logo-langwerpig-wit.png) no-repeat left top / cover;
	background-size: contain;
}



/*
 * Sections
 * ======================================================== */
.main {
	padding-top: 100px;
	padding-bottom: 40px;

}

.page-template-page-contact .main {
	padding-bottom: 0;
}

section {}

#hero {
	height: 100vh;
	position: relative;
}

#testimonials,
#nugget,
#customers {
	padding: 40px 0;
}




/*
 * Hero
 * ======================================================== */
#hero .swiper-slide {
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#hero .container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	align-content: center;
}

#hero .container.hero-right {
	align-items: flex-end;
}

.pre-title {
	font-size: 1.7rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .1rem;
	color: #fff;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

h1,
h2,
h3 {
	letter-spacing: .05rem;
}

h1.site-title {
	font-size: 8rem;
	line-height: 1.1;
	font-weight: 700;
	margin-bottom: 4rem;
	color: #fff;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

@media (max-width: 800px) {
	h1.site-title {
		font-size: 6rem;
	}
}

@media (max-width: 600px) {
	h1.site-title {
		font-size: 5rem;
	}
}

#hero .hero-right .pre-title,
#hero .hero-right h1.site-title {
	max-width: 660px;
	text-align: right;
}

#hero .button {
	transform-origin: top left;
	transform: scale(1.2);
}

#hero .hero-right .button {
	transform-origin: top right;
}

#hero .scroll {
	position: absolute;
	left: 50%;
	bottom: -10px;
	z-index: 5;
	width: 50px;
	height: 50px;
	padding: 5px;
	background: var(--color-primary-accent);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
}

/*
 * Homepage styles
 * ======================================================== */
#what,
#why,
#how,
#actual {
	padding: 40px 0;
}

.what-content .text,
.about-content .text {
	width: 60%;
}

.image-holder {
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#actual .image-holder {
	min-width: 300px;
}

.image-holder img {
	max-width: 80%;
	width: 80%;
	height: auto;
}

#why {
	background: #ddd;
}

.why-content .text {
	margin: 0 auto;
	padding-bottom: 20px;
	/* border-bottom: 1px solid #ccc; */
}

#how {
	background: #f0f0f0;
	text-align: center;
}


@media only screen and (max-width: 800px) {
	.why-content.flex-center {
		display: block;
		text-align: center;
	}

	.why-content .text {
		width: 80%;
	}

}

#what {
	padding-top: 0;
	padding-bottom: 0;
}

.what-boxes {
	position: relative;
	z-index: 5;
}

#what .row.one {
	background: #f0f0f0 url(../img/bg-big-arrow.png) no-repeat center bottom;
}

#what-one {
	top: -100px;
	position: relative;
}

#what-two {
	top: -60px;
	top: 80px;
	position: relative;
}

.direct-contact-ref {
	display: inline-block;
	position: absolute;
	background: var(--color-primary-dark);
	color: #fff;
	padding: 3px 10px;
	right: 120px;
	font-family: 'Walsheim', sans-serif;
	font-size: 11px;
	border-radius: 0 0 6px 6px;
}

.direct-contact-ref:hover {
	color: var(--color-primary-accent);
}

@media (max-width: 600px) {
	.direct-contact-ref {
		right: 40px;
	}
}

.what-item {
	position: relative;
	padding: 30px;
	background: #fff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	margin-bottom: 40px;
	transition: all 250ms ease-in-out;
}

.what-item:hover {
	box-shadow: 0 1px 11px 0 rgba(0, 0, 0, 0.4);
	top: -1px;
}

.what-item h2 {
	padding: 0;
	margin-bottom: 0;
	font-size: 3rem;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.4);
	text-transform: uppercase;
	cursor: pointer;
}

.what-item.intro h2 {
	color: var(--color-primary-accent);
}

@media (max-width: 800px) {
	.what-item h2 {
		font-size: 2.5rem;
	}
}

@media (max-width: 600px) {
	.what-item h2 {
		font-size: 2rem;
	}
}

.what-item .cta-box {
	text-align: center;
	padding-top: 30px;
}

#what-cta {
	padding: 80px 0;
	background: #f0f0f0;
}

.what-ctas {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media only screen and (max-width: 800px) {
	.what-ctas {
		display: block;
		text-align: center;
	}

	.what-ctas>a,
	.what-ctas>span {
		margin-bottom: 20px;
	}
}

.what-ctas .button {
	margin-bottom: 0;
}

.what-ctas .separator {
	display: inline-block;
	padding: 0 20px;
}

.what-ctas-extra {
	padding: 30px 0 0 0;
}

.what-ctas-extra p {
	margin-bottom: 0;
}

.what-item.arrow {
	padding-top: 160px;
	box-shadow: none;
	margin-bottom: 40px;
}

.what-item.arrow:hover {
	box-shadow: none;
	top: 0;
}

.what-item.arrow svg {
	transform: scale(2) scaleY(-1) rotate(125deg);
}

.what-text {
	position: relative;
	top: -20px;
}

#what-one .what-item.arrow {
	padding-top: 60px;
	text-align: right;
}

#what-one .what-item.arrow svg {
	transform: scale(2) scaleY(-1) rotate(100deg);
}

@media (max-width: 550px) {

	#what-one,
	#what-two {
		top: -30px;
	}

	.what-item.arrow {
		padding-top: 40px;
		text-align: center;
	}

	.what-item.arrow svg {
		transform: scale(1.5) scaleY(-1) rotate(125deg);
	}

	#what-one .what-item.arrow svg {
		transform: scale(1.5) scaleY(-1) rotate(100deg);
	}

}


#process {
	padding: 40px 0 0 0;
}

#process h2 {
	text-align: center;
}

.process-items {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}

.process-item {
	width: 20%;
	margin-top: 20px;
}

@media only screen and (max-width: 900px) {
	.process-item {
		width: 25%;
	}
}

@media only screen and (max-width: 760px) {
	.process-item {
		width: 33%;
	}
}

@media only screen and (max-width: 600px) {
	.process-item {
		width: 50%;
	}
}

@media only screen and (max-width: 480px) {
	.process-item {
		width: 100%;
	}
}




.process-item:hover {
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
}

.process-item .icon {
	width: 60px;
	height: 60px;
	margin: 0 auto;
}

.process-item .icon img {
	width: 60px;
	height: 60px;
}

.process-item .text {
	padding: 10px 20px 20px 20px;
	text-align: center;
	font-size: 14px;
}

.process-item .text h3 {
	font-size: 21px;
	font-weight: 600;
	position: relative;
	font-family: 'Walsheim', 'Arial', sans-serif;
	text-align: center;
}

.process-item .text p {
	margin-bottom: 0;
}





#popup-contact-form-box {
	display: none;
	justify-content: center;
	position: relative;
	z-index: 10;
	height: 10px;
	width: 100%;
}

#popup-contact-form-box.open {
	display: flex;
}

#popup-contact-form {
	display: block;
	position: absolute;
	bottom: -10px;
	background: var(--color-primary-accent);
	width: 300px;
	box-shadow: 0px 0px 100px 100px #fff;
	transform: scale(0);
	transition: transform 5s ease-in-out;
}

#popup-contact-form-box.open #popup-contact-form {
	transform: scale(1);
}

#popup-contact-form .inner {
	padding: 40px 10px 10px 10px;
}

#popup-contact-form form,
#popup-contact-form form p {
	margin-bottom: 0;
}

#popup-contact-form label,
#popup-contact-form br {
	display: none;
}

#popup-contact-form input,
#popup-contact-form textarea {
	width: 100% !important;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 0;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff;
	font-family: 'Bitter', serif;
	font-size: 16px;
}

#popup-contact-form input:focus,
#popup-contact-form textarea:focus {
	border-bottom: 1px solid rgba(255, 255, 255, 1);
}

#popup-contact-form input[type="submit"] {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 1);
	border-bottom: 1px solid rgba(255, 255, 255, 1);
	color: var(--color-primary-accent);
	font-size: 11px;
	font-family: 'Walsheim', sans-serif;
}

#popup-contact-form input[type="submit"]:hover,
#popup-contact-form input[type="submit"]:focus {
	background-color: rgba(255, 255, 255, 1);
}

#popup-contact-form .bar a.close-form {
	position: absolute;
	display: block;
	right: 10px;
	top: 10px;

}

#popup-contact-form .bar a.close-form {
	color: #fff;
}

#popup-contact-form .wpcf7 .ajax-loader {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: rgba(var(--color-primary-accent-rgb), 0.8);
	background-image: url('../img/ajax-loader.gif');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 40px 40px;
	background-position: center center;
	pointer-events: none;
}

/*
.how-diagram {
	padding: 40px 0;
}
.how-diagram .diagram-item {
	position: relative;
	margin-top: 36px;
	z-index: 1;
}
.how-diagram .diagram-item a {
	display: block;
	position: relative;
	background: #fff;
	padding: 20px;
	text-align: left;
	box-shadow: -8px 8px 0 0 rgba(0,0,0,0.05);
}
.how-diagram .diagram-item .number {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	line-height: 48px;
	font-family: 'Walsheim';
	font-weight: 700;
	font-size: 24px;
	background: #fff;
	color: var(--color-primary-accent);
	text-align: center;
	top: 10px;
	box-shadow: -8px 8px 0 0 rgba(0,0,0,0.05);
}
.how-diagram #how-one .diagram-item:first-child {
	margin-top: 0;
}
.how-diagram #how-one .diagram-item .number {
	right: -40px;
	z-index: -1;
}
.how-diagram #how-two .diagram-item .number {
	left: -42px;
	z-index: 0;
}
.how-diagram .diagram-item h3 {
	margin-bottom: 8px;
	font-family: 'Walsheim';
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0;
}
.how-diagram .diagram-item a:hover {
	background: var(--color-primary-accent);
	color: #fff;
}
.how-diagram .diagram-item a:hover .number {
	background: var(--color-primary-accent);
	border: 2px solid var(--color-primary-accent);
	color: #fff;
}
*/

.home-video {
	padding: 40px 0 120px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}

.home-video-box {
	width: 600px;
	width: 62.5%;

}

.home-video-text {
	width: 360px;
	width: 37.5%;
	padding-left: 40px;
}

@media (max-width: 600px) {
	.home-video {
		display: block;
	}

	.home-video-box {
		width: 100%;

	}

	.home-video-text {
		width: 100%;
		padding-left: 0;
		padding-top: 60px;
	}
}


.home-video-media {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	z-index: 2;
	box-shadow: -10px 10px 0 0 rgba(0, 0, 0, 0.2);
}

.home-video-media iframe,
.home-video-media .video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.home-video-media .video-overlay {
	background: #fff;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.home-video-media:hover {
	box-shadow: -10px 10px 0 0 rgba(0, 0, 0, 0.3);
}

.home-video-box:before {
	position: absolute;
	display: block;
	content: " ";
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: var(--color-primary-accent);
	left: -80px;
	top: 30%;
	z-index: 1;
}

@media (max-width: 600px) {
	.home-video-box:before {
		display: none;
	}
}

.home-video-media a .play-button {
	z-index: 3;
	transform: scale(1.5);
	transform-origin: center center;
}

.home-video-media a:hover .play-button {
	transform: scale(1.6) rotate(120deg);
}

.home-video-media a:hover .play-button:hover {
	transform: scale(1.6) rotate(120deg);
}

/*
.home-video-media img,
.home-video-media iframe {
	display: block;
	max-width: 100%;
	width: 100%;
	height: 100%;
	position: relative;
}



*/




/*
 * Regular content
 * ======================================================== */
.main h1 {
	font-size: 2.281em;
	line-height: 1.19;

}

.main h2 {
	font-size: 2.8rem;
	font-weight: 400;
}

.main h3 {
	font-size: 2.4rem;
}

.main ul {
	list-style: disc inside;
}

blockquote {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	font-size: 140%;
	font-weight: 100;
}

img.alignright {
	float: right;
	margin-left: 20px;
	max-width: 50%;
	width: auto;
	height: auto;
}

img.alignleft {
	float: left;
	margin-right: 20px;
	max-width: 50%;
	width: auto;
	height: auto;
}

.entry-content a:not(.button) {
	color: var(--color-primary-accent);
	text-decoration: underline dotted;
	;
}

.entry-content a:not(.button):hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

h1 .type {
	display: block;
	font-family: 'Bitter', serif;
	font-size: 17px;
	font-style: italic;
	color: #bbb;
}

.nugget-cat {
	padding-bottom: 20px;
}

.cat-icon.fa.fa-tags {
	color: var(--color-primary-dark);

}

.cat-icon.fa.fa-tags:hover {
	color: var(--color-primary-accent);

}


.cat-name {
	display: inline-block;
	margin-left: 10px;
	padding: 0px 6px;
	border-radius: 4px;
	font-family: 'Walsheim', sans-serif;
	background: var(--color-primary-light-hover);
	color: #999;
}

.overview .entry-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 20px;
	cursor: pointer;
	background-color: var(--color-primary-light);
	margin-bottom: 10px;
}

.overview .entry-item .box-img {
	width: 200px;
	height: 200px;
	overflow: hidden;
	flex-shrink: 0;
}

.overview .entry-item .box-img img {
	max-width: 100%;
	width: auto;
	height: auto;
}

.overview .entry-item:hover .box-img img {
	max-width: 100%;
	width: auto;
	height: auto;
	transform: scale(1.05);
}

.overview .entry-item .item-content {
	padding: 20px;
	position: relative;
	flex-grow: 5;
	height: 200px;
}

.overview .entry-item:hover .item-content {
	background: #f6f6f6;
}

.overview .entry-item .item-content .inner-arrow {
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.overview .entry-item:hover .item-content .inner-arrow {
	color: var(--color-primary-accent);
}

.tw-pagination {
	margin: 0 auto;
	text-align: center;
	padding: 20px 0;
}

.tw-pagination li {
	list-style: none;
	display: inline-block;
	padding-right: 6px;
}

.tw-pagination a,
.tw-pagination .current,
.tw-pagination .prev,
.tw-pagination .next {
	display: inline-block;
	margin-right: 4px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	background: #e7e7e7;
	border: 1px solid #d7d7d7;
	color: #666666;
}

.tw-pagination .prev,
.tw-pagination .next {
	color: #666666;
	background: #f7f7f7;
	border: 1px solid #e7e7e7;
}

.tw-pagination .current {
	color: var(--color-primary-accent);
	background: #fff;
	border: 1px solid var(--color-primary-accent);
}

.tw-pagination a:hover {
	background: #d7d7d7;
	border: 1px solid #d7d7d7;
	color: #333;
}

.tw-pagination .prev:hover,
.tw-pagination .next:hover {
	color: #333;
	background: #e7e7e7;
	border: 1px solid #e7e7e7;
}

@media only screen and (max-width: 800px) {
	.contact.flex {
		display: block;
	}
}




/*
 * Buttons and forms
 * ======================================================== */
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
	color: #FFF;
	background-color: var(--color-primary-accent);
	border-color: var(--color-primary-accent);
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
	color: #FFF;
	background-color: var(--color-primary-accent-hover);
	border-color: var(--color-primary-accent-hover);
}

.button.button-large,
button.button-large,
input[type="button"].button-large {
	height: 46px;
	padding: 0 36px;
	font-size: 13px;
	line-height: 46px;
	border-radius: 6px;

}

.button:hover {
	text-decoration: none;
}


.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	background: rgb(var(--color-primary-accent-rgb), 0.5);
	border-radius: 50%;
	border: 4px solid rgb(var(--color-primary-accent-rgb), 0.5);
	margin: -27px 0 0 -27px;
	transition: all 250ms ease-in-out;
	transform: scale(1) rotate(0deg);
}

a:hover .play-button {
	background: rgb(var(--color-primary-accent-rgb), 1);
	border: 4px solid rgb(var(--color-primary-accent-rgb), 1);
	transform: scale(1.2) rotate(120deg);
}

a:hover .play-button:hover {
	background: rgb(0, 0, 0, 1);
	border: 4px solid rgb(0, 0, 0, 1);
	transform: scale(1.2) rotate(120deg);
}



div.wpcf7-response-output {
	margin: 1em 0.5em 1em;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
	border: 2px solid #f7e700;
	background-color: #f7e700;
	color: var(--color-primary-dark);
	font-size: 13px;
}

div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
	border: 2px solid #ff0000;
	background-color: #ff0000;
	color: #fff;
	font-size: 13px;
}

div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14;
	background-color: #398f14;
	color: #fff;
	font-size: 13px;
}

span.wpcf7-not-valid-tip {
	color: #fff;
	font-size: 0.8em;
	font-weight: normal;
	display: block;
	background: #f00;
	padding: 1px 4px;
	margin-bottom: 3px;
	position: relative;
}

span.wpcf7-not-valid-tip:before {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #f00;
	content: "";
	bottom: -5px;
	left: 10px;
}



/*
 * Grid (isotope) Nugget Overview
 * ======================================================== */

.container-nugget-overview {
	/* background: yellow; 
	display: block;
	height: 100%; */

}

@media only screen and (max-width: 900px) {
	.container-nugget-overview {
		margin-top: -150px;
	}
}

.nugget-grid {
	margin-bottom: 150px;
}

.nugget-overview-title {
	color: var(--color-font-light);
	padding-left: 10px;
	margin-bottom: 4rem;
}

.nugget-img-box img {
	width: 100%;
	max-width: 100%;
	margin-bottom: 30px;
}

.fancybox-medium .img-box img {
	max-width: 100%;
}

iframe {
	max-width: 100%;
}

.fancybox {
	display: block !important;
}

.fancybox-medium {
	max-width: 600px;
}

.grid-item {
	width: 100%;
	padding: 8px;
	/* padding: 8px 0; */
}

.recipe-container .grid-item,
.publications-container .grid-item {
	padding: 8px 0;
}



.grid-item--width2 {
	width: 100%;
}



/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.grid-item {
		width: 50%;
	}

	.grid-item--width2 {
		width: 100%;
	}

	.recipe-container .grid-item,
	.publications-container .grid-item {
		padding: 8px;
	}
}

/* Larger than tablet */
@media (min-width: 750px) {
	.grid-item {
		width: 33.33%;
	}

	.grid-item--width2 {
		width: 66.67%;
	}
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


.nugget-item .inner {
	position: relative;
	background: var(--color-primary-light);
	padding: 10px 10px 20px 10px;
	font-weight: 300;
}

.nugget-item:hover a {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.nugget-item:hover .inner {
	background: var(--color-primary-light-hover);
}

.nugget-item.article_own .inner {
	background: var(--color-primary-accent);
	color: var(--color-font-light);
}

.nugget-item.article_own:hover .inner {
	background: var(--color-primary-accent-hover);
}

.nugget-item .expl-link {
	display: block;
	position: relative;
	background: var(--color-primary-light);
	padding: 4px 10px 4px 10px;
	color: var(--color-primary-accent);
	border-top: 1px solid var(--color-primary-accent);
}

.nugget-item:hover .expl-link {
	background: var(--color-primary-light-hover);
	transition: all 250ms ease-in-out;
}

.nugget-item .expl-link:hover {
	background: #ddd;
	color: var(--color-primary-accent);
}

.nugget-item h2,
.nugget-item h3 {
	font-size: 21px;
	font-weight: 600;
	position: relative;
	font-family: 'Walsheim', 'Arial', sans-serif;
}

.nugget-item.article_own h2,
.nugget-item.article_own h3 {
	color: #fff;
}

.nugget-item h2.title-ontop,
.nugget-item h3.title-ontop {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 6px 0 10px 10px;
	margin-bottom: 0;
	color: #fff;
	font-weight: 300;
	font-size: 18px;
	width: 100%;
	/* text-shadow: 0 0 8px rgba(0,0,0,0.15); */
	background-color: rgba(var(--color-primary-dark-rgba), 0.7);
}

.nugget-item h2:after,
.nugget-item h3:after {
	position: absolute;
	content: "";
	width: 50%;
	height: 1px;
	background: var(--color-primary-accent);
	left: -10px;
	bottom: -8px;
}

.nugget-item.article_own h2:after,
.nugget-item.article_own h3:after {
	background: rgba(255, 255, 255, 0.5);
}

.nugget-item h2.title-ontop:after,
.nugget-item h3.title-ontop:after {
	display: none;
}

.nugget-item .img-box {
	width: 100%;
	min-height: 160px;
	height: auto;
	overflow: hidden;
	position: relative;
}

/*.nugget-item .img-box.img-box-square {
	height: 300px;
}
*/

.nugget-item .img-box img {
	width: 100%;
	height: 160px;
	display: block;
	object-fit: cover;
	transition: all 250ms ease-in-out;
}

.nugget-item .img-box.img-box-square img {
	height: auto;
}

.nugget-item:hover .img-box img {
	transform: scale(1.05);
}

.nugget-item .cat {
	position: absolute;
	bottom: 0;
	right: 0;
}

.nugget-item .cat-name {
	display: inline-block;
	background: var(--color-primary-dark);
	color: #fff;
	padding: 2px 8px;
}

.nugget-item .quote-small {
	position: relative;
	padding: 15px 15px 40px 15px;
	font-size: 18px;
	font-weight: 200;
}

.nugget-item .quote-small .author {
	position: absolute;
	bottom: 15px;
	right: 15px;
	font-size: 14px;
	font-weight: 300;
	font-style: italic;
	letter-spacing: 0.2px;
	color: #999;
}

/* .nugget-item .quote-small:before {
	position: absolute;
	top: -1px;
	left: -8px;
	font-size: 41px;
	font-weight: bold;
	content: "“";
	font-family: Georgia, Times, serif;
	color: #ddd;
} */


/* .quote-big {
	position: relative;
	padding: 15px 15px 45px 15px;
	font-size: 21px;
	font-weight: 200;
	max-width: 400px;
} */
/* .quote-big .author {
	position: absolute;
	bottom: 15px;
	right: 15px;
	font-size: 17px;
	font-weight: 300;
	font-style: italic;
	letter-spacing: 0.2px;
	color: #999;
} */
/* .quote-big:before {
	position: absolute;
	top: -1px;
	left: -8px;
	font-size: 41px;
	font-weight: bold;
	content: "“";
	font-family: Georgia, Times, serif;
	color: #ddd;
} */


/*
 * Swipers
 * ======================================================== */

/*
Moved to hagetisse-main.css

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") !important;
	right: 10px;
	color: var(--color-white);
}

@media only screen and (max-width: 1200px) {}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") !important;
	left: 10px;
	color: var(--color-white);
}

.swiper-pagination-bullet-active {
	opacity: 1;
	background: #fff;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--color-primary-accent);
}

*/


/* #testimonials
   ---------------------------------------- */
.accordion a {
	color: var(--color-primary-light);
}

.accordion .a2a_svg svg path {
	fill: var(--color-primary-light);
}

.accordion,
.accordion li {
	list-style: none;
	padding-left: 0;
}

.accordion h2 {
	cursor: pointer;
	font-size: 2.4rem;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
	position: relative;
}

.accordion h2 .icon {
	position: absolute;
	right: 20px;
	top: 5px;
	color: rgba(0, 0, 0, 0.3);
}

.accordion h2:hover .icon {
	color: rgba(0, 0, 0, 1);
}

.accordion .collapse {
	/* background: var(--color-primary-light-hover); */
	background: var(--color-primary-dark);
	padding: 20px;
	color: var(--color-font-light);
	font-weight: 300;
}

.accordion .collapse p:last-child {
	margin-bottom: 0;
}



/* #testimonials
   ---------------------------------------- */
/*
#testimonials {
	background: var(--color-primary-accent);
}
#testimonials h2 {
	color: #fff;
}
#testimonials h3 {
	font-size: 1.8rem;
	letter-spacing: 0px;
}
.testimonial-caroussel {
	width: 100%;
	height: 100%;

	position: relative;
}
.testimonial-caroussel .swiper-slide {}
.testimonial-quote {
	position: relative;
	padding: 0 0 10px 10px;
}
.testimonial-quote .inner {
	padding: 16px;
	background: #fff;
	position: relative;
	box-shadow: -10px 10px 0px 0px var(--color-primary-accent-hover);
}
.testimonial-quote::after,
.testimonial-quote .inner::after {
    position: absolute;
    width: 0;
    height: 0;
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-primary-accent-hover);
    bottom: -10px;
    left: 42px;
}
.testimonial-quote .inner::after {
    border-top: 10px solid #fff;
	bottom: -10px;
}
.testimonial-quote .inner p {
	font-size: 14px;
}
.testimonial-author {
	display: flex;
	align-items: center;
	padding: 30px 16px;
}
.testimonial-author .avatar {
	min-width: 90px;
	max-width: 90px;
	width: 90px;
	height: auto;
	border-radius: 50%;
}
.testimonial-author .text {
	padding-left: 16px;
}
.testimonial-author .text p {
	margin-bottom: 1px;
}
.testimonial-author .text p.testimonial-author-title {
	font-size: 85%;
	font-weight: 300;
}
.testimonial-swiper-button-next {
	right: -35px;
}
.testimonial-swiper-button-prev {
	left: -35px;
}

*/

/* Door Daan Toegevoegd */
/* #testimonials
   ---------------------------------------- */
#nugget {
	/* background: var(--color-primary-accent); */
	background: var(--color-primary-light-hover)EEE;
}

#nugget h2 {
	/* color: #fff; */
	color: var(--color-primary-dark);
}

.nugget-caroussel {
	width: 100%;
	height: 100%;
	position: relative;
}

.nugget-caroussel .swiper-wrapper {
	align-items: center;
}

.nugget-caroussel .swiper-slide {}

/*
.nugget-title {
	position: relative;
	padding: 0 0 10px 10px;
}
*/
.nugget-swiper-button-next {
	right: -35px;
}

.nugget-swiper-button-prev {
	left: -35px;
}

.nugget-slide .inner-box,
.nugget-slide .inner {
	position: relative;
	background: var(--color-primary-light);
	font-size: 15px;
}

/*
.nugget-slide .inner {
	padding: 10px 10px 20px 10px;
}
.nugget-slide:hover a {
	color: var(--color-primary-dark);
	text-decoration: none;
}
.nugget-slide:hover .inner {
	background: var(--color-primary-light-hover);
}
.nugget-slide.article_own .inner {
	background: var(--color-primary-accent);
}
.nugget-slide.article_own:hover .inner {
	background: var(--color-primary-accent-hover)
}
.nugget-slide .expl-link {
	display: block;
	position: relative;
	background: var(--color-primary-light);
	padding: 4px 10px 4px 10px;
	color: var(--color-primary-accent);
	border-top: 1px solid var(--color-primary-accent);
}
.nugget-slide:hover .expl-link {
	background: var(--color-primary-light-hover);
	transition: all 250ms ease-in-out;
}
.nugget-slide .expl-link:hover {
	background: #ddd;
	color: var(--color-primary-accent);
}

.nugget-slide h3 {
	font-size: 21px;
	font-family: 'Walsheim', 'Arial', sans-serif;
	font-weight: 600;
	position: relative;
}
.nugget-slide.article_own h3 {
	color: #fff;
}
.nugget-slide h3.title-ontop  {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0 0 10px 10px;
	margin-bottom: 0;
	color: #fff;
	text-shadow: 0 0 8px rgba(0,0,0,0.15);
}
.nugget-slide h3:after {
	position: absolute;
	content: "";
	width: 50%;
	height: 1px;
	background: var(--color-primary-accent);
	left: -10px;
	bottom: -8px;
}
.nugget-slide.article_own h3:after {
	background: rgba(255,255,255,0.5);
}
.nugget-slide h3.title-ontop:after {
	display: none;
}
.nugget-slide .img-box {
	width: 100%;
	height: 160px;
	overflow: hidden;
	position: relative;
}
.nugget-slide .img-box.img-box-square {
	height: 300px;
}
.nugget-slide .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 250ms ease-in-out;
}
.nugget-slide .img-box.img-box-square img {
	height: auto;
}
.nugget-slide:hover .img-box img {
	transform: scale(1.05);
}
.nugget-slide .cat {
	position: absolute;
	bottom: 0;
	right: 0;
}
.nugget-slide .cat-name {
	display: inline-block;
	background: var(--color-primary-dark);
	color: #fff;
	padding: 2px 8px;
}
.nugget-slide .quote-small {
	position: relative;
	padding: 15px 15px 40px 15px;
	font-size: 18px;
	font-weight: 200;
}
.nugget-slide .quote-small .author {
	position: absolute;
	bottom: 15px;
	right: 15px;
	font-size: 14px;
	font-weight: 300;
	font-style: italic;
	letter-spacing: 0.2px;
	color: #999;
}
.nugget-slide .quote-small:before {
	position: absolute;
	top: -1px;
	left: -8px;
	font-size: 41px;
	font-weight: bold;
	content: "“";
	font-family: Georgia, Times, serif;
	color: #ddd;
}
*/



/* conatct page
 *
 * ============================= */
.gmap {
	width: 100%;
	height: 400px;
	border: #ccc solid 1px;
	margin: 0;
}

/* fixes potential theme css conflict */
.gmap img {
	max-width: inherit !important;
}






/*
 * Clients
 * ======================================================== */
#customers h2 {
	font-size: 18px;
	text-align: center;
}

#customers .logo-container {
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#customers .logo-container>div {
	width: 20% !important;
	text-align: center;
}

#customers .logo-container img {
	width: 80% !important;
	height: auto;
	filter: grayscale(100%);
	opacity: 0.5;
}

#customers .logo-container div:hover img {
	filter: grayscale(0%);
	opacity: 1;
}




/*
 * Contact footer
 * ======================================================== */
#contact {
	background: #ddd;
	padding: 40px 0;
	font-size: 14px;
}

#contact .container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-content: space-between;
	flex-wrap: wrap;
}

#contact .container>div {
	width: 25%;
	padding-right: 20px;
}

@media only screen and (max-width: 800px) {
	#contact .container>div {
		width: 50%;
		padding-right: 20px;
	}
}

@media only screen and (max-width: 800px) {
	#contact .container>div {
		width: 100%;
		padding-right: 0px;
	}
}

.adress-type {
	font-style: italic;
}

/*
 * Footer
 * ======================================================== */
.footer {
	background: var(--color-primary-dark);
	color: #ccc;
	font-size: 12px;
}

.footer .section.container .left,
.footer .section.container .right {
	width: 50%;
}

.footer a {
	color: #ddd;
}

.footer a:hover {
	color: #fff;
}


.grecaptcha-badge {
	visibility: collapse !important;
}


/*
 * Development shizzle
 * ======================================================== */

.dev-opts {
	position: absolute;
	z-index: 900;
	top: 80px;
	width: 350px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	left: -350px;
}

.dev-opts.open {
	left: 0;
}

.dev-opts-btn {
	position: absolute;
	display: block;
	z-index: 901;
	right: -34px;
	top: 10px;
	width: 34px;
	height: 34px;
	background: #fff;
	padding: 8px;
	box-shadow: 5px 0 5px 0 rgba(0, 0, 0, 0.2);
	cursor: pointer;
	border-radius: 0 4px 4px 0;
}

.dev-opts-btn svg {
	width: 18px;
	height: 18px;
}