/*
 Theme Name:   Twenty Thirteen Child
 Theme URI:    http://example.com/twenty-thirteen-child/
 Description:  Twenty Thirteen Child Theme
 Author:       Andre Bruijn
 Author URI:   http://example.com
 Template:     twentythirteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-thirteen-child
*/

.site-title{
	-webkit-text-stroke-width: 2px;
  	-webkit-text-stroke-color: #6f4522;
}
.site-description{
	color: #44230a;
	font-weight: bold;
	-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: #d9cbc8;
}

* {
  box-sizing: border-box;
}

/***************************************************** de divs instellen ***********************************************/
.site-content{
	border: 0px solid yellow;
	margin: 0 auto; /* You can set the margin property to auto to horizontally center the element within its container. */
}

.entry-header-4blokken{
	max-width: 1040px;
	padding: 0px 0px 0px 0px;
	border: 0px solid red;
	margin: 0 auto; /* You can set the margin property to auto to horizontally center the element within its container. */
}
.hentry {
    padding: 20px 0; /* de 4 blokken deze ruimte geven; iets verlaagd */
}

.entry-header {
	border: 0px solid blue; /* het vak waar de titel in staat */
}

/* dit is de row van de content container en de sidebar container */
.sidebar .rowcontentsidebar {
    max-width: 1040px;
    /*padding: 0 0px 0 0px;*/
	border: 0px solid green;
	margin: 0 auto;/************************************************************ deze is nodig voor de posts/berichten pagina ***************************************/
}
.rowcontentsidebar::after {
    content: "";
    display: table;
    clear: both; /* dit doet de div meerekken met de inhoud*/
}

/* dit is de container div van de content */
.sidebar .entry-content{
	border: 0px solid magenta;
	width:74.2%; /* niet hoger zetten want dan past de sidebar er niet naast */
	float: left;
	padding: 0 0px 0 20px;
	/* de margin zit in de sidebar-container-rechts om ruimte krijgen tussen content containervak en sidebar */
	min-width: 350px;
	max-width: 1160px;
}


