/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
	font-family: 'Open Sans', sans-serif;
}

::-moz-selection {
	color: #fff;
    background: #777;
    text-shadow: none;
}

::selection {
	color: #fff;
    background: #777;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ===============================
   Global
   =============================== */
.right {
	text-align: right;
}
.center {
	text-align: center;
}
/* 4 colors */ 
.colorText:nth-child(4n+1), #demo-menu li:nth-child(4n+1):hover > a, #demo-menu li:nth-child(4n+1) > .desc details, article:nth-child(4n+2) a, article:nth-child(4n+2) footer, #demo-menu li:nth-child(4n+1) h2 a:hover, #about article:nth-child(4n+2) p * {
    color: hsl(217, 74%, 39%);
}
.colorText:nth-child(4n+2), #demo-menu li:nth-child(4n+2):hover > a, #demo-menu li:nth-child(4n+2) > .desc details, article:nth-child(4n+3) a, article:nth-child(4n+3) footer, #demo-menu li:nth-child(4n+2) h2 a:hover, #about article:nth-child(4n+3) p * {
    color: hsl(133, 74%, 39%);
}
.colorText:nth-child(4n+3), #demo-menu li:nth-child(4n+3):hover > a, #demo-menu li:nth-child(4n+3) > .desc details, article:nth-child(4n+0) a, article:nth-child(4n+0) footer, #demo-menu li:nth-child(4n+3) h2 a:hover, #about article:nth-child(4n+0) p * {
    color: hsl(42, 74%, 51%);
}
.colorText:nth-child(4n+0), #demo-menu li:nth-child(4n+0):hover > a, #demo-menu li:nth-child(4n+0) > .desc details, article:nth-child(4n+1) a, article:nth-child(4n+1) footer, #demo-menu li:nth-child(4n+0) h2 a:hover, #about article:nth-child(4n+1) p * {
    color: hsl(0, 74%, 39%);
}

#menu-top a:nth-child(4n+1) li, article:nth-child(4n+2) a:hover {
    background-color: hsl(217, 74%, 39%);
}
#menu-top a:nth-child(4n+2) li, article:nth-child(4n+3) a:hover {
    background-color: hsl(133, 74%, 39%);
}
#menu-top a:nth-child(4n+3) li, article:nth-child(4n+0) a:hover {
    background-color: hsl(42, 74%, 51%);
}
#menu-top a:nth-child(4n+0) li, article:nth-child(4n+1) a:hover {
    background-color: hsl(0, 74%, 39%);
}

#demo-menu li:nth-child(4n+1) .desc, #demo-menu li:nth-child(4n+1) .desc img, #demo-menu li:nth-child(4n+1) .desc:before, article:nth-child(4n+2) {
    border: hsl(217, 74%, 39%) 1px solid;                                                                   
}                                                                                                           
#demo-menu li:nth-child(4n+2) .desc, #demo-menu li:nth-child(4n+2) .desc img, #demo-menu li:nth-child(4n+2) .desc:before, article:nth-child(4n+3) {
    border: hsl(133, 74%, 39%) 1px solid;                                                                   
}                                                                                                           
#demo-menu li:nth-child(4n+3) .desc, #demo-menu li:nth-child(4n+3) .desc img, #demo-menu li:nth-child(4n+3) .desc:before, article:nth-child(4n+0) {
    border: hsl(42, 74%, 51%) 1px solid;                                                                    
}                                                                                                           
#demo-menu li:nth-child(4n+0) .desc, #demo-menu li:nth-child(4n+0) .desc img, #demo-menu li:nth-child(4n+0) .desc:before, article:nth-child(4n+1) {
    border: hsl(0, 74%, 39%) 1px solid;
}
article:nth-child(4n+2) a {
    border: hsl(217, 74%, 39%) 1px dashed;
}
article:nth-child(4n+3) a {
    border: hsl(133, 74%, 39%) 1px dashed;
}
article:nth-child(4n+0) a {
    border: hsl(42, 74%, 51%) 1px dashed;
}
article:nth-child(4n+1) a {
    border: hsl(0, 74%, 39%) 1px dashed;
}
article:nth-child(4n+2) img {
    border: hsl(217, 74%, 39%) 4px solid;
}
article:nth-child(4n+3) img {
    border: hsl(133, 74%, 39%) 4px solid;
}
article:nth-child(4n+0) img {
    border: hsl(42, 74%, 51%) 4px solid;
}
article:nth-child(4n+1) img {
    border: hsl(0, 74%, 39%) 4px solid;
}

