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

body {
    display: block;
    font-variant: normal;
    background-color: #fff;
    font-style: normal;
    font-weight: 400;
}

#outerDiv {
	font-family: roboto;
    display: block;
    overflow-y: hidden;
    overflow-x: hidden;
}
/*Header*/
#header{
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 700px;
}
#header img{
	width:100%;
}

/*Main Menu*/
#mainMenu {
	display:block;
	position: relative;
	font-size: medium;
	top: -20px;
	left: -30px;
	z-index: 1;
}
#mainMenu ul {
	display:block;

	width: 100%;
}
#mainMenu li {
	display:block;
	list-style: none;
	margin-left: auto;
	margin-right: auto;
	width: 33%;
	float:left;
	left: 0;
	text-align: center;
		border-top: thin solid rgba(0,0,0,.5);
	border-bottom: thin solid #fff;
	transition: 0.5s ease;
}
#mainMenu a{
	display:block;
	width: 100%;
	text-decoration: none;
	color:rgba(0,0,0,.4);
	width: 100%;
	transition: 0.2s ease;
}
#mainMenu li:hover {  
	border-top: thin solid #000;  
	border-bottom: thin solid #000;
}

#mainMenu li a:hover {
    color: rgba(0,0,0,1);
}

#title h4{
    position: relative;
    display: block;
    color: #000;
    text-align: center;
    font-size: small;
    margin-top: 41px;
	width: 43%;
	margin-left:auto;
	margin-right:auto;
    top: -20px;
	background-color: rgba(0,0,0,.0);
}

.current {background-color: rgba(0,0,0,.1)}
#mainMenu li a.current:hover{cursor: default;}

.static {position:fixed}
/* Main Content Styles */

#mainContent {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    top: -35px;
}
#liveAction {
    display: block;
    left: 50.5%;
    width: 49%;
    float:right;
    margin-left: auto;
    margin-right: auto;
    border-left: thin solid #000000;
}
#animation {
	display: block;
	right: 50%;
	width: 49%;
	float: left;
	margin-left: auto;
	margin-right: auto;
	border-right: thin solid #000000;
}
#animation ul{    padding-left: 0px;}
#liveAction ul{    padding-right: 0px;}

#mainContent ul{
    list-style: none;
}

#mainContent li {
    display: block;
    width: 310px;
    height: 180px;
	margin: 2px 2px;
}

#animation li, .gallery li{
    float: right;
}
#liveAction li {
    float: left;
}

#index a{
    display: block;
    padding: 120px 0 0;
    width: 100%;
    height: 38%;
    text-align: center;
    text-decoration: none;
    font-type: large;
    font-variant: normal;
    font-weight: 400;
    font-size: large;
    font-family: roboto;
    font-style: normal;
    color: rgba(0,0,0,1.0);
    transition: .36s ease;
    background-color: rgba(255,255,255,.6);
}

#index a:hover{
    display: block;
    height: 52%;
    padding: 85px 0 0;
    text-decoration: none;
    font-type: large;
    font-variant: normal;
    font-weight: 400;
    font-size: x-large;
    font-style: normal;
    color: #A3DDF2;
    background-color: rgba(0,0,0,0.60);
	overflow: hidden;
}

#shitfaced 	{    background-image: url(portfolio/imgs/_thumbs/shitfaced.jpg)}
#amazon 	{    background-image: url(portfolio/imgs/_thumbs/amazon.jpg)}
#johnW 		{    background-image: url(portfolio/imgs/_thumbs/johnwick2.jpg)}
#stella 	{    background-image: url(portfolio/imgs/_thumbs/stella.jpg)}
#audi 		{    background-image: url(portfolio/imgs/_thumbs/audi.jpg)}
#daddy 		{    background-image: url(portfolio/imgs/_thumbs/dg.jpg);}
#sealy 		{    background-image: url(portfolio/imgs/_thumbs/sealy.jpg)}
#nhm 		{    background-image: url(portfolio/imgs/_thumbs/nhm.jpg)}
#are 		{    background-image: url(portfolio/imgs/_thumbs/are.jpg)}
#koh 		{    background-image: url(portfolio/imgs/_thumbs/knights.jpg)}
#pizzaDoe 	{    background-image: url(portfolio/imgs/_thumbs/pizzadoe.jpg)}
#pursuit 	{    background-image: url(portfolio/imgs/_thumbs/pursuit.jpg)}
#antique 	{    background-image: url(portfolio/imgs/_thumbs/antique.jpg)}
#devils 	{    background-image: url(portfolio/imgs/_thumbs/devilscage.jpg)}
#cats 		{    background-image: url(portfolio/imgs/_thumbs/cats.jpg)}
#demoreel 	{    background-image: url(portfolio/imgs/_thumbs/demoreel.jpg)}
#duncan 	{    background-image: url(portfolio/imgs/_thumbs/duncanville.jpg)}
#grimsburg 	{    background-image: url(portfolio/imgs/_thumbs/grimsburg.jpg)}
#hotstreets	{    background-image: url(portfolio/imgs/_thumbs/hotstreets.jpg)}
#harmonquest{    background-image: url(portfolio/imgs/_thumbs/harmonquest.jpg)}
#bless	 	{    background-image: url(portfolio/imgs/_thumbs/bless.jpg)}
#beavisbutthead 	{    background-image: url(portfolio/imgs/_thumbs/beavisbutthead.jpg)}
#beavisbuttheadDTU 	{    background-image: url(portfolio/imgs/_thumbs/beavisbuttheadDTU.jpg)}

