/* General */

body {
	background-color: #fefefe;
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	line-height: 22px;
}

p {
	margin: 20px 0px;
}

a {
	color: #000000;
	text-decoration: underline;
}

img {
	margin: 15px 0;
	width: 100%;
}

ol, ul {
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 15px;

	list-style-type: disc;
	list-style-position: inside; /* tested on Albums only */
}

li{
  margin: 5px 0;
}

em {
    font-style: italic;
}

h1, h2, h3, h4 {
	font-weight: bold;
}

h1 {
	font-size: 26px;
	line-height: 24px;
	line-height: 32px;
	margin-bottom: 20px;
}

h2 {
	padding-top: 20px;
	font-size: 24px;
	line-height: 30px;
}

h3 {
	padding-top: 16px;
	font-size: 20px;
	line-height: 28px;
}

h4 {
	padding-top: 14px;
	font-size: 18px;
	line-height: 26px;
}

iframe {
	margin: 10px 0;
}

/* blockquote source: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 5px 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

code {
	font-family: monospace;
	color: #4e71af;
}

::selection {
  background: #e6db74;
}
::-moz-selection {
  background: #e6db74;
}






/* Header */

header {
	text-align: center;
	height: 65px; /* Variable */
}

@media (max-width: 705px) { /* Variable */
	header {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;

		background-color: #fff;
		border-bottom-width: 2px; /* Variable */
		border-bottom-color: #888;
		border-bottom-style: solid;
	}
}

#menu {
	width: 80%; /* Variable */
	margin-left: auto;
	margin-right: auto;
	max-width: 600px; /* Variable */
}

@media (max-width: 500px) { /* Variable */
	#menu {
		width: 90%; /* Variable */
	}
}

#alejandro {
	float: left;
	font-family: 'Patrick Hand SC';
	font-size: 36px;
	line-height: 36px;
	margin: 10px 0px 10px 0px;
}

#alejandro a {
	text-decoration: none;
	text-transform: uppercase;
}

#desktop-menu {
	display: inline;
	float: right;
	margin-top: 20px;
}

#mobile-menu {
	display: none;
	float: right;

	margin-top: 20px;
	margin-right: 10px;
	font-size: 30px;

	cursor: pointer;
}

@media (max-width: 600px) { /* Variable */
	#desktop-menu {
		display: none;
	}

	#mobile-menu {
		display: inline;
	}
}

.menu-item {
	float: right;
	font-family: 'Patrick Hand SC';
	font-size: 18px;
	line-height: 20px;
	margin-left: 12px;
}

.menu-item a {
	text-decoration: none;
	text-transform: uppercase;
}

/* Disable custom highlight on menu items */
/* Highlighting occurs during rapid menu clicking */
#open-menu::selection,
#close-menu::selection,
.mobile-menu-item a::selection {
  background: #fff;
}
#open-menu::-moz-selection,
#close-menu::-moz-selection,
.mobile-menu-item a::-moz-selection {
  background: #fff;
}

#open-menu {
	display: block;
}
#open-menu.open {
	display: none;
}

#close-menu {
	display: none;
}
#close-menu.open {
	display: block;
}

#mobile-dropdown {
	display: none;
	position: absolute;
	top: 67px; /* 65 (header) + 2 (border) */
	left: 0px;
	width: 100%;

	border-bottom-width: 2px; /* Variable */
	border-bottom-color: #888;
	border-bottom-style: solid;
}

#mobile-dropdown:after {
  background-color: #fff;
  opacity: .95;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#mobile-dropdown.open {
	display: none;
}

@media (max-width: 600px) { /* Variable */
	#mobile-dropdown.open {
		display: block;
	}
}

.mobile-menu-item {
	font-family: 'Patrick Hand SC';
	font-size: 24px;
	line-height: 28px;

	margin-top: 15px;
	margin-bottom: 15px;
}

.mobile-menu-item a {
	text-decoration: none;
	text-transform: uppercase;
}






/* Footer */

footer {
	margin: 40px auto;
	text-align: center;
	width: 80%;
	max-width: 600px;
}

.footer-icon {
	width: 30px;
	height: 30px;
	margin: 2px;
}







/* Site layout */

#container {
	width: 80%; /* Variable */
	margin-left: auto;
	margin-right: auto;
	max-width: 600px; /* Variable */
}

@media (max-width: 500px) { /* Variable */
	#container {
		width: 90%; /* Variable */
	}
}


@media (max-width: 705px) { /* Variable */
	#container {
		margin-top: 100px; /* 65 (Header) + 2 (Border) + misc for spacing */
	}
}



/* Blog */

.more {
	font-size: 16px;
}



/* Unknown */

#projects, #posts, #playlists {
	margin-bottom: 10px;
	text-align: center;
}







/* Posts & Breakdowns */


.post {
	text-align: left;
	margin: 15px 15px 40px 15px;
}

.post.single {
	margin: 15px 0px 60px 0px;
}

.title {
	font-size: 22px;
	line-height: 24px;
	font-weight: bold;
	margin-bottom: 15px;
}

.title a {
	text-decoration: none;
}

.post-content {
	margin-left: 10px;
}

.post-content.single {
	margin-left: 0px;
}

.meta {
	margin-bottom: 20px;
}

.post-image {
	width: 100%;
	margin-bottom: 20px;
}

.date {
	font-size: 16px;
	margin-right: 10px;
}

.original_date {
	font-size: 16px;
	margin-right: 10px;
	opacity: 0.50;
}

.category, .tags a {
	margin-right: 10px;
	font-size: 14px;
	padding: 3px 8px;
	background-color: #eee;
	border-radius: 3px;
}

.category a, .tags a{
	text-decoration: none;
}

/* This is applying to the entire post, was that intended? */
.snippet {
	margin-bottom: 15px;
	font-size: 18px;
	line-height: 24px;
}

