@charset "UTF-8";
/* Touch-carousel styles */
.main-content .touch-carousel { 
	display:block;
	width: 100%;
	position: relative;
	}

.main-content .touch-carousel ul { 
	display: block;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
	width: 100%;
	height: auto;
	margin: 0; 
	-webkit-overflow-scrolling: touch; 	/* add momentum scrolling for mobile Safari */
	}
	
	/* Hide overflow for non touch devices 	*/
	.no-touch .main-content .touch-carousel { overflow-x:hidden;  }
	
.no-touch .main-content .touch-carousel .handle {
	display: inline-block;
	position: absolute;
	top: 0;
	height: 100%; 
	z-index: 10;		
	width: 3rem;
	color: white;
	background-color: white;
	opacity: 0;
	text-align: center;
	transition: all 0.3s ease-in;	
	}
	.no-touch .main-content .touch-carousel:hover .handle { opacity: 0.8; }
	.no-touch .main-content .touch-carousel:hover .handle.disabled { opacity: 0.3; }	

	.no-touch .main-content .touch-carousel .handle.handle-back { left: 0; background: white url(http://www.directvplay.com/images/arrow-left.png) center center no-repeat; border-right: 1px solid white; }
	.no-touch .main-content .touch-carousel .handle.handle-forward { right: 0;  background: white url(http://www.directvplay.com/images/arrow-right.png) center center no-repeat; border-left: 1px solid white; }
			
	.no-touch .main-content .touch-carousel .handle:hover { background-color: #fff; opacity: 0.95; cursor: pointer; }
	.no-touch .main-content .touch-carousel .handle.handle-back:hover { border-right: 1px solid #e5f5ff; }
	.no-touch .main-content .touch-carousel .handle.handle-forward:hover { border-left: 1px solid #e5f5ff; }
 
	.no-touch .main-content .touch-carousel .handle.disabled:hover { background-color: white; opacity: 0.3; cursor: default; }

.main-content .touch-carousel li {
	display: inline-block;
	padding: 0.5rem;
	margin: 0;
	width: auto;
	height: 100%;
	margin:0;
	text-align: center;
	vertical-align: bottom;
	overflow: hidden;
	}
	.main-content .touch-carousel.fit-width li {
		width: 33%;
		}
		.main-content .touch-carousel.fit-width li figure img{
			max-height: none;
			}

	
	.main-content .touch-carousel li:first-child { padding-left: 3px; }
	.main-content .touch-carousel li:last-child { padding-right: 3px; }
	.main-content .touch-carousel.fit-width li { padding: 0.5rem; }

.main-content .touch-carousel li figure {
	position: relative;
	vertical-align:bottom;
	}

.main-content .touch-carousel li img {
	display: block;
	margin: 0 auto 0.25em auto;
	max-height: 12em;
	max-width: 12em;
	border: 3px solid white;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	transition: border 0.3s ease-in;
	}
	.no-touch .main-content .touch-carousel li:hover img { cursor: pointer; }
	.main-content .touch-carousel.fit-width li img { max-width: 100%; }

	.main-content .touch-carousel li a:focus { outline: none; } 
	.main-content .touch-carousel li a:focus img { box-shadow: 0 0 8px rgba(0,150,200,0.8); }

.main-content .touch-carousel li figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0.5em;
	padding-top: calc(6em - 40%);
	background-color: rgba(255,255,255,0.85);
	color: #333;
	line-height: 1.2;
	left:120%;
	transition: all 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06);
	}
	.no-touch .main-content .touch-carousel li figure:hover figcaption { opacity: 1; transform: translateX(-120%); transition: all 0.2s 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
	.touch .main-content .touch-carousel li figcaption { display:none; }
	.main-content .touch-carousel li figcaption * { display: block; }
	.main-content .touch-carousel li figcaption b { margin-bottom: 1em;	text-shadow: 0 0 10px white; }
	.main-content .touch-carousel li figcaption .button { 
		font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
		padding: .5em .75em .625em .75em;
		background: #0073ae;
		}
		.main-content .touch-carousel li figcaption .button:hover { background: #0073ae; }

.main-content .touch-carousel li .title {
	display: block;
	margin: 0 auto;
	height:  2.25em;
	max-width: 8em;
	overflow: hidden;
	font-size: .75em;
	line-height: 1.2;
	white-space: normal;
	color: #555;
	}


@media screen and (min-width: 36.313em) { 
	.main-content .touch-carousel.fit-width li { width: 24.75%; }	
	}

@media screen and (min-width: 56.313em) { 
	.main-content .touch-carousel.fit-width li { width: 19.75%; }	
	}