/* 
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Klantpanel


geschreven juli 2024
bewerkt 12 juli 2024 (RL)
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
*/


/*
1.0
Huisstijl - variabelen
*/
:root {
		--2022-1st: #1C3D37; 
		--2022-1st-white: #dcefec; /* hue 90% */
		--2022-2nd: #95C11F;
		--2022-3nd: #5FBFED;
		--2022-grey: #F8F6F6; /* hue 85% */
		--2022-grey-light: #fdfcfc; /* hue 95% */
		--2022-grey-dark: #e9e2e2; /* hue 80% */

		--red: #AA8CAC; /* lila */
		--reddark: #65285F; /* paars */
		--blue: #2A74B5; /* kobalt blauw */
		--green: #B4D9BB; /* mintgroen */
		--greendark: #11594B; /* viridian groen */
		--yellow: #F3942D; /* oranje */

		--banner: url("https://www.klantpanelmarkteffect.nl/assets/bg_2021_vagebol3_1920-min.jpg");
}


/*
1.1
Huisstijl - font
*/

		
	h1 {color: var(--2022-1st); font-family: Larken, Helvetica, Arial, sans-serif; font-size: 46px; font-weight: bold; line-height: 50px;}
	h2 {color: var(--2022-2nd); font-family: Larken, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 400; line-height: 24px;}
	h3 {color: var(--2022-1st); font-family: Larken, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 24px;}
	h4 {color: var(--2022-1st); font-family: Gotham, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; margin: 0 0 0 0;}
	h5 {font-family: Gotham, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; margin: 0 0 0 0;}
	h6 {}






/*
2.0
Structuur - general
*/
body {
	color: var(--2022-1st);
	font-family: Gotham, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 20px;
	margin: 0 0 0 0;
	}
.page {background-color: var(--2022-grey); position: relative;}

.hidden {display: none !important;}
.show {display: inherit !important;}


/*
2.1
Structuur - header
*/
.page-header-top {background: hsla(0, 0%, 100%, 1); padding: 1px 2% 0 2%; margin: auto; position: relative;}
.header-top-logo {
	float: left;
	padding: 5px;
	margin: auto 0;
	width: 100%; max-width: 110px;
	
	position: absolute; top: 10%;
	}
.page-header-top h2 {font-size: 1.17em; line-height: 44px /* gelijk aan hoogte logo */; width: 100%; text-align: right;}
.page-header-bottom {
	position: absolute;
	top: 44px; left: 2%; z-index: 0;
    }