/* dit is de div van de sidebar */
.sidebar-container-rechts{
	float: left;
	width: 24%;
	min-width: 258px;
	margin-left: 10px; /* de sidebar houdt links zijn afstand */	
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
/* die .sidebar moet ervoor staan; die staat in de body tag; dat is om een of andere manier de reden */
@media  screen and (max-width: 600px) {
.sidebar  .entry-content, .sidebar-container-rechts {
    width: 100%;
  }
}
.entry-content img.alignleft, .entry-content .wp-caption.alignleft {
    margin-left: 0px; /* stond op -60 de image ging buiten het vak naar links */
	/* precies zo overgenomen van de echte style.css; daarom zo uitgebreid */
}

/****************************** de bericht pagina centreren *************************************************************/
.sidebar .postcontent {
    max-width: 1040px;
    /*padding: 0 0px 0 0px;*/
	border: 10px solid green;
	margin: 0 auto;
}
.postcontent::after {
    content: "";
    display: table;
    clear: both; /* dit doet de div meerekken met de inhoud*/
}

/***************************************************** de opmaak *******************************************************/
/* de div van de content van een tekst met ul etc */
.vakcontentitem {
	/*margin: 0px 0px 0px 0px;*/ /* de bovenliggende divs houden afstand = margin, tov elkaar */
    border: 4px solid #44220a;
    padding: 10px; /* aan de binnenkant */
}
.spelitem {
	border-bottom: 1px solid #a47854;
	padding: 0px; /* hoogte tussen deze divs op de pagina spellen */
	margin-bottom: 5px;
}
	
.vakcontentitem .spelitem ul {
	margin: 0px 0px 0px 60px; /* op de pagina spellen de opsomming goed uitlijnen; dus meer naar rechts */	
    font-size: 0.9rem;
}
li {
	color: #ecc19b; /* beige */
}

a {
    text-decoration:underline;
}

.site-footer .sidebar-container {
    background-color: #6f4522; /* bruin */
    padding: 20px 0;
}

/**************** dit is de hoofd div ***********************************************************/
.site {
    background-color: #44230A;
	border-left: 1px solid #be8860; /* beige */
	border-right: 1px solid #be8860;
}
.site-footer {
    background-color: #be8860; /* beige */
	color: #686758; /* donkergrijs*/
}
.navbar {
    background-color: #44230a; /* donkerbruin */
	border-bottom: 1px solid #be8860; /* beige */
	border-top: 1px solid #be8860; /* beige */
}


div .entry-summary {
	width: 768px;
	margin: 0 300px 0 200px;/************ zoekresultaten uitlijnen - moet nog *******************/
}






/******************************* Begin - 4 gekleurde vakken *******************************/

.row p {
    margin: 0 0 0em;
    /*font-size: 0.9rem;*/
}
/* Create four equal columns that floats next to each other
   https://www.w3schools.com/howto/howto_css_four_columns.asp */
.column1, .column2, .column3, .column4 {
  float: left;
  width: 25%; 
}

/* deze div nodig om een border van 10 px te kunnen maken; anders werkt float niet meer */
.subcolumn1, .subcolumn2, .subcolumn3{
	margin-right:10px;
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	min-height: 255px; /* Should be removed. Only for demonstration */

}

.subcolumn4 {
	margin-right:0px; /* rechts hoeft geen margin */
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	min-height: 255px; /* Should be removed. Only for demonstration */

}

img.icon75homebox {
	width: 75px;
	height: 75px;
	margin-right: 1em;
	/*margin-bottom: 0.8em;*/
	/*margin-top: 0.7em;*/
}

.subcolumn1 {
  background-color:#214C6F;/*blauw*/
}
.subcolumn2 {
  background-color:#cf8a01;/*geel*/
}
.subcolumn3 {
  background-color:#6f2126;/*rood*/
}
.subcolumn4 {
  background-color:#266f21;/*groen*/
}

.column1 h3, .column2 h3, .column3 h3, .column4 h3, .staprowcolumn1 h3, .staprowcolumn2 h3, .staprowcolumn3 h3 {
    color: #FFFFFF;
	font-size: 1.05rem;
	font-weight: 500;
	margin-bottom:0.6rem;
	margin-top: -0.4rem;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.entry-header {
    margin-bottom: 13px; /* de titel boven en onder evenveel ruimte geven */
}

/*************** Clear floats after the columns - *********** geldt voor alle rows *********************/
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column1, .column2, .column3 {
    width: 100%;
	padding: 0px 20px 0px 20px;;
  }
}
@media screen and (max-width: 600px) {
  .column4 {
    width: 100%;
	padding: 0px 30px 0px 20px;;
  }
}
/* dit is om een Variable Font Size te realiseren 
 https://www.w3schools.com/howto/howto_css_responsive_text.asp */
@media screen and (min-width: 601px) {
  .subcolumn1 p, .subcolumn2 p, .subcolumn3 p, .subcolumn4 p  {
    font-size: 13px;
	color:#ffffff;
  }
}

@media screen and (max-width: 600px) {
  .subcolumn1 p, .subcolumn2 p, .subcolumn3 p, .subcolumn4 p  {
    font-size: 16px;
	color:#ffffff;
  }
}

/******************************* Einde - 4 gekleurde vakken *******************************/











/********************* kleur instellen en font-size ********************************************************/
.site-content{
	background: #6f4522; /* bruin */
}

body{
	background: #6f4522; /* bruin */
	font: 82%/1.4em Arial, Verdana, sans-serif; /* geeft eem mooi strak lettertype */
}

.navigation-top{
	background: #44230A; /* donkerbruin */
}

.site-footer {
    border-top: 1px solid #44230a; /* donkerbruin */
}

p, a, entry-meta, h1.entry-title {
	color:#ecc19b; /* beige */
}

p{
	margin: 0 0 1.1em;
	font-size: 0.9rem
}

.page .panel-content .entry-title, .entry-title { /* bij theme twentythirteen heet de pagina titel: entry-title!!! */
    color: #e8c19b; /* beige */
    font-size: 14px; /* de titel van de pagina */
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.site-header .search-field {
    background-color: #be8860; /***** zoekvak in menu *****/
}

/******************** einde kleur en font-size instellen **************************************************/


/******************* de rechterdiv met de privacyverklaring **************************************************/
.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {

    padding: 0; /* de titel en de content uitlijnen*/
}

.widget .widget-title {
	font-weight:500;
}
.sidebar-inner .widget {
	border: 10px solid  #44220a;
	padding: 10px;
    margin: 0 0 10px 0;
	background: #BD9F38;/* kerrie kleur */
	color: #fff;
}
.widget_calendar tbody td {
    background-color: transparent;
}
.site-footer .widget {
	border: 10px solid  #44220a;
	padding: 10px;
    margin: 0 0 10px 0;
	background: #BD9F38;/* kerrie kleur */
	color: #fff;
}

/*********************************************** footer; in elementen staan css gegevens; later uitzoeken *********************************/
.sidebar .site-footer .widget-area { /* de widget-area is de div; vandaar dat hij een breedte heeft */
    max-width: 1000px; /* is standaard 724px */
    position: relative;
    left: 0px;
	margin: 0 auto;				/* er staan harde waarden in de area tags; dus let op; verder kijken dan hier */
}
.sidebar .site-footer .widget {
    width: 238px; /* standaard 238px */
	margin-right: 10px;
}

/******************************************Einde footer; in elementen staan css gegevens; later uitzoeken *********************************/


h3 {
	font-size: 1.05rem;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
    line-height: 1.7;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.icon75 {
	width: 75px;
	height: 75px;	
}
button, input, select, textarea {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.3;
    color:  #6f4522; /* bruin */	
}

.elements p{
	margin: 14px 0px 3px 0px;
	color: #FFFFFF;
	font-size: 0.84rem;
}

b, strong{
	font-weight: 500;
	color: #FFFFFF;
}
h3 {
	font-weight:500;
}
h2 {
	font-weight:500;
	font-size: 20px;
	margin-bottom: 6px;
}
.entry-title{
	color: #ffffff;
}






/* toegevoegd andre; hieronder voor blogpagina*/



.site-content-contain{
	background: #6f4522; /* bruin */
}

body{
	background: #6f4522; /* bruin */
}
.navigation-top{
	background: #44230A;
}
.site-footer {
    border-top: 1px solid #44230a;
}

div.entry-content{
	
	}

h1.entry-title:visited {
	color:#ecc19b;
}

a:hover{
	color:#ffffff;
}

.entry-meta a {
    color: 
    #ecc19b;
}

/* blogpagina titel vaste kleur geven; het is een link; waarom is onduidelijk; het is in feite tekst */
.entry-title a {
	color: #ecc19b;
	text-decoration: none;
	margin-left: -2px;
}


/************************************************ berichten/posts instellingen ********************************************************/

.comment-respond {
    background-color: #6f4522; /* bruin */
}

.archive-header { /* de kop op de berichtenpagina */
    background-color: #be8860; /* beige */
}

/******************************************* de vakken van stappenplannen ****************************************************************/
 
   
 /********************************* monopoly                              *****************************************************************/     
 /************************* row 1: 1 div *************************************************************************************************/  
 .staprow1column{
  float: left;
  width: 100%; 
} 
 
/* deze div nodig om een border van 10 px te kunnen maken; anders werkt float niet meer */
.staprow1subcolumn{
	margin-right:0px;
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	/*height: 146px;*/ /* Should be removed. Only for demonstration */
	background-color:#bd9f38; /* kerry kleur */
	min-height: 158px;
}   
 .staprow1column h3 {
    color: #FFFFFF;
	font-size: 1.05rem;
	margin-bottom:0.6rem;
	margin-top: -0.4rem;
}
/*************** Clear floats after the columns - *********** geldt voor alle rows *********************/
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .staprow1column {
    width: 100%;
  }
}
/* dit is om een Variable Font Size te realiseren 
 https://www.w3schools.com/howto/howto_css_responsive_text.asp */
@media screen and (min-width: 601px) {
  .staprow1subcolumn p {
    font-size: 13px;
	color:#ffffff;
  }
}
@media screen and (max-width: 600px) {
  .staprow1subcolumn p {
    font-size: 12.8px;
	color:#ffffff;
  }
}  
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .staprow1subcolumn {
    width: 100%;
  }
}


   
   
 /***************************************************** row 2: 2 divs *****************************************/
.staprow2column{
  float: left;
  width: 50%; 
}     
.staprow2subcolumn1{
	margin-right:10px;
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	/*height: 250px;*/ /* Should be removed. Only for demonstration */
	min-height: 238px;
} 
.staprow2subcolumn2{
	margin-right:0px; /* geen margin right */
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	/*height: 250px;*/ /* Should be removed. Only for demonstration */
	min-height: 238px;
}	
.staprow2subcolumn1 {
  background-color:#214C6F;/*blauw*/   
}   
.staprow2subcolumn2 {
  background-color:#6f2126;/*rood*/
}  
.staprow2column h3 {
    color: #FFFFFF;
	font-size: 1.05rem;
	font-weight: 500;
	margin-bottom:0.6rem;
	margin-top: -0.4rem;
} 
/*************** Clear floats after the columns - *********** geldt voor alle rows *********************/
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .staprow2column {
    width: 100%;
  }
}  
/* dit is om een Variable Font Size te realiseren 
 https://www.w3schools.com/howto/howto_css_responsive_text.asp */
