@charset "utf-8";

/* CSS Document */



.photobox {

	display: inline-block;

/*--photoboxOverlay: rgba(0, 0, 0, 1);*/

	cursor: pointer;

	photoboxAnimationDuration: .5s;

}

.photobox img {

	transition: transform 0.8s ease-in-out 0s;

}

.photobox:hover img {

	transform: scale(1.08);

	transition: all 1.5s ease 0s;

}

.photobox:hover .thumbs-bar1 img {

	transform: none;

	transition: none;

}

.photobox:hover .thumbs-bar2 img {

	transform: none;

	transition: none;

}

.previewbox {

	position: relative;

	overflow: hidden;

	width:100%;

    float:left;

}

.preview {

	display: block;

	max-width: 100%;

}

.previewbox:before, .previewbox:after {

	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	top: 0;
	background: rgba(32, 58, 69, 0.17);

}

.photobox-effect1 .previewbox:before {

	width: 0;

	height: 0;

	padding: 25%;

	/*background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));*/

	border-radius: 50%; mix-blend-mode:color;

	position: absolute;

	top: 50%;

	left: 50%;

	z-index: 2;

	transition: -webkit-transform var(--photoboxAnimationDuration, .4s) ease;

	transition: transform var(--photoboxAnimationDuration, .4s) ease;

	transition: transform var(--photoboxAnimationDuration, .4s) ease, -webkit-transform var(--photoboxAnimationDuration, .4s) ease;

	will-change: transform;

	-webkit-transform: translate(-50%, -50%) scale(0);

	transform: translate(-50%, -50%) scale(0);

}

.photobox-effect1:hover .previewbox:before {

	-webkit-transform: translate(-50%, -50%) scale(4);

	transform: translate(-50%, -50%) scale(4);

 transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);

}

/* photobox boder effect */

.photobox-effect1 {

	position: relative;

	z-index: 1;

	overflow: hidden;

	cursor:pointer;

}

.photobox-effect1 img {

	width: 100%;

	-webkit-transition-duration: 800ms;

	-o-transition-duration: 800ms;

	transition-duration: 800ms;

}

.photobox-effect1:hover img { filter:grayscale(100%); -webkit-filter:grayscale(100%);}

.photobox-effect1 .line1 {

	width: 80px;

	height: 8px;

	background-color: #82734f;

	position: absolute;

	z-index: 10;

	top: -15px;

	right: 0;

	opacity: 0;

	visibility: hidden;

	-webkit-transition-duration: 300ms;

	-o-transition-duration: 300ms;

	transition-duration: 300ms;

}

.photobox-effect1 .line2 {

	width: 80px;

	height: 8px;	

	background-color: #82734f;

	position: absolute;

	z-index: 10;

	bottom: -15px;

	left: 0;

	opacity: 0;

	visibility: hidden;

	-webkit-transition-duration: 300ms;

	-o-transition-duration: 300ms;

	transition-duration: 300ms;

}

.photobox-effect1:hover .line1 {

	opacity: 1;

	visibility: visible;

	top: 0;

	right: 0;

}

.photobox-effect1:hover .line2 {

	opacity: 1;

	visibility: visible;

	bottom: 0;

	left: 0;

}