/* css Party  */
* {margin:0; padding:0;}
html{z-index:1;
	position: ; top:0px;
	overflow:hidden;
	height: 100%; width:100%;
/*	background-color: hsla(01,1%,98%,1);	*/
	background-repeat: no-repeat;
	background-size:100%;
	background-position:0 -340px;
	background-image: -ms-radial-gradient(center, ellipse farthest-side, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: -moz-radial-gradient(center, ellipse farthest-side, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 50%, .0) 100%);
	background-image: -o-radial-gradient(center, ellipse farthest-side, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, .0) 100%);

	background-image: -webkit-gradient(radial, center, ellipse farthest-side, 143, color-stop(0, hsla(0, 0%, 100%, .5)), color-stop(1, hsla(0, 0%, 100%, .0)));
	background-image: -webkit-radial-gradient(center, ellipse farthest-side, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: radial-gradient(center, ellipse farthest-side, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, .0) 100%);
}
.js html{}
body{z-index:2;
	overflow-x:hidden; overflow-y:hidden;
	min-height: 100%; min-width: 100%;
}
#candyWrapper {width:80%; height: 100%; margin:0 auto; color:#6B6868; 
	position: relative; z-index:1;}
a, a:focus, a:visited, input:focus, select:focus{text-decoration: none;
	outline: none; 
	color:white;
	}
div, img, h1, h2, p {font-weight:normal;}
h1 {margin: 1em auto 0px;}
p {color:#1a1a1a; margin: .5em 0;}

/* ===========================================================================
   Global Fonts
   ========================================================================== */

@font-face {font-family: 'Zrnic Regular';
	src: url('webfonts/233E14_0_0.eot');
	src: url('webfonts/233E14_0_0.eot?#iefix') format('embedded-opentype'),
		 url('webfonts/233E14_0_0.woff') format('woff'),
		 url('webfonts/233E14_0_0.ttf');}

@font-face{
	font-family: 'Zrnic';
	src: url('../font/zrnic___.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/zrnic___.ttf')  format('truetype');
}
body{font-family: 'FuturaMed', Gill Sans / Gill Sans MT, tahoma, sans-serif; font-size:15px;}
#theInterbret, h1, h2, .controls, #home .text, h2.flashIn{
	font-family: 'Zrnic Regular', 'Zrnic', Lucida Sans Unicode, Sans serif; color: #893908;
	}
input, select, textarea, #success p, header h2 {
	font-family: Lucida Console, Monaco, monotype;}
}
label{font-family:impact, Sans serif;}
/* ===========================================================================
   Header
   ========================================================================== */

header{
	height:170px; width: 100%; 
	text-align:center; z-index:0;
	}
.js header{position: absolute; top: 0px;}
hgroup{margin:25px auto;}
#theInterbret{}
#theInterbret #the{font-size: 12px; position:relative; top: 20px; left:-98px; margin-left: 0; opacity: .75; letter-spacing:10px;}
#theInterbret h1{
	height: 90px; margin:0px auto 0; line-height:88px;
	font-size:64px; letter-spacing:6px;
	text-shadow: 0em .0em 0.2em white, 0em .05em 0.07em hsla(0, 0%, 0%, .2); opacity: .8;
	}
.js header h1{display:none;}

header h1 span{positio3:relative;line-height:64px !important; vertical-align: 0px;
	-o-margin: 0 3px 0;}
header h2{
	margin:-5px auto 0px;
	font-size:10px; letter-spacing:5px; color:black;
	opacity:.7; text-shadow: 0em 0.07em 0.1em hsla(0, 0%, 0%, .5);
	text-shadow: 0 0 3px #FFF9C2;
	}
.js header h2{display:none;
	} 
header h2:hover {
	font-size:1.2em; opacity:.6; text-shadow: 0em 0.4em 0.3em hsla(0, 0%, 0%, .5);
	}
.floatingHeads{	
    -webkit-transition: font-size 2s ease, opacity 2s ease, text-shadow 2s ease;  
    -moz-transition: font-size 2s ease, opacity 2s ease, text-shadow 2s ease;  
    -o-transition: font-size 2s ease, opacity 2s ease, text-shadow 2s ease; 
    -ms-transition: font-size 2s ease, opacity 2s ease, text-shadow 2s ease;  
    transition: font-size 2s ease, opacity 2s ease, text-shadow 2s ease;  
	}
#headerHighlight{ display:none;
	z-index:-1000;
	position: absolute; top: -520px;
	height: 1200px; width: 96%; margin:0 2% 0; 
	background-position: center;
	background-repeat: no-repeat;
	background-size:100%;
	background-image: -ms-radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: -moz-radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: -o-radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, #FEFFF7), color-stop(1, hsla(0, 0%, 100%, .0)));
	background-image: -webkit-radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%); z-index:1;

}

