/* MENU */

  @font-face {
    font-family: 'Adam';
    src: url(/font/Adam-Bold.ttf);
  }

 .menu-wrap{
   position:fixed;
   top:0;
   right:0;
   z-index: 100;
 }

 .menu-wrap .toggler{
   position:absolute;
   top:0;
   right:10px;
   z-index: 200;
   cursor: pointer;
   width:86px;
   height:86px;
   opacity:0;
 }

.menu-wrap .hamburger{
  position:absolute;
  top:0;
  right:10px;
  z-index: 100;
  width: 86px;
  height: 86px;
  padding: 1rem;
  background: white;
  display:flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border-color: black;
  border-style:solid;
  border-width: 3px;
}

/*HAMBURGER LINE*/
.menu-wrap .hamburger > div{
  position: relative;
  width:100%;
  height: 2px;
  background-color: #FF6700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/*TOP AND BOTTOM LINES */
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
  content:"";
  position:absolute;
  z-index: 100;
  top: -10px;
  width: 100%;
  height: 2px;
  background:inherit;
}

/* MOVE LINE DOWN */
.menu-wrap .hamburger > div:after{
  top:10px;
}

/* TOGGLER ANIMATE */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* TURN LINES INTO X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after{
  top:0;
  transform: rotate(90deg);
}

/*Rotate on hover when checked */
.menu-wrap .toggler:checked:hover + .hamburger > div{
transform: rotate(225deg);
}

/*Show Menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div{
opacity:1;
transition: opacity 0.4s ease;
}


.menu-wrap .menu{
  position:fixed;
  top:0;
  right:0;
  width:100%;
  height:100vh;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Adam';
  src: url(/font/Adam-Bold.ttf);
}

.menu-wrap .menu > div {
  background: #262626;
  width: 100vw;
  height:100vh;
  display:flex;
  flex:none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.menu-wrap .menu > div > div > ul > li {
  /*list-style: none;*/
  list-style: disc;
  color: #A5C9EB;
  /*font-size: 2rem; */
  font-size: calc(1rem + 2vw);
  padding: 1rem;
}

.menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}

  /* Responsive layout - when the screen is less than 700px wide, make the navigation links stack on top of each other instead of next to each other */
  /***************************************************************************************************************************************************/

  @media (max-width: 700px) {

     .menu-wrap .toggler{
      width: 60px;
      height: 60px;
    }

    .menu-wrap .hamburger{
      width: 60px;
      height: 60px;
    }

  }