@media screen and (min-width: 601px) {
.staprow2subcolumn1 p, .staprow2subcolumn2 p  {
    font-size: 13px;
	color:#ffffff;
  }
}

@media screen and (max-width: 600px) {
.staprow2subcolumn1 p, .staprow2subcolumn2 p   {
    font-size: 12.8px;
	color:#ffffff;
  }
} 
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .staprow2subcolumn1, .staprow2subcolumn2 {
    width: 100%;
  }
} 
   
   
   
   
   
 /******************************************* row 3: 3 divs ***************************************************************/
.staprow3column {
  float: left;
  width: 33%; 
}
/* deze div nodig om een border van 10 px te kunnen maken; anders werkt float niet meer */
.staprow2row3subcolumn1, .staprow2row3subcolumn2{
	margin-right:10px;
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	/*height: 250px;*/ /* Should be removed. Only for demonstration */
	min-height: 272px;

}
/* het derde vak geen margin-right - de row geeft toch iets ruimte rechts; ik weet niet waarom */
.staprow2row3subcolumn3{
	margin-right:0px; /* geen margin right */
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	/*height: 250px;*/ /* Should be removed. Only for demonstration */
	min-height: 272px;

}

.staprow2row3subcolumn1 {
  background-color:#266f21;/*groen*/
}
.staprow2row3subcolumn2 {
  background-color:#cf8a01;/*geel*/
}
.staprow2row3subcolumn3 {
  background-color:#cf3e18;/*blauw  ea4316  db4118                               */ 
}
.staprow3column h3 {
    color: #FFFFFF;
	font-size: 1.05rem;
	font-weight: 500;
	margin-bottom:0.6rem;
	margin-top: -0.4rem;
}
/*************** Clear floats after the columns - *********** geldt voor alle rows *********************/
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .staprow3column {
    width: 100%;
  }
} 
/* dit is om een Variable Font Size te realiseren 
 https://www.w3schools.com/howto/howto_css_responsive_text.asp */
