body {
    padding:0px; 
margin:0px; 
font-family:tcomLight,HelvNeueLight,Helvetica Neue Light,Arial,sans-serif!important;/*font-family: Arial,Helvetica,  sans-serif;*/
letter-spacing:0.1em;
line-height:1.5em;
font-size:1em;
background-color:F8F8F8;
}
 
 
hr {
 height:0;
 margin:0;
 background:transparent;
 border-bottom:1px solid #f03;
}


.banner1 {
  /*min-width: 100%; */
  max-height:60vh;
  max-width:100%;
 /* padding:0;
  margin: 0;*/
  /*background-color: #FFFFFF;
  position: relative; */
 /* top:23%;   */
/*display: block;
margin: 0 auto;*/
 
  /*transform: translate(0%,-10%);*/
  
  }
/*
  video overlay wordt voor phone en desktop hetzelfde
  er komt een balk naast de website. bij de menubalk wordt die zwart
  maar dit gebeurt door een margin van x% aan te houden links en rechts
  bij de secties ook door een margin
  en de video wordt geplaatst binnen een sectie, die ook een margin heeft van x%
  de margin kan 0% zijn bij het menu en de video, als het scherm heel smal is
  de margin kan groot zijn, als het scherm breed is. de film krijgt een maximale hoogte van 60% van het scherm
  bij phone zal ie nooit meer dan 60% worden.
  De video is 3840x2160 = 1.778x1.000
  3440 x 1440 hier vooral balken 60/100*1440 = 864 pixels hoogte beschikbaar = 1536 breed. Dan wordt zijbalk (3440-1536=1904)/2=952
  video-scale: 0.6*vh
  video-margin: (vw-(0.6*vh*1.7778))/2
  left: calc(250px + 100vw - 1024px)!important; 
  margin-left: calc(250px + 100vw - 1024px);
  Bij 1920x1080
  Bij 1024x768
  Bij 800x400
  2532 x 1170 12
  1334 x 750 Se2020
  1080 x 2340 A34
  
*/
/*
.video_overlay {
    position: absolute;
	z-index:99;*/
    /*left: 0px;
    top: 0px;
    margin: 10px;
    padding: 5px 5px;
    font-size: 20px;
    font-family: Helvetica;
    
    background-color: rgba(50, 50, 50, 0.3);*//*
    top:50%;  
    color: #FFFFFF;
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif; 
    display:none;
    top: 50%;
    left: 50%;
	width: 80%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
 }
 .video_overlay {
	 text-align: center;
 }
 
 .video_overlay1 {
	 animation: fadeIn ease 4s;
 }
 .video_overlay4 { 
    top: 70%;
    left:50%;
    transform: translate(-50%, 20%);
    transform: translate(-50%, 20%);
 }
 .video_overlay5 {
    top: 20%;
    left:50%;
    transform: translate(-50%, -20%);
}
.video_overlay6 {
    top: 20%;
    left:50%;
    transform: translate(-50%, -20%);
}
*/
.drieluik {
 vertical-align:top;width:100%;border-collapse: separate;
          border-spacing: 1vw;margin:0px;padding:0px;display: inline-block;
}
.drie_onderwerpen {
 width:100%;
border-radius: 5%;
}
.tekst{font-size: 16px;
font-family:tcomLight,HelvNeueLight,Helvetica Neue Light,Arial,sans-serif!important;/*font-family: Arial, Helvetica, sans-serif;*/}

a:link {
	color:black;
text-decoration: underline;  
}

a:visited {
	color:black;
text-decoration: underline;  
}

a:hover {
	color:black;
text-decoration: underline;  
}

a:active {
	color:black;
text-decoration: underline;  
}

.menu a:link {
color: D3D3D3;
background-color: transparent;
text-decoration: none;  
}

.menu a:visited {
color: D3D3D3;
background-color: transparent;
text-decoration: none;  
}

.menu a:hover {
color: white;
background-color: transparent;
text-decoration: none;  
}

.menu a:active {
color: D3D3D3;
background-color: transparent;
text-decoration: underline;  
}
.footer {
	color: gray;
	font-size:1em;
}

.footer a:link {
color: gray;
background-color: transparent;
text-decoration: none;  
}

.footer a:visited {
color: gray;
background-color: transparent;
text-decoration: none;  
}

.footer a:hover {
color: gray;
background-color: transparent;
text-decoration: underline;  
}

.footer a:active {
color: gray;
background-color: transparent;
text-decoration: underline;  
}

