@charset "UTF-8";
@font-face {
	font-family: "Inconsolata";
	font-weight: 400;
	font-style: normal
}

html {
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box
}

*:after, *:before { box-sizing: inherit }
* { box-sizing: border-box }

body {
	background: #757575 url("/images/background.png") top center repeat;
    background-size: 23.5%;
	margin: 1% auto 0 auto;
	min-width: 320px;
	max-width: 960px;
	font-family: "Inconsolata", monospace;
	font-size: 24px;
	color: #000000;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden
}

/* Central column on all pages */
main {
	width: 95%;
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	align-content: stretch;
	align-items: center;
}

button, input, select, textarea {
	font-family: "Inconsolata"
}

a {
	color: #444444;
	text-decoration: none
}

a:hover {
	color: #000000;
}

a:active {
	color: #444444;
}

hr {
	width: 100%;
	margin: 13px 0 13px 0;
	border-top: 0.1px solid #ccc
}

nav img {
	display: block;
	margin: 0 auto
}

nav {
	width: 221px;
	z-index: 2;
	position: relative;
	margin: 0 auto 2% auto;

	display: flex;
	justify-content: space-between;
	align-items: flex-end
}


h1 {
	font-weight: 400;
	font-size: 1.75em;
	margin: 0 0 .75em 0
}

h2 {
	font-weight: 400;
	font-size: 1.35em;
	line-height: 1.4em
}

h3 {
	font-weight: 700;
	font-size: 1em
}


p + p iframe {
	margin-top: 1em
}

iframe {
	width: 100% !important;
	display: inline-block;
	border: none;
	animation-name: fadeIn;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-duration: 1s;
	animation-delay: 1s;
	opacity: 1;
	animation-fill-mode: backwards
}

@keyframes fadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}


.project {
	float: left;
	overflow: hidden;
	position: relative
}

.projectWrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-size: 100%
}

.blur {
	filter: brightness(33%);
    background-size: 50%;
}

.project div.info {
	font-family: "Inconsolata"
	color: #e6e6e6;
	line-height: 1;
	left: 50%;
	width: 50%;
	min-height: 100%;
	font-size: 8px;
	padding: 3%
}

.hide {
	display: none !important
}

.project a {
	color: #9C9C9C !important
}

.project a:hover {
	color: #9C9C9C !important
}

.project_icons {
	font-family: "Inconsolata"
	width: 100%
}

.project_desc {
	color: #e6e6e6;
	margin-top: 0px;
	line-height: 1;
}

.project_date {
	color: #e6e6e6;
	margin: 0px;
}

.project_links {
	color: #e6e6e6;
	margin-top: 0px;
}

.project_tags {
	font-style: italic;
	color: #9C9C9C;
	padding-right: 8vw;
	line-height: 1.2;
	position: absolute;
	bottom: 1.25vw
}

.icon {
	display: inline-block;
}

.icon.icon_soundcloud { content: url(/images/buy_sc.png) }
.icon.icon_youtube { content: url(/images/buy_yt.png) }
.icon.icon_web { content: url(/images/buy_web.png) }
.icon.icon_vimeo { content: url(/images/buy_vim.png) }
.icon.icon_watch { content: url(/images/buy_watch.png) }
.icon.icon_bandcamp { content: url(/images/buy_bc.png) }
.icon.icon_itch { content: url(/images/buy_itch.png) }
.icon.icon_spotify { content: url(/images/buy_spot.png) }
.icon.icon_itunes { content: url(/images/buy_itunes.png) }

.project_icons a.icon {
	width: 11vw;
	height: 11vw;	
}

/* grid view defaults */
@media (min-width:456px) {
	div.project {
		width: 25%;
		display: inherit
	}

	div.focus {
		float: left;
		width: 100%
	}

	.project img {
		cursor: pointer;
		width: 100%;
		float: left;
		height: auto
	}

	.focus img {
		float: left;
		width: 50%
	}

	.project div.info {
		display: none
	}

	.focus div.info {
		display: inherit;
		float: left;
		position: absolute
	}

	.right {
		float: right !important
	}

	.project a:active, .project a:hover {
		color: #e6e6e6 !important
	}
}

/* Small grid view (portrait iPad) */
@media (min-width:456px) {
	.project_desc { font-size: 2.25vw }
	.project_links { font-size: 2vw }
	.project_date { font-size: 2vw }
	.project_tags { font-size: 1.75vw }

	.project_icons {
		bottom: 6vw;
		position: absolute;
	}

	.project_icons a.icon {
		width: 6vw;
		height: 6vw;
	}
}

/* Large grid view (Desktop, landscape iPad) */
@media (min-width:960px) {
	.project_desc { font-size: 1.8em }
	.project_links { font-size: 1.5em }
	.project_date { font-size: 1.8em }
	.project_tags { font-size: 1.4em }

	.project_icons {
		bottom: 7.75em;
		position: absolute;
	}

	.project_icons a.icon {
		width: 50px;
		height: 50px;
	}
}

/* List view (mobile) */
@media (max-width:455px) {
	.project {
		width: 100%;
		display: inline-block
	}

	.project img {
		width: 100%;
		height: auto
	}

	.project div.info {
		display: inline-block;
		padding: 4% 4% 8% 4%;
		width: 100%;
		left: 0;
		border-bottom: 0px solid #000000
	}

	.project_desc { font-size: 4vw; margin-bottom: 5px }
	.project_links { font-size: 1.5em }
	.project_date { font-size: 4vw }
	.project_tags { font-size: 3vw }

	.project_icons a.icon {
		width: 50px;
		height: 50px;
	}

	.project:last-of-type div.info {
		color: #e9e9e9;
		border-bottom: 0
	}

	.project a:active {
		color: #9C9C9C;
	}
}


.bandcamp {
	height: 120px !important;
	width: 100%
}