@font-face {
    font-family: 'H-Light';
    src: url('helveticaneueltstd-ultlt-webfont.eot');
    src: url('helveticaneueltstd-ultlt-webfont.eot?#iefix') format('embedded-opentype'),
         url('helveticaneueltstd-ultlt-webfont.woff') format('woff'),
         url('helveticaneueltstd-ultlt-webfont.ttf') format('truetype'),
         url('helveticaneueltstd-ultlt-webfont.svg#HelveticaNeueLTStdUltLtRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

body { font-family: Helvetica,Arial,sans-serif; }
h1, h2, h3 { font-family: 'H-Light',Helvetica,Arial,sans-serif; font-weight: normal; }
h1 { font-size: 60px; margin-top:200px; }

.logo { font-weight: bold; font-size: 70px; font-family: Helvetica,Arial, sans-serif; text-align: left; width:150px; margin:100px auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; }

#wrapper { width:900px; margin:0 auto; display: block; position: relative; z-index: 5; }
#content {  }

#mission { margin-bottom:200px; margin-left:300px; }
#mission h2 { margin-bottom:18px; font-size: 28px; letter-spacing: 1px; margin-right:30px; }

a { color:#555; }

.project { margin-bottom:100px; width:900px; position: relative; min-height: 350px; }
.project img { position: absolute; top:16px; left:0; }
.project p { line-height: 18px; font-size: 14px; padding: 0; margin: 0; margin-top:8px; }
.project .description { margin-left:670px; position: relative; }
.project h2 { font-family:24px; letter-spacing: 1px; }
.project h3 { font-size:20px; letter-spacing: 1px; }
h2,h3 { margin:0; }

#bg { position: fixed; top:0; left:0; width:100%; height: 100%; background: url(bg.jpg) center; background-size: 100% 100%; z-index: 0; }

#bg iframe { position: absolute; bottom:10px; right:10px; width:80px !important; }

.project p.quote { margin-right:6px; font-family: 'H-Light',Helvetica,Arial,sans-serif; font-weight: normal; letter-spacing:1px; font-size: 16px; line-height: 19px; }
.project p.source { text-align: right; font-size: 12px; }

a.action { font-size: 16px; font-weight: bold; }

 @media only screen and (max-width:600px) {
    .project {
        min-height: 100px;
        width: 100%;
        margin-bottom: 60px;
    }
    .project img {
        position: relative;
        top: auto;
        left: auto;
        max-width: 100%;
    }
    #wrapper {
        width: 100%;
    }
    .project .description {
        margin-left: 0;
        margin-top: 20px;
    }
    h1 {
        margin-top: 50px;
        font-size: 50px;
    }
    #mission {
        margin-left: 0;
        margin-bottom: 70px;
    }
    .logo {
        font-size: 50px;
    }
}