/*
Style Responsive
Version: 1.0
Theme_URI: https://www.lemon.nl
Date: 05-2026
Author: Roeland ten Holder | Lemon
Author URI: roeland@lemon.nl
*/

/** ******************************** **/
/**      _____                       **/
/**    _(  _  )__________________    **/
/**   ( | (___)     | ____ |  _  |   **/
/**   |_|_______|_|_|______|_| |_|   **/
/**                                  **/
/**            www.lemon.nl          **/
/**                                  **/
/** ******************************** **/

/************* RESPONSIVE *************/
.desktop 		{ display: block; }
.desktop-inline { display: inline-block; }
.mobile,
.mobile-inline	{ display: none; }


/* Responsive menu */
.navbar-toggler {
	display: none;
	padding: 10px 9px;
	border: 0;
	/* position: fixed; */
	top: 19px;
	right: 16px;
	z-index: +2;
	width: 40px;
	height: 40px;
	border-radius: 0;
	background-color: transparent;
	transition: all 0.2s;
}

/* Closed show hamhurger */
.navbar-toggler:focus {
	box-shadow: none;
}

.navbar-toggler-inner,
.navbar-toggler-inner::before,
.navbar-toggler-inner::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--black);
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.navbar-toggler-inner::before 									{ content: " "; top: -7px; }
.navbar-toggler-inner::after 									{ content: " "; bottom: -7px; }

/* Opened show X */
.navbar-toggler:not(.collapsed) .navbar-toggler-inner 			{ transform: rotate(45deg); }
.navbar-toggler:not(.collapsed) .navbar-toggler-inner::before 	{ opacity: 0; }
.navbar-toggler:not(.collapsed) .navbar-toggler-inner::after 	{ transform: rotate(-90deg); bottom: 0; }




/* Extra breakpoint */
@media (max-width: 1269.98px) {
}


/* Extra breakpoint */
@media (max-width: 1169.98px) {
}


