/* 
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Klantpanel
Hof van Saksen - Landal
geschreven augustus 2022
bewerkt 2022
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
*/


/*
1.0
Huisstijl - variabelen
*/

:root {
		--2022-1st: #001D54; 
		--2022-1st-white: #eef8d3; /* hue 90% */
		--2022-2nd: #F16326;
		--2022-3nd: #5FBFED;
		--2022-grey: #e9e2e2; /* hue 85% */
		--2022-grey-light: #F8F6F6; /* hue 95% */
		--2022-grey-dark: #ded4d4; /* 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.hofvansaksenpanel.nl/assets/HSN_09_172010_V2(1500x460-min).jpg");
}


/*
1.1
Huisstijl - font
*/
	
		
	h1 {color: var(--2022-2nd); font-family: DomaineDisplay, helvetica, arial, sans-serif;}
	h2 {color: var(--2022-2nd); font-family: DomaineDisplay, helvetica, arial, sans-serif; font-weight: bold;}
	h3 {color: var(--2022-1st); font-family: DomaineDisplay, helvetica, arial, sans-serif; font-weight: bold;}
	h4 {color: var(--2022-2nd);}
	h5 {}
	h6 {}






/*
2.0
Structuur - general
*/
body {color: #1C3D37; font-family: 'DomaineSans', helvetica, arial, sans-serif; margin: 0 0 0 0;}
.page {position: relative;}

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


/*
2.1
Structuur - header
*/
.page-header-top {padding: 1px 2% 0 2%; margin: auto; position: relative; width: 100%; max-width: 1000px;}
.header-top-logo {
	background: #ffffff;
	box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
	float: left;
	padding: 15px 0;
	margin: 0 2% 0 0;
	width: 100%; max-width: 200px;
	
	position: absolute; top: 0;
	}
.page-header-top h2 {font-size: 1.17em; width: 100%; text-align: right;}
.page-header-bottom {
    background: var(--2022-1st);
	}
.header-menu-img {background: #ffffff; display: none; float: right; height: 15px; padding: 1%; width: 15px;}
.header-menu {
    color: #ffffff;
	display: table;
	height: 50px;
	margin: auto;
	text-align: right;
	width: 100%;
	max-width: 1000px;
	}
.header-banner {
    background-image: var(--banner);
	background-position: center; background-repeat: no-repeat; background-size: cover;
	height: 275px;
	}
/*.header-banner-img {width: 100%;}*/

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


/*
2.2
Structuur - content
*/
.page-content {
	background: #ffffff;
	box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
	height: auto; min-height: 250px; 
	margin: auto;
	padding: 0 2%; 
	width: 100%; max-width: 1000px;
	
	position: relative; top: -10px; 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;}
.action-boxes, .action-boxes a {color: var(--2022-1st); text-decoration: none;}
.action-box {
	box-shadow: 0 1px 6px 0 transparent;
	border: 3px solid var(--2022-grey);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-weight: bold;
	float: left;
	height: auto; min-height: 85px;
	margin: 2%;
	padding: 2%;
	text-align: center;
	transition: 1s border, 1s box-shadow;
	width: 24%;
	}
.action-box:hover {border: 3px solid transparent; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);}
.action-box:hover, .action-box:hover a {color: var(--2022-1st);}

.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: 800px) {
	.action-box {float: none; margin: 2% 15%; width: auto;}
}

	/*
	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;
	font-size: 75%;
    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: #ffffff;
    display: inline-block;
	}
.header-menu button.btn-inloggen {background: var(--2022-2nd);}
.header-menu button:hover {background: #ffffff; color: var(--2022-1st);}


/*
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;
 }