/*	Home
============================================================================= */

/*	Featured
-------------------------------------------------------------- */

.featured
{
	max-height: 47.0em;
	background-color: #eee;
}

.featured-slider
{
}

.featured .image
{
	width: 100%; 
}

.featured .slide-wrap
{
	position: relative;
}
.featured .slide-wrap .image
{
	max-height: 47.0em;
}
.featured .flex-direction-nav a   
{
	height: 47.0em;
}

.featured .title-band
{
	position: absolute;
	bottom: 0;
	min-height: 13.0em;
	line-height: 13.0em;
	width: 100%;
	background-repeat: repeat;
	z-index: 5000;
}
.featured .title-band.gray
{
	background-image: url(images/event-hatch-back.png);
}
.featured .title-band.light-gray
{
	background-image: url(images/event-hatch-back-lt.png);
}
.featured .title-band.white
{
	background-image: url(images/event-hatch-back-wh.png);
}

.featured .title-box
{
	display: inline-block;
	padding: 1.0em 1.8em 1.0em 1.8em;
	vertical-align: middle;
}
.featured .title-box h3
{
	font-size: 6.4em;
	line-height: 100%;
	font-weight: normal;
	color: #fff;
	margin-top: -0.15625em;
	margin-left: -0.078125em;	/* -5px */
	margin-bottom: 0.15625em;
}
.featured .title-box h4
{
	color: #fff;
	font-family: arial black, arial, sans-serif;
	font-weight: 900;
	font-size: 1.2em;
	line-height: 120%;
}

/*	Classes
-------------------------------------------------------------- */

.home-classes-band 
{
	margin-bottom: 1.9rem;
}

.home-classes
{
	width: 100%;
	overflow: hidden;
	text-align: center;
}
.home-classes ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}
.home-classes li
{
	display: inline-block;
}
.home-classes a
{
	display: inline-block;
	line-height: 6.0rem;
	margin: 0 1.0rem 2.0rem 1.0rem;
	padding: 0;
	width: 27.5rem;
	height: 6.0rem;
	color: #fff;
	background-color: #ed2975;
	border: 0;
	text-align: center;
	text-transform: uppercase;
	font-family: arial black, arial, sans-serif;
	font-weight: 900;
	font-size: 1.2em;
	padding: 0;
}

.home-classes a:hover,
.home-classes a:focus
{
	background-color: #d61770;
	color: #fff;
}

.classes
{
	height: 27.5em;
	background-color: #eee;
}

.classes .classes-box
{
	background: #999 url(images/title-hatch-back.png) repeat;
	height: 100%;
	display: table-cell;
	vertical-align: bottom;
}

.classes .classes-box .title-box
{
	padding: 1.4em 0.8em 3.4em 1.8em;
}

.classes .classes-box .title-box h3
{
	font-size: 6.4em;
	line-height: 100%;
	font-weight: normal;
	color: #fff;
	margin-top: -0.15625em;
	margin-left: -0.078125em;	/* -5px */
	margin-bottom: 0.15625em;
}
.classes .classes-box .title-box h4
{
	color: #fff;
}

.classes .image
{
	text-align: center;
	position: relative;
	height: 14.3em;
	overflow: hidden;
}
.classes .slide-wrap
{
	position: relative;
	width: 27.6em;
	height: 27.5em;
	border-right: 1px solid #eee;	
}
.classes .title-band
{
	height: 13.2em;
	width: 100%;
	background-color: #ccc;
}
.classes .slide-wrap a:hover .title-band
{
	background-color: #bbb;
}
.classes .title-box
{
	padding: 1.4em 0.8em 1.4em 1.4em;
}
.classes .title-box h3
{
	line-height: 110%;
	max-height: 2.1818181818em;
	overflow: hidden;
	text-overflow: ellipsis;	
}
.classes .title-box span h4,
.classes .title-box span h5
{
	display: inline;
}
.classes .title-box p
{
	font-size: 1.2em;
	line-height: 120%;
	color: #111;
	text-transform: uppercase;
}


/* Content boxes */
.content-boxes
{
	overflow: hidden;
}
.content-boxes .left-col,
.content-boxes .right-col
{
	float: left;
	width: 50%;
}

