html {
  box-sizing: border-box;
  font-size: 1.1rem;
  background: #444;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 0;
  font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

p {
    font-family: Calibri, Arial, sans-serif;
    font-size: 1.1em;
    color: #FFFFFF;    
}
p em {
    font-style:italic;
}

p.small {
    line-height: 120%;
    font-size: 0.9em; 
}

h1 {
  font-size:36px;
  color:#FFFF30;
}
h2 {
  font-size:28px;
  color:#FFFF30;
}
h3 {
  font-size:20px;
  color:#EEDD10;
}
h4 {
  font-size:18px;
  color:#DEC400;
}
h5 {
  font-size:16px;
  color:#FFFF30;
}
h6 {
  font-size:14px;
  color:#FFFF30;
}

smaller {
  font-size:60%
}

/* unvisited link */
a:link {
    color: #00FF00;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #C0B0B0;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
    text-decoration: underline;
}

/* selected link */
a:active {
    color: #0000FF;
    text-decoration: underline;
}

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  padding: 5px;
  background: #302F2A url('../graphics/eyes.png');
  background-repeat: no-repeat;
  background-size:150% auto;
  background-position:left top;  
  
  /*background-color: #555;*/
  /*border: 5px solid black;*/
}
/* 
.container {
    overflow: auto;
    box-sizing:content-box;
    width: 600px;
}
*/
.col2 {
    box-sizing:border-box;
    width:50%;
    margin: 0;
    padding: 0.5em;
    background-color: beige;
    border:5px silver groove;
    float:left;
}

.musiccontainer {
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  /* padding: 10px; */
  justify-content: center;
}

.musicalbum {
    box-sizing:border-box;
    max-width:360px;
    min-width:260px;
    margin: 10px;
    padding: 10px;
    background-color: #333333;
    border:1px solid silver;
    flex: auto;
    box-shadow: 0.33em 0.25em 0.6em 0.4em #262626;
}
ul {
    font-family: Calibri, Arial, sans-serif;
    font-size: 1.1em;
    color: #FFFFFF;    
}

.clearall {
  clear:both;
 }

hr {
 clear:both;
 }

header, main, aside, .zijkolom-1, .zijkolom-2, footer {
  flex: 100%;
}
main, aside, .zijkolom-1, .zijkolom-2, footer {
  flex: 100%;
  color:#FFFF30;
  border-radius: 10px;
  background-color: #666;
  border: 5px groove #222;
  padding: 5px;
  margin: 5px;  
}

zijkolom-1 {
  max-width: 175px;
 }

header {
  padding: 0px;
  margin: 5px;
}
header h1 {
  text-align: left;
  color: #FFFF00;
  font-size:210%;
  letter-spacing: -2px;
}

main {
}

address {
 }

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: justify;
  padding: 8px;
  font-family: Calibri, Arial, sans-serif;
  font-size: 1.1em;
}

