/*-------stylize navigation for desired effect---------*/
.navigation {
  font-family: dejavu sans;
  list-style: none;
  background: rgb(89,39,32);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*hides nav behind content */
  z-index: 0;
  /*get rid of color gap on top of menu*/
  margin-top: 0;
  padding: 0;
  padding-top: 5vw;
  box-shadow: inset 0px 10px 14px rgba(0,0,0,0.75); 
}

li.nav-item {
  padding: 1vw;
  margin: 1vw;
  font-size: 2vw;
  position: top 10vw;
}
       /*--------end of navigation styling--------*/

.site-wrap {
  background-color: lightgrey;
  background-image: url("img/kleurwind-klein-blur-rose.JPG");
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center;
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  padding: 0.006vw; /*spaces out content from hamburger*/
  box-shadow: -15px 0px 17px rgba(0,0,0,0.75);
}

    /*----stylize nav-trigger actions and looks-----*/
/*hide the checkbox*/
.nav-trigger {
  position: fixed;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /*nav stays in the same spot as user scrolls*/
  position: fixed; 
  /*position hamburger menu*/
  top: 0vw;
  left: 0vw;
  /*z-index needs to be 1 higher than site-wrap*/
  z-index: 2;
  width: 4.5vw;
  height: 5vw;
  /*changing to pointer indicates interactivity*/
  cursor: pointer;
  color: white;
}

label:hover {
  color: coral;
 &:hover .witte-hamburger {
        	color: coral;
   }
}

/*styling to create "hamburger" icon (refer to notes)*/
.hidden_nav:before {
	content: " ";
	position: absolute;
	top: 2.2vw;
    left: 0.8vw;
	width: 2.8vw;
	height: 0.4vw;
	z-index: 3;
}

.witte-hamburger {
	content: " ";
	position: absolute;
	top: 1.4vw;
    left: 0.9vw;
	z-index: 3;
    transition: all 0.2s ease-in-out;
    padding: 0.1vw;
    font-weight: bold;
    font-size: 2.5vw;
    text-shadow: 0.1vw 0.1vw 0 #000000;
    font-family: dejavu sans;
    transform: scale(1.5, 1); /* Increases width (wider) */
}


/*the following lines make the effect work*/

/*below styling controls label position when menu opens- add 15px, because we did left:15px in label[for="nav-trigger"]*/

/*uses adjacent sibling selector (+)--> nav-trigger:checked must come first so label moves after checkbox is activated - verwijder onderstaande code om knop op dezelfde plek te houden tijdens het uitschuiven*/

.nav-trigger:checked {
  left: 25vw;
}

/*ensures that the site-wrap is pushed to the right*/
/*uses general sibling selector (~) to target site wrap after nav-trigger gets activated*/
.nav-trigger:checked ~ .site-wrap {
  transform: translateX(25vw); /* Moves 25 % to the left */
}

/*add slight transition to effect*/

.nav-trigger + label, .site-wrap {
  transition: transform 0.3s ease;
}

/*keep site-wrap from scrolling across window from left to right when menu is opened*/
body {
  overflow-x: hidden;
}
    /*----end of styling navigation actions and looks----*/

/*---end of what is required for sliding hamburger drawer effect--*/


.button-text {
  position: absolute;
  left: 0.7vw;
  top: -0.2vw;
  font-size: 0.9vw;
  font-weight: bold;
  text-shadow: 0.08vw 0.08vw #000000;
  transition: all 0.2s ease-in-out;
  font-family: dejavu sans;
}

.menu-link {
  text-decoration: none;
  color: white;
  font-weight: bold;
  text-shadow: 1.5px 1.5px 2.5px black;
  transition: all 0.25s ease-in-out;
}

.menu-link:hover {
  text-decoration: none;
  color: coral;
}