.content-boxes .left-col
{
	padding-right: 1.0em;
}

.content-boxes .right-col
{
	padding-left: 1.0em;
}


.content-box
{
	margin-bottom: 2.0em;
}

.content-box .title
{
	position: relative;
	overflow: hidden;
	background-color: #ccc;
	width: 100%;
}
.content-box .title .box
{
	float: left;
	background: #999 url(images/title-hatch-back.png) repeat;
	width: 17.2em;
	min-height: 6.4em;
	position: relative;
}
.content-box .title .box.wide
{
	width: 100%;
}
.content-box .title .box.tall
{ 
	height: 12.9em;
}
.content-box .title .box h3
{
	color: #fff;
	font-size: 2.3em;
	line-height: 100%;
	font-weight: normal;
	margin: 0.6086956522em;
	padding: 0;
	position: absolute;
	bottom: 0;
	border: 0;
}
.content-box .title .nav
{
	/* flex col */
	margin-left: 17.2em;
	padding: 1.4em;
	position: absolute;
	bottom: 0;
}

.content-box .cont
{
	background-color: #eee;
	overflow: hidden;
}
.content-box .cont.pad
{
	padding: 1.4em;
}
.content-box .cont h3
{
	padding: 0;
	margin: 0.6086956522em 0.7826086957em;
	line-height: 100%;
}
.content-box .cont p
{
	padding: 0 1.5em 1.1666666667em 1.5em;
	margin: 0;
	font-size: 1.2em;
	line-height: 120%;
}
.content-box .cont p:last-child
{
	padding-bottom: 0;
}
.content-box .cont img
{
	width: 100%;
	height: auto;
}

.content-box .left-box
{
	float: left;
	width: 17.2em;
	position: relative;
}
.content-box .left-box.wide
{
	width: 100%;
}
.content-box .right-box
{
	/* flex col */
	margin-left: 17.2em;
	position: relative;
}

