@CHARSET "UTF-8";

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

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

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

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

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

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

.instruction {font-family: 'Roboto', sans-serif; color: floralwhite; font-size: 1.8em; font-weight: 100;}

body {background-color: #000000; margin: 0; padding: 0; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 15px;
  /* text-shadow: 0 0 0em #000000, 0 0 0.1em #000000, 0 0 0em #000000;
    background-image: url('../images/'); background-repeat: no-repeat; background-position: 50% 0; */
    -webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden; 
}

img {border: 0;}

input, textarea {background: #c8c8c8;}

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  /* width: 100%;
  height: 50px;
  background-color: #00a087; */
}

#parallax_bg { 
	background: url('../images/main_bg.jpg') 50% 0 no-repeat fixed; 
	height: 1850px;  
	margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#mainWrapper {margin: auto; width: 850px; background-color: #fff; background-color: rgba(255,255,255,0.05);
    background: rgb(255,255,255);
    background: transparent\9;
    background: rgba(255,255,255,0.05);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cffffff,endColorstr=#cffffff);
    zoom: 1;
/*  Prevents Flickering  
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden; */
}
#mainWrapper:nth-child(n) {
    filter: none;
}
/* .leftCol {float: left; width: 48px; height: 231px; /* background: url('../images/bracket_l.png') no-repeat center 12px; }  */
#navMain {float: left; width: 850px; height: auto; margin: 0 0 10px 0; position: fixed; top: 0; z-index: 1050; padding-bottom: 10px;
    background-image: url('../images/nav_bg.jpg'); background-repeat: no-repeat; 
}
#navMain nav {font-family: 'futura_bk_btbook'; font-size: 16px; color: #ffffff; 
                    line-height: 32px; padding-left: 0; width: 100%;}
#navMain nav ul {white-space: nowrap; margin-left: 100px;}
#navMain nav ul li {float: left; display: inline; padding: 0 5% 0 0;}
#navMain nav a {color: #ffffff; text-decoration: none;}
#navMain nav a:hover {text-shadow: 0 0 0.2em #ffffbe, 0 0 0.2em #ffffbe, 0 0 0.2em #ffffbe;}
#navMain nav a:active {text-shadow: 0 0 0.8em #ffffbe, 0 0 0.8em #ffffbe, 0 0 0.8em #ffffbe;}
.shadow {
    -webkit-box-shadow: 0px 10px 6px -3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 6px -3px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 6px -3px rgba(0,0,0,0.5);
}
#navlogo {float: left; position: absolute; top: 24px; left: 40px;}
#menu_icon {
	display: none;
	width: 33px;
	height: 33px;
	background: url(../images/menu_icon.png) center;
    text-align: right;
    position: absolute;
    right: 25px;
	top: 13px;
}
.mainGraphic {float: left; width: 100%; height: 347px; margin-left: 0; margin-top: 50px;
              background: url('../images/top_main_graphic.jpg') no-repeat;
              overflow: hidden;}
.mainGraphic img {margin: 7% 0 0 4%;}
#mug { display: none; float: left; margin-left: 20px;}
#render_anim {width: 184px; height: 33px; float: left; margin-left: -1px;}
#flash_anim {width: 124px; height: 33px; float: left; margin-left: -14px;}
#game_dev {width: 177px; height: 33px; float: left; margin-left: -14px;}
#web_dev {width: 184px; height: 33px; float: left; margin-left: -14px;}
#ux_gui {width: 89px; height: 33px; float: left; margin-left: -14px;}
#graphic_design {width: 121px; height: 33px; float: left; margin-left: -14px;}

#MainContentTop {margin-top: 0;}
.navAbout {margin: 0; width: 100%; height: 33px;}
.navAbout .about_tagline {font-family: 'haettenschweilerregular'; font-size: 34px; 
                          color: #726fa9; line-height: 24px; margin-left: 0; padding: 40px 0 40px 0;
                          text-align: center;
                          text-shadow: 0 0 0em #000000, 0 0 0.1em #000000, 0 0 0em #000000;
                          background: url('../images/band.png') center top;
                          background-repeat: repeat-y;}

