/* Desktop */
@media (min-width: 1024px) {

  body, navbar, bottombar, floating-div {
    width: 100%;
    margin: auto;
  }

  nopaper {
    width: 160px;
    height: 245px;
  }

  nopaper > p {
    font-size: 9pt;
    margin: 50px 10px 0px 10px;
  }

  section {
    flex-direction: column;
    align-items: center;
  }

	.logo {
		height: 91px;
	}

	.logo-navbar {
		height: 52px;
	}

	card {
		width: 100%;
	}

  #main-container {
    width: 100%;
  }

  header, footer {
    height: 65px;
  }

  select {
    width: 150px !important;
  }

}

/* Mobile/tablet (Landscape) */
@media (min-width: 700px) and (max-width: 1024px) {

  navbar, bottombar, floating-div {
    width: 100%;
    margin: auto;
  }

  nopaper > p {
    font-size: 10pt;
    margin: 50px 20px 0px 20px;
  }

  nopaper {
    width: 220px;
    height: 340px;
  }

  section {
    flex-direction: column;
    align-items: center;
  }

	.logo {
		height: 91px;
	}

	.logo-navbar {
		height: 52px;
	}

	card {
		width: 100%;
	}

  #main-container {
    width: 100%;
  }

  header, footer {
    height: 65px;
  }

  select {
    width: 150px !important;
  }

}

/* Mobile (Portrait) */
@media (max-width: 700px) {

  navbar, bottombar, floating-div {
    width: 100%;
    margin: auto;
  }

  h1 {
    font-size: 15pt;
  }

  h2 {
    font-size: 13pt;
  }

  h3 {
    font-size: 12pt;
  }

  h4 {
    font-size: 11pt;
  }

  p, .nopaper-editor {
    font-size: 10pt;
  }

  button {
    font-size: 7pt !important;
  }

  item {
    width: 100%;
  }

  nopaper > p {
    font-size: 12pt;
    margin: 50px 30px 0px 30px;
  }

  nopaper {
    width: 280px;
    height: 390px;
  }

  .nopaper-container {
    padding: 25px 25px;
    border-radius: 20px;
  }

  .nopaper-editor {
    height: calc(100vh - 40px);
    line-height: 1.5em;
  }

  section.popup {
    max-width: 320px;
    left: 20px;
    right: 20px;
  }

  section {
    flex-direction: column;
    align-items: center;
  }

	.logo {
		height: 91px;
	}

	.logo-navbar {
		height: 52px;
	}

	card {
		width: 100%;
	}

  #main-container {
    width: 100%;
  }

  header, footer {
    height: 65px;
  }

  select {
    width: 100px !important;
  }

}