body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background-color: #1b72ea;
  /*background-image: url(clouds.JPG);
  background-size: cover;
  background-position: bottom;*/
}

#postduif:before {
            content: "\0056\006c\0069\0065\0067\0043\006c\0075\0062\0048\0065\0069\006c\006f\006f\0040\0047\006d\0061\0069\006c\002e\0063\006f\006d";
}

/* NAV bar */

#navbardesktop{
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  opacity: 0.9;
  position: fixed;
  top: 0;
  padding: 1em;
}

li {
  margin-left: 1em;
  float: left;
  text-align: center;
  font-size: 1em;
  background-color: #fff;
  border-radius: 1em;
  box-shadow: 0 1em 1em 0 rgba(0,0,0,0.55);
}

li a{
  text-decoration: none;
  display: block;
  text-align: center;
  color: black;
  font-weight: bold;
  padding: 1em 1em 1em 1em;
}

li a:hover {
  border-radius: 1em;
  background-color: #333;
  color: white;
}

/* dropdown menu*/
/* Style The Dropdown Button */
#dropbtn {
/*    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;*/
    display: none;
    margin: 2em;
    position: fixed;
    top: 0;
    text-align: center;
    font-size: 1em;
    background-color: #fff;
    border-radius: 1em;
    box-shadow: 0 1em 1em 0 rgba(0,0,0,0.55);
    cursor: pointer;
    opacity: 0.9
    padding: 1em;
}

/* The container <div> - needed to position the dropdown content */
#dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
#dropdown-content {
    display: none;
    position: fixed;
    top: 3em;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
#dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: bold;
    display: block;
}

/* Change color of dropdown links on hover */
#dropdown-content a:hover {
  background-color: #000
  color: #fff;
}

/* Show the dropdown menu on hover */
#dropdown:hover #dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
#dropdown:hover #dropbtn {
    background-color: #000;
    color: #fff;
}
/* DESKTOP */

#breedbeeld1 {
  height: 33vh;
  background-image: url(page1.JPG);
  background-size: cover;
  background-position: center;
  padding: 2vh;
}

#header {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

#header-left{
  margin: 0;
  width: 300px;
  float: left;
  background-image: url("RVCH-logo-small-4.png");
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
}

#header-right{
  padding-left: 1vw;
  margin: 1em 0 1em 0;
  float: left;
}

#header-right h1{
  padding: 0;
  margin: 0;
  font-size: 2em;
  letter-spacing: 1em;
  color: white;
  text-shadow: 3px 3px #333;
  text-align: left;
}

#header-right h2{
  padding: 0;
  margin: 0;
  font-size: 2em;
  letter-spacing: 0.25em;
  color: white;
  text-shadow: 3px 3px #333;
  text-align: left;
}

#breedbeeld2 {
  height: 50vh;
  background-image: url(page2.JPG);
  background-size: cover;
  background-position: bottom;
}

#breedbeeld3 {
  height: 50vh;
  background-image: url(page3.JPG);
  background-size: cover;
  background-position: center;
}
#breedbeeld4 {
  height: 50vh;
  background-image: url(page4.JPG);
  background-size: cover;
  background-position: center;
}

#breedbeeld5 {
  height: 50vh;
  background-image: url(page5.JPG);
  background-size: cover;
  background-position: center;
}

.pagina{
  clear: both;
  background-color: #eee;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5vh;
  margin-top: 5vh;
  border-radius: 1em;
  box-shadow: 0 1em 1em 0 rgba(0,0,0,0.55);
  padding: 1em;
}

.pagina h1{
  font-size: 1.5em;
}

.pagina p{
  font-size: 1em;
}

.pagina img{
  width: 750px;
  height: 750px;
  display:block;
  border: 5px solid white;
  box-shadow: 0 1em 1em 0 rgba(0,0,0,0.55);
  margin-left: auto;
  margin-right: auto;
}

#GoogleMaps {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid white;
  box-shadow: 0 1em 1em 0 rgba(0,0,0,0.55);
  width: 750px;
  height: 750px;
}

#albumcontainer {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid white;
  box-shadow: 0 1em 1em 0 rgba(0,0,0,0.55);
  width:750px;
  height:750px;
}

#klein1, #klein2, #klein3, #klein4, #klein5, #klein6, #klein7, #klein8, #klein9 {
  float: left;
  width: 250px;
  height: 250px;
  display:block;
  margin-left: auto;
  margin-right: auto;
  background-position: center;
  background-size: cover;
}

#klein1{
  background-image: url("kistje1.JPG");
}
#klein2{
  background-image: url("kistje2.JPG");
}
#klein3{
  background-image: url("kistje3.JPG");
}
#klein4{
  background-image: url("kistje4.JPG");
}
#klein5{
  background-image: url("kistje5.JPG");
}
#klein6{
  background-image: url("kistje6.JPG");
}
#klein7{
  background-image: url("kistje7.JPG");
}
#klein8{
  background-image: url("kistje8.JPG");
}
#klein9{
  background-image: url("kistje9.JPG");
}




.footer{
  background-color: #023b0d;
  padding: 1em;
  border-top: 1px solid #888;
}
.footer h1{
  font-size: 2em;
  letter-spacing: 1em;
  color: #eee;
  margin:0;
}

.footer h2{
  margin: 0;
  font-size: 1.5em;
  letter-spacing: 0.25em;
  color: #eee;
}

.footer h3{
  margin: 0;
  font-size: 1.0em;
  color: #eee;
}

/* TABLETS */
@media screen and (max-width:1023px){
  #breedbeeld1{
    height: 30vh;
  }

  .pagina{
    background-color: #eee;
    width: inherit;
    margin-left: 2%;
    margin-right: 2%;
  }
  .pagina img, #GoogleMaps{
    width: 80vw;
    height: 80vw;
  }

  #albumcontainer {
    width:63vw;
    height:63vw;
  }
  #klein1, #klein2, #klein3, #klein4, #klein5, #klein6, #klein7, #klein8, #klein9 {
    width: 21vw;
    height: 21vw;
  }

  #header {
    width: inherit;
    margin-left: 2%;
    margin-right: 2%;
  }

  #header-right h1{
    font-size: 2em;
    letter-spacing: 1em;
  }

  #header-right h2{
    font-size: 1.5em;
    letter-spacing: normal;
  }

  #navbardesktop li{
    margin-left: 1em;
  }
  .footer{
  }
}

@media screen and (max-width:750px){
  #navbardesktop ul{
    display: none;
  }
  #dropbtn {
    /*display: block;*/
  }
}

/* PHONES */

@media screen and (max-width:640px){
  #header-right h2{
    font-size: 1.2em;
    letter-spacing: normal;
  }
  .footer h1{
    font-size: 1.5em;
    letter-spacing: normal;
  }
  .footer h2{
    font-size: 1em;
  }
  .footer h3{
    font-size: 0.9em;
  }

}

/* NOG KLEINER DAN 320? PECH GEHAD */
@media screen and (max-width:320px){

}