@charset "utf-8";
/* CSS Document */

.photobox {
	display: inline-block;
	cursor: pointer;
	overflow:hidden;
	--photoboxOverlay: rgba(68, 85, 95, 0.20);
	backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}
.photobox img {
	transition: transform 0.8s ease-in-out 0s;
	backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;

    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}
.photobox:hover img {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	transform: scale(1.08);
	transition: all 1.5s ease 0s;

	backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;

    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}
.photobox-preview {
	position: relative;
	overflow: hidden;
}
.photobox-preview:after , .photobox-preview:before {
	content: "";
}
.facier-bar1:hover .photobox-preview:after {
	width: 32px;
	height: 32px;
	margin: 0 auto 0;
	background: url(../images/photobox-plus1.png) no-repeat center / cover;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 99;
	transition: all 0.25s ease-out 0s;

	backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;

    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}
.photobox .photobox-preview:before {
	width: 100%;
	height: 100%;
	background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
	opacity: 0;
	transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
	will-change: opacity;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;

	backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;

    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}
.photobox:hover .photobox-preview:before {
	opacity: 1;

	-webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}
.photobox .line1 {
	width: 80px;
	height: 8px;
	background-color: #3b8a84;
	position: absolute;
	z-index: 9999;
	top: -15px;
	right: 0;
	opacity: 0;
	visibility: hidden;
	-webkit-transition-duration: 300ms;
	-o-transition-duration: 300ms;
	transition-duration: 300ms;

	backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;

    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}
.photobox:hover .line1 {
	opacity: 1;
	visibility: visible;
	top: 0;
	right: 0;

	backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;

    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}