/* ===========================================================================
   MAIN NAV    ...webkit is not a fan of ems and animation together
   ========================================================================== */
#orbNav{
	font-size:14px;
	z-index:9000;
	position:relative; top:80px;
	height: 20px; width:100%;
	text-align:center;
	margin: 0 auto; padding:0;
	}
.js #orbNav{ height:200px; width:30%; position:absolute; top:0px; left: 1%; }
.orbBox{
	z-index:9002;
	display:inline-block;
	position: relative;
	top:16px;
	width:8em; margin:0;
	height: 30px;}
.js .orbBox{width:100%;}
.orb{
	z-index:9003;
	height:1.2em; width:100%;
	border: 0; text-align:center;
	border-radius: 16px;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	box-shadow: inset 9px -2px 12px hsla(0, 10%, 10%, .8),
		inset 1px 0px 4px hsla(200, 10%, 10%, .8);
	behavior: url('PIE.htc');
	-webkit-transition: background-color .5s ease, box-shadow .5s ease, color .75s ease; 
	-moz-transition: background-color .5s ease, box-shadow .5s ease, color .75s ease; 
	-ms-transition: background-color .5s ease, box-shadow .5s ease, color .75s ease; 
	-o-transition: background-color .5s ease, box-shadow .5s ease, color .75s ease;  
	transition: background-color .5s ease, box-shadow .5s ease, color .75s ease; 
	}
.js .orb{position: relative; display:block;}
.orb:hover{ 
	background:hsla(38, 22%, 90%, .6) !important;
	box-shadow: inset 0 0 .2em hsla(89, 12%, 62%, .4),
			inset 0 -.6em 1.2em hsla(89, 12%, 72%, .2);
	}
.js .orb {height:.1em; width:.1em;}
.orb a{z-index:9999; width: 5.7em; text-align:center;
	height:1.2em; line-height:1.2em; margin:0 auto; display: inline-block; 
	font-size: 1.4em; text-transform: uppercase; padding:0px .2em; margin:-0.1em auto;
	-webkit-transition: color .75s ease; 
	-moz-transition: color 1s ease; 
	-ms-transition: color .75s ease; 
	-o-transition: color .75s ease;  
	transition: color .75s ease; 
	}
/*@-moz-document url-prefix() {
	.orb a{	
	padding-top:0px;
	}
}*/
.js .orb a{opacity:0;}
.orb:hover > a{ color: hsla(7, 2%, 20%, .8) !important;
	text-shadow: 0 0 .17em #fff;
	}
#hnav0{left:36%;top:1px;}
#hnav1{left:21%;}
#hnav2{left:11%;}
#hnav3{left:4%;}
#hnav4{left:0px;}

	
/*=====COLOR CHANGING FOREGROUND ELEMENTS==================================== */	
.changeHues{
	color: #1a1a1a;
	color: white; 
	background-color: hsla(10, 70%, 10%, .7); 
	}
.changeHues a{color:white; text-shadow: 0 0 .2em #FFF9C2;}

/* ===========================================================================
   ALL Main Content
   ========================================================================== */
#mainContent{z-index:-1; 
	width: 100%; display: block;
	}
.js  #mainContent{position: absolute; top:160px;}
article > * {padding:0 1.2em 0 1.9em;}
article p:last-child {padding-bottom: 1.4em;}
article a:hover{text-shadow: 0px 0px .2em #fff;}


/* ===========================================================================

			HOME 			HOME 			HOME 			HOME 
   ========================================================================== */
.js #homeBack{
	z-index:-100;
	position: absolute; top:0; bottom:0;
/*	background-color:#9abde0 ; */
	background: hsla(30, 9%, 96%, 1);	
	height: 100%; width:100%;
	vertical-align: top; 
	border-radius:1%;
	box-shadow: inset 10px -20px 70px hsla(0, 0%, 0%, .3), -2px 10px 10px hsla(0, 0%, 0%, .2); 
}
#earthSpace{
	z-index:-55;
	opacity:1;
	display:none;
	position:absolute; top:0px; bottom:0;	
	vertical-align: center;
	height:100%; width:100%;
	background-image: url('../img/horseheadsm.jpg');
	background-repeat:repeat;
	background-size:;
	background-position:0% center;
	animation:space 100s linear infinite;
	-moz-animation:space 100s linear infinite;
	-webkit-animation:space 100s linear infinite;
}
@keyframes space{
	0%{background-position:0% 0%;}
	100%{background-position:100% 20%;}	
}
@-moz-keyframes space{
	0%{background-position:0% 0%;}
	100%{background-position:100% 20%;}	
}
@-webkit-keyframes space{
	0%{background-position:0% 0%;}
	100%{background-position:100% 20%;}	
}

