/*------------------------- Layout styles ------------------------*/ 
body{
	margin:0;

	
}
.page{
height:600px;
overflow-x:auto;overflow-y:hidden;
	/*background:url(../images/bg-header.jpg) no-repeat center top;*/
}

/*------------------------- Font ------------------------*/ 
@font-face {
    font-family: 'RokkittRegular';
    src: url('fonts/rokkitt-regular-webfont.eot');
    src: url('fonts/rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/rokkitt-regular-webfont.woff') format('woff'),
         url('fonts/rokkitt-regular-webfont.ttf') format('truetype'),
         url('fonts/rokkitt-regular-webfont.svg#RokkittRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face2 {
	font-family: 'GillSans-Light';
	src: url('fonts/GillSans-Light.eot');
	src: url('fonts/GillSans-Light.woff') format('woff'), url('fonts/GillSans-Light.ttf') format('truetype'), url('fonts/GillSans-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*------------------------- Header ------------------------*/ 
#header{
	/*background:url(../images/bg-navigation.jpg) no-repeat center 90px;*/
	width:100px;
	margin:30px 0 0 50px ;
	height:400px;
	padding:36px 50px 50px 50px;/*this is the padding above header nav*/
	position:fixed;
	top:0px;
	left:0px;
	z-index:1000;
}
#header a#logo{
	width:207px;
	height:17px;
	position:fixed;
	z-index:2000;
	display:block;
	float:left;
	outline:none;
}
#header a#logo img{
	width:207px;
	height:17px;
	border:0;
}
#header ul{ /*the whole menu*/
	
	list-style:none;
	float:left;
	display:block;
	margin:0px 0px 0 -200px;
	padding:75px 30px 0 200px  ; 
	background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));
	background: -webkit-linear-gradient(left,rgba(255,255,255, .8),rgba(255,255,255, .8));
	width:170 px;
	height:600px;
	


}
#header ul li a{
	position:inherit;
	top:0px;
	left:0px;
	float:left;
	display:block;
	background:black;
	width:90px;
	padding:10px 20px 5px 20px;
	margin:.5px 30px .5px 0px;/*padding between the navigation words: home, about, blog*/
	font-size:12px;
	text-decoration:none;
	/*color:#5e5e5e;*/
	color:white;
	font-family: 'RokkittRegular';
	font-weight: bold;
	outline:none;

}
#header ul li a:hover, #header ul li.selected a{
	color:#00a5f7;
	cursor:pointer;
}


#header ul li a.headerOne{
width:50px;
height:0px;

}
#header ul li a.headerTwo{
width:50px;
height:0px;
}
#header ul li a.headerThree{
width:50px;
height:0px;
}
#header ul li a.headerFour{
width:50px;
height:0px;
}





#theWholeThang{
margin:10px 0 0 0;
}

@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}

#gifsContainer{display:none;}


#CSSswitcher{
position:fixed;
  z-index: 5000;
top:420px;
left:50px;
}
#CSSswitcher2{
position:fixed;
  z-index: 0;
top:420px;
left:50px;
}
#CSSswitcher input {
padding:0px 0 0;
margin:0px auto 0;
width: 70px;
height:70px;
border-radius: 50%;
border:0;
color:white;
font-size:26px;
font-family: 'gill sans';
font-weight: lighter;
cursor:pointer;	
/*background-image:url(../images/eyeball3.gif);
background-repeat:no-repeat;
background-size:100% 100%;*/
  background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
  background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
  background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
 
  -webkit-animation-name: spin; 
  -webkit-animation-duration: 5s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: linear;

  -moz-animation-name: spin; 
  -moz-animation-duration: 5s; 
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: linear;

  -ms-animation-name: spin; 
  -ms-animation-duration: 5s; 
  -ms-animation-iteration-count: infinite; 
  -ms-animation-timing-function: linear;
}

#CSSswitcher input:hover {
background:url(../images/eyeball.gif);
background-repeat:no-repeat;
background-size:100% 100%;
}

#CSSswitcher2 input {
padding:0px 0 0;
margin:0px auto 0;
width: 70px;
height:70px;
border-radius: 50%;
border:0;
color:white;
font-size:26px;
font-family: 'gill sans';
font-weight: lighter;
cursor:pointer;	
  background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
  background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
  background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
 
  -webkit-animation-name: spin; 
  -webkit-animation-duration: 5s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: linear;

  -moz-animation-name: spin; 
  -moz-animation-duration: 5s; 
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: linear;

  -ms-animation-name: spin; 
  -ms-animation-duration: 5s; 
  -ms-animation-iteration-count: infinite; 
  -ms-animation-timing-function: linear;

}

