/*_______ __ __ / ___/ /__ / / ___ _/ / / (_ / / _ \/ _ \/ _ `/ / \___/_/\___/_.__/\_,_/*/ body { background:#fff; font-family:'Roboto',"Tahoma","Verdana",sans-serif; font-size:16px; line-height:24px; color:#000; } .wrap { width:calc(100% - 32px); position:relative; margin:0 auto; max-width:940px; } em { font-style:italic; } p a { font-weight:700; color:#000; text-decoration:none; } p a:hover, p a:focus { text-decoration:underline; } @media screen and (min-width:940px) { body { font-size:20px; line-height:28px; } } /*_____ ___ /_ __/__ ___ / _ )___ _____ / / / _ \/ _ \/ _ / _ `/ __/ /_/ \___/ .__/____/\_,_/_/ /*/ #blackBar { display:block; position:fixed; top:-60px; left:0; width:100%; height:36px; padding:12px 0; background:#000; visibility:hidden; transition:all ease-in-out 200ms; z-index:12; } #blackBar .button { display:block; position:absolute; top:0; right:0; text-transform:uppercase; font-weight:700; font-size:14px; line-height:36px; background:#666; color:#fff; text-decoration:none; text-align:center; width:134px; } #blackBar .button img { display:inline-block; position:relative; top:2px; margin-right:8px; } .showBar #blackBar { visibility:visible; top:0; } @media screen and (min-width:940px) { #blackBar { max-width:940px; margin-left:calc(50% - 470px); } } /* __ __ / // /__ _______ / _ / -_) __/ _ \ /_//_/\__/_/ \__*/ header { padding:60px 0 60px } h1 { font-weight:700; font-size:60px; line-height:80px; letter-spacing:-1px; } h2 { font-size:24px; line-height:32px; margin-bottom:16px; } #websites h2 { font-size:20px; line-height:28px; } .typer { height:125px; width:auto; display:block; margin-top:48px; margin-bottom:-7px; } header .border { display:block; width:100%; height:7px; background:#000; } @media screen and (min-width:640px) { header { padding:60px 0 80px; } h1 { margin-left:calc(33.333% - 2px); } .homePage h1 { margin-left:calc(33.333% - 12px); } h2 { margin-left:33.333%; } .typer { margin-top:-40px; padding-left:2.5%; } } @media screen and (min-width:940px) { header { padding:80px 0 96px; } h1 { font-size:80px; line-height:92px; margin-left:calc(33.333% - 4px); } .homePage h1 { margin-left:calc(33.333% - 16px); letter-spacing:-5px; } h2 { font-size:32px; line-height:40px; margin-bottom:20px; letter-spacing:-0.2px; } #websites h2 { font-size:28px; line-height:36px; } } /*_ __ __ | | /| / /__ ____/ /__ | |/ |/ / _ \/ __/ '_/ |__/|__/\___/_/ /_/\_\*/ #work { padding-bottom:64px; } #work .blurb { position:relative; } #work .blurb p { margin-bottom:16px; } #work .blurb .photoLabel { display:none; } #work .blurb p img { display:inline-block; position:relative; top:4px; margin-right:6px; } #work .blurb .me { position:absolute; top:6px; right:100%; margin-right:40px; width:calc(49.5% - 40px); visibility:hidden; opacity:0; transition:all ease-in-out 300ms; } #work .works { margin:40px 0 48px; } #work .works li { margin-bottom:16px; } #work .works li a { display:block; position:relative; width:100%; height:200px; overflow:hidden; color:#000; background:#eee; } #work .works li a > span { position:absolute; z-index:2; font-weight:700; font-size:24px; line-height:40px; left:0; padding:0 16px; bottom:16px; display:inline-block; background:rgba(255,255,255,0.8); } #work .works li a > span:after { content:url(../img/caratRight.svg); position:relative; top:0; left:6px; display:inline-block; } #work .works li a span .truncated { display:none; } #work .works li a .bg { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:#ff00ee center center no-repeat; background-size:cover; transition:all ease-in-out 1s; } #work .works li a:hover .bg { transform:scale3d(1.25, 1.25, 1); opacity:0.4; } #work .works li.posters .bg { background-image:url(../img/posters/06.jpg); } #work .works li.web .bg { background-image:url(../img/codeTeaser.jpg); } #work .works li.logos .bg { background-image:url(../img/logoTeaser.jpg); } #work .otherBlurb { } #work .otherBlurb p { margin-bottom:16px; } #work h3 { font-weight:700; font-size:20px; line-height:24px; margin-bottom:16px; } #work .otherBlurb li { list-style:disc; margin-left:20px; } @media screen and (min-width:640px) { #work .blurb .photoLabel { display:block; } #work .blurb.showPic .me { visibility:visible; opacity:1; } #work .blurb, #work .works, #work .otherBlurb { margin-left:33.333%; } #work .works li a { height:220px; } #work .works li a span .truncated { display:inline; } } @media screen and (min-width:940px) { #work { padding-bottom:72px; } #work .blurb p { margin-bottom:20px; } #work .works li { margin-bottom:20px; } #work .works li a { height:240px; } #work h3 { font-size:24px; } #work .works li a > span { font-size:32px; line-height:40px; } #work .works li a > span:after { top:-2px; } #work .otherBlurb ul { -webkit-column-count:2; -moz-column-count:2; column-count:2; } } /* ____ _ / __/__ ___ ____(_)_ _ ___ ___ ___ _\ \/ _ \/ -_) __/ / ' \/ -_) _ \(_-< /___/ .__/\__/\__/_/_/_/_/\__/_//_/___/ /*/ #specimens { } #specimens li { margin-bottom:32px; } #specimens li img { display:block; width:100%; height:auto; } #specimens li p { margin-top:8px; max-width:800px; } #specimens .specimen { margin-bottom:60px; } #specimens h3 { font-weight:700; font-size:24px; line-height:28px; } #specimens h3.comingSoon { display:block; text-align:center; margin-bottom:80px; } #specimens .siteLink { font-weight:700; font-size:16px; line-height:32px; margin-bottom:20px; color:#000; text-decoration:none; display:block; } #specimens .siteLink:hover, #specimens .siteLink:focus { text-decoration:underline; } #specimens .siteLink img { display:inline-block; position:relative; top:3px; margin-right:6px; } #specimens .picRight, #specimens .picLeft, #specimens .picBig { margin-bottom:32px; } #specimens .image { margin-bottom:16px; } #specimens .image img, #specimens .image video { width:100%; height:auto; display:block; margin-bottom:16px; } #specimens .picBig .image { overflow-x:scroll; -webkit-overflow-scrolling:touch; width:100%; } #specimens .picBig .image img { width:900px; height:auto; } #specimens .text { margin-bottom:-16px; } #specimens .text p { margin-bottom:16px; max-width:800px; } #specimens .mobileOnly { margin-top:-24px; } #specimens .mobileOnly img { position:relative; top:4px; } #specimens .twoUp { margin-bottom:40px; } #specimens .twoUp li { margin-bottom:16px; } #specimens .twoUp li img { display:block; width:100%; height:auto; } #logos #specimens h3 { margin-bottom:16px; } @media screen and (min-width:640px) { #specimens h3 { font-size:28px; line-height:36px; } #specimens .picBig .image { overflow-x:auto; } #specimens .picBig .image img { width:100%; } #specimens .mobileOnly { display:none; } #specimens .twoUp li { margin-bottom:20px; } #specimens .twoUp li:nth-child(odd) { width:calc(50% - 10px); float:left; } #specimens .twoUp li:nth-child(even) { width:calc(50% - 10px); float:right; } } @media screen and (min-width:940px) { #specimens h3 { font-size:32px; line-height:40px; } #specimens li { margin-bottom:48px; } #specimens .specimen { margin-bottom:76px; } #specimens .picRight .image { float:right; width:calc(66.667% - 10px); } #specimens .picRight .text { float:left; width:calc(33.333% - 10px); } #specimens .picLeft .image { float:left; width:calc(66.667% - 10px); } #specimens .picLeft .text { float:right; width:calc(33.333% - 10px); } #specimens .twoUp { margin-bottom:64px; } } /* ____ __ / __/__ ___ / /____ ____ / _// _ \/ _ \/ __/ -_) __/ /_/ \___/\___/\__/\__/*/ footer { background:#000; color:#fff; padding:48px 0 60px; } footer h3 { font-weight:700; font-size:24px; line-height:28px; margin-bottom:16px; } footer .button { display:block; text-transform:uppercase; font-weight:700; font-size:14px; line-height:36px; background:#666; color:#fff; text-decoration:none; text-align:center; width:134px; margin-top:16px; } footer .button img { display:inline-block; position:relative; top:2px; margin-right:8px; } @media screen and (min-width:640px) { footer .wrap { margin-left:33.333%; width:calc(66.666% - 16px); } } @media screen and (min-width:940px) { footer { max-width:940px; margin-left:calc(50% - 470px); padding:60px 0 80px; } footer .wrap { width:calc(66.666% - 32px); } footer h3 { font-size:32px; } }