html, body { margin:0; padding:0; width:100%; height:100%; background-color:#fff; color:#000; font-size:13px; }
div, header, section, main, footer, input { font-family:'Helvetica Neue','Helvetica','Arial',sans-serif; -webkit-font-smoothing:antialiased; font-smooth:never; }
*, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
div, header, section, main, footer, h1, h2, h3, ul, li, li a, img, p { display:block; float:left; margin:0; padding:0; border:none; width:100%; list-style:none; }
a { color:#000; text-decoration:none; }
p { line-height:150%; }
header h1, header h2, .doko
{ font-family:'doko_sans-bold',sans-serif; font-weight:normal; font-size:25px; letter-spacing:-1px; }
#copy p, #about p
{ font-family:'doko-book',serif; }
#copy p:not(.meta) a, #copy p:not(.meta) b, #about a
{ font-family:'doko-bold',serif; font-weight:normal; }
#copy i
{ font-family:'doko-book_italic',serif; font-style:normal; }
.w20 { width:20%; }
.w25 { width:25%; }
.w33 { width:33.33333%; }
.w50 { width:50%; }
.w100 { width:100%; }
.right { float:right; }
.clear { clear:left; }
.align-center { text-align:center; }
.tablet { display:none !important; }
.mobile { display:none !important; }
.button { display:block; float:left; font-weight:bold; text-align:center; border-radius:20px; line-height:40px; height:40px; padding:0 20px; width:auto; }
.button:hover { color:#fff !important; background-color:#000; }
.button.fontstand { padding:0; background-color:#2f373f; border-radius:20px; }
.button.fontstand:hover { background-color:#222; }
.button.fontstand svg { height:40px; width:120px; float:none; display:inline-block; }
.rss { background-color:#f70; color:#fff !important; }
.rss:hover { background-color:#f50; }
.buy { background-color:#0af; border:none; color:#fff; }
.buy:hover { background-color:#09f; }
.download { background-color:#0c4; }
.download:hover { background-color:#0b4; }
.linkbutton { border:1px solid #ccc !important; border-radius:4px; color:#888; margin-top:10px; display:inline-block; padding:2px 10px; }
.linkbutton:hover { border-color:#0af !important; color:#0af; }
.linkbutton .icon { width:20px; height:20px; vertical-align:middle; margin-right:5px; fill:#0af; }
.icon { width:auto; height:auto; }
.label { display:block; float:left; position:absolute; right:5%; top:5%; width:45px; height:45px; }
.label svg { width:100%; height:100%; }
.tile { padding-top:100%; width:100%; position:relative; }
.tile img { border-radius:2px; }
.tile > img { position:absolute; }
.tile .landscape { width:100%; height:auto; }
.tile .portrait { width:auto; height:100%; }
#sampler li { width:50%; }
#sampler li.wide { width:100%; }
#sampler.lettering li { width:25%; }
#sampler.lettering span { display:none; }
body > span { position:fixed; z-index:1000000; }
#body { position:relative; }
/* HEADER */
header { line-height:100px; position:relative; }
header h1, header h2 { width:auto; }
header h1 a, header h2 a { padding:0 40px; display:block; float:left; }
header > ul { margin-left:30px; }
header h1+ul { margin-left:0; }
header > ul, header > ul li { width:auto; }
header > ul a { padding:0 10px; font-weight:bold; }
header > ul a:not(.active) { opacity:0.5; }
header > ul a:hover { opacity:1; }
header > div { width:auto; float:right; padding:20px; width:50%; }
header > div ul { width:auto; float:right; }
header > div li { width:auto; line-height:40px; float:right; }
header > div li:first-child { float:left; padding-right:0; }
header > div.alt { background-color:rgba(0,0,0,0.1); }
header > div li > span, header > div .button { margin:10px 0 10px 10px; }
header > div li > span:last-child, header > div .button:last-child { margin-right:0; }
header > div li > span { display:block; float:left; }
header > div li > span > * { line-height:20px; display:block; float:left; clear:left; }
header > div .free { line-height:40px; }
header > div strong { font-size:20px; }
header > div strong span { font-weight:normal; }
header > div i { font-style:normal; opacity:0.5; }
header > .button { float:right; margin:30px 40px; }
#header { position:fixed; z-index:1; background-color:#fff; }
#header ul { margin-right:30px; background-color:#fff; }
.menu { display:none; float:right; font-weight:bold; padding:0 40px; }
.iconbtn .icon { width:20px; height:20px; margin-left:5px; margin-bottom:-5px; }
main .menu .icon { fill:#fff; }
/* MAIN */
main { position:relative; z-index:1; margin-top:100px; background-color:#8c96a0; }
main header { color:#fff; background-color:#8c96a0; }
main header a { color:#fff; }
main.fixed { margin-top:200px; }
main.fixed header { position:fixed; top:0; z-index:1000; background-color:#848e97; }
.light { color:#000; background-color:#e6ebf0; }
main header.light a { color:#000; }
main.fixed header.light { color:#000; background-color:#dce1e6; }
.light .menu .icon { fill:#000; }
.cards li { line-height:150%; }
.cards a:hover img { opacity:0.75; }
.cards span { display:block; float:left; }
.cards img { height:auto; margin-bottom:10px; }
.cards i { font-weight:normal; font-style:normal; opacity:0.5; font-size:11px; }
.cards strong { display:block; float:left; margin:10px 0; width:100%; line-height:110%; }
.cards li.x4 { clear:left; }
#blog { padding:0 20px; }
#blog a { color:#666; padding:0 20px 40px 20px; }
#blog a strong { color:#000; }
/*
#blog li:first-child { width:100%; }
#blog li:first-child img { width:50%; padding-right:20px; }
#blog li:first-child a > span { width:50%; padding-left:20px; }
#blog li:first-child strong { font-size:60px; margin:20px 0; }
#blog li:first-child span span { font-size:30px; line-height:120%; }
*/
#projects { padding:40px 20px; }
#projects a { color:#666; padding:0 20px 40px 20px; text-align:center; }
#projects a strong { color:#000; }
#projects i { font-size:13px; margin-top:5px; display:block; float:left; width:100%; }
/* FONTS */
#catalogue { text-align:center; }
#catalogue li { width:20%; }
#catalogue li.featured { width:40%; }
#catalogue a { position:relative; }
#catalogue a:after { }
#catalogue a:hover strong { opacity:1; }
#catalogue strong { color:#000; opacity:0.5; display:block; float:left; width:100%; position:absolute; bottom:10%; }
#catalogue .invert strong { color:#fff; }
#catalogue.mini { background-color:#000; padding-left:0; padding-right:0; }
#catalogue.mini li { width:10%; }
#catalogue.mini a:hover { opacity:0.5; }
#catalogue.mini strong { display:none; }
#font { position:relative; }
#font .label { top:20px; left:20px; width:100px; height:100px; }
#data { padding:20px; color:#fff; position:relative; }
#data > div { width:33.33333%; }
#data > div > div { padding:30px 20px; }
#data h3 { margin-bottom:15px; font-size:100%; }
#data .rule { padding-bottom:15px; border-bottom:1px solid rgba(0,0,0,0.1); }
#data h3 i { font-weight:normal; font-style:normal; opacity:0.5; }
#data p { margin-bottom:15px; }
#data ul { border-top:1px solid rgba(0,0,0,0.1); }
#data li { border-bottom:1px solid rgba(0,0,0,0.1); padding:8px 0; }
#data a { color:#fff; }
#data a:hover { opacity:1; color:#000; }
#data p a { text-decoration:underline; }
#data strong { display:block; float:left; width:100%; font-size:20px; line-height:140%; }
#data li.sample { padding:0; background-size:100%; }
#data li.sample:last-child { border:none; }
#data li div { padding-top:15%; height:0; text-indent:1000px; overflow:hidden; }
#data .cover { background-position:center; padding-top:50%; background-size:120%; border-bottom:1px solid rgba(0,0,0,0.1); margin-bottom:20px; }
#data .icon { width:100px; height:60px; fill:#fff; }
.wrap .toggle { opacity:0.5; display:block; float:left; width:100%; margin-bottom:20px; }
.wrap .toggle:before { content:'Show more...'; }
.wrap .toggle.active:before { content:'Show less'; }
#features { text-align:center; color:#fff; padding:20px; padding-bottom:40px; }
#features li { width:25%; padding:20px; text-align:center; }
#features li div { border-bottom:1px solid rgba(0,0,0,0.1); margin-bottom:10px; }
#inuse { padding:0 30px; padding-bottom:40px; }
#inuse li { width:25%; position:relative; }
#inuse a { padding:10px; position:absolute; top:0; left:0; z-index:0; }
#info { padding:40px 25%; text-align:center; line-height:150%; color:#fff; }
#info h2 { font-size:15px; margin-bottom:20px; }
#info p { margin-bottom:10px; }
#info a { border-bottom:1px solid #fff; color:#fff; opacity:0.5; }
#info a:hover { opacity:1; border-color:#fff !important; }
/* DOWNLOAD */
#download { padding:125px 25%; padding-top:175px; text-align:center; background-color:#0c4; color:#fff; background:#0c4 url('resources/_download.jpg') 50% 50%; }
#download div, #download p { margin-top:20px; }
#download h3 { font-size:36px; margin-bottom:50px; }
#download .warning input { background-color:#f00; border-color:#f00; }
#download input { border:none; -webkit-appearance:none; border-radius:0; border-radius:4px; text-align:center; }
#check { font-size:18px; }
#check input { width:30px; height:30px; text-align:center; margin:0 5px; color:#fff; display:inline; background-color:transparent; border:1px solid #fff; padding:5px; font-size:18px; }
#download .button { font-size:13px; background-color:#083; color:#fff; width:50%; margin:0 25%; padding:0; cursor:pointer; }
#download .button:hover { background-color:#073 !important; }
#thanks { background-color:#0c4; color:#fff; padding:40px; line-height:20px; text-align:center; font-size:18px; }
#thanks #fb { float:none; display:inline-block; width:auto; vertical-align:middle; padding-left:10px; padding-right:10px; }
/* LETTERING */
#lettering { text-align:center; position:relative; }
#lettering > img { width:50%; margin:0 25%; }
#lettering a { display:block; float:left; width:40px; position:absolute; left:0; top:0; bottom:0; text-indent:1000px; white-space:nowrap; overflow:hidden; }
#lettering a:hover { width:80px; }
#lettering #next { left:auto; right:0; }
/* BLOG */
#post { border-top:1px solid #eee; background-color:#fff; position:relative; }
#copy { float:right; width:75%; padding:80px 40px 80px 0; }
#copy h2 { font-size:60px; }
#copy h2, #copy p:not(.img), #copy ul { width:70%; padding:10px 0; }
#copy p { font-size:20px; }
#copy p.meta, #copy p.img { font-family:'Helvetica Neue','Helvetica','Arial',sans-serif !important; font-size:15px; }
#copy p:first-child:not(.img) { margin-top:40px; }
#copy .meta { color:#666; }
#copy .meta a { color:#666; border-color:#eee; }
#copy p a { border-bottom:1px solid #cef; }
#copy p a:hover { color:#0af; }
#copy .img { padding:40px 0; font-size:13px; color:#888; }
#copy img { margin-bottom:10px; }
#copy span + br + img { margin-top:40px; }
#copy span + img { margin-top:40px; }
#copy .img span { display:block; float:left; margin-top:10px; width:70%; }
#copy .links > span { display:block; float:left; width:50%; min-height:1px; }
#copy .links > span:last-child { text-align:right; }
#copy ul { border-top:1px solid #eee; margin-top:40px; }
#copy li { width:45%; line-height:140%; }
#copy li.prev { float:right; text-align:right; }
#copy li a:hover { color:#0af; }
#copy li b { color:#000; }
#archive { width:40px; overflow-y:scroll; background-color:#f8f8f8; padding:20px 0; position:absolute; top:0; bottom:0; }
#archive ul { padding:0 20px; display:none; }
#archive li a { color:#000; padding:10px 0; border-top:1px solid #eee; }
#archive li:first-child a { border-top:none; }
#archive li img { width:20%; margin-bottom:0; }
#archive span { width:80%; padding-left:10px; }
#archive em { margin:5px 0; font-style:normal; font-weight:bold; }
#archive.fixed { position:fixed; }
#archive svg { position:absolute; left:0; top:0; width:40px; height:40px; fill:#aaa; }
#archive:hover { width:23%; }
#archive:hover ul { display:block; }
#archive:hover svg { display:none; }
/* ABOUT */
#about { background-color:#fafafa; padding:20px; }
#about > div { width:50%; padding:20px; }
#about h3 { margin-bottom:20px; }
#about p { margin-bottom:20px; font-size:20px; }
#about a:hover { text-decoration:underline; }
#social { padding:40px; background-color:#fafafa; }
#social > * { display:inline-block; float:none; width:auto; height:30px; line-height:28px; margin-right:10px; vertical-align:top; }
#social a { border:1px solid #fff; padding:0 15px; border-radius:4px; color:#fff; font-weight:bold; }
#social a:hover { color:#fff !important; }
#social form, #social form div { display:block; float:left; position:relative; width:auto; margin:0; padding:0; }
#social form { border:1px solid #888; border-radius:4px; }
#social input { display:block; float:left; border:none; margin:0; height:28px; line-height:28px; padding:5px; background-color:transparent; -webkit-appearance:none; border-radius:0; }
#social input[type='email'] { width:175px; padding-right:30px; padding-left:10px; color:#666; font-size:13px; }
#social input[type='image'] { height:30px; width:30px; padding:0; }
#social #mc_submit { position:absolute; right:-1px; top:-1px; }
#social .facebook { color:#35a; border-color:#35a; }
#social .facebook:hover { background-color:#35a; }
#social .twitter { color:#0cf; border-color:#0cf; }
#social .twitter:hover { background-color:#0cf; }
#social .dribbble { color:#f49; border-color:#f49; }
#social .dribbble:hover { background-color:#f49; }
#social .pinterest { color:#e00; border-color:#e00; }
#social .pinterest:hover { background-color:#e00; }
#social .mail { color:#f64; border-color:#f64; }
#social .mail:hover { background-color:#f64; }
/* FOOTER */
footer { font-size:11px; position:fixed; bottom:0; z-index:0; color:#fff; background-color:#000; padding:20px; }
footer, footer a { color:#fff; }
footer > * { padding:20px; }
footer > div { float:right; height:50px; line-height:50px; padding:0 15px; width:auto; }
.social { float:left; }
.social a { margin-right:10px; }
.social a:hover { color:#0af; }
.social div { margin-top:2px; }
.social div div { width:100px; }
#share { width:auto; position:fixed; right:40px; top:35px; z-index:1; height:30px; }
#share > a { display:block; float:right; line-height:30px; font-weight:bold; }
#share > a .sprite { width:30px; height:30px; float:right; background-position:-96px 0; }
#share ul { width:150px; display:none; clear:both; box-shadow:0 7px 20px rgba(0,0,0,0.5); border-radius:4px; }
#share li { border-top:1px solid #ddd; }
#share li:first-child { border-top:none; }
#share li a { padding:5px 10px; line-height:20px; text-align:center; font-weight:bold; background-color:#eee; }
#share li a:hover { background-color:#06f; color:#fff; }
#share li:first-child a { border-top-left-radius:3px; border-top-right-radius:3px; }
#share li:last-child a { border-bottom-left-radius:3px; border-bottom-right-radius:3px; }
#share:hover { height:auto; z-index:2; }
#share:hover ul { display:block; }
#share:hover > a { display:none; }
#notfound { background-color:#f8f8f8; text-align:center; color:#000; padding:200px 20%; font-size:16px; }
#notfound strong { font-size:32px; margin-bottom:30px; display:block; float:left; width:100%; }
#notfound i { font-style:normal; color:#888; }
/* RESPONSIVE */
@media screen and (max-width:960px) {
.w20, .w25, .w33 { width:50%; }
.cards li.x2 { clear:left; }
/*
#blog li:first-child strong { font-size:40px; }
#blog li:first-child span span { font-size:20px; }
*/
#copy { width:80%; padding-left:0; }
#copy h2, #copy p:not(.img), #copy ul { width:80%; }
#catalogue li { width:25%; }
#catalogue li.featured { width:50%; }
#catalogue.mini li { width:12.5%; }
header > div ul { float:left; }
header.darken { background-color:#7d868f !important; }
header.darken div { background-color:#848e97; }
header > div { width:100%; }
header > div ul { width:100%; }
main { margin:0 !important; }
#header, footer { position:static; }
#data > div { width:60%; margin-left:20%; margin-right:20%; }
#features li { width:50%; }
#lettering > img { width:80%; margin:0 10%; }
#lettering a { width:20px; }
}
@media screen and (max-width:720px) {
.desktop { display:none !important; }
.tablet { display:block !important; }
#data, .cards { font-size:15px; }
#blog li:first-child a > * { width:100% !important; padding:0 !important; }
#copy { width:100%; padding-left:40px; }
#copy h2, #copy p:not(.img), #copy ul { width:100%; }
#catalogue li { width:33.33333%; }
#catalogue li.featured { width:66.66666%; }
#catalogue.mini li { width:16.66666%; }
#sampler li { width:100%; }
.menu { display:block; }
header > ul { width:100%; position:absolute; z-index:1000; top:100px; display:none; margin:0; }
header > ul li a:not(.menu):hover { background-color:rgba(0,0,0,0.05); }
header > ul li { width:33.33333%; text-align:center; }
header > ul li span { display:inline-block; float:none; line-height:100%; vertical-align:middle; }
#header ul { background-color:#f8f8f8; }
header > div ul { width:100%; }
header > .button { float:left; margin:30px 20px; }
main header > ul { background-color:#767f87; }
#data > div { width:100%; margin:0; }
#sampler.lettering li { width:50%; }
#about > div { width:100%; }
/* 20px padding */
header h1 a, header h2 a { padding:0 20px; }
#share { right:20px; }
#data, #features, #blog, #about { padding:0; }
.menu { padding:0 20px; }
#inuse { padding:0 10px; }
#copy, #social { padding:20px; }
#font .label { width:50px; height:50px; }
}
@media screen and (max-width:520px) {
.w25, .w33, .w50 { width:100%; }
#catalogue li { width:50%; }
#catalogue li.featured { width:100%; }
#catalogue.mini li { width:25%; }
#features li { width:100%; }
#projects div { display:none; }
header > div.fill li { width:100%; }
header > div.fill .button { width:48%; margin:0 1%; }
.buyat { display:none; }
}