/* @override 
	http://alexbuga.is/tumblr/css/style.css */

@import url("fonts/roboto/fonts.css");
@import url("fonts/alexbuga-icons/style.css");
@import url("jquery.fancybox/jquery.fancybox.css");

* {
	margin: 0px;
	padding: 0px;
}

a img {
	border: none;
}

html {
	min-height: 100%;
}

body {
	background: #3c484c url("img/logo.png") no-repeat center center;	
	font-family: "RobotoLight", Helvetica, Arial, sans-serif;
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
}

body.loaded {
	background-attachment: fixed;
	background-size: cover;
}

/* @group Header */

header {
	display: block;
	position: fixed;
	z-index: 2;
	top: -100px;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	font-family: "RobotoLight", Helvetica, Arial, sans-serif;
}

header.loaded {
	top: 0px;
}

header nav {
	display: table;
	position: absolute;
	width: 100%;
	background: #333333;
	box-shadow: 0px 2px 4px rgba(000, 000, 000, .2);
	-webkit-transition: top .5s ease-out;
	-moz-transition: top .5s ease-out;
	-o-transition: top .5s ease-out;
}

header nav a {
	display: table-cell;
	width: 20%;
	position: relative;
	border-bottom: 5px solid rgba(000, 000, 000, .1);
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	vertical-align: middle;
	font-size: 190%;
	font-weight: normal;
	color: rgba(255, 255, 255, .8);
	text-shadow: 0px 1px 1px rgba(000, 000, 000, .1);
	padding: 12px;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
	white-space: nowrap;
	text-decoration: none;
}

header nav a:hover {
	padding-top: 7px;
	border-width: 10px;
	color: white;
}

header nav a.logo {
	background: #33b5e5;
}

header nav .icon {
	display: inline-block;
	position: relative;
	top: 2px;
	margin-right: 4px;
}

header nav a.designer {
	background: #aa66cc;
}

header nav a.photographer {
	background: #99cc00;
}

header nav a.musician {
	background: #ffbb33;
}

header nav a.contact {
	background: #ff4444;
}

header nav a.toggle {
	display: none;
	background: #444;
	position: absolute;
	left: 0px;
	top: 100%;
	clear: both;
	width: 100%;
}

header nav a ul {
	display: none;
	position: absolute;
}

/* @end */

#bigPhoto {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	z-index: 0;
	box-shadow: 0px 0px 15px black;
	-webkit-transition: left .5s;
}

/* @group Grid */

#grid {
	display: none;
	position: absolute;
	z-index: 1;
	top: 0px;
	background:	url("img/tile-grid.png") 25px 88px;
	width: 100%;
	min-height: 100%;
	padding: 190px 25px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-transition: left .5s;
}

#grid h1 {
	color: rgb(255, 255, 255);
	display: block;
	position: absolute;
	top: 119px;
	font-size: 6.25em;
	left: 128px;
	opacity: .4;
	text-shadow: 0px 1px 2px rgba(000, 000, 000, .4);
	clip: rect(0px, 1000px, 64px, 0px);
	text-transform: lowercase;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	overflow: hidden;
}

#grid article {
	display: block;
	position: relative;
	float: left;
	width: 198px;
	height: 198px;
	margin: 0px 0px 102px 102px;
	overflow: hidden;
/* 	font-family: "RobotoThin", Helvetica, Arial, sans-serif; */
}

#grid article section.square {
	display: block;
	position: absolute;
	opacity: 1;
	background: rgba(000, 000, 000, .5);
	color: white;
	text-shadow: 0px 1px 2px rgba(000, 000, 000, .4);
	font-size: 90%;
	padding: 10px;
	overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
	cursor: default;
}

#grid article section.square.a.hidden {
	top: 50%;
	left: 0%;
	opacity: 0;
	z-index: -1;
}

#grid article section.square.b.hidden {
	top: 50%;
	left: 50%;
	opacity: 0;
	z-index: -1;
}

#grid article section.square.c.hidden {
	top: 50%;
	left: 50%;
	opacity: 0;
	z-index: -1;
}

#grid article section.square.d.hidden {
	top: 0%;
	left: 50%;
	opacity: 0;
	z-index: -1;
}

#grid article section.square.ab.hidden {
	top: 0%;
	left: -50%;
	opacity: 0;
	z-index: 10;
}

#grid article a {
	color: white;
	text-decoration: none;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}

#grid article a:hover {
	color: #ff4444;
}

#grid article section.square big {
	display: block;
	clear: both;
	font-family: "RobotoLight", Helvetica, Arial, sans-serif;
	font-size: 250%;
	font-weight: normal;
	text-align: center;
	margin-top: 5px;
}

