/* Laptop/Tablet (1024px) LIGGANDE IPHONE */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
}

/* Tablet Portrait (768px) STÅENDE IPHONE */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
}

/* Phone Landscape (480px) INGET */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
}

/* Phone Portrait (320px) INGET */
@media only screen and (max-width: 320px) {
}

@media only screen and (orientation: portrait) {
  body {
    font-size: 1.75em;
  }
  section {
    flex-direction: column;
  }

  h1 {
    font-size: 1.5em;
  }
  .left-column {
    width: 100%;
    border: none;
    padding: 0;
    display: flex;
    margin: 0 0 2em 0;
  }
  .left-column .box {
    flex: 1;
    margin: 0 1em 0 0;
    padding: 1em;
  }
  .left-column .box:last-child {
    margin: 0;
  }


  .previous.left-column, .start.left-column {
    display: block;
    flex: none;
  }
  .previous.left-column .box {
    margin: 0 0 1em;
  }


  .main-column {
    width: 100%;
    border: none;
    padding: 0;
    flex: none;
    margin: 0 0 2em 0;
  }
  .main-column .box {
    margin: 0 0 1em 0;
  }
  .main-column .box:last-child {
    margin: 0;
  }
  .right-column {
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
  }

  /* h2 {
    text-align: center;
    font-size: 1.5em;
    margin: 0 0 0.5em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5em 1em;
  } */

  .button {
    /* font-size: 1em; */
    /* width: 100%; */

    padding: 0.25em 0.5em;
  }
  .button img {
    /* display: none; */
    max-height: 1em;
  }

  header {
    flex-direction: column;
  }

  .nameContainer {
    margin-top: 1em;
  }
  .totalContainer {
    margin-top: 1em;
    text-align: right;
  }
  .previousContainer {
    text-align: right;
    flex: 1;
    width: auto;
  }

  .start input {
    font-size: 2em;
    padding: 0.5em;
  }

  .modalBg {
    align-items: baseline;
  }

  .modalWrapper {
    padding: 5em 0 0 0;
    max-width: 100%;
  }

  .modalContent {
    width: 100vw;
    min-height: 50vh;
  }

  /* .subNav li {
    padding: 0.75em 1.5em;
    font-size: 1.25em;
    flex: 1;
  }

  .subNav li:first-child {
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    margin: 0;
  }

  .subNav li:last-child {
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
  } */

  .menu_mobile {
    display: block;
  }

  .menu_desktop {
    display: none;
  }

  nav {
    /* width: calc(100% - 6em); */
  }

  nav .close {
    top: 1em;
    right: 1em;
  }















}