tr:nth-child(even){background-color: #555555}

th {
  background-color: #444444;
  color: #EEDD10;
}

td {
  vertical-align:top;
  font-size: 0.8em; 
  color: #FFFFFF;
}

.zijkolom-1 { 
  font-size: 0.8em; 

}
.zijkolom-2 { 
}
footer { 
}

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

img.albumcoversmall {
    width: 100%;
    height: auto;
    max-width: 120px;
    float: left;
    margin:10px;
    border:ridge;
    border-color:green;
    border-spacing:3px;
}

img.albumcover {
    width: 100%;
    height: auto;
    max-width: 200px;
    float: left;
    margin:10px;
    border:ridge;
    border-color:green;
    border-spacing:3px;
}

img.catcam {
    height: auto;
    max-width:100%;
}

img.inline {
    width: 100px;
    height: auto;
    max-width: 100px;
    float: left;
    margin-top:3px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    border:none;
}

img.rinline {
    width: 100px;
    height: auto;
    max-width: 100px;
    float: right;
    margin-top:3px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    border:none;
}

img.r100 {
    width: 100px;
    height: auto;
    max-width: 100px;
    float: right;
    margin-top:3px;
    margin-left:20px;
    margin-right:0px;
    margin-bottom:10px;
    border:none;
}

img.l100 {
    width: 100px;
    height: auto;
    max-width: 100px;
    float: left;
    margin-top:3px;
    margin-left:0px;
    margin-right:20px;
    margin-bottom:10px;
    border:none;
}

img.l50 {
    width: 50px;
    height: auto;
    max-width: 100px;
    float: left;
    margin-top:3px;
    margin-left:0px;
    margin-right:20px;
    margin-bottom:10px;
    border:none;
    border-radius: 50%;
}

img.r150L {
    width: 150px;
    height: auto;
    max-width: 100%;
    float: left;
    margin-top:3px;
    margin-left:10px;
    margin-right:0px;
    margin-bottom:10px;
    border:none;
}

img.r150 {
    width: 150px;
    height: auto;
    max-width: 100%;
    float: right;
    margin-top:3px;
    margin-left:20px;
    margin-right:0px;
    margin-bottom:10px;
    border:none;
}

img.l150 {
    width: 150px;
    height: auto;
    max-width: 100%;
    float: left;
    margin-top:3px;
    margin-left:0px;
    margin-right:20px;
    margin-bottom:10px;
    border:none;
}

img.r200 {
    width: 200px;
    height: auto;
    max-width: 100%;
    float: right;
    margin-top:3px;
    margin-left:10px;
    margin-right:0px;
    margin-bottom:10px;
    border:none;
}

img.l200 {
    width: 200px;
    height: auto;
    max-width: 100%;
    float: left;
    margin-top:3px;
    margin-left:0px;
    margin-right:20px;
    margin-bottom:10px;
    border:none;
}

img.r250 {
    width: 250px;
    height: auto;
    max-width: 100%;
    float: right;
    margin-top:3px;
    margin-left:10px;
    margin-right:0px;
    margin-bottom:10px;
    border:none;
}

img.l250 {
    width: 250px;
    height: auto;
    max-width: 100%;
    float: left;
    margin-top:3px;
    margin-left:0px;
    margin-right:20px;
    margin-bottom:10px;
    border:none;
}

img.r260 {
    width: 260px;
    height: auto;
    max-width: 100%;
    float: right;
    margin-top:3px;
    margin-left:10px;
    margin-right:0px;
    margin-bottom:10px;
    border:none;
}

img.r300 {
    width: 300px;
    height: auto;
    max-width: 100%;
    float: right;
    margin-top:3px;
    margin-left:10px;
    margin-right:0px;
    margin-bottom:10px;
    border:none;
}

img.l300 {
    width: 300px;
    height: auto;
    max-width: 100%;
    float: left;
    margin-top:3px;
    margin-left:0px;
    margin-right:20px;
    margin-bottom:10px;
    border:none;
}

img.center40 {
    display:block;
    width: 40%;
    height: auto;
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3px;
    border:solid;
    transition: width 3s;
}

img.center40:hover {
    width: 100%;
}

img.center60 {
    display:block;
    width: 60%;
    height: auto;
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3px;
    border:solid;
    transition: width 3s;
}

img.center60:hover {
    width: 100%;
}

img.center80 {
    display:block;
    width: 80%;
    height: auto;
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3px;
    border:solid;
    transition: width 3s;
}

img.center80:hover {
    width: 100%;
}

img.catcamhistory {
    width: 100%;
    height: auto;
    max-width: 600px;
    display:block;
    margin: auto;
    margin-top:3px;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
    border:solid;
    clear:both;
}

.mySlides {
    display:none;
}


/*
*/

/*
nav {
    box-sizing:border-box;
    position:fixed;
        top:10.1em;
        left:0%;
        height:auto;
        width:20%;
        max-width:10em;
    background-color: grey;
    border: 5px groove grey;
    padding: 5px;
    margin: 5px;
    overflow: auto;    
}
nav.music {
    box-sizing:border-box;
    position:fixed;
        top:10.1em;
        left:0%;
        height:auto;
        width:50%;
        max-width:10em;
    background-color: grey;
    border: 5px groove grey;
    padding: 5px;
    margin: 5px;
    overflow: auto;    
}

*/
/*
main {
    box-sizing:border-box;
    position:fixed;
        top:201px;
        left:201px;
        height:auto;
        width:400px;
    background-color: lightblue;
    border: 5px groove lightblue;
    padding: 5px;
    margin: 5px;
}
*/
/*
aside {
    box-sizing:border-box;
    position:fixed;
        top:201px;
        left:601px;
        height:auto;
        width:200px;
    background-color: lightgoldenrodyellow;
    border: 5px groove lightgoldenrodyellow;
    padding: 5px;
    margin: 5px;
}
*/

@media screen and (min-width: 40em) { /* 640px */
  .zijkolom-1, .zijkolom-2 {
    flex: auto;
  }
  .zijkolom-1 { order: 2; }
  main        { order: 1; }
  .zijkolom-2 { order: 3 }
  footer      { order: 4; }
}

@media screen and (min-width: 48em) { /* 768px */
  main { flex: 2; }
  .zijkolom-1 { 
   flex-basis: 305px;
   flex-grow: 0;
   flex-shrink: 0;
   }
  .zijkolom-2 { flex: 100%; }
  .zijkolom-1 { order: 1; }
  main        { order: 2; }
  .zijkolom-2 { order: 3 }
  footer      { order: 4; }

}

@media screen and (min-width: 64em) { /* 1024px */
  main { flex: 3; }
  .zijkolom-1 { 
   flex-basis: 305px;
   flex-grow: 0;
   flex-shrink: 0;
   }
  .zijkolom-2 { flex: 1.6; }

  .zijkolom-1 { order: 1; }
  main        { order: 2; }
  .zijkolom-2 { order: 3 }
  footer      { order: 4; }
}

@media screen and (min-width: 80em) { /* 1280px */
  main { flex: 3; }
  .zijkolom-1 { 
   flex-basis: 305px;
   flex-grow: 0;
   flex-shrink: 0;
   }
  .zijkolom-2 { flex: 1; }
  
  .zijkolom-1 { order: 1; }
  main        { order: 2; }
  .zijkolom-2 { order: 3 }
  footer      { order: 4; }
}

@media screen and (min-width: 120em) { /* 1400px ? */
  main { flex: 3; }
  .zijkolom-1 { 
   flex-basis: 305px;
   flex-grow: 0;
   flex-shrink: 0;
   }
  .zijkolom-2 { flex: 1; }
  
  .zijkolom-1 { order: 1; }
  main        { order: 2; }
  .zijkolom-2 { order: 3 }
  footer      { order: 4; }
}

#kopfoto {
    margin: 0px;
    padding: 5px;
    height: 110px;
    width: auto;
    float: left;
    text-align: center;
 }
 
audio {
 width:95% ;
 margin-top:5px;
 }

video {
 width:100% ;
 margin-top:5px;
 }
 
.iframearchief {
 width:100% ;
 height:600px;
 margin-top:5px;
 overflow: scroll;
 border:5px silver groove;
 border-radius: 10px;
 }

.iframevideo {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 35px;
 height: 0;
 overflow: hidden;
 }

.iframevideo iframe {
 position: absolute;
 top:0;
 left: 0;
 width: 100%;
 height: 100%;
 border:none;
}

 
/* .iframevideo {
 width:100% ;
 height:400px;
 margin-top:5px;
 overflow: scroll;
 border:none;
 } */

.iframeweer {
 height:285px;
 margin:auto;
 overflow: scroll;
 border:none;
 }
 
.contactformulier {
 width:100% ;
 height:700px;
 margin-top:5px;
 overflow: scroll;
 border:none;
 }
 
/*
audio {
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #FBFBAA;
-webkit-box-shadow:  2px 2px 4px 0px #FBFBAA;
box-shadow: 2px 2px 4px 0px #FBFBAA;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}
*/