#grid article section.square big.icon {
	display: block;
	position: absolute;
	width: 48px;
	height: 48px;
	top: 50%;
	left: 50%;
	margin: -24px auto auto -24px;
	font-size: 38px;
}



#grid article section.square small {
	display: block;
	clear: both;
	text-align: center;
	text-transform: uppercase;
/* 	font-family: "RobotoLight", Helvetica, Arial, sans-serif; */
	font-weight: normal;
	font-size: 140%;
}

#grid article section.square img {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: auto;
	height: 100%;
}

#grid article section.square img:nth-child(2n) {
	left: 50%;
	z-index: 10;
}

#grid article.portfolio section.square img,
#grid article.featured section.square img {
	display: none;
}

#grid article.portfolio section.square img:first-child,
#grid article.featured section.square img:first-child {
	display: block !important;
}

#grid article section.square img.portrait {
	width: 100%;
	height: auto;
}

#grid article section.square iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#grid article section.square.a,
#grid article:hover section.square.a.hidden {
	width: 50%;
	height: 50%;
	left: 0;
	top: 0;
	opacity: 1;
}

#grid article section.square.b,
#grid article:hover section.square.b.hidden {
	width: 50%;
	height: 50%;
	left: 50%;
	top: 0;
	opacity: 1;
}

#grid article section.square.c,
#grid article:hover section.square.c.hidden {
	width: 50%;
	height: 50%;
	left: 0;
	top: 50%;
	opacity: 1;
}

#grid article section.square.d,
#grid article:hover section.square.d.hidden {
	width: 50%;
	height: 50%;
	left: 50%;
	top: 50%;
	opacity: 1;
}

#grid article section.square.ab,
#grid article:hover section.square.ab.hidden {
	width: 100%;
	height: 50%;
	left: 0%;
	top: 0%;
	opacity: 1;
}

#grid article section.square.ac,
#grid article:hover section.square.ac.hidden {
	width: 50%;
	height: 100%;
	left: 0%;
	top: 0%;
	opacity: 1;
}

#grid article section.square.bd,
#grid article:hover section.square.bd.hidden {
	width: 50%;
	height: 100%;
	left: 50%;
	top: 0%;
	opacity: 1;
}

#grid article section.square.cd,
#grid article:hover section.square.cd.hidden {
	width: 100%;
	height: 50%;
	left: 0%;
	top: 50%;
	opacity: 1;
}

/* @end */


#content {
	display: block;
	position: fixed;
	z-index: -1;
	top: 100%;
	width: 100%;
	min-height: 100%;
	background: #f9fbf2;
	padding: 5.62em 0px 0px 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	
	-webkit-transform: scale(.7);
	-moz-transform: scale(.7);
	-o-transform: scale(.7);
	
	-o-transition: all .6s cubic-bezier(.01,.98,.71,1);
	-ms-transition: all .6s cubic-bezier(.01,.98,.71,1);
	-moz-transition: all .6s cubic-bezier(.01,.98,.71,1);
	-webkit-transition: all .6s cubic-bezier(.01,.98,.71,1);
	transition: all .6s cubic-bezier(.01,.98,.71,1);
/*	-o-transition: all .8s ease-out;
	-ms-transition: all .8s ease-out;
	-moz-transition: all .8s ease-out;
	-webkit-transition: all .8s ease-out;
	transition: all .8s ease-out;*/
}

#content.open {
	position: absolute;
	top: 0px;
	z-index: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
}

/* @group Content Nav */

#content nav.lightboxControls {
	display: block;
	position: absolute;
	right: 1.5em;
}

#content nav.lightboxControls a {
	display: block;
	float: left;
	width: 28px;
	height: 28px;
	margin: 0px 14px 14px 0px;
	background: url(img/content-controls.png) no-repeat top right;
	text-decoration: none;
	text-indent: -1000px;
	overflow: hidden;
	outline: none;
	background: #;
	color: #;
	font-size: 190%;
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-o-transform: scale(.8);
	-webkit-animation: all .6s ease-out;
	-moz-animation: all .6s ease-out;
	-o-animation: all .6s ease-out;
}

#content nav.lightboxControls a:hover {
	-webkit-transform: scale(1);
}

#content nav.lightboxControls a.prev {
	background-position: top left;
	width: 17px;
	margin: 0px 28px 28px 0px;
}

#content nav.lightboxControls a.next {
	background-position: -18px 0px;
	width: 17px;
	margin: 0px 28px 28px 0px;
}

/* @end */