/* Bootstrap Breakpoint - Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
	h1, #nav h2					{ font-size: 70px; line-height: 1.00em; }
	h2							{ font-size: 44px; line-height: 1.00em; }
	h3, .faq-title, h4.big		{ font-size: 32px; line-height: 1.10em; }
	.has-step-cards-top h3 		{ font-size: 65px; line-height: 1.00em; }
	h4							{ font-size: 28px; line-height: 1.10em; }
	.has-step-cards-top p		{ font-size: 24px; line-height: 1.05em; }
	.footer h4 					{ font-size: 24px; line-height: 1.05em; }
	.headerwrapper h4			{ font-size: 21px; line-height: 1.05em; }
	h5 							{ font-size: 13px; line-height: 1.30em; }
	h6							{ font-size: 21px; line-height: 1.30em; }
	body						{ font-size: 18px; line-height: 1.15em; }
	.intro, .big				{ font-size: 21px; line-height: 1.25em; }
	.case p,  .card				{ font-size: 16px; line-height: 1.20em; }
	.date, .small, .small a 	{ font-size: 15px; line-height: 1.30em; }
	.tag						{ font-size: 12px; line-height: 1.20em; }
	.topmenu a, .button 		{ font-size: 16px; line-height:   26px; }
	.number						{ font-size: 60px; line-height: 1.20em; }
	.number-suffix 				{ font-size: 28px; line-height: 1.20em; }
	.number-big					{ font-size: 60px; line-height: 45px; }

	html { margin-top: 0 !important; }
	#wpadminbar { display: none !important; }

	/*
	.widthcontainer { max-width: calc(100% - 40px); }
	.container 		{ max-width: calc(100vw - 40px); }
	.smallcontainer { max-width: calc(100% - 40px); }
	*/

	.desktop,
	.desktop-inline	{ display: none; }
	.mobile 		{ display: block; }
	.mobile-inline 	{ display: inline-block; }

	.mobile-text-left 			{ text-align: left; }
	.mobile-text-right 			{ text-align: right; }
	.mobile-text-center			{ text-align: center; }

	.mobile-right 				{ float: right; }
	.mobile-left 				{ float: left; }
	.mobile-float-none 			{ float: none; }

	.headerwrapper 			{ aspect-ratio: 1/1;  }
	.case.headerwrapper.has-background-image { aspect-ratio: 1/1; }


	.navbar-toggler {
		display: block;
	}

	#primary-menu {
		display: block !important;
		position: fixed;
		width: 100vw;
		top: 102px;
		left: -102vw;
		z-index: 999;
		overflow-x: hidden;
		overflow-y: auto;
		transition: left 0.2s;
	}

	#primary-menu.show {
		left: 0;
		transition: left 0.2s;
	}

	#primary-menu ul {
		width: 100%;
		background-color: #ffffff;
	}

	#primary-menu > ul > li {
		padding: 0;
		margin: 0;
	}

	#primary-menu > ul > li a {
		display: block;
		padding: 17px 32px;
		border-bottom: 1px solid #eeeeee;
	}

	#primary-menu > ul > li > ul > li a {
		padding-left: 55px;
    }

	#primary-menu li.menu-search {
		display: none;
	}

	.sub-menu li:first-of-type, 
	.primary-menu .menu-item.all {
		margin-top: 0;
		padding-top: 0;
	}

	#primary-menu > ul > li.menu-item-has-children span {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 60px;
		text-align: center;
		/* font-size: 16px; */
		padding-top: 17px;
		border-left: 1px solid #eeeeee;
	}

	#primary-menu > ul > li.menu-item-has-children > a::after {
		display: none;
	}


	#primary-menu > ul > li.menu-item-has-children span::after {
		display: block;
		content: "▼";
		transition: all 0.2s;
	}

	#primary-menu > ul > li.menu-item-has-children span.open::after {
		transform: rotate(180deg);
		transition: all 0.2s;
	}

	#primary-menu .sub-menu {
		max-height: 0;
		overflow: hidden;
		position: relative;
		background-color: var(--submenu);
		margin: 0;
		padding: 0;
		border: none;
		opacity: 0;
	}

	.menu-item-has-children span {
		cursor: pointer;
	}

	#primary-menu .sub-menu.open {
		max-height: unset;
		opacity: 1;
	}




	#page1 .logo {
		max-width: calc(100% - 40px);
		margin: 0 auto;
	}

	#home-step-23 {
		text-align: left;
	}

	#home-step-1.active {
		top: calc(50vh - 78px);
	}

	#page2.active #home-step-3 {
		aspect-ratio: 1/1;
		background-size: 200%;
		animation: homestep3 linear;
	}

	@keyframes page2 {
		0%   {  }
		50%  { top: -10vh; }
		70%,100%  { top: -40vh; }
	}

	@keyframes homestep3 {
		0%   { }
		50%, 100%  { background-size: 240%; }
	}


	.how-card {
		display: unset;
	}

	.how-card > div {
		aspect-ratio: unset;
	}

	.has-how-card {
		border-right: unset;
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}

	.number-big {
		min-height: 150px;
		min-width: 50px;
		margin-right: 20px;
	}

	.how-card .tag {
		margin-bottom: 0px; 
	}





	.has-step-cards-top .stepbutton {
		margin-top: 60px;
	}

	.has-step-cards-top #steps {
		position: relative;
	}

	.has-step-cards-top .step1, 
	.has-step-cards-top .step2 {
		position: absolute;
		top: 0;
	}

	.has-step-cards-top .stepbutton,
	.has-step-cards-top .step0,
	.has-step-cards-top .step1,
	.has-step-cards-top .step2 { opacity: 0; }


	.has-step-cards-top .stepbutton.active,
	.has-step-cards-top .step.active { opacity: 1; }





	.has-step-cards {
		border-top: 1px solid rgba(0,0,0,0.2);
		overflow-x: hidden !important;
		overflow-y: hidden !important;
		max-width: 100%;
	}



	.has-step-cards .has-rows {
		/* width: 100vw; */
	}


	.has-step-cards .has-rows > div {
		height: 900px;
		position: relative;
	}

	.has-step-cards .has-rows .stepsrow {
		display: block;
		overflow: hidden;
		transition: left 0.5s;
		width: 100vw;
		max-width: 100%;
		position: absolute;
		top: 0;
	}

	.stepsrow {
		left: 101vw;
	}

	.row0 {
		left: 0;
	}

	.showrow1 .row0,
	.showrow2 .row0,
	.showrow3 .row0,
	.showrow4 .row0 { left: -101vw; }

	.showrow1 .row1,
	.showrow2 .row2,
	.showrow3 .row3,
	.showrow4 .row4 { left: 0; }

	.button.more {
		padding: 14px 5px 15px;
		text-align: center;
		width: 100%;
		max-width: 400px;
	}

	.has-step-card {
		width: 100%;
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}

	.has-step-card:last-of-type {
		border-right: 0;
	}

	.step-card {
		color: var(--black);
		opacity: 1;
		transition: all 0.3s;
		padding: 20px 0;
	}

	.step-card p,
	.step-card h4 {
		margin-bottom: 16px;
	}

	.step-card.fadeout {
		opacity: 0;
		transition: all 0.2s;
	}

	.has-step-card:first-of-type .step-card {
		/* padding-left: 0; */
	}

	.has-step-card:last-of-type .step-card {
		/* padding-right: 0; */
	}

	.step-card p {
		opacity: 1;
		font-size: 18px;
		font-weight: 100;
		line-height: 1.3em;
		transition: all 0.4s;
	}

	.step-card:hover,
	.step-card:hover div,
	.step-card:hover p {
		opacity: 1;
	}
}


/* Extra breakpoint */
@media (max-width: 889.98px) {

}


