html{ background-color: black; }
*{ box-sizing: inherit; margin: 0; padding: 0 }
body {
	color: #ffffff;
	font-size:13px;
	background-color: #000;
	margin: 0px;
	overflow: hidden;
	box-sizing: border-box;
	font-family: 'Roboto Condensed', sans-serif; 
	white-space: nowrap;
}
a{ color: white; }
#container{ position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 100%; bottom: 0;}
#container canvas{ position: absolute;left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%}
#title{ position: absolute; left: 10px; top: 10px; right: 0; text-shadow: 0 1px 0 rgba( 0,0,0,.6); color: white;}
#loader, #options, #about{ position: absolute;}
.interact{ cursor: url(../assets/move.png), move;}
.nothing{ cursor: not-allowed;}
.carve{ cursor: none;}

#about{ position: absolute; left: 0; top: -80px; right: 0; height: 60px; color: #bababa; text-transform: uppercase; text-align: center; font-weight: bold; line-height: 1em; text-shadow: 0 1px black; transition: transform 250ms ease-out;}
#about span{ color: #ffa438; font-weight: normal;}
#about p.main{ font-size: 14px; margin-top: 17px; margin-left: 0;}
#about p.intro{ font-size: 12px; margin-top: 8px; margin-left: 0;}
#video .social{ position: absolute; right: 0; bottom: -40px; left: 0; text-align: center}
#about a{ color: #ffa438; text-decoration: none;}
#about a:hover{ color: #ffffff;}
#about.hidden{ transform: translateY( 80px ); }
.btn{ padding: 10px 10px 10px 36px; background-color: #202020; border-radius: 2px; outline: none; border: none; display: inline; position: relative; text-decoration: none;}
.btn:hover{ background-color: #ff9c00;}
.icon{ position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; margin-right: 8px; font-size: 16px;}
.btn b{ font-weight: 700; color: #ffa438;}
.btn:hover b{ color: white; }
#options{ top: 20px; left: 50%; transition: transform 250ms ease-out; transform: translateX( -50% );}
#options.hidden{ transform: translateX( -50% ) translateY( -150px );}
#loader{ display: block; position: absolute;}
.dropzone{ cursor:pointer; background-color: #404040; border-radius: 2px; outline: none; border: none; display: inline-block; position: relative; }
.dropzone p{ margin-left: 20px;}
.dropzone div{ padding: 10px 10px 10px 10px; }
.dropzone:hover{ background-color: #ff9c00;}
.dropzone .icon{ left: 0; top: 0;}
#stencils{ padding: 10px 10px 10px 30px; width: 100%; background-color: #202020; border-radius: 2px; margin-top: 4px; cursor: pointer; margin-bottom: 4px; position: relative; text-decoration: none; }
#stencils:hover{ background-color: #ff9c00; }
#stencils p{ margin-left: 20px;}
#stencils ul{ float: left; list-style-type: none; }
#stencils-list{ width: 304px; margin-top: 10px; margin-left: 6px; list-style-type: none;}
li.stencil{ width: 58px; height: 58px; background-repeat: no-repeat; position: relative; background-size: cover; float: left; margin: 1px;}
li.stencil img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom:0; transition: opacity 150ms ease-out; opacity: .0000001; }
#media-stream{ position: relative; padding: 10px 10px 10px 10px; background-color: #202020; border-radius: 2px; margin-top: 4px;  cursor: pointer; display: none; }
#media-stream:hover{ background-color: #ff9c00; }
#media-stream p{ margin-left: 20px;}
#media-stream.hidden{ display: none;}
#sources{ list-style-type: none; }
#sources.hidden{ display: none;}
#sources li{ margin-left: 40px; padding: 10px; list-style-type: disc; text-indent: -10px; text-transform: capitalize;}
#info{ position: relative; padding: 10px 10px 10px 10px; background-color: #202020; border-radius: 2px; cursor: pointer; clear:both;}
#info p:first-child{ margin-left: 20px; }

.disabled{ background-color: #dedede !important; pointer-events: none;}

.button{ font-family: 'Roboto Condensed'; font-weight: 300; font-size: 11px; line-height: 35px; width: 157px; display: inline-block; text-transform: uppercase; text-align: center; text-decoration: none; border-radius: 3px; height: 37px; pointer-events: auto;}

#share-panel{ position: absolute; left: 0; top: 0; right: 0; height: 120px; background-color: #101010; color: #4c4b4a; transition: transform 250ms ease-out;}
#share-panel p{ font-family: "Roboto Condensed"; font-weight: bold; color: #ffa438; font-size: 12px; text-transform: uppercase; text-align: center; margin-bottom: 17px;}
#share-panel .panel a{ width: 138px; margin-right: 3px ;}
#share-panel div.panel{ position: absolute; left: 50%; margin-left: -325px; top: 20px; width: 650px;}
#share-panel.hidden{ transform: translateY( -140px );}
#overlay{ display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; opacity: .0000001; pointer-events: none; transition: opacity 500ms ease-out;}
#overlay *{ pointer-events: inherit; }
#overlay.visible{ opacity: .5; pointer-events: auto;}
#overlay.initial{ opacity: .9999999; pointer-events: auto;}
#downloadBtn{ background-color: #c91b20;}
#shareFacebookBtn{ background-color: #1072d5;}
#shareTwitterBtn{ background-color: #20c2ea }
#downloadBtn:hover{ background-color: #df252a; }
#shareFacebookBtn:hover{ background-color: #157de4; }
#shareTwitterBtn:hover{ background-color: #10cbfa; }
#share-panel input{ width: 358px; height: 37px; border: 1px solid #ffa438; border-radius: 3px; line-height: 0; padding: 0; margin-right: 7px; background-color: rgba( 0,0,0,.1 ); font-family: "Roboto Condensed"; font-weight: bold; font-size: 11px; color: white; padding: 0 15px;}
#share-panel input:focus { outline:none; }
#closeShareBtn{ position: absolute; left: 50%; bottom: -15px; margin-left: -13px; width: 26px; height: 30px; cursor: pointer; }
#closeMenuBtn{ position: absolute; right: 0; bottom: -15px; margin-left: -13px; width: 26px; height: 30px; cursor: pointer; }

#share{ position: absolute; left: 10px; top: 20px;}
#gallery{ position: absolute; padding: 10px 10px 10px 10px; background-color: #202020; border-radius: 2px; margin-top: 14px; float: right; cursor: pointer; top: 20px; left:50%; transition: transform 250ms ease-out; transform: translateX(-50%); text-align: center;}
#gallery.hidden{ transform: translateX(-50%) translateY( -500px) ; }
#share{ transition: transform 250ms ease-out; }
#share.hidden{ transform: translateY( -150px );}

.fb-like{ display: inline !important }

#error{ display: none; position: absolute; left: 50%; margin-left: -300px; width: 600px; top: 30px; background-color: rgba( 167, 0, 0, .8 ); padding: 20px; border-radius: 5px; color: white; text-shadow: 0 -1px 0 rgba( 0,0,0,.8 ); text-align: center; font-family: arial, sans-serif; font-weight: normal; font-size: 14px }
#error p{ margin-bottom: 1em }

#video{ position: absolute; left: 50%; top: 50%; margin-left: -280px; width:560px; height:315px; margin-top: -157px; transition: opacity 250ms ease-out; opacity: .0000001; pointer-events:none; }
#video.visible { opacity: .9999999; pointer-events:auto;}
#closeVideoBtn{ position: absolute; right: 0; bottom: -40px; margin-left: -13px; width: 26px; height: 30px; cursor: pointer; z-index: 100;}

#squircle{ position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ); transition: opacity 250ms ease-out; pointer-events: none; opacity: .9999999;}
#squircle.hidden{ opacity: .0000001;}

#video-container{ position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
#video-container iframe{ left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: 10px solid #444;}

#credits{ position: absolute; bottom: -90px; left: 80px; right: 80px; white-space: normal; text-align: center;}
#credits a{ white-space: nowrap;}

@media (max-width : 840px) {
	#share-panel{ height: 180px; text-align: center;}
	#share-panel div.panel{ left: auto; margin-left: auto; width: 100%; padding: 0 20px;}
	#share-panel input{ width: 395px; margin-bottom: 4px;}
	#share-buttons{ display: block; text-align: center; padding-top: 10px;}
	#share-panel .panel a{ width: 128px;}
	#share-panel.hidden{ transform: translateY( -280px );}
	#video{ width: 400px; margin-left: -200px; height: 225px; margin-top: -112.5px;}
	#credits{ left: 30px; right: 30px; bottom: -110px;}
}

@media (max-width : 432px) {
	#options a{ font-size: 0; height: 40px; display: inline-block; width: 50px;}
	#options a .icon{ left: 18px;}
	#share{ top: auto; bottom: 70px;}
	#share-panel{ height: 240px;}
	#share-panel div.panel{ left: auto; margin-left: auto; width: 100%; padding: 0 20px;}
	#share-panel input{ width: 100%; margin-bottom: 4px;}
	.button{ display: block; margin-bottom: 2px;}
	#share-panel .panel a { width: 100% }
	#share-panel.hidden{ transform: translateY( -340px );}
	#share.hidden{ transform: translateY( 0 );}
	#video{ width: 100%; margin-left: -50%; height: 75vw; margin-top: -37vw}
	#credits{ left: 30px; right: 30px; bottom: -120px;}
}