@charset "UTF-8";
html, 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, 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; }

html, body, .container {height:100%}

body {
font-family: Helvetica, Arial, sans-serif;
line-height:1;}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block; }

nav ul, ul {
list-style:none; }

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent; }
.clear{clear:both}
.featherlight{z-index:8 !important}
/*.featherlight .featherlight-content {background-color:transparent !important}
.featherlight .featherlight-close-icon {display:none !important}*/
.container { 
	width: 940px; 
	margin: 0 auto;
	position:relative;
	padding:0 10px;
	display:table;
}

body, #bg {
	background-color: #f6f6f6;
}
#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom:auto;
    width: 680px;
    height: 100%;
    z-index: 2;
}

#background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #fff; 
    z-index: 1;
}

#left{float:left;width:230px;position:fixed;z-index:1}
#right{float:left;width:620px;margin:0 0 160px 320px;z-index:4}

header h1 {
	font-family: 'Raleway', sans-serif;
	font-weight:bold;
	font-size: 1.38em;
	line-height: 1.6em;
	color:#333;
	padding-top:42px;
}

.surname {
	color:#377CFF;
	margin-left:-6px;
}

.folio {
	text-transform:uppercase;
	font-weight:200;
	font-size: 1.81em;
	letter-spacing: -0.01em;
	color:#707070;
	margin-left:-2px;
}

#links {font-family: 'Raleway', sans-serif;margin-top:120px}
#links, #works, #leftfo, #photography {border-top: 1px solid #377CFF;position: relative;z-index:4}
#links:after, #works:after, #leftfo:after, #photography:after {position: absolute;
    left: 60px;
    right: 0;
    top: -1px;
    border-top: 1px solid #e8e8e8;
    content: '';
}
article {border-bottom: 1px solid #e8e8e8;position: relative;z-index:4}
article:after{position: absolute;
    left: 30px;
    right: 210px;
    bottom: -1px;
    border-bottom: 1px solid #377CFF;
    content: '';
}
#links ul{margin-top:15px}
#links li {display:inline-block;margin-bottom:12px}
#links a {color:#707070;font-size:11pt;text-decoration:none;float:left;margin-top:2px;}
#links a, .pronline a {-webkit-transition:color 0.3s linear;-khtml-transition:color 0.3s linear;-moz-transition:color 0.3s linear;-o-transition:color 0.3s linear;transition:color 0.3s linear}
#links a:hover{color:#377CFF}
.mail {display:block;width:20px;height:16px;background:url(../images/sprite.png) no-repeat 0 0;float:left;margin-right:10px}
.cv {display:block;width:16px;height:17px;background:url(../images/sprite.png) no-repeat -21px 0;float:left;margin-right:15px}
#works, #photography {margin-top:50px}
#works h2 {font-family: 'Raleway', sans-serif;font-size:1.85em;text-transform:uppercase;font-weight:200;color:#707070;padding:15px 0 40px}
#works h2 span {color:#333}
article {width:300px;background-color:#fff;padding-bottom:23px;margin-bottom:20px}/*float:left;*/
article .image {width:300px;height:180px;overflow:hidden}
article .image img {-webkit-opacity:.5;-khtml-opacity:.5;-moz-opacity:.5;filter:alpha(opacity=50);opacity:.5;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;-o-filter: grayscale(100%);-ms-filter: grayscale(100%);-moz-filter: grayscale(100%);-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%);filter: gray;filter: grayscale(100%)}
article .image img:hover {-webkit-opacity:1;-khtml-opacity:1;-moz-opacity:1;filter:alpha(opacity=100);opacity:1;-o-filter: grayscale(0%);-ms-filter: grayscale(0%);-moz-filter: grayscale(0%);-webkit-filter: grayscale(0);-webkit-filter: grayscale(0%);filter: grayscale(0%)}
article header, .prcontent {padding:0 30px}
header h3 {font-family: 'Raleway', sans-serif;color:#333;font-weight:bold;font-size:1em;line-height:1.6em;padding-top:19px;margin-bottom:5px}
.prcontent p {font-family: 'Raleway', sans-serif;color:#707070;font-size:11pt;line-height:1.5em}
.pronline {margin-top:15px}
.pronline span {font-weight:700;color:#377CFF}
.pronline a {color:#333;text-decoration:underline;}
.pronline a:hover {color:#377CFF}
/*article:nth-of-type(2n+1) {margin-right:20px}*/
.artleft {float:left;margin-right:20px}
.artright{float:left}
.red{background: linear-gradient(45deg, #8122E1, #32AFFA);}
.black{background-color:#000}
#bgf {
    position: absolute;
	margin-top:-120px;
    left: 0px;
    width: 50%;
    height: 120px;
    background-color: #f6f6f6; 
    z-index: 5;
}
#bgfo {
    position: absolute;
	margin-top:-120px;
    right: 0px;
    width: 50%;
    height: 120px;
    background-color: #fff; 
    z-index: 5;
}
#rightfo {bottom:0;width:680px;height:120px;position:absolute;z-index:6;background-color:#fff;margin-left:270px}
#leftfo {bottom:0;width:220px;height:119px;position:absolute;z-index:7;float:left}
#leftfo p {font-family: 'Raleway', sans-serif;color:#707070;font-size:10pt;line-height:1.5em;margin-top:20px}
.noscroll {overflow:hidden}