#content h2, #content h3 {
	display: block;
	clear: both;
	margin: 0 20% .5em 20%;
	font-size: 2.18em;
	font-family: "RobotoLight", Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #ff4444;
	text-shadow: 0px 1px 0px white;
}

#content h2[rel='needstitle'] span.js {
	text-transform: capitalize;
}

#content h3 {
	font-size: 1.25em;
	color: #555555;
}

#content .golden h2,
#content .golden h3,
#content .columns h2,
#content .columns h3 {
	margin: 0 0 .5em 0;
}

#content h2 span.date,
#content h3 span.date {
	font-family: "RobotoThin", Helvetica, Arial, sans-serif;
}

#content p,
#content ul {
	font-size: 0.93em;
	color: #555555;
	text-shadow: 0px 1px 0px white;
	line-height: 1.3em;
	margin: 0 20% 1em 20%;
}

#content ul li {
	display: block;
	clear: both;
	list-style-type: circle;
	list-style-position: inside;
}

#content ul l

#content h2+p {
	margin: 0 20% 3em 20%;
}

#content p.quote {
	font-size: 1.5em;
	font-weight: bold;
	font-style: italic;
	position: relative;
}

.columns p,
.columns ul {
	margin: 0 0 1em 0 !important;
}

.golden p,
.golden ul {
	margin: 0 0 2em 0 !important;
}

#content a {
	color: #ff4444;
}

#content h2 a {
	text-decoration: none;
	display: inline-block;
}

#content h2 a:hover {
	color: #33b5e5;
}

.hasShadow:after {
	content: "";
	display: block;
	clear: both;
	width: 100%;
	height: 1.5em;
	background: url(img/shadow.png) no-repeat center bottom;
	background-size: contain;
}

#content a.tag {
	position: relative;
	display: inline-block;
	height: 22px;
	padding: 0 7px 0 9px;
	margin: 0 0 6px 9px;
	background: #D0D3C8;
	border: none;
	color: #fff;
	font-size: .7em;
	font-weight: bold;
	line-height: 22px;
	text-shadow: 0px -1px 0px rgba(000, 000, 000, .1);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	box-shadow: 0px 1px 1px rgba(000, 000, 000, .1);
}

#content a.tag:hover {
	background: #FFBB33;
}

#content a.tag:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11px 10px 11px 0;
	border-color: transparent #D0D3C8 transparent transparent;
	top: 0;
	left: -10px;
}

#content a.tag:hover:before {
	border-color: transparent #FFBB33 transparent transparent;
}

#content a.tag:after {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	background: #fff;
	top: 8px;
	left: -1px;
	border-radius: 50%;
	box-shadow: inset 0 1px 1px #999;
}

#content .columns {
	display: block;
	clear: both;
	margin: 0 20% 3em 20%;
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
		
	-moz-column-gap: 1.5em;
	-webkit-column-gap: 1.5em;
	column-gap: 1.5em;
}

.golden {
	display: block;
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 3em;
}

.golden .main {
	margin: 0 0 0 20%;
	width: 40%;
	display: block;
	float: left;
}

.golden.eye .main {
	margin: 0 0 0 0;
	width: 60%;
	height: 350px;
	display: block;
	float: left;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}

.golden.alt .main {
	float: right;
	margin: 0 20% 0 0;
}

.golden.eye.alt .main {
	margin: 0;
	float: right;
}

.golden .main img {
	width: 100%;
	height: auto;
	border-radius: 3px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-shadow: 0px 1px 5px rgba(000, 000, 000, .1);
}

.golden.eye .main img {
	width: 100%;
	min-width: 300px;
	min-height: 100%;
	display: block;
	position: relative;
	display: block;
}

.golden.video .main iframe {
	width: 100%;
	height: 350px;
}

.golden .sidebar {
	display: block;
	float: left;
	margin: 0 0 0 0;
	padding: 0 0 0 1.5em;
	width: 20%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.golden.eye .sidebar {
	display: block;
	float: left;
	margin: 0 0 0 0;
	padding: 0 0 0 1.5em;
	width: 20%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.golden.alt .sidebar {
	float: left;
	margin: 0 0 0 20%;
	padding: 0 1.5em 0 0;
}

/*Timeline*/
#timeline {
	display: table !important;
	position: relative;
	width: 60%;
	height: 14px;
	margin: -7px 20% 4em 20% !important;
	list-style-type: none;
}

#timeline li {
	display: table-cell !important;
	clear: none;
	position: relative;
	height: 12px;
	top: 50%;
	border-top: 2px solid #ff4444;
}

#timeline li span {
	display: block;
	position: absolute;
	top: -5px;
	left: 50%;
	margin-left: -4px;
	width: 8px;
	height: 8px;
	border: 2px solid #ff4444;
	border-radius: 6px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	background: white;
	text-decoration: none;
}

