/*CSS Reset*/
body, div, dl, dt, dd, li, pre,
form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; } 
caption, th { text-align: left; font-weight: normal; font-style: normal; }
acronym, abbr, fieldset, img { border: 0;}
:focus { outline: 0; }


/*GLOBAL STYLES*/
html { 
	background: url('../img/html_bg.png') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
body {color: #2d2d2d; font-family: Helvetica, Arial, sans-serif; line-height: 1.4; font-weight: 300; }
h1, h2, h3, h4, h5, a {font-family: 'Oswald'; letter-spacing: 1px; }
img { border: none; }
h2 {font-size: 1.3em;}
p {margin-bottom: 1em;}
ul {list-style: none;}
li {float: left;}
a {text-decoration: none; color: #267bb2;}
a:hover {text-decoration: underline;}

.cFix {clear: both;}
.bold {font-weight: 400;}
.ital {font-style: italic;}
.enlarge { font-size: 16px; }

#container {position: relative; width: 800px; margin: 10px auto 0 auto;}

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

header {height: 160px;}
img.mobile {display:none;}
nav {height: 150px;}
footer {width: 800px; margin: 0 auto;}


/*NAVIGATION STYLES*/

#navigationMenu {width: 505px; margin: 0 auto;}
#navigationMenu span{width:0; height: 0; top:100px; text-align: center; font-family: 'Oswald'; font-weight: 400; text-transform: uppercase; position: absolute; overflow: hidden; background: #454545; color: #e9e9e9;
	-webkit-transition: .25s;
	-moz-transition: .25s;
	transition: height .25s;
}

#navigationMenu a{background:url('../img/nav_icons.png') no-repeat; height: 100px; display: block; position: relative; margin: 0 10px;}
#navigationMenu a:hover span{ width: 100%; height: 30px; padding-top: 10px; overflow: visible; }
#navigationMenu a:hover{transition: 2s; text-decoration:none;}

#navigationMenu .home {	width: 105px; background-position: 0 0; }
#navigationMenu .home:hover, #navigationMenu .home.active { background-position: 0 -100px; }

#navigationMenu .portfolio { width: 122px; background-position: -105px 0;}
#navigationMenu .portfolio:hover, #navigationMenu .portfolio.active { background-position: -105px -100px;}

#navigationMenu .resume { width: 88px; background-position: -227px 0;}
#navigationMenu .resume:hover, #navigationMenu .resume.active { background-position: -227px -100px;}

#navigationMenu .contact { width: 110px; background-position: -315px 0;}
#navigationMenu .contact:hover, #navigationMenu .contact.active { background-position: -315px -100px;}



/*CONTENT STYLES*/

#about img {float: left; width: 300px; margin-right: 20px; 
-webkit-box-shadow: 0px 0px 6px 1px #438ebe;
box-shadow: 0px 0px 6px 1px #438ebe;}

.port_item{width: 100%; min-height: 250px; padding: 10px 0; margin: 10px 0; color: #333;}
.port_item h3 {padding: 7px; text-align: right; text-transform: uppercase; background: #333; color: #438ebe;}
.port_img {position: relative; overflow: hidden; float: left; width: 250px; height: 250px; margin-right: 15px; border: 1px solid #333;}
.port_desc p {margin-top: 10px; font-size: 14px;}

span.img_details {position: absolute; bottom: -200px; left: 0; padding: 8px; font-size: 14px; background: rgba(0,0,0,0.5); color: #e9e9e9; }

a.dl {color: #99cc33; display: block;}
a.dl2 {color: #009933; display: block;}

#project_images {width: 200px; margin-right: 30px; float: left; text-align: center; }
#project_images img {width: 200px; margin-bottom: 10px; float: left;}
#project_desc {width: 560px; float: left;}
#project_desc h2 {font-size: 1.8em; margin-bottom: .7em; margin-left: -1px}
#project_desc a.dl {margin-bottom: 16px;}
#project_desc a.dl2 {margin-bottom: 1px;}

#project_images_portrait {width: 230px; margin-right: 10px; float: left; text-align: center; }
#project_images_portrait img {width: 100px; margin-bottom: 10px; float: left; padding-right: 10px;}

ul.project, .job ul {list-style: disc; padding-left: 40px; margin-bottom: 16px; }
ul.project li, .job ul li {float:none; }


#social_icons a {width: 50px; height: 50px; background:url('../img/social_icons.png') no-repeat; display: block; float: left; position: relative; margin: 0 5px 10px 0;}
#social_icons a.email {background-position: 0 0;}
#social_icons a.email:hover {background-position: 0 -50px;}
#social_icons a.facebook {background-position: -50px 0;}
#social_icons a.facebook:hover {background-position: -50px -50px;}
#social_icons a.linkedin {background-position: -100px 0;}
#social_icons a.linkedin:hover {background-position: -100px -50px;}
#social_icons a.twitter {background-position: -150px 0;}
#social_icons a.twitter:hover {background-position: -150px -50px;}


#promo_grid {background: url('../img/controller4.png') no-repeat; margin-top: 60px;}
#promo_grid h2 {font-size: 1em; margin-bottom: 8px; padding: 4px; background: #333; text-align: center; text-transform: uppercase; color: #99cc33;}
#promo_grid img {width: 140px; float: left; margin-right: 10px;}
#promo_grid img.social {width: 25px; float: none;}
#promo_grid p {font-size: 16px; font-family: 'Oswald'; letter-spacing: 1px;}

#promo_grid#social_icons {width: 250px; margin: 0 auto;}

#controller {position: relative; width: 400px; height: 300px; float: left;}
#controller div {position: absolute; display: block; width: 30px; height: 30px; opacity: 0.9;}
#controller #btn_1 {top: 20px; left: 210px; background: url('../img/c_btn_yellow.png') no-repeat;}
#controller #btn_2 {top: 35px; left: 235px; background: url('../img/c_btn_red.png') no-repeat;}
#controller #btn_3 {top: 62px; left: 222px; background: url('../img/c_btn_green.png') no-repeat;}
#controller #btn_4 {top: 46px; left: 197px; background: url('../img/c_btn_blue.png') no-repeat;}
	#btn_1:hover {opacity: 1;}
	#btn_2:hover {opacity: 1;}
	#btn_3:hover {opacity: 1;}
    #btn_4:hover {opacity: 1;}
	#controller div#btn_1:active {background: url('../img/c_btn_yellow_active.png') no-repeat; opacity: 1;}
	#controller div#btn_2:active {background: url('../img/c_btn_red_active.png') no-repeat; opacity: 1;}
	#controller div#btn_3:active {background: url('../img/c_btn_green_active.png') no-repeat; opacity: 1;}
#controller div#btn_4:active {background: url('../img/c_btn_blue_active.png') no-repeat; opacity: 1;}
#controller .d-pad {
	width: 20px;
	height: 20px;
}
#up {
	top: 118px; left: 100px;
}
#down {
	top: 149px; left: 114px;
}
#left {
	top: 140px; left: 92px;
}
#right{
	top: 126px; left: 122px;
}

ol.slider {margin: 0; padding: 0; float: left; list-style: none;}
.slider{position: relative; width: 1200px;}
.slider_window {position: relative; width: 400px; height: 330px; overflow: hidden;}
.slider_panel {position: relative; width: 400px; height: 270px; float: left; }

footer {padding-top: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; font-family: Helvetica, Arial; letter-spacing: 0; border-top: 1px solid #8e8e8e; color: #666;}



/*RESUME STYLES*/
section#resume {padding: 30px; background: #f9f9f9; border-top: 6px solid #666; border-bottom: 2px solid #666; }
section#resume p {font-family: Helvetica, Arial; font-size: 14px; letter-spacing: 0px; padding-right: 2em;}
#resume .row {padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #ccc;}
#resume .row.last, .job.last { border: none; }
#resume .row:before {clear: both;}
#resume_header {width: 740px;}
#resume_header .name-info {float: left; width: 530px; font-style: italic; padding-top: 30px;}
#resume_header .name-info h2 {font-size: 2.7em; text-transform: uppercase; font-style: normal; letter-spacing: 3px;}
#resume_header .contact-info {float: left; width: 210px;}
a#pdf {display: block; width: 150px; height: 50px; padding-left: 55px; padding-top: 15px; margin-bottom: 6px; background: url('../img/icon-pdf.png') no-repeat; color: #666; }
a#pdf:hover {background: url('../img/icon-pdf_hover.png') no-repeat;}
a#word {display: block; width: 150px; height: 50px; padding-left: 55px; padding-top: 15px; margin-bottom: 6px; background: url('../img/icon-word.png') no-repeat; color: #666; }
a#word:hover {background: url('../img/icon-word.png') no-repeat;}
.res_phone {display: block;}
a.res_mail:hover {text-decoration: underline;}

#resume_body .res_heading {width: 180px; height: auto; float: left; font-size: 1.3em; font-style: italic;}
#resume_body .res_heading h4 {color: #438ebe;}
#resume_body .left_container {width: 560px; float: left;}

#resume .res_profile p {font-size: 18px;}

.skills-list ul { margin: 0; float: left; font-family: Helvetica, Arial; letter-spacing: 0; font-size: 14px;}
.skills-list li { width: 85%; margin: 3px 0; padding-right: 30px; border-bottom: 1px solid #ccc; line-height: 24px; }
.skills-list li.last {border: none;}
.talent { width: 180px; float: left; margin: 0; }
.talentTech { width: 110px; padding-right: 10px; float: left; margin: 0; }
.talentTech2 { width: 130px; padding-right: 10px; float: left; margin: 0; }
.talent h4 {margin-bottom: .5em;}

.job { position: relative; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #ccc; }
.job h4 { position: absolute; top: 0.35em; right: 0 }
.job p { margin: 0.75em 0 1em 0; }
.job.last {margin-bottom: 0;}

.education h3 {margin-bottom: 1.7em;}

/*Responsive Mobile Styles*/
@media screen and (max-width: 480px) {
	#header, footer, #about img {width: 100%;}
	#container {width: 90%;}
	#about img {margin-bottom: 20px;}
	#header img {width: 100%;}
	#navigationMenu {width: 100%;}
	
	img.mobile {display:block;}
	img.desktop {display:none;}
	
	#controller {width: 90%;}
	.slider_window {width: 290px; height: 355px;}
	.slider_panel {width: 290px;}
	
	nav {height: 120px; margin-top: 20px; padding-top: 15px;}
	nav ul {-webkit-border-top-left-radius: 15px;
		-webkit-border-bottom-right-radius: 15px;
		border-top-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}
	nav li {
		margin: 0px;
	}
	#navigationMenu {background: #454545; height: 80px;}
	#navigationMenu span {top: 70px; font-size: 11px;}
	#navigationMenu a{background:url('../img/nav_icons_mobile.png') no-repeat; height: 74px; display: block; position: relative; margin: 0;}
	#navigationMenu a:hover span{ width: 100%; height: 20px; padding-top: 10px; overflow: visible; }
	#navigationMenu a:hover{transition: 2s; text-decoration:none;}
	
	#navigationMenu .home {	width: 71px; background-position: 0 0; }
	#navigationMenu .home:hover, #navigationMenu .home.active { background-position: 0 -74px; }
	
	#navigationMenu .portfolio { width: 80px; background-position: -79px 0;}
	#navigationMenu .portfolio:hover, #navigationMenu .portfolio.active { background-position: -79px -74px;}
	
	#navigationMenu .resume { width: 60px; background-position: -167px 0;}
	#navigationMenu .resume:hover, #navigationMenu .resume.active { background-position: -167px -74px;}
	
	#navigationMenu .contact { width: 74px; background-position: -231px 0;}
	#navigationMenu .contact:hover, #navigationMenu .contact.active { background-position: -231px -74px;}
	
	.port_img, .port_img img { width: 150px; height: 150px;}
	.port_img span { display: none; }
	
	#project_images img {
		width: 134px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

#project_images_portrait img {
		width: 134px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	
	#resume_header, #resume_header .name-info, #resume_body .left_container, .talent, #project_images, #project_desc { width: 100%; }
	.name-info h2 { font-size: 20px; }
	section#resume { padding: 10px; }
	
	a#pdf { margin-top: 10px; margin-bottom: 0; }
	.job h4 { position: static; margin-top: 10px; }

}