/* Masonry */
.span1 {
	width: 20em;
}
.span2 {
	width: 41em;
}
.span3 {
	width: 63em;
}

.masonry, .masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


#meta {
	background: #03060f; /* Old browsers */
		background: -moz-radial-gradient(center, ellipse cover,  #03060f 0%, #140626 89%, #1b1e33 100%); /* FF3.6+ */
			background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#03060f), color-stop(89%,#140626), color-stop(100%,#1b1e33)); /* Chrome,Safari4+ */
				background: -webkit-radial-gradient(center, ellipse cover,  #03060f 0%,#140626 89%,#1b1e33 100%); /* Chrome10+,Safari5.1+ */
					background: -o-radial-gradient(center, ellipse cover,  #03060f 0%,#140626 89%,#1b1e33 100%); /* Opera 12+ */
						background: -ms-radial-gradient(center, ellipse cover,  #03060f 0%,#140626 89%,#1b1e33 100%); /* IE10+ */
							background: radial-gradient(ellipse at center,  #03060f 0%,#140626 89%,#1b1e33 100%); /* W3C */
								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03060f', endColorstr='#1b1e33',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	width: 80em;
	height: 45em;
	padding-top: 20em;
	overflow: hidden;
    transform: translateZ(-50em);
		-ms-transform: translateZ(-50em);
			-webkit-transform: translateZ(-50em);
				-moz-transform: translateZ(-50em);
					-o-transform: translateZ(-50em);
	perspective: 400px;
		-ms-perspective: 400px;
			-webkit-perspective: 400px;
				-moz-perspective: 400px;
					-o-perspective: 400px;	
	transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
				-o-transform-style: preserve-3d; 
	transition: all 2s;
}

#meta > div  {
	position: fixed;
	width: 100em;
	height: 200em;
	background: #111; /* Old browsers */
	border: 20px #999 solid;
	border-radius: 20px;
	display: inline-block;
	transform-origin: 0em 0em 0em;
}


/* ===============================
   Blog / Projet / About
   =============================== */

#projects, #about, #blog, #error  {
	background: url('../img/pattern-stroke.png') repeat;
	margin: 0;
	padding: 0;
	z-index: -99;
}

#main-header, #blog-masonry, #blog-article, #projects section>footer {
	max-width: 62em;
	margin: 0 auto;
}
#blog #blog-masonry {
	width: 62em;
	max-width: none;
}


#page-footer {
	width: 100%;
	text-align: center;
	color: #444;
	font-size: .7em;
	padding: 0;
	z-index: 99;
}
#page-footer a {
	color: #666;
}
#page-footer a:hover {
	color: #999;
}

/* Header */

#main-header {
	position: fixed;
	left: 50%;
	margin-left: -31em;
	height: 5em;
	z-index: 99;
}

