@charset "utf-8";

/* CSS Document */



/*photobox-effect1*/

.photobox-effect1 {

	display: inline-block;

	overflow: hidden;

	cursor: pointer;

	photoboxAnimationDuration: .5s;

	position: relative;

	z-index: 1;

}

.photobox-effect1 img {

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

}

.photobox-effect1:hover img {

	transform: scale(1.08);

	transition: all 1.5s ease 0s;

}

.previewbox {

	position: relative;

	overflow: hidden;

}

.previewbox:before, .previewbox:after {

	content: "";

}

.photobox-effect1 .previewbox:before {

	width: 0;

	height: 0;

	padding: 25%;

	background-color: var(--photoboxOverlay, rgba(135, 118, 79, 1));

	background-color: rgba(135, 118, 79, 0.74) ;

	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);

}



/*play-hover*/

.video-play-button {

	width: 96px;

	height: 96px;

	border: 3px solid #ffffff;

	border-radius: 50%;

	display: block;

	margin: 0 auto 0;

	position: relative;

	z-index: -9999;

}

.video-play-button:after {

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

	display: block;

	width: 106px;

	height: 106px;

	background: rgba(29,36,57,0.60);

	border-radius: 50%;

	-webkit-animation: pulse-border 1500ms ease-out infinite;

	animation: pulse-border 1500ms ease-out infinite;

}

.video-play-button:before {

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

	display: block;

	width: 86px;

	height: 86px;

	background: rgba(29,36,57,0.60);

	border-radius: 50%;

	-webkit-animation: pulse-border 1500ms ease-out infinite;

	animation: pulse-border 1500ms ease-out infinite;

}

.video-play-button:after, .video-play-button:before {

	content: "";

	position: absolute;

	z-index: 0;

	left: 50%;

	top: 50%;

	z-index: -9;

}

.video-play-button span {

	width: 25px;

	height: 26px;

	background:url(../images/video-thumb1.png) no-repeat center / 100%;

	display: block;

	margin: 32px 36px;

	position: relative;

	z-index: 9999;

}

.impoer-wrapp .impoer-row1 .impoer-bar1 .previewbox:before {
    content: "";
    background: none;
}




 @-webkit-keyframes pulse-border {

 0% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 opacity: 1;

}

 100% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 opacity: 0;

}

}

 @keyframes pulse-border {

 0% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 opacity: 1;

}

 100% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 opacity: 0;

}

}