/* Bootstrap Breakpoint - Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {

	h1, #nav h2					{ font-size: 63px; line-height: 1.00em; }
	h2							{ font-size: 40px; line-height: 1.00em; }
	h3, .faq-title, h4.big		{ font-size: 28px; line-height: 1.10em; }
	.has-step-cards-top h3 		{ font-size: 58px; line-height: 1.00em; }
	h4							{ font-size: 25px; line-height: 1.10em; }
	.has-step-cards-top p		{ font-size: 21px; line-height: 1.05em; }
	.footer h4 					{ font-size: 21px; line-height: 1.05em; }
	.headerwrapper h4			{ font-size: 18px; line-height: 1.05em; }
	h6							{ font-size: 18px; line-height: 1.30em; }
	body						{ font-size: 18px; line-height: 1.15em; }
	.intro, .big				{ font-size: 18px; line-height: 1.25em; }

	.number						{ font-size: 60px; line-height: 1.20em; }
	.number-suffix 				{ font-size: 28px; line-height: 1.20em; }
	.number-big					{ font-size: 60px; line-height: 45px; }

	#nav .overlay {
		padding: 40px 20px;
	}
	#nav .overlay > .widthcontainer {
		padding: 0;
	}

	/*
	.pagewrapper 		{ width: 100%; margin-left: auto; margin-right: auto; }
	.fullcontainer 		{ width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
	.headerwrapper 		{ width: 100%; max-width: 100%; padding: 0; margin-left: auto; margin-right: auto; margin-bottom: 0px; }
	.widthcontainer 	{ width: calc(100% - var(--halfmargin)); padding-left: var(--quartmargin); padding-right: var(--quartmargin); margin-left: auto; margin-right: auto; }
	.headercontainer 	{ width: calc(100% - var(--halfmargin)); padding-left: var(--quartmargin); padding-right: var(--quartmargin); margin-left: auto; margin-right: auto; }
	.container 			{ width: calc(100% - var(--halfmargin)); padding-left: var(--quartmargin); padding-right: var(--quartmargin); margin-left: auto; margin-right: auto; }
	.navbar .container 	{ width: 100%; margin-left: auto; margin-right: auto; }
	.smallcontainer 	{ width: calc(100% - var(--halfmargin)); padding-left: var(--quartmargin); padding-right: var(--quartmargin); margin-left: auto; margin-right: auto; }
	*/
/* 
	.pagewrapper 		{ width: 100%; margin-left: auto; margin-right: auto; }
	.fullcontainer 		{ width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
	.headerwrapper 		{ width: 100%; max-width: 100%; padding: 0; margin-left: auto; margin-right: auto; margin-bottom: 0px; }
	.widthcontainer 	{ width: 100%; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }
	.headercontainer 	{ width: 100%; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }
	.container 			{ width: 100%; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }
	.navbar .container 	{ width: 100%; margin-left: auto; margin-right: auto; }
	.smallcontainer 	{ width: 100%; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }
 */


	.pagewrapper 		{ width: 100%; margin-left: auto; margin-right: auto; }
	.fullcontainer 		{ width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
	.headerwrapper 		{ width: 100%; max-width: 100%; padding: 0; margin-left: auto; margin-right: auto; margin-bottom: 0px; }
	.widthcontainer 	{ width: 100%; padding-left: var(--quartmargin); padding-right: var(--quartmargin); margin-left: auto; margin-right: auto; }
	.headercontainer 	{ width: 100%; padding-left: var(--quartmargin); padding-right: var(--quartmargin); margin-left: auto; margin-right: auto; }
	.container 			{ width: 100%; padding-left: var(--quartmargin); padding-right: var(--quartmargin); margin-left: auto; margin-right: auto; }
	.navbar .container 	{ width: 100%; margin-left: auto; margin-right: auto; }
	.smallcontainer 	{ width: 100%; padding-left: var(--quartmargin); padding-right: var(--quartmargin); margin-left: auto; margin-right: auto; }


	#page1 .logo {
		height: 200px;
		margin-top: calc(43vh - 100px);
	}

	#home-step-1.active {
		top: calc(43vh - 78px);
	}


	/* based on wait */
	#page2.active {
		top: 43vh;
		transition: all 0.6s ease-out;
	}


	#page2.active #home-step-3 {
		aspect-ratio: 1/1.2;
		background-size: 220%;
		animation: homestep3 linear;
	}


	@keyframes page2 {
		0%   {  }
		20%  { top: -40vh; }
		70%,100%  { top: -100vh; }
	}

	@keyframes homestep3 {
		0%   { }
		50%, 100%  { background-size: 220%; }
	}

	.single p:last-child,
	.single .content p:last-child,
	.single .has-button {
		margin-bottom: 30px;
	}


	.contentpaddingright p {
		padding-right: unset;
	}

	.page-template-page-yellow {
		padding-top: 45px;
	}
}


/* Bootstrap Breakpoint - Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {

}