/*

http://juancarlosbronstein.com/style/juan-responsive.css
by Adam Khan at http://engaging.net

*/


/**********
DESKTOP & TABLET
Reduce h1 then h2 to fit until just hide h1
***********/

@media screen and (min-width: 1251px) and (max-width: 1400px)
{
	#top h1
	{
		font-size: 7.75rem;
	}
}

@media screen and (min-width: 1076px) and (max-width: 1250px)
{
	#top h1
	{
		font-size: 6.25rem;
	}
}

@media screen and (min-width: 961px) and (max-width: 1075px)
{
	#top h1
	{
		font-size: 5rem;
	}
}

@media screen and (max-width: 1075px)
{
	#top h1
	{
		display: none;
	}

	#top h2
	{
		margin-top: 0;
	}
}

@media screen and (max-width: 800px)
{
	#top h2
	{
		font-size: 2rem;
	}
}


/******************
MOBILE
******************/

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

	#top
	{
		display: block;
		padding: 0 0.5rem 1rem 0.5rem;
		margin-top: 10rem;
	}

		#menu.headroom--pinned
		{
			top: 0;
		}
			#menu li
			{
				margin-left: 0;
				margin-right: 0.5rem;

			}

			#menu li.parent
			{
				margin-top: 2rem;
				margin-bottom: -2rem;
			}

		#top-inner
		{
			margin-top: 3rem;
			margin-bottom: 2rem;
		}

			#top h2
			{
				font-size: 1.5rem;
			}

			#accolade
			{
				max-width: none;
				text-align: left;
			}

				#accolade p#accolade-source
				{
					text-align: right;
				}

	#shows
	{
	}
			#shows p
			{
				width: 70%;
			}

			#shows p.date
			{
				width: 20%;
			}

	.item
	{
		width: auto;
		border-bottom-left-radius: 2rem;
	}

	#filters p
	{
		font-size: 0.75rem;
	}

	#filters select
	{
		font-size: 1rem;
		color: #000;
	}

	.works #middle
	{
		padding-top: 0;
	}

	ul#works
	{
		display: block;
		margin: 0;
		padding-left: 0;
	}

		ul#works li
		{
			height: auto;
			margin: 0;
			padding: 0;
			width: 100% !important;
		}

			ul#works li .grey-rectangle
			{
				background: none;
				height: auto;
			}

				#works li .grey-rectangle .image-holder
				{
					position: static;
					left: auto;
				}

					#works li .grey-rectangle .image-holder img
					{
						left: auto;
						margin: 0 auto;
						height: 100%;
					}

					#works li .grey-rectangle .image-holder img.horizontal
					{
						width: 100%;
					}

					#works li .grey-rectangle .image-holder img.vertical
					{
						width: 75%;
					}


			ul#works li .item
			{
				padding: 0.5rem 0.5rem 3rem;
			}

	#middle img#display
	{
		max-height: none !important;
		width: 100%;
	}

}