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

/*************** COLORS ***************/
:root {
	--red:					rgba(209,51,45,1);		/* #d1332d */
	--reddark:				rgba(141,29,25);		/* #8d1d19 */
	--green:				rgba(225,255,224,1);	/* #e1fff4 */
	--bluegreen:			rgba(158,220,222,1);	/* #9edcde */
	--bluelight:			rgba(162,193,219,1);	/* #a2c1db */
	--blue:					rgba(70,130,184,1);	/* #4682b8 */
	--blue-80:				rgba(98,149,194,1);	/* #6295c2 */
	--blue-80-30:			rgba(98,149,194,0.3);
	--blue-80-40:			rgba(98,149,194,0.4);
	--blue-80-50:			rgba(98,149,194,0.5);
	--bluedark:				rgba(50,57,105,1);		/* #323969 */
	--yellow:				rgba(231,184,19,1);	/* #e7b813 */
	--white:				rgba(255,255,255,1);

	--red-hover:			#ab0a08;
	--reddark-hover:		#710f0c;
	--green-hover:			#323969;
	--bluegreen-hover:		#62bec1;
	--bluelight-hover:		#6792bc;
	--blue-hover:			#134285;
	--bluedark-hover:		#0a0d2b;
	--yellow-hover:			#d18501;
}

.red					{ color: var(--red); }
.green					{ color: var(--green); }
.bluegreen				{ color: var(--bluegreen); }
.bluelight				{ color: var(--bluelight); }
.blue					{ color: var(--blue); }
.bluedark				{ color: var(--bluedark); }
.yellow					{ color: var(--yellow); }

.red.important			{ color: var(--red) !important; }
.green.important		{ color: var(--green) !important; }
.bluegreen.important	{ color: var(--bluegreen) !important; }
.bluelight.important	{ color: var(--bluelight) !important; }
.blue.important			{ color: var(--blue) !important; }
.bluedark.important		{ color: var(--bluedark) !important; }
.yellow.important		{ color: var(--yellow) !important; }

