@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0;}

body {
	font-family:"Century Gothic";
	overflow:hidden;
}

.current{ background-color: #AAA; }

h2.title {
	font-size: 36px;
	color: #fff;
	text-align: center;
	text-shadow: 3px 3px 5px black;
	margin: 30px 0px 30px 0px;
}

div#headerWrapper {
min-width: 100%;
height: 75px;
background: #000000;
position: fixed;
}

div#header {
width: 990px;
height: 75px;
}

div#nav {
position: fixed;
z-index: 1;
text-align: center;
/*top: 25%;*/
}

div#nav ul{
width: 87px;
display: block;
margin: auto 0;
}

div#nav li {
display: inline;
list-style-type: none;
float: left;
}

div#nav li a{
display: block;
width: auto;
height: 32px;
padding: 15px 0 0 75px;
text-align: left;
/*width: 47px;
height: 47px;*/
margin: 10px;
background: url('images/navImg.png') left no-repeat;
/*background: url('images/navImg.png') center no-repeat;*/
color: #fff;
text-decoration: none;
}

div#nav li:hover {
}

div#nav li a:hover {
background: url('images/navHover2.png') left no-repeat;
/*background: url('images/navHover.png') center no-repeat;*/
color: #72c0bf;
}

div#nav li.on a {
background: url('images/navHover2.png') left no-repeat;
/*background: url('images/navHover.png') center no-repeat;*/
color: #72c0bf;
}

div#nav li.null a{
background: url('images/navImg.png') center no-repeat;	
}

div#wrapperOne {
min-width: 100%;
min-height: 100%;
/*background: url('images/indexBgRpt.png') repeat;*/
background: url('images/logoRptResize.png') #827668 repeat-x;
text-align: center;
z-index: -1;
}

div#containerOne {
width: 990px;
margin: 0 auto;
padding: 0 0 0 0;
color: #fff;
z-index: -1;
}

div#bgRpt {
	/*background: url('images/indexBgBottomRpt.png') repeat-x;*/
    background: url('images/logoBtm.png') center no-repeat;
	background-position:bottom;
	width: 100%;
	height: 100%;
    z-index: -1;
}
@-moz-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
@-o-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
@-ms-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
div#overlay {
	-moz-animation: overlay 0s 0s forwards;
	-webkit-animation: overlay 0s 0s forwards;
	-o-animation: overlay 0s 0s forwards;
	-ms-animation: overlay 0s 0s forwards;
	animation: overlay 0s 0s forwards;
	background-attachment: fixed, fixed;
	background-image: url("images/overlay-pattern.png"), url("images/overlay.svg");
	background-position: top left, center center;
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
	height: 100%;
	left: 0;
	opacity: 1;
	/*position: absolute;*/
	top: 0;
	width: 100%;
}

div#indexBgBottom {
	-moz-animation: overlay 0s 0s forwards;
	-webkit-animation: overlay 0s 0s forwards;
	-o-animation: overlay 0s 0s forwards;
	-ms-animation: overlay 0s 0s forwards;
	animation: overlay 0s 0s forwards;
	background-attachment: fixed;
	/*background-image: url("images/indexBgBottomRpt.png");
	background-position: bottom;
	background-repeat: repeat-x;*/
    background-image: url("images/logoBtm.png");
    background-position: bottom;
	background-repeat: no-repeat;
	height: 100%;
	left: 0;
	opacity: 1;
	/*position: absolute;*/
	top: 0;
	width: 100%;
}

div#indexBgImg {
	-moz-animation: overlay 0s 0s forwards;
	-webkit-animation: overlay 0s 0s forwards;
	-o-animation: overlay 0s 0s forwards;
	-ms-animation: overlay 0s 0s forwards;
	animation: overlay 0s 0s forwards;
	background-image: url("images/indexElements.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
	height: 100%;
	left: 0;
	opacity: 1;
	/*position: absolute;*/
	top: 0;
	width: 100%;
}

div#logo {
	/*background: url("images/indexLogoImg.png") center no-repeat;*/
    background: url("images/logoSmallV2.png") center no-repeat;
	width: 100%;
	height: 100%;
	z-index: 99;
}

div#wrapperTwo {
min-width: 100%;
min-height: 100%;
background: url('images/demoBgTop.png');
background-size: cover;
}

div#containerTwo {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
    background:url("images/demoBgBtm.png") fixed bottom no-repeat;
    background-size: cover;
}

div#video {
    width: 800px;
    height: 520px;
    margin: 0 auto;
}

div#video iframe {
	display:block;
	width: 960px;
	height: 540px;
}

div#wrapperThree {
min-width: 100%;
min-height: 100%;
background: url('images/3dBg.png');
background-size: cover;
}

div#containerThree {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#wrapperFour {
min-width: 100%;
min-height: 100%;
background: url('images/web.png');
background-size: cover;
}

div#containerFour {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#wrapperFive {
min-width: 100%;
min-height: 100%;
background: url('images/photo.png');
background-size: cover;
}

div#containerFive {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#wrapperSix {
min-width: 100%;
min-height: 100%;
background: url('images/graphic.png');
background-size: cover;
}

div#containerSix {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#wrapperSeven {
min-width: 100%;
min-height: 100%;
background: url('images/gameBg.png');
background-size: cover;
}

div#containerSeven {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#wrapperEight{
min-width: 100%;
min-height: 100%;
background: url('images/artBg.png');
background-size: cover;
}

div#containerEight {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#wrapperNine{
min-width: 100%;
min-height: 100%;
/*background: url('images/resumeBg.png');*/
background: url('images/logoRptResize.png') repeat-x;
background-size: cover;
}