.sunshine{display:none; overflow:visible;
	position:absolute; top:-500px; left:2%;
	margin: auto 0 0 -10%; z-index:-1;
	height: 1024px; width:100%;
	background-position: -1000px 0px;
	background-repeat: no-repeat;
	background: -moz-radial-gradient(center, ellipse cover, rgba(250,249,255,1) 1%, rgba(255,255,255,1) 8%, rgba(255,254,251,1) 9%, rgba(255,245,191,0.71) 25%, rgba(255,225,178,0.21) 53%, rgba(249,197,173,0) 65%, rgba(242,168,167,0) 77%, rgba(242,168,167,0) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(250,249,255,1)), color-stop(8%,rgba(255,255,255,1)), color-stop(9%,rgba(255,254,251,1)), color-stop(25%,rgba(255,245,191,0.71)), color-stop(53%,rgba(255,225,178,0.21)), color-stop(65%,rgba(249,197,173,0)), color-stop(77%,rgba(242,168,167,0)), color-stop(100%,rgba(242,168,167,0))); 
	background: -webkit-radial-gradient(center, ellipse cover, rgba(250,249,255,1) 1%,rgba(255,255,255,1) 8%,rgba(255,254,251,1) 9%,rgba(255,245,191,0.71) 25%,rgba(255,225,178,0.21) 53%,rgba(249,197,173,0) 65%,rgba(242,168,167,0) 77%,rgba(242,168,167,0) 100%); 
	background: -o-radial-gradient(center, ellipse cover, rgba(250,249,255,1) 1%,rgba(255,255,255,1) 8%,rgba(255,254,251,1) 9%,rgba(255,245,191,0.71) 25%,rgba(255,225,178,0.21) 53%,rgba(249,197,173,0) 65%,rgba(242,168,167,0) 77%,rgba(242,168,167,0) 100%); 
	background: -ms-radial-gradient(center, ellipse cover, rgba(250,249,255,1) 1%,rgba(255,255,255,1) 8%,rgba(255,254,251,1) 9%,rgba(255,245,191,0.71) 25%,rgba(255,225,178,0.21) 53%,rgba(249,197,173,0) 65%,rgba(242,168,167,0) 77%,rgba(242,168,167,0) 100%); 
	background: radial-gradient(center, ellipse cover, rgba(250,249,255,1) 1%,rgba(255,255,255,1) 8%,rgba(255,254,251,1) 9%,rgba(255,245,191,0.71) 25%,rgba(255,225,178,0.21) 53%,rgba(249,197,173,0) 65%,rgba(242,168,167,0) 77%,rgba(242,168,167,0) 100%); 
}

.js #home {
	z-index:-20;
	height:600px;width:100%; 
	margin: 0; }
.js #home{	position: absolute; top:-170px;}
h2.flashIn{
	display:none; z-index:9999;
	position:absolute; top:230px; 
	width:100%; text-align:center; 
	color:white;font-size:9em;
	font-weight:normal;
	opacity:.8;}
#home p{font-size: 1.2em/1.2em; padding: 0;margin: .2em; color: #1a1a1a;}
#home .text{position:relative; top:-46px; width:100%; margin:0 auto -100px; display:inline-block; font-size:.8em; text-align:center;}
.js #home .text{position:absolute; display:none;font-size:16px;}
.js #home .left{top: 420px;}
.js #home .right{top: 510px;}
.js .text{display:none;}
#home span{font-style: italic;}
.js #planetBase{
	height: 600px;
	text-align: center;
}
.js #planet{z-index:1000;
	position:relative; top: -600px;
	display:inline-block;
	vertical-align: middle;
	height:60px; width:60px;
	background: url("../img/Earth600.png") center no-repeat;
	border-radius:50%; 
	box-shadow: inset 0px -40px 70px hsla(0, 0%, 0%, .4),
		inset 0px -10px 8px hsla(0, 0%, 0%, .4),
		0 0 20px hsla(190, 30%, 90%, .3);		
}
.popup{position:absolute; opacity: .8; font-size: 8px;}
#planetPop{display:none; top:336px; left:0%; color: #893908; margin-left: -1%; height: 20px; width: 100%;}
.js #planetShadow{ 
	display:inline-block;
	vertical-align: middle;
	height: 1px;  width: 20px; 
	margin: 0 auto;
	opacity:0;
	border-radius: 50%; 
	box-shadow: 0px 100px 8px 5px hsla(0, 0%, 0%, .7);
	position:relative; top: -72px; left: -44px;}

/*centers the planet veritically*/
.js #planetBase:before {
	content: '';
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */
}

