/*
 * Best practices for full screen renderer
 */
 


@media screen and (max-device-width: 800px) {

body { 
	background: url(img/loading-xlarge.gif) #000 no-repeat center center fixed; }
	#bgvid { display: none; }
	
	}
	
body
{
	background-color: rgba(0,0,0,1);
	margin: 0 -3px 0 0; //this fixes a browser bug that creates useless scrollbars
	font-family: sans-serif;
        overflow:hidden; //prevent scrollbars
        height: 100vh;
	

}


 .details {
      width: 60%;
      font: 10pt verdana;
      margin: auto;
      text-align: left;
      padding: 2px;
      border: 1px solid black;
      /* This used to break Opera */
      border-radius: 10px;
    }
    
    .left {
      width: 30%;
      vertical-align:top;
    }
    
    p#doesIt{ 
    font: bold 10px verdana;
    color: #ffffff;
    text-align: center;
	z-index:20;
	position: fixed;
    }  
	



//create a Selector ID with the same name then the renderer in the patch to reference it in the style sheet
#RendererMain canvas.vvvv-js-generated-renderer{display:block; position:absolute;z-index:1;pointer-events: none;} 
//'pointer-events: none' can be used to overlay a renderer with alpha over a webpage and still let clicks come through to underlying elements!

.CanvasDiv
{
	position:absolute; 
	top:0; 
	left:0;
	width: 100vw; //100% view width
	height: 100vh; //100% view height
    z-index:1;
}

.TextDiv
{
	color:#ffffff;
	position:absolute; 
	top:0; 
	left:0;
	width: 100vw;
	height: 100vh;
    background-color: rgba(255,255,255,0);
	z-index: 0;
}

.ControlsDiv
{
	color:#ffffff;
	position:absolute; 
	bottom: 5px;
	z-index: 0;
}

clip{

	cursor:pointer;
	font-family: Arial, Helvetica, sans-serif;
}

button{
    background-color: rgba(255,255,255,0);
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
	width: 100px; 
	height: 100px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 0;
	margin: -25px -50px; 
}



video#Video1 {
	position: fixed;
	top: 50%;
	left: 50%;
		
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: url(img/1.JPG) no-repeat;
	background-size: cover;
}

video { 
	display: block; 
}