@charset "utf-8";
@import url("fonts/stylesheet.css");
/* CSS Document */
a:link {
	color: #F00;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #F00;
}
a:hover {
	text-decoration: underline;
	color: #FFD222;
}
a:active {
	text-decoration: none;
	color: #F00;
}
.district {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #D5090E;
}
@font-face{  
    font-family: earl;  
    src: url('fonts/mr_earl_bt-webfont.eot'); /* For IE */ 
    src: local('mr_earl_bt-webfont'), url('fonts/mr_earl_bt-webfont.ttf') format('truetype'); /* For non-IE */ 
}  
.clerk {
	font-family: earl;
	font-size: 25px;
	font-weight: normal;
	color: #D5090E;
}
@font-face{  
    font-family: staccato;  
    src: url(fonts/staccato-webfont.eot); /* For IE */ 
    src: local(staccato-webfont), url(fonts/staccato-webfont.ttf) format(truetype); /* For non-IE */ 
}  
.touch {
	font-family: staccato;
	font-size: 35px;
	font-weight: normal;
	color: #FFFFFF;
	padding: 10px;
}
.typo {
	font-family: earl;
	font-size: 25px;
	font-weight: normal;
	color: #000000;
}
#bottom_bar {
	position: fixed;
	bottom: 0px;
	width: 100%;
	background-color: #B00000;
	margin: auto;
	text-align: center;
	height: 70px;
}
#bottom_bar_indx {
	position: relative;
	bottom: 0px;
	width: 100%;
	margin: auto;
	background-color: #B00000;
	text-align: center;
	height: 70px;
}
/*** Rolling Banner: Set the width and height to match your images **/

#slideshow {
    position: relative;
    height: 425px;
}

#slideshow IMG {
    position: absolute;
    top:2;
    left:2;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}
/***Menu**/

.menu{display:block;}
 
.menu li{display: inline-block;
position: relative;
z-index:100;}
 
