@media screen {

  .qrcode-link {
    font-family: "Lato", sans-serif;
    font-size: 20px;
  }

 .jar {
	  margin: 0 auto;
	  width: 100%;
	  text-align: center;
  }

  .jar-image-div {
	  position: absolute;
	  border: 0px solid black;
	  margin: 5px;
	  top: 10vh;
	  width: 100%;
	  height: 100%;
	  z-index: 1;
  }

  #jarimage {
	  height: 100%;
  }

  .jar-contents {
	  position: absolute;
	  top: 10vh;
	  width: 100%;
	  height: 100vh;
	  z-index: 50;
	  overflow-y:scroll;
  }

  .jar-opacity {
	opacity: [[[__JAR_OPACITY__]]];
  }

  .marble {
    display: inline-block;
  }

  .app-icon-size {
    max-width: 150px;
    width: 15vh;
  }
  .app-icon-style {
    display: inline-block;
    padding: 3vh;
    border-radius: 50%;
  }
  .app-icon-text {
    font-family: "Lato", sans-serif;
    font-size: 3vh;
  }

  .marble-text {
    font-family: "Lato", sans-serif;
    font-size: 3vh;
  } 

  .jar-title {
    font-family: "Lato", sans-serif;
    font-size: 3vh;
    font-weight: bold;
  } 

  .jar-text {
    font-family: "Lato", sans-serif;
    font-size: 4vh;
    padding-top: 15px;
  } 

  .policy-title {
    font-family: "Lato", sans-serif;
    font-size: 4vh;
  } 

  .policy-text {
    font-family: "Lato", sans-serif;
    font-size: 2vh;
  } 

  .about-text {
    font-family: "Lato", sans-serif;
    font-size: 2vh;
  } 

  .nav-icon a {
	  font-size: 60px;
  }
}

@media screen and (orientation: landscape) {

  .jar-contents {
	  position: absolute;
	  top: 10vh;
	  width: 100%;
	  height: 100vh;
	  z-index: 50;
	  overflow-y:scroll;
  }

  .marble {
  }

  .app-icon-size {
    width: 15vh;
  }

  .app-icon-style {
    display: inline-block;
    padding: 3vh;
    border-radius: 50%;
  }

  .app-icon-text {
    font-family: "Lato", sans-serif;
    font-size: 3vh;
  }

  .marble-text {
    font-family: "Lato", sans-serif;
    font-size: 4vh;
  }

  .jar-title {
    font-family: "Lato", sans-serif;
    font-size: 4vh;
    font-weight: bold;
  }

  .jar-text {
    font-family: "Lato", sans-serif;
    font-size: 5vh;
    padding-top: 15px;
  }

  .policy-text {
    font-family: "Lato", sans-serif;
    font-size: 2vh;
  } 

  .about-text {
    font-family: "Lato", sans-serif;
    font-size: 2vh;
  } 

  .policy-title {
    font-family: "Lato", sans-serif;
    font-size: 3vh;
  } 

  .about-title {
    font-family: "Lato", sans-serif;
    font-size: 3vh;
  } 
}