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


/* Hero Area */
.heroArea{ height:375px; background-position:center top; background-image:url(../img/hero1.png); background-color:#00aeef; background-repeat:no-repeat;background-attachment:fixed;}



/* About Area */
.about{background-image:url(../img/wedge2.png), url(../img/aboutme2.png) ; background-position:center bottom, center top; background-size: 100% auto ; background-repeat:no-repeat;  padding-top:60px; width:100%; min-height:575px; background-color:#00aeef;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/aboutme2.png', sizingMethod='scale')";  }
.about .aboutInner{width:960px; margin:0px auto; }
.about .aboutInner .bkgDiv{background-color:#000; opacity:0.4; width:470px; padding:5px; filter:alpha(opacity=40); }
.about .aboutInner .aboutTextHolder{ background: rgb(0, 0, 0); color:#fff; width:470px; padding:5px; background: rgba(0,0,0,.6); margin-top:0px; }
div.aboutTextHolder h2{font-size:300%; margin-bottom:.5em; font-weight:normal;}
div.aboutTextHolder h3{font-size:100%;  font-weight:700;}
div.aboutTextHolder p{font-size:85%; line-height:150%; margin-bottom:2em;}

/* Resume Section */
.resume{background-color:#00aeef; color:#fff; overflow:hidden;zoom:1; }
div.resume div.resContent{width:970px; margin:0px auto;  }
div.resContent div.mainResumeContent{float:left; width:620px; margin-right:20px; background-color:#e2ecff; color:#000; background-image:url(../img/resMain_bkg.png); background-repeat:no-repeat; background-position:top left; padding:40px 5px 5px 5px; position:relative; top:-1em;}
div.resContent div.subResumeContent{float:left; width:310px; background-color:#0a94bc; background-image:url(../img/ressub_bkg.png); background-repeat:no-repeat; background-position:top left; padding:20px 5px 5px 5px; position:relative; top:-31px;}
div.resContent h2{font-size:300%;  z-index:2; position:relative;
/* Rotate div */
transform:rotate(-2.8deg);
-ms-transform:rotate(-2.8deg); /* IE 9 */
-webkit-transform:rotate(-2.8deg); /* Safari and Chrome */

}
div.resContent h3{font-size:125%;  margin-bottom:1.25em; font-weight:700;}
div.resContent h4{font-size:80%; line-height:150%; font-weight:700; }
div.resContent p{font-size:80%; line-height:150%; margin-bottom:2em;}
div.resContent blockquote{margin-left:15px;}
div.resContent strong{ font-weight:700;}
div.resContent em{ font-style:italic;}


/* Music Section */
.music {background-color:#fff200; margin-bottom:1px; margin-top:1px;}
.music div.musicInner{ width:960px; margin:0px auto; background-image:url(../img/musicBKG.png); padding-top:60px; padding-bottom:60px;}
div.musicInner h2{font-size:300%; margin-bottom:.5em; font-weight:normal;}
div.musicInner p{font-size:85%; line-height:150%; margin-bottom:2em; width:60%;}


/* Contact Section */
body.contactBody{ margin:0; background-color:#EC008C; color:#fff; height:800px;}
.contactBody h2{font-size:300%;  margin-bottom:.5em; margin-top:60px;}
.contactBody p{font-size:80%; line-height:150%; margin-bottom:2em; width:480px;}
div.contactContainer{width:960px; margin:0px auto;}
div.contactContainer form{width:960px;}
div.contactContainer label{display:block; font-weight:bold; font-size:80%;}
div.contactContainer input.field{border:0px; display:block; width:50%; margin-bottom:20px; font-size:125%; padding:3px;}
div.contactContainer input.submit{display:block; width:50%; margin-bottom:20px; font-size:125%; padding:3px;}
div.contactContainer textarea{border:0px; display:block; width:50%; margin-bottom:20px; padding:3px;}
div.contact iframe{width:100%; overflow:hidden; min-height:700px; margin-bottom:1px;} 

/* Footer */
footer {background-color:#000;  color:white; }
div.innerFooter{ padding-top:10px; padding-bottom:400px; margin:0px auto; width:960px; font-size:80%; color:#CCCCCC;}

/* port */
div.work iframe{ overflow:hidden; border:0px; height:700px;}
body.access{background-color:#e7e7e8;  background-size:100% 90%; background-image:url(../img/portSwoop2.png); background-position:top center; background-repeat:no-repeat; min-height:475px;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img//portSwoop2.png', sizingMethod='scale')"
}
div.accessInner{ margin:0px auto; width:960px; height:650px;}
div.accessInner h2{font-size:300%;  margin-bottom:.5em; margin-top:60px;}
div.accessInner p{font-size:80%; line-height:150%; margin-bottom:2em; width:60%;}
div.accessInner  label{display:block; font-weight:bold; font-size:80%;}
div.accessInner input{ display:block; margin-bottom:5px; font-size:100%; padding:3px; }
div.accessInner input.text{  width:33%; border:1px solid #bbb; font-size:125%;}
div.accessInner input.button{padding:3px 10px; margin-top:-10px; }

body#portfolio{background-color:#e7e7e8;}
#navPage{background-size:100% 90%; background-image:url(../img/portSwoop2.png); background-position:top center; background-repeat:no-repeat; min-height:475px; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img//portSwoop2.png', sizingMethod='scale')";  }
#navPage #portNav{ margin:0px auto; width:960px; height:650px;}
#navPage nav ul li{display:inline-block; width:176px; height:142px; margin-right:15px; margin-bottom:36px; overflow:hidden;}
#navPage nav ul li.lineEnd{ margin-right:0px;}
#navPage nav ul li a{ text-decoration:none; border:0;}
#navPage nav ul li a img{border:1px solid #666;}
#navPage nav ul li a div{position:relative; bottom:0px; color:#fff;  background-color:#000; background-color: rgba(0,0,0,.6); height:32px; padding:3px; width:170px; left:1px; font-size:75%;
transition:bottom, .5s;
-webkit-transition:bottom, .5s;

}
#navPage strong{ font-weight:700;}

#navPage h2{font-size:300%;  margin-bottom:.5em; margin-top:60px;}
#navPage nav ul li a:hover div{bottom:38px;}
div.portPageContainer{background-color:#e7e7e8; height:700px; }
div.portPageContainerArrows{ margin:0px auto; background-color:#e7e7e8; height:640px; width:1160px; }
div.portPageContainer .portPage{width:960px;  padding-top:60px; margin:0px auto; }
div.portPageContainerArrows .portPage{width:960px;  padding-top:60px; float:left; vertical-align:top;}
div.portPageContainer #leftArrowArea{display:none;}
div.portPageContainerArrows #leftArrowArea{width:70px;  padding-top:265px; text-align:right; padding-left:30px; float:left;}
div.portPageContainer #rightArrowArea{display:none;}
#rightArrowArea{width:70px;   padding-top:265px; padding-left:30px; text-align:left; float:left;}
#leftArrowArea a{display:block;width: 0px; 
height: 0px;
border-style: solid;
border-width: 50px 47px 50px 0;
border-color: transparent #00afef transparent transparent;
}
#rightArrowArea a{width: 0px;display:block;
height: 0px;
border-style: solid;
border-width: 50px 0 50px 47px;
border-color: transparent transparent transparent #00afef;}
div.portPageContainer a.arrow:hover{border-color: transparent transparent transparent #EC008C;}
.hide{display:none;}

ul.portPlaceNoter{ clear:both;}
ul.portPlaceNoter li {display:inline-block;  margin-right:10px; margin-top:20px;}
ul.portPlaceNoter li:last-child{margin-right:0px;}
ul.portPlaceNoter li a {display:block; background-color:#939598;width:87px; height:8px; }
ul.portPlaceNoter li a.active{ background-color:#00afef;}
ul.portPlaceNoter li a:hover{ background-color:#EC008C;}

.portPage h2{font-size:300%;  margin-bottom:.5em; }
.portPage h3{font-size:80%; line-height:150%; font-weight:700; }
.portPage p{font-size:80%; line-height:150%; margin-bottom:2em;}
.portPage strong{font-weight:700;}
.portPage .portLeftCol{width:460px; margin-right:20px; float:left; margin-bottom:15px;}
.portPage .portRightCol{width:460px; float:left;}
.portRightCol ul{display:table; width:100%; margin-bottom:10px;}
.portRightCol ul li{display:table-cell;  }
.portRightCol ul li a{ display:block; background-image:url(../portfolio/img/tab.png); height:34px; color:black; text-decoration:none; font-size:80%; line-height:150%; font-weight:700; text-align:center; background-position:bottom;}
.portRightCol ul li a.here{ background-image:url(../portfolio/img/tab_here.png), url(../portfolio/img/tab.png); background-position:center bottom, left bottom; background-repeat:no-repeat, repeat;}
.portRightCol ul li:first-child a{display:block; background-image:url(../portfolio/img/tab_left.png),url(../portfolio/img/tab.png); height:34px; color:black; text-decoration:none; font-size:80%; line-height:150%; font-weight:700; text-align:left, left; background-position:bottom left, bottom left; background-repeat:no-repeat, repeat-x;}
.portRightCol ul li:last-child a{display:block; background-image:url(../portfolio/img/tab_right.png),url(../portfolio/img/tab.png); height:34px; color:black; text-decoration:none; font-size:80%; line-height:150%; font-weight:700; text-align:right, center; background-position:bottom right, bottom left; background-repeat:no-repeat, repeat-x;}


.portRightCol ul li:first-child a.here{ background-image:url(../portfolio/img/tab_here.png),url(../portfolio/img/tab_left.png), url(../portfolio/img/tab.png); background-position:center bottom, left bottom , left bottom; background-repeat:no-repeat, no-repeat, repeat;}
.portRightCol ul li:last-child a.here{ background-image:url(../portfolio/img/tab_here.png), url(../portfolio/img/tab_right.png), url(../portfolio/img/tab.png); background-position:center bottom, right bottom , left bottom; background-repeat:no-repeat, no-repeat, repeat;}
.portRightCol img{ border: 1px solid #cac8c8;}








/* Navbar */
.navbar{margin-left:0;list-style:none;  height:60px; background-color: #FFF; width:100%; z-index:5;
-webkit-box-shadow:  1px 1px 3px 3px rgba(00, 00, 00, .2);
        
        box-shadow:  1px 1px 3px 3px rgba(00, 00, 00, .2);
	
}
.fixed { position:fixed; top:0px;}
.navContainer{width:960px; margin:0px auto; padding-top:15px;}
h1.name{width:40%; float:left; background-image:url(../img/ux.png); background-repeat:no-repeat; background-position:left top; padding:0px 0px 10px 35px; height:35px; font-size:200%;}
h1.name a{ text-decoration:none; color:black;}
.nav{ list-style:none;  float:right; margin:0px; padding:0px;  }
.nav li{display:inline-block; padding:5px 3px; font-size:133%;  border-bottom:3px solid #aaaaaa; width:80px; text-align:center;}
.nav li.active{border-bottom:3px solid #00aeef;}
.nav li a:link{ color:black; text-decoration:none;}
.nav li a:visited{ color:black; text-decoration:none;}


/* lightbox */

div#overlay{display:none; padding:10px; z-index:6; border: 1px solid #000; background-color:#fff; position:fixed; top:0px; left:0px;}
div#overlay img#overlayImage{border:1px solid #CCC;}
div#overlay div#caption img.close{float:right; cursor:pointer;}
div#lightboxBackground{ display:none; position:fixed; left:0px; top:0px; height:100%; width:100%; z-index:2; background-color:#000;             -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: alpha(opacity=50);
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
	
}










html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
 	font-family: 'Noto Sans', sans-serif;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}