/*main body*/

*{
  padding:0;
  margin:0;
}
html{
  font-size: 62.5%;
}
:root {
  --menu-count: 6;
  --wifd:100%;
  --heifd:100%;
}
.mobile-menu-btn {
  display:none;
}
.body{
   font-family: Times New Roman; 
 }
 a {
  cursor:pointer;
 }
 .no {
	display: none;
}

.mob-menu, .mob-menu-btn{
  display: block;
}

 /*header begin */

 .header-main {
  background: #C6C0BB;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  align-content: flex-start;
}
.header-main-logo{
  display:flex;
  width: fit-content;
  align-self: center;
}
.header-main-nav{
  font-family: Trebuchet MS;
  display:flex;
  flex-direction: row;
}

.header-main-nav ul {
  list-style-type: none;
  display: flex;
  align-self: center;
}

.header-main-nav ul li {
  position:relative;
}

.header-main-nav ul li a {
 display:block;
 height:auto;
 text-align: center;
 align-self: center;
 background-color: #2B3594;
 color: white;
 transition: all ease-in-out 100ms;
 
}

.header-main-nav ul li a:hover {
  background-color: #652C90;
}

.header-main-nav ul li ul {
  visibility: hidden;
  opacity: 0;
  display: none;
  position: absolute;
  transition: all ease-in-out 100ms;
}
.header-main-nav ul li ul a {
   white-space: nowrap;
   z-index: 1;
 
}

ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  display: block;
}

/*header einde */

/*banner/ sym */
.hsym {
	position: absolute;
	text-align: right;
	z-index: 1;
}
.imgb {
  overflow-x: hidden;
  	
}
/* */

/* font styles */
.h1 {
  text-align: center;
}
.h1b {
  text-align: left;
}

.h2 {
	text-align: left;
}

.h2a {
  text-align: left;	
  z-index: 3;
}

.h2b {
	text-align: right;
}
.h2c {
	text-align: left;
  color:#656ec2;
}

.h3 {
	text-align: center;
}

.h4 {
	font-family: Trebuchet MS;
    text-align: left;
}

.h4a {
	font-family: Trebuchet MS;
    text-align: left;
}
.h4b {
	font-family: Trebuchet MS;
    text-align: right;
}
.data2{
  color: hsl(172, 37%, 49%) ;
}
.data{
  color:black;
  font-weight: 1200;
}
/* */

/* begin grid-items*/
.Wbar,.Ebar,.Tbar,.Bwbar,
.Bbar,.Tbart{
  background: #EBE9E7; 
}
.rev{
  background-color:#B9C0E5;
  border: 2px solid black;
 }
/* */

/*buttons*/

.clickor-clock {/*button */
  position: relative;
	color: black;
	background: #E5DEB9;
	border: 2px solid black;
	box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6p;
	text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.clickor-clock .popuptext {/*poptekst links */
  visibility: hidden;
  background: #B9C0E5;
  color: black;
  border: 2px solid black;
  text-align: left;
  border-radius: 6px;
  position: absolute;
  z-index: 2;
}
.clickor-clock .popuptext2 {/*poptekst rechts */
  visibility: hidden;
  background: #B9C0E5;
  color: black;
  border: 2px solid black;
  text-align: left;
  border-radius: 6px;
  position: absolute;
  z-index: 2;
}

.clickor-clock .show {/*class hide */
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

button{
	display: block;
	color: #ccc;
	background-color: #555;
	background: -webkit-linear-gradient(#888, #555);
	background: linear-gradient(#888, #555);
	border: 0 none;
	border-radius: 3px;
	text-shadow: 0 -1px 0 #000;
	box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
	cursor: pointer;
	-webkit-transition: all ease-in-out 150ms ;
	transition: all ease-in-out 150ms;
}

button:hover, button:focus
{
 color: #6C6C6C;
}

button:active
{
	color: #666;
	text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
	box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
	-webkit-animation: none;
	animation: none;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
 }

 @keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
 }
 /* */

/* Footer */

.footer-main {
  background-color:#cac4bf;
  position: relative;
  color:#444;
}

.footer-main-flex{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
}
.footer-link {
  border: 2px solid #363b41;
  background: #2B3594;
  color: #ffd;
  font-weight:600;
  transition: all ease-in-out 200ms;
}
.footer-link:hover {
  border: 2px solid #57902C;
  background: #652C90;
}
.footer-sitemap {
  display:flex;
}

.footer-sitemap a:hover{
  opacity: 0.8;
 }
.footer-sitemap ul:nth-child(1){
  border-left: 4px solid #2B3594;
  transition-duration: 0.5ms;
}
.footer-sitemap ul:nth-child(1):hover{
  border-color: #652C90;
}
.footer-sitemap ul:nth-child(1),
.footer-sitemap ul:nth-child(2)
 {
  text-transform: uppercase;
}
.footer-sitemap ul:nth-child(2) {
  flex-grow:1;
}
.footer-sitemap ul:nth-child(2) p {
 text-align: right;
}
/* */

/*workshop buttons */

.read-more-container{
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}

.container{
  color:#3140ca;
  background-color: #E5DEB9;
  border-radius: 2px;
  border:2px solid black;
  border-left:3px solid goldenrod;
  box-shadow: 0 0 1rem rgba(0,0,0,.1);
}

.contanor{
  display:flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  border-radius: 2px;
  border:2px solid black;
  border-left:3px solid goldenrod;
  box-shadow: 0 0 1rem rgba(0,0,0,.1);
  padding: 2rem;
}

.contanor .h2c{
  float:right;
}

.container:hover {
  border-left-color:purple;
}

.read-more-btn:hover,
.read-more-btn--open:hover{
  color: hsl(180, 60%, 60%);
}

.read-more-btn,
.read-more-btn--open{
  color: hsl(180, 48%, 38%);
  cursor: pointer;
}

.read-more-text{
  display: none;
}

.read-more-text--show{
  display: inline;
}
/* */