@charset 'utf-8';
@import url(normalize.css);
@import url(fancybox.css);
@import url(pictos.css);

/* ----------------------------------------------------- Comment */

.js div { } /* apply only on JavaScript enabled browsers */
.ie7 div { } /* apply only on Internet Explorer 7 and below */
.ie6 div { } /* apply only on Internet Explorer 6 and below */

/* 
font-family: "cubano",sans-serif;
font-style: normal;
font-weight: 400;


font-family: "cubano",sans-serif;
font-style: italic;
font-weight: 400;


font-family: "ff-tisa-web-pro",serif;
font-style: normal;
font-weight: 400;
*/

html {
	height: 100%;
}

body {
	background: rgba(0,0,0,.1);
	font-size: 16px;
	/* font-family: "ff-tisa-web-pro",serif; */
	font-family: "ff-meta-serif-web-pro";
	font-style: normal;
	font-weight: 500;
	margin: 0;
	padding: 0;
	height: 100%;
	text- rendering:optimizeLegibility;
}

#container {
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	background: transparent url(../img/sebastiangerhard_bg.jpg) repeat;
	padding-top: 5em;
	min-height: 100%;
	margin-bottom: 0;
	padding-bottom: 0;
	clear: both;
	
}

#header {
	background: rgba(0,0,0,.8);
	background-image: url(../img/header_bg.png), -o-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(76,76,76) 100%);
	background-image: url(../img/header_bg.png), -moz-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(76,76,76) 100%);
	background-image: url(../img/header_bg.png), -webkit-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(76,76,76) 100%);
	background-image: url(../img/header_bg.png), -ms-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(76,76,76) 100%);
	background-image: linear-gradient(90deg , rgb(0,0,0) 0%, rgb(76,76,76) 100%);
	height: 2.55em;
	box-shadow: 0px 2px 3px rgba(0,0,0,.4);
	position: fixed;
	top:  0;
	left: 0;
	width: 100%;
	margin-bottom: 1em;
	z-index: 1000;
	border-bottom: 1px solid rgba(0,0,0,1);
	text-align: left;
	
}

#header h1 {
	font-family: "proxima-nova";
	font-weight: 600;
	font-size: 1em;
	color: rgba(255,255,255,1);
	margin-left: 3em;
	margin-top: 10px;
	
}

#header h1 span {
}

#header h1 span#home::before {
	font-family: 'Pictos';
	content: 'H';
	margin-right: .4em;
	font-weight: normal;
	
}

#header h1 span#projects::before {
	font-family: 'Pictos';
	content: 'x';
	margin-right: .4em;
	font-weight: normal;
	
}

#header h1 span#twitter::before {
	font-family: 'Pictos';
	content: 'B';
	margin-right: .4em;
	font-weight: normal;
	
}


#header h1 span#about::before {
	font-family: 'Pictos';
	content: 'U';
	margin-right: .4em;
	font-weight: normal;
	
}

#header h1 span#rss::before {
	font-family: 'Pictos';
	content: 'f';
	margin-right: .4em;
	font-weight: normal;
	
}

#header h1 span#archive::before {
	font-family: 'Pictos';
	content: 'b';
	margin-right: .4em;
	font-weight: normal;
	
}

#header h1 span#privacy::before {
	font-family: 'Pictos';
	content: 'E';
	margin-right: .4em;
	font-weight: normal;
	
}

#header a {
	color: rgba(255,255,255,1);
	-webkit-transition: color.1s ease-in-out 0s;
	margin-right: 3em;
	
}

#header a:hover {
	color: rgba(13,159,255,.85);
}

#content {
	text-align: left;
	float: left;
	margin: 0; 
	height: 100%;
	
	
}

#aside {
	width: 26%;
	float: left;
}

.aside_module {
	float: left;
	height: 100%;
	padding-left: 1%;
}



.article {
	padding: 2em 0 2em 11.5em;
	border-bottom: 1px solid rgba(0,0,0,.1);
}

.article:last-of-type {
	border-bottom: none;
}
	