.content-box .cont.columns { border: 0; margin: 0; margin-top: 1.2em; display: block; overflow: hidden; width: 100%; background-color: #fff; }
.content-box .cont.columns .column { float: left; display: block; margin-right: 1.2em; margin-bottom: 1.2em; min-width: 17.2em; width: 17.2em; min-height: 32.2em; background-color: #eee; border: 0; margin-bottom: -9999px; padding-bottom: 9999px;}
.content-box .cont.columns .column:last-child { margin-right: 0; }
.content-box .cont.columns .column .spacer { padding-bottom: 2.0em; }
.content-box .cont.columns .column .bot-box { margin-bottom: 2.0em; }

.content-box a.cont,
.content-box .cont.columns a.column { display: block; color: #111; }
.content-box a.cont:hover,
.content-box .cont.columns a.column:hover { color: #111; background-color: #ddd; }


/*	Events Calendar
-------------------------------------------------------------- */
.calendar .list-bands { margin-top: 1.0em; }
.calendar .list-band { margin-bottom: 1.0em; }
.calendar .title .box { width: 13.2em; }
.calendar .grid .col1 {	width: 5.6em; min-width: 5.6em; text-align: right; padding: 1.5em 1.3em; }
.calendar .grid .col2 {	width: 7.6em; min-width: 7.6em; padding: 1.5em 1.0em; border-right: 0; }
.calendar .grid .col3 {	padding: 1.2em 1.5em 1.5em 1.5em; }
.calendar .mo { font-size: 1.2em; text-transform: uppercase; padding: 0; margin: 0; vertical-align: top; }
.calendar .day { font-size: 5.0em; line-height: 80%; text-align: right;  padding: 0; margin: 0; vertical-align: top; }


/*	FlexSlider
-------------------------------------------------------------- */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles */
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides img.real-lazy { width: 1px; height: 1px; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme */
.flexslider { margin: 0; position: relative; zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 0px; }

/* Direction Nav */
.flex-direction-nav 
{
	*height: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
.flex-direction-nav a   
{
	text-decoration:none; 
	display: block; 
	position: absolute; 
	bottom: 0;
	overflow: hidden; 
	cursor: pointer;
	width: 5.0em;
	height: 27.5em;
	padding: 1.5em;
	opacity: 1;
}
.flex-direction-nav a:hover { }
.flex-direction-nav .flex-prev { left: -5.0em;}
.flex-direction-nav .flex-next { right: -5.0em;}
.flexslider:hover .flex-prev:hover:after,
.flexslider:hover .flex-next:hover:after { background-position: 0 -4.9em; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { }
.flex-direction-nav .flex-disabled { }
.flex-direction-nav a:after
{
	content: '';
	display: block;
	position: absolute;
	bottom: 4.1em;
	width: 2.5em;
	height: 4.9em;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 2.5em 14.7em;
}
.flex-direction-nav .flex-prev:after { right: 1.5em; background-image: url(images/left-arrow-big.png?v=1); }
.flex-direction-nav .flex-next:after { left: 1.5em; background-image: url(images/right-arrow-big.png?v=1); }
.flex-direction-nav .flex-prev.flex-disabled:after, 
.flex-direction-nav .flex-next.flex-disabled:after 
{ 
	background-position: 0 -9.8em; 
}
.flexslider:hover .flex-prev.flex-disabled:hover:after,
.flexslider:hover .flex-next.flex-disabled:hover:after { background-position: 0 -9.8em; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {}
.flex-control-thumbs .flex-active {cursor: default;}

/* max width + arrow width * 2 */
@media screen and (max-width: 1213px) 
{
  .flex-direction-nav a { opacity: 0.9; background-color: #eee; }
  .flex-direction-nav .flex-prev { left: 0em;}
  .flex-direction-nav .flex-next { right: 0em;}
}

.page-band ul.flex-direction-nav { display: none; }			/* hide direction arrows until hover */
.page-band:hover ul.flex-direction-nav { display: block; }	/* show direction arrows on hover */

.gallery ul.flex-direction-nav { display: none; }			/* hide direction arrows until hover */
.gallery:hover ul.flex-direction-nav { display: block; }	/* show direction arrows on hover */

@media screen and (max-width: 660px) 
{
	/* Always hide arrows on small touch devices */
	.touch .page-band ul.flex-direction-nav,
	.touch .page-band:hover ul.flex-direction-nav,
	.touch .gallery ul.flex-direction-nav,
	.touch .gallery:hover ul.flex-direction-nav { display: none; }
}


/*	Responsive
-------------------------------------------------------------- */

@media screen and (max-width: 660px)
{
	/*	Drop title band below the image, and cover the whole bottom area with dark gray hatch.
		Have to do this at the slide level, because longer text makes title band taller,
		so there's a gap at the bottom of slides with shorter text. */		
	.featured { max-height: 100%; }
	.featured .flexslider .slides
	{
		background-color: #999;
		background-image: url(images/title-hatch-back.png);
	}
	.featured .title-band
	{
		position: relative;
		background-color: transparent;
		padding-top: 2.0em;
		padding-bottom: 2.0em;
		min-height: 7.0em;
		line-height: 7.0em;
	}
	.featured .title-box
	{
		vertical-align: top;
	}
	.featured .title-box h3
	{
		font-size: 3.6em;
		margin-top: -0.2777777778em;
		margin-left: -0.1388888889em;
		margin-bottom: 0.2777777778em;
	}
	.featured .title-band,
	.featured .title-band.gray,
	.featured .title-band.white
	{
		background-image: none;
	}		
	
	.classes .classes-box .title-box h3
	{
		font-size: 3.6em;
		margin-top: -0.2777777778em;
		margin-left: -0.1388888889em;
		margin-bottom: 0.2777777778em;
	}	

	.home-classes
	{
		padding: 0 1.8rem 0 1.8rem;
	}	

	.home-classes li, 
	.home-classes a 
	{
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}	
}

@media screen and (max-width: 880px)
{
	.content-boxes .left-col,
	.content-boxes .right-col
	{
		display: block;
		width: 100%;
		min-width: 100%;
		padding-left: 0;
		padding-right: 0;
		border: 0;
	}
}