/********** CSS RESET **********/
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;
    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;
}


/********** TYPOGRAPHY STYLES **********/
h1 {font:500 1.625em/150% 'museo-slab', serif; text-transform:uppercase;}
#whoWeAre h1 {color:#fafafa;}
.ourTeam h1 {color:#08242f;}
#contact h1, #contact h3 {color:#fafafa;}
h2 {color:#08242f; font:500 1.500em 'museo-slab', serif; text-transform:uppercase;}
h3 {font:500 italic 1.250em 'museo-slab', serif;}
p {font:500 1.500em/120% 'pt-sans', sans-serif;}
#whoWeAre p {color:#fafafa;}
.ourTeam p, .projects p, .projects a {color:#08242f; font:500 1.000em 'museo-slab', serif; text-decoration:none;}
.projects a:hover {text-decoration:underline;}
#headerContainer p {color:#08242f; font:500 italic 0.750em 'museo-slab', serif;}
#nav li, #nav li a {color:#08242f; font:500 0.875em 'museo-slab', serif; text-decoration:none;}
#nav li a:hover {text-decoration:underline;}
.projectsTagline {font-style:italic; text-transform:none;}
.seeMore, .contactSeeMore {font:500 0.875em 'museo-slab', serif; text-decoration:none;}
.contactBottom h1 {text-transform:none;}
.footer li, .footer li a {color:#fafafa; font:500 0.875em 'museo-slab', serif; text-decoration:none;}
.footer li a:hover {text-decoration:underline;}



/********** MAIN STYLES **********/
body {background:#fafafa;}



/********** NAV STYLES **********/
#nav {background:rgba(250,250,250,0.9); border-bottom:1px solid #08242f; margin:0 auto; position:fixed; top:0; width:100%;}
#nav ul {padding:9px 0; text-align:center;}
#nav li {display:inline; margin-right:30px; width:25%;}
#nav li:last-child {margin-right:0;}



/********** HEADER STYLES **********/
#headerContainer {border-bottom:1px solid #08242f;}
.header {margin:0 auto; padding-top:165px; max-width:460px;}
.logo {height:255px; margin:0 auto; padding-bottom:115px; max-width:255px;}
.tagline {text-align:center;}
.scrollDown {margin:0 auto; margin-bottom:-8px; padding-top:180px; text-align:center;}



/********** WHO WE ARE STYLES **********/
#whoWeAre {background:#08242f; margin-top:180px; padding:260px 0 260px 0; text-align:center;}
#whoWeAre h1 {margin-bottom:50px;}
#whoWeAre p {margin:0 auto; max-width:940px;}



/********** OUR TEAM STYLES **********/
#ourTeamContainer {border-bottom:1px solid #08242f;}
.ourTeam {margin:0 auto; max-width:960px; padding-top:65px; text-align:center;}
.ourTeam p {margin-top:20px;}
.member {display:inline-block; margin:65px 85px 30px 0;}
.member1, .member2, .member3, .member4 {background:url('images/member.jpg') center no-repeat; display:inline-block; height:260px; width:260px; text-indent:-9999px;}
.member1:hover {background:url('images/cofounder.jpg') center no-repeat;}
.member2:hover {background:url('images/dan.jpg') center no-repeat;}
.member3:hover {background:url('images/designer.jpg') center no-repeat;}
.member4:hover {background:url('images/christina.jpg') center no-repeat;}
.memberLast {margin-right:0;}
#ourTeamContainer .scrollDown {padding-top:130px;}


/********** PROJECTS STYLES **********/
#projectsContainer {border-bottom:1px solid #08242f;}
.projects {margin:0 auto; max-width:960px; padding-top:65px; text-align:center;}
.work {display:inline-block; margin:60px 152px 0 0;}
.project1 {background:url('images/laserCosmetica.jpg') center no-repeat; border:1px solid #08242f; display:inline-block; height:400px; width:400px;}
.project1:hover {background:url('images/laserCosmeticaHover.jpg') center no-repeat;}
.project2 {background:url('images/jimiF.jpg') center no-repeat; border:1px solid #08242f; display:inline-block; height:400px; width:400px;}
.project2:hover {background:url('images/jimiFHover.jpg') center no-repeat;}
.work p {margin-top:20px;}
.workLast {margin-right:0;}
.projectsTagline {display:block; margin-top:160px;}
.seeMore {background-color:transparent;	border:4px solid #08242f; color:#08242f; display:inline-block; margin-top:40px; padding:15px 35px;}
.seeMore:active {position:relative; top:1px;}
#projectsContainer .scrollDown {padding-top:90px;}



/********** CONTACT STYLES **********/
#contact {text-align:center;}
.contactTop {background:#08242f; padding:140px 0 70px 0;}
.contactTop h3 {margin-top:20px;}
.contactSeeMore {background-color:transparent;	border:4px solid #fafafa; color:#fafafa; display:inline-block; margin-top:105px; padding:15px 35px;}
.contactSeeMore:active {position:relative; top:1px;}
.contactBottom {background:#06736c; padding:150px 0 180px 0 ;}
.phone {margin-bottom:90px;}
.footer {background:#06736c; border-top:1px solid #fafafa; margin:0 auto; width:100%;}
.footer ul {padding:9px 0; text-align:center;}
.footer li {display:inline; margin-right:30px; width:25%;}
.footer li:last-child {margin-right:0;}