#CSSswitcher2 input:hover {

background:url(../images/eyeball.gif);
background-repeat:no-repeat;
background-size:100% 100%;

}



/*------------------------- Body ------------------------*/ 
.body{
	height:400px;
	width:3000px;
	display:block
	float:left;
	margin:0px auto;
	padding:10px 10px;
	overflow:hidden;

	
}
#content{
margin-top:115px;
}
.body p{
	color:#5d5d5d;
	font-family: 'RokkittRegular';
	font-weight:lighter;
	font-size:16px;
	line-height:40px;
	text-align:justify;
	margin:0;
	
}

.body div#featured{
	/*background:url(../images/featured.jpg) no-repeat right top;*/
	display:none;
	display:block;
	float:left;
	height:400px;
	padding:0 0 17px;
}
.body div#featured h3{ /*this is position of the featured main paragraph*/
	color:#00a5f7;
	font-size:20px;
	font-family: 'RokkittRegular';
	margin:0 0 30px;
	padding:100px 0 0;
	font-weight:lighter;
	letter-spacing: 0.0em;

}
.body div#featured p{
	color:#5d5d5d;
	font-family: 'RokkittRegular';
	font-weight:lighter;
	font-size:12px;
	line-height:25px;
	text-shadow: 0 1px 0 #fcfcfc;
	text-align:justify;
	margin:0;
}
.body div#featured input{ /*this positions the button that says Read more "input" tag*/
	background:#f3f4f8;
	border:0;
	float:left;
	display:block;
	padding:0px 0 0;
	margin:25px auto 0;
	width: 108px;
	height:24px;
	
	color:#5d5d5d;
	font-family: 'gill sans';
	font-size:20px;
	font-weight: lighter;
	letter-spacing: 0.305em;
	cursor:pointer;	
}
#introTextOne{display:none;}
#introTextTwo{display:none;}

/****************** GRIDDED PROJECT SUMMARIES ******************/

.body ul.blog{
	list-style:none;

	padding:0 0 0 0;


	margin:42px 0px 0 270px ;
	/*background:url(../images/separator.jpg) no-repeat center top;*/
	overflow:hidden;
}

.body ul.blog li{
	display:block;
	float:left;
	margin:30px 0 0 30px;
	height:240px;
	padding:0;
}
.body ul.blog li:first-child{
	margin:-20px 0 0 0;
}
.body ul.blog li:fourth-child{
	margin:-20px 0 0 0;
}

.body ul.blog li div{

	width:180px;
	height:280px;
	padding: 0px;
	text-align:left;
	float:left;
	margin:0px;
	background:none;
}




.body ul.blog li div a img{
	width:180px;
	margin:0px;
	padding: 0px;
	opacity:0.7;
	filter:alpha(opacity=70);
}

.body ul.blog li div:hover a img{
	filter:alpha(opacity=100);
	opacity:1;
}



.body ul.blog li div p{
	width:180px;
	text-align:justify;
	color:#828081;
	font-family: 'futura, san-serif';
	margin:0px 0 0 0;
	line-height:14px;
	font-size:12px;
	background:none;
	padding:0px;
}



.body ul.blog li div:hover p{
color: black;
}



.body ul.blog li div a:first-child{
	margin:0;
	padding:0;
	background:none;
	width:auto;
}
.body ul.blog li div a:hover{
	color:#00a5f7;
}



.body ul.blog li div a{
	display:block;
	padding:0px;
	margin:0px;
	font-family: 'RokkittRegular';
	color:#5d5d5d;
	font-size:10px;
	font-weight: lighter;
	letter-spacing: 0.305em;
	cursor:pointer;
	outline:none;
}	
.body ul.blog li div input{ /*read more buttons "input" tag*/
	/*background:#f3f4f8;*/
	background:black;
	border:0;
	float:left;
	display:block;
	padding:0px 0 0;
	margin:5px auto 0;
	width: 190px;
	height:20px;
	filter:alpha(opacity=0);
	opacity:0;
	
	/*color:#5d5d5d;*/
	color:white;
	font-family: 'gill sans';
	font-size:10px;
	font-weight:lighter;
	letter-spacing: 0.3em;
	cursor:pointer;	
}
.body ul.blog li div:hover input{
	filter:alpha(opacity=100);
	opacity:1;  
}



