body {
    background-image: url("");
     background-size: 100vmax;
         background-repeat: none;
    background-color: darkgrey;
  font-weight: normal;
}



a {
  color: inherit;
  text-decoration: inherit;
}
a:hover {
  text-decoration: inherit;
}


/*   - 0 -   */

#wrapper {
  position: absolute;
  overflow-y: scroll;
  left: 0px;
  top: 0;
  width: 100%;
  height: auto;
}


#topspace {
  height: 0vh;

}


[data-toggle="collapse"] {
  cursor: pointer;
  width: 100%;
  display: block;
  text-align: center;
  font-family: serif;
  font-size: 30px;
  padding: 15px;
  background-color: white;
  border: 0px solid grey;
  margin-bottom: -1px;
  outline: none;
  transition: all .5s ease-in-out;
}

[data-toggle="collapse"][aria-expanded="true"] {

}
[data-toggle="collapse"][aria-expanded="true"]:after {
  content: "–";
  font-weight: bold;
  margin-right: 2px;
  float: right;
}
[data-toggle="collapse"][aria-expanded="false"]:after {
  content: "+";
  float: right;
}

.box p {
  padding: 5px 20px;

}

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}




/*   - 1 -  (bobbie visser) */

.button1 {
    background-image: url("");
    background-size: 100%;
    background-repeat: none;
    background-position: 0px 0px; 
    background-color: white;
    font-style: italic;



    box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.2);;
-webkit-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.2);;
-moz-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.2);;
-o-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.2);;
}

.button1:hover {
  text-decoration: underline;
}

.box1 {
  background-color: green;
  border: 0px solid grey;
  display: none;
  margin-bottom: -1px;
        background-image: url("");
    background-size: 100%;
    background-repeat: none;
    background-position: 0px -65px; 
    background-color: white;
    height: auto;

  align-content: center;
  text-align: center;
  font-size: 20px;
  line-height: 25px;

}



/*   - 2 -  (recontour) */

.button2 {
    background-color: #e9ccc2;
        font-weight: lighter;

    box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.2);;
-webkit-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.2);;
-moz-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.2);;
-o-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.2);;


}

.button2:hover {
  text-decoration: underline;
}

.box2 {
  background-color: green;
  border: 0px solid grey;
  display: none;
  margin-bottom: -1px;
    background-color: #e9ccc2;
    height: auto;
    padding-left: 20vw;
    padding-right: 20vw;
    font-family: sans-serif;
    font-weight: lighter;
    font-size: 14px;
    line-height: 26px;


}




/*   - 3 -  (foto 1) */

.button3 {

    background-image: url("../images/foto3.jpg");
      image-rendering: crisp-edges;
    background-size: 100%;
    background-repeat: none;
    background-position: 0px 0px; 
    background-color: white;

    box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-webkit-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-moz-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-o-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
}

.button3:hover {
    color: white;
}

.box3 {
  background-color: green;
  border: 0px solid grey;
  display: none;
  margin-bottom: -1px;
      background-image: url("../images/foto3.jpg");
        image-rendering: crisp-edges;
    background-size: 100%;
    background-repeat: none;
    background-position: 0px -65px; 
    background-color: white;
    height: auto;
}

@media screen and (max-width: 1200px) {
.box3 {
    height: auto;
}}


#foto1_HQ {
    display: none;
}



/*   - 4 -  (foto 2) */

.button4 {

    background-image: url("../images/foto1.jpg");
      image-rendering: crisp-edges;
    background-size: 100%;
    background-repeat: none;
    background-position: 0px 0px; 
    background-color: white;


        box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-webkit-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-moz-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-o-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
}

.button4:hover {
    color: white;
}

.box4 {
  background-color: green;
  border: 0px solid grey;
  display: none;
  margin-bottom: -1px;
      background-image: url("../images/foto1.jpg");
        image-rendering: crisp-edges;
    background-size: 100%;
    background-repeat: none;
    background-position: 0px -65px; 
    background-color: white;
    height: 60vw;
}

@media screen and (max-width: 1000px) {
.box4 {
    height: 58vw;
}}

@media screen and (max-width: 750px) {
.box4 {
    height: 54vw;
}}

@media screen and (max-width: 550px) {
.box4 {
    height: auto;
}}


/*   - 5 -  (foto 3) */

.button5 {

    background-image: url("../images/foto2.jpg");
      image-rendering: crisp-edges;
    background-size: 100%;
    background-repeat: none;
    background-position: 0px 0px; 
    background-color: white;

        box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-webkit-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-moz-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
-o-box-shadow: inset -1px 14px 34px -13px rgba(0, 0, 0, 0.4);;
}

.button5:hover {
    color: white;
}

.box5 {
  background-color: green;
  border: 0px solid grey;
  display: none;
  margin-bottom: -1px;
      background-image: url("../images/foto2.jpg");
        image-rendering: crisp-edges;
    background-size: 100%;
    background-repeat: none;
    background-position: 0px -65px; 
    background-color: white;
    height: auto;
    image opacity: 
}