@charset "UTF-8";

.c-photo>.c-img, #closebutton {
	opacity: 0.5;

	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 5.0s;
	-ms-animation-duration: 5.0s;
	animation-duration: 5.0s;
	-webkit-animation-name: fid;
	animation-name: fid;
	visibility: visible !important;
}

@-webkit-keyframes fid {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#closebutton {
	position: fixed;
	top: calc(100vh - 50px);
	left: calc(100vw / 2 - 15px);
	width: 30px;
	height: 30px;
	background: #000000;
	border-radius: 50%;
	z-index: 5;
}

#closebutton:hover {
	transition: all 1s;
	transform: rotate(180deg);
}

.clsbtn {
	display: block;
	position: relative;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: #000000;
	transition: all 1s;
}

.clsbtn::before, .clsbtn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 22px;
	background: #ffffff;
}

.clsbtn::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
 
.clsbtn::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}