/* ===========================================================================
   SPECTRUM / info page
   ========================================================================== */

.js #spectrum{display:none;}
#spectrum{position: relative;width:100%; font-size:16px;}
#spectrumNav{display:none;
	margin:0px auto 20px; width: 374px; height: 100px; line-height:100px;
	text-align:center; position: relative; z-index: 9999;
	border-radius: 55px;
	box-shadow: inset -2px -10px 25px hsla(0, 0%, 0%, .2);
	}
.js #spectrumNav{display: inherit;}	
#spectrumNav a{ 
	font-size:12px;
	height: 60px; width: 60px; display: inline-block; 
	vertical-align:center; margin:9px 2px; line-height:60px; 
	text-shadow:0 2px 25px white; letter-spacing: 0px;
	border-radius: 50%;
	box-shadow: inset -1px -20px 30px hsla(0, 0%, 0%, .6),
		inset 0px -2px 3px hsla(0, 0%, 0%, .38); 
	-webkit-transition: font-size 1s ease, height 1s ease, width 1s ease, opacity 1s ease, line-height 1s ease;  
    -moz-transition: font-size 1s ease, height 1s ease, width 1s ease, opacity 1s ease, line-height 1s ease;  
    -o-transition: font-size 1s ease, height 1s ease, width 1s ease, opacity 1s ease, line-height 1s ease;    
    -ms-transition: font-size 1s ease, height 1s ease, width 1s ease, opacity 1s ease, line-height 1s ease;   
    transition: font-size 1s ease, height 1s ease, width 1s ease, opacity 1s ease, line-height 1s ease;  
	}
#spectrumNav a:hover{height:80px; width:80px; font-size: 20px;  opacity:.9; line-height:80px;
	}
.js .spectrumSlide{height:; width:1000%;  margin:0px 0 0 0; padding:0; border:0;}
#spectrum article{
	position:relative;
	margin:60px auto 0;
	height:240px; width:100%; 
	background: hsla(0, 0%, 80%, .1);
	background-position:-200% 0;
	vertical-align: top; 
	box-shadow: inset 10px -20px 70px hsla(0, 0%, 0%, .3), -2px 10px 10px hsla(0, 0%, 0%, .2); 
	border:0; border-radius: 25px; overflow:hidden;
	}
.js #spectrum article{ width:7.5%; margin: 1px 12.46% 0 0; display:inline-block; padding:0;}
.js #spectrum article:last-child{margin:0;}
.spectrumImg{float:left; margin: 25px 3% 10px 0; height: 84px; width: 84px;
	z-index: 9000; position:relative;}
.spectrumImg img{height: 100%;margin: 0;}	


#spectrum h1{color: #893908; opacity:.6; font-size: 1.4em;margin-bottom:.5em;}
#spectrum p {opacity: .8; font-size:1em;margin-bottom:.7em;}
/*.badge{display:block; 
	float:right;
	position:relative;
	margin:20px;
	height:100px; width:50px;
	x-webkit-transform: rotate(-18deg);
	-moz-transform: rotate(-18deg);
}
.badge{margin: 0 20px;font:10px/9px Futura, Arial, Sans;}
.badge span{ 
	z-index:420; zoom:1;
	color:#fff;
	text-align:center;
	background:;
	position:absolute;
	text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 1);
	x-webkit-transform: rotate(-18deg);
	x-moz-transform: rotate(-18deg);
}
.badge span:before, .badge span:after{
	content:"";
	display:block;
	z-index:-41; zoom:1;
	height:36px; width: 24px;
	position:absolute; top:-4px; right:px;
	background: #BA0F00;
	border-radius: 15px 15px 0 0;

}
.badge span:before{
	left:12px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	box-shadow: -2px 2px 3px hsla(0, 0%, 0%, .4);
}
.badge span:after{
	left:22px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .4);
}*/
#sec4 p{font-size:;}
#sec4 .spectrumImg{height: 100px;width:100px;}
#sec1 img, #sec4 img{border: solid #E5E5E5 2px;}

/* ===========================================================================
   SPECTRUM CONTROL sidebar
   ========================================================================== */
aside{display:none;}
.js aside{
	display: inherit;
	position: absolute; 
	top:-1000px; right:3%;
	height: 400px; width: 18%; 
	border-radius: 25px;
	}
#sidebar{
	height:400px; width: 100%; opacity:.9;
	background: hsla(35, 29%, 90%, .7); padding: 40px 0;
	border-radius: 200px 200px 25px 25px;
	box-shadow: inset -1px -4px 12px hsla(14, 25%, 11%, .9),
		inset -60px -25px 93px hsla(10, 29%, 16%, .9), 
		0px 10px 10px hsla(0, 0%, 0%, .25);text-align: center;
	 }
