/*
@font-face {
	font-family:'abel';
	src:url('/fonts/abel-regular-webfont.eot');
	src:url('/fonts/abel-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('/fonts/abel-regular-webfont.woff') format('woff'),
		url('/fonts/abel-regular-webfont.ttf') format('truetype'),
		url('/fonts/abel-regular-webfont.svg#abel') format('svg');
	font-weight:normal;
	font-style:normal;
}
*/



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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display:block;
}
* {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}


ul{list-style:none;}
img{max-width:100%;-ms-interpolation-mode:bicubic;}
small{font-size:.75em;}


html{overflow-y:scroll;overflow-x:hidden; -webkit-overflow-scrolling:touch; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
body{font-size:1em;}

::-moz-selection{background:#f0c; color:#fff !important; text-shadow:none;}
::selection{background:#f0c; color:#fff !important; text-shadow:none;}


a{color:#fff; text-decoration:none; outline:0;}
a:hover{color:#8d8d8d;}





.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0, 0, 0, 0);
white-space:nowrap;
border:0;
}

.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
}
.clearfix{
zoom:1;
}
.clearfix:before,
.clearfix:after{
content:"\0020";
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
}
.clearfix:after{
clear:both;
}


html{
height:100%;
}
body{
height:100%;
background:#1a1a1a;
color:#8d8d8d;
text-align:left;
font-size:100%;
font-family:"abel", Arial, Helvetica, Verdana, sans-serif;
}

h1,h2,h3,h4,h5,h6{
font-weight:normal;
margin:10px 0 0;
text-transform:uppercase;
letter-spacing:.1em;
color:#fff;
}
h1{font-size:1.6em;}
h2{font-size:1.5em;}
h3{font-size:1.4em;}
h4{font-size:1.3em;}
h5{font-size:1.2em;}
h6{font-size:1.1em;}

p,ul,ol,table,fieldset,blockquote,pre,dl,address{
margin-top:10px;
}



header{
padding:16px 0;
}
a#logo{
display:block;
float:left;
width:213px;
height:46px;
background:url(/img/djahal.png) 0 0 no-repeat;
margin:0 26px;
}
a:hover#logo{
background-position:0 -46px;
}
ul#social{
margin:0;
padding:0;
}
ul#social li{
float:left;
margin:0 7px;
}
ul#social li a{
display:block;
background:url(/img/social.png) 0 0 no-repeat;
border:1px solid #000;
width:38px;
height:38px;
}
ul#social li a.e-mail{background-position:0 0;}
ul#social li a.linkedin{background-position:-38px 0;}
ul#social li a.youtube{background-position:-76px 0;}
ul#social li a.twitch{background-position:-114px 0;}
ul#social li a.instagram{background-position:-152px 0;}
ul#social li a.facebook{background-position:-190px 0;}
ul#social li a.gumroad{background-position:-228px 0;}
ul#social li a:hover.e-mail{background-position:0 -38px;}
ul#social li a:hover.linkedin{background-position:-38px -38px;}
ul#social li a:hover.youtube{background-position:-76px -38px;}
ul#social li a:hover.twitch{background-position:-114px -38px;}
ul#social li a:hover.instagram{background-position:-152px -38px;}
ul#social li a:hover.facebook{background-position:-190px -38px;}
ul#social li a:hover.gumroad{background-position:-228px -38px;}
header p{
float:right;
margin:10px 32px 0 7px;
}

#breadcrumb{
background:#292929;
font-size:1.15em;
padding:5px 26px;
}
#breadcrumb span{
color:#fff;
padding:0 2px;
}

.dir-container{
display:grid;
grid-gap:1px;
grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
}
.dir-container.project{
margin:30px 0 0;
}

a.dir{
display:block;
max-width:500px;
position:relative;
overflow:hidden;
}

a.dir img{
display:block;
}
a.dir .focus{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
color:#000;
opacity:0;
-webkit-transition:all .15s linear;
-moz-transition:all .15s linear;
-o-transition:all .15s linear;
-ms-transition:all .15s linear;	
transition:all .15s linear;
}
a.dir .focus.current,
a:hover.dir .focus{
opacity:1;
}
a.dir .focus span{
display:block;
text-align:center;
font-size:1.5em;
}
a.dir .focus .editor{
margin:20% 0 0;
}
a.dir .focus .title{
font-size:2.5em;
line-height:1;
text-transform:uppercase;
margin:5px 0 0;
}
a.dir .focus .delim{
position:relative;
width:150px;
height:2px;
left:50%;
transform:translateX(-50%);
background:#000;
margin:30px 0;
}

.file{
margin:20px 0 10px;
text-align:center;
}
.file img{
display:block;
margin:auto;
max-height:100vh;
}
.file img.inline{
display:inline;
vertical-align:middle;
}
.file p, .file figcaption{
margin:0 26px;
padding:3px 0;
font-size:1.125em;
}
.file p a, .file figcaption a{
margin:0 0 0 7px;
}

.embed{
width:100%;
max-width:1000px;
margin:auto;
}
.embed div{
position:relative;
height:0;
padding-bottom:56.25%;
}
.embed iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}


#totop{
position:fixed;
bottom:20px;
right:20px;
z-index:100;
display:none;
}
#totop a{
display:block;
width:30px;
height:30px;
opacity:.5;
padding:7px 0 0;
text-align:center;
background:transparent;
border-radius:3px;
-webkit-transition:all .15s linear;
-moz-transition:all .15s linear;
-o-transition:all .15s linear;
-ms-transition:all .15s linear;	
transition:all .15s linear;
}
#totop a:hover{
opacity:1;
background:#000;
}


@media only screen and (min-width:1664px){
	.dir-container{
	grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));
	}
}
@media only screen and (max-width:1080px){
	.dir-container{
	grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
	}
}
@media only screen and (max-width:840px){
	header{
	padding:16px 0 10px;
	}
	ul#social{
	clear:both;
	padding:10px 0 0;
	text-align:center;
	}
	ul#social li{
	float:none;
	display:inline-block;
	}
	a.dir .focus span{
	font-size:1.25em;
	}
	a.dir .focus .editor{
	margin:20px 0 0;
	}
	a.dir .focus .title{
	font-size:1.75em;
	}
	a.dir .focus .delim{
	width:75px;
	height:1px;
	margin:20px 0;
	}
}