.read-more {
	font-size: 16px;
}

.next-prev {
	display: inline;
}

.next-prev-container {
	float: left;
	width: 40%;
	margin-right: 8%;
	margin-bottom: 30px;
}

@media (max-width: 450px) {
	.next-prev-container {
		float: left;
		width: 90%;
	}
}

.next-prev-value {
	color: #888;
	text-transform: uppercase;
}
.next-prev-value a {
	text-decoration: none;
}

.next-prev-title {
	font-weight: bold;
}

.next-prev-title a {
	text-decoration: none;
}




/* Projects */

/* Expand this to cover all tile like things */
/* Once you do that, rename it tile */
/* Then make the project tile a sub title */
.ti {
	display:inline-block;
	margin: 15 15 15 15px;
	box-shadow: 5px 5px 3px #cccccc;
}

.tile {
	width: 250px;
	height: 250px;
	position: relative;
	overflow-x: hidden;
	display:inline-block;
	margin: 0 15 30 15px;
	background-color: #272822;
	color: #eeeeee;
	line-height: 20px;
	box-shadow: 5px 5px 3px #cccccc;
}

.tile .art,
.tile .vinyl,
.tile .sleeve,
.tile .content {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	transition:         opacity .25s ease-in-out, left .85s ease-in-out;
	-moz-transition:    opacity .25s ease-in-out, left .85s ease-in-out;
	-ms-transition:     opacity .25s ease-in-out, left .85s ease-in-out;
	-o-transition:      opacity .25s ease-in-out, left .85s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out, left .85s ease-in-out;
}

.tile .art {
	z-index: 4;
}

.tile .art:hover {
	opacity: .9;
}

.tile .vinyl {
	z-index: 3;
	opacity: 0.9;
}

.tile .sleeve {
	z-index: 2;
	width: 102%;
	opacity: .8;
}

.tile .content {
	z-index: 1;
	text-align: center;
}

.content h3 {
	font-family: 'Patrick Hand SC';
	font-size: 32px;
	line-height: 32px;
	margin: 10px 0px 10px 0px;
	color: #eeeeee; /* a6e22e, 9973e0 */
	padding: 0; /* override the site wide top-padding */
}

.content .description {
	width: 90%;
	margin-left: 5%;
}

.content p {
	margin: 5px 0px 5px 0px;
}

.content a {
	color: #e6db74;
	font-weight: bold;
}

.shout-outs {
	width: 100%;
	text-align: center;
}

.shout-outs a {
	padding-left: 5px;
	padding-right: 5px;
}

.shout-outs img {
	width: 25px;
	height: 25px;
	margin: 0px;
}

@media (max-width: 705px) {
	.hide-mobile-tile {
		display: none;
	}
}

/* new additions */

img.art {
    margin: 0px;
}

img.vinyl {
    margin: 0px;
}




/* Playlists */

.playlist {
	display:inline-block;
	max-width: 250px;
	margin: 15px 13px 25px 13px;
	text-align: center;
}

.playlist h3 {
	font-size: 20px;
	line-height: 20px;
	padding-bottom: 15px;
}

.embed {
	box-shadow: 5px 5px 3px #cccccc;
}

@media (max-width: 705px) {
	.playlist {
		width: 100%;
		max-width: 350px;
		margin: 13px 0px;
	}
}




/* Dope Stuff */

/*.snippet img {
	padding 15px 0;
	max-width: 100%;
}

.tile img {
    padding: 0px;
    width: 100%;
}
*/

/* My Stuff */

img.projectTile {
	width: 250px;
}

img.igTile {
	width: 250px;
}


/* Custom new Project scroller */

#gradient-anchor {
	/* This is required to make the below ::after shadow align correctly */
	position: relative;
}

#gradient-anchor::after {
  content: ''; /* Pseudo-element */
  position: absolute;
  top: 0;
  right: 0;
  width: 50px; /* Width of the fade effect */
  height: 100%;
  pointer-events: none; /* So it doesn't block scrolling */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

  z-index: 10; /* so that it appears above the tiles */
}

.project-scroll-container {
	overflow-x: scroll;
}

#project-scroller {
	/* set height and disable scroll because the tiles have a padding/margin at the bottom that we want to ignore */
	height: 270px;
	overflow-y: hidden;

	/* make some space at the top so that the "See more" tile's shadow above the tile isn't cut off */
	padding-top: 5px;

	/* up to debate if we keep */
	text-align: left;
}

.blank-tile {
	width: 250px;
	height: 250px;
	position: relative;
	overflow-x: hidden;
	display:inline-block;
	margin: 0 15 30 15px;
	background-color: #fefefe;
	color: #000000;
	line-height: 20px;

	/* slightly different than regular tiles, so that the top and left have */
	box-shadow: 2px 2px 3px 3px #cccccc;
}

.see-more {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Timelines */

.timeline-scroller {
	display: flex;
	overflow-x: scroll;
}

.timeline-item {
	width: 250px;
	height: 150px;
	margin: 0 15 30 15px;
	line-height: 20px;
	box-shadow: 5px 5px 3px #cccccc;
	flex-shrink: 0;
	border: solid 1px #bbbb;
	cursor: pointer;
	padding: 10px;
	box-sizing: border-box;
}

.timeline-title {
	font-size: 18px;
	text-decoration: underline;
}

.timeline-description {
	margin-top: 10px;
	margin-bottom: 20px;
}

ul li {
	/*
	 * We want the bullets outside of the list,
	 * so the text is aligned. Now the actual bullet
	 * is outside of the list’s container
	 */
	list-style-position: outside;

	/*
	 * Because the bullet is outside of the list’s
	 * container, indent the list entirely
	 */
	margin-left: 1.5em;
}