.turnview-open {
	display: inline-flex;
	align-items: center;
	height: 2.5em;
	border: 1px solid #ccc;
	border-radius: 1.25em;
	margin-bottom: 1em;
	padding: 0 1em;
	color: #666;
	font-size: 85%;
}
.turnview-open i.material-icons {
	margin-right: 0.5em;
	color: #aaa;
	font-size: 1.5em;
}

.turnview-modal {
	display: flex;
	position: fixed;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100%;
	background: rgba(0,0,0,0.5);
}


@media (orientation: portrait) {
	.turnview-modal {
		font-size: 4vw;
	}
}

@media (orientation: landscape) {
	.turnview-modal {
		font-size: 2vw;
	}
}


.turnview-frame {
	position: relative;
	box-sizing: border-box;
	width: 90vw;
	height: calc(100% - 10vw);
	border-radius: 0.5em;
	background: white;
}

.turnview-close {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	width: 2em;
	height: 2em;
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	opacity: 0.25;
	transition: opacity 200ms;
}

.turnview-close:hover {
	opacity: 1;
}

.turnview-close::before,
.turnview-close::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(black, black) no-repeat center center / 80% 0.1em;
}
.turnview-close::before {
	transform: rotate(45deg);
}
.turnview-close::after {
	transform: rotate(-45deg);
}


.turnview-loader {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10em;
	height: 0.25em;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.1);
}

.turnview-loader span {
	display: block;
	width: 0;
	height: 100%;
	background: rgba(0,0,0,0.25);
	transition: width 200ms;
}
.turnview-loaded .turnview-loader {
	opacity: 0;
	transition: opacity 800ms;
}


.turnview-view {
	opacity: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background-clip: content-box;
	transition: opacity 600ms 200ms;
}

.turnview-loaded .turnview-view {
	opacity: 1;
}

.turnview-view img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


@media (orientation: portrait) {
	.turnview-view {
		padding: 3em 1em;
	}
}

@media (orientation: landscape) {
	.turnview-view {
		padding: 1em 3em;
	}
}


.turnview-guide {
	display: flex;
	visibility: hidden;
	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 1.25em;
	padding: 0 1em;
	height: 2.5em;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.5);
	color: white;
	white-space: nowrap;
	font-size: 90%;
	opacity: 0;
	transition: opacity 400ms 1s;
}

.turnview-loaded .turnview-guide {
	visibility: visible;
	opacity: 1;
	animation-name: turnview-guide-autohide;
	animation-duration: 400ms;
	animation-delay: 4s;
	animation-fill-mode: forwards;
}

@keyframes turnview-guide-autohide {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}