/********************************* base stuff */
.content-slider.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;
	position: relative;
}

.content-slider.flexslider .slides img {
	display: block; /*removes some bottom spacing that browsers add */
}

/********************************* general slider stuff */

.content-slider.flexslider {
	zoom: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	clear: both;
	overflow: hidden;
	z-index: 2;
}

.content-slider.flexslider .slides {
	zoom: 1;
}

.content-slider-wrapper {
	position: relative;
	clear: both;
	margin: -40px 0 3% 0;
	padding: 2% 65px 0 65px;
}

.content-slider.flexslider .flex-vid {
	margin: 0 0 10px 0;
}

/********************************* captions (see the html mark up to understand) */

.content-slider.flexslider .caption {
	float: right;
	width: 40%;
	margin-left: 3%;
}

.content-slider.flexslider .img,
.content-slider.flexslider .flex-vid {
	float: left;
	width: 57%;
	padding-top: 1%;
}

.content-slider.flexslider .img.full { /* image only slide */
	float: none;
	width: 80%;
	margin: 0 auto;
	padding-top: 1%;
}

.content-slider.flexslider .flex-vid.full { /* video only slide */
	float: none;
	width: 80%;
	margin: 0 auto;
	padding-top: 1%;
}

.content-slider.flexslider .img img { /* don't let the image get to big, only the max width of it's actual pix */
	max-width: 100%;
}


.content-slider.flexslider .caption h2 {
	font-size: 200%;
	line-height: 1.2;
	margin-bottom: 3%;
	color: #ff6600;
}

.content-slider .more {
	padding-top: 10px;
	text-align: right;
}

/********************************* direction nav (arrows) */

.content-slider.flexslider .flex-direction-nav {
	*height: 0;
}

.content-slider.flexslider .flex-direction-nav .flex-disabled {
	display: none!important;
	cursor: default;
}

.content-slider.flexslider .flex-direction-nav a.flex-next,
.content-slider.flexslider .flex-direction-nav a.flex-prev {
	cursor: pointer;
	position: absolute;
	z-index: 200;
	right: 8px;
	text-indent: -9999px;
	display: block;
	top: 50%;
	margin-top: -40px;
	width: 40px;
	height: 80px;
	background: url(../images/sliderarrows.png) 0 50% no-repeat;
}

.content-slider.flexslider .flex-direction-nav a.flex-prev {
	left: 8px;
	right: auto;
	background-position: -40px 50%;
}

.content-slider.flexslider .flex-prev:hover,
.content-slider.flexslider .flex-next:hover {
	opacity: .5;
}

/********************************* control navigation (those dots or squares that you click) */

.content-slider.flexslider .flex-control-nav {
	width: 100%;
	position: relative;
	top: 0;
	text-align: right;
	padding: 10px 0 0 0;
}

.content-slider.flexslider .flex-control-nav li {
	margin: 0 0 0 5px;
	display: inline-block;
	zoom: 1;
	*display: inline;
}

