/* Used Fonts */
@font-face { font-family:Sansa-Normal; src:url('sansa/Sansa-Normal.ttf'); }
@font-face { font-family:Sansa-Bold; src:url('sansa/Sansa-Bold.ttf'); }

/* CSS Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,hr,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
:focus { outline:none; }
html,body {height:100%;overflow:hidden;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}
del {text-decoration:line-through;}
abbr[title],dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
hr {display:block;height:0;border-top:1px solid #e3ddcf;border-bottom:1px solid #fff;margin:20px 0;}
input,select {vertical-align:middle;color:#111;font:13px Sansa-Normal, Arial, Helvetica, sans-serif;}
textarea {color:#111;font:13px Sansa-Normal, Arial, Helvetica, sans-serif;}

/* Global Styles */
body { background-color:#000; color:#aaa; font:13px Sansa-Normal, Arial, Helvetica, sans-serif; }
a { color:#08c; text-decoration:underline; }
a:hover { text-decoration:none; }
p { margin-bottom:1.5em; line-height:1.5em; }
hgroup { margin-bottom:10px; }
h2 { color:#08c; font:13px Sansa-Bold; font-weight:normal; line-height:1.4em; text-transform:uppercase; }
h3 span { color:#555; }
b,strong,em { font-family:Sansa-Bold; font-weight:normal; }

header { position:relative; padding:40px 0; z-index:2; }
h1 { width:240px; height:0; background:url(../imgs/logo.png); margin:0 auto; padding-top:55px; overflow:hidden; }

#wrapper { position:relative; width:600px; background:#000 url(../imgs/wrapperbg.jpg) top center no-repeat; border:1px solid #000; margin:10000px auto 0; text-align:justify; }

#wrapper nav { border-bottom:1px solid #000; padding:0 30px; height:50px; }
#wrapper nav a { display:block; float:left; width:20%; color:#fff; font-size:13px; line-height:50px; text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer; opacity:.3; -webkit-transition:opacity .6s; -moz-transition:opacity .6s; transition:opacity .6s; }
#wrapper nav a:nth-child(2) { margin-right:20%; }
#wrapper nav a:hover { opacity:1; }
#wrapper nav a.active { color:#08c; opacity:1; }

#slider { width:600px; border-top:1px solid #202020; overflow:hidden; }
#slider section { width:10000px; overflow:hidden; }
#slider article { display:none; float:left; width:500px; padding:30px 50px 60px; }

#work ul { padding-top:10px; }
#work ul li { background-color:#000; margin-bottom:20px; }
#work ul a { position:relative; display:block; width:490px; height:200px; background:#000 url(../imgs/wrapperbg.jpg) top no-repeat; padding:5px; color:#fff; text-decoration:none; opacity:.5; -webkit-transition:opacity .3s; -moz-transition:opacity .3s; transition:opacity .3s; }
#work ul a span { position:absolute; bottom:5px; left:5px; right:5px; display:block; height:0; background:url(../imgs/trsp80black.png); padding:0 15px; line-height:24px; text-align:right; overflow:hidden; -webkit-transition:height .2s ease-in; -moz-transition:height .2s ease-in; transition:height .2s ease-in; }
#work ul a:hover { opacity:1; }
#work ul a:hover span { height:26px; }

ul#contactform { list-style:none; padding:0; color:#888; }
ul#contactform li { margin-bottom:5px; overflow:hidden; }
ul#contactform li span { display:block; float:left; padding-top:8px; }
ul#contactform li input[type="text"],ul#contactform li textarea { float:right; width:380px; background-color:#000; border:1px solid #111; border-radius:7px; padding:7px; color:#888; }
ul#contactform li input[type="text"] { width:380px; }
ul#contactform li input[type="text"]:focus,ul#contactform li textarea:focus { color:#fff; }
ul#contactform li input[type="submit"] { float:right; background:#000 url(../imgs/wrapperbg.jpg) top no-repeat; border:0; border-radius:7px; margin:0 0 5px 5px; padding:7px 14px; color:#fff; cursor:pointer; opacity:.3; -webkit-transition:opacity .6s; -moz-transition:opacity .6s; transition:opacity .6s; }
ul#contactform li input[type="submit"]:hover { opacity:1; }
ul#contactform li input[type="submit"]:active { margin:1px 0 4px; }
ul#contactform .error,ul#contactform .success { display:none; float:right; color:#c00; font-size:12px; }
ul#contactform .success { color:#060; }

footer { position:relative; width:600px; margin:0 auto 20px; color:#303030; font-size:11px; text-align:center; z-index:2; }

#social { width:180px; margin:20px auto; overflow:hidden; }
#social li { float:left; }
#social li a { display:block; width:50px; height:0; background:url(../imgs/socialmedia.png); margin:0 5px; padding-top:50px; overflow:hidden; opacity:.3; -webkit-transition:opacity .6s; -moz-transition:opacity .6s; transition:opacity .6s; }
#social li a.facebook { background-position:0 0; }
#social li a.twitter { background-position:-50px 0; }
#social li a.linkedin { background-position:-100px 0; }
#social li a:hover { opacity:1; }
#social li a:hover.facebook { background-position:0 -50px; }
#social li a:hover.twitter { background-position:-50px -50px; }
#social li a:hover.linkedin { background-position:-100px -50px; }

#wrap-tile { position:absolute; top:0; bottom:0; left:0; right:0; background:#000 url(../imgs/bg.jpg) no-repeat center; overflow:hidden; z-index:-4; }
#tile { position:absolute; top:-1000px; bottom:-1000px; left:-1000px; right:-1000px; background:url(../imgs/tile.png) center; z-index:-2; }
#texture-tile { position:absolute; top:-1000px; bottom:-1000px; left:-1000px; right:-1000px; background:url(../imgs/bg.jpg) no-repeat center; opacity:.3; z-index:-1; }
#highlight-all { position:absolute; top:50%; left:50%; width:40px; height:40px; background:#fff url(../imgs/bgi.jpg) no-repeat center; margin:-20px; border-radius:30px; z-index:-3; }
#highlight-btn,#highlight-icon { position:absolute; top:50%; left:50%; width:60px; height:60px; background:url(../imgs/highlight.png); margin:-30px; border-radius:30px; cursor:pointer; z-index:1; }
#highlight-icon { top:0; cursor:default; }
#highlight-text { display:none; position:absolute; bottom:50%; left:50%; width:400px; background:#fff; background:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#bbb)); background:-moz-linear-gradient(#fff, #bbb); background:-o-linear-gradient(#fff, #bbb); background:linear-gradient(#fff, #bbb); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; margin:0 -225px 50px; padding:15px 25px; color:#000; font-size:13px; font-smooth:always; text-align:center; }
#highlight-text:after { position:absolute; bottom:-10px; left:215px; display:block; width:0; border-style:solid; border-color:#bbb transparent; border-width:10px 10px 0; content:""; }
#highlight-text i { color:#444; font-size:12px; }