html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
body{line-height:1;color:#000;background:#fff}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
a img{border:none}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{margin:0;padding:0;border:0;outline:0;display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]),[hidden]{display:none}
del{text-decoration:line-through}
code{color:rgba(0,0,0,0.6);}
code .nt,code .k,code .nv{color:rgba(0,50,0,0.6);font-weight:bold}
code .na,code .p,code .nx{color:rgba(0,0,100,0.6)}
code .s,code .s2{color:rgba(150,0,0,0.7);background:rgba(255,0,0,0.04);font-weight:bold}
code .mi{color:rgba(0,0,150,0.7);background:rgba(0,0,255,0.04);font-weight:bold}
code .nx{font-weight:bold}
code .c,code .c1{color:rgba(0,0,0,0.3)}
.opentip-container.style-drop .opentip{padding:15px 5px;width:45px;height:45px;text-align:center;color:rgba(0,0,0,0.5)}
.opentip-container.style-logo{z-index:20000 !important;}
.opentip-container.style-logo .opentip{color:#f8f8f8;color:rgba(255,255,255,0.9);text-shadow:1px 1px 0 rgba(0,0,0,0.2);font-size:15px}
body,body *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{font:14px/150% "Open sans",sans-serif;padding:0 0 100px 0;margin:0;background:#f2f2f2 url("../images/grain.png") fixed repeat left top}
h1,h2,h3,h4{font-family:"Raleway","Helvetica neue",sans-serif;font-weight:100}
h1{font-size:40px;line-height:130%;margin:26px 0}
h2{font-size:35px;line-height:130%;margin:25px 0}
h3{font-size:24px;line-height:130%;color:rgba(0,0,0,0.6);margin:24px 0}
h4{font-size:20px;line-height:130%;margin:23px 0}
p{margin:13px 0}
p a,ul a{color:#00a;text-decoration:none;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;}
p a:hover,ul a:hover{color:#00f}
hr{position:relative;height:1px;background:#dadada;background:-webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0)), color-stop(0.05, rgba(0,0,0,0.1)), color-stop(0.95, rgba(0,0,0,0.1)), color-stop(1, rgba(0,0,0,0)));background:-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0) 100%);background:-moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0) 100%);background:-o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0) 100%);background:-ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0) 100%);background:linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0) 100%);border:none;margin:60px 0;margin-left:-25px;width:1010px}
code{font-family:menlo,monospace}
p > code,li > code,td > code{border:1px dotted #cbe3c5;background:#eff5ee;padding:1px 2px;color:#7fa475}
pre{margin:30px 0;margin:30px 0;border:1px solid #ddd;padding:8px 12px;background:#fff;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:1px 1px 9px #eaeaea;box-shadow:1px 1px 9px #eaeaea}
p{color:#333}
strong{font-weight:bold}
em{font-style:italic}
blockquote{border:1px solid #e8e8e8;background:rgba(0,0,0,0.01);-webkit-box-shadow:2px 2px 15px #e5e5e5;box-shadow:2px 2px 15px #e5e5e5;}
blockquote p{padding:8px 25px}
button{-webkit-border-radius:3px;border-radius:3px;font-size:1em;color:#888;border:1px solid #ddd;-webkit-box-shadow:1px 1px 8px #ddd;box-shadow:1px 1px 8px #ddd;padding:8px 10px;background-color:#fafafa;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #eee));background-image:-webkit-linear-gradient(top, #fafafa 0%, #eee 100%);background-image:-moz-linear-gradient(top, #fafafa 0%, #eee 100%);background-image:-o-linear-gradient(top, #fafafa 0%, #eee 100%);background-image:-ms-linear-gradient(top, #fafafa 0%, #eee 100%);background-image:linear-gradient(top, #fafafa 0%, #eee 100%);cursor:pointer;}
button:hover{background-color:#eaeaea;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #e6e6e6));background-image:-webkit-linear-gradient(top, #fafafa 0%, #e6e6e6 100%);background-image:-moz-linear-gradient(top, #fafafa 0%, #e6e6e6 100%);background-image:-o-linear-gradient(top, #fafafa 0%, #e6e6e6 100%);background-image:-ms-linear-gradient(top, #fafafa 0%, #e6e6e6 100%);background-image:linear-gradient(top, #fafafa 0%, #e6e6e6 100%)}
.columns{zoom:1}
.columns .left{width:50%;float:left;padding-right:40px}
.columns .right{width:50%;float:right;padding-left:40px}
.columns:before,.columns:after{content:"";display:table}
.columns:after{clear:both}
table{border:1px solid #ddd;-webkit-box-shadow:1px 1px 20px #eee;box-shadow:1px 1px 20px #eee;}
table thead th{border-bottom:1px solid #ddd;background:#fafafa;font-weight:bold;color:#555;padding:8px 10px}
table td{padding:5px 10px;border-bottom:1px solid #eee}
table tr:nth-child(odd) td{background:#f8f8f8}
#main,#social,#footer,#header > div{width:960px;margin:0 auto;position:relative}
#header{position:fixed;top:0;left:0;right:0;background:#f2f2f2 url("../images/grain.png") fixed repeat left top;display:block;z-index:1000;}
#header #header-shadow,#header #header-shadow-line{opacity:0;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-webkit-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;-ms-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}
body.scroll #header #header-shadow,body.scroll #header #header-shadow-line{opacity:1;-ms-filter:none;filter:none}
#header #name{margin:0;padding:0;display:block;position:absolute;top:0;left:-90px;z-index:200;-webkit-transition:top .5s ease-in-out;-moz-transition:top .5s ease-in-out;-o-transition:top .5s ease-in-out;-ms-transition:top .5s ease-in-out;transition:top .5s ease-in-out;width:360px;height:162px;}
body.scroll #header #name{top:-30px}
#header #name a{display:block;}
#header #name a span{display:none}
#header hr{margin-bottom:0;margin-top:0}
#header #header-shadow{width:800px;height:20px;position:absolute;bottom:0;left:50%;margin-left:-400px;-webkit-border-radius:100%;border-radius:100%;-webkit-box-shadow:0 0 30px rgba(0,0,0,0.2);box-shadow:0 0 30px rgba(0,0,0,0.2)}
#header nav{font-family:"Raleway","Helvetica neue",sans-serif;font-weight:100;font-size:20px;line-height:150%;display:block;position:relative;text-align:right;height:75px;background:#f2f2f2 url("../images/grain.png") repeat left top;z-index:100;}
#header nav ul{position:absolute;top:50px;right:0;margin:0;padding:0;list-style:none;-webkit-transition:top .5s ease-in-out;-moz-transition:top .5s ease-in-out;-o-transition:top .5s ease-in-out;-ms-transition:top .5s ease-in-out;transition:top .5s ease-in-out;}
@media all and (max-width: 1200px){#header nav ul{position:absolute;top:50px;right:120px}
}body.scroll #header nav ul{top:23px}
#header nav ul li{padding:0;list-style:none;display:inline-block;}
#header nav ul li.active a{border-bottom:2px solid #000;color:#333}
#header nav ul li a{color:#bbb;text-decoration:none;display:block;padding:0 0;margin:0 5px;-webkit-transition:color .3s ease-in-out;-moz-transition:color .3s ease-in-out;-o-transition:color .3s ease-in-out;-ms-transition:color .3s ease-in-out;transition:color .3s ease-in-out;-webkit-font-smoothing:subpixel-antialiased;}
#header nav ul li a:hover{color:rgba(0,0,0,0.8)}
#main{padding-top:180px;}
#main #intro{font-size:36px;margin:20px 0;color:rgba(0,0,0,0.4)}
.demo-boxes{zoom:1}
.demo-boxes .box{background:#e1f3f3;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f7f0), color-stop(1, #d3f0f6));background:-webkit-linear-gradient(top, #f1f7f0 0%, #d3f0f6 100%);background:-moz-linear-gradient(top, #f1f7f0 0%, #d3f0f6 100%);background:-o-linear-gradient(top, #f1f7f0 0%, #d3f0f6 100%);background:-ms-linear-gradient(top, #f1f7f0 0%, #d3f0f6 100%);background:linear-gradient(top, #f1f7f0 0%, #d3f0f6 100%);width:300px;height:180px;padding:25px 35px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:1px 1px 12px rgba(0,0,0,0.1);box-shadow:1px 1px 12px rgba(0,0,0,0.1);float:left;margin:10px;}
.demo-boxes .box h2{margin:0 0 10px 0}
.demo-boxes .box p{color:#5b6262}
.demo-boxes .box.flexible{min-width:300px;min-height:180px;width:auto;height:auto}
.demo-boxes button{margin:10px 10px 10px 0}
.demo-boxes:before,.demo-boxes:after{content:"";display:table}
.demo-boxes:after{clear:both}
.columns{margin-top:140px;margin-bottom:140px}
#show-your-work{margin-top:10px;min-height:200px;}
#show-your-work img{float:left;position:relative;top:-20px;margin-right:20px}
#social{margin-top:80px}
#footer{color:#aaa}