div#containerNine {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
    background-attachment: fixed;
    background-image: url("images/logoBtm.png");
    background-position: bottom;
    background-repeat: no-repeat;
}

div#wrapperTen{
min-width: 100%;
min-height: 100%;
background: url('images/footerBg.png');
background-size: cover;
}

div#containerTen {
max-width: 100%;
min-width: 990px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#vidThumbsContainer {
   width: 990px;
    margin: 0 auto;
}

div#vidThumbs {
    display: block;
    float: left;
    width: 990px;
    margin: 0 auto;
}

div#vidThumbs a{
    display: block;
    float: left;
	width: 450px;
	height: 250px;
	margin: 30px 30px 0px 0px;
	box-shadow: 5px 5px 10px black;
}

div#vidThumbs a:hover{
	/*background-color: #90F;*/
    background-color: #72c0bf;
}

div#vidThumbs img{
	width: 450px;
	height: 250px;
    background: url("images/videoActive.png") center no-repeat;
	/*margin: 30px 30px 0px 0px;
	box-shadow: 5px 5px 10px black;*/
}

div#vidThumbs img:hover{
	opacity: 0.5;
}

div#thumbs{
	width: 990px;
	margin: 0 auto;
}

div#thumbs a{
	display: block;
	float: left;
	width: 210px;
	height: 150px;
	margin: 30px 30px 0px 0px;
	box-shadow: 5px 5px 10px black;
}

div#thumbs a:hover{
	/*background-color: #90F;*/
    background-color: #72c0bf;
}

div#thumbs img{
	width: 210px;
	height: 150px;
	/*margin: 30px 30px 0px 0px;
	box-shadow: 5px 5px 10px black;*/
}

div#thumbs img:hover{
	opacity: 0.5;
}

div#resume{
    width: 990px;
    margin: 0 auto;
}

div#resumeContent{
    width: 990px;
    display: block;
    float: left;
    margin: 0 auto;
    text-align: center;
}

div#resumeContent ul{
    display: block;
    float: left;
    text-align: center;
    margin: 0 auto;
}

div#resumeContent ul li{
    display: block;
    float: left;
    margin: 0 0 0 30px;
    list-style-type: none;
}

div#resumeContent ul li.first{
    list-style-type:none;
}

div#resumeContent h3 {
    font-size: 26px;
	color: #6cc6f0;
	text-shadow: 3px 3px 5px black;
}

div#resumeContent a, active {
    color: #000; 
}

div#resumeContent a:hover {
    color: #72c0bf;
    /*color: #6cc6f0;*/ 
}

img.resume {
    height: 1294px;
    width: 1000px;
}

div#footer{
	width: 990px;
	margin: 0 auto;
}

div#footer a{
	display: block;
	float: left;
	width: 260px;
	height: 260px;
	margin: 30px 30px 0px 0px;
}

div#footer a:hover{
}

div#footer img{
	width: 260px;
	height: 260px;
	/*margin: 30px 30px 0px 0px;
	box-shadow: 5px 5px 10px black;*/
}

div#footer img:hover{
	opacity: 0.5;
}

div#footerHead {
	-moz-animation: overlay 0s 0s forwards;
	-webkit-animation: overlay 0s 0s forwards;
	-o-animation: overlay 0s 0s forwards;
	-ms-animation: overlay 0s 0s forwards;
	animation: overlay 0s 0s forwards;
	background-attachment: fixed;
	background-image: url("images/footerHeadImg.png");
	background-position: top;
	background-repeat: repeat-x;
	height: 193;
	left: 0;
	opacity: 1;
	top: 0;
	width: 100%;
	padding: 50px 0 0 0;
}

@media only screen and (max-width: 769px){
div#logo {
	background: url("images/logoSmallerV2.png") center no-repeat;
	width: 100%;
	height: 100%;
	z-index: 99;
}

div#containerTwo {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerThree {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerFour {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerFive {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerSix {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerSeven {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerEight {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerNine {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerTen {
max-width: 769px;
min-width: 482px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#thumbs{
	max-width: 769px;
	min-width: 482px;
	margin: 0 auto;
}

div#vidThumbsContainer{
    max-width: 769px;
	min-width: 482px;
	margin: 0 auto;
}

div#vidThumbs{
    max-width: 769px;
    min-width: 482px;
	margin: 0 auto;
}

div#resume{
    max-width: 769px;
    min-width: 482px;
    margin: 0 auto;
}

div#resumeContent{
    max-width: 769px;
    min-width: 482px;
    margin: 0 auto;
}
}

@media only screen and (max-width: 481px) {
div#logo {
	background: url("images/logoSmallestV2.png") center no-repeat;
	max-width: 480px;
min-width: 210px;
	z-index: 99;
}

div#containerTwo {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerThree {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerFour {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerFive {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerSix {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerSeven {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerEight {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerNine {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#containerTen {
max-width: 480px;
min-width: 210px;
height: 100%;
margin: 0 auto;
/*padding: 100px 175px 0 175px;*/
overflow: auto;
}

div#thumbs{
	max-width: 482px;
	min-width: 210px;
	margin: 0 auto;
}

div#vidThumbsContainer{
    max-width: 482px;
	min-width: 210px;
	margin: 0 auto;
}

div#vidThumbs {
     max-width: 482px;
    min-width: 210px;
	margin: 0 auto;
}

div#resume {
     max-width: 482px;
    min-width: 210px;
    margin: 0 auto;
}

div#resumeContent {
     max-width: 482px;
    min-width: 210px;
    margin: 0 auto;
}
}