#main-header h1
{
	position: relative;
	top: -0.8em;
    font-family: serif;
    font-size: 5em;
    font-weight: normal;
}
#main-header h1 a, header h1 a:visited
{
	display: inline-block;
	color: #fff;
    text-shadow: 0 0 3px #000, 5px 3px 10px #000;
	text-decoration: none;
	transition: all .5s;
		-webkit-transition: all .5s;  
			-moz-transition: all .5s;  
				-o-transition: all .5s;  
					-ms-transition: all .5s; 
	transform: rotateZ(-5deg);
		-webkit-transform: rotateZ(-5deg);
			-moz-transform: rotateZ(-5deg);
				-ms-transform: rotate(-5deg);
					-o-transform: rotate(-5deg);
}
#main-header h1 a:hover
{
    transform: rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
			-moz-transform: rotateZ(0deg);
				-ms-transform: rotate(0deg);
					-o-transform: rotate(0deg);
    text-shadow: 0 0 2px #000, 7px 5px 10px #000;
}
#main-header h1 a:before, #main-header h1 a:after {
	content: "";
	display: inline-block;
	position: relative;
	left: 0.4em;
	top: -0.6em;
	height: 1em;
	border-radius: 5px;
    text-shadow: 0 0 1px #000, 10px 3px 10px #000;
	border-right: 2px solid #555;
	border-bottom: 3px solid #000;
	z-index: 1000;
	transition: all .5s;
		-webkit-transition: all .5s;  
			-moz-transition: all .5s;  
				-o-transition: all .5s;  
					-ms-transition: all .5s; 
	transform: rotateZ(5deg);
		-webkit-transform: rotateZ(5deg);
			-moz-transform: rotateZ(5deg);
				-ms-transform: rotate(5deg);
					-o-transform: rotate(5deg);
}
#main-header h1 a:after {
	left: -0.1em;
	top: -0.4em;
}
#main-header h1 a:hover:before, #main-header h1 a:hover:after {
	transform: rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
			-moz-transform: rotateZ(0deg);
				-ms-transform: rotate(0deg);
					-o-transform: rotate(0deg);
	left: 0.37em;
}
#main-header h1 a:hover:after {
	left: -0.13em;
}
/* Navigation */

#menu-top-mini {
	display: none;
}

#menu-top
{
	position: relative;
	top: -15em;
	left: 15em;
}

#menu-top ul, #menu-top-mini-demo
{
    list-style-type: none;
	margin-left: 2em;
}
#menu-top-mini
{
    list-style-type: none;
	margin-left: 1em;
}

#menu-top li
{
    margin-right: -4em;
	border: 1px solid white;
    border-radius: 5px;
	padding: 5.5px;
	display: inline-block;
    box-shadow: 10px 3px 10px #000;
	transform:scale(0.9) rotateZ(-25deg);
		-webkit-transform:scale(0.9) rotateZ(-25deg);
			-moz-transform:scale(0.9) rotateZ(-25deg);
				-ms-transform:scale(0.9) rotate(-25deg);
					-o-transform:scale(0.9) rotate(-25deg);
	transition:all .25s;
		-webkit-transition:all .25s;
			-moz-transition:all .25s;
				-ms-transition:all .25s;
					-o-transition:all .25s;
	width: 11em;
	text-align: left;
}

#menu-top a
{
    font-size: 1.5em;
    padding-bottom: 3px;
    text-decoration: none;
	color: #fff;
}

#menu-top li:hover
{
	-webkit-transform:rotateZ(-25deg) scale(1);
	-moz-transform:rotateZ(-25deg) scale(1);
    -ms-transform:rotate(-25deg) scale(1);
    -o-transform:rotate(-25deg) scale(1);
    transform:rotateZ(-25deg) scale(1);
    box-shadow: 10px 6px 10px rgba(0,0,0,0.7);
}

/* Content */

body > section > h1 {
	font-size: 10em;
	margin-top: -.5em;
	position: relative;
	left: 0.1em;
	text-shadow: 1px -1px 1px #2d2d2d;
	margin-bottom: -.2em;
}

h1 {
	text-align: left;
}

body > section {
	padding-top: 6em;
	z-index: 10;
}
   
article {
	background: #fff;
	margin: 0 auto;
	position: relative;
	border-radius: 5px 5px 0 5px;
	background: #fff;
	text-align: justify;
}

#blog-article article {
	padding: 2em;
	font-size: .9em;
}

#blog-masonry article {
	display: inline-block;
	margin: 10px 5px;
}