aside:hover #sidebar:after{
	content:"";
	position:absolute; top:-190px; left:48%;
	display:block;
	height:200px;width:200px; margin-left:-100px;
	border-radius:50%;
	background-image: -ms-radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: -moz-radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: -o-radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, #FEFFF7), color-stop(1, hsla(0, 0%, 100%, .0)));
	background-image: -webkit-radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%);
	background-image: radial-gradient(center, ellipse contain, #FEFFF7 0%, hsla(0, 0%, 100%, .0) 100%); z-index:1;

}
aside:hover .controlPanel:after{z-index:;
	content:"Customize spectrum and texture to match your focus.";
	position:absolute; top:-412px; left:50%;
	height:80px;width:120px; margin-left:-62px;
	color:#893908; opacity:.8;
	font-size: 12px; line-height:12px;
	border-radius:50%;
}
.controls{
	margin: 6px auto 0; letter-spacing: 1px; 
	color: hsla(22, 52%, 30%, .8); text-shadow: 0 0 3px hsla(0, 0%,100% .1);}
#huesBox{
	margin: 8px auto; width:80%; 
	padding: 6px 2% 26px;
	border: 1px solid hsla(0,0%,0%,.28);
	box-shadow: inset -2px -10px 30px hsla(0, 0%, 0%, .3);
	border-radius: 15px; 
	}
#huesBox .slider {
	width: 3%; height: 180px; display:inline-block; 
	background: hsla(0,0%,0%,.36);
	margin: 5%; border: 1px solid hsla(0, 0%, 0%, .25); 
	box-shadow: 1px 3px 1px hsla(30, 10%, 100%, .3), -1px -2px 2px hsla(195, 10%, 10%, .5);
	}
#huesBox .slider .ui-slider-range{ 
	background: #b5bdc8; /* Old browsers */
	background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); 
	background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); 
	background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); 
	background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); 
	background: linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); 
	opacity: .9;
	}
#huesBox .slider .ui-slider-handle { 
	width: .8em; height:.8em; 
	border:0; margin-left:-1px;
	box-shadow: inset -3px -3px 10px hsla(360, 20%, 0%, .7);
	background:#6D5450;
	border:solid #444 1px;
	border-radius: 100%;
	box-shadow:inset -3px -3px 10px hsla(18, 95%, 3%, .5);

	}
#reset{position:relative; top:-37px;
	height: 18px; width:80px; margin: 3px auto -26px; 
	font-size: 12px; opacity:.9;
	border-radius:15px;
	box-shadow: inset 0px 0px 4px hsla(180, 95%, 3%, .3);}


.controlPanel{
	height:; width:100%;
	position:relative; z-index:4000;
	display:inline-block;
	text-align:center; 
	margin: 2px auto;
	border-radius:12px;
	}
.controlButton{opacity:.88;
	display:inline-block; 
	vertical-align:middle; margin:.08em;
	background:#564D4A;
	box-shadow:inset 0px 0px 2px hsla(180, 95%, 3%, .9); border-radius:50%;
	}
.controlButton .button{ 
	height: .9em; width: .9em;
	margin:.1em;
	background:#6D4334;
	border: 1px solid #222;
	border-radius: 50%;
	box-shadow:inset 0px 0px 5px hsla(18, 95%, 3%, .9);
	opacity:.9; 
	}
.controlButton:hover .button{background:#AA2220;}
.controlButtonActive{ 
	background:#EFEFBF !important; 
	box-shadow: inset 0px 0px 3px hsla(39, 42%,1%, .0)
		inset 0px -4px 7px hsl(89, 62%, 72%, 0), 
		inset 0px 0px 3px hsla(39, 32%,5%, 0),
		0px 0px 01px hsla(0, 0%, 0%, .6) !important; 	
	}
#texture{
	z-index:-1000;
	opacity:.36; display:block;
	position:absolute; top:0px; bottom:0;
	vertical-align: center;
	height:120%; width:100%;
	}
.swatch {
	content:"";z-index:6;
	display:none; margin-left:-50px;
	position:absolute; top:-450px;left: 48%;
	height:100px;width:100px;
	border:2px solid #c1c1c1; border-radius:50%;
	background-position: center top;
	background-repeat:repeat;
	opacity:.36;
	}
#swatchBase{
	z-index:5;
	display:none;
	position:absolute;z-index:-1;
	margin-left:-50px; top:-450px;left: 48%;
	height:100px;width:100px;
	border:2px solid #fff; border-radius:50%;
	background:#fefefe;opacity:.9;
	}

