html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
.container {padding-left:20px;padding-right:20px}
.row{width:100%;max-width:1200px;margin:0 auto}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11{margin-right:3.8%;float:left}
.grid_1{width:4.85%}.grid_2{width:13.5%}.grid_3{width:22.15%}.grid_4{width:30.8%}.grid_5{width:39.45%}.grid_6{width:48.1%}.grid_7{width:56.75%}.grid_8{width:65.4%}.grid_9{width:74.05%}.grid_10{width:82.7%}.grid_11{width:91.35%}.grid_12{width:100%;float:left}.last{margin-right:0px}img,object,embed{max-width:100%}
.tooltip:after{content:attr(tip);display:none;position:absolute;top:0px;left:-10px;margin:1em 0 3em;padding:3px 10px;background:#111;color:#fff}
.tooltip:before{z-index:13;position:absolute;content:"\00a0";display:none;width:0;height:0;top:11px;left:10px;border-style:solid;border-width:8px 8px;border-color:transparent transparent #111}
.tooltip:hover::before{display:block}
.tooltip:hover{z-index:10;position:relative}
.tooltip:hover::after{display:block;margin:24px 0 0 10px}
.tooltip:after{min-width:80px;text-align:center;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-decoration:none;font-weight:bold;}
.tooltip:hover::after{font-size:0.8em;}
@font-face{font-family:'Megalopolis';src:url('../fonts/megalopolisextra-webfont.eot');src:local('?'), url('../fonts/megalopolisextra-webfont.woff') format('woff'), url('../fonts/megalopolisextra-webfont.ttf') format('truetype'), url('../fonts/megalopolisextra-webfont.svg#webfontgFqFRjPN') format('svg');font-weight:normal;font-style:normal}
body{background:#F7FBFC url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAIElEQVR42mP4/vsPBL3//AVIMiBzoHw4B8RH5iDUwxEAX5hI38SfJGYAAAAASUVORK5CYII%3D) repeat 0 0;color:#111;font-family:Arial,sans-serif;font-size:14px;line-height:24px}
input,textarea{font-family:Arial,sans-serif;font-size:14px}
p{margin-bottom:24px}
.clear{clear:both}
#header{padding:48px 0 4px;border-bottom:6px solid #111}
#header h1{font-size:27px;font-weight:lighter;text-transform:lowercase}
#header a{color:#111;text-decoration:none;text-transform:lowercase}
#header #menu{text-align:right;line-height:32px}
#header #menu a{position:relative;padding-left:26px;margin-left:15px}
#header #menu a:before{content:"";position:absolute;top:0;left:0;display:block;width:26px;height:18px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAASCAYAAAAXOvPoAAAACXBIWXMAAC4jAAAuIwF4pT92AAACq0lEQVR42tWYT2gTQRTGYyzaojUJiBQR7aHHinrtKcWTINLehPbQa2/26M2CBz1UAoriLRfPLlQoFNFSDdj6hxVKRVC6FXpQKsRD0hqbrN/ANzCsu7O72ZkWA79MmHnzduabN29mk/N9PxdFqVTqAZfAI7ANfIVv4CHbe2L8+F2yx3I14O+QgL+9DP4ToZtYAdwBDRqvg6fgCctPrG/QrmBBpDbLL+AauAxOhfh2LYlVF351EVSh4XdwE5wL2JwFM2wXdnfl6hoUKQyxONfBEUaUrBciLRl8jkeRIlf+vGI8EbOVJhTbYcMidVj+YgS/AL9ZNxviW0zKMSDQkhqZchK94DQYACfBNA3WwAXQz7YgJ9i+Rvtp9h+gv15DOekD/YjPMut2wWjEFqnKKOhieznBvuLBQ2DeUtKbp/+sOektU4A8SD6ybVnTt5Jy+7kU99/Eja8Ny6fDhgGR3jGS+lk63Iq7Mf0dJbfqqEYJJEUaB1ctMm5QpGMsFyjSXsIIGYvYfqLuBm18nUjPQQ28iuE1w14lrk+N/jOLBPLgODgKFtnWSnFKXQxsP5d1ddp4OpGaCQfc4n3lK9lUTh8dTQOJ+41yUj5WxJtLkYSFKEVwi1uwGIggbU5KOon1wLHel7BvM2MkiYX4DMrgCiNa5rqCJheFTdjh2IsRW0xuP+9/EimK9+L4D7leiMlNxdyVqnE5iEJVuhGpwfzykpe6mhL2NkVqk5/gGbgHBkMuqhXmGNfQQlQZvV7O0koHRfqj5K9Oitt2R0nQ99X3Nvw+rLzglknd8NhFoh/cL5Gynm4/wBnlvTKviFXmFrM1/n2LpFGehmkjSSbTSQqSD3kvdEu2/yrB15blh2xxMuKt/QEn30p4qt2WEXSQiMGPgBUObMcgbfodOehJZuUvjtzZGTHnhWcAAAAASUVORK5CYII%3D) no-repeat 0 -18px}
#header #menu a.portofolio,#header #menu a.contact{padding-left:30px}
#header #menu a.lab{padding-left:28px}
#header #menu a.portofolio:before{top:-2px;width:25px;background-position:0 0}
#header #menu a.lab:before{width:23px;height:17px;background-position:-25px 0}
#header #menu a.contact:before{width:26px;height:16px;background-position:-48px 0}
#slogan h2{text-transform:uppercase;padding:48px 0;font:4em 'Megalopolis',Arial,sans-serif;letter-spacing:0}
.info{border-top:3px solid #111;padding-top:45px}
.info h2{font-family:'Megalopolis';margin-bottom:24px}
.info p{text-align:justify}
.info a{color:#666;text-decoration:none}
.info a:hover,.info a:focus{text-decoration:none;color:#111;border-bottom:1px dotted #666}
.info a.tooltip:hover{border-bottom:0}
.info ul{margin-bottom:24px}
.info li{margin-left:20px}
.info-panel h2,.info-panel h3,#contact-panel a{text-transform:uppercase;font-size:22px;font-family:'Megalopolis',Georgia;font-weight:normal}
#contact-panel a,.info-panel a{float:left;clear:both;margin-bottom:24px;color:#111}
#contact-panel a:hover,#folio a:hover{text-decoration:none;border-bottom:0}
#contact-panel a span{float:left;width:180px;color:#111}
#contact-panel a strong,#folio a span,#folio .open a span{padding:0 5px;color:#111}
#contact-panel a strong,#folio a:hover span,#folio .open a span{background-color:#111;color:#f6f6f6}
#contact-panel a strong:after,#folio a span:after{content:"\A0\BB";position:relative;top:-1px}
#contact-panel a:hover strong:after{padding-left:20px}
#folio .wrapper{margin:0 auto}
#folio .folio-item{float:left;width:240px;margin:0 30px 30px 30px}
#folio .folio-item a{display:block;border:3px solid #666;}
#folio .folio-item a:hover{border-color:#111;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVR42mNgZ2c36+npAWMGGAMkyABjgGgA7B8L/rhlbskAAAAASUVORK5CYII%3D) repeat 0 0}
#folio .folio-item a img{display:block}
#footer{margin-top:24px;margin-bottom:24px;padding-top:21px;font-size:11px}
#footer p{float:left}
#footer #size{list-style:none;float:right;width:100px;text-align:right;}
#footer #size li{margin:0 0 0 10px;list-style:none;float:left;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAYCAYAAACiNE5vAAABqElEQVR42t2YzUrDQBCAc+rJSw7F+lelGIL9sU/hk3j1AXr0UAgIPobgKeADCIJXT4IPIBQKgUAhD1AnZQJx2Z3ZTNuJGPhKM5nZ3W+zh+wGYRh2gScgA9aKZNhvd4sx1NvoAHNgQeQvMKcTwE+qLGzysoMxlG0kRqwf4AX/J8azpAwW5U3QwoWDKKoxbEHRcLVkVedrHMihFjXxXwgmrnHtJtcQP9KCEpdOnE+tS/xYC0ZcNHE+tS7xEy0YcdHE+Ti4xE+1YMRF9Rg7o3CJ97VgxEX1GDuncIlfaMGIi+oxNqBwiQ+0YMRF9RiLKFzil1ow4pGvgKU2pnCJR1ow4rGvgKV2SOESj7VgxIe+ApbaMYVL/EoLRnzEQYhPKVziIy0Y8QnHrr/Vx1ow4lPfN2fszc323hB2d3atxR52Z4mlvQOgZ4k/BE1nelcYA8+JvfMXcAu8Ezk5nsA8Asta/BWp7peYszmByVs+iMiZE5g7zL0hclJJ520fPaW4HJ+BleX5NzADPizPVljXk4hTne4T+aBbWp7l7N8TzIL/cuFyk7zVz7/q9AMzqxrBlQkIfgAAAABJRU5ErkJggg%3D%3D) no-repeat 0 0;height:24px;opacity:0.25;}
#footer #size #large{width:33px;opacity:1}
#footer #size #medium{width:17px;background-position:-33px 0}
#footer #size #small{width:12px;background-position:-50px 0}
@media screen and (-webkit-min-device-pixel-ratio:0){
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track:enabled{background-color:#fff}
::-webkit-scrollbar-thumb:vertical{height:115px;background-color:#111}
::-webkit-scrollbar-thumb:horizontal{width:80px;background-color:#111}
}
::selection{background:#111;color:#fff}
::-moz-selection{background:#111;color:#fff}
@media handheld, only screen and (max-width: 1024px){
body #slogan h2{padding:24px 0;font-size:3em}
div.info{padding-top:21px}
#footer{margin-top:0}
#footer #size #large,#footer #size #small{opacity:0.25}
#footer #size #medium{opacity:1}
}
@media handheld, only screen and (max-width: 767px){
.container{padding-left:10px;padding-right:10px}
#header{padding-top:24px}
#header #logo,#header #menu{width:100%}
#header #menu{text-align:left;margin-top:24px}
#header #menu a{float:left;line-height:18px;margin-bottom:8px;margin-left:0px;margin-right:8px}
#header #menu a.portofolio,#header #menu a.contact{padding-left:32px;}
#header #menu a.lab{padding-left:28px;}
body #slogan h2{padding:24px 0;font-size:2em}
div.info{float:none;width:100%;padding-top:21px}
div.info.last{padding-top:0;border-top:0}
body{-webkit-text-size-adjust:none}
#folio #web-work.info-panel img{margin-bottom:20px}
#folio .info-panel,#folio .info-panel img{display:block;width:100%;margin-bottom:20px}
#folio h2,#folio .info-panel .grid_5{display:none}
#folio .info-panel .grid_7{width:100%}
#contact-panel a{font-size:19px}
#contact-panel a span{display:block;width:100%}
#contact-panel a:hover strong:after{padding-left:0px}
#footer p{float:none;margin-bottom:5px}
#footer #size li{margin:0 10px 0 0}
#footer #size{float:none;display:block;margin:0 0 5px}
#footer #size #large,#footer #size #medium{opacity:0.25}
#footer #size #small{opacity:1}
}