#blog-masonry article::after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 3%;
	width: 95%;
	height: 10%;
	float: right;
	z-index: -1;
	-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.7);
		-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.7);
			box-shadow: 0 10px 10px rgba(0,0,0,0.7);
	-webkit-transform: rotate(2deg);
		-moz-transform: rotate(2deg);
			-ms-transform: rotate(2deg);
				-o-transform: rotate(2deg);
					transform: rotate(2deg);
}
article > div {
	padding: 15px;
}
article h2 {
	padding: .5em 1.5em 0 0;
	font-size: 2em;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}
article p {
	margin: 20px 0;
	line-height: 1.7em;
	word-spacing: -0.1em;
}
#blog-article p  {
	padding: .1em 5em;
	line-height: 2em;
	margin: 2em 0;
}
#blog-article ul , #blog-article ol {
	padding: .1em 5em 0 6.5em;
	line-height: 2em;
}
#blog-article ul ul, #blog-article ol ul, #blog-article ul ol  {
	padding: 0 0 0 2em;
}
#blog-article  img {
	border: none;
	float: right;
	margin: 0 2em .25em 2em;
}
#blog-article .demo, #blog-masonry .demo {
	border-radius: 10px;
	border: 1px #aaa solid;
	display: block;
	margin: auto;
} 

article .example {
	margin: 2em 0;
}
article .small-example {
	margin: 2em auto;
}
article .example p {
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
	color: #777;
	font-size: .9em;
}
.refing {
	font-size: .7em;
	display: inline-block;
	position: relative;
	bottom: .5em;
}
#blog-article  .refing {
	border: none;
}
#blog-article  .refed {
	border: none;
}
article pre.prettyprint {
	margin: 0 4em 0 2.5em;
	padding-left: 2em;
}
article pre ol.linenums {
	padding: 1em !important;
	line-height: 1.4em !important;
}

.source-small {
	float:left;
	margin: 0 2em 0 0;
	padding: 0;
}
.source-small  .prettyprint {
	width: 42em !important;
	margin: 0 0 1em 1em !important;
	height: 22em;
	overflow:auto;
	font-size: .8em;
}
	
.quote {
	font-size: 1.2em;
	margin: 0 .5em;
	padding: 0 1em;
}
.quote p {
	margin-bottom: 0 !important;
	color: hsl(217, 74%, 39%);
}
.quote p:before {
	content:'«';
	font-size: 10em;
	position: absolute;
	left: .35em;
	color: hsla(217, 74%, 70%, .2);
}
.quote footer {
	color: hsl(217, 74%, 70%) !important;
	font-size: 1em;
	text-align: right;
	margin: 0;
	margin-right: 5em;
}  
.quote footer:after {
	content:'»';
	font-size: 10em;
	position: absolute;
	right: .35em;
	margin-top: -.75em;
	color: hsla(217, 74%, 70%, .2);
}
.note {
	font-size: .9em;
	background: hsl(217, 74%, 92%);
	border-radius: 10px;
	margin: 1em 6em !important;
	color: #333;
}
.note:before {
	content:'☄';
	font-size: 7em;
	position: absolute;
	left: 1.25em;
	margin-top: .3em;
	color: hsla(0,0%,100%,.3);

}
#blog-article li  {
	margin-bottom: .5em;
}
#blog-masonry article p {
	font-size: 0.85em;
}

article a, footer a {
	border-radius: 2px;
	text-decoration: none;
	color: #777;
	padding: 0 2px;
	transition: all .5s;
		-webkit-transition: all .5s;  
			-moz-transition: all .5s;  
				-o-transition: all .5s;  
					-ms-transition: all .5s;
}
article a:hover {
	color: #fff !important;
}
footer a:hover {
	color: #222;
	background: #777;
	-webkit-box-shadow: 0 1px 1px #444;
		-moz-box-shadow: 0 1px 1px #444;
			box-shadow: 0 1px 1px #444;
	text-shadow: none;
}
article h1 {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0;
	padding: .5em;
	letter-spacing: .02em;
	text-transform: uppercase;
}
#blog-article article h1 {
	font-size: 4em;
	font-weight: 700;
	margin: .5em;
	background: hsla(217, 74%, 39%, .4);
	border-radius: 5px;
    text-shadow: -1px 1px 2px #ddd;
	text-align: center;
	letter-spacing: .02em;
	text-transform: uppercase;
}

