@font-face {
    font-family: Voniq;
    src: url(https://www.orion9.info/img/von.otf);
}
/* Web Font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);


h1		{font-family:Voniq;letter-spacing: 3px;color:#FFF;margin-top:-10px;font-size:1.6em;}
body	{background-color:#000;color:#FFF; font-family:Voniq;overflow-x: hidden;}
#bim		{position:relative;opacity: 0.2;filter: alpha(opacity=50);margin-left:10px;}
#h1im	{position:relative;top:-250px;}
#play	{margin-top:150px;}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #ccc;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #ccc;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: #ccc;
}

input, textarea  {
	width: 80%;
	padding:5px;
	border: none;
	border-bottom: 2px solid #3a7da1;
	margin:5px 0;
	font-size:1.2em;
}
textarea{font-size:1.2em;}

.button{
	background-color:#3a7da1;
	border: none;
	color: #FFFFFF;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
}


#fog{
	position: fixed; 
	display: none;
	width: 100%;
	height: 100%;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.8); 
	z-index: 2;
}
/*.stop-scrolling{	height: 100%;	overflow: hidden;}*/

#overlay{
	position: absolute;
	left:10px;
	display: none;
	width:calc(100% - 20px);
	top: 10px;
	color:#FFF;
	background-color: rgba(255,255,255,0.2);
	z-index: 20;
	cursor: pointer;
	border-radius:3px;
}
#player	{margin-top:20px;width:400px;}
.glor	{font-family: 'Gloria Hallelujah', cursive;}
#write	{font-family: 'Gloria Hallelujah', cursive;font-size:1.4em;margin:15px 0 0 0;color:#e6e6e6;}
#spots	{position:absolute;margin: auto;}

#closebut{position:fixed;top:5px;right:5px;width:30px;height:30px;z-index:100;}


@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
	html{
		transform: rotate(-90deg);
		transform-origin: left top;
		width: 100vh;
		overflow-x: hidden;
		position: absolute;
		top: 100%;
		left: 0;
	}
}

@media only screen and (max-device-width: 1024px) {
	.res2		{display:none !important;}
}

