/*keesrwd = bewerking weblogs.css*/
* {
    box-sizing: border-box;
}

/* Add a  background color   lettertype geldt voor de hele pagina teal = roze/
body {
	background-color: #FFCCFF;
    font-family: Verdana;
    font-size: 10pt;    
}

/* Header/Blog Title*/
.header {
	width:100%;
    padding: 10px;
    text-align: center;
   
}

/* Header/Blog Title: de header bij grote schermen versmallen */
/* Extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
    .header {width: 65%;
    padding: 10px;
    text-align: center;
  }
 }
 
/* border in de header - felblauw*/
#border1 {
    border: 2px solid  #006699;
    padding: 10px;
}

/* Backtoets, resp grijs en lichtblauw */
a.previous {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}

a.previous:hover {
    background-color: #ddd;
    color: black;
}

.previous {
    background-color:#C8DCEC ;
    color: black;
    float: right;
}
/* Einde backtoets */

/* RIJEN */

/* zorgt er voor dat allebei de kolommen even hoog zijn, maar het is niet responsive bij ongeveer 368 */
.row {
    width: 100%;  
    content: ""; 
    display: table;
    background-color: #FFCCFF;
    clear: both;
}

/* Extra large devices (large laptops and desktops, 1400px and up) kolom versmallen bij grote schermen */
@media only screen and (min-width: 1400px) 
{
.row {
    width: 65%; 
    background: #FFCCFF; 
    content: "";
    display: table;
    clear: both;}
}

/* KOLOMMEN*/

/* Create two EQAL columns that floats next to each other, hier echt fifty, fifty  en niet 20, 80 etc*/
/* Left column */
.leftcolumn50 {   
    float: left;
    width: 50%;     
}

/* Right column  */
.rightcolumn50 {
    float: left;
    width: 50%;
    
   
}     
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other, voor telefoontjes */
@media screen and (max-width: 800px) {
    .leftcolumn50, .rightcolumn50 {   
        width: 100%;
        padding: 0;}
}




/* 1 kolom*/
.col-12 {
	float: left; 
	width:100%; 
	
}

/*kolommen gelijke hoogte houden door in één blok te doen */
.column-container {
  display: table;
  width: 100%;
}

/* Float 3 columns side by side */
.column3 {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column3 {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards, kleur was  C8DCEC*/
.card3 {
  background-color: #E8F0F7;  
  padding: 5px;
  font-family: Verdana; 
  font-size: 10pt; 
  text-align: left;
  width: 100%; 
}

/* Clear floats after the columns  Hier???*/
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Add a card effect for articles , met tekstblokken werken, die je in de kolommen plaatst*/
/*roze*/
.card {
     background-color:#FFCCFF;
     padding: 20px;
     text-align: left;
     font-family: Verdana;
     font-size: 10pt;
}

/*groen*/
.carda {
     background-color:#CCFF99;
     padding: 20px;
     text-align: left;
     font-family: Verdana;
     font-size: 10pt;
}

/*wit*/
.cardb {
     background-color:#FFFFFF;
     padding: 20px;
     text-align: left;
     font-family: Verdana;
     font-size: 10pt;
}
/*blauw*/
.cardc {
     background-color: #E8F0F7;
     padding: 20px;
     text-align: left;
     font-family: Verdana;
     font-size: 10pt;
}     
/* Fake image een nepplaatje neerzetten*/
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}


/* Footer */
.footer {
    padding: 10px;
    text-align: center;
    background: #E8F0F7;
    font-family: Verdana; 
    width:100%;
    margin-top: 20px;
    font-size: 10pt;    
}

/* Footer voor groot scherm kolom versmallen*/
/* Extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
    .footer {width: 65%;
    background:  #E8F0F7;
    padding: 10px;
    text-align: center;
    margin-top: 10px;}
}



/*  NU VOLGT DE GEWONE OPMAAK bestudeer https://www.w3schools.com/html/html_classes.asp , met name multiple classes*/

h1 {
	color: #000000;
	font-family: Verdana; 
	font-size: 24pt; 
	font-weight: bold;
}

h2 {
	color: #000000;
	font-family: Verdana; 
	font-size: 14pt; 
	font-weight: bold;
}
/* margin-top en bottom 0, omdat h3 anders te veel ruimte inneemt*/
h3 {
	color:  #000037;
	font-family: Verdana; 
	font-size: 10pt; 
	font-weight: bold;
  	margin-top: 0;
  	margin-bottom: 0;	
}

h4 {
	color:  #4A79A6;
	font-family: Verdana; 
	font-size: 10pt; 
	font-weight: bold;
}
h5 {
	color:  #000037;
	font-family: Verdana; 
	font-size: 24pt; 	
}
img {
    max-width: 100%;
    height: auto;
  
}
/* iframe gastenboek */
iframe { 
border:0;
height: 500px;
width: 100%;
}