#timeline li:first-child span {
	width: 12px;
	height: 12px;
	top: -7px;
	left: 0px;
}

#timeline li:last-child span {
	width: 12px;
	height: 12px;
	top: -7px;
	right: 0px;
	left: auto;
}

#timeline li span strong {
	display: block;
	opacity: 0;
	position: absolute;
	bottom: 8px;
	left: 1px;
	font-size: 12px;
	font-weight: bold;
	color: white;
	background: #ff4444;
	width: auto;
	padding: 1px 4px;
	text-shadow: 0px 1px 0px rgba(000, 000, 000, .4);
	-webkit-transition: all .3s ease-out;
	white-space: nowrap;
	-webkit-transform-origin: left bottom;
}

#timeline li:first-child span strong,
#timeline li:last-child span strong {
	bottom: 13px;
	left: 3px;
}

#timeline li:hover span {
	background: #ff4444;
}

#timeline li:hover span strong {
	opacity: 1;
	-webkit-transform: rotate(-45deg);
}

#timeline li em {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 10px;
	color: #ff4444;
	font-size: 12px;
	font-weight: bold;
	font-style: normal;
	text-align: center;
}

#timeline li:first-child em {
	top: 12px;
	left: -15px;
	text-align: left;
	font-size: 14px;
}

#timeline li:last-child em {
	top: 12px;
	text-align: right;
	right: -15px;
	font-size: 14px;
}

/*Disqus*/
#comments {
	display: none;
	clear: both;
	background: rgba(000, 000, 000, .02) url(img/shadow.png) no-repeat center -15px;
	padding-top: 1.5em;
}

#disqus_thread {
	width: 60%;
	margin: 0 auto;
}

#preloader {
	display: block;
	position: absolute;
	width: 100px;
	left: 50%;
	top: -10%;
	margin-left: -50px;
	background: rgba(000, 000, 000, .7);
	opacity: 0;
	border-radius: 8px;
	box-shadow: 0px 1px 4px rgba(000, 000, 000, .3);
	color: white;
	font-size: 11px;
	font-weight: bold;
	text-shadow: 0px 1px 0px black;
	text-align: center;
	padding: 5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	z-index: 1000;
	-o-transition: all .6s cubic-bezier(.01,.98,.71,1);
	-ms-transition: all .6s cubic-bezier(.01,.98,.71,1);
	-moz-transition: all .6s cubic-bezier(.01,.98,.71,1);
	-webkit-transition: all .6s cubic-bezier(.01,.98,.71,1);
	transition: all .6s cubic-bezier(.01,.98,.71,1);
}

#preloader.visible {
	display: block;
	opacity: 1;
	top: 50%;
}

/* @group Responsive stuff */

@media only screen and (max-width: 1024px){
	header nav {
		font-size: 90%;
	}
	
	#content .columns {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
	
	.golden .main,
	.golden .sidebar {
		width: 60%;
		margin-left: 20%;
		margin-right: 20%;
		padding: 0;
		clear: both;
	}
	
	.golden.eye .main {
		width: 100%;
		clear: both;
		height: 250px;
	}
	
	.golden.eye .sidebar {
		width: 100%;
		clear: both;
		padding: 1.5em 20% 0 20%;
	}
	
	.golden .sidebar {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
	
	.golden.video .main iframe {
		height: 250px;
	}

}

@media only screen and (max-width: 980px) {
	header nav {
		font-size: 80%;
	}

	#content .columns {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	
}

@media only screen and (max-width: 890px) {
	header nav {
		font-size: 70%;
	}
}

@media only screen and (max-width: 815px) {
	header nav {
		font-size: 60%;
	}
}

@media only screen and (max-width: 720px) {

	.golden .sidebar {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	
	header nav {
		display: block;
		bottom: 100%;
	}
	
	header nav a {
		width: auto;
		display: block;
		clear: both;
	}
	
	header nav a.toggle {
		display: block;
	}
	
		
/*	.columns, h2, .columns h3 {
		margin-left: 10% !important;
		margin-right: 10% !important;
	}
	
	h2 {
		font-size: 1.8em !important;
	}
	
	#content .columns h3 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	article.golden section.main,
	article.golden section.sidebar {
		width: 80%;
		margin-left: 10% !important;
		margin-right: 10% !important;
		padding: 0;
		clear: both;
	}
	
	#disqus_thread {
		width: auto !important;
		margin: 0 10% !important;
	}
	
	article.golden-eye section.sidebar {
		padding: 1.5em 10% 0 10%;
	}*/
}

/* @end */