.page-header-bottom h1 {color: #ffffff;}
.header-menu-img {background: var(--2022-grey-light); display: none; float: right; height: 15px; padding: 1%; width: 15px;}
.header-menu {
    color: var(--2022-1st);
	display: table;
	height: 50px;
	margin: auto;
	text-align: right;
	width: 100%; max-width: 1000px;
	}
.header-banner {
    background-image: var(--banner);
	background-position: center -50px; background-repeat: no-repeat; background-size: cover;
	height: 275px;
	}

@media only screen and (max-width: 600px) {
	.page-header-top {background: var(--2022-grey-light);}
	.header-top-logo {padding: 2%; position: relative; max-width: 125px;}
	.header-banner {background-position: center 50px; height: 175px;}
	
	.header-menu-img {display: inline;}
	.header-menu {background: var(--2022-grey-light); display: block; position: relative; z-index: 10; visibility: hidden;}
	.header-menu[class~=show] {display: table !important; visibility: inherit !important;}
	.header-menu button {width: 50%;}
}


/*
2.2
Structuur - content
*/
.page-full {
/* alleen gebruiken wanneer je achtergrond van page-content op volledige breedte wilt */
	background: var(--2022-1st);
	background-image: url(/assets/bg_2021_vagebol2_1920-min.jpg); background-repeat: no-repeat; background-size:cover;
	width: 100%;
	}
.page-content {
	height: auto; min-height: 250px; 
	margin: auto;
	padding: 0 2%; 
	width: 96%; max-width: 1000px;
	
	position: relative; z-index: 1;
	}
.page-content-box {padding: 1% 0;}

.content-box-alinea {}
.content-box-alinea h2 {margin: 100px auto auto auto; text-align: center;}
.content-box-underline {background: var(--2022-3nd); border: none; height: 1px; width: 100%;}

.action-boxes {display: table; width: 100%}
.action-boxes, .action-boxes a {color: var(--2022-2nd); text-decoration: none !important;}
.action-box {
	background: var(--2022-grey-dark);
	background-repeat: no-repeat; background-size: cover;
	border: none;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	float: left;
	height: auto; min-height: 150px;
	margin: 2% 2.6%;
	position: relative;
	text-align: center;
	/*transition: 1s border, 1s box-shadow;*/
	width: 28%; min-width: 275px;
	}
.action-box-title {
	background: var(--2022-grey);
    border-radius: 3px 0 0 3px;
	display: flex; align-content: center; flex-direction: column; justify-content: space-evenly; align-items: center;
    position: absolute; top: 20%; right: 88%; left: 12%; bottom: 20%;
    width: 88%;
    z-index: 20;
	}
.action-box-arrow {
	background: var(--2022-1st);
    border-radius: 0 3px 3px 0;
	display: flex; flex-direction: row; justify-content: center;
	position: absolute; top: 20%; right: -10%; bottom: 20%; left: 99%;
    z-index: 30;
	}
.action-box-arrow img {width: 10px;}
.action-box:hover .action-box-arrow {background: var(--2022-3nd);}
.action-box button {
	background: transparent;
	border: none;
	min-height: 150px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute; z-index: 99;
	width: 100%;
	}

.news-boxes {}
.news-box {
	background: var(--2022-grey);
	border: 1px solid transparent; border-radius: 0 50px 50px 0;
    display: block;
	margin: 1% 1% 1% 0;
    width: 66%; min-width: 200px;
	}
.news-box a {text-decoration: none !important;}
.news-box-title {
	background: transparent;
    color: var(--2022-2nd);
    height: 25px;
    padding: 2% 2% 0 2%;
	}
.news-box-content {height: auto; padding: 2%;}
	
.toggle-box {border-top: 2px solid var(--2022-1st); box-shadow: 0px 0px 6px 0 var(--2022-grey); display: none; margin: auto auto 10px auto; padding: 2%; }

@media only screen and (max-width: 600px) {
	.action-box {float: none; min-height: 175px; margin: 2% 0 2% 2%; width: 86%;}
}

	/*
	2.2.1
	Uitleg Panel
	*/
	tr {height: 50px;}
	tr:hover .opsomming, tr:active .opsomming, tr:focus .opsomming {background: var(--2022-3nd)}
	tr:hover td:not(.opsomming), tr:active td:not(.opsomming), tr:focus td:not(.opsomming) {color: var(--2022-2nd);}
	/*
	2.2.2
	Hulp Panel
	*/
	#contactPanel h2 button {position: relative; top: 25px; transform: rotate(15deg);}
	#hulpPanel {display: none;}

/*
2.3
Structuur - footer
*/
.page-footer {	
	background: var(--2022-1st);
	margin: 100px auto auto auto;
	}
.page-footer-box {
    color: #ffffff;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
    text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 800px;
	}
.footer-fileblock {
	border-top: 1px solid #ffffff;
	padding: 2% 0;
	margin: 2% auto 0 auto;
	}
.footer-fileblock a {color: #ffffff;}






/*
3.1
Attributen - button
*/
.btn, a {cursor: pointer;}
.btn {
	border: none;
	font-weight: bold;
	height: 50px;
	padding: 0 2%;
	text-align: center;
	width: auto; min-width: 100px;
	}
.btn-basic-me {
	background: #ffffff;
    box-shadow: 0 1px 6px 0 var(--2022-grey);
    color: var(--2022-2nd);
	}
.btn-toggle {
	background: #ffffff;
    box-shadow: 0 1px 6px 0 var(--2022-grey);
    color: var(--2022-2nd);
	text-align: left;
	width: 100%;
	}

.btn-basic-me:hover, .btn-basic-me:active, .btn-basic-me:focus {background: var(--2022-1st); color: #ffffff;}
.btn-toggle:hover, .btn-toggle:active, .btn-toggle:focus {}

.header-menu button {
	background: transparent;
    color: var(--2022-1st);
    display: inline-block;
	}
.header-menu button.btn-inloggen {background: var(--2022-3nd); color: #ffffff;}
.header-menu button:hover {background: var(--2022-1st); color: #ffffff;}


/*
3.2
Attributen - opsommingstekens
*/

.opsomming {
 background: var(--2022-2nd);
 color: #ffffff;
 display: block; display: flex;
 justify-content: space-around;
 transition: 2s background, 1s color;
 
 border-radius: 90px; padding: 9px 13px;
 }

.btn-toggle-icon {color: var(--2022-3nd); font-size: 25px; font-weight: bold;}