@media only screen and (max-device-width: 767px) {
	.cover	{width: 50%;left:-60px;padding:0;}
	.co1		{top:30px;}
	.co2		{top:310px;}
	.co3		{position:absolute;top:380px;left:30px;}
	.stack		{font-size: 6em;}
	h1		{position:absolute;left:10px;top:60px;font-size:2em;opacity:0.3;color:#666;}
	/*h1		{position:absolute;left:calc(50% - 50px);top:244px;font-size:3.4em;opacity:0.3;color:#666;}*/
	#dj		{position:absolute;left:calc(50% + 12px);top:220px;font-size:1.9em;}
	#spots	{bottom:-20px;left:-60px;right:0;}
	#view	{display:none;}
	#contacthere{display:none;}
	#contacthere2{position:absolute;bottom:50px;left:0;right:0;margin: auto;z-index:99;width:200px;cursor:pointer;}
	.st1		{margin-top:10px;margin-left:-540px !important;font-size:4em !important;opacity:0.5 !important;}
	.st2		{margin-top:120px;margin-left:10px;width:300px;font-size:4.5em !important;opacity:0.4 !important;}
	.st3		{margin-top:130px;margin-left:40px;width:300px;opacity:0.5 !important;font-size:5.3em !important;text-align:right;}
	#text		{width:90% !important;}
	.res1		{display:none !important;}
}

@media screen and (max-device-width: 420px) and (min-device-height: 737px) {
	#spots	{bottom:40px;}
	#contacthere2{bottom:100px;}
	#text	{top:800px !important;}
}



@media only screen and (max-device-width: 420px) {
	body		{background-image: url("/img/orion9-mob.jpg");background-repeat:no-repeat;background-position: center top;background-size:100% auto;}
	#bim			{width: 100%;height: auto;position:absolute;bottom:-50px;left:0; }
	.big			{display:none;}
	#play		{position:absolute;right:50px;top:300px;}
	#contact	{letter-spacing: 2px;position:fixed;bottom:40px;left:50%;margin-left:-80px;width:180px;}
	#text		{color:#666;font-size:1em;position:absolute;top:780px;left:0;right:0;margin: auto;width:800px;line-height:1.7em;font-family: 'Open Sans Condensed', sans-serif;}
	#container	{position:absolute;left:0;right:0;margin: auto;bottom:28px;z-index:9;width: 300px;}
	.cover		{width: 70%;}
	.stack		{font-size:6em;}
	#overlay	{height:100%;}
	#player		{width:380px;}
	#upco	{margin:180px 0 0 0px;font-family: 'Open Sans Condensed', sans-serif;text-align:left;padding:5px;border:1px solid transparent;border-radius:5px;width:230px;background-color: rgb(0,0,0, 0.5);position:absolute;z-index:999;}
}
@media only screen and (max-device-width: 375px) {
	#overlay	{}
	#dj		{top:190px;font-size:1.9em;}
	#text	{top:700px;}
	.st1		{margin-top:10px;margin-left:-570px !important;font-size:3.7em !important;opacity:0.4 !important;}
	.st2		{margin-top:120px;margin-left:10px;width:300px;font-size:4.5em !important;opacity:0.3 !important;}
	.st3		{margin-top:90px;margin-left:10px;width:300px;opacity:0.5 !important;font-size:5.3em !important;text-align:right;}
	.res1		{display:none !important;}
	#player	{width:320px;}
	
}
@media only screen and (max-device-width: 320px) {
	#dj		{top:160px;font-size:1.9em;}
	h1		{opacity:0.2;}
	.st1		{opacity:0.4 !important;}
	.st2		{margin-top:120px;margin-left:10px;width:300px;font-size:4.0em !important;opacity:0.3 !important;}
	.st3		{margin-top:50px;margin-left:-20px;width:300px;opacity:0.3 !important;font-size:4.4em !important;text-align:right;}
	#text		{top:580px;}
	#contacthere2{width:160px;bottom:40px;}
	#player	{width:280px;}
}


@media only screen and (min-device-width: 421px) {
	body		{background-image: url("/img/orion9-b4.jpg");background-repeat:no-repeat;background-position: center top;background-size:70%;}
	#bim			{display:none;width: 100%;height: auto;position:absolute;bottom:-50px;left:0; }
	.big			{display:none;}
	#contact	{letter-spacing: 2px;position:fixed;top:580px;left:50%;margin-left:-100px;width:200px;z-index:9999;border-radius:3px;border:1px solid #FFF;font-size:1.2em;}
	#text		{color:#666;font-size:1em;position:absolute;top:790px;left:0;right:0;margin: auto;width:800px;line-height:1.7em;font-family: 'Open Sans Condensed', sans-serif;}
	#container	{position:absolute;left:0;right:0;margin: auto;top:577px;z-index:9;width: 500px;}
	.cover		{width: 30%;}
	.stack		{font-size: 8em;}
	#overlay	{height:420px;}
	#upco		{margin:200px 0 0 -115px;font-family: 'Open Sans Condensed', sans-serif;text-align:left;padding:5px;border:1px solid transparent;border-radius:5px;width:230px;background-color: rgb(0,0,0, 0.5);position:absolute;z-index:999;left:50%;}


}
@media only screen and (min-device-width: 768px) {
	body		{background-image: url("/img/orion9-b5.jpg");background-repeat:no-repeat;background-position: center top;background-size:100%;}
	#bim			{display:none;width: 100%;height: auto;position:absolute;bottom:-50px;left:0; }
	.big			{display:none;}
	#play		{top:190px;position:absolute;right:50px;}
	#contact	{letter-spacing: 2px;position:fixed;top:380px;left:50%;margin-left:-100px;width:200px;z-index:9999;border-radius:3px;border:1px solid #FFF;font-size:1.2em;}
	#text		{color:#666;font-size:1em;position:absolute;top:720px;left:0;right:0;margin: auto;width:800px;line-height:1.7em;font-family: 'Open Sans Condensed', sans-serif;}
	#container	{	
	transition: width 1s;-webkit-transition: width 1s;position:absolute;left:0;right:0;margin: auto;bottom:50px;z-index:9;width: 220px;border-radius:5px;vertical-align:middle;padding:10px 0 5px 0;cursor:pointer;font-size:1em;letter-spacing:2px;}
	#container:hover {font-size:1.1em;width:240px;}
	.cover	{width: 50%;left:-60px;padding:0;}
	.co1		{top:30px;}
	.co2		{top:310px;}
	.co3		{position:absolute;top:380px;left:30px;}
	.stack	{font-size: 6em;}
	h1		{position:absolute;left:calc(50% + 97px);top:150px;}
	#dj		{position:absolute;left:calc(50% + 165px);top:130px;font-size:1.4em;}
	#spots	{top:410px;left:0;right:0;}
	#view	{display:none;}
	#contacthere{position:absolute;top:580px;left:0;right:0;margin: auto;z-index:99;width:300px;cursor:pointer;}
	.st1		{margin-top:20px;margin-left:-40px;font-size:5em;}
	.st2		{margin-top:70px;margin-left:0px;width:300px;font-size:4em;}
	.st3		{margin-top:20px;margin-left:20px;width:300px;opacity:0.5 !important;font-size:4em;text-align:right;}
}