.maincopy {margin-top: 30px; padding: 40px 60px 30px 60px; color: dimgray;
            text-shadow: none; line-height: 20px; font-size: 14px;
          }
.maincopy a {text-decoration: none; color: #726fa9;}
.maincopy a:hover {text-decoration: underline;}

.navContact {margin: 40px 10px 20px 40px; height: 100%;}
#navPortWrapper {width: 850px;}
.navPort {margin: 0 0 0 10px; width: 825px; height: 33px;}
.navPort-items {font-family: 'futura_bk_btbook'; font-size: 12px; margin: 0 0 0 9px; width: 820px; height: 20px; white-space: nowrap;}
.navPort-items ul {list-style-type: none; margin: 0 0 0 0; padding: 0; }
.navPort-items li {display: inline; color: #ffffff; }
.navPort-items a {text-decoration: none;}

.navPort-items .rendering, .navPort-items .renderingOn {height: 20px; width: 170px; padding: 0; float: left; text-align: center;}
.navPort-items .rendering:hover, .navPort-items .renderingOn {background: url('../images/nav_1a.jpg') no-repeat center center;}
 
.navPort-items .flash, .navPort-items .flashOn {height: 20px; width: 110px; padding: 0; float: left; text-align: center;}
.navPort-items .flash:hover, .navPort-items .flashOn {background: url('../images/nav_2a.jpg') no-repeat center center;}

.navPort-items .game, .navPort-items .gameOn {height: 20px; width: 163px; padding: 0; float: left; text-align: center; }
.navPort-items .game:hover, .navPort-items .gameOn {background: url('../images/nav_3a.jpg') no-repeat center center;}

.navPort-items .webdesign, .navPort-items .webdesignOn {height: 20px; width: 170px; padding: 0; float: left; text-align: center;}
.navPort-items .webdesign:hover, .navPort-items .webdesignOn {background: url('../images/nav_4a.jpg') no-repeat center center;}

.navPort-items .ux, .navPort-items .uxOn {height: 20px; width: 75px; padding: 0; float: left; text-align: center;}
.navPort-items .ux:hover, .navPort-items .uxOn {background: url('../images/nav_5a.jpg') no-repeat center center;}

.navPort-items .graphic, .navPort-items .graphicOn {height: 20px; width: 121px; padding: 0; float: left; text-align: center;}
.navPort-items .graphic:hover, .navPort-items .graphicOn {background: url('../images/nav_6a.png') no-repeat center center;}

.navPort-items-Narrow {display: none;}
.fixed {
	position: fixed; 
	top: 58px; 
	/* height: 70px; */
	z-index: 1000;
    width: 100%;
    background-image: url('../images/nav_bg.jpg'); background-repeat: no-repeat; background-position: 0 38%;
}
#AboutKS3DNote {float: left; margin-left: 0; width: 100%; background-color: white;}
.AboutKSImage {float: left; margin: 30px 30px 30px 0;}
.AboutKSImageWide {display: none;}
#CurrentProjectNote {float: left; margin: 20px 0 0 24px; width: 140px;}
#CurrentProjectNote a {text-decoration: none; color: #726fa9;}
#CurrentProjectNote a:hover {text-decoration: underline;}
.CurrentProjectImage {float: left; margin: -28px 10px 20px 195px; width: 600px;}
.YoutubeWrapper {
    /* float: left; margin: 25px 0 20px 22px; */
    float: left; 
    height: auto; 
    width: 100%; 
    max-width: 240px; 
    margin: 20px 2% 20px 2%; 
    padding: 0 0 0 0;
    text-align: center; 
}
.YoutubeThumbnails {
    /* margin-right: 31px; width: 240px; height: 135px; */
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; 
    padding-left: 0;
    padding-right: 0;
    height: 0; 
    overflow: hidden; 
}
.YoutubeThumbnails iframe {
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    max-width: 240px;
    height: 100%;
    max-height: 135px;
}
.YoutubeThumbs2 {margin-right: 31px; width: 420px; height: 315px;}


/* .YoutubeWrapper {
    float: left;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; height: 0; overflow: hidden;
}
 
.YoutubeWrapper iframe,
.YoutubeWrapper object,
.YoutubeWrapper embed {
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    max-width: 240px;
    height: 100%;
    max-height: 135px;
}
*/


#top_n_bottom {
  background: url('../images/band.png') repeat-y center top; 
  /* height: 26px; */
  font-family: 'futura_bk_btbook'; 
  font-size: 14px; 
  letter-spacing: 6px; 
  margin: 0;
  padding-bottom: 6px;
}
#top_n_bottom .txt {padding: 5px 0 0 22px;}
#mainContent {margin: 20px 0 10px 23px;}
#mainContent img {margin: 0 30px 0 14px;  border-top: 10px solid rgba(175, 175, 175, .1); border-bottom: 1px solid #000000;}
#mainContent .photoshop {margin: 0 5px 0 0;  border-top: 1px solid #202020; border-bottom: 1px solid #202020; width: auto; }
/* #mainContent img:hover {
  opacity: 0.2;
}  */

.contactform {
    width: 100%; 
    max-width: 500px; 
    padding: 5px 0;
    margin-right: 5%;
    text-indent: 5px;
}

#MainFooter {font-size: 11px; color: #cccccc; margin: 10px 0 0 0; text-align: center; height: 30px;}

#GoogleAdsWide {margin-left: 55px; padding-bottom: 50px;}
#GoogleAdsTall {display: none; padding-bottom: 50px;}

.leftColFooter {float: left; width: 48px; height: 72px; /* background: url('../images/bracket_ls.png') no-repeat center top; */}

.co {
  font-size: 9px;
  font-family: verdana;
  font-weight: normal;
}


.fancybox-custom .fancybox-skin {box-shadow: 0 0 50px #222;}

/* .grid-block-container {
	float: left;
	/* width: 990px;
	margin: 20px 0 0 -30px;  
}
.grid-block {
	position: relative;
	float: left;
	width: 154px;
	height: 137px;
	margin: 0 46px 26px 0; 
}
.grid-block h4 {
	font-size: .9em;
	color: #333;
	background: #f5f5f5;
	margin: 0;
	padding: 10px;
	border: 1px solid #ddd;
}

.caption {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
  margin: 1px 0 0 14px;
	background: url(../images/trans-black-50b.png);
	width: 100%;
	height: 100%;
}
.caption h3, .caption p {
	color: #fff;
	margin: 20px;
}
.caption h3 {
	margin: 20px 20px 10px;
}
.caption p {
	font-size: .8em;
	line-height: 1.5em;
	margin: 15px 15px 15px;
}
.caption a.clickable {
	padding: 5px 10px;
	background: #08c;
	color: #fff;
	border-radius: 2px;
	-moz-border-radius: 2px;
	font-weight: bold;
	text-decoration: none;
}
.caption a.clickable:hover {
	background: #fff;
	color: #08c;
}     */

@media only screen and (max-width : 780px) {

body {font-size: 16px;}
#parallax_bg { 
	background: url('../images/main_bg.jpg') 100% 0 no-repeat fixed; 
	height: 2600px;  
	margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#mainWrapper {margin: 0; width: 100%;}
#MainContentTop {margin-top: 0;}



.mainGraphic {float: left; width: 100%; height: 100%; margin-left: 0; 
              background: url('../images/top_main_graphic.jpg') no-repeat;  background-size: 100%;
              overflow: visible;}
.mainGraphic img {margin: 7% 0 7% 35px; width: 38%;}
#navMain nav ul {margin-left: 20%;}
.navAbout {margin: 0 20px 0 0; width: 100%; height: 33px;}
.navAbout .about_tagline {font-size: 32px;  margin-left: 0px; padding: 20px 0 20px 43px; text-align: left;}
.maincopy {margin-top: 30px; padding: 30px 40px 20px 40px;}
#mainContent {margin: 20px 0 10px 0; text-align: center;}
#mainContent img {margin: 0 30px 0 14px;  border-top: 10px solid rgba(175, 175, 175, .1); border-bottom: 1px solid #000000;}
#mainContent .photoshop {margin: 0 5px 0 15px;  border-top: 0px; border-bottom: 0px; width: 100%;}
#mug {display: none;}
#AboutKS3DNote {float: left; margin-left: 0; margin-right: 0; width: 100%;}
.AboutKSImage {display: none; float: none; margin: 30px 0 30px 0; width: 100%; max-width: 360px;}
.AboutKSImageWide {display: block; margin: 30px 0 30px 0; width: 100%; max-width: 640px;}
#CurrentProjectNote {float: left; margin: 20px 0 0 22px; width: 94%;}
.CurrentProjectImage {float: left; width: 95%; margin: 20px 10px 40px 10px;}
.CurrentProjectImage img {width: 100%; height: auto;}
    
.YoutubeWrapper {
    float: left; 
    height: auto; 
    width: 100%; 
    max-width: 240px; 
    margin: 10px 1% 10px 1%; 
    padding: 0 0 0 0;
    text-align: center;   
    
}
/* .YoutubeThumbnails {margin-right: 0; margin-bottom: 15px; width: 100%;} */
    
.YoutubeThumbs2 {margin-right: 0; width: 100%; margin-bottom: 15px;}

.navContact {margin: 30px 10px 20px 20px;}
.navPort {display: none;}
.navPort-items {display: none;}

.navPort-items-Narrow {display: block; font-family: 'futura_bk_btbook'; font-size: 14px; 
                      width: 100%; }
.navPort-items-Narrow ul {list-style: none;  margin: 10px 0 10px 0;  padding-left: 0;}
.navPort-items-Narrow li {color: #ffffff; margin: 0; width: 100%; }
/* .navPort-items-Narrow li { height: auto; width: 100%; float: left; border: 1px solid #999999;} */
.navPort-items-Narrow a {text-decoration: none;}

.navPort-items-Narrow .rendering, .navPort-items-Narrow .flash, .navPort-items-Narrow .game, .navPort-items-Narrow .webdesign, .navPort-items-Narrow .ux, .navPort-items-Narrow .graphic {padding: 2% 0 2% 23px;}
.navPort-items-Narrow .rendering:hover {background: url('../images/nav_1c.jpg') no-repeat center center; text-shadow: 0 0 1em #000000, 0 0 1em #000000, 0 0 1em #000000;}

.navPort-items-Narrow .flash:hover {background: url('../images/nav_2c.jpg') no-repeat center center; text-shadow: 0 0 1em #000000, 0 0 1em #000000, 0 0 1em #000000;}

.navPort-items-Narrow .game:hover {background: url('../images/nav_3c.jpg') no-repeat center center; text-shadow: 0 0 1em #000000, 0 0 1em #000000, 0 0 1em #000000;}

.navPort-items-Narrow .webdesign:hover {background: url('../images/nav_4c.jpg') no-repeat center center; text-shadow: 0 0 1em #000000, 0 0 1em #000000, 0 0 1em #000000;}

.navPort-items-Narrow .ux:hover {background: url('../images/nav_5c.jpg') no-repeat center center; text-shadow: 0 0 1em #000000, 0 0 1em #000000, 0 0 1em #000000;}

.navPort-items-Narrow .graphic:hover {background: url('../images/nav_6c.jpg') no-repeat center center; text-shadow: 0 0 1em #000000, 0 0 1em #000000, 0 0 1em #000000;}


#GoogleAdsWide {display: none; padding-bottom: 20px;}
#GoogleAdsTall {display: block; padding-bottom: 20px;}

}

@media only screen and (min-width : 150px) and (max-width : 570px) {
.mainGraphic img {margin: 7% 0 7% 35px; width: 57%;}
.navAbout .about_tagline {font-size: 32px;  margin-left: 0px; padding: 20px 40px 20px 43px; text-align: left;}
#navMain {height: 58px; width: 100%;}
#navMain nav {/* display: hidden; */}
#navMain nav ul, #navMain nav:active ul 
    { 
		display: none;
		position: absolute;
		padding: 20px;
		background: #000;
		border: 1px solid #777;
		right: 25px;
		top: 29px;
		width: 40%;
	}
#navMain nav ul li {width: 100%; padding: 3% 10% 3% 10%;}  
#navMain nav:hover ul {display: block;} 
#menu_icon {display: inline-block;}
}