.body h3{ /*about section questions*/
display:none;
	font-family: 'GillSans-Light';
	font-size:18px;
	font-weight: lighter;
	color: #00a5f7;
	/*color:#00a5f7;*/
	margin:25px 0px 10px;/*this is the margins around the h3 headers (questions) on the about page and others*/
	line-height:22px;
}
.body p{ /*about answers*/
	width:609px;
	font-family: 'RokkittRegular';
	font-size:12px;
	text-align:justify;
	color:#636363;
	margin:0 0 20px;
	line-height:21px;
}
.body p a{ 
	outline:none;
	color:black;
	text-decoration: none;

}
.body ul{
	list-style:none;
    margin:0;
    padding:0;
	overflow:hidden;
}
.body ul li:first-child{
	background:none;
	padding:50px 0 30px;
}
.body ul li{
	overflow:hidden;
	/*background:url(../images/separator.jpg) no-repeat center top;*/
	padding:30px 0;
}
.body ul li div.featured{
	/*background:url(../images/interface2.jpg) no-repeat 0 -68px;*/
	width:220px;
	height:292px;
	text-align: center;
	margin:0;
}

.body ul li div.featured img{
	margin:10px 0 0 -3px;
	border:0;
}
.body ul li div.featured a:hover{
    filter:alpha(opacity=80);
	opacity:0.8;
}
.body ul li div.featured ul{
	overflow:hidden;
	margin:2px 0 0 10px;
	
}
.body ul li div.featured ul li:first-child{
	margin:0;
}
.body ul li div.featured ul li{
	float:left;
	margin:0 0 0 18px;
	background:none;
	padding:0;
}
.body ul li div.featured ul li a{
	padding:0;
}
.body ul li div.featured ul li a img{
	margin:0;
}
.body ul li div.featured ul li a img:hover{
	filter:alpha(opacity=80);
	opacity:0.8;
}
.body ul li div.featured a{
	clear:both;
	display:block;
	font-size:12px;
	font-family: 'RokkittRegular';
	text-decoration:none;
	color:#8a8889;
	font-weight:bold;
	padding:5px 0 0;
	width:auto;
	outline:none;
}
.body ul li div{
	float:left;
	margin:0 0 0 50px;
	width:609px;
}
.body ul li div input{ /*read more button in the blog section*/
background:#f3f4f8;
	border:0;
	float:left;
	display:block;
	padding:0px 0 0;
	margin:15px auto 0;
	width: 108px;
	height:24px;
	
	color:#5d5d5d;
	font-family: 'gill sans';
	font-size:10px;
	font-weight: lighter;
	letter-spacing: 0.305em;
	cursor:pointer;	
}
.body ul li div h3{/*blog headings*/
	margin:10px 0px 15px;
	font-size:18px;
	font-weight:lighter;
	font-family: 'GillSans-Light';
	color:#00a5f7;
	line-height:30px;

}
.body ul li div h4{/*blog dates*/
	margin:0 0px 15px;
	font-size:12px;
	font-weight:normal;
	font-family: 'RokkittRegular';
	color:#00a5f7;
	line-height:16px;
}
.body ul li div a {/*blog headings that are links*/
	text-decoration:none;    
}
.body ul li div p{/*blog text*/
	
	line-height:24px;
	font-family: 'Arial';
	font-size:12px;
	color:#5D5D5D;
	padding:0 0 5px;/*this is the padding around the block of text in blog page*/
	margin:0px;
}
.body ul.paging{
	display:block;
	float:right;
	margin:15px 0 10px 210px;
}
.body ul.paging li{
	float:left;
	padding:0 5px;
	background:none;
}
.body ul.paging li a{
	text-decoration:none;
	color:#00a5f7;
	font-family: arial;
	font-size:10px;
}
.body ul.paging li a:hover{
	color:#5D5D5D;
}