article .cols2 {
	margin: 20px 0;
	column-count: 2;
		-webkit-column-count: 2;
			-moz-column-count: 2;
				-o-column-count: 2;
	column-gap: 40px;
		-webkit-column-gap: 40px;
			-moz-column-gap: 40px;
				-o-column-gap: 40px;
}
article p:nth-child(1) {
	margin-top: 0;
}

article img {
	display: inline-block;
	margin: 20px 0 0 0;
}
.mathjax-formula {
	overflow: auto;
}

p > .MathJax {
	margin-left: 0.3em;
}
#projects article a img {
	border: none;
	float: right;
	margin: 0 0 0 15px;
}
#projects article .no-border:hover {
	border: none;
	background: none;
}
#projects .no-border {
	border: none;
}
#projects a+p {
	text-align:center;
	font-style:italic;
	color: #000;
	height: 12em;
	margin: .5em;
}
#projects h1+a {
	padding: 0;
}
article footer {
	font-size: 0.7em;
}
article footer p {
	float: right;
	margin: 0;
}
#blog article footer time{
	float: right;
	margin-bottom: 10px;
	text-align: right;
}
article footer .twitter-share-button {
	float: left;
	position:relative;
	top: -4px;
}

.task, .type {
	border-top: 1px solid #777;
	font-size: .8em;
	padding: 10px;
	color: #444;
	margin: 0;
}
.type {
	text-align: center;
}

#projects #blog-masonry + footer {
	color: #444;
	padding: .3em;
	margin: 5px auto;
	background: #222;
	border-radius: 10px;
	font-size: .8em;
	text-align: center;
	box-shadow: 1px -1px 1px #2d2d2d;
	text-shadow: 1px -1px 1px #111;
}

/* ABOUT */
#about article, #error article {
	background: #222;
	border: none;
	color: #999;
	text-align: justify;
	margin-bottom: 10px;
	box-shadow: 1px -1px 1px #2d2d2d;
		-webkit-box-shadow: 1px -1px 1px #2d2d2d;
			-moz-box-shadow: 1px -1px 1px #2d2d2d;
}
#about h2 {
	margin: 5px;
	padding: 12px;
}
#about h2 + p {
	margin: 5px;
	padding: 0;
}
#about article ul {
	margin: 5px 0 22px 0;
	padding-left: 10px;
	font-size: .9em;
}
#about article li {
	margin-bottom: 10px;
}
#about article >div {
	margin: 0;
	padding: 20px 20px 0;
}
#about article >div a:hover {
	color: #fff;
}
#about article >div img {
	border:none;
	margin: 0 2px;
	padding: 0;
}

#about article:after, #error article:after {
	-webkit-box-shadow: none;
		-moz-box-shadow: none;
			box-shadow: none;
	-webkit-transform: none;
		-moz-transform: none;
			-ms-transform: none;
				-o-transform: none;
					transform: none;
}

#about .tweets div {
	margin: 0;
	padding: 10px;
}

#error #blog-masonry {
	padding-top:7em;
	margin-bottom: 1em;
}
#error #blog-masonry > h1{
	left: 1em;
}
#error article {
	margin: auto;
	margin-top: 6em;
}
#error article p {
	font-size: 1.2em;
	margin-bottom: 10px;
}


/* ===============================
   Demo
   =============================== */

#demo .info {
	display: none;
}
#demo header {
	position: fixed;
	margin-top: 1em;
}

