/* ===================================================================
 * Lopwon Main Stylesheet
 * Template Ver. 2.0.1
 * 09-30-2022
 * ------------------------------------------------------------------
 *
 * # html
 * # bgimg
 * # masonry
 * 		## grid
 * 		## item
 * 		## post
 * 		## footer
 * 		## CC & Exif
 * 		## navigator
 * 		## search & top
 * # mobile
 * 		## min-width: 1920px
 * 		## max-width: 768px
 * 		## max-width: 640px
 * 		## max-width: 480px
 *
 * ------------------------------------------------------------------- */

@charset "UTF-8";

html {
	font-family: sans-serif;
	font-size: 62.5%;
	line-height: 1.2;
	box-sizing: border-box;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-weight: normal;
	line-height: 1.2;
	text-rendering: optimizeLegibility;
	word-wrap: break-word;
	background-color: var(--color-1);
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	text-decoration: none;
	line-height: inherit;
	outline: none;
}

a:hover,
a:focus,
a:active {
	outline-width: 0;
}

[hidden] {
	display: none;
}

.clamp {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

:root {

	--color-black	: #000000;
	--color-1		: #121212;
	--color-2		: #232323;
	--color-3		: #343434;
	--color-4		: #454545;
	--color-5		: #565656;
	--color-6		: #676767;
	--color-7		: #787878;
	--color-8		: #898989;
	--color-9		: #909090;
	--color-a		: #ababab;
	--color-b		: #bcbcbc;
	--color-c		: #cdcdcd;
	--color-d		: #dedede;
	--color-e		: #efefef;
	--color-f		: #f0f0f0;
	--color-white	: #ffffff;

	--color-red		: #e5432a;
	--color-orange	: #ff8800;
	--color-yellow	: #ffff00;
	--color-green	: #03ee03;
	--color-cyan	: #02cbab;
	--color-blue	: #4a86e8;
	--color-purple	: #800080;

}

/* --- scrollbar --- */

::-webkit-scrollbar {
	width: 7px;
	height: 100%;
}

::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: var(--color-9);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
	border-radius: 0;
	background-color: var(--color-2);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.03);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-9) var(--color-2);
}

@media screen and (max-width: 400px) {

	::-webkit-scrollbar {
		width: 5px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 3px;
	}

	::-webkit-scrollbar-track {
		border-radius: 0;
	}

}

/* -------------------------------------------------------------------
 * masonry
 * ------------------------------------------------------------------- */

#main {
	display: flex;
	flex-wrap: wrap;
}

.content {
	flex: 1;
	max-width: 1920px;
	margin: 0 auto;
}

.masonry {
	margin: 0.5em auto 1em auto;
}

/* -- grid -- */

.grid {
	position: relative;
	display: block;
	margin: 0 auto;
	height: 100% !important;
	z-index: 2;
}

.grid--hidden {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	opacity: 0;
	z-index: 1;
}

.grid__deco {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.grid__deco path {
	fill: none;
	stroke: var(--color-orange);
	stroke-width: 0.25em;
}

.grid__reveal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	background-color: var(--color-1);
	z-index: 999;
}

/* -- item -- */

.grid .grid__item,
.grid .grid__sizer {
	width: calc((100% / 4) - 10px);
	margin: 5px;
	border-radius: 0.5em;
	background-color: var(--color-2);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	overflow: hidden;
}

.grid .grid__item:hover,
.grid .grid__sizer:hover {
	background-color: var(--color-3);
}

/* -- attachment -- */

.grid__link {
	display: block;
	position: relative;
}

.grid__img {
	display: block;
	width: 100%;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	cursor: pointer;
}

.grid__img:hover {
	border-radius: 0.5em 0.5em 0 0;
	-webkit-transform: scale(.97);
	-moz-transform: scale(.97);
	-ms-transform: scale(.97);
	-o-transform: scale(.97);
	transform: scale(.97);
}

.snapic-about h1,
.snapic-description h2 {
	display: block;
	margin: 1em 0;
	text-align: center;
}

.snapic-about h1 {
	font-size: 1.2em;
}

.snapic-description h2 {
	font-size: 1em;
}

.snapic-description {
	padding: 0 1em;
}

.snapic-description.snapic-excerpt,
.snapic-description span,
.snapic-description p {
	margin: 0.5em 0;
}

.snapic-description hr {
	margin: 1em 0;
	height: 0;
	border: none;
	border-top: 0.01em solid rgba(0 0 0 / 75%);
	border-bottom: 0.01em solid rgba(255 255 255 / 7.5%);
	background-color: transparent;
	clear: both;
}

.snapic-title,
.snapic-excerpt {
	display: inline-block;
	color: var(--color-6);
	text-align: left;
	font-weight: normal;
	line-height: 1.6;
	text-align: justify;
}

.snapic-title {
	font-size: 1.8em;
}

.snapic-excerpt {
	font-size: 1.4em;
}

