@charset "UTF-8";
/* CSS Document */

html, body {margin:0;height:100vh;background-image:url(../plaatjes/achtergrond2.jpg);background-position: center;background-repeat: no-repeat;background-attachment: fixed;background-size: cover}
body,td,th {font-family: jarendertig;font-size:1.8vw;color:lightblue;text-shadow: 1px 1px #333}
h2{font-family: jarendertig;color:lightblue;font-size:15vw;text-shadow: 1px 1px #333;margin-top:10%;margin-left:5%;position:absolute;z-index:100}
h3{font-size:2.8vw}

@font-face {
  font-family:jarendertig;
	src:url(http://www.septiem.nl/fonts/parisish.ttf)
}

#container{height:100vh;}
#knopjes {left:3vw;bottom:5vh;position:fixed;z-index:10}

.meer{float:right;text-align:right;}
.tabs {list-style-type:none;padding:0;position:absolute;top:5%;right:5%;}


.tabs li {float:right;}
.tabs li > input {display:none;}
.tabs li > label {display:inline-block;border:0;border-right-width:0;border-bottom-width:0;margin-right:20%;text-align:center;width:100px;height:30px;line-height:30px;padding:5px 20px;cursor:pointer;font-family: arial;color: #FFF;font-size:19px;text-decoration: none;text-shadow: 1px 1px #333;}
.tabs li:last-child > label {border-right-width:0;}
.tab-content {top:30vh;position:absolute;padding: 50px 20px 20px 20px;background: rgba(255, 255, 255, 0.7);overflow:auto;height:50vh;right: 0;width:80vw;transition: opacity 1.6s cubic-bezier(.42, 0, .34, 1.01);opacity: 0;}
#dhz {width:150px}
.poster {height:610 px}



.tab [type=radio] { display: none; }


[type=radio]:checked ~ label ~ .tab-content {
  z-index: 1;
  opacity: 1;
}







/*functional*/

.tabs li > input:checked + label {color:#CCC;}



.flex-container {display: flex;flex-wrap: wrap;}

.flex-container > div
.filmpje, .cdtje, .poster {min-width:10px;margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;}
.cdtjediv{min-width:220px;}
.bandje {height: 60px;width: 40px;cursor:pointer;} 
.cdtje {height: 60px;width: 60px;cursor:pointer;box-shadow: 4px 4px 2px grey}
.dubbelcdtje {height: 60px;width: 70px;cursor:pointer;}
.cdtje p .2cdtje p .bandje p{margin-left: 10px;font-size: 24px;float: left;line-height: 24px;}
.knopjes {height:20px;width:20px}
.filmpje p {line-height: 44px;text-align:center;}

.filmstill {height: 90px;width: 160px;cursor:pointer;margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;}






.small_button, .small_button.play {background-image: url("../wimpy/buttons/play_small.png");background-repeat: no-repeat;display: inline-block;vertical-align: middle;height: 19px;width: 21px;}

.small_button.pause {background-image: url("../wimpy/buttons/pause_small.png");}
.afsluiter {height:50%;position: absolute;left: 0;right: 0;top:0;bottom:0;margin: auto;width:60%;visibility:hidden;background: white;}
.knop {display:block;margin:auto;width:50%;height:20%;padding:10%;}



<--check>



.nospry {overflow:auto;}


a:link {text-decoration: none;color:lightblue;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;color: #CCC;text-shadow: 1px 1px #333;}



.img-projecten {width:250px;align:left;margin:10px}
.poster1{height:310px}
.poster2{height:200px;width:140px}
.youtube{height:270px;width:480px;} 



.overlay {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;background-color: rgb(0,0,0);background-color: rgba(0,0,0, 0.9);overflow-x: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 25%;width: 100%;text-align: center;margin-top: 30px;}
.overlay a {padding: 8px;text-decoration: none;font-size: 36px;color: #818181;display: block;transition: 0.3s;}
.overlay a:hover, .overlay a:focus {color: #E8243C;}
.overlay .closebtn {position: absolute;top: 20px;right: 50px;font-size: 60px;}

.klein-menu {right:10px;top:10px;color:#900;display:none;position:fixed;font-size:16px;z-index:10}

@media only screen 
and (min-device-width : 768px) 
  and (max-device-width : 1024px) {h2 color: green}

@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {font-size: 40px;top: 15px;right: 350px;}