.menu li a {font-weight:600;
text-decoration:none;
padding:11px;
display:block;
color:#ffffff;
 
-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td{margin:0;
padding:0}
table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul,li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{
	font-weight: lighter;
}q:before,q:after{content:''}strong{font-weight:bold}em{font-style:italic}.italic{font-style:italic}
.aligncenter {
	display:block;
	margin:0 auto;
	}

.alignleft {
	float:left;
	margin:10px;
	}
.alignright {
	float:right;
	margin:10px;
}
.no-margin{
	margin:0px;
}
.no-bottom {
	margin-bottom:0px;
}
.no-padding {
	padding:0px;
}
.margin-t{
	margin-top:22px;
}
div {
	position:relative
}
a {
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
a:active,a:focus{outline:none;
}
img.alignleft,img.alignright,img.aligncenter{
	margin-bottom:11px;
}
.alignleft,img.alignleft{
	display:inline;
	float:left;
	margin-right:22px;
}
.alignright,img.alignright{
	display:inline;
	float:right;
	margin-left:22px;
}.aligncenter,img.aligncenter{
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}article,aside,figure,footer,header,hgroup,nav,section{
	display:block;
}
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html{
	-webkit-font-smoothing:antialiased;
}
a
{color:#f0f0f0;
}
a:hover{
	color:#EEEEEE;
	text-decoration:underline;
}
body {
	background:#fff url("images/wheat-field-table.jpg");
	background-repeat:repeat;
	background-position: center -150px;
	color:#B00000;
	font:14px "Open Sans",Helvetica,Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	line-height:1;
	width:100%;
}
h1 {
	font-family: earl;
	font-size:36px;
	line-height:1.3em;
}
h2 {
	font-family: earl;
	font-size:32px;
	line-height:1.3em;
}
h3 {
	font-family: earl;
	font-size:24px;
	line-height:1.3em;
}
h4 {
	font-family: earl;
	font-size:18px;
	line-height:1.3em;
}
h5 {
	font-family: earl;
	font-size:16px;
}
h6 {
	font-family: earl;
	font-size:14px;
}
p {
	padding-bottom:11px;
}
p,div,span {
	line-height:1.5em;
}
.column-clear {
	clear:both;
}
.clear {
	overflow:hidden;
}
.mainWrap {
	width:1050px;
	margin: auto;
	float: none;
}
.title {
	margin:100px 0 20px 0;
	text-align:center;
	color:#2D2E39;
}
.back {
	text-align:center;
}
nav {
	display:block;
	margin-top:10px;
	background:#B00000;
}
.menu {
	display:block;
}
.menu li {
	display:inline-block;
	position:relative;
	z-index:100;
}
.menu li:first-child {
	margin-left:0;
}
.menu li a {
	font-weight:600;
	text-decoration:none;
	padding:11px;
	display:block;
	color:#ffffff;
	-webkit-transition:all 0.2s ease-in-out 0s;
	-moz-transition:all 0.2s ease-in-out 0s;
	-o-transition:all 0.2s ease-in-out 0s;
	-ms-transition:all 0.2s ease-in-out 0s;
	transition:all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
	color:#ffffff;
	background:#FF0000;
}
/* hide the second level menu */
.menu ul{
	display:none;
	margin:0;
	padding:0;
	width:150px;
	position:absolute;
	top:43px;
	left:0px;
	background:#ffffff;
}
.menu ul li {
	display:block;
	float:none;
	background:none;
	margin:0;
	padding:0;
}
.menu ul li a{
	font-size:12px;
	font-weight:normal;
	display:block;
	color:#797979;
	border-left:3px solid #ffffff;
	background:#ffffff;
}
.menu ul li a:hover,.menu ul li:hover>a{
	background:#FFDFDF;
	border-left:3px solid #FF0000;
	color:#B00000;
}
.menu li:hover>ul{
	display:block;
}
/* change level 3 menu positions */
.menu ul ul{
	left:149px;
	top:0px;
}
.mobile-menu{
	display:none;
	width:100%;
	padding:11px;
	background:#2D2E39;
	color:#ffffff;
	text-transform:uppercase;
	font-weight:600;
}
.mobile-menu:hover{
	background:#2D2E39;
	color:#ffffff;
	text-decoration:none;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap{
	width:768px;
}
.menu ul{
	top:37px;
}
.menu li a{
	font-size:12px;
	padding:8px;
}
}@media (max-width: 767px) {
	.mainWrap{width:auto;padding:50px 20px;
}
.menu{
	display:none;
}.mobile-menu{
	display:block;
	margin-top:100px;
}
nav{
	margin:0;
	background:none;
}
.menu li{
	display:block;
	margin:0;
}.menu li a{
	background:#ffffff;
	color:#797979;
	border-top:1px solid #e0e0e0;
	border-left:3px solid #ffffff;
}
.menu li a:hover,.menu li:hover>a{
	background:#f0f0f0;
	color:#797979;
	border-left:3px solid #9CA3DA;
}
.menu ul{
	display:block;
	position:relative;
	top:0;
	left:0;width:100%;
}
.menu ul ul{
	left:0;
}
}@media (max-width: 480px) {}@media (max-width: 320px) {}

/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
		
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		visibility: hidden;
		top: 5%;
		margin-bottom: 10%;
		left: 50%;
		margin-left: -300px;
		width: 520px;
		background: #FFE084 url(modal-gloss.png) no-repeat -200px -80px;
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	/*
		
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/

/*	--------------------------------------------------
	Shine
	-------------------------------------------------- */

.product
{
    
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 1000ms cubic-bezier(0.005, 1, 1.000, 0); /* older webkit */
    -webkit-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -moz-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -ms-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -o-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600); /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.005, 1, 1.000, 0); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -moz-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -ms-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -o-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600); /* custom */
}

.show-off
{
    width: 500px;
    height: 500px;
    position: absolute;
    top: -180px;
    left: -600px;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
    background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
    background: -o-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
}
.product:hover .show-off
{
    top: 0px;
    left: 0px;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.product:hover
{
    box-shadow: 0px 0px 20px 5px #FFFFFF;
    -webkit-box-shadow: 0px 0px 20px 5px #FFFFFF;
    -moz-box-shadow: 0px 0px 20px 5px #FFFFFF;
    -o-box-shadow: 0px 0px 20px 5px #FFFFFF;
}