/* Create four equal columns that sits next to each other responsive fotogrid*/

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

/* einde fotogrid */



.container10 {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: auto;
 
  width: 400px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}


div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}


/* Style the container with a rounded border, grey background and some padding and margin */
.container2 {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
  max-width:640px;
  max-height:;
}

/* Clear floats after containers */
.container2::after {
  content: "";
  clear: both;
  display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container2 img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/* Increase the font-size of a span element */
.container2 span {
  font-size: 20px;
  margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
  .container2 {
    text-align: center;
  }

  .container2 img {
    margin: auto;
    float: none;
    display: block;
  }
}


/* Style the container with a rounded border, grey background and some padding and margin */
.container-kaart {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 1px;
  margin: 1px 0;
  max-width:640px;
  max-height:360px;
}

/* Style the container with a rounded border, grey background and some padding and margin */
.container-kaart2 {
  border: 2px solid #ccc;
  background-color: #DFDDD7  ;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
  max-width:640px;
  max-height:360px;
}

.container3 {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
  max-width:640px;
  max-height:;
}



.card {
  
  max-width:1200px;
  margin: auto;
  text-align: center;

  box-shadow: 0 12px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  background-color:;
}
.card1 {
  
  max-width: 300px;
  margin: auto;
  text-align: center;

  box-shadow: 0 12px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  background-color:#e3ca45;
  height: 250px;
}

  .card2 {
  
  max-width: 300px;
  margin: auto;
  text-align: center;

  box-shadow: 0 12px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  background-color:#e25e33;
  height: 250px;
}

.card3 {
  
  max-width: 300px;
  margin: auto;
  text-align: center;

  box-shadow: 0 12px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  background-color:#8e3256;
  height: 250px;
}


.card4 {
  
  max-width: 300px;
  margin: auto;
  text-align: center;

  box-shadow: 0 12px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  background-color:#13678b;
  height: 250px;
  
}






.title {
  color: white;
  font-size: 18px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: max-width: 300px;

  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}




/* Responsive columns -concept ontwikkeling start */




* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;}

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

/* Style the counter cards */

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}


/* Responsive columns -concept ontwikkeling einde */












body {
  margin: 0;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
 
}


.alert-success{color:white;background-color:#D81B60;border-color:#d6e9c6}
.alert-success hr{border-top-color:#c9e2b3}





.well2{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f2ebd8;
border:4px solid #e3e3e3;
border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}



.header {
  background-color: black;
  padding: 80px;
  text-align: center;
  background-image:url('images-index/totaal-header-7.jpg');
    background-repeat: no-repeat;
 
}

#navbar {
  overflow: hidden;
  background-color: #FFB901;/*algemene template kleur KK geel*/


  	z-index:2;
 
}

#navbar a {
  float: left;
  display: block;
  color: #fff;/*wit*/

  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;/*licht grijs*/
  color: black;
}

#navbar a.active {
  background-color: #04AA6D;/*licht groen*/
  color: #fff;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}


/* VAVAF hier oude css blog */


.newspaper {
  column-count: 2;
  column-gap: 40px;
   column-width: 250px;
    column-rule: 4px double grey;
   
}

.btn-warning{color:#fff;background-color:#FFB901;border-color:#ff4d01} /*algemene banaan  wit-standaard geel-orange */

.btn-default2 {color:#fff;background-color:#d40a06;border-color:#ff4d01} /*boven banaan  wit-standaard e */


.btn-default3{color:#fff;background-color:#4D004D;border-color:#ff4d01} /*algemene banaan  wit-standaard  */


.btn-default{color:#333;background-color:#fff;border-color:#ccc}/*ongebruikt?*/




/* unvisited link donker grijs*/
a:link {
  color: #4C4C4C ;
  padding: 14px 6px;
  text-decoration: none;
  font-size: 14px;
}

/* visited licht grijs */
a:visited {
   color:  #a9a9a9 ;
}

/* mouse over link licht grijs*/
a:hover {
  color:  #a9a9a9 ;
}

/* selected link licht grijs*/
a:active {
  color:  #a9a9a9 ;
}



.well
{
	background-color:#FFFFFF;/*wit*/
	 }

}

	.footer {
   text-align: center;
   position: ;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: white;
   color: black;
   
}
  .container {
    padding-top: 1px ;
     width: 80%;
  }



    /* Altijd 1 keer gebruiken voor de pagina titel onderwerp van de pagina*/
h1 { color: white ;
font-size:28px; 
padding-top:0px;
padding-left:;
}

/* onderwerp wisseling/hoofdstukken op pagina donker aubergine*/
h2 { color:#4d004d;
font-size:22px; 
padding-left:px;

}

/* subkoppen voor alinea's donker aubergine*/
h3 { color:#4d004d;
font-size:16px; 
font-weight: bold;

}

/* Quots warm bruin rood  onliner als aandachts regel in de tekst.*/
h4 { color: #d40a06;
font-weight: ;
font-size:16px;  


}

/* linkregel in de tekst.*/
h5 { color:white;
font-weight: ;
font-size:18px;  

}



/* tekst klein artikel overzicht.*/
h6 { color:white;
font-weight: ;
font-size:14px;  
  display: block;
  margin-top: 0px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 0;
  font-weight: ;
}



/* tekst klein artikel overzicht.*/
h7 { color:white;
font-weight: ;
font-size:44px;  
  display: block;
  margin-top: 0px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 0;
  font-weight: ;
}




p { 
        font-size:16px; 
        font-family:Arial, Helvetica, sans-serif;
        font-weight:normal;
        font-style:normal;
        line-height:18px;
        color: #666666;
}



/* aanvulling tekst op foto plaatsen.*/

.container-foto {
  position: relative;
  text-align: center;
  color: black;
  
}


.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
   
/* Add a card effect for articles */
.card {
   background-color: white;
   padding: 20px;
   margin-top: 20px;
   border:4px solid #e3e3e3;

}

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


}