.txtr1{
	background-image: url('../img/txtr1.jpg');
}
.txtr2{
	background-image: url('../img/txtr2.jpg');
}
.txtr3{
	background-image: url('../img/txtr3.jpg');
}
.txtr4{
	background-image: url('../img/txtr4.jpg');
}
.txtr5{
	background-image: url('../img/txtr5.jpg');
}

/* ===========================================================================
   VISION / imagination vista
   ========================================================================== */
#vision{ 
	margin:10px -25px auto; 
	height: 460px; width: 100%;
	margin:100px auto;
	background: hsla(0, 0%, 100%, .4); 
	border-radius: 30px;
	box-shadow: inset 0px -5px 10px hsla(0, 0%, 0%, .3), 
		0px 10px 13px hsla(0, 0%, 0%, .2);
}
.js #vision{display:none;
	margin:10px auto;
	position:absolute;	
}
.spaceScape{ position:relative;}
.js .spaceScape{d isplay:none;
	}
.spaceScape{ 
	height:420px; display:block;
	border-radius: 20px; margin: 20px;  
	background: black url('../img/space.jpg') 0 0 repeat-x;
	box-shadow: 0px -2px 6px hsla(0, 0%, 0%, .4); 
}
#vision *{color: #F9F7ED !important; }
#vision h1{}
#vision p{font: 14px lucida, futura, sans serif; }
.spaceScape div{position: absolute; width: 250px;}
#imaginationLeft{width: 200px;}
#imaginationRight{bottom: 0; right: 0;}
.moveable{position:absolute;bottom:0; left:0; }


/* ===========================================================================
   INNOVATE / services and products
   ========================================================================== */

.js #innovate{display:none;}
#innovate {width:100%; position: relative;margin: 0 auto 240px; }
.js #innovate {margin: 0 auto;}
#innovate > h1{height:; width:100%;  font: 10em impact, sans; opacity: .5; text-shadow: 0 0 10px hsla(0, 0%, 0%, .14); text-align: center;}
.js #innovate > h1{position: absolute; top: -60px; color: #fff;}
#innovate > h2{position: relative; top:400px; width: 100%; text-align:center; color:#893908;}
#innovate p{font-size:.9em; color:#1a1a1a;}
.js #innovate > h1, .js #innovate > h2{display:none;}
#innovate .products h1{margin: 4px auto 10px;}
#innovateRap {position: relative; top: 10px; margin:0 auto;
height:200px;}
#innovate article{
	display: inline-block; 
	width: 20%; margin:0;
	color:#444 !important;
	background: hsla(0, 0%, 100%, .5); 
	border-radius: 30px;
	box-shadow: inset 10px -25px 80px hsla(0, 0%, 0%, .4), 0px 10px 10px hsla(0, 0%, 0%, .3); 
	behavior: url('PIE.htc');
}
.prodRap{margin: 20px 5% 0px 10%; padding:0;}

#innovate article{position:absolute;}
.js #innovate article{display:none;}
#innovate article:nth-of-type(1){left:-2%;top:17px;}
#innovate article:nth-of-type(2){left:19%;top:4px;}
#innovate article:nth-of-type(3){left:40%;top:0px;}
#innovate article:nth-of-type(4){right:19%;top:4px;}
#innovate article:nth-of-type(5){right:-2%;top:17px;}


/* ===========================================================================
   CONNECT / contact page
   ========================================================================== */
#connect{ height:350px; width: 100%; margin: 10px auto 50px;}
.js #connect{ position: absolute; left: -2000px; top:20px; }
#contact-form { 
	position:relative; margin: 0; padding:0;
	height: 348px; width: 100%;
	font-family: impact, sans serif;
	background-color:hsla(57, 43%, 93%, 1);
	background:  #ECECDD url('../img/shine.png') no-repeat -300% 0;
	border-radius:70px;  
	box-shadow: inset 0px 0px 3px hsla(0, 0%, 0%, .4),
		inset -50px -50px 160px hsla(0, 0%, 0%, .2),
		inset 50px 70px 160px hsla(0, 0%, 0%, .1);
	-webkit-transition: background-position 1s linear;
	-moz-transition: background-position 1s linear;
	}
#contact-form:hover{
	background-position: 300% 0;
	}
#contact-form * { border: 0;}  
div.contactDivider{ width: 2.5%; height:180px;
	margin:85px 3%; border-radius: 10px; 
	box-shadow: inset 4px 0px 12px hsla(0, 0%, 0%, 1),
		inset -4px -0px 12px hsla(0, 0%, 0%, 1);
	behavior: url('PIE.htc');
	}
div.contactDivider.right{float:right;}
form > div {display:inline-block; vertical-align: top;}
#contact-form h1 {font:32px futura;}  
#contact-form .required {color:red;}	



