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

}

.preview {

	display: block;

	max-width: 100%;

}

.previewbox:before, .previewbox:after {

	content: "";

}

.facier-bar1:hover .previewbox:after, .honoer-bar1:hover .previewbox:after {

	width: 60px;

	height: 60px;

	margin: 0 auto 0;

	background:   no-repeat center / cover;

	transform: translateY(-50%);

	position: absolute;

	top: 50%;

	left: 0;

	right: 0;

	z-index: 2;

	transition: all 0.25s ease-out 0s;

}

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

}



.map {

    -webkit-filter: grayscale(100%);

       -moz-filter: grayscale(100%);

        -ms-filter: grayscale(100%);

         -o-filter: grayscale(100%);

            filter: grayscale(100%);

}