/* CSS Document */

.desktop
{
	display: none !important;
}

.mobile
{
	display: block !important;
}

#header
{
	position: sticky; position: -webkit-sticky; top: 0; display: table; width: 100%; background-color: #1a1914; font-family: 'Oswald'; font-size: 14px; z-index: 100000000;
	
	height: 42px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

@media screen and (min-width: 900px)
{
	#header
	{
		font-size: 16px;
	}
}


#header > div 
{
	display: table-row;
}

#header > div > div:nth-of-type(1)
{
	display: table-cell; width: 45%; min-width: 50px; vertical-align: middle; padding-left: 10px; padding-top: 4px;
}

#header > div > div:nth-of-type(1) > a
{
	color: white;
	text-decoration: none;
}

#header > div > div:nth-of-type(2)
{
	position: relative; display: table-cell; width: 10%; vertical-align: middle;
	
	height: 32px;
}

#header > div > div:nth-of-type(2) > div
{
	position: absolute;
	width: 200px;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -100px;
	background-image: url('/images/logo-seal.png');
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-position: center;
}




#header > div > div:nth-of-type(2) > div > a
{
	position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0;
}

#header > div > div:nth-of-type(3)
{
	display: table-cell; width: 45%; color: white; text-align: right; vertical-align: middle; padding-right: 10px;
}

#header.docked
{
	height: 56px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#header.docked > div > div:nth-of-type(2)
{
	height: 56px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#header.docked > div > div:nth-of-type(2) > div
{
	background-image: url('/images/jr-logo-header.png');
	margin-left: -93px; /*Account for X*/
	background-size: contain;
}

@media screen and (min-width: 500px)
{
	#header > div > div:nth-of-type(2) > div
	{
		width: 170px;
		margin-left: -85px;
	}
	#header.docked > div > div:nth-of-type(2) > div
	{
		margin-left: -80px; /*Account for X*/
	}
}

@media screen and (min-width: 900px)
{
	#header > div > div:nth-of-type(2) > div
	{
		width: 200px;
		margin-left: -100px;
	}
	#header.docked > div > div:nth-of-type(2) > div
	{
		margin-left: -93px; /*Account for X*/
	}
}





#header > div > div:nth-of-type(3) > div:first-child
{
	display: none;
	line-height: 36px;
}

#header > div > div:nth-of-type(3) > div:first-child a
{
	color: white;
	text-decoration: none;
	letter-spacing: .75px;
	font-weight: 300;
}

#header > div > div:nth-of-type(3) > div:first-child a:last-child
{
	color: #9f6414;
}

@media screen and (min-width: 800px)
{
	body
	{
		min-width: 800px; 
	}

	.desktop
	{
		display: block !important;
	}

	.mobile
	{
		display: none !important;
	}

	#header > div > div:nth-of-type(3)
	{
		min-width: 280px;
	}
	
	#header > div > div:nth-of-type(1) > a
	{
		display: none;
	}
	
	#header > div > div:nth-of-type(3) > div:first-child
	{
		display: inline-block;
	}
}	

#menu
{
	position: fixed; width: 200px; top: 0; left: 0; right: 0; bottom: 0; background-color: #1a1914; color: white; box-sizing: border-box; padding: 10px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	z-index: 10000000001;
}

#menu > div:last-child
{
	position: absolute; top: 6px; right: 6px;
}

#menu.hidden
{
	left: -200px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#menu > div:first-child
{
	z-index: -1;
}

#menu.hidden > div:first-child
{
	display: none;
}

#menu ul, #menu li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

#menu > ul
{
	margin-top: 24px;
}

#menu li
{
	padding: 6px;
}

#menu li a
{
	font-family: 'Oswald'; 
	font-size: 20px;
	color: white;
	text-decoration: none;
}

#menu li:last-child a
{
	color: #9f6414;
}