@media only screen and (max-width: 770px) and (orientation: portrait) {

.logo {
  height: 7rem; 
  z-index: 100;
}

#landing-bg {
  width: 85%;
  margin: 0 auto;
  padding-top: 35%;
}

.frame { margin: 80px 10px; }

#welcome { top: 60%; }

nav { padding: 0 0 7pt 10pt; }

nav li {
  font-size: 30pt;
  padding: 5pt;
}

.haha-about,
.event-about,
.keywords-about { max-width: 90%; }

.event-about-grid {
  width: 85%;
  padding: 0 0 25% 0;
  margin: 0 auto;
}

p:not(.footer p) { font-size: 1.2rem !important; }

.item-page,
.event-page { flex-direction: column; }

#item-info ul { font-size: 1.2rem; }

#item-description,
#item-description p,
#item-description img,
.TextformatterVideoEmbed,
.TextformatterIframeEmbed,
.item-image,
.event-image,
#event-info,
#event-description img,
#event-description p { width: 90%; }

#item-description,
#event-description { margin: 5% 0 30% 0; }

.haha-grid { justify-content: center; }

.haha-item { width: 45%; }

.haha-item img {
  height: 15rem;
  width: 100%;
}
	
#comments { margin: 0 auto 30% auto; }

#key-edit { 
  bottom: 7%; 
  font-size: 1rem;
}

.footer { width: 90%; }

}

@media only screen and (max-width: 770px) and (orientation: landscape), only screen and (min-width: 770px) and (max-width: 992px) {

.logo { height: 10rem; }
	
.frame {
  width: 75%;
  margin: 5% 2%;
}
	
#landing-bg	{
  width: 85%;
  margin: 0 auto;
  padding-top: 5%;	
}

#key-edit { 
  font-size: 1rem;
}
	
}