.overface-box {
	font-family: Helvetica;
	z-index: 999999;
	overflow: hidden;
	border-style: solid;
	background: rgb(238, 238, 238);
	transition: transform 0.2s ease-in-out 0s, width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 20px;
	position: fixed;
	right: 50px;
	bottom: 50px;
	border-radius: 20px;
	border-width: 3px;
	width: 130px;
	height: 180px;
	border-color: rgb(255, 255, 255);
}
	.overface-box video {
		object-fit: cover;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		min-width: 100%;
		min-height: 100%;
		z-index: 200;
		transition: opacity 0.4s ease-in-out 0s;
		opacity: 0.8;
	}
	.overface-box.overface-click:hover {
		transform: scale(1.05) translate(5px, -5px);
		border-color: #2E9EB6;

	}
		.overface-box:hover video {
			opacity: 1;
		}
	.overface-close {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 20px;
		height: 20px;
		z-index: 9250;
		opacity: 0;
		transition: transform 0.3s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
	}
		.overface-box:hover .overface-close {
			opacity: .5;
		}
		.overface-close:hover {
			opacity: 1;
			transform: scale(1.2);
		}
		.overface-close:before {
			transform: rotate(45deg);
			position: absolute;
			left: 9px;
			top: 1px;
			content: " ";
			height: 18px;
			width: 2px;
			background: white;
			box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 10px;
		}
		.overface-close:after {
			transform: rotate(-45deg);
			position: absolute;
			left: 9px;
			top: 1px;
			content: " ";
			height: 18px;
			width: 2px;
			background: white;
			box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 10px;
		}

.overface-box.overface-active {
	font-family: Helvetica;
	z-index: 999999;
	overflow: hidden;
	border-style: solid;
	background: rgb(238, 238, 238);
	transition: transform 0.2s ease-in-out 0s, width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 20px;
	position: fixed;
	right: 50px;
	bottom: 50px;
	border-width: 4px;
	width: 280px;
	height: 500px;
	border-radius: 20px;
	border-color: #2E9EB6;
	opacity: 1;
}
	.overface-box.overface-active video {
		opacity: 1;
	}


@media screen and (max-width: 640px){
	.overface-box {
		left: 2em;
		bottom: 2em;
		/*border-radius: 20px;*/
		/*border-width: 3px;*/
		width: 100px;
		height: 135px;
	}
}