.bgred					{ background-color: var(--red); 		color: #ffffff; } 
.bggreen				{ background-color: var(--green); 		color: var(--bluedark) !important; } .bggreen h4 { color: var(--bluedark) !important; }
.bgbluegreen			{ background-color: var(--bluegreen);	color: var(--bluedark) !important; } .bgbluegreen h4 { color: var(--bluedark) !important; }
.bgbluelight			{ background-color: var(--bluelight); 	color: #ffffff; }
.bgnav, .bgblue			{ background-color: var(--blue); 		color: #ffffff !important; }
.bgbluedark				{ background-color: var(--bluedark); 	color: #ffffff; }
.bgyellow				{ background-color: var(--yellow);		color: #ffffff;}


.menu.card-link.bgred,
.menu.card-link.bggreen,
.menu.card-link.bgbluegreen,
.menu.card-link.bgbluelight,
.menu.card-link.bgblue,
.menu.card-link.bgbluedark,
.menu.card-link.bgyellow			{ background-color: transparent; }

.menu.card-link.bgred .card 		{ background-color: var(--red); }
.menu.card-link.bggreen .card 		{ background-color: var(--green); 	 }
.menu.card-link.bgbluegreen .card 	{ background-color: var(--bluegreen); }
.menu.card-link.bgbluelight .card 	{ background-color: var(--bluelight); 	 }
.menu.card-link.bgblue .card 		{ background-color: var(--blue);  }
.menu.card-link.bgbluedark .card 	{ background-color: var(--bluedark); }
.menu.card-link.bgyellow .card 		{ background-color: var(--yellow); 	 }


.bgred h1, .bgred h2, .bgred h3, .bgred h4, .bgred h5, .bgred h6, .bgred p,
.bgblue h1, .bgblue h2, .bgblue h3, .bgblue h4, .bgblue h5, .bgblue h6, .bgblue p,
.bgbluedark h1, .bgbluedark h2, .bgbluedark h3, .bgbluedark h4, .bgbluedark h5, .bgbluedark h6, .bgbluedark p { color: #ffffff; }

.bggreen h1, .bggreen h2, .bggreen h3, .bggreen h4, .bggreen h5, .bggreen h6, .bggreen p,
.bgbluegreen h1, .bgbluegreen h2, .bgbluegreen h3, .bgbluegreen h4, .bgbluegreen h5, .bgbluegreen h6, .bgbluegreen p { color: var(--bluedark); }

.home-card h2,
h1							{ color: var(--blue); }
h2, h2 a 					{ color: var(--blue); }
.home-card.bgbluegreen h2 	{ color: var(--bluedark); }
h3, .quoteblock h2, h3 a 	{ color: #333333; }
h4							{ color: var(--blue); }
h5							{ color: var(--blue); }
h6							{ color: #333333; }
body						{ color: #333333; }
.card-body,
p span.intro, 
span.intro, p.intro 		{ color: var(--blue); }
.footer, .footer a,

.breadcrumbcontainer span,
.breadcrumbcontainer a,
.breadcrumb,
.small						{ color: #444444; }
.gform_button.button,
.tag						{ color: var(--main-red); }
ul.main-menu li a 			{ color: #ffffff; }
ul.main-menu li li a		{ color: #ffffff; }
ul.top-menu li a 			{ color: #ffffff; }

body, .footer-oval			{ background-color: #f7fcff; }


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

.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: #025cd8;
	text-decoration: none;
}

.bgbluegreen.streamercontent p a:not(.btn):not(.card-link),
.bgbluegreen.streamercontent p a:not(.btn):not(.card-link):hover,
.bgbluegreen.streamercontent p a:not(.btn):not(.card-link):focus,
.bggreen.streamercontent p a:not(.btn):not(.card-link),
.bggreen.streamercontent p a:not(.btn):not(.card-link):hover,
.bggreen.streamercontent p a:not(.btn):not(.card-link):focus {
	color: var(--bluedark);
}

/*<span style="text-decoration: underline;"></span>*/
span[style*="text-decoration: underline"],
u {
	background: var(--bluegreen);
	background: linear-gradient(0deg, var(--bluegreen) 0%, var(--bluegreen) 40%, transparent 40%, transparent 100%);
}

.footer-has-oval {
	background-color: var(--bluelight);
}





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

.menu-oval {
	position: absolute;
	top: -650px;
	left: -150px;
	width: 875px;
	height: 1659px;
	background-image: url('../Arkin-Mentrum/images/menu-shape.svg');
	background-position: center;
	background-repeat: no-repeat;
	/* 125 237 */
	background-size: 875px 1659px;
	z-index: -1;
}

.nav > li:hover > a,
.nav > li.current-menu-item > a,
.nav > li.current-menu-parent > a {
	background-color: var(--blue-80);
}

.nav > li:hover > a {
	background-color: var(--bluelight);
}

.btn-menu {
	right: unset;
	width: 32px;
	left: 20px;
	margin-top: 0;
}
.btn-menu.close {
    margin-top: 0;
    z-index: +2;
    background: none;
	top: 0;
    right: 200px;
    left: unset;
}

.bgred .card-oval::before 		{ border-color: var(--red); }
.bggreen .card-oval::before 	{ border-color: var(--green); }
.bgbluegreen .card-oval::before { border-color: var(--bluegreen); }
.bgblue .card-oval::before 		{ border-color: var(--blue); }
.bgbluedark .card-oval::before 	{ border-color: var(--bluedark); }
.bgyellow .card-oval::before 	{ border-color: var(--yellow); }

.bgred .card-oval::after 		{ border-color: var(--red); }
.bggreen .card-oval::after 		{ border-color: var(--green); }
.bgbluegreen .card-oval::after  { border-color: var(--bluegreen); }
.bgblue .card-oval::after 		{ border-color: var(--blue); }
.bgbluedark .card-oval::after 	{ border-color: var(--bluedark); }
.bgyellow .card-oval::after 	{ border-color: var(--yellow); }






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

.video-container {}

svg.video-shape {
	color: var(--bluedark);
}

.iframe-container {
	border: 4px solid var(--bluegreen);
	background-color: #ffffff;
}

.iframe-container iframe,
.iframe-container object,
.iframe-container embed {}



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

.gform_button.button, .btn 	{ color: #ffffff; background: var(--blue); }
.btn svg 					{ color: var(--yellow); }
.btn:hover svg 				{ color: #ffffff; }

.btn-slide { background-size: 220% 100%; background-position: 100% 0%; }
.card-link:hover .btn-slide, .btn-slide:hover { background-position: 0% 0%; }

/* witte bg was transparent */
.btn,
.btn-Donkerblauw,.btn-donkerblauw,
.btn-white-bluedark 		{ background-color: #ffffff; background-image: linear-gradient(-70deg, transparent 0%, transparent 50%, var(--bluedark) 50%, var(--bluedark) 100%); color: var(--bluedark) !important; border-color: var(--bluedark) !important; }
.btn-Lichtblauw,.btn-lichtblauw,
.btn-white-blue 			{ background-color: #ffffff; background-image: linear-gradient(-70deg, transparent 0%, transparent 50%, var(--blue) 50%, var(--blue) 100%); color: var(--blue) !important; border-color: var(--blue) !important; }
.btn-Geel,.btn-geel,
.btn-white-yellow 			{ background-color: #ffffff; background-image: linear-gradient(-70deg, transparent 0%, transparent 50%, var(--yellow) 50%, var(--yellow) 100%); color: var(--yellow) !important; border-color: var(--yellow) !important; }
.btn-Groen,.btn-groen,
.btn-green 					{ background-color: var(--green); background-image: linear-gradient(-70deg, var(--green) 0%, var(--green) 50%, var(--green-hover) 50%, var(--green-hover) 100%); color: var(--bluedark) !important; border-color: var(--bluedark) !important; }
.btn-blue 					{ background-color: var(--blue); background-image: linear-gradient(-70deg, var(--blue) 0%, var(--blue) 50%, var(--white) 50%, var(--white) 100%); color: #ffffff !important; border-color: var(--blue) !important;}
.btn-red 					{ background-color: var(--red); background-image: linear-gradient(-70deg, var(--red) 0%, var(--red) 50%, var(--white) 50%, var(--white) 100%); color: #ffffff !important; border-color: var(--red) !important;}
.btn-reddark 				{ background-color: var(--reddark); background-image: linear-gradient(-70deg, var(--reddark) 0%, var(--reddark) 50%, var(--white) 50%, var(--white) 100%); color: #ffffff !important; border-color: var(--reddark) !important;}

.btn.btn-slide::before,
.btn-Donkerblauw.btn-slide::before,
.btn-Lichtblauw.btn-slide::before,
.btn-Geel.btn-slide::before,
.btn-Groen.btn-slide::before,
.btn-donkerblauw.btn-slide::before,
.btn-lichtblauw.btn-slide::before,
.btn-geel.btn-slide::before,
.btn-groen.btn-slide::before,
.btn-white-bluedark.btn-slide::before,
.btn-white-blue.btn-slide::before,
.btn-white-yellow.btn-slide::before,
.btn-green.btn-slide::before { color: #ffffff !important; }

.btn-blue.btn-slide::before { color: var(--blue) !important; }

.btn-red.btn-slide::before { color: var(--red) !important; }
.btn-reddark.btn-slide::before { color: var(--reddark) !important; }


.nav {
	display: unset !important;
}

.navbar-mainmenu {
	padding-top: 0;
	padding-bottom: 0;
}

.logo {
	width: 135px;
	max-width: 100%;
	height: auto;
	margin: 20px auto 20px;
}


.trace .logo {
	width: 170px;
	max-width: 100%;
	height: auto;
	margin: 13px auto 12px;
}

.has-navbar {
	top: -100px;
	transition: all 0.5s;
}

.has-navbar.fixed-top {
	top: 0;
	transition: all 0.5s;
}

.has-logo {
	margin: 0 auto;
	background-image: url('images/logo_oval.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 350px auto;
	width: 350px;
	overflow: visible;
	text-align: center;
}

.has-navbar.fixed-top .has-logo {
	background-size: 220px auto;
}

.has-navbar.fixed-top .logo {
	width: 80px;
	max-width: 100%;
	height: auto;
	margin: 10px auto 12px;
}

.has-navbar.fixed-top .btn-menu {
	top: 18px;
}


.steen, .steen1, .steen2, .steen3 {
	mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
}

.steen,
.steen1 {
	mask-image: url('images/shape-filled.svg');
	-webkit-mask-image: url('images/shape-filled.svg');

}

.steen2 {
	mask-image: url('images/shape-image-mask.svg');
	-webkit-mask-image: url('images/shape-image-mask.svg');
}

.steen3 {
	mask-image: url('images/shape-image-mask3.svg');
	-webkit-mask-image: url('images/shape-image-mask3.svg');
}



.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.bgbluegreen h2 {
	color: var(--bluedark);
}

.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;
}