/* style sheet van mijn pagina
   versie 5

*/ 

* {
  box-sizing: border-box;
}

body {
  background: url(../img/achter01.gif);
}

/* algemene opbouw plus menu */

#omtrek_midden {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  background-color:#FFFFE0;
}

.header {
  margin:0px;
  padding:0px;
}
.header  img {
width:100%
}
.onderaan {
  margin:0px;
  padding:0px;
}
.onderaan  img {
width:100%
}

/* Menu */
ul {
  list-style-type: none;
  margin: 0px;
  padding: 10px 15px 10px 10px;
  min-width:197px;
  max-width: 220px;
  border: 1px solid #0101BF;
  border-radius: 8px;
  background-color:#D7A803;
}
ul li {
  margin: 0px 0px 9px 0px;
/*  border: 3px solid #0101BF;*/
  border-radius: 5px;
  background-color: #C97E09;
  box-shadow: 5px 5px #606060;    
}
li a {
  display: block;
  
  font-weight: bold;
  font-family: Arial;
  font-size: 16PX;
  color: #FFFFFF;
  padding: 8px 16px;
  text-decoration: none;
}
li:hover {
  border-radius: 5px;
  background-color: #6919EB;
  transform: translate(3px, 3px);
  box-shadow: 2px 2px #606060;    
}
ul li.selected {
  border-radius: 5px;
  background-color: #6919EB;
  color:#000000;
  transform: translate(3px, 3px);
  box-shadow: 2px 2px #606060;     
}
ul li a.selected:hover {
  color: #FF9900;
}
/* einde menu - rest   */

.vptekst {
  border: 1px solid #0101BF;
  border-radius: 8px;
  background-color:#FFFFFF;
  margin: 0px 0px 10px 0px;
  padding: 0px 10px;
}

.linkies {
  border: 1px solid #0101BF;
  border-radius: 8px;
  background-color:#FFFFFF;
  margin: 0px 0px 10px 0px;
  padding: 0px 10px;
}
.linkies a:hover {
  color: #C97E09;
}
.linkies a::before {
content:url('../img/link03.png');
 }
.linkies a::after {
     content: "\A";
     white-space: pre;
}

img {
max-width:100%;
}
.fotopagina {
  width:auto;
  height:auto;
  border: 1px solid #11672B;
  padding:10px;
  margin:10px;
  box-shadow: 5px 5px #AEAE32;     
}
.inregel {
  height:50px;
  width:auto;
  vertical-align:middle;
  border: 1px solid #11672B;
  padding:2px;
  margin:2px;
  box-shadow: 2px 2px #AEAE32;     
}


.content_tekst {
   padding: 10px;
}
.content_img {  
  background-color:#FFFFFF;
  box-shadow: 5px 5px #AEAE32;   
  margin:15px;
  padding:10px 10px 5px 10px;
  border: 1px solid #11672B;
}
.content_img img {
    width: 100%;
    height: auto;
}
.img_desc {
   padding: 5px;
   text-align: center;
   font-family: Arial;
   color: #36566E;
   font-size: 11pt;
   font-style:italic;
}

/* Tekst enz */

.kop {
/* zie ook mediaquerie onder*/
  font-weight: bold;
  font-family: Arial;
  color: #D12308;
  font-size: 24pt;      
 }

p {
/* zie ook mediaquerie onder*/
  font-family: Arial;
  color: #36566E;
  font-size: 16pt;
}
.datum {
  font-family: Arial;
  color: #36566E;
  font-size: 8pt;
  line-height: 10%;
  text-align:right;
 }
.datum::before {
  content: "- - - datum: ";
}
.datum::after {
  content: " - - - ";
}

a {
  font-family: Arial Black;
  color: #36566E;
  font-size: 16pt;
  text-decoration: none;
}
a:hover {
  color: #E4E5FF;
}
a.tekst {
  /* zie ook mediaquerie onder*/
  font-family: Arial;
  color: #36566E;
  font-size: 16pt;
  text-decoration: underline;
}
a.tekst:hover {
  color: #587C98;
}

a.blind {
opacity:0.01;
 }


.row::after {
  content: "";
  clear: both;
  display: block;
}
[class*="col-"] {
    float: left;
    padding: 10px;
    /*border: 1px solid #FFC5C5;*/
}
.col-1 {width: 10%;}
.col-2 {width: 20%;}
.col-3 {width: 30%;}
.col-4 {width: 40%;}
.col-5 {width: 50%;}
.col-6 {width: 60%;}
.col-7 {width: 70%;}
.col-8 {width: 80%;}
.col-9 {width: 90%;}
.col-10 {width: 100%;}

@media only screen and (max-width: 1100px) {
.colb-1 {width: 10%;}
.colb-2 {width: 20%;}
.colb-3 {width: 30%;}
.colb-4 {width: 40%;}
.colb-5 {width: 50%;}
.colb-6 {width: 60%;}
.colb-7 {width: 70%;}
.colb-8 {width: 80%;}
.colb-9 {width: 90%;}
.colb-10 {width: 100%;}

img { height:auto; }
}

@media only screen and (max-width: 670px) {
p {font-size:14px; }
}

@media only screen and (max-width: 535px) {
.colc-10 {width: 100%;}

p {font-size:12px; }

}