@font-face{
  font-family: kalam;
  src: url(Kalam-Bold.ttf);
}
@font-face{
  font-family: caviar;
  src: url(CaviarDreams-webfont.woff);
}


body {
  margin: 5px;
  font-family: "kalam";
  background-color: #007849;
  color: #fed;
}
header{
  background: #0375b4;
  background:  url(corbeaux_images/lucht3.jpg);

  
/*  background-size: 35px, auto;*/
/*  background-image: url(corbeaux_images/ravenKlein.png);*/
  position: sticky;
  position: -webkit-sticky; /* Safari */
  top: 5px;
  padding: 5px;
  margin-bottom: 3px;
  font-family: kalam;
  text-align: center;
  border: solid 1px #da1;
  border-radius: 6px;
}

header div{
   background:  url(corbeaux_images/ravenKlein.png) right top no-repeat;
   background-size: 35px;
}

header h1, header p{
  margin: 0;
  padding: 0;
}

/************ navigatie ***********/

nav {
  margin: 0;
  padding: 0;
  width: 150px;
  background: #ffce00;
  color: #f00;
  font-family: caviar;
  font-weight: bold;
  position: fixed;
  height: 100%;
  overflow: auto;
  border-radius: 8px;
}

nav a {
  display: block;
  color: #050;
  font-weight: bold;
  padding: 5px 16px;
  text-decoration: none;
}
 
nav a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 0 15px 15px 0;
}

nav a:hover:not(.active) {
  background-color: #555;
  color: white;
}

#showInlogForm{
  background:  orange;
  width: 100px;
  height:30px;
  border: ridge 2px yellow;
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 100%;
  border-radius: 8px;
  }

#inlogButton{
  background:  orange;
  width: 100px;
  height:30px;
  border: ridge 2px yellow;
  margin: 25px;
  font-size: 100%;
  border-radius: 8px;
  }

#showInlogForm a, #inlogButton a{
  text-decoration: none;
  color: black;
  background:  orange;
}

#muziek_menu{
    background: #fd4;
    font-size: 1.3em;
    font-weight: bold;
    border-bottom: 1px solid #008859;
    border-top: 1px solid #008859;
    border-radius: 8px;
    -webkit-animation-name: muziekMenu;
    -webkit-animation-duration: 6s;
    animation-name: muziekMenu;
    animation-duration: 6s;
}
@-webkit-keyframes muziekMenu {
  0%   {
    background-color: #fd4;
  }
  25%  {background-color: green;}
  50%  {background-color: dodgerBlue;   color: white;}
  100% {background-color: #fd4;}
}

@keyframes muziekMenu {
  0%   {background-color: #fd4;}
  25%  {background-color: green;}
  50%  {background-color: dodgerBlue;   color: white;}
  100% {background-color: #fd4;}
}


#muziek_menu:hover{
  background: dodgerBlue;
}

#inlogExtra{
    border-top: 1px solid #008859;
    border-bottom: 1px solid #008859;
    border-radius: 8px;

}


 /*************   main  ****************/



main {
  
  margin-left: 170px;
  padding: 1px 3px;
  height: 1000px;
  font-family: "times new roman";


}
 main h2{
  padding: 4px;
  margin: 20px 30px;
  text-align: center;
  border: 1px solid #008859;
  border-radius: 8px;
  width: 93%;
  
 }

 main h4{
  font-size: 120%;
  color: #fed;
  margin: 15px 5px 5px 5px;
 }


main a{
  background: #090;
  color: #fed;
  padding: 0 3px;
}

main a:hover{
  background: green;
}


#home p, #home img,#home table{
  width: 1075px;
  padding: 10px;
  margin: 5px;
  border: 1px solid #da1;
}

#home table{
     width: 1097px;
}

#home table th{
  text-align: left;
  border-bottom: 1px solid #da1;
  padding: 10px 0;
}

#home table td{
  width: 30%;
}

#contact table td{
  width: 30%;
    padding: 10px;
  margin: 5px;
  border: 1px solid #da1;
}

#smoelen{
  display: flex;
   flex-wrap: wrap;
  background-color: #262;
}

#smoelen img{
  max-width: 100px;
  border: 3px ridge #da1;
}

 #smoelen div{
   max-width: 100px;
   margin: 4px;
 }


  #smoelen p{
    text-align: center;
    
  }

  main #concert h2{

  }

#achtergrond{
 /* background-repeat: no-repeat;
  background-image: url("corbeaux_images/poster12aprilD.jpg");
  background-size: 70%;*/
/*  width: 100%;*/
/*  height: 1000px;*/
  margin: 0;
}

#achtergrond img{
  width: 100%;
}

#achtergrond h1, #achtergrond h2, #achtergrond h3{
  color: black;
  text-align: center;

}

#achtergrond h1{
  padding: 0px 0 0 0;
  font-size: 10vw;
}

#achtergrond h2{
  padding: 4px;
  margin: 10px 0;
  text-align: right;
  border: initial;
  font-size: 5vw;
}

h4{
  text-align: left;
  margin: 0 0 0 50px;
  color: black;
}

