body {
background: #000;
	margin: 0px;
	text-align: left;
}

a:link { text-decoration: none; color: #fff;}
a:visited {text-decoration: none;color: #fff; }


* { margin: 0; padding: 0; box-sizing: border-box;}


.wrapper5 {
	position: fixed;
	top: 1rem;
	left: 1rem;
	padding: 0;
	text-align: left;
	font-family: Verdana, sans-serif;
	font-size: medium;
	background: #000;
	z-index: 100;
}
 .parent {
  width: 100vmin;
  height: 100vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  overflow: hidden;
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 0;
}


.wrapper {	
	display: inline-block;
	position: relative;
	width: 50vmin;
	height: 50vmin;
	border: 0;
	margin: 0; 
	padding: 0;
	text-align: left;
	overflow: hidden;
}

.knocked-over {
	transform: rotate(450deg);
	transition: transform 1s;
}

video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0; 
	padding: 0;
	object-fit: cover;
	transform: scaleX(-1);
}

.motion-box {
	display: none;
	position: absolute;
	background-color: rgba(0,255, 0, 0.4);
	border: 4px solid #0f0;
	transition: all .1s;
}


#video2 {
	position: absolute;
	left: 50vmin;
	top: 0;
	width: 50vmin;
	height: 50vmin;
	border: 0;
	margin: 0; 
	padding: 0;
	object-fit: cover;
	transform: scaleX(-1);
}

canvas {
	position: absolute;
	top: 0;
	left: 50vmin;
	width: 50vmin;
	height: 50vmin;
}


#motion {
	position: absolute;
	left: 0;
	top: 50vmin;
	width: 50vmin;
	height: 50vmin;
	border: 0;
	margin: 0;
	padding: 0;
	transform: scaleX(-1);
	image-rendering: pixelated;
}

/* ////444444 */



.wrapper4 {
	position: absolute; 
	left: 50vmin;
	top: 50vmin;
	width: 50vmin;
	height: 50vmin;
	border: 0;
	margin: 0; 
	padding: 0;
	overflow: hidden;
}

.knocked-over {
	transform: rotate(450deg);
	transition: transform 1s;
}

#video4 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0; 
	padding: 0;
	object-fit: cover;
	transform: scaleX(-1);
}

#canvas4 {
	position: absolute; 
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0; 
	padding: 0;
}

.motion-box4 {
	display: none;
	position: absolute;
	
/* 	border: 4px solid #0f0; */
	transition: all .1s;
	
}

@media (min-width: 769px) {
	.parent {
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		transform: none;
	}

	.wrapper {
		width: 50vw;
		height: 50vh;
	}

	#video2,
	canvas {
		left: 50vw;
		width: 50vw;
		height: 50vh;
	}

	#motion {
		top: 50vh;
		width: 50vw;
		height: 50vh;
	}

	.wrapper4 {
		left: 50vw;
		top: 50vh;
		width: 50vw;
		height: 50vh;
	}
}

@media (max-width: 768px) {
	.motion-box {
		border-width: 1px;
	}
}

.page-webcam .wrapper5 a {
	color: #fff;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: normal;
}