#animation h1 {
	text-align: right; margin: 5px;
}

#liveAction h1 {
	text-align: left; margin: 5px;
}

.gallery h1{
	display: block;
	width: 500px;
	margin-left:auto;
	margin-right: auto;
	clear:left;
	text-align: center;
	border-bottom: thin solid #000;
}

.gallery ul{
	display:block;
	width: 80%;
	margin-left: auto;
	margin-right:auto;
}


#boardTitle {
    position: relative;
    display: block;
    width: 60%;
    top: 10px;
    margin-left: auto;
    margin-right: auto;
}

#boardTitle h1{
    display: block;
    font-size: 2em;
   text-align: center;
	width: 100%;
    margin: 0 auto;
	text-decoration: underline;
}
#boardTitle h4{	
   text-align: center;
	display:block;
	width: 100%;
}

#boardTitle a{
	display:block;
	width: 50px;
	height: 30px;
	position: fixed;
	top:150px;
	left:10px;
}
/* Misc Portfolio */
#miscGallery {
	display:block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;	
    background-color: #000;

}
#miscGallery h1{
	text-align: center;
}

#miscGgallery ul{
	display:block;
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;	
}

#miscGallery li {
	float:left;
	text-align:center;
	display:block;
	width: auto;
	height: auto;
	
}

#miscGallery img {border: thin solid #505050;}
/* About Me*/

#aboutMe {
	display: block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

#aboutMe h1 {text-align: center; text-decoration: underline;}

#aboutMe p{text-align: center; display:block; border: thin solid ; padding: 60px;}

#aboutMe a{ text-decoration: none; color: #505050}
#aboutMe a:hover{text-decoration: underline; color:#000;}
#resume {display: block; width: 70%; margin-left: auto; margin-right:auto;}
#resume img{ display: block; width: 80%; height: auto; margin: 0 auto; }

/* Live Action Portfolio */
#portLO {
	display: block;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

#portLO ul{
	display:block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	clear:both;
}

#portLO li {
	float:left;
	display: block;
	width: 30%;
	height: 300px;
}

#portLO img{
display:block;
position:relative;
width: 100%;

}


#portLO p, h3{
	font-size: small;
	float:left;
	clear:both;
}

#portLO h3{
	margin: 30px 0;
	display: block;
	width: 100%;
	border-bottom: thin solid;
}

/* Animation Slideshow */
#animBoardContent {display:block; clear:both; width: 70%; margin: 0 auto; }
#animBoardContent img{
	display: block;
	height: 100%; width: auto; 
	float: left;
	margin: 5px;
}
#arrows{
	display:block;
	height: 60px;
	position:relative;
	top:0;
}
#arrows ul{
	display:block; 
	position: relative;
	clear:both;
	width: 60%;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
}

#arrows ul li {
	display:block;
	width:0;
	height:30px;
	}
.animnext a, .animprev a{
  cursor: pointer;
	position: relative;
  color: #A3DDF3;
  font-weight: bold;
  font-size: 12px;
  float: left;
	scale:0.8;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.3);
}
.animprev {float:left;}

.animnext {float:right;}

.animnext li:hover {scale:1}


#animSlideShow {
	display:block;
	width: 85%;
	clear: both;
	position:relative;
}
#thumbsDiv {
    display: block;
    position: relative;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    clear: left;
}

.thumbs {
	 margin: 2px; 
}

.thumbs:hover{
	background-color: rgba(0,0,0,0.5);
}


#descript {
    display: block;
	position:relative;
    width: 60%;
	margin-right:auto;
	margin-left:auto;
}
#descript p{border: thin solid;padding: 5px;}

.backTop {
	display: block;
	float: right;
	bottom:0;
	margin-right: 55px;
}
/* Footer Styles */

#footer {
    position: fixed;
	display:block;
    left: 0;
    bottom:0;
}

#footer ul{
	list-style: none;
    transform: rotate(180deg);

}

 #footer li,#footer a,#footer img{
	display:block;
	float: left;
	clear:left;
	margin: 10px 15px;
	height: 40px;
	width: 40px;
	opacity:.60; 
	transform: scale(.75) rotate(-180deg);
	transition: 0.2s ease;
	  
}
 #footerli,#footer a,#footer img:hover{
	opacity:1;
	transform:scale(1)
}