.lbox {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	top: 0;
	left:0;
	margin: 0;
	opacity: 0;
	visability: hidden;
}

.lbox.fire {
	opacity: 1;
	visability: visible;
	z-index: 1;
}

.lbox_buffer {
	min-height: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 4px;
}

@media screen and (max-width: 797px) and (orientation: portrait) {
  .lbox_buffer {
    transform: rotate(90deg) translateY(-17vh);
    transform-origin: right top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    right: 0;
  }

  .lbox_title {
        font-size: 18px;
	text-align: center;
  }

  .lbox_area {
        max-width: 75%;
        min-width: 44%;
	width: auto;
	max-height: 98%;
	min-height: 45;
	height: auto;
  }

}

@media screen and (max-width: 797px) and (orientation: landscape) {

  .lbox_title {
        font-size: 18px;
        text-align: center;
  }

}

.lbox_area {
	background-color: #5A5A5A;
	color: white;
	border: 2px solid #E9E9B0;
	max-width: 94%;
	min-width: 88%;
	padding: 3px;
	position: relative;
}

.lbox_area a.escape {
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 44px;
	color: #FFD67B;
	text-decoration: none;
}

.lbox_title {
	font-size: 22px;
	font-weight: bold;
	font-style: italic;
	margin: 4px 3px;
}

.lbox_media {
	background-color: #5A5A5A;
}

.lbox_substrate {
        position: absolute;
        left: 4px;
        top: 10px;
}

.lbox_substrate p {
        margin: 0px 8px;
}