#menu-top-mini-demo {
	display: block;
	position: fixed;
	top: 0;
	left: -2.5em;
}

#menu-top-mini li, #menu-top-mini-demo li {
	display: inline-block;
	margin: 0 .5em 0 0;
	opacity: .4;
	transition: all 1s;
		-webkit-transition: all 1s;  
			-moz-transition: all 1s;  
				-o-transition: all 1s;  
					-ms-transition: all 1s;
}
#menu-top-mini-demo li {
	display: block;
	text-align: center;
	margin: 1em 0 0 0;
}
#menu-top-mini li:hover, #menu-top-mini-demo li:hover {
	opacity: 1;
}

#demo header h1 {
	margin-top: .6em;
	width: 100%;
	text-align: center;
	position: fixed;
	font-size: .8em;
	opacity: .5;
	color: #777;
}
#demo header a {
	text-decoration: none;
	color: #999;
	opacity: 1;
}

#demo header h1 a:hover, #demo-info > div a:hover {
	text-decoration: underline;
	color: #bbb;
}

#demo-info {
	z-index: 99;
	position: fixed;
	right: 1.2em;
	border-radius: 5px;
	opacity: .8;
	overflow: auto;
}

#demo-info > a {
	float: right;
	margin-right: 3px;
}
#demo-info > div {
	font-size: .7em;
	display: none;
	padding: 20px;
}
#demo-info h3 {
	margin: 5px;
}
#demo-info pre {
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	background: #aaa;
	font-size: .8em;
}

#demo-menu {
	position: fixed;
	left: -1em;
	margin: 0;
	width: 5em;
}

#demo-menu li > a{
	font-size: 1.5em;
	transition: all 1s;
		-webkit-transition: all 1s;  
			-moz-transition: all 1s;  
				-o-transition: all 1s;  
					-ms-transition: all 1s;
	position: relative;
	left: 0em;
}
#demo-menu li:hover > a {
	left: .3em;
}

#demo-menu .desc {
	display:none;
	position: absolute;
    z-index:10;
	padding: 0 1em 0 1em;
    margin-top: -3.3em;
	margin-left: 3em;
    width: 13em;
	border-radius: 5px;
	text-align: left;
	background: #fff;
	opacity: .8;
	color: #111;
	font-size: .7em;
}
#demo-menu .desc img {
	float: right;
	margin-right: -5px;
	margin-left: 5px;
}
#demo-menu .desc h2 {
	margin: 0;
}
#demo-menu .desc h2 a {
	transition: all 1s;
		-webkit-transition: all 1s;  
			-moz-transition: all 1s;  
				-o-transition: all 1s;  
					-ms-transition: all 1s;
	text-decoration: underline;
}
#demo-menu .desc p {
	margin-right: 5px;
}
#demo-menu .desc details {
	font-size: 0.8em;
}
#demo-menu li:hover > .desc{
    display:block;
}
#demo-menu li:hover > .desc:before{
	content: "";
	width: .75em;
	height: .75em;
	background:#fff;
    display:block;
	z-index: 99;
	border-right: none;
	border-top: none;
	position: absolute;
	left: -.45em;
	top: 1.35em;
	-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
					transform: rotate(45deg);
}
	
