/* NAV */
/* nav */

    .page-nav .nav-tog {
      position: fixed;
      margin: 0;
      width: 10vw;
      height: 5vh;
      bottom: 10vw;
      right: 9vw;
      opacity: 0;
      z-index: 2;
    }

/*icon*/
    .page-nav > .material-icons {
      font-size: 12.5vw;
      position: fixed;
      bottom: 3vh;
      right: 5vw;
      color: #004d99;
      background-color: rgba(247,247,247,0.8);
      box-shadow: 0px 0vh 1.5vh rgba(0,77,153,0.5);
      padding: 3vw;
      border-radius: 50%;
      border: none;
      z-index: 1;
      transition-duration: 0.5s;
    }

    .page-nav .nav-tog:checked ~ .material-icons {
      background-color: #004d99;
      color: #f7f7f7;
      box-shadow: 0px 0vh 0vh #c8c8c8;
      transition-duration: 0.5s;
    }

/* nav togle */

    .page-nav .nav-tog:checked ~ .nav-popup {
      visibility: visible;
    }

    .page-nav .nav-tog:checked ~ .nav-popup > div {
      transform: scale(1);
      transition-duration: 0.5s;
      transform-origin: bottom right;
    }

    .page-nav .nav-tog:checked ~ .nav-popup > div > div {
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .page-nav .nav-popup{
      position: fixed;
      bottom: 8vw;
      right: 8vw;
      width: 100vw;
      min-height: 80vh;
      visibility: hidden;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .page-nav .nav-popup > div {
      background: #004d99;
      border-radius: 20%;
      min-width: 70vw;
      min-height: 10vh;
      justify-content: center;
      transform: scale(0);
      transform-origin: bottom right;
      transition: all 0.5s ease;
      position: fixed;
      bottom: 9vw;
      right: 9vw;
    }

    .page-nav .nav-popup > div > div {
      text-align: center;
      margin: 0;
      min-width: 70vw;
      min-height: 10vh;
      opacity: 0;
      transition: opacity 0.5s ease;
      position: relative;
      z-index: 1;
    }

    .title-p > button {
      border: none;
      background-color: #004d99;
      font-family: Muli;
      padding-bottom: 2vh;
    }

    .forms-p > button {
      border: none;
      background-color: #004d99;
      font-family: Muli;
      padding-top: 2vh;
      padding-bottom: 2vh;
    }

    .app-p > button {
      border: none;
      background-color: #004d99;
      font-family: Muli;
      padding-top: 2vh;
      padding-bottom: 2vh;
    }

    .post-app-p > button {
      border: none;
      background-color: #004d99;
      font-family: Muli;
      padding-top: 2vh;
      padding-bottom: 2vh;
    }

    .res-p > button {
      border: none;
      background-color: #004d99;
      font-family: Muli;
      padding-top: 2vh;
      padding-bottom: 2vh;
    }

  .button0 {
    color: rgb(247,247,247,0.5);
    font-size: 4vw;
    font-weight: 600;
    margin-top: 5vh;
    transition: 0.25s ease;
    outline: none;
  }

  .button0:hover {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button0:active {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button1 {
    color: rgb(247,247,247,0.5);
    font-size: 4vw;
    font-weight: 600;
    transition: 0.25s ease;
    outline: none;
  }

  .button1:hover {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button1:active {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button2 {
    color: rgb(247,247,247,0.5);
    font-size: 4vw;
    font-weight: 600;
    transition: 0.25s ease;
    outline: none;
  }

  .button2:hover {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button2:active {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button3 {
    color: rgb(247,247,247,0.5);
    font-size: 4vw;
    font-weight: 600;
    transition: 0.25s ease;
    outline: none;
    margin-bottom: 5vh;
  }

  .button3:hover {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button3:active {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button4 {
    color: rgb(247,247,247,0.5);
    font-size: 4vw;
    font-weight: 600;
    transition: 0.25s ease;
    outline: none;
    margin-bottom: 5vh;
  }

  .button4:hover {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button4:active {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button5 {
    color: rgb(247,247,247,0.5);
    font-size: 4vw;
    font-weight: 600;
    transition: 0.25s ease;
    outline: none;
    margin-bottom: 5vh;
  }

  .button5:hover {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }

  .button5:active {
    color: #f7f7f7;
    font-size: 4.5vw;
    font-weight: 600;
    outline: none;
    transition: 0.25s ease;
  }