@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; border: none; outline: none; }

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

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

@font-face {
  font-family: 'agency_fbbold';
  src: local('☺'), url('fonts/agencyb-webfont.eot?') format('eot'), url('fonts/agencyb-webfont.woff') format('woff'), url('fonts/agencyb-webfont.ttf') format('truetype'), url('fonts/agencyb-webfont.svg#agency_fbbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'agency_fbregular';
  src: local('☺'), url('fonts/agencyr-webfont.eot?') format('eot'), url('fonts/agencyr-webfont.woff') format('woff'), url('fonts/agencyr-webfont.ttf') format('truetype'), url('fonts/agencyr-webfont.svg#agency_fbregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body { height: 100%; min-height: 100%; }

body {
	font: 14px "agency_fbregular","Roboto Condensed", Arial, sans-serif;
	color: #000;
	background-image: url(imgs/dustypinkbkg2.jpg);
	background-repeat:	no-repeat;
	background-position: center;
	background-attachment: fixed;
	webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height:100%;
}
.bgImg {
	position: fixed;
	top: 0;
	left: 0;
	z-index:0;
	width: 120%;
	height: 120%;
	display:none;
}
.bgImg img { height: 120%; }
@media only screen and (max-width: 768px) 
{
	.bgImg { display: block; }
}

/* IE Hack */
@media screen and (min-width:0\0) {
	body { font-size: 11px; }
}
/* End IE Hack */

header#main { width: 100%; height: 60px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 15000; background-color: #000; color: #FFF; border-bottom: 2px solid #dda0c9; }
header#main nav ul { /*width: 1028px;*/ width: 800px; margin: 0 auto; padding: 0; list-style: none; text-align: center; }
header#main nav ul li { margin: 0; padding: 0; display: inline; }
header#main nav ul li a { margin: 0 auto; padding: 16px 76px; width: auto; height: 60px; display: block; float: left; color: #FFF; text-decoration: none; font-size: 1.4em; }
header#main nav ul li a.current { background-color: #c2517c; }

footer { width: 100%; height: 20px; padding: 0 20px; overflow: hidden; position: fixed; bottom: 0; left: 0; font-size: 0.9em; color: #FFF; }

main { margin: 0 auto; width: 1028px; height: auto; overflow: hidden; position: relative; display: block; }

/*Decorative elements*/
.gears_flowers {
	width: 1028px;
	height: 728px;
	position: absolute;
	z-index: -5;
}
.gear_flower_txt {
	text-align: center;
	font-size: 2em;
	color: #FFFFFF;
	position: relative;
	top: 22px;
	left: -2px;
	z-index: 0;
}
.gear {
	width: 80px;
	height: 81px;
	overflow: hidden;
	position: absolute;
}
.gear .green { width: 80px; height: 81px; background: url(imgs/gear_green.png) no-repeat 0 0; position: absolute; }
.gear .ltblue { width: 80px; height: 81px; background: url(imgs/gear_ltblue.png) no-repeat 0 0; position: absolute; }
.gear .ltpurple { width: 80px; height: 81px; background: url(imgs/gear_ltpurple.png) no-repeat 0 0; position: absolute; }
.gear .orange { width: 80px; height: 81px; background: url(imgs/gear_orange.png) no-repeat 0 0; position: absolute; }
.gear .pink { width: 80px; height: 81px; background: url(imgs/gear_pink.png) no-repeat 0 0; position: absolute; }
.gear .drkblue { width: 80px; height: 81px; background: url(imgs/gear_drkblue.png) no-repeat 0 0; position: absolute; }
.gear .gold { width: 80px; height: 81px; background: url(imgs/gear_gold.png) no-repeat 0 0; position: absolute; }
.gear .purple { width: 80px; height: 81px; background: url(imgs/gear_purple.png) no-repeat 0 0; position: absolute; }
.flower {
	width: 64px;
	height: 66px;
	overflow: hidden;
	position: absolute;
}
.flower .green { width: 64px; height: 66px; background: url(imgs/flower_green.png) no-repeat 0 0; position: absolute; }
.flower .ltblue { width: 64px; height: 66px; background: url(imgs/flower_ltblue.png) no-repeat 0 0; position: absolute; }
.flower .ltpurple { width: 64px; height: 66px; background: url(imgs/flower_ltpurple.png) no-repeat 0 0; position: absolute; }
.flower .orange { width: 64px; height: 66px; background: url(imgs/flower_orange.png) no-repeat 0 0; position: absolute; }
.flower .pink { width: 64px; height: 66px; background: url(imgs/flower_pink.png) no-repeat 0 0; position: absolute; }
.flower .drkblue { width: 64px; height: 66px; background: url(imgs/flower_drkblue.png) no-repeat 0 0; position: absolute; }
.flower .gold { width: 64px; height: 66px; background: url(imgs/flower_gold.png) no-repeat 0 0; position: absolute; }
.flower .purple { width: 64px; height: 66px; background: url(imgs/flower_purple.png) no-repeat 0 0; position: absolute; }

@-webkit-keyframes scrollDown {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes scrollDown {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-o-keyframes scrollDown{
	0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(360deg);}
}
@keyframes scrollDown{
	0% {transform: rotateZ(0deg);}
    100% {transform: rotateZ(360deg);}
}
@-webkit-keyframes scrollUp {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes scrollUp {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@-o-keyframes scrollUp{
	0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(-360deg);}
}
@keyframes scrollUp{
	0% {transform: rotateZ(0deg);}
    100% {transform: rotateZ(-360deg);}
}
.scrollDown{
	-webkit-animation: scrollDown 2s infinite linear;
	-moz-animation: scrollDown 2s infinite linear;
	-o-animation: scrollDown 2s infinite linear;
	animation: scrollDown 2s infinite linear;
}
.scrollUp{
	-webkit-animation: scrollUp 2s infinite linear;
	-moz-animation: scrollUp 2s infinite linear;
	-o-animation: scrollUp 2s infinite linear;
	animation: scrollUp 2s infinite linear;
}
/*End Decorative elements*/

#about { width: 100%; height: 768px; position: relative; top: 70px; }
#about aside { width: 293px; height: 293px; position: absolute; left: 50px; top: 93px; }
#about header { width: 550px; height: 500px; position: relative; top: 178px; left: 478px; }
#about header h3 { margin: 0; padding: 11px 27px; width: 326px; height: 35px; position: relative; z-index: 3; overflow: hidden; background: #c2517c; color: #FFF; text-align: right; font-size: 1.65em; font-weight: normal; letter-spacing: 1.1px; }
#about header p#dev { position: relative; left: -4px; top: -22px; z-index: 5; font-size: 5.35em; font-weight: bold; letter-spacing: 0.4px; }
#about header p#design { position: relative; left: 172px; top: -50px; z-index: 6; font-size: 5.35em; font-weight: bold; letter-spacing: 0.4px; }
#about header p#iam { position: relative; left: 173px; top: -46px; z-index: 7; font-size: 2.65em; font-weight: bold; letter-spacing: 0px; }
#about header #decorRectangles { width: 525px; height: 400px; position: absolute; top: 27px; left: -10px; z-index: 2; }
#about header .rect { background: #000; opacity: .3; }
#about header .first { width: 410px; height: 45px; position: relative; top: 0; left: -10px; }
#about header .second { width: 285px; height: 66px; position: relative; top: 0; left: -10px; }
#about header .third { width: 101px; height: 56px; position: relative; top: 0; left: 174px; }
#about header .fourth { width: 146px; height: 84px; position: absolute; top: 83px; left: 275px; }
#about header .fifth { width: 194px; height: 54px; position: relative; top: 0; left: 174px; }
#about article div#pinkCircles div#pinkCircle { width: 290px; height: 290px; overflow: hidden; position: absolute; top: 342px; left: 418px; background: #c2517c; background-color: rgba(194,81,124, 0.8); border-radius: 300px; -moz-border-radius: 300px; -webkit-border-radius: 300px; z-index: 0; }
#about article div#pinkCircles div#pinkCircleSmall { width: 222px; height: 222px; overflow: hidden; position: absolute; top: 455px; left: 500px; background: #c2517c; background-color: rgba(194,81,124, 0.8); font-size: .9em; border-radius: 300px; -moz-border-radius: 300px; -webkit-border-radius: 300px;  text-align: right; z-index: 1; }
#about article article.pinkCircleTxt { width: 290px; height: 290px; overflow: hidden; position: absolute; top: 327px; left: 418px;font-size: 1.05em; z-index: 2; }
#about article article.pinkCircleTxt p { width: 200px; position: relative; top: 88px; left: 40px; color: #FFF; }
#about article article.pinkCircleSmallTxt  { width: 222px; height: 222px; overflow: hidden; position: absolute; top: 455px; left: 500px;font-size: 1.05em; text-align: right; z-index: 3; }
#about article article.pinkCircleSmallTxt p { width: 184px; position: relative; top: 79px; left: 22px; color: #FFF; }

#resume {width: 100%; height: auto; position: relative; top: 180px;}
#resume header { width: 400px; height: 83px; overflow: hidden; position: absolute; top: 130px; right: 0; text-align: right; }
#resume header a { color: #fff; font-size: 1.2em; margin-top: 8px; padding-right: 10px; display: block; }
#resume header nav ul { width: 400px; height: 50px; background: #000; background: rgba(0,0,0,0.7);  overflow: hidden; margin: 0; padding: 0; text-align: left; }
#resume header nav ul li { list-style: none; float: left; }
#resume header nav ul li a { display: block; width: auto; height: 50px; margin: 0; padding: 13px 20px; font-size: 1.4em; color: #fff; text-decoration: none; }
#resume header nav ul li a.current { background-color: #c2517c; }
#resume_skills {width: 100%; height: 768px; position: relative; top: 0;}
#resume #resume_skills article { width: 300px; height: auto; position:absolute; padding: 30px; overflow: hidden; color: #FFFFFF; font-size: 1.3em; line-height: 1.7em; }
#resume #resume_skills article h3 { margin: 0; padding: 5px 20px; width: 235px; height: 30px; position: relative; z-index: 3; overflow: hidden; background: #c2517c; color: #FFF; font-size: 1.3em; font-weight: normal; letter-spacing: 1.1px; }
#resume #resume_skills article p { margin: -15px 0 0 15px; padding: 30px 20px 20px 20px; background: #000; background: rgba(0,0,0,0.6); }
#resume #resume_skills article a { color: #c2517c; }
#resume #resume_skills article#languages { width: 400px; left: -20px; top: 115px; }
#resume #resume_skills article#languages h3 { width: 130px; }
#resume #resume_skills article#development_concepts { width: 345px; left: 60px; top: 395px; line-height: 1em; }
#resume #resume_skills article#development_concepts h3 { padding: 10px 20px 0 20px; }
#resume #resume_skills article#apis_frameworks { width: 300px; right: 30px; top: 249px; }
#resume #resume_skills article#apis_frameworks h3 { width: 185px; left: 98px; }
#resume #resume_skills article#tools { width: 390px; top: 510px; right: 45px; }
#resume #resume_skills article#tools h3 { width: 90px; left: 280px; }
#resume #resume_skills article#apis_frameworks h3, #resume #resume_skills article#tools h3 { text-align: right; }
#resume_experience {width: 100%; height: 900px; position: relative; top: 110px;}
#resume #resume_experience section { width: 400px; height: auto; position:absolute; top: 250px; padding: 30px; background:#000; background: rgba(0,0,0,0.6); color: #FFFFFF; font-size: 1.3em; line-height: 1.3em; }
#resume #resume_experience section h3 { margin: 0; padding: 5px 20px 0 20px; width: auto; height: 30px; position: absolute; z-index: 3; overflow: hidden; background: #c2517c; color: #FFF; font-size: 1.3em; font-weight: normal; letter-spacing: 1.1px; }
#resume #resume_experience section h4 { color: #c2517c; }
#resume #resume_experience section ul { list-style: none; }
#resume #resume_experience section ul li { margin: 16px 0; }
#resume #resume_experience section article.collapsed ul { display: none; }
#resume #resume_experience section article.expanded ul { display: block; }
#resume #resume_experience #threesixtyi { left: 0;}
#resume #resume_experience #threesixtyi h3 { width: auto; top: -20px; right: -30px; }
#resume #resume_experience #northrop_grumman { right: 35px; }
#resume #resume_experience #northrop_grumman  h3 { width: auto; top: -20px; right: -30px; }
#resume #resume_experience #moxie_interactive { left: 0; top: 430px; }
#resume #resume_experience #moxie_interactive  h3 { width: auto; top: -20px; right: -30px; }
#resume #resume_experience #moxie_interactive  h4 span.plus { background: url(imgs/plusminus.png) no-repeat 0 0; width: 30px; height: 30px; margin: 0 10px 0 0; display: inline-block; position: relative; top: 7px;  }
#resume #resume_experience #moxie_interactive  h4 span.minus { background: url(imgs/plusminus.png) no-repeat -30px 0; width: 30px; height: 30px; margin: 0 10px 0 0; display: inline-block; position: relative; top: 7px; }
#resume #resume_experience section#moxie_interactive ul li { margin: 16px 0 16px 40px; }
#resume_education {width: 100%; height: 900px; position: relative; top: 220px;}
#resume #resume_education article { width: 695px; height: 140px; position:relative; top: 250px; left: 0; padding: 30px; overflow: hidden; color: #FFFFFF; font-size: 1.3em; line-height: 1.7em; }
#resume #resume_education article#scad { left: -20px; top: 200px; }
#resume #resume_education article#aia { width: 430px; left: 250px; top: 190px; }
#resume #resume_education article#gwinnett_tech { width: 510px; left: 550px; top: 190px; }
#resume #resume_education article h3 { margin: 0; padding: 5px 20px; width: 235px; height: 30px; position: relative; z-index: 3; overflow: hidden; background: #c2517c; color: #FFF; font-size: 1.3em; font-weight: normal; letter-spacing: 1.1px; }
#resume #resume_education article p { margin: -15px 0 0 15px; padding: 20px; background: #000; background: rgba(0,0,0,0.6); }
#resume #resume_education article a { color: #c2517c; }
#resume_affiliations {width: 100%; height: 900px; position: relative; top: 310px;}
#resume #resume_affiliations article { width: 330px; height: 140px; position:relative; top: 250px; left: 20px; padding: 30px; overflow: hidden; color: #FFFFFF; font-size: 1.3em; line-height: 1.7em; }
#resume #resume_affiliations article#acmsiggraph { left: 450px; }
#resume #resume_affiliations article h3 { margin: 0; padding: 5px 20px; width: 235px; height: 30px; position: relative; z-index: 3; overflow: hidden; background: #c2517c; color: #FFF; font-size: 1.3em; font-weight: normal; letter-spacing: 1.1px; }
#resume #resume_affiliations article p { margin: -15px 0 0 15px; padding: 20px 20px 0 20px; width: 330px; height: 40px; background: #000; background: rgba(0,0,0,0.6); }
#resume #resume_affiliations article a { color: #c2517c; }


#demo_reel { display: none; margin: 80px 0 0 0; width: 100%; height: 768px; position: relative; top: 70px;}

#portfolio { margin: 80px 0 0 0; width: 100%; height: 768px; position: relative; top: 70px;}
#portfolio header { width: 300px; height: 60px; position: relative; top: 80px; left: 730px; overflow: hidden; }
#portfolio header nav ul { width: 300px; height: 50px; background: rgba(0,0,0,0.6);  overflow: hidden; margin: 0; padding: 0; text-align: left; }
#portfolio header nav ul li { list-style: none; float: left; }
#portfolio header nav ul li a { display: block; width: auto; height: 50px; margin: 0; padding: 13px 20px; font-size: 1.4em; color: #fff; text-decoration: none; }
#portfolio header nav ul li a.current { background-color: #c2517c; }
#portfolio #navRect { width: 990px; height: 65px; position: absolute; top: 310px; /*393px;*/ left: 20px; background: #000000; opacity: 0.7; }
#portfolio #pastwork { position: relative; top: 140px; }

#contact {width: 100%; height: 768px; position: relative; top: 70px;}
#contact .rect { background: #000000; position: absolute; }
#contact #contact_form  { position: relative; top: 120px; }
#contact #contactRect { width: 322px; height: 110px; position: absolute; top: 37px; left: 40px; opacity: 0.6; }
#contact #contactRect #rect1 { width: 20px; height: 55px; left: 0px; top: 0px; }
#contact #contactRect #rect2 { width: 230px; height: 37.5px; left: 20px; top: 0px; }
#contact #contactRect #rect3 { width: 282px; height: 53.5px; left: 20px; bottom: 19px; }
#contact #contactRect #rect4 { width: 13px; height: 24.75px; right: 7px; bottom: 47.75px; }
#contact #contact_form header h3 { margin: 0; padding: 5px 20px; width: 135px; height: 30px; position: relative; top: 3px; z-index: 3; overflow: hidden; background: #c2517c; color: #FFF; font-size: 1.8em; font-weight: normal; letter-spacing: 1.1px; }
#contact #contact_form header h4 { margin: 0; padding: 5px 0; width: auto; height: 20px; position: relative; left: 50px; overflow: hidden; color: #FFFFFF; font-size: 1.5em; font-weight: normal; }
#contact #contact_form header p { width: auto; position: relative; left: 70px; top: 3px; color: #FFFFFF; font-size: 1.2em; line-height: 1.5em; }
#contact #contact_form form { position: relative; top: 27px; left: 49px; }
#contact #contact_form form input[type=text],#contact #contact_form form input[type=email], #contact #contact_form form textarea { 
	width: 300px;
	font-family: Arial, sans-serif;
	font-size: 1em;
	border: none; 
    -moz-box-shadow:    3px 3px 1px 1px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 1px 1px rgba(0,0,0,0.5);
	box-shadow:         3px 3px 1px 1px rgba(0,0,0,0.5);
    padding: 8px;
    background: rgba(255,255,255,1);
    margin: 0 0 10px 0; 
}
#contact #contact_form form input[type=button],#contact #contact_form form input[type=submit] {
	width: 85px;
	height: 35px;
	font-family: "Agency FB", "Roboto", Arial, sans-serif;
	font-size: 1.5em;
	color: #FFF;
	border: none; 
    -moz-box-shadow:    3px 3px 1px 1px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 1px 1px rgba(0,0,0,0.5);
	box-shadow:         3px 3px 1px 1px rgba(0,0,0,0.5);
	background: #c2517c;
    margin: 0 0 10px 0; 
	position: relative;
	left: 232px;
}
#contact #contact_form form input[type=button]:hover,#contact #contact_form form input[type=submit]:hover { background: #f06eaa; cursor: pointer; }
#contact #contact_form .error { color: #ffcc33; background: #000; background: rgba(0,0,0,0.4); font-size: 1.2em; font-family: Arial; width: 300px; padding: 5px 10px; display: none; }
#contact #contact_form #contact_tymsg { display: none; position: absolute; top: 145px; }
#contact #contact_form #contact_tymsg h3 { margin: 0; padding: 5px 20px; width: 220px; height: 30px; position: relative; top: 3px; z-index: 3; overflow: hidden; background: #c2517c; color: #FFF; font-size: 1.8em; font-weight: normal; letter-spacing: 1.1px; }
#contact #contact_form #contact_tymsg p { width: 260px; padding: 5px 20px; position: relative; left: 70px; top: 3px; background: #000; background: rgba(0,0,0,0.6); color: #FFFFFF; font-size: 1.2em; line-height: 1.5em; }

#contact .rect { background: #000000; position: absolute; }
#contact #other_methods  { width: 400px;  position: absolute; top: 230px; right: 50px; }
#contact #other_methods header h3 { margin: 0; padding: 5px 20px; width: 235px; height: 30px; position: relative; z-index: 3; overflow: hidden; background: #c2517c; color: #FFF; font-size: 1.8em; font-weight: normal; letter-spacing: 1.1px; }
#contact #other_methods article { width: 300px; height: 140px; position:relative; top: -15px; left: 20px; padding: 30px; overflow: hidden; background: #000; background: rgba(0,0,0,0.6); color: #FFFFFF; font-size: 1.3em; line-height: 1.7em; }
#contact #other_methods article a { color: #FFFFFF; text-decoration: none; }


/*color classes*/
/*font colors*/
.pink { color: #c2517c; }
.maroon { color: #441328; }
.black { color: #000; }
.white { color: #FFF; }
/*bkg colors*/
.pinkBkg { background-color: #c2517c; }
.blackBkg { background-color: #000; }
.whiteBkg { background-color: #FFF; }