

#cam-gallery {
	width:100vw; height:100vh;
	position:fixed;
	left:0; top:0;
	opacity:0;
	transition:opacity 1s;
	z-index:10000;
}


#cam-gallery .matte {
	width:100vw; height:100vh;
	position:fixed;
	left:0; top:0;
	background-color:rgba(0,0,0,0.4);
}

#cam-gallery .frame {
	width:50vw; height:50vh;
	position:absolute;
	left:50%; top:50%;
	transform:translate(-50%, -50%);
	transition:all 1s;
	box-sizing:border-box;
	padding:20px;
	background-color:white;
	border-radius:5px;
	overflow:hidden;
}

#cam-gallery .frame-inner, #cam-gallery .photo, #cam-gallery .ccaption, #cam-gallery .controls {
	width:100%; height:100%;
	position:absolute;
	left:50%; top:50%;
	transform:translate(-50%, -50%);
	background-size:cover;
}

#cam-gallery .frame-inner {
	width:calc(100% - 40px); height:calc(100% - 40px);
	background-color:#ccc;
	overflow:hidden;
}

#cam-gallery .photo {
	opacity:0;
	transition:opacity 0.5s;
	background-position:center center;
}

#cam-gallery .caption {
	width:100%;/* height:100%;*/
	position:absolute;
	left:0; bottom:20px;
	opacity:0;
	transition:opacity 0.5s;
	background-position:center center;
	color:rgba(0,0,0,0.6);
	background-color:rgba(255,255,255,0.4);
	font-family:bitter, serif;
	font-size:20px;
	font-style:italic;
	margin:0;
	padding:10px;
}

#cam-gallery .controls {
	width:calc(100% - 40px); height:calc(100% - 40px);
	opacity:0;
	transition:opacity 0.5s;
	pointer-events:none;
}

#cam-gallery .controls:hover {
	opacity:1;
}

#cam-gallery .next, #cam-gallery .prev {
	width:75px; height:100px;
	position:absolute;
	right:0; top:calc(50% - 50px);
	background:rgba(255,255,255,0.4) url(img/cam-gallery/bn-next.png) right center no-repeat;
	pointer-events:auto;
}

#cam-gallery .prev {
	left:0; right:auto; top:calc(50% - 50px);
	background:rgba(255,255,255,0.4) url(img/cam-gallery/bn-prev.png) left center no-repeat;
}

#cam-gallery .next:hover, #cam-gallery .prev:hover {
	background-color:rgba(255,255,255,0.6);
	cursor:pointer;
}

#cam-gallery .close {
	width:50px; height:50px;
	position:absolute;
	right:0; top:0;
	background:rgba(255,255,255,0.4) url(img/cam-gallery/bn-close.png) center center no-repeat;
}

#cam-gallery .close:hover {
	background-color:rgba(255,255,255,0.6);
	cursor:pointer;
}

#cam-gallery {

}