@media screen and (min-width: 601px) {
  .staprow2row3subcolumn1 p, .staprow2row3subcolumn2 p, .staprow2row3subcolumn3 p  {
    font-size: 13px;
	color:#ffffff;
  }
}

@media screen and (max-width: 600px) {
  .staprow2row3subcolumn1 p, .staprow2row3subcolumn2 p, .staprow2row3subcolumn3 p  {
    font-size: 12.8px;
	color:#ffffff;
  }
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .staprow2row3subcolumn1, .staprow2row3subcolumn2, .staprow2row3subcolumn3 {
    width: 100%;
  }
}
/**************************************** einde row 3 ***********************************************************************************/


/************************************ stappenplan mens erger je niet *******************************************************************/
.stapmensrow2column{
  float: left;
  width: 50%; 
}
.stapmensrow3column{
  float: left;
  width: 50%; 
}
.stapmensrow2subcolumn1, .stapmensrow2subcolumn2 {
	margin-right:10px;
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	/*height: 250px;*/ /* Should be removed. Only for demonstration */
	min-height: 200px;
}
.stapmensrow2subcolumn1 {
  background-color:#214C6F;/* blauw */
}
.stapmensrow2subcolumn2 {
  background-color:#266f21;/* groen */
}
.stapmensrow2column h3 {
    color: #FFFFFF;
	font-size: 1.05rem;
	font-weight: 500;
	margin-bottom:0.6rem;
	margin-top: -0.4rem;
}
.stapmensrow3subcolumn1, .stapmensrow3subcolumn2 {
	margin-right:10px;
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	/*height: 250px;*/ /* Should be removed. Only for demonstration */
	min-height: 200px;
}
.stapmensrow3subcolumn1 {
  background-color:#cf8a01;/* oker */
}
.stapmensrow3subcolumn2 {
  background-color:#e95f3a;/* rood */
}
.stapmensrow3column h3 {
    color: #FFFFFF;
	font-size: 1.05rem;
	font-weight: 500;
	margin-bottom:0.6rem;
	margin-top: -0.4rem;
}
/*************** Clear floats after the columns - *********** geldt voor alle rows *********************/
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.stapmensrow2column, .stapmensrow3column {
    width: 100%;
  }
}
/* dit is om een Variable Font Size te realiseren 
 https://www.w3schools.com/howto/howto_css_responsive_text.asp */