/*********************  max-width: 1300px  ***********************/

@media screen and (max-width: 1300px) {
  #home p, #home img, #home table{
    width: 850px;
    padding: 10px;
    margin: 5px;
    border: 1px solid #da1;
  }
  #home table{
    width: 872px;
  }
  #nummerinfo {
    margin: 5px;
    border: 1px solid #da1;
    width: auto;
    padding: 10px;  
  }

}


/*********************** programma  ***********************/

.programma{
  width: auto;
}

.info_kop{
  font-size: 150%;
}

#nummerinfo {
    margin: 5px;
    border: 1px solid #da1;
    width: auto;
    padding: 0px;  
}

#nummerinfo button{
  border-bottom: 1px solid #080;
}

#nummerinfo button:hover{
  background-color: #060;
}

.accordion {
  background-color: #050;
  color: #fed;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {

  color: #fed;
}



.panel {
/*  padding: 0 18px;*/
  display: none;
  width: 100%;
  background-color: #050;
  color: #050;
/*  overflow: hidden;*/
}

.panel p{
  background-color: #fed;
  width: 80%;
}

.panel p, .panel ul{
  background-color: #fed;
  width: 80%;
  margin: 5px;
  padding: 10px 10px 10px 30px;
}

/*******************  agenda  *****************/

#agenda td{
  padding: 0 10px 0 2px;
}



/*#flyer img, #flyer p{
  width: 600px;
  border: solid 1px #da1;
  padding: 10px;
}*/

/*#smoelen{
  display: flex;
  flex-wrap: wrap;
  background-color: #262;
}*/

/*#smoelen > div{
  background-color: #373;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 3px;
}*/



.adres{
  border: solid 1px #da1;
  width: 250px;
  padding: 10px;
  margin: 4px;
}


/************************  concert  ************************/





/************************ max-width: 1050px  *************/

@media screen and (max-width: 1050px) {
  #home p, #home img, #home table{
    width: 750px;
    padding: 10px;
    margin: 5px;
    border: 1px solid #da1;
  }
  #home table{
    width: 772px;
  }

#nummerinfo {
    margin: 5px;
    border: 1px solid #da1;
    width: auto;
    padding: 10px;  
}


  #buirefontaine p, #buirefontaine img{
    width: 600px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #da1;
  }
  

  nav {
    width: 100%;
    height: auto;
    position: relative;
    position: sticky;
    position: -webkit-sticky; /* Safari */
    top: 50px;
  }

  nav a {
    float: left;
    font-size: 70%;
  }
  main {
    margin-left: 0;
  }
    #agenda td{
    padding: 0 2px 0 2px;
  }

}
/***********************  max-width: 700px  *********************/

@media screen and (max-width: 700px) {

  #home p, #home img, #home table{
    width: 400px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #da1;
  }

  #nummerinfo,  #nummerinfo p{
    margin: 5px;
    border: 1px solid #da1;
    width: auto;
    padding: 5px;  
}
  #home table{
    width: 412px;
  }

  #home td{
    border-bottom: 1px solid #da1;
  }

  #buirefontaine p, #buirefontaine img{
    width: 400px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #da1;
  }

  main .auteurs{
    display: none;
  }

  /*#flyer img, #flyer p{
    width: 400px;
    padding: 5px;
  }*/



  nav a {
    text-align: center;
    float: none;
  }
  main{
    margin: 5px;
  }
  main .hoeftniet{
    display: none;
  }
   #agenda td{
    padding: 0 2px 0 2px;
  }
  /*
  #showInlogForm{
    position: absolute;
    top: 20;
    right: 0;

    font-size: %;
  }*/
}
/************    loggen    ************/

/*   inlog knop*/

#inlogpagina{
  margin: 30px;
}

form {
  max-width: 440px;

}


h3{
  color:#365D98;
}
form label{
  font-weight: bold;
}
form label, form input{
  display: block;
  margin-bottom: 5px;
}
form input{ 
  border: solid 3px #666666;
  padding: 10px;
  border: solid 1px #BDC7D8; 
  margin-bottom: 20px
}

.alert{
  font-weight: bold;
  color: #f00;
  margin: 20px;
}

.invalid-feedback{
  color: #f00;
}



#loginknop2 input{
  background:  orange;
  width: 100px;
  height:30px;
  border: ridge 2px yellow;
  margin: 25px;
  padding: 5px;
  font-size: 100%;
  border-radius: 8px;
}

#loginknop2 input:hover{

  border: ridge 2px dodgerBlue;
  cursor: pointer;

}


/**************  muziek pagina **************/


#muziekpagina ul{
  background: dodgerBlue;
  padding: 4px 8px;
  width: 500px;
  border:  3px double #da1;
  cursor: pointer;
  list-style-type: none;
  border-radius: 7px;
}

#programmaLijst{
 /* display: none;*/
}

.muziekstuk:hover{
  background: #0375b4;
}

#muziekpagina .aanhef{
   background: #0375b4;
   font-size: 100%;
}

.aanhef, .muziekstuk{

  padding: 5px;
}