@media only screen and (min-device-width: 1024px) {
	body		{background-size: 1000px 591px;}
	#bim			{display:none;width: 100%;height: auto;position:absolute;bottom:-50px;left:0; }
	.big			{display:none;}
	#play		{top:190px;position:absolute;right:50px;}
	#contact	{letter-spacing: 2px;position:fixed;top:380px;left:50%;margin-left:-100px;width:200px;z-index:9999;border-radius:3px;border:1px solid #FFF;font-size:1.2em;}
	#text		{color:#666;font-size:1em;position:absolute;top:1000px;left:0;right:0;margin: auto;width:800px;line-height:1.7em;font-family: 'Open Sans Condensed', sans-serif;}
	#container	{	
	transition: width 1s;-webkit-transition: width 1s;position:absolute;left:0;right:0;margin: auto;bottom:50px;z-index:9;width: 220px;border-radius:5px;vertical-align:middle;padding:10px 0 5px 0;cursor:pointer;font-size:1em;letter-spacing:2px;}
	#container:hover {font-size:1.1em;width:240px;}
	.cover	{width: 50%;left:-30px;padding:0;}
	.co1		{top:0px;}
	.co2		{top:310px;}
	.co3		{position:absolute;top:380px;left:30px;}
	.stack	{font-size: 6em;}
	h1		{position:absolute;left:calc(50% + 167px);top:230px;font-size:2.8em;}
	#dj		{position:absolute;left:calc(50% + 255px);top:220px;font-size:2.0em;}
	#spots	{position:absolute;z-index:99;bottom:-20px !important;left:0;right:0;height:10px;}
	#view	{display:none;}
	#contacthere{position:absolute;bottom:-382px;left:0;right:0;margin: auto;z-index:99;width:300px;cursor:pointer;}
	#contacthere2{display:none;}
	.st1		{margin-top:20px;margin-left:20px;font-size:5em;}
	.st2		{margin-top:130px;margin-left:0px;width:300px;font-size:4.3em;}
	.st3		{margin-top:50px;margin-left:170px;width:300px;opacity:0.5 !important;}
	#upco		{margin:200px 0 0 -400px;font-family: 'Open Sans Condensed', sans-serif;text-align:left;padding:5px;border:1px solid transparent;border-radius:5px;width:230px;background-color: rgb(0,0,0, 0.5);position:absolute;z-index:999;left:50%;}

}
@media only screen and (min-device-width: 1280px) {
	body		{background-size: 1200px 709px;}
}