/*======  LEFT FIELDS  ====================================*/
#contactLeft{width: 36%; margin-right:3%; }
#contactLeft label {display:block;margin: 8px 0 0 5px;}
#contact-form input,  #contact-form select {
	width:100%; height: 26px;
	font-size: 16px;
	padding:4px 8px 0px;  
	background: hsla(39, 20%, 88%, 1);
	border-radius:12px;
	box-shadow: inset 0px -0px 12px hsla(89, 12%, 72%, .4),
		inset 0px -10px 24px hsla(89, 12%, 72%, .0),
		0px 0px 01px hsla(0, 0%, 0%, .6);
	behavior: url('PIE.htc');
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	}
#contact-form select{height: 28px; width:100%; padding: 5px;}

/*==========  TEXT BOX   ==============================*/
#contactRight{width: 42%; margin: 0;}
#contactRight label {display:block;margin: 39px 0 0 5px;}
#formText{position: relative; height: 190px;}
#contact-form textarea, #success{
	position: absolute;
	height:190px; width:100%; 
	background: hsla(39, 20%, 88%, 1);
	resize: none; 
	border: none;
	border-radius:12px;
	box-shadow: inset 0px -56px 50px hsla(39, 40%, 72%, .28),
		0px 0px 01px hsla(0, 0%, 0%, .6);
	behavior: url('PIE.htc'); 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	}
#contact-form textarea,#success p{ padding:5px 10px !important;
	font-size: 16px; padding: 0 5px;}
#success{position: absolute; z-index:9999; display:none;}
/*==========  Focus HIGHLIGHT   ==============================*/
#contact-form *:focus { border: 0;
	background-color: #fff;  
	box-shadow: inset 0px -20px 24px hsla(89, 62%, 70%, .28),
		inset 0px -0px 8px hsla(39, 42%, 60%, .62),
		0px 0px 01px hsla(0, 0%, 0%, .6);
	}
#contact-form textarea:focus, #success {
	z-index: 9000;
	background-color: #fff; 
	box-shadow: inset 0px -56px 50px hsla(89, 62%, 72%, .28), 
		inset 0px -0px 8px hsla(39, 42%, 60%, .66),
		0px 0px 01px hsla(0, 0%, 0%, .6);
	}
/*========   SUBMIT   ====================================*/
 
#submitBox{text-align: right !important; position: relative; right:0px;  
}
#connect #submit-button {position: relative;right: 12px; top: 0px;
	height: 40px; width: 40px;  
	margin: 16px -8px 0 0px;
	color: white; text-shadow: 0 0 2px white;
	background: url('') hsla(100, 85%, 40%, 1) no-repeat center;
	border-radius: 50%;
	box-shadow: inset 0px 0px 14px hsla(180, 95%, 3%, 1), 0 0 2px hsla(195, 0%, 0%, 1);
	-moz-transition: background 1s ease;
}
#connect #submit-button:hover {
	background: url('') hsla(100, 99%, 60%, 1) no-repeat center;	}  
#connect #submit-button:active {  
	position:relative;  top:1px;
	}  
#req-field-desc{font: 1.15em Impact !important; color:#555!important;position: absolute;  right:50px; bottom: -19px;}
#goBase{
	border-radius:50%; 
	box-shadow: inset 0 0 2px hsla(0, 0%, 0%, 1), -1px 2px 2px hsla(0, 0%, 100%, .1), 1px -1 2px hsla(0, 0%, 0%, .2) ; 
	background-color: hsla(2, 0%, 5%, .8); 
	width: 80px; height:80px;
}




/*========   FORM ACTION   ====================================*/


#contact-form #loading {  
	width:32px;  
	height:32px;  
	background-image:url(../img/loading.gif);  
	display:block;  
	position:absolute;  
	left:-12px;  
	top:36x;  
	display:none;
	}  
#errors {
	z-index:9999;
	display:none; 
	height:200px; width:66%;  
	position: absolute; top:30px; left: 10%;
	color: white; font: 20px Futura, Arial, Sans;
	padding:25px; 
	border-radius:20px;  
	background:hsla(0, 0%, 0%, .8) url(../img/cancel_48.png) no-repeat top right;   
	}  
#errors li {padding:2px;list-style:none; }  
#errors li:before {content: ' - ';}  
#errors #info {font-weight:bold;  }  
#errors #info:before { content: ''; }  
#errors.visible, #success.visible { display:block; }
 
/* Normalize placeholder styles */  
::-webkit-input-placeholder {  
    color:#CCC; font-style:italic;  
}  
input:-moz-placeholder, textarea:-moz-placeholder {  
    color:#CCC; font-style:italic;  
}  
input.placeholder-text, textarea.placeholder-text  {  
    color:#CCC; font-style:italic;  
}