.content-slider.flexslider .flex-control-paging li a {
	width: 8px;
	height: 8px;
	display: block;
	background: #777;
	cursor: pointer;
	text-indent: 9999px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.content-slider.flexslider .flex-control-paging li a:hover {
	background: #fff;
}

.content-slider.flexslider .flex-control-paging li a.flex-active {
	background: #fff;
	cursor: default;
}

/********************************* image credit used for demo you might find it handy if you create this field in your CMS */
.content-slider.flexslider .img span,
.content-slider.flexslider .flex-vid span {
	font-size: 11px;
	margin-top: 5px;
	position: relative;
	padding: 10px 0;
	overflow: visibile;
	display: block;
	clear: both;
}

.content-slider.flexslider span.credit a {
	text-decoration: none;
}

.content-slider.flexslider span.credit .tooltip {
	left: 10px!important;
}



/********************************* dark styles before light */

.content-slider-wrapper.dark .caption p, .content-slider.flexslider.dark .caption p a {
	color: #fff;
}

.content-slider-wrapper.dark span.credit a, .content-slider-wrapper.dark span.credit {
	color: #ddd;
}

.content-slider-wrapper.dark {
	background: #000 url(../images/dottedbg-dark.png);
}


/********************************* light styles */
.content-slider-wrapper.light .caption p, .content-slider.flexslider.light .caption p a {
	color: #333;
}

.content-slider-wrapper.light .caption h2 {
	color: #ff6600;
}

.content-slider-wrapper.light span.credit a {
	color: #444;
}

.content-slider-wrapper.light {
	background: url(../images/dottedbg.png);
}

.content-slider-wrapper.light .flex-direction-nav a.flex-next,
.content-slider-wrapper.light .flex-direction-nav a.flex-prev {
	background: url(../images/sliderarrows.png) -140px 50% no-repeat;
}

.content-slider-wrapper.light .flex-direction-nav a.flex-prev {
	background-position: -180px 50%;
}

.content-slider-wrapper.light .flex-control-paging li a {
	background: #ccc;
}

.content-slider-wrapper.light .flex-control-paging li a:hover {
	background: #000;
}

.content-slider-wrapper.light .flex-control-paging li a.flex-active {
	background: #000;
}


/********************************* media queries

Un-float center it and relative position, dial down the font sizes, 
change the arrows to smaller with the sprite so that all devices get the captions, images, etc.,

 */



@media only screen and (min-width: 600px) and (max-width:800px) {

	.content-slider.flexslider .caption h2 {
		font-size: 180%;
		line-height: 1.2;
	}
	
	.content-slider.flexslider p {
		font-size: 100%;
		line-height: 1.5;
		text-align: left;
	}
}

/* end */




@media only screen and (max-width: 850px) {
	.content-slider-wrapper {
		margin: 10px 0 2% 0;
		padding: 1% 35px;
	}
	
	.content-slider.flexslider .caption {
		float: none;
		clear: both;
		width: 100%;
		padding-bottom: 10px;
		margin: 0;
	}
	
	.content-slider.flexslider .img,
	.content-slider.flexslider .flex-vid {
		float: none;
		width: 100%;
		max-width 100%;
	}
	
	.content-slider.flexslider .flex-vid.full { /* video only slide */
		width: 100%;
	}

	.content-slider.flexslider .img img {
		width: auto;
		max-width 100%;
		margin: 0 auto;
	}
	
	.content-slider.flexslider .caption h2 {
		text-align: center;
		font-size: 140%;
		line-height: 1.2;
	}
	
	.content-slider.flexslider p {
		font-size: 100%;
		line-height: 1.5;
		text-align: center;
	}
	
	.content-slider.flexslider .more {
		padding-top: 0;
		text-align: center;
	}
	
	.content-slider.flexslider .flex-control-nav {
		top: auto;
		text-align: left;
		margin-left: -5px;
	}
	
	.content-slider.flexslider .img span,
	    .content-slider.flexslider .flex-vid span {
		padding: 5px 0;
		text-align: center;
	}
	
	.content-slider.flexslider .flex-direction-nav a.flex-next {
		background-position: -80px 50%;
		width: 30px;
		height: 50px;
		right: 0px;
	}
	
	.content-slider.flexslider .flex-direction-nav a.flex-prev {
		background-position: -110px 50%;
		width: 30px;
		left: 0px;
		height: 50px;
	}
	
	.content-slider.flexslider .flex-control-nav {
		text-align: center;
	}
	
	.content-slider.flexslider .flex-control-paging li a {
		width: 10px;
		height: 10px;
	}
	
	.content-slider-wrapper.light .flex-direction-nav a.flex-next,
		.content-slider-wrapper.light .flex-direction-nav a.flex-prev {
		background: url(../images/sliderarrows.png) -220px 50% no-repeat;
	}
	
	.content-slider-wrapper.light .flex-direction-nav a.flex-prev {
		background-position: -250px 50%;
	}
}

/* end */


@media only screen and (max-width: 500px) {
	
	.content-slider.flexslider .caption h2 {
		font-size: 110%;
		line-height: 1.2;
	}
	
	.content-slider.flexslider p {
		font-size: 90%;
		line-height: 1.5;
	}
	
}

/* end */

/* ================================================== 
 RETINA BACKGROUND
================================================== */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 850px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 850px),
only screen and (   -moz-min-device-pixel-ratio: 2)      and (max-width: 850px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 850px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 850px),
only screen and (                min-resolution: 192dpi) and (max-width: 850px),
only screen and (                min-resolution: 2dppx)  and (max-width: 850px) { 
	
	.content-slider.flexslider .flex-direction-nav a.flex-next,
	.content-slider.flexslider .flex-direction-nav a.flex-prev {
		background-image: url(../images/retina/sliderarrows_@2x.png);
		-moz-background-size: 360px 100px;
		-ie-background-size: 360px 100px;
		-o-background-size: 360px 100px;
		-webkit-background-size: 360px 100px;
		background-size: 360px 100px;
	}
}

/* end desktop and main retina swapping */