.mobile-nav {
  display: none;
}

#expand-mobile {
  display: none;
}

@media only screen and (max-width: 600px) {
  :root {
    --main-diff: 2em;
  }

  .hide-mobile {
    display: none;
    visibility: hidden;
  }

  .hide-desktop {
    display: block;
  }

  /* BUTTON */
  /* next button */
  #intro #nextButton,
  #modal-date-btn {
    padding: 20px 40px;
    margin-bottom: 50px;
  }

  /* INTRO */
  #intro #startText {
    width: 95%;
  }

  #intro #explainText {
    width: 95%;
  }

  /* HAMBURGER */

  /* MODAL */

  /* ABOUT */
  .modal-about-grfc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 4em;
    grid-column-gap: 2em;
    width: 80%;
    margin-right: 0;
    padding: 90px;
  }

  .modal-about-data-info {
    width: 80%;
  }

  .modal-content-about {
    height: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 8em 0;
  }

  .modal-close {
    position: fixed;
    top: var(--main-diff);
    right: var(--main-diff);
  }

  .modal-about-grfc img {
    width: 100%;
  }

  /* DATA BOT */
  .menu-outer-bot {
    height: calc(var(--menu-bot-mobile) * 1.1);
    left: 0em;
    width: 100%;
    transition: all 300ms;
  }

  .menu-outer-bot .container {
    height: calc(var(--menu-bot-mobile));
  }

  /* expand */
  #expand-mobile {
    display: block;
    position: absolute;
    right: var(--main-diff);
    bottom: calc(var(--menu-bot-mobile) + var(--main-diff));
    transition: all 250ms;
  }

  /* MENU SHOW OTHER ELEMENTS */
  .mobile-menu-show {
    opacity: 1;
    display: block;
  }

  .mobile-menu-hidden {
    opacity: 0;
    display: none;
  }

  .mobile-menu {
    position: fixed;
    z-index: 10;
    bottom: var(--main-diff);
    text-align: left;
    margin-bottom: 2em;
  }

  /* language and about MENU */
  .mobile-menu.about {
    left: 3.5em;
    color: var(--black-color);
    padding-bottom: 20px;
  }

  .mobile-menu.about {

    text-align: right;
  }

  .about span {
    color: var(--black-color);
  }

  .language {
    right: 3.5em;
    padding-bottom: 20px;
  }

  .language * {
    color: var(--black-color);
    padding-left: 0.5em;
  }


  /* MENU TOP SHOW */
  .menu-outer-top {
    top: -100vh;
    left: 0em;
    height: 100%;
    width: 100%;
    z-index: 3;
  }

  .menu-top {
    margin-top: 6em;
    justify-content: flex-start;
  }

  .menu-top-control {
    margin: 0em 2em;
  }

  .menu-top-control>div {
    margin: -0.5em 0;
  }

  .pushRight {
    margin-left: 2rem;
  }

  .menu-top-control ul li:not(:first-child) {
    margin: 18px 0;
  }

  .colorSwitch,
  .saveSwitch {
    padding-top: 1em;
  }


  /* TOOLTIP */

  .tooltip {
    position: fixed;
    left: 50%;
    top: 50%;
    width: calc(100% - var(--main-diff) * 2);
    transform: translate(-50%, -50%);
  }

  .t-swell span {
    bottom: auto;
  }


  /* NEW MENU TOP */
  .mobile-nav {
    display: block;
    position: fixed;
    z-index: 10;
    width: 100%;
    height: var(--menu-nav-mobile);
    background: var(--white-color);
  }

  .mobile-nav .container {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - var(--main-diff) * 2);
  }

  /* MODAL */
  .modal {
    animation: modalShow 200ms ease-in-out;
    animation-fill-mode: forwards;
  }

  @keyframes modalShow {
    from {
      opacity: 0
    }

    to {
      opacity: 1;
    }
  }

  .modal-close span {
    color: var(--black-color);
    opacity: 1;
  }

  .modal-close {
    color: var(--black-color);
    opacity: 1;
  }

  #modal-date .modal-close span {
    color: var(--white-color)
  }

  .modal-about-title {
    padding: 70px 0 0px 0;
  }

  /* LOGO */
  .logo {
    display: flex;
    width: 130px;
  }

  /* INTRO */
  #intro #page-index {
    top: calc(var(--menu-nav-mobile) + 1em);
    left: 50%;
    transform: translate(-50%, 0);
  }
}