/*------------------------- Footer ------------------------*/ 
.footer{
	position:fixed;
	top:530px;
	left:80px;
	width:91%;
	height:70px;
	/*background:url(../images/bg-footer.jpg) no-repeat center top;*/

	margin:0 auto;
	overflow:hidden;
	display:block;

}
.footer ul{
	list-style:none;
	margin:0 0 0 0px;
	padding:10px;
	overflow:hidden;
	float:left;
}
.footer ul li:first-child a{
	border:none;
	padding:0 6px 0 0;
	padding:10px;	
}
.footer ul li{
	float:left;
}
.footer ul li a:hover{
	color:#00a5f7;
}
.footer ul li a{
	border-width: 1px;
	border-color:#5b5b5b;
	border-style: none none none solid;
	color:black;
	/*color:#5b5b5b;*/
	font-size:11px;
	font-family: Trebuchet MS;
	text-decoration:none;
	font-weight:bold;
	padding:0 6px;
	outline:none;
}
.footer p{ /*this is the copyright area*/
	display:block;
	float:right;
	padding:20px 6px;
	color:#5b5b5b;
	font-size:11px;
	text-align: right;
	font-family: Trebuchet MS;
	font-weight:regular;
	margin:0px 0 0 0px;
	letter-spacing: 0.1em;
}
.footer p a{ /*this is the copyright area links*/
	color:#5b5b5b;
	letter-spacing: 0.2em;


}
/*.footer div.connect{
	float:left;
	margin:0 0 0 92px;
}
.footer div.connect a{
	float:left;
	outline:none;
}
.footer div.connect a#facebook{
	width:27px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../images/icons.gif) no-repeat;
}
.footer div.connect a#twitter{
	width:36px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../images/icons.gif) no-repeat 0 -48px;
	margin:0 0 0 68px;
}
.footer div.connect a#vimeo{
	width:32px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../images/icons.gif) no-repeat 0 -96px;
	margin:0 0 0 73px;
}*/






            #play_meGreen {
            	position: relative;
            	left: -2px;
            	top: 40px;
                width: 44px;
                height: 50px;
                background-color: #0BD63A;
                color: black;
                font-size: 20px;
                font-weight: bold;
                text-align:center;
                line-height: 50px;
                cursor: pointer;
                -webkit-transform: skewY(30deg);
            }
             #play_meBlue{
            	position: relative;
            	left: 45px;
            	top: -10px;
                width: 39px;
                height: 50px;
                background-color: #0B81D6;
                color: black;
                font-size: 20px;
                font-weight: bold;
                text-align:center;
                line-height: 50px;
                cursor: pointer;
                -webkit-transform: skewY(-30deg);
            }
            #play_meYellow{
            	position: relative;
            	left: 15px;
            	top: -99px;
                width: 52px;
                height: 49px;
                background-color: #F0F719;
                color: black;
                font-size: 20px;
                font-weight: bold;
                text-align:center;
                line-height: 50px;
                cursor: pointer;
                -webkit-transform: rotate(50deg) rotateY(30deg) rotateX(-20deg) 
                	rotateZ(-10deg) skewX(-10deg) skewY(-10deg);
             
            }

            
            
            
    
          
            #videoGreen {
            	position:absolute;
            	left:400px;
            	top:100px;
            	width:150px; 
            	height:150px;
   		        -webkit-transition: all 2s linear;
                -webkit-transform: skewY(30deg);
            }

            
            #videoBlue {
            	position:absolute;
            	left:550px;
            	top:100px;
            	width:150px; 
            	height:150px;
                -webkit-transition: all 2s linear;
                -webkit-transform: skewY(-30deg);
          

            }
	        #videoYellow {
            	position:absolute;
            	left:459px;
            	top:-30px;
            	width:180px; 
            	height:178px;
                -webkit-transition: all 2s linear;
                -webkit-transform: rotate(50deg) rotateY(-30deg) rotateX(20deg) 
                	rotateZ(-10deg) skewX(-10deg) skewY(-10deg);
                
            }
            
            #cube {
            	display:block;
            	position:relative;
            	margin:100px auto;
            
            	 -webkit-transition: all 20s linear;
              -webkit-transform-origin: 550px 145px;
            	 -webkit-animation-timing-function: ease-in;
             
            }
            #cube:hover {

			  -webkit-transform-origin: 550px 145px;
			      -webkit-transform:  rotate(1000deg) scale(3);	

  			 }    
          
          
 	#playCube{
 	position:fixed;
 	right:50px;
 	bottom:200px;
	width:100px;
	height:100px;
display:block;

	
 	}