h2 {
	font-size: 2.25em;
	color: rgba(0,0,0,.85);
	/* text-shadow: 0px 1px 1px rgba(0,0,0,.15); */
	margin-bottom: .5em;
	margin-top: 0;
	font-family: "proxima-nova";
	font-style: normal;
	font-weight: 300;
}


h2 a {
	color: #000;
}

h4 {
	margin-bottom: 1em;
	padding: 0;
	font-weight: 100;
	font-size: 0.875em;
	font-style: normal;
	margin-left: -1.55em;
	font-family: "proxima-nova";
}

h4 span.datum {
	color: rgba(0,0,0,.35);
}

h4 span.datum::before {
	font-family: 'Pictos';
	content: 'A';
	margin-right: .2em;
	
}

h4 span.tags {
	/* color: rgba(13,159,255,.5) !important; */
	color: rgba(0,0,0,.45) !important;
	margin-left: 1em;
}

h4 span.tags::before {
	font-family: 'Pictos';
	content: 'z';
	margin-right: .3em;
	
}

.permalink {
	font-family: 'Pictos';
	content: 'A';
	color: red;
}

p {
	margin: 0 0 1.5em 0;
	line-height: 1.5em;
	color: rgba(0,0,0,.7);
	width: 75.833333333333%;
}

p em {
	font-style: italic;
}

p.about {
	color: rgba(0,0,0,.34) !important;
}

p.meta {
	margin: none;
}

a, a:link, a:visited {
	color: rgba(13,159,255,1);
	text-decoration: none;
}

h3 {
		font-size: 1.3125em;
		color: rgba(0,0,0,.85);
		margin-bottom: 1em;
		margin-top: 0;
		font-family: "proxima-nova";
		font-style: normal;
		font-weight: 300;
		
	}

#aside p {
	color: rgba(13,159,255,1);
	font-style: italic;
	font-size: 0.875em;
	line-height: 1.14285714285714em;
}

.group::after {
	/* content: "."; */
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
figure {
	margin: 0;
	margin-bottom: 1.5em;
	margin-top: 1em;
	padding: 0;
	position: relative;
}

figure img {
	max-width: 94%;
}

figure p {
	width: 100% !important;
}

figure p img:hover {
	background: rgba(0,0,0,.2);
}

figcaption {
	padding: 0;
	margin: 0;
	position: absolute;
	width: 15%;
	top:  80%;
	left: -18%;
	color: rgba(13,159,255,1) !important;
	font-size: 0.875em;
	font-style: italic;
	text-align: right;
}
	
.footer {
	width: 62.352941176471%;
	clear: both;
	padding-left: 13em;
	font-size: 0.875em;
	font-family: "proxima-nova";
	font-style: normal;
	font-weight: 400;
	height: 6em;
}


.footer  a {
	background: rgba(13,159,255,1);
	padding: 6px 12px;
	color: rgba(255,255,255,1);
	border-radius: 25px;
	margin-bottom: 3em;
	float: left;
	margin-top: 2em;
	margin-right: 1em;
}

.footer a.prev::before {
	font-family: 'Pictos';
	content: '[';
	margin-right: .4em;
	
}


.footer a.next::after {
	font-family: 'Pictos';
	content: ']';
	margin-left: .3em;
	
}
blockquote {
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
	min-width: 100%;
	margin-left: -2em;
	}

blockquote p {
	background: rgba(251,255,166,.5);
	padding: 0.25em .5em .25em .825em;
	font-family: "proxima-nova";
	font-style: normal;
	font-weight: 400;
	margin-bottom: 0px;
	border-bottom: 1px solid rgba(251,255,166,.75);
	font-size: 1.25em;
	}

.source {
	font-size: 0.875em;
	font-style: italic;
}

p iframe {
	max-width: 94%;
}

iframe {
	border: none;
}

@media (max-width: 768px) {

#body {
	background: transparent;
} 

	#container {
		width: 90%;
	}
	
	.article {
	}
	
	#content {
		float: none;
	}
}