/* ===========================================================================
   Footer
   ========================================================================== */

footer{
	height: 74px; width: 100%;  
	margin: 0 0px 50px 0px;
	font-size: 20px; 
/*	-moz-border-radius: 30px;*/
	border-radius: 30px;
/*	-moz-box-shadow: inset 10px -25px 80px hsla(0, 0%, 0%, .9), 0px 20px 10px hsla(0, 0%, 0%, .3); 	*/
	box-shadow: inset 10px -25px 80px hsla(0, 0%, 0%, .9), 0px 20px 10px hsla(0, 0%, 0%, .3); 
	}
.js footer{
	z-index:2500; display:none;
	position: absolute; top:1200px;
}
#innerFoot{
	height:60px; margin: 7px; 
/*	-moz-border-radius: 22px;*/
	border-radius: 22px;
/*	box-shadow: inset -0px 10px 30px hsla(0, 0%, 0%, .3);  */ }
#innerFoot > *{
	position: relative; 
	display:inline-block;
	margin:4px 4px 4px 25px; vertical-align:top;
	padding: 0;
	text-shadow:0px 1px 2px hsla(0, 0%, 0%, .1); 
	}
/* ===============================================*/
#leftFoot{ line-height: 23px;}
#myName{position: relative;
	z-index: !important 9003;
	font:20px/18px; 
	letter-spacing:8px;
	text-transform: uppercase;
	margin:6px 0 0;text-shadow: ;
	text-shadow:
		1px 2px 0px hsla(0, 0%, 0%, .4),
		2px 3px 1px hsla(0, 0%, 0%, .3); }
#myLoc{
	z-index: !important 9000;
	font-size: 14px;
	letter-spacing:4px;
	margin: -2px 20px; z-index: 2;
	text-shadow: 0px 0px 1px hsla(0, 0%, 90%, .4),
		2px 2px 2px hsla(0, 0%, 0%, .5); }
/* ===============================================*/
#middleFoot{
	position: absolute;  right: 25%;
	width: 50%; 
	text-align: center;  
	border-radius: 15px; }
#caption{display:none;

	margin: 11px 60px;
	font:12px/12px lucida console, sans; font-style:; 
	}
#caption span{
	position: absolute; right: 25%; bottom: -3px;
	width: 50%; }
/* ===============================================*/
#rightFoot{float:right; margin-right:1%;
	width: 21%; line-height:12px;
	font-size: 10px !important;
	text-align:center; 
font-family: 'Zrnic Regular', 'Zrnic', Lucida Sans Unicode, Sans serif;
}
#myTel{text-transform:lowercase;
	font-size: 20px; color:#c1c1c1; 
	letter-spacing:4px;
	margin:12px 0px;
	text-shadow:1px 2px 2px hsla(0, 0%, 0%, .7);}
#myEmail a{text-align:center;display:block;
	font-size: 13px !important; width: 140px;
	padding:0px 0 0;
	color:#dbdbdb; 
	letter-spacing:1px;
	margin:-1px auto;opacity:.9;
	text-shadow:1px 1px 1px hsla(0, 0%, 50%, .7);}
#resume, #resume a{
width:140px;
display:block; margin:0 auto;
padding:1px 5px 1px;
letter-spacing:4px;
text-transform:uppercase;
display:none;
}
footer a:hover{background:#FFF9C2;
color: #000 !important;
}

/* ===========================================================================
   Screens and Devices
   ========================================================================== */

@media screen and (max-width: 1400px) {
	body, #spectrum p{font-size:94%;}
	#candyWrapper{width:90%;}
}
@media screen and (max-width: 1200px) {
	body, #spectrum p{font-size:90%}
}
@media screen and (max-width: 1060px) {
	body, #spectrum p{font-size:82%;}
}
@media screen and (max-width: 900px) {
	body, #spectrum p{font-size:78%;}
}
@media screen and (max-width: 820px) {
	body, #spectrum p{font-size:75%;}
	#spectrumNav{margin:0px 10% 20px;}
}
@media screen and (max-width: 700px) {
	body, #spectrum p{font-size:72%;}
	#spectrumNav{margin:0px 6% 20px;}
}
@media screen and (max-width: 640px) {
	body, #spectrum p{font-size:68%;}
	#candyWrapper{width:92%;}
	#spectrumNav{margin:0px 4% 20px;}
}
@media screen and (max-width: 580px) {
	body{font-size:66%; width:580px;margin;auto;}
	#candyWrapper{width:94%;}
	#spectrumNav{margin:0px 3% 20px;}
}
@import url("css/mobile.css") only screen and
(max-device-width:480px);