audio{
  border: 1px solid #da1;
  border-radius: 10px;
  margin: 0 15px;
  background: #eee;
}


#corbeaux_music h3{
    color: #da1;
    font-stretch: extra-expanded;
    text-align: center;
    width: 300px;
    font-family: kalam;
    font-size: 200%;
    border-top: 9px double #da1;
    border-bottom: 5px double #da1;
    border-left: 1px double #da1;
    border-right: 1px double #da1;
    padding: 10px 14px;
    margin: 0 0 0 90px;
    border-radius: 50%;

}

#kopi_partituur{
  display: none;
}


#corbeaux_music a{
   text-align: center;
  display: block;
  color: #fed;
  font-weight: bold;
  margin: 10px 0 -5px 0;
  text-decoration: none;
}

.effe{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 10px;
  right:10px;
  top: 100px;
  width: 97%; /* Full width */
  height: 400px; /* Full height */
  margin: auto;
  overflow: auto; /* Enable scroll if needed */
  background-color: #5a5; /* Fallback color */
  background-color: #5a5; /* Black w/ opacity */
}


.oefenmp3 audio{
  width: 470px;
  
}






/**********   Repetitie pagina   **********/




#repetitie{
  background-color: #085;
  padding: 5px;
  margin: 5px;
  border: 1px solid #da1;
  border-radius: 8px;
}

#repetitie td{
  min-width: 70px;
  padding: 5px;
}

.intermezzi{
  font-style: italic;
}

#repetitie .programmaTabel{
  background-color: dodgerblue;
  border: 3px double goldenrod;
  border-radius: 7px;
  width: 260px;
  text-align: center;
}



#repetitie .programmaTabel td{
  margin: 0;
  padding: 0px 10px;
  background-color: ;
}

/**************  studeren pagina ********************/

#studeren table{
  background: dodgerblue;
  padding: 4px;
  margin: auto;
  border: ridge 7px #07d;
  box-shadow: 5px 5px 20px #ccc;
  border-radius: 12px;
}

#studeren td{
  border-left: 1px solid #07d;
  border-bottom: 1px solid #07d;
  padding: 2px 5px;
  min-width: 150px;
}

#studeren p, #studeren h4{
margin:  7px;
padding: 5px;
border: solid 1px #0aa;
border-radius: 6px;

}

#studeren h4{
text-align: center;

}

/******** tips pagina ************/

 .tips_kop{
    margin:  10px auto;
 }

#tips h4{
   text-align: center;
}


.tips{
  background-color: #085;
  padding: 8px;
  border: 1px solid #da1;
  border-radius: 8px;
  max-width: 600px;
  margin: auto;
}

/**********   info pagina ****************/

.adres a{
  display: block;
  text-decoration: none;
  margin: 5px 0 0 0;
  padding: 4px 1px;
}

/*************************  mixer   *******************/

#mixer ul{
  background: #a4a;
  width: 500px;
  margin: auto;
  background-image: linear-gradient(to bottom right, #c6c, #848);
  border-radius: 10px;
}


#mixer input[type="range"]{
  appearance: slider-vertical;
/*  background-image: url('corbeaux_images/knoppen/BlauweSliderKnop4.jpg');*/
}

#mixer input{

}

.channelstrip{
  display: inline-block;
  border: 1px solid #000;
  border-radius: 8px;
  margin: 6px 1px;

}

li:first-child{
   border-radius: 8px 8px 0px 0px;
}

li:last-child{
   border-radius: 0px 0px 8px 8px;
}


#mixer ul{
  list-style-type: none;
}

#mixer li{
  text-align: center;
  background-color: #bcc;
  border: #789 solid 1px;
  box-shadow: 3px 3px 5px #666;
}

/*#mixer .volumeFader{
  width: 50px;
  height: 200px;
  background-image: url('corbeaux_images/knoppen/BlauweSliderKnop4.jpg');
  cursor: pointer;
}*/

#mixer .volumeFader{
   -webkit-appearance: none;
  width: 50px;
  height: 300px;
}

.volumeFader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 20px;
  border: 0;
  background-image: url('corbeaux_images/knoppen/BlauweSliderKnop4.jpg');
}

/*
.volumeFader {
  -webkit-appearance: none;
 margin: 30px 10px ;
  width: 100%;
  height: 6px;
  border: 2px solid #999;
  background: #000;
  outline: none;
  opacity: 0.9;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.volumeFader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 20px;
  border: 0;
  background: url('corbeaux_images/knoppen/BlauweSliderKnop4.jpg');
  cursor: pointer;
}

.volumeFader::-moz-range-thumb {
  width: 50px;
  height: 50px;
  border: 0;
  background: url('images/BlauweSliderKnop2.jpg');
  cursor: pointer;
}*/











/***********   slideshow foto's *****************/

 #fotoos{
  box-sizing: border-box
 }

 #fotoos{
  font-family: Verdana, sans-serif; margin:0
 }

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/*************   film  ****************/

#film video{
  width: 100%;
  height: auto;
}

/*********** footer ************/

footer{
  position: fixed;
  bottom: 0;
}