/*

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

*/

html
{
	background: #304d5e;
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body
{
	color: #999;
	font-family: 'Vitesse SSm A', 'Vitesse SSm B', helvetica, arial, san-serif;
	font-style: normal;
	font-weight: 500;
	margin: 0;
	padding: 0;
}
body.interstitial
{
	background: url('https://juancarlosbronstein.com/assets/images/default-loader.gif') no-repeat center center;
	min-height: 10rem;
	opacity: 0.25 !important;
	cursor: wait !important;
}

#wrapper
{
	min-height: 90vh;
	overflow-x: hidden;
}

/* ***********
@CLEARFIX
*************/

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* ***********
@GENERAL
*************/

textarea,
input,
select
{
	border: 0;
}

#wrapper
{
	margin: 0;
}

a:link,
a:visited
{
	color: #fff;
	text-decoration: none;
}

li
{
	list-style: none;
}

#wrapper
{
	position: relative;
}

/* ***********
@TOP
*************/

#top
{
	background: #304d5e;
	padding: 0 1rem 1rem 0;
	position: relative;
	min-height: 10.5rem;
     display: flex;
     flex-flow: nowrap;
}

	/* ***********
	@MENU < TOP
	*************/

	ul#menu.rotate-90
	{
		position: absolute;
		top: 0;
		left: 0;
          display: flex;
		font-family: 'Idlewild SSm A', 'Idlewild SSm B'; font-weight: 100; font-style: normal;
		font-size: 0.75rem;
          flex: auto;
          margin: 0;
          padding: 0;
		z-index: 100;
		transition: all 0.2x5s ease;
	}
	ul#menu.headroom--pinned
	{
		position: fixed;
	}
	ul#menu.headroom--pinned.headroom--top
	{
		position: absolute;
	}
	ul#menu.headroom--unpinned.headroom--not-top
	{
		opacity: 0;
	}
	ul#menu.headroom--pinned.headroom--not-top
	{
		opacity: 1;
	}

		#menu li
		{
			background: #666;
			flex: auto;
			font-weight: 600;
			letter-spacing: 1px; /* for a bit more clarity since they're rotated */
			text-align: center;
	          width: 5rem;
               border-bottom-left-radius: 0.75rem;
               height: 8rem;
               margin-left: 1rem;
               vertical-align: middle;
		}

			ul#menu.rotate-90 li p
			{
                    line-height: 8rem;
				margin: 0 -1rem 0;
                    text-align: center;
                    transform: rotate(-60deg);
                    vertical-align: middle;
			}

		#menu li.current
		{
			background: #304d5e;
			border-color: #304d5e;
			color: #999;
		}

		#menu li.parent
		{
			margin-top: 3.5rem;
			margin-bottom: -3.5rem;
			border-top-right-radius: 0.75rem;
			border-bottom-left-radius: 0;
		}

		li#menu-now
		{
			background: #555;
		}

		li#menu-works
		{
			background: #999;
		}

		li#menu-news
		{
			background: #444;
		}

		li#menu-contact
		{
			background: #777;
		}

			#menu a:hover li
			{
				background-color: #415e6f;
			}
			#menu a:hover li.current
			{
				z-index: 1;
				background-color: #304d5e;
			}
			#menu a:active li
			{
				background-color: #333;
				color: #fff;
			}


	/* ***********
	@TOP-INNER < TOP
	*************/

	#top-inner
	{
          flex: auto;
          font-weight: 100;
          text-align: right;
          transition: all 0.25s;
	}

		/* ***********
		@H2, H2 < TOP-INNER
		*************/

		#top h1
		{
			color: #000;
			font-family: 'Idlewild SSm A', 'Idlewild SSm B';
			font-size: 9.25rem; /* vw varies too much */
			font-style: normal;
			font-weight: 100;
			letter-spacing: -0.3em;
			line-height: 70%;
			margin: 0;
			transition: all 0.25s;
		}

		#top h2
		{
			color: yellow;
			font-family: 'Idlewild SSm A', 'Idlewild SSm B';
			font-size: 2.5rem; /* vw varies too much */
			font-style: normal;
			font-weight: 500;
			letter-spacing: -0.25rem;
               line-height: 100%;
			margin: -0.67em 0 0 0;
			text-align: right;
			transition: all 0.25s;
		}

		.subtitle
		{
			clear: right;
			text-align: right;
		}

			.subtitle p
			{
				font-size: 1rem;
			}


		/************
		@ACCOLADE < TOP-INNER
		*************/

		#accolade
		{
			display: inline-block;
			margin: 1rem 0 1rem;
			max-width: 30rem;
		}

			#accolade p
			{
				margin: 0;
			}
			/* Using ::before and ::after to insert quotes messes up balanceText(), so it's in the content */
			#accolade #accolade-text p
			{
				color: #ccc;
			}
			#accolade p#accolade-source
			{
				color: #aaa;
				font-family: 'Idlewild SSm A', 'Idlewild SSm B';
				font-weight: 100;
				font-style: normal;
				font-size: 0.75rem;
			}


		/* ***********
		@HAPPENING < TOP-INNER
		*************/

		#happening-holder
		{
			font-weight: 100;
			text-align: left;
		}

			.now #happening .date
			{
				font-family: 'Idlewild SSm A', 'Idlewild SSm B';
				font-size: 0.5rem;
				font-style: normal;
				font-weight: 900;
				line-height: 150%;
			}


		/************
		@FILTERS < TOP-INNER
		*************/

		#filters
		{
			font-family: 'Idlewild SSm A', 'Idlewild SSm B';
			font-weight: 600;
			font-size: 1rem;
			font-style: normal;
			margin-top: 1rem;
			text-align: right;
			z-index: 20;
		}

			#filters p
			{
				color: #000;
				float: right;
				font-weight: 600;
				margin-top: 0;
				margin-left: 2rem;
			}

			select,
			textarea,
			input
			{
				background: #666;
				color: #eee;
				font-family: 'Vitesse SSm A', 'Vitesse SSm B';
				font-size: 1rem;
				font-style: normal;
				font-weight: 300;
			}

				option
				{
					padding: 0.125rem;
				}

/* ***********
@MIDDLE
*************/

#middle
{
	background: #222;
}

#middle-inner
{
	text-align: center;
}

	#listing
	{
		text-align: center;
	}


	/* ***********
	@DISPLAY-HOLDER @ MIDDLE
	*************/

	#display-holder
	{
		background: #222;
	}
	#middle.now #display-holder
	{
		background: none;
	}

		#middle img#display
		{
			cursor: nesw-resize;
			display: block;
			margin: 0 auto;
			max-height: 100vh;
			max-width: 100vw;
			transition: all 0.1s ease;
		}
		#middle img#display.full-width
		{
			cursor: ns-resize;
		}
		#middle img#display.full-width.horizontal
		{
			max-height: none;
		}
		#middle img#display.full-width.vertical
		{
			max-height: 100vw; /* TODO But what if the screen is vertical?!? We're not handling that */
		}
		#middle img#display.full-width.screen-width.vertical
		{
			max-height: none !important; /* TODO But what if the screen is vertical?!? We're not handling that */
		}
		#middle img#display.screen-width.full-width
		{
			width: 100vw;
		}

	/*********
	@ITEM @ @MIDDLE
	*********/

	.item
	{
	}

		.item p
		{
			color: #999;
			font-family: 'Vitesse SSm A', 'Vitesse SSm B'; font-weight: 100; font-style: normal;
			letter-spacing: 0.5px;
			margin: 0 0.5rem;

		}
		.item p.title,
		.item h3
		{
			color: #999;
			font-family: 'Idlewild SSm A', 'Idlewild SSm B'; font-weight: 100; font-style: normal;
			font-size: 1rem;
			letter-spacing: -0.125rem;
			line-height: 1.2rem;
			margin: 0 0.5rem;
		}
		.item p.technique,
		.item p.dimensions
		{
			font-size: 0.75rem;
		}
		.item p.technique
		{
			margin-top: 0.25rem;
		}
		.item p.dimensions
		{
			margin-bottom: 0.25rem;
		}
		.item p.date
		{
			font-family: 'Idlewild SSm A', 'Idlewild SSm B'; font-weight: 900; font-style: normal;
			font-size: 0.5rem;
			line-height: 1.2rem;
		}

	/*********
	@WORKS < @MIDDLE
	*********/

	ul#works
	{
		margin: 10rem 0 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

		ul#works li
		{
			flex: auto;
			font-size: 0.75rem;
			height: 17.5rem;
			margin-bottom: 6rem;
			padding: 0;
			position: relative;
			min-width: 18rem;
		}

			.filtered-by-year,
			.filtered-by-technique,
			.filtered-by-tag
			{
				display: none;
			}

			ul#works li .grey-rectangle
			{
				background: #aaa;
				height: 9rem;
				position: relative;
			}

				/* Yes, all this craziness is needed because we are positioning absolutely to the bottom */

				#works li .image-holder
				{
					bottom: 0;
					display: block;
					left: 50%;
					margin: auto 0 !important;
					position: absolute;
				}

					#works li img
					{
						display: block;
						left: -50%;
						position: relative;
						transition: all 0.1s ease;
						z-index: 10;
					}

				/* / End craziness */


	/* ***********
	@TABS
	*************/

	#tabs
	{
		text-align: center;
	}

	.tab
	{
		background: #222;
		margin-bottom: 0.5rem;
		padding: 0.5rem;
	}

	#about-tab
	{
		border-bottom-right-radius: 1.75rem;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
		text-align: center;
		min-width: 12rem;
		max-width: 20rem;
		display: inline-block;
	}

	#history-tab
	{
		border-bottom-right-radius: 0.67rem;
		float: left;
		text-align: left;
		width: 26rem;
	}

		#history-tab ul
		{

			padding-left: 0;
		}

			#history-tab ul p
			{
				float: left;
				font-size: 0.75rem;
				margin: 0;
				max-width: 15rem;
				text-align: left;
			}
			#history-tab ul p.date
			{
				font-family: 'Idlewild SSm A', 'Idlewild SSm B'; font-weight: 900; font-style: normal;
				font-size: 0.5rem;
				line-height: 1rem;
				padding-right: 1rem;
				text-align: right;
				width: 9rem;
			}


/* ************
@SHOWS
************* */

#shows
{
	padding-left: 0;
	display: inline-block;
}

	#shows li
	{
		font-weight: 100;
		text-align: left;
	}
	#shows li.upcoming
	{
		color: #fff;
	}

		#shows p,
		#contact-coordinates p,
		#contact input[type=text],
		#contact textarea
		{
			float: left;
			font-size: 0.75rem;
			font-weight: 100;
			margin: 0 0 0.5rem;
			width: 16rem;
		}
		#shows p.date,
		#contact h3,
		#contact label
		{
			clear: left;
			float: left;
			font-family: 'Idlewild SSm A', 'Idlewild SSm B'; font-weight: 900; font-style: normal;
			font-size: 0.5rem;
			line-height: 1rem;
			margin-top: 0;
			padding-right: 1.25rem;
			text-align: right;
			width: 10rem;
		}

			p .show-title
			{
				font-family: 'Idlewild SSm A', 'Idlewild SSm B';
				font-weight: 100;
			}


/* ***********
@CONTACT
*************/

#credit
{
	background: #304d5e;
	font-family: 'Idlewild SSm A', 'Idlewild SSm B';
	font-size: 0.8rem;
	font-style: normal;
	font-weight: 100;
	padding-top: 1rem;
	transform: scale(0.7);
}

	#credit-inner
	{
		margin: 0 auto;
		position: relative;
		width: 14.5rem;
	}

		#credit-inner p
		{
			display: block;
			float: right;
			margin: 0;
			text-align: left;
		}

			#engaging-logo
			{
				margin-left: -0.125rem;
				width: 10rem;
			}

			#engaging-dog
			{
				height: 4rem;
			}

			#engaging-screen
			{
				height: 2.25rem;
				margin-left: -0.5rem;
				margin-right: -1px;
			}

/* ***********
@FOOTER
*************/

#footer
{
	background: #304d5e;
	padding: 0;
}