@media screen and (min-width: 601px) {
.stapmensrow2subcolumn1 p, .stapmensrow2subcolumn2 p, .stapmensrow3subcolumn1 p, .stapmensrow3subcolumn2 p  {
    font-size: 13px;
	color:#ffffff;
  }
}

@media screen and (max-width: 600px) {
.stapmensrow2subcolumn1 p, .stapmensrow2subcolumn2 p, .stapmensrow3subcolumn1 p, .stapmensrow3subcolumn2 p  {
    font-size: 12.8px;
	color:#ffffff;
  }
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .stapmensrow2subcolumn1, .stapmensrow2subcolumn2, .stapmensrow3subcolumn1, .stapmensrow3subcolumn2 {
    width: 100%;
  }
} 

/*************************** einde stappenplan mens erger je niet ***************************************************************************/



.stapsinglerow1subcolumn {
	margin-right:10px;
	margin-bottom:10px;
	border: 10px solid #44230a;
	padding: 10px;
	background-color:#bd9f38; /* kerry kleur */
	/*height: 250px;*/ /* Should be removed. Only for demonstration */
	min-height: 190px;
	font-color: #fff;
}


/******************************************* nog niet geteste classes ********************************************************************/
.byline{
	 color:#d7c083;
}
.widget ul li, .widget ol li {
    border-bottom: 1px solid #ecc19b;
	border-top: 1px solid
    #ecc19b;

}
 ul li a:visited, a, a:active, a:link{
	
	color:#d7c083;
	border:none;
}
a, a:visited, a:link{
	
	color:#d7c083;
	border:none;
	-webkit-box-shadow: 0 3px 0 red;/* deze is denk ik voor een andere browser */
	/*box-shadow: 0 3px 0 yellow;*/ /* deze werkt */
	box-shadow: 0 0 0 0; /* deze schakelt de vette onderlijn uit */
	/* de hover krijg ik niet voor elkaar; die is zwart met een dikke lijn */
}

aside a, aside a:visited, aside a:link{
	color:#eadfc3; /* heel licht beige */
}
.widget a:hover { /* privacy verklaring; werkt nu */
	color:#ffffff;
}

/************testen************/

.site-footer .widget a { /* *********************  dit is de footer ******************************* */
    color: 
    #eadfc3;
}
.site-footer .widget a, .site-footer .widget a:link, .site-footer .widget a:visited  { /* *********************  dit is de footer ******************************* */
    color: 
    #ffffff;
}

/*************** de link van een reactie plaatsen *********************/
.entry-meta a {
	color: #d7c083; /* lichtbeige */
	/* steenrood #dc4817 */
}

.entry-meta a:hover {
	color: #d7c083; /* lichtbeige */
}

/*************** einde testen ***********************/

a:hover, a:active{
	
	color:#d7c083; /* lichtbeide */
	border:none;
	-webkit-box-shadow: 0 3px 0 white;
	box-shadow: 0 3px 0 white;
}

#wp-calendar a:visited{
	color:#eadfc3;
	}
#wp-calendar a{
	color:#b3713a; /* lichtbruin */
	}

#wp-calendar a:active{
	color:#ffffff; /* wit */
	}

#wp-calendar a:link{
	color:#b3713a; /* lichtbruin */
	}
#wp-calendar a:hover{
	color:#f0f0f0; /* lichtgrijs */
	}
#wp-calendar td {
	color: #ffffff; /* wit, en dit werkt */
}




/* de kleur instellen van de titel van de widget */
h2.widget-title {
    color:     #ecc19b; /* beige rose */
}
	
.singleline {/* dit is een p tag */
	border-top: 1px solid #a47854; /* bruin */
	margin-bottom: 5px;
}
.singlelineimage {/* dit is een p tag */
	border-top: 1px solid #a47854; /* bruin */
	margin-bottom: 5px;
	margin-top: 5px;
}

td {
    border-top: 1px solid #a47854; /* bruin */
    padding: 6px 10px 6px 0;
	color: #ecc19b; /* beige */
}

table {
    border-bottom: 0px solid #a47854; /* bruin */
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.2;
    margin: 0 0 20px;
    width: 100%;
}

hr {
    /*background: url(images/dotted-line.png) repeat center top;
        background-size: auto;*/
	background: none;
}
.browseProductImage{
	padding: 0px 0px 5px 0px;
}


/******************************* Begin - 3 vakken typen overzicht *******************************/

.row p {
    margin: 0 0 0em;
    /*font-size: 0.9rem;*/
}
/* Create four equal columns that floats next to each other
   https://www.w3schools.com/howto/howto_css_four_columns.asp */
