/* SPACE.JS - 2019 */
/* rhq.be - haqqazi.com - github @rhq */



/* Global */
html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	font-family: arial, sans-serif;
	font-size: 7px;
	line-height: 1.6;
	background-color: #ecf0e9;
}
.none { display: none !important; }
.button {
	display: inline-block;
	margin: 5px; padding: 10px 15px;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.6;
	text-decoration: none;
	text-transform: capitalize;
	opacity: .8;
	outline: none;
	border: none;
	border-radius: 2px;
	-webkit-transition: opacity 100ms ease-in-out 0s;
	   -moz-transition: opacity 100ms ease-in-out 0s;
		-ms-transition: opacity 100ms ease-in-out 0s;
		 -o-transition: opacity 100ms ease-in-out 0s;
		 	transition: opacity 100ms ease-in-out 0s;
}
.button:hover {
	opacity: .6;
	cursor: pointer;
}
.button.disabled {
	opacity: .3;
	pointer-events: none;
    cursor: default;
}



/* Color(s) */
.button { background-color: blue; }



/* Z-Index */
#main #content #space { z-index: 0; }
#main #content #filter { z-index: 10; }
#main #content #controls { z-index: 20; }



/* Layout */
#main {
	width: 100%; height: 100%;
	/* display: table; */
	position: relative;
}
#main #content {
	width: 100%; height: 100%;
	display: table;
	text-align: center;
}
#main #content #filter {
	width: 100%; height: 100%;
	display: block; position: absolute;
	top: 0; left: 0;
	opacity: .5;
	background: rgba(116,14,184,0.1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(116,14,184,0.1) 0%, rgba(75,232,187,0.02) 60%, rgba(9,45,153,0) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(116,14,184,0.1)), color-stop(60%, rgba(75,232,187,0.02)), color-stop(100%, rgba(9,45,153,0)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(116,14,184,0.1) 0%, rgba(75,232,187,0.02) 60%, rgba(9,45,153,0) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(116,14,184,0.1) 0%, rgba(75,232,187,0.02) 60%, rgba(9,45,153,0) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(116,14,184,0.1) 0%, rgba(75,232,187,0.02) 60%, rgba(9,45,153,0) 100%);
	background: radial-gradient(ellipse at center, rgba(116,14,184,0.1) 0%, rgba(75,232,187,0.02) 60%, rgba(9,45,153,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#740eb8', endColorstr='#092d99', GradientType=1 );
}
#main #content #controls {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	margin: auto;
	opacity: 0;
	visibility: visible;
	-webkit-transition: all 250ms ease;
	   -moz-transition: all 250ms ease;
		-ms-transition: all 250ms ease;
		 -o-transition: all 250ms ease;
			transition: all 250ms ease;
}
#main:hover #content #controls { opacity: 1; }



/* Space.js */
#space {
	width: 100%; height: 100%;
	position: fixed;
	top: 0; left: 0;
	z-index: 0;
    user-select: none;
	overflow: hidden;
	background-color: #060C19;
}
.trigger_shiftHue,
.trigger_shiftColors,
.trigger_shiftComposer,
.trigger_shiftSpeed,
.trigger_speedUp,
.trigger_speedDown,
.trigger_timeLapse,
.trigger_slowMotion,
.trigger_hueLoop,
.trigger_speedLoop
{ cursor: pointer; }



/* Media queries */
@media (hover:none), (hover:on-demand) {
	#main #content #controls {
		opacity: 0;
		visibility: hidden;
	}
}