#highlight{font-size:2em;}
.w100	{calc(80% + 20px);}
.leftcon	{text-align:center;margin:15px 0;}
#success	{background:green;color:#FFFFFF;font-size:1.2em;text-align:center;top:50px;padding:20px;10px;z-index:9999;position:absolute;display:none;margin:auto;width:100%;}

/* using meyers reset */

/* Box-Sizing */
box-sizing{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

section {
	/*overflow: hidden;*/
	font-family:Open Sans;
	font-weight: 700;
	width: 60em;
	margin: 0 auto;
	font-size: 100%;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;	
}

.cover {
	color: white;
	margin: 0;
	float: left;
	display: block;
	position:absolute;
	/*box-shadow: 0em 0em 5em rgba(10,10,10,0.7);*/
}

.stack {
	text-transform: uppercase;
	line-height: 0.7em;
	word-wrap: break-word;
	overflow-wrap: break-word;
	color:#333;
	opacity:0.7;
}

span {
	position: relative;
}

/* C */
.char1 {
	margin-left: -.2em;
	z-index: 4;
	text-shadow: 0.05em 0.05em 0.2em rgba(10,10,10,0.9);
}

/* O */
.char2 {
	z-index: 3; 
	margin-left: -.175em;
	top: 0.08em;
	text-shadow: -0.02em 0.02em 0.2em rgba(10,10,10,0.9);
}

/* M */
.char3 {
	z-index: 9;
	margin-left: -.125em;
	text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9);
}

/* P */
.char4 {
	z-index: 5;
	margin-left: -.175em;
	text-shadow: 0.02em -0.02em 0.2em rgba(10,10,10,0.9);
}

/* U */
.char5 {
	z-index: 2;
	margin-left: -.125em;
	top: 0.08em;
	text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9);
	opacity:0.55;

}

/* T */
.char6 {
	z-index: 10;
	margin-left: -.125em;
	top: -0.04em;
	text-shadow: 0em 0em 0.2em rgba(10,10,10,0.9);  
	opacity:0.4;
}

/* A */
.char7 {
	z-index: 8;
	margin-left: -.3em;
	top: 0em;
	text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9);
	opacity:0.4;
}

/* T */
.char8 {
	z-index: 6;
	margin-left: -.135em;
	top: -0.05em;
	text-shadow: 0.02em -0.01em 0.2em rgba(10,10,10,0.9);
	opacity:0.4;
}

/* I */
.char9 {
	z-index: 7;
	margin-left: -.125em;
	top: 0em;
	text-shadow: 0.03em -0.03em 0.2em rgba(10,10,10,0.8);
	opacity:0.4;

}

/* O */
.char10 {
	z-index: 1;
	margin-left: -.125em;
	top: 0em;
	text-shadow: 0.05em -0.05em 0.2em rgba(10,10,10,0.9);
	opacity:0.4;
}

/* N */
.char11 {
	z-index: 0;
	top: -.04em;
	margin-left: -.125em;
	text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9);
}


*, *::before, *::after {
  box-sizing: border-box;
}


.luminaire {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 50px;
	border-radius: 50%;
	background-color: cyan;
	box-shadow: 0 0 40px 20px #fff, 0 0 100px 50px #0ff;
	transition: box-shadow 4s ease-out;
	animation: spin 16s linear infinite;
}
@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

.luminaire:hover {
	cursor: pointer;
}

.luminaire::before, .luminaire::after {
	content: '';
	display: block;
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 0 40px 20px #fff, 0 0 100px 50px #aa02b5;
	opacity: 0;
	transition: opacity 8s, transform 8s;
}

.on {
	background-color: #fff;
	box-shadow: 0 0 80px 40px #fff, 0 0 200px 100px #51a6c4;
}

.on::before {
	transform: translateX(-100px);
	opacity: 1;
}

.on::after {
  transform: translateX(100px);
  opacity: 1;
}