html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, 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, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent}									
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
/* ___*/
img, object, embed {max-width: 100%;}
ul {list-style: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
input, select {vertical-align: middle;}
select, input, textarea {font: 99% sans-serif;}
a:hover, a:active {outline: none;}
.clickable, label, input[type=button], input[type=submit], button {cursor: pointer;}
/*___*/
@font-face {
    font-family: 'LubalinBook';
    src: url('../fonts/lubalingraphstd_book-webfont.eot');
    src: url('../fonts/lubalingraphstd_book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lubalingraphstd_book-webfont.woff') format('woff'),
         url('../fonts/lubalingraphstd_book-webfont.ttf') format('truetype'),
         url('../fonts/lubalingraphstd_book-webfont.svg#ITCLubalinGraphStdBook') format('svg');
    font-weight: normal;
    font-style: normal;

}
body {background: url("../images/skin/background.gif") no-repeat scroll center top transparent; font: 11px 'lucida Grande',Freesans,sans-serif}
body, select, input, textarea {color: #8a8a8a;}
a {color: #D0C37F;}
a:hover {color: #D0C37F;}
h1{color: #D0C37F; font-family: 'Bree Serif', 'LubalinBook'; font-size: 21px; font-weight: normal; margin-bottom: 30px; text-transform: uppercase}
.cboth{clear:both}
.fleft{float:left}
.fright{float:right}
.wrapper{margin:0 auto; max-width:940px; padding:0 30px}
.marginL40{margin-left:40px;}
header{padding: 150px 0 350px}
section {padding: 100px 0}
/*HEADER. __*/
header h1{color:#2b2b2b; font-family:"Reenie Beanie"; font-size:60px; line-height:54px; text-align:center; text-transform:none}
header .logo{background: url("../images/skin/sprite.gif") no-repeat scroll -236px 0 transparent; height:100px; margin:0 auto 30px; width:64px}
header p{color:#999999; font-family:"Reenie Beanie"; font-size:36px; text-align:center}
/*WORKS __*/
#works ul{
    background: none repeat scroll 0 0 transparent;
    list-style: none outside none;
}
#works li{
    background: none repeat scroll 0 0 transparent;
    float: left;
    /*height: 350px;*/
    margin: 16px;
    width: 200px;
}


#works p {
    color: #F7D6D7;
    font-size: 14px;
    margin-top: 10px;
}
.workContainer {
    background: none repeat scroll 0 0 transparent !important;
    display: block;
    float: left;
}
.workItem {
    float: left;
    margin:6px;
    position: relative;
    width: 200px;
}
#works .workContainer .workItem ul {
    background-color: #000000;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
#works .workContainer .workItem ul li {
    float: left;
    height: 260px;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 200px;
}
#works .workContainer .workItem ul li .workImgCont {
    background-color: #000000;
    height: 260px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 280px;
}
#works .workContainer .workItem ul li img {
    display: block;
}
#works .workContainer .workItem ul li .cover {
	background: url("../images/works/cover.png") repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 260px;
    left: 0;
    position: absolute;
    top: 0;
    width: 200px;
    z-index: 10;
}
.workItem .winfo {
    clear: both;
    height: 30px;
    padding: 10px;
    text-shadow: none;
}
#works .workContainer .workItem .infoCont {
    bottom: 0;
    display: none;
    font-size: 10px;
    height: 280px;
    left: 0;
    padding: 20px;
    position: absolute;
    width: 220px;
    z-index: 40;
}
.winfo h3 {
	color: #D0C37F; font-family: 'Bree Serif', 'LubalinBook'; font-size: 13px; font-weight: normal; text-transform: uppercase; float:left;
}
.winfo h3 span {
	color:#999999;
    display: block;
	font-family:"Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
    font-size: 10px;
    font-weight: normal;
    line-height: 11px;
}
#works .workContainer .workItem .wlenght {
    background: none repeat scroll 0 0 transparent;
    float: right;
    line-height: 35px;
    margin: -1px 0 0;
    text-align: center;
    width: 33px;
}
#works .workContainer .workItem .wlenght span {
    color: #DDDDDD;
    text-shadow: none;
}
.taglist{
	display: none;
    font-size: 10px;
    margin: 10px;
    padding: 5px;
	}

.moreinfo{
    background: none repeat scroll 0 0 transparent;
    clear: both;
    font-size: 9px;
    padding: 10px;
    text-align: center;
    text-shadow: none;
	}
.gbord{
	border:4px solid #D0C37F}
/*FRIENDS. __*/
#friends{padding: 200px 0 200px}
#friends p{font-family:"Reenie Beanie"; font-size:30px}
#friends b{color:#000000; font-weight:normal}
/*LINKS. __*/
#links {padding: 100px 0 200px}
#links li a{border-bottom: 1px solid #FFFFFF; color: #8A8A8A; display: block; float: left; padding: 8px 0; text-decoration:none; min-width:156px}
#links li a:hover{border-bottom: 1px dotted #D0C37F; color:#000000}
/*
FOOTER. __*/
footer{background: none repeat scroll 0 0 #000000;
bottom: 0;
padding: 30px 0 50px;
position: fixed;
width: 100%;
z-index: 999}
footer h2{color: #D0C37F; font-family: 'LubalinBook'; font-size: 12px; font-weight: normal; margin-bottom: 6px; text-transform: uppercase}	
footer li{width:450px; float:left}
footer p{font-size: 9px; text-transform:uppercase}
.logoFooter{background:url("../images/skin/sprite.gif") no-repeat scroll 0 0 transparent;  height:54px; width:48px; float:left}
.clockFooter{background: url("../images/skin/sprite.gif") no-repeat scroll -54px 0 transparent; float:left; height:20px; margin-right: 6px; width: 20px}
.signature{float:left; padding:10px}
.office, .contact{width: 214px}
.contact{margin-left:20px}	
#social{padding-top:3px}
#social li{height:16px; margin-right:8px; width:16px}	
#social .mail{background: url("../images/skin/sprite.gif") no-repeat scroll -77px -3px transparent}
#social .twitter{background: url("../images/skin/sprite.gif") no-repeat scroll -100px -3px transparent}
#social .skype{background: url("../images/skin/sprite.gif") no-repeat scroll -122px -3px transparent}
#social .linkedin{background: url("../images/skin/sprite.gif") no-repeat scroll -145px -3px transparent}
#social .dribble{background: url("../images/skin/sprite.gif") no-repeat scroll -168px -3px transparent}
#social .behance{background: url("../images/skin/sprite.gif") no-repeat scroll -190px -3px transparent}
#social .cargo{background: url("../images/skin/sprite.gif") no-repeat scroll -212px -3px transparent}
#social span{position:absolute; left:-999em; width:1em; overflow:hidden}
#social li a{height:16px; margin-right:8px; width:16px; display:block}
/*__*/
@media screen and (max-width: 800px) {
	header h1{color:#2b2b2b; font-family:"Reenie Beanie"; font-size:46px; line-height:42px; text-align:center; text-transform:none}
	#links li a{border-bottom: 1px solid #FFFFFF; color: #8A8A8A; display: block; float: left; padding: 8px 0; text-decoration:none; min-width:142px}
	footer li{width:auto; float:left}
	.office{display:none}
}
@media screen and (max-width: 960px) {
	header h1{color:#2b2b2b; font-family:"Reenie Beanie"; font-size:53px; line-height:58px; text-align:center; text-transform:none}
	#links li a{border-bottom: 1px solid #FFFFFF; color: #8A8A8A; display: block; float: left; padding: 8px 0; text-decoration:none; min-width:142px}
	footer li{width:auto; float:left}
	.office{display:none}
}