.grid__item:hover .snapic-title,
.grid__item:hover .snapic-excerpt {
	color: var(--color-b);
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.snapic-excerpt a {
	color: var(--color-orange);
}

.snapic-excerpt a:hover {
	padding-bottom: 0.1em;
	color: var(--color-d);
	border-bottom: 0.1em dashed var(--color-orange);
}

/* -- fancybox -- */

.fancybox-title-float-wrap {
	right: auto !important;
}

.fancybox-title-float-wrap .child {
	margin-right: auto !important;
	padding: 2px !important;
	font-size: 1.2em !important;
	text-align: left !important;
	font-weight: normal !important;
	white-space: normal !important;
	text-shadow: none !important;
	background: transparent !important;
	text-overflow: -o-ellipsis-lastline !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 1 !important;
	line-clamp: 1 !important;
}

/* -- footer -- */

.snapic-footer {
	display: flex;
	flex-direction: column;
	padding: 1.8em 0;
}

.snapic-footer span,
.copyright a,
.powered a {
	color: var(--color-6);
}

.grid__item:hover .copyright a,
.grid__item:hover .powered a {
	color: var(--color-d);
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.copyright a:hover,
.powered a:hover {
	color: var(--color-white) !important;
}

.snapic-footer span {
	margin: 0.5em 0;
	padding: 0 1em;
	width: calc(100% - 2em);
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.copyright a,
.powered a {
	font-size: 1.4em;
}

/* -- top -- */

#gotop {
	display: none;
	position: fixed;
	bottom: 3.2em;
	right: 2em;
	padding: 0;
	width: 3em;
	height: 3em;
    border: 0.25em solid var(--color-white);
    border-radius: 100%;
    background-color: var(--color-black);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 2em;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAFVBMVEVHcEz///////////////////////+3ygHaAAAABnRSTlMAgKnhlHObIjSDAAAAl0lEQVRIx+3UvQmAQAwF4EQdQDhIbWWt4ABWLuAEJ3L7j6CHgt5fYmeTV748vkoPQKPR/B8zyht0rhVH5Jz9AMkU+ZH9AEkUXSMrQVsvUB7qKp7y0A7AUx6aAVjqhnjqhlgKn1OZoudSpPB9KFH07gsUhnWeorDNUhiXS4aq4645iyEdRfqSjtLvP/dHmClu1lHfF43mvxymGzoYyGZhAgAAAABJRU5ErkJggg==");
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	cursor: pointer;
    opacity: .3;
	z-index: 99;
}

#gotop:hover {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: 1;
}

#gotop a {
	display: block;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------
 * mobile
 * ------------------------------------------------------------------- */

@media screen and (min-width: 1920px) {

	#gotop {
		right: calc(50% - (1920px / 2) + 2em);
	}

}

@media screen and (max-width: 960px) {

	.grid .grid__item,
	.grid .grid__sizer {
		width: calc((100% / 3) - 10px);
		margin: 5px;
	}

}

@media screen and (max-width: 768px) {
	#main {
		display: block;
	}

	.content {
		max-width: 100vw;
	}

	.grid__img:hover {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

@media screen and (max-width: 640px) {

	.grid .grid__item,
	.grid .grid__sizer {
		width: calc((100% / 2) - 10px);
		margin: 5px;
	}

}

@media screen and (max-width: 480px) {

	.snapic-description {
		padding: 0 0.5em;
	}

	.snapic-title {
		font-size: 1.6em;
	}

	.snapic-excerpt {
		font-size: 1.2em;
	}

	.snapic-description hr {
		border-top: 0.05em solid rgba(0 0 0 / 75%);
		border-bottom: 0.05em solid rgba(255 255 255 / 7.5%);
	}

	.copyright a,
	.powered a {
		font-size: 1.2em;
	}

	.fancybox-title-float-wrap .child {
		font-size: 1em !important;
	}

	.fancybox-nav span {
		visibility: visible !important;
		opacity: .3;
	}

	.fancybox-next span {
		-webkit-animation: lr 1s ease-in-out 1s infinite alternate;
		-moz-animation: lr 1s ease-in-out 1s infinite alternate;
		-ms-animation: lr 1s ease-in-out 1s infinite alternate;
		-o-animation: lr 1s ease-in-out 1s infinite alternate;
		animation: lr 1s ease-in-out 1s infinite alternate;
	}

	@keyframes lr {
		from {
			margin-right: 0;
		}
		to {
			margin-right: -12px;
		}
	}

	@keyframes lr {
		from {
			transform: translate(0, 0);
		}
		to {
			transform: translate(6px, 0);
		}
	}

	@-webkit-keyframes lr {
		from {
			margin-right: 0;
		}
		to {
			margin-right: -12px;
		}
	}

	@-webkit-keyframes lr {
		from {
			transform: translate(0, 0);
		}
		to {
			transform: translate(6px, 0);
		}
	}

	@-o-keyframes lr {
		from {
			margin-right: 0;
		}
		to {
			margin-right: -12px;
		}
	}

	@-o-keyframes lr {
		from {
			transform: translate(0, 0);
		}
		to {
			transform: translate(6px, 0);
		}
	}

	@-moz-keyframes lr {
		from {
			margin-right: 0;
		}
		to {
			margin-right: -12px;
		}
	}

	@-moz-keyframes lr {
		from {
			transform: translate(0, 0);
		}
		to {
			transform: translate(6px, 0);
		}
	}

}

@media screen and (max-width: 320px) {

	.grid .grid__item,
	.grid .grid__sizer {
		width: calc((100% / 1) - 10px);
		margin: 5px;
	}

}