.column1typen, .column2typen, .column3typen {
  float: left;
  width: 33%; 
}

/* deze div nodig om een border van 10 px te kunnen maken; anders werkt float niet meer */
.subcolumn1typen, .subcolumn2typen{
	margin-right:10px;
	margin-bottom:5px;
	border: 1px solid #be8860; /* donkerbeige */
	padding: 10px;
	min-height: 255px; /* Should be removed. Only for demonstration */

}

.subcolumn3typen {
	margin-right:10px; /* rechts hoeft geen margin, maar moet toch wel; je krijgt anders dat de image groter wordt!!!!!!!!!!!!!!!!!!!!!!!!!!! */
	margin-bottom:5px;
	border: 1px solid #be8860; /* donkerbeige */
	padding: 10px;
	min-height: 255px; /* Should be removed. Only for demonstration */

}

/* dit is om een Variable Font Size te realiseren 
 https://www.w3schools.com/howto/howto_css_responsive_text.asp */
@media screen and (min-width: 601px) {
  .subcolumn1typen p, .subcolumn2typen p, .subcolumn3typen p {
    font-size: 13px;
	color:#ffffff;
  }
}

@media screen and (max-width: 600px) {
  .subcolumn1typen p, .subcolumn2typen p, .subcolumn3typen p  {
    font-size: 12.8px;
	color:#ffffff;
  }
}

.ImageProductTypen{
	/*margin: 8px; zonder dit gaat hij vanzelf middenin staan */
	padding-bottom: 10px;
}

.KopImageProductTypen{
	margin: 5px 5px 5px 0;
}


.column1typen h3, .column2typen h3, .column3typen h3 {
    color: #FFFFFF;
	font-size: 1.05rem;
	font-weight: 500;
	margin-bottom:0.6rem;
	margin-top: -0.4rem;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.entry-header {
    margin-bottom: 13px; /* de titel boven en onder evenveel ruimte geven */
}

/*************** Clear floats after the columns - *********** geldt voor alle rows *********************/
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column1typen, .column2typen, .column3typen, .column4typen {
    width: 100%;
  }
}
/******************************* Begin - 3 vakken typen overzicht  *******************************/

/****************************** formulier *************************************************/
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
	color: #ecc19b; /* beige */
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
	color: #ecc19b; /* beige */
}
/* hoogte tekstvakken */
div.wpforms-container-full .wpforms-form input[type="date"], div.wpforms-container-full .wpforms-form input[type="datetime"], div.wpforms-container-full .wpforms-form input[type="datetime-local"], div.wpforms-container-full .wpforms-form input[type="email"], div.wpforms-container-full .wpforms-form input[type="month"], div.wpforms-container-full .wpforms-form input[type="number"], div.wpforms-container-full .wpforms-form input[type="password"], div.wpforms-container-full .wpforms-form input[type="range"], div.wpforms-container-full .wpforms-form input[type="search"], div.wpforms-container-full .wpforms-form input[type="tel"], div.wpforms-container-full .wpforms-form input[type="text"], div.wpforms-container-full .wpforms-form input[type="time"], div.wpforms-container-full .wpforms-form input[type="url"], div.wpforms-container-full .wpforms-form input[type="week"], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {

height: 24px; /* was 28 */

}

div.wpforms-container-full .wpforms-form input[type="submit"], div.wpforms-container-full .wpforms-form button[type="submit"], div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #a47854; /* donkerbeige */
	border: 1px solid #ecc19b; /* beige */
	color: #44230a;
    font-size: 1em;
    padding: 10px 15px;
}

#wpforms-submit-1770:hover{
	background-color: #44230a; /* donkerbruin */
	border: 1px solid #ecc19b; /* beige */
	color: #ecc19b;
}

/********************************************* einde formulier ***************************************************/

/********************************************* stappenplan tekst *************************************************/

.vakcontentitem ol, .vakcontentitem ul {

	margin: 0 0 1.1em;
	font-size: 0.9rem; /* ganzenbord stappenplan */
}


/******************** downloadpagina *******************/
 
.kolom{
	float: left;
  	width: 33%;
	margin: 10px;
}

/************* contact pagina foto ***************************************/

.wp-image-326{
	border: 3px solid #44230a;
}

.staprow1subcolumn  a, .staprow1subcolumn  a:visited{
	color: #eadfc3; /* stappenplan metal inquizitor */
}

.page-title-404{
	color: #44230a;
}

/* <p class="singleline"> </p>*/