body {
	margin: 0;
	padding: 0;
	border-sizing: border-box;	
	background: #000;
}

.controls {
	position:absolute;
	z-index: 100;
	background: transparent;
}

video { 
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -50;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	//background: url('2019-06-20_4347.JPG') no-repeat; 
	background-size: cover;  
	-webkit-transition: 1s opacity; transition: 1s opacity; 
}
.mute {
	cursor : cursor;
	display: initial; 
	color : white;  
}
#video-compare-container {
	display:block;
	line-height: 0;
	padding:0;
	margin:0;
}
#bgvid { 
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	//background: url('2019-06-20_4347.JPG') no-repeat; 
	background-size: cover; 
	-webkit-transition: 1s opacity; transition: 1s opacity; 
}
#collisionCanvas {
	background-color: red;
	opacity: 0.4;

}

canvas {
	position:absolute;
	top: 50%;
	left: 50%;
	min-width:100%:
	min-height:100%;
	z-index: -100;
	transform: translate(-50%, -50%);
	//background: url('2019-06-20_4347.JPG') no-repeat; 
	background-size: cover; 
	-webkit-transition: 1s opacity; transition: 1s opacity; 
}
#imG1 {
	display:none; 
} 
button {
	padding : 8px 8px;
	margin-left: 1rem;
	letter-spacing: .3rem; 
	font-family:dellarobbia_btroman;
	font-size: 1.2rem;   
	font-weight: 100; 
	color : #cccc99;
	color : hsl(60, 33%, 70%);
	background: black;
	transition: 0.2s;
	outline:none;
	border:none;
}
button:hover {
	color: black;
	border-radius:2px; 
	background: #cccc99;
	background: hsl(60,33,70);
}

div { 
	font-family: dellarobbia_btroman;
	font-weight: 100; 
	background: rgba(0, 0, 0, 0.6);
	background: hsla(0, 0%, 0%, .6);
	color: #f5f3f3; 
	color: hsl(0, 9%, 96%);
	padding: 2rem; 
	width: 33%; 
	margin: 2rem; 
	float: right; 		
	font-size: 1.2rem; 
	
}
h1 { 
	font-family: dellarobbia_btroman;
	font-size: 2.2rem; 
	text-transform: uppercase; 
	margin-top: 0.7rem; 
	letter-spacing: .3rem; 
	color: silver;
	color: #c0c0c0; 
	color: hsl(0, 0%, 75,3%); 
}
a { 
	display: inline-block; 
	color: #cccc99;
	background: rgba(0, 0, 0, 0.6);
	background: hsla(0, 0%, 0%, .6);  
	text-decoration: none;
	border: 2px solid #cccc99;
	border-radius: 2px ; 
	padding: .5rem; 
	-webkit-transition: .6s background; 
	transition: .6s background; 
}
a:hover { 
	-webkit-transition: .6s background; transition: .6s background; 
	color: black; 
	text-decoration: none; 
	border-radius:2px; 
	padding: .5rem; 
	background: #cccc99; 
	background: hsla(60, 33%, 70%, 1);
}

.stopfade { 
	opacity: .5; 
}
p {
	font-family: dellarobbia_btroman;
	font-size: 1.2rem; 
	background: rgba(0, 0, 0, 0.8);background: hsla(0, 0%, 0%, .8);   
	color: #f5f5f5; 
	color: WhiteSmoke;
	color: hsla(0, 0%, 96%, 1);
}
#test button { 
	display: block;
	width: 80%;
	padding: .4rem;
	border: none; 
	margin: 1rem auto; 
	font-size: 1.3rem;
	background: black;
	background: hsla(0, 0%, 0%, 1);  
	color: #cccc99; color: hsla(60, 33%, 70%, 1);
	border-radius: 3px; 
	cursor: pointer;
	-webkit-transition: .3s background;
	transition: .3s background;
}
#test button:hover { 
   background: black;
}

@media screen and (max-width: 500px) { 
   body { 
	background:#000 no-repeat center center fixed; 		
	background-size: cover; 
	}
 
   div {
	width:70%;
	}
 }
@media all and (max-device-width: 800px) {
   body { 
	background:#000 no-repeat center center fixed; 		
	background-size: cover; 
	}
  div{
	width:70%;
	} 
 }