/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

#index-burger {
  display: block;
  float: right;
  position: absolute;
  right: 2vw;
  top: 3vh;
  margin-right: 2vw;
  z-index: 10;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* same breakpoint as header h1 h2 moving to two lines */
@media (max-width: 600px) {
  #index-burger {
    top: 3vh;
  }
}

@media (max-width: 1024px) {
  .off-on-xs {
    display: none;
  }
}

#index-burger a {
  text-decoration: none;
  color: var(--font-bg-dark);
  -webkit-transition: color 0.9s ease;
  -o-transition: color 0.9s ease;
  transition: color 0.9s ease;
}

#index-burger a:hover {
  color: var(--font-color-links-sgl-img);
}

/* the hidden checkbox */
#index-burger input {
  display: block;
  width: 60px;
  height: 70px;
  position: absolute;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 100; /* and place it over the hamburger */
  -webkit-touch-callout: none;

  /* Aligns the hidden checkbox with the burger spans */
  top: -2vh;
  right: -1vw;
}

/* the  burger */
#index-burger span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  /* the color of the burger: */
  background: var(--font-bg-dark);
  border-radius: 3px;
  z-index: 3;
  -webkit-transform-origin: 4px 0px;
  -ms-transform-origin: 4px 0px;
  transform-origin: 4px 0px;

  -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);

  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);

  -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease,
    -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

#index-burger span.font-bg-light {
  background: var(--bg-light-font);
  opacity: 1;
}

#index-burger span.font-bg-dark {
  background: var(--font-color-links-sgl-img);
}

#index-burger span.font-bg-black {
  background: var(--font-color-bg-black);
}

#index-burger span:first-child {
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

#index-burger span:nth-last-child(2) {
  -webkit-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}

/*  transform burger into a cross */
#index-burger input:checked ~ span {
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
  -ms-transform: rotate(45deg) translate(-2px, -1px);
  transform: rotate(45deg) translate(-2px, -1px);
  background: var(--font-color-links-sgl-img);
}

/* hide the middle line  */
#index-burger input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
  -ms-transform: rotate(0deg) scale(0.2, 0.2);
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*  last one to go the other direction  */
#index-burger input:checked ~ span:nth-last-child(2) {
  -webkit-transform: rotate(-45deg) translate(0, -1px);
  -ms-transform: rotate(-45deg) translate(0, -1px);
  transform: rotate(-45deg) translate(0, -1px);
}

/*the links-field with background */
#menu {
  position: absolute;
  /* flex inherited from global ul: */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  line-height: 1.2;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  width: 350px;
  padding: 10vh 10px 10px 10px;
  border-radius: 15px;
  /* background including opacity: */
  background: rgba(33, 33, 33, 0.9);
  color: var(--font-bg-dark);
  list-style-type: none;
  text-align: center;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  -webkit-transform: translate(-320px, -65px);

  -ms-transform: translate(-320px, -65px);

  transform: translate(-320px, -65px);

  /* transition: transform 1s;   */
  -webkit-transition: opacity 0.7s ease-out;
  -o-transition: opacity 0.7s ease-out;
  transition: opacity 0.7s ease-out;
}

#menu li {
  padding: 20px;
  font-size: calc(1.1rem + 0.1vw);
  border-bottom: 2px solid var(--font-bg-dark);
  text-align: center;
}

#menu li.burger-bottom-link {
  border-bottom: none;
}

#menu li.burger-top-link {
  line-height: 3;
}

/* transforming the links-field/background when clicked */
#index-burger input:checked ~ ul {
  /* transform: translate(-320px, -40px); */
  pointer-events: all;
  opacity: 1;
  /* transition: transform 1s; */
  -webkit-transition: opacity 0.7s ease-in;
  -o-transition: opacity 0.7s ease-in;
  transition: opacity 0.7s ease-in;
}

/* make burger a shade darker:   */
#index-burger span {
  opacity: 0.8;
}

/*the burger nenu of texte-index.html as it's the bg-light scheme*/
#bg-light ul > li.menu_li > a {
  color: var(--font-bg-dark);
}

#bg-light ul > li.menu_li > a:hover {
  color: var(--font-color-links-sgl-img);
}