.drie_onderwerpen {
height:200px; 
}

.button {
    background-color: #81af35;
    border: none;
    color: white;
    padding: 20px;    
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor:pointer;
  }
  .button4 {border-radius: 12px;}

  
  .fade-item {
    
    list-style-type: none;
    transition: 2s all ease-in-out;
    opacity: 0;    
    margin-bottom:14px;    
width:Max(45%, 450px);	
    
}
.fade-item-text {
    line-height:30px;
    font-size: 0.9em;
    display:inline-block;
    vertical-align: middle;
    background-color: rgb(253, 252, 163);
    
}
.fade-item-arrow {
    display: inline-block; 
    width:1px;  
    height:1px;     
    transform: translate(0%, 12px);
    border-left: 14px solid #dde9c8;
    border-right: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-top: 14px solid transparent;       
}
.fade-item-arrow2 {
	transform: translate(-12px, 12px);
}

.fadein {
    animation: fadeIn 0.9s 1;
    animation-fill-mode: forwards;
}

  @keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
  .photo {
	 max-width:Min(calc((60vh * 1.778 - 17px)), 100vw); 
  }
  
  .fullwidthsection{
	/*display:inline-block;
	position:float;
	z-index:11;*/
	margin-left: Max(0%, calc(((100vw - (60vh * 1.778)) / 2)));
	margin-right: Max(0%, calc(((100vw - (60vh * 1.778)) / 2)));
	
	margin-bottom:0px;
	background-color:FFFFFF;
	padding:0%;
}
.normalsection{
	/*display:inline-block;
	position:float;
	z-index:11;*/
	margin-left: Max(5%, calc(((100vw - (60vh * 1.778)) / 2)));
	margin-right: Max(5%, calc(((100vw - (60vh * 1.778)) / 2)));
	
	margin-bottom:0px;
	background-color:FFFFFF;
	padding:2%;
}

.kadersection {
  position: relative;
  margin-left: Max(0px, calc((100vw - (60vh * 1.778)) / 2));
  margin-right: Max(0px, calc((100vw - (60vh * 1.778)) / 2));
	background-color:F2F2F2;/*#FEF8F2;	*/
	padding:2%;	
	/*width:90%;*/
}


h1 {
	font-family: Conneqt, Leelawadee;
	line-height:1.2em;
}

.coming_soon_container {
	 position: relative;
	 height:100%;
	 width:100%;
	 background-color: #000000;
}
.coming_soon_content {
	 position: absolute;
	 color:#FFFFFF;
  top: 50%;
  width:100%;
  transform: translateY(-50%);
  font-size:1.4em;
	animation: fadeIn ease 1s;
}
.coming_soon_text {
	 animation: fadeIn ease 1s;
 }
 

.nicetablenicetable {
	font-family:tcomLight,HelvNeueLight,Helvetica Neue Light,Arial,sans-serif!important;
	 margin-left: auto;
  margin-right: auto;
	  width: 95%;
	  border-spacing: 10;
	   border: 0px solid white;
  border-radius: 4px;
  
}
.nicetd {
	border: 7px solid white;
  border-radius: 7px;
  background-color: white; 

}
#smalltext {
	font-family:tcomLight,HelvNeueLight,Helvetica Neue Light,Arial,sans-serif!important;
line-height:1.2em;
font-size:0.8em;
letter-spacing:0em;
}
table {
font-family:tcomLight,HelvNeueLight,Helvetica Neue Light,Arial,sans-serif!important;
line-height:1.2em;
font-size:0.8em;
}
#overcontainer{
    width: 400px;
    background: yellow;
}
#overfloated{
    float: left;
    width: 150px;
    background: red;
}
#overimage{
	 background: red;
}

table.aanbod { 
font-family:tcomLight,HelvNeueLight,Helvetica Neue Light,Arial,sans-serif!important;
  border-radius: 1%;
  background-color: white;
    border-spacing: 2%;
	padding: 1%;
    border-collapse: separate;
	width: 250px;
	table-layout: fixed;
	letter-spacing:0em;
      
}
table.aanbod td{	
	padding:1%; 
	   word-wrap: break-word;   
   overflow-wrap: break-word; 
}

table.aanbod tr:nth-child(even) { background-color : F5F5F5 }
table.aanbod tr:nth-child(odd) { background-color : FBFBFB }
table.aanbod td:nth-child(even) { background-color : FFFFFF }