/*
Theme Name: 	Arkin - Framework 2
Theme URI: 		https://www.lemon.nl
Description: 	01/2024
Version: 		2.13
Author: 		Roeland ten Holder | Lemon
Author 			URI: roeland@lemon.nl
*/

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

/*************** FONTS ****************/
/*
'Palanquin Dark'	normal			500
'Noto Sans'			normal/italic	400,600,700
*/

.home-card h2,
h1							{ font-size: 32px; line-height: 1em; font-weight: 500; font-style: normal; font-family: 'Palanquin Dark', Arial, Helvetica, Verdana, sans-serif; padding: 0 0 20px 0; }
h2, h2 a 					{ font-size: 26px; line-height: 1em; font-weight: 500; font-style: normal; font-family: 'Palanquin Dark', Arial, Helvetica, Verdana, sans-serif; padding: 0 0 20px 0; }
h3, .quoteblock h2, h3 a 	{ font-size: 22px; line-height: 1em; font-weight: 500; font-style: normal; font-family: 'Palanquin Dark', Arial, Helvetica, Verdana, sans-serif; padding: 0 0 20px 0; }
h4							{ font-size: 30px; line-height: 1em; font-weight: 500; font-style: normal; font-family: 'Palanquin Dark', Arial, Helvetica, Verdana, sans-serif; padding: 0 0 20px 0; }
h5							{ font-size: 26px; line-height: 1em; font-weight: 500; font-style: normal; font-family: 'Palanquin Dark', Arial, Helvetica, Verdana, sans-serif; padding: 0 0 0 0; }
h6							{ font-size: 18px; line-height: 1em; font-weight: 500; font-style: normal; font-family: 'Palanquin Dark', Arial, Helvetica, Verdana, sans-serif; padding: 0 0 5px 0; }
body 						{ font-size: 16px; line-height: 1.7em; font-weight: 400; font-style: normal; font-family: 'Noto Sans', Arial, Helvetica, Verdana, sans-serif; }
.card-body,
p span.intro, 
span.intro, p.intro 		{ font-size: 18px; line-height: 1.6em; font-weight: 400; }
.footer, .footer a,

