article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; image-rendering: optimizeQuality; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } @-ms-viewport { width: device-width } @viewport { width: device-width } * { box-sizing: border-box; } html { font-size: 87.5%; line-height: 1.5; } html, body { height: 100%; } body { min-width: 15em; font-family: 'Montserrat', 'Helvetica Neue', sans-serif; font-weight: bold; background-color: #e5e5e5; background-image: url(../static/graphicsurgery-dark.png),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR42mN8+p+BgRFEAAAWrwPLzYNPyAAAAABJRU5ErkJggg==); background-repeat: no-repeat, repeat; background-size: 75% auto, auto; background-position: center center, top left; background-attachment: fixed, fixed; color: #111111; } .svg body { background-image: url(../static/graphicsurgery-dark.png),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR42mN8+p+BgRFEAAAWrwPLzYNPyAAAAABJRU5ErkJggg==); } body#home, body#info { background-image: none,
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR42mN8+p+BgRFEAAAWrwPLzYNPyAAAAABJRU5ErkJggg==); } body#work .content { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a { color: inherit; } a:hover { text-decoration: none; } ::-moz-selection { background-color: #cdcdcd; } ::selection { background-color: #cdcdcd; } ::-moz-selection { background-color: #cdcdcd; } .hidden { visibility: hidden; } nav a { text-decoration: none; } nav a:hover, nav a.current { border-bottom: .145em solid; } nav ul { list-style: none; padding: 0; } nav li { display: inline-block; } nav li + li { margin-left: .5em; } iframe { border: 0; } img { display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto; } ol { list-style: none; padding: 0; } ol li { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .content { width: 100%; margin: 0 auto; display: table; table-layout: fixed; } .content.first { margin-top: -4.5em; } .content.last { margin-bottom: -4.5em; } .content.first.last { height: 100%; } .content > .wrap { padding: 0 1.5em; } .content > .center { display: table-cell; vertical-align: middle; text-align: center; } .content > .center.loading { background-image: url(../static/loading.gif); background-repeat: no-repeat; background-position: center center; } .content.first > .wrap { padding-top: 4.5em; } .content.last > .wrap { padding-bottom: 4.5em; } .content + .content { padding-top: 1.5em; } .content + .content.zoomed { padding-top: 0; } .header, .footer { position: relative; z-index: 3; } .header { position: relative; display: block; padding: 1.5em; } .header h1 { display: none; } .header nav { text-transform: uppercase; } .header nav ul { margin: 0; } .header .paginate { position: absolute; top: 1.5em; right: 1.5em; } .footer { position: relative; display: block; padding: 1.5em; text-align: center; text-transform: lowercase; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer .links, .footer .made-by { display: inline-block; vertical-align: bottom; } .footer .made-by { position: absolute; left: 1.5em; margin: 0; } .footer .made-by a { text-decoration: none; display: inline-block; border: 0; } .made-by a em { font-style: normal; } .made-by a:hover em { border-bottom: .145em solid; } .made-by a span { display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; max-width: 0; transition: max-width .3s ease-in-out; } .made-by a:hover span { max-width: 7em; } .footer .links { position: absolute; right: 1.5em; } .footer .links li { display: inline-block; margin-left: .5em; line-height: 1.5em; } .footer .links li:first-child { margin-left: 0; } .footer .links a { text-decoration: none; border: 0; width: 1.5em; height: 1.5em; display: inline-block; text-align: center; color: #e5e5e5; background-color: #111111; border-radius: .145em; } .footer .links a { text-indent: -9999em; background-image: url(../static/icons.png); background-repeat: no-repeat; background-color: inherit; } .svg .footer .links a { background-image: url(../static/icons.svg); background-size: auto 1.5em; } .footer .links a.vimeo { background-position: 0 center; } .footer .links a.twitter { background-position: -1.5em center; } .footer .links a.instagram { background-position: -3em center; } .footer .links a.flickr { background-position: -4.5em center; } .footer .links a.facebook { background-position: -6em center; } ol.projects { list-style: none; padding: 0; margin: 0; } ol.projects > li { padding: 1.5em; } ol.projects article.project { position: relative; } ol.projects .bw { display: block; text-align: center; -webkit-filter: url('../static/filter.svg#grayscale'); filter: url('../static/filter.svg#grayscale'); -webkit-filter: gray(); filter: gray(); -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: -webkit-filter .5s; transition: filter .5s; transition: filter .5s, -webkit-filter .5s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } ol.projects .bw:hover { -webkit-filter: none; filter: none; -webkit-filter: grayscale(0%); filter: grayscale(0%); } ol.projects article.project > header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; } ol.projects div.project-content { display: table; table-layout: fixed; height: 100%; width: 100%; } ol.projects div.project-center { display: table-cell; vertical-align: middle; } ol.projects hgroup { background-color: #fff; padding: 1em 1.5em; display: inline-block; } .no-touch ol.projects hgroup { background-color: #fff; display: inline-block; padding: 1em 1.5em; opacity: 0; transition: opacity .4s ease-in-out; } .no-touch ol.projects .bw:hover hgroup { opacity: 1; } ol.projects article.project h3, ol.projects article.project h4 { margin: 0; } ol.projects article.project h4 { font-weight: normal; } article.page { max-width: 60em; } article.project-description { margin-bottom: 1.5em; padding: 0 1.5em; } article.project-description header { margin: 0 0 1em 0; } article.project-description header h2 { font-size: inherit; margin: 0; } .footer-numbering { display: none; margin: 0; } .zoom.hidden { display: none; } .zoom { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: bottom; text-indent: -9999em; background-image: url(../static/zoom.png); background-repeat: no-repeat; background-position: center center; } .svg .zoom { background-image: url(../static/zoom.svg); background-size: auto 1em; } body.zoomed > .header, body.zoomed > .footer, body.zoomed .content, body.zoomed .project-description { display: none; } body.zoomed .zoomed { display: table; cursor: pointer; } ul.paginate { padding: 0; margin: 0; list-style: none; height: 1.5em; overflow: hidden; } ul.paginate li { display: inline-block; vertical-align: top; } ul.paginate .arrow { font-size: 1.5em; line-height: 1.05; } ul.paginate a:hover.arrow { border: 0; } ul.paginate a { position: relative; text-decoration: none; } ul.paginate a:hover { border-bottom: .145em solid; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-wrapper { width: 56em; max-width: 100%; margin: 0 auto; } @media screen and (min-width: 41em) { body { background-size: 35em auto, auto; } .footer-numbering { display: block; } } @media screen and (min-width: 35em) { ol.projects > li { display: inline-block; width: 50%; } } @media screen and (min-width: 54em) { ol.projects > li { display: inline-block; width: 33.3333%; } } @media screen and (min-width: 64em) and (min-height: 30em) { div.project-text { margin-left: .5em; } .project-title, .project-date, .project-location { padding: .2em .5em .2em 0; display: inline-block; background-color: #e5e5e5; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR42mN8+p+BgRFEAAAWrwPLzYNPyAAAAABJRU5ErkJggg==); } .project-details { display: block; } span.span-level1, span.span-level2, span.span-level3 { position: relative; } span.span-level3 p { display: inline; } span.span-level1, span.span-level2 { padding: .2em 0; background-color: #e5e5e5; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAEElEQVR42mN8+p+BgRFEAAAWrwPLzYNPyAAAAABJRU5ErkJggg==); } span.span-level2 { right: 1em; } span.span-level3 { left: .5em; } .header { position: fixed; top: 0; left: 0; } .footer { position: fixed; bottom: 0; left: 0; right: 0; } .header nav { position: fixed; left: 1.5em; top: 1.5em; } .header .paginate { position: fixed; right: 1.5em; top: 1.5em; } .footer .links { position: fixed; right: 1.5em; bottom: 1.5em; } .footer .links li { display: block; margin-left: 0; margin-top: .5em; } .footer .links li:first-child { margin-top: 0; } .footer .made-by { position: fixed; left: 1.5em; bottom: 1.5em; } .content { margin: 0 auto; height: 100%; } .content, .content.first, .content.last { margin: 0 auto; } .content > .wrap { padding: 4.5em 1.5em; } .content + .content { padding-top: 0; } article.project-description { position: fixed; z-index: 2; top: 4.5em; max-width: 24em; } #work .content img:hover { z-index: 3; } #work .content iframe:hover { z-index: 3; } } .Home-embed { max-width: 800px; margin-left: auto; margin-right: auto; } .Home-logo { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../static/graphicsurgery-light.png); background-size: 75% auto; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } .svg .Home-logo { background-image: url(../static/graphicsurgery-light.svg); } .Home-link { border: 0; display: block; text-decoration: none; } @media screen and (min-width: 41em) { .Home-logo { background-size: 35em auto; } } .Project-embed { max-width: 800px; margin-left: auto; margin-right: auto; } .zoomed .Project-embed { max-width: 1024px; } .ProjectSmall-embed { margin-left: auto; margin-right: auto; max-width: 300px; } .Embed { display: block; } .Embed-link { border: 0; display: block; text-decoration: none; } .Embed-ratio { padding-bottom: 100%; position: relative; } .Embed-ratio--16x9 { padding-bottom: 56.25%; } .Embed-ratio--4x3 { padding-bottom: 75%; } .Embed-ratio--3x2 { padding-bottom: 66.66667%; } .Embed-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-height: 100%; max-width: 100%; width: 100%; height: 100%; } .Embed-content--square, .Embed-content--landscape { height: auto; } .Embed-content--portrait { width: auto; } .Embed-caption { display: block; margin-top: 1em; text-decoration: none; } @media screen and (min-width: 41em) { .Embed-caption { display: none; } }