div.poxe {
	position:relative;
	width:400px ;
	height:200px ;
	text-align: center ;
}
div.poxe canvas {
	position:absolute ;
	top:0;
	left:0;
	width:100% ;
	height:100% ;
}
div.poxe .cc {
	position:absolute ;
	text-align: left ;
	top:0;
	left:0;
	color:#eee ;
	background-color:#222 ;
	opacity:0.4 ;	
	z-index:1;
}
div.poxe .cc label {
	cursor:pointer ;
}
div.poxe .cc input {
	cursor:pointer ;
}
div.poxe .pui {
	z-index:1;
}
div.poxe .pui input[type=range] {
	width:10rem ;
}
div.poxe .pui div.t {
	float:left;
	width:3rem ;
	padding-left:0.2rem ;
	overflow:hidden ;
}
div.poxe .loading {
	position:absolute ;
	top:0;
	left:0;
	width:100% ;
	height:100% ;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-image:url("guruguru.gif") ;
	background-repeat:no-repeat;	
}
div.poxe .footer {
	position:absolute ;
	top:calc(100% - 1.5rem) ;
	color:#888 ;
	z-index:1;
}
div.poxe .footer a {
	color:#888 ;	
}
div.poxe .vrbtn {
	position:absolute ;
	width:50px ;
	height:50px ;
	top:calc( 100% - 50px ) ;
	left:calc( 100% - 50px ) ;
	opacity: 0.8 ;
	z-index:1;
	cursor:pointer ;
	background-color:#ccc;
	background-position: center;
	background-image:url("goggle.png") ;
	background-repeat:no-repeat;
}
div.poxe div.sbtn {
	position:absolute ;
	top:0;
	left:0;
	width:100% ;
	height:100% ;
	font-size:4rem ;
	color:#a00;
	text-shadow:0px 0px 80px #fff ;
	display: flex;
	justify-content: center;
	align-items: center;	
	cursor:pointer ;
}
div.poxe img.thumb {
	max-width:100% ;
	max-height:100% ;
	object-fit: contain;
}
/* swicth (single checkbox) */
div.poxe .oswitch input {
	display:none ;
}
div.poxe .oswitch .sbtn {
	font-family:"apple color emoji",sans-serif;
}
div.poxe .oswitch input[type=checkbox] + .sbtn:before {
	content: "⏸Pause" 
}
div.poxe .oswitch input[type=checkbox]:checked + .sbtn:before {
	color:#f44 ;
	content: "▶️Paused" ;
}