.breadcrumbcontainer span,
.breadcrumbcontainer a,
.breadcrumb,
.small						{ font-size: 13px; line-height: 1.5em; font-weight: 400; font-style: normal; font-family: 'Noto Sans', Arial, Helvetica, Verdana, sans-serif; text-align: left; }
.gform_button.button,
.tag						{ font-size: 90px; line-height: 0.6em; font-weight: 400; font-style: normal; font-family: 'Noto Sans', Arial, Helvetica, Verdana, sans-serif; padding: 0 0 10px 0; }
ul.main-menu li a 			{ font-size: 30px; line-height: 0.9em; font-weight: 500; font-style: normal; font-family: 'Noto Sans', Arial, Helvetica, Verdana, sans-serif; display: inline-block; }
ul.main-menu li li a		{ font-size: 16px; line-height: 0.9em; font-weight: 500; font-style: normal; font-family: 'Noto Sans', Arial, Helvetica, Verdana, sans-serif; display: inline-block; }
ul.top-menu li a 			{ font-size: 18px; line-height: 0.9em; font-weight: 500; font-style: normal; font-family: 'Noto Sans', Arial, Helvetica, Verdana, sans-serif; padding: 0; margin-bottom: 5px; display: inline-block ;}
ul.small-top-menu li a 		{ font-size: 14px; line-height: 0.9em; font-weight: 500; font-style: normal; font-family: 'Noto Sans', Arial, Helvetica, Verdana, sans-serif; display: inline-block; color: #ffffff; }
h1 a, h2 a, h3 a, 
h4 a, h5 a, h6 a 			{ text-decoration: none; }









.has-keurmerk-topggz {
	position: absolute;
	right: 20px;
	bottom: 40px;
	width: unset;
}

.has-keurmerk-topggz p span {
	display: none;
}

.keurmerk-topggz {
	width: 80px;
	height: auto;
	border: 5px solid #fff !important;
	border-radius: 40px;
}

.card-body .keurmerk-topggz {
	position: absolute;
	right: 20px;
	top: -80px;
	width: 80px;
	height: auto;
	border: 5px solid #fff !important;
	border-radius: 40px;
}


.content li a,
.content p a:not(.btn):not(.card-link) {
	background: 
		linear-gradient(to right, #ffffff 0%, #ffffff 100%),
		linear-gradient(to right, #000000 0%, #000000 100%);
	background-size: 100% 1px, 0 1px;
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms;
	color: #777777;
	text-decoration: none;
}

.search-content a *,
.search-content a {
	text-decoration: none !important;
	color: #333333 !important;
}

.search-content a:hover *,
.search-content a:hover {
	opacity: 0.9;
}

.search-content a:hover h3 {
	text-decoration: underline !important;
}

.content li a:hover,
.content li a:focus,
.content p a:not(.btn):not(.card-link):hover,
.content p a:not(.btn):not(.card-link):focus {
	background-size: 0 1px, 100% 1px;
	transition: background-size 400ms;
	color: #000000;
	text-decoration: none;
}




#small-top-menu {
	position: absolute;
	right: 0;
}

.small-top-menu li {
	display: inline-block;
	margin: 0 7px;
}


.small-top-menu a,
.top-menu a,
.nav .sub-menu > li > a,
.nav .sub-menu > li.current-menu-item > a {
	padding: 0;
	margin: 0;
	background: 
		linear-gradient(to right, transparent 0%, transparent 100%),
		linear-gradient(to right, #ffffff 0%, #ffffff 100%);
	background-size: 100% 1px, 0 1px;
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms;
	text-decoration: none;
}

.small-top-menu a:hover,
.top-menu a:hover,
.nav .sub-menu > li > a:hover,
.nav .sub-menu > li.current-menu-item > a {
	text-decoration: none;
	background-size: 0 1px, 100% 1px;
	transition: background-size 400ms;
}

nav .socials {
	margin: 15px 0 15px 15px;
	float: left;
}

nav .languages {
	margin: 15px 15px 15px 0;
	float: left;
}

.languages a i {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 32px;
	border: 4px solid #ffffff;
	background-color: #ffffff;
}

.languages a i.flag {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 36px 24px;
}

.languages a i.flag.flag-en { background-image: url('images/flags/en.png'); }
.languages a i.flag.flag-gb { background-image: url('images/flags/gb.png'); }
.languages a i.flag.flag-iw { background-image: url('images/flags/iw.png'); }
.languages a i.flag.flag-ma { background-image: url('images/flags/ma.png'); }
.languages a i.flag.flag-nl { background-image: url('images/flags/nl.png'); }
.languages a i.flag.flag-pt { background-image: url('images/flags/pt.png'); }
.languages a i.flag.flag-tr { background-image: url('images/flags/tr.png'); }

.languages a:hover i.flag {
	opacity: 0.8;
}

nav .social-link {
	font-size: 32px;
	margin: 0 15px 0 0;
}

nav a.social-link:hover {
	opacity: 0.8;
}

.streamercontent p a:not(.btn):not(.card-link),
.streamercontent p a:not(.btn):not(.card-link):hover,
.streamercontent p a:not(.btn):not(.card-link):focus {
	color: #ffffff;
}

.relative { position: relative;}

.social-link,
.footer a 			{ background: none !important; color: #ffffff !important; text-decoration: none !important; }
.footer a:hover 	{ background: none !important; color: #ffffff; text-decoration: underline !important; }
.footer 			{ color: #ffffff; }

.social-link {
	font-size: 24px;
	margin: 0 10px 0 0;
}

/*<span style="text-decoration: underline;"></span>*/
span[style*="text-decoration: underline"],
u {
	text-decoration: none!important;
	padding: 0 2px;
	margin: 0 -2px;
}

/************* CONTAINERS *************/

.grid .content,
.grid {
	border: 1 px solid grey;
}

.headerwrapper 			{ margin-bottom: 40px; }
.breadcrumbcontainer 	{ margin: 20px -20px; }
.fullcontainer 			{ width: 100%; }
.widercontainer 		{ width: 100%; max-width: 880px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; }
.widthcontainer 		{ width: 100%; max-width: 840px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; }
.container 				{ width: 100%; max-width: 800px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; }

.row 					{ margin-left: -20px; margin-right: -20px; }
.row > * 				{ padding-left: 20px; padding-right: 20px; }
iframe 					{ max-width: 100%; }

.wrap {
	max-width: 100vw;
	overflow-x: hidden;
}



/************* FOOTER *************/

.footer-has-oval {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 250px;
	z-index: 1;
}

.footer-oval {
	position: absolute;
	left: calc(50% - 1500px);
	top: -525px;
	width: 3000px;
	height: 700px;
	border-radius: 50%;
	pointer-events: none;
}

.footerwrapper .container {
	position: relative;
	z-index: +1;
	padding-top: 240px;
}

.footer {
	padding-top: 30px;
	padding-bottom: 10px;
}

.footer-has-oval .container {
	position: relative;
	top: 190px;
}

.btn-menu {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 30px;
	top: 40px;
	background: none;
	color: #ffffff;
	font-size: 36px;
	padding: 0;
	z-index: 9999;
}


/********* MENU *********/

.has-menu {
	position: absolute;
}

.searchbox-container {
	margin-bottom: 30px;
	max-width: 90%;
}

#mainmenu {
	margin-bottom: 20px;
}

.offcanvas.offcanvas {
	transition: all 200ms;
}

#main-menu {
	position: fixed;
	top: 0;
	left: 0;
	background: none;
	border: none;
	color: #ffffff;
	width: 100%;
	height: 100vh;
	padding: 40px 40px 0 40px;
	z-index: 99999;
}

.close {
	margin-top: -9px;
	z-index: +2;
	background: none;
	right: unset;
	left: 600px;
}

body.admin-bar .close {
	margin-top: 17px;
}

.close i {
	font-size: 44px;
	line-height: 50px;
}

.top-menu {
	margin: 15px;
}

.nav > li a {
	padding: 6px 25px 8px 25px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.nav > li:hover > a,
.nav > li.current-menu-item > a,
.nav > li.current-menu-parent > a {
	border-radius: 50px;
}

.nav > li:hover > a {}

.menu-item-has-children {}


.nav li:not(.current-menu-item) .sub-menu {
	max-height: 0px;
	transition: all 0.75s ease;
	overflow: hidden;
	margin: 0 0 0 75px;
}

.nav li.current-menu-item .sub-menu,
.nav li.current-menu-parent .sub-menu {
	height: auto;
	max-height: 500px;
	margin: 15px 0 15px 75px;
}

.nav li:hover .sub-menu {
	height: auto;
	max-height: 500px;
	transition: max-height 1.5s ease;
	margin: 15px 0 15px 75px;
}













/************* OVAL CONTAINERS *************/

.has-cards {
	overflow: hidden;
}

.card {
	position: relative;
	border-radius: 0;
	border: none;
	background-color: transparent;
}

.banner-card,
.normal-card {
	position: relative;
	text-align: center;
	max-width: calc(100% - 20px);
	margin-bottom: 20px;
	display: block;
	text-decoration: none;
}

a.banner-card:hover,
a.normal-card:hover {
	text-decoration: none;
}

.normal-card .card-header {
	position: relative;
	height: 300px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border: none;
	overflow: hidden;
	padding: 0;
}

.card-image {
	height: 300px;
	width: 100%;
	transition: all 300ms;
}

a.banner-card:hover .card-image,
a.normal-card:hover .card-image {
	transform: scale(1.1);
	transition: all 300ms;
} 

.quote-card .card-header {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	height: 450px;
}

.banner-card .card-header {
	text-align: center;
	padding: 20px 40px 0px;
	margin-left: -20px;
	margin-right: -20px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	height: 70px;
	z-index: +1;
}

.streamer .shape,
.normal-card .card .shape,
.normal-card .card-header .shape,
.banner-card .card-header .shape {
	position: absolute;
	width: 130%;
	max-width: unset;
	height: auto;
}

.normal-card .card .shape,
.normal-card .card-header .shape{
	top: -5%;
	left: -37%;
}

.normal-card .shape-container,
.banner-card .card-header .shape-container {
	overflow: hidden;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
}

.banner-card .card-header .shape-container .shape {
	top: -40px;
	left: 1%;
	z-index: +1;
}

.normal-card .shape-container .shape {
	left: -37%;
	top: -12%;
}

.streamer .shape-container {
	display: block;
	position: relative;
	width: calc(100% + 40px);
	height: 100%;
	left: -20px;
	pointer-events: none;
}

.streamer .shape {
	right: -15%;
	bottom: -37%;
}

.normal-card .card-body {
	text-align: center;
	padding: 30px 40px 50px;
	margin-left: -20px;
	margin-right: -20px;
	position: relative;
}

.banner-card .card-body {
	height: 300px;
	padding: 0;
	width: 100%;
	overflow: hidden;
}

.has-background-img {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.card-oval {
	display: block;
	width: 100%;
	height: 100px;
	top: -100px;
	left: 0;
	position: absolute;
}

.card-oval::after {
	content: ' ';
	width: 250%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 150%;
	position: absolute;
	bottom: -149px;
	left: -75%;
	border-width: 150px;
	border-style: solid;
	opacity: 1;
}

.transparent .card-oval::before {
	content: ' ';
	width: 250%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 150%;
	position: absolute;
	bottom: -149px;
	left: -75%;
	border-width: 150px;
	border-style: solid;
	opacity: 1;
	z-index: -1;
}

.normal-card .card-oval {
	overflow: hidden;
}

.banner-card .card-oval {
	overflow: hidden;
	opacity: 1;
	bottom: unset;
	top: 69px;
	z-index: 1;
	width: calc(100% + 40px);
	left: -20px;
}

.banner-card .card-oval::after {
	bottom: 30px;
	z-index: 1;
}

.banner-card .card-header h4 {
	position: relative;
	margin-top: 30px;
	margin-bottom: -30px;
	z-index: 10;
}

.transparent .card-oval {
	height: 175px;
	top: -175px;
}

.transparent .card-oval::before {
	bottom: -74px;
}

.transparent .card-oval::after {
	bottom: -74px;
	opacity: 0.7;
}


.quote-card .card-body {
	padding-bottom: 20px;
}


.normal-card .btn,
.banner-card .btn {
	position: relative;
	top: -15px;
}



.transparent-card .card {
	border: 1px solid var(--bluedark);
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	padding: 20px 25px 65px;
	margin-bottom: 40px;
	overflow: hidden;
	height: calc(100% - 40px);
}


.transparent-card:nth-of-type(2) .card::before {
	background-position: 300px 50px;
}
.transparent-card:nth-of-type(3) .card::before {
	background-position: 70px 30px;
	transform: rotate(-195deg);
}
.transparent-card:nth-of-type(4) .card::before {
	background-position: 222px -10px;
	transform: rotate(-311deg);
}

a.transparent-card,
a.transparent-card h4,
a.transparent-card p {
	text-decoration: none !important;
}

.transparent-card .card .btn {
	position: absolute;
	bottom: 12px;
	left: 20px;
	text-align: left;
	min-width: 80%;
	max-width: 300px;
	padding-left: 20px;
}

.transparent-card .card .btn-slide::before {
	position: absolute;
	top: 7px;
	left: 0;
	padding-left: 20px;
}


.streamer {
	min-height: 300px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	overflow: hidden;
}

.streamer .streamercontent {
	padding: 40px 40px 20px 60px;
}
.streamercontent p {
	margin-bottom: 20px;
}


.streamer .has-background-img {
	position: relative;
}





.quoteblock h3 {
	color: #333333;
	padding-bottom: 8px;
}






.breadcrumbcontainer a,
.breadcrumbcontainer span,
.breadcrumb {
	color: #000000 !important;
	display: inline-block;
	text-decoration: none;
}

.breadcrumbcontainer a:hover,
a.breadcrumb:hover {
	text-decoration: underline;
}

/************** ELEMENTS **************/


.footer-has-oval .has-logo {
	position: absolute;
	bottom: 10px;
	left: 50%;
}

.footer-has-oval .has-logo {
	background-size: 180px auto;
	width: 180px;
	height: 140px;
}

.footer-has-oval .logo {
	width: 90px;
	margin-top: 32px;
}

.footer-has-oval .trace .logo {
	width: 115px;
	margin-top: 32px;
}



/************** VIDEO **************/

.video-container {
	position: relative;
	width: calc(100% + 240px);
	max-width: 100lvw;
	margin: 40px 0 40px -120px;
	aspect-ratio: 16/9;
}

svg.video-shape {
	width: 100%;
}

.iframe-container {
	position: absolute;
	top: 0px;
	width: calc(100% - 150px);
	margin: 45px 85px 0 65px;
	max-width: 100lvw;
	padding: 45px 65px 40px 65px;
	border-radius: 90px;
}

.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}





.home-cards {
	position: relative;
	margin: 0;
	padding: 0;
}

.home-cards a:nth-child(3),
.home-cards a:nth-child(4) {
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}

.home-cards a:nth-child(1),
.home-cards a:nth-child(3) {
	text-align: right;
}



.home-card {
	display: block;
	position: relative;
	min-height: 300px;
	height: 50vh;
	text-decoration: none;
	padding: 0 5%;
}

.home-card div {
	width: 80%;
	margin: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.row.home-cards a:nth-child(1) .has-title,
.row.home-cards a:nth-child(3) .has-title {
	padding-left: 17.5%;
}

.row.home-cards a:nth-child(2) .has-title,
.row.home-cards a:nth-child(4) .has-title {
	padding-right: 17.5%;
}

.home-card h2 {
	text-decoration: none;
	margin: 0 15px;
	color: #ffffff;
}


.home-card .btn {
	margin-right: 0;
}

.home-card .has-background-img {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
	opacity: 0;
	transition: all 300ms;
}

.home-card:hover .has-background-img {
	opacity: 1;transition: all 500ms;
}


.home-cards .has-logo {
	position: absolute;
	background-size: 250px auto;
    width: 250px;
	height: 180px;
	left: calc(50% - 125px);
	top: calc(50% - 90px);
}

.home-cards .has-logo .logo {
	margin-top: 35px;
}





/************** BUTTONS **************/

.gform_button.button,
.btn {
	border-radius: 24px;
	text-shadow: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	padding: 7px 35px 9px;
	font-size: 16px;
	line-height: 1em;
	height: auto;
	color: #ffffff;
	display: inline-block;
	text-decoration: none !important;
	border-color: transparent !important;
	background: #555555;
	margin: 0 5px 10px 0;
	text-align: left;
}

.gform_button.button:hover,
a.btn:hover {
	text-decoration: none !important;
}

nav .btn-slide,
.footer-has-oval .btn-slide {
	padding: 7px 15px 9px;
	font-weight: 600;
}


.btn svg {
	width: 25px;
	height: auto;
	margin-left: 5px;
	margin-top: 4px;
	float: right;
}

.btn:hover svg {
	transition: color 500ms ease-out 0s;
}

.btn-slide {
	position: relative;
	background-size: 220% 100%;
	background-position: 100% 0%;
	transition: background-position 500ms ease-out 0s;
}

.card-link:hover .btn-slide,
.btn-slide:hover {
	background-position: 0% 0%;
	transition: background-position 500ms ease-out 0s;
}

.btn-slide::before {
	position: absolute;
	top: 7px;
	left: 0;
	padding-left: 35px;
	height: 100%;
	overflow: hidden;
	transition: width 500ms ease-out 0s;
	text-align: left;
	width: 0%;
	white-space: nowrap;
}

nav .btn-slide::before,
.footer-has-oval .btn-slide::before {
	padding-left: 15px;
}


.card-link:hover .btn-slide::before,
.btn-slide:hover::before {
	width: 100%;
}





#main-menu .btn {
	width: 100%;
}


.gform_wrapper u {
	text-decoration: none !important;
}

.gform_required_legend {
	display: none;
}

.gfield_error input[type=email],
.gfield_error input[type=text],
.gfield_error textarea,
input[type=email],
input[type=text],
textarea {
	width: 100% !important;
	border: none !important;
	background: transparent !important;
	border: 1px solid #555555 !important;
	font-size: 15px !important;
	line-height: 20px !important;
	padding: 5px !important;
	font-weight: 400 !important;
	color: #000 !important;
}

.gform_button.button input {
	padding: 0 !important;
	margin: 0 !important;
	background-color: transparent !important;
	border: 0 !important;
	color: #ffffff;
	text-transform: uppercase;
}