.heading-1 {
  text-indent: 5px;
  font: Arial, sans-serif;
  font-weight:bold;
  font-size: 250%;
  color: #483d8b;  /*DEEP PURPLE*/
  font-variant: small-caps;
  }
  
.heading-2 {
  text-indent: 15px;
  font: Arial, sans-serif;
  font-weight:bold;
  font-size: 150%;
  color: #00af1d; /*GREEN*/
  }
  
.heading-3  {
  text-indent: 25px;
  font: Arial, sans-serif;
  font-size: 110%;
  font-weight:bold;
  }

.heading-3a  {
  text-align: center;
  font: Arial, sans-serif;
  font-size: 110%;
  font-weight:bold;
  }
    
.heading-3b  {
  text-align: left;
  font: Arial, sans-serif;
  font-size: 110%;
  font-weight:bold;
  color: #837c36; /*KHAKI*/
  }

.myBlue {
  color: #4b7eda; /*BLUE*/
  }

.myOrange {
  color: #fd6407; /*ORANGE*/
  }	
hr.light {
  border-top: 0px none white;
}
  
.container {
  position: relative;
  text-align: left;
  width: 400px;
}

.container2 {
  position: relative;
  text-align: left;
  width: 800px;
}

.container0 { 
  height: relative;
  position: relative;
  padding: 10px;
  border: 3px solid green; 
}
.spannadruk {
	font-style:italic;
	font-weight:bold;
	color: #906;
  }

.spannota {
	text-align: center;
	font-size: 20px;
    font-variant: small-caps;
	color: #906; /*WINE RED*/
  }

.box {
  margin: 10px;
  padding: 10px;
  font-size: 38px;
}

.info {
  width: 95%;	
  padding: 10px;
  color: brown;
  background: cornsilk;
  border: 3px solid burlywood;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.fam0 {
  color: #008000;
  font-weight:bold;
  font-size: 150%
}

.fam1 {
  color: #4361ee;
  font-weight:bold;
  font-size: 140%
}

.fam2 {
  color: #b5179e;
  font-weight:bold;
  font-size: 130%
}

.fam3 {
  color: #bc81d25;
  font-weight:bold;
  font-size: 120%
}

.fam4 {
  color: #3e5c76;
  font-weight:bold;
  font-size: 110%
}

.fam5 {
  color: #136f63;
  font-weight:bold;
  font-size: 80%
}

.groen {
  text-align: center;
  font: small-caps normal 16px/1.4 Georgia;
  color: green;
  font-weight:bold;	
}

.oranje {
  text-align: center;
  font: small-caps normal 16px/1.4 Georgia;
  color: DarkOrange;
  font-weight:bold;	
}

.swart {
  text-align: center;
  font: small-caps normal 16px/1.4 Georgia;
  color: black;
  font-weight:bold;	
}

.div-0a {
   background-color: #F5F5D6; /*LIGHT YELLOWGREEN*/
}

.div-1a {
   background-color: #FFFDE7; /*LIGHT YELLOW*/
}
    
.div-1b {
   background-color: #FFE0B2; /*ORANGE*/
}
    
.div-2a {
  	background-color: #E1F5FE; /*LIGHT BLUE*/
}

.div-2b {
  	background-color: #D1C4E9; /*LIGHT PURPLE*/
}	

.div-11a {
  	background-color: #D2B9D3; /*LIGHT PURPLE2*/
}	

.div-12a {
  	background-color: #ECC5C0; /*PINKY*/
}	

.div-13a {
  	background-color: #FCDFFF; /*LIGHT pink-purple*/
}	

.div-14a {
  	background-color: #99C68E; /*MID GREEN*/
}	

.div-15a {
  	background-color: #FAEBD7;  /*LIGHTORANGE*/
}	

.div-16a {
  	background-color: #C2DFFF;  /*LIGHTBLUE*/
}	

.div-17a {
  	background-color: #BCC6CC;  /*GREENGRAY*/
}	

.div-18a {
  	background-color: #EDE275;  /*YELLOW*/
}	

.div-19a {
  	background-color: #C2B280;  /*DIRTYELLOW*/
}	

.div-20a {
  	background-color: #E2A76F;  /*ORANGE*/
}	

.div-00a {
  	background-color: #eeefef;  /*LIGHTGRAY*/
}	

.top-links {
  position: absolute;
  top: 8px;
  left: 16px;
  color: #d26a0d;  /*BURNTORANGE*/
  font: Arial, sans-serif;
  font-weight:bold;
  font-size: 18px;
  }
	
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
  color: #ffdab9;  /*MILDORANGE*/
  font: Arial, sans-serif;
  font-weight:bold;
  font-size: 18px;
  }
.bg-svg 
  {
  width: 100%;
  background-image: url(https://https://www.jacquesduplessis.com/genealogie/de_villiers/devilliers_tree_0-1-1-3.svg);
  background-size: cover;
  height: 0;
  padding: 0; /* reset */
  padding-bottom: 92%;
  border: thin dotted darkgrey;
  }
figure > div 
  {
  margin: 1em auto;
  }