#scene {
	margin: auto;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: -1;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 993px) {
	#main-header {
		position: fixed;
		left: -2em;
		margin-left: 0;
		height: 5em;
		z-index: 99;
	}
	#main-header h1 {
		position: relative;
		top: -0.8em;
		left: 1em;
		font-family: serif;
		font-size: 5em;
		font-weight: normal;
	}
	#menu-top {
		display: none;
	}
	#menu-top-mini {
		display: block;
		position: relative;
		top: -12em;
		left: 21em;
	}

	#menu-top-mini li {
		opacity: .8;
		width: 4em;
		margin-bottom: 1em;
	}
	
	.span3 {
		width: 41em;
	}
	#blog-article p  {
		padding: .1em 1em;
	}
	#blog-article ul, #blog-article ol  {
		padding: .1em 1em 0 2.5em;
	}
	article pre.prettyprint {
		margin: 0 -1em;
		padding-left: 2em;
		max-height: 30em;
		overflow: auto;
		font-size: .8em;
	}
	article pre ol.linenums {
		width: 50em;
	}
	#blog-article  img {
		border: none;
		float: right;
		margin: 0 2em 2em 2em;
	}
	.source-small {
		float:none;
	}
	.source-small  .prettyprint {
		width: 39em !important;
		height: auto;
		overflow:auto;
	}
	#blog-article article h1 {
		font-size: 3em;
	}
	.quote {
		margin: 0;
		padding: .5em;
	}
	.quote p:before {
		left: 0;
	}
	.quote footer {
		margin-right: 1em;
	}  
	.quote footer:after {
		right: 0;
	}
}

@media only screen and (max-width: 672px) {
	#main-header {
		position: absolute;
		width: 100%;
	}
	#main-header h1 {
		position: relative;
		top: -0.8em;
		left: 0.5em;
		font-family: serif;
		font-size: 5em;
		font-weight: normal;
		text-align: center;
	}
	
	#menu-top-mini {
		display: block;
		position: relative;
		text-align: center;
		top: -7em;
		left: 1em;
	}
	
	#blog > section > h1 {
		font-size: 5em;
		margin-top: .3em;
		width: 100%;
		left: .1em;
		text-align: center;
	}
	
	#blog-masonry, #blog-article{
		padding-top: 7em;
	}
	
	article .cols2 {
		margin: 20px 0;
		column-count: 1;
			-webkit-column-count: 1;
				-moz-column-count: 1;
					-o-column-count: 1;
	}
	
	#blog-article p  {
		padding: .1em .5em;
	}
	.source-small  .prettyprint {
		width: 18em !important;
		height: auto;
		overflow:auto;
	}
	.note {
		margin: 0 !important;
	}
	.note:before {
		left: .5em;
		margin-top: .3em;
	}
	#blog-article .demo {
		margin-left: -1em;
	}
	#blog-article ul  {
		padding: .5em 1em 0 1.5em;
	}
	#blog-article  img {
		border: none;
		float: none;
		margin: 0 1em 1em 0;
	}
	#blog-article article h1 {
		font-size: 1.5em;
	}
	#blog-article article h2 {
		font-size: 1.5em;
	}
	.span1 {
		max-width: 19.875em;
	}
	.span2 {
		max-width: 19.875em;
	}
	.span3 {
		max-width: 19.875em;
	}
	
}


@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
	
	#main-header {
		position: absolute;
		left: 50%;
		margin-left: -31.4375em;
		height: 5em;
		z-index: 99;
	}
	
	#main-header h1
	{
		position: absolute;
		top: -1.5em;
		font-family: serif;
		font-size: 5em;
		font-weight: normal;
	}
	#main-header h1 a, header h1 a:visited
	{
		display: inline-block;
		text-decoration: none;
		transform: none;
			-webkit-transform: none;
				-moz-transform: none;
					-ms-transform: none;
						-o-transform: none;
	}
	#main-header h1 a:before, #main-header h1 a:after {
		display: none;
	}
	.span1 {
		width: 62.25em;
	}
	.span2 {
		width: 62.25em;
	}
	.span3 {
		width: 62.25em;
	}
	
	.masonry-brick[style] {
		position:relative !important;
		display:block !important;
		left:0 !important;
		top:auto !important;
		float:left;
		margin: 1em auto;
	}
	
	article {
		page-break-inside: avoid;
    }
	
	article::after {
		content: "";
		display: none;
	}
	
	.span1 img {
		float: right;
		margin: 1em;
	}
	.span2 img {
		margin-left: 10.5em;
	}
	
	#blog-masonry > h1 {
		font-size: 3em;
		margin-top: -1em;
	}

	#blog-masonry {
		margin: 3em auto;
	}
}