@charset "UTF-8";

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 0;
  width: 100%;
  position: fixed;
  /* Stay in place */
  z-index: 99;
  /* Sit on top */
  left: 0;
  top: 0;
  /* background-color: rgb(0, 0, 0); */
  /* Black fallback color */
  /* background-color: var(--blue-clr); */
  /* Blue  */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


.overlay-content-mobile {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
  margin-top: 30px;
}

/* The navigation links inside the overlay */
.overlaytext {
  padding: 0.7em;
  text-decoration: none;
  font-size: 1.6rem;
  color: var(--white-clr);
  display: block;
  /* Display block instead of inline */
  transition: 250ms;
  /* Transition effects on hover (color) */
}


/* When you mouse over the navigation links, change their color */
.overlaytext a:hover,
.overlaytext a:focus {
  color: var(--white-clr);
}

/* Position the close button (top right corner) */
.overlay .closebtn-w,
.overlay .closebtn-b,
.overlay .closebtn-g {
  position: absolute;
  top: 48px;
  left: 45px;
  width: 26px;
  padding-top: 200px;
  z-index: 3;
}

.closebutton {
  display: block;
}

.hamburger {
  position: absolute;
  top: 48px;
  left: 40px;
  width: 35px;
  display: block;
}

.closebtn-w {
  background-image: url(../images/hamburger-close-white.svg);
  background-repeat: no-repeat;
}

.closebtn-b {
  background-image: url(../images/hamburger-close-blue.svg);
  background-repeat: no-repeat;
}

.closebtn-g {
  background-image: url(../images/hamburger-close-green.svg);
  background-repeat: no-repeat;
}

.overlay-content-mobile {
  display: block;
}

.overlay-content-mobile a:hover,
.overlay a:focus {
  color: var(--blue-clr);
  transition: 500ms;
}

.overlay-content-mobile.white a:hover,
.overlay a:focus {
  color: var(--green-clr);
  transition: 250ms;
}

.overlay-content-mobile.green a:hover,
.overlay a:focus {
  color: var(--green-clr);
  transition: 250ms;
}

/* #test {
  opacity: 0;
  transition: 1s;
} */