/*
 * Styles for carousel on HMC homepage and other high profile site
 *
 * To include these styles, the child theme must call it in functions.php
 * using wp_enqueue_style('carousel-style');
 *
*/

/* Photo Carousel Core Styles*/

#carousel {
	position: relative;
	max-width: 60em;
	margin: 0 auto;
}

html#ie8 #carousel {
	min-width: 960px;
}

#carousel a {
	text-decoration: none;
}

#carousel img {
	width: 100%;
}

#prev,
#next {
	display: block;
	opacity: 0;
	width: 12%;
	height: 100%;
	text-indent: -9999em;
	cursor: pointer;
	transition: 0.5s;
	position: absolute;
	z-index: 500;
	top: 0;
}

html.touch #prev,
html.touch #next {
	opacity: 1;
}
/*
#ie8 #prev,
#ie8 #next {
	top: 35%;
	width: 4em;
	height: 4em;
}
*/
#prev {	
	left: 0;
	background: url('images/leftArrow.png') no-repeat center 40%;
	background-size: 80% auto;
}

#next {	
	right: 0;
	background: url('images/rightArrow.png') no-repeat center 40%;
	background-size: 80% auto;
}

#prev:after,
#next:after {
	content: '';
}

#content #carousel a:after {
	content: none;
}

#carousel:hover #next,
#carousel:hover #prev {
	opacity: 0.9;
	transition: opacity 1s;
}

#carousel > div div.cycle-slide-active {
	opacity: 1!important;
	transition: opacity 0.7s;
}

#carousel figure {
	margin: 0;
	position: relative !important;
	vertical-align: top;
}

#carousel.no-script figure,
#carousel.no-script #prev,
#carousel.no-script #next {
	display: none;
}

#carousel.no-script figure.carousel-item-1 {
	display: block;
}

#carousel figcaption {
	padding: 0.5em 1.5em 0.5em;
	white-space: normal;
	height: 5em;
	background: #A9B30F;
}

#carousel figure.carousel-item-1 figcaption,
#carousel figure.carousel-item-4 figcaption,
#carousel figure.carousel-item-7 figcaption {
	background: rgb(0,193,213);
}

#carousel figure.carousel-item-1 figcaption:hover,
#carousel figure.carousel-item-4 figcaption:hover,
#carousel figure.carousel-item-7 figcaption:hover {
	background: rgb(254,194,0);
}

#carousel figure.carousel-item-2 figcaption,
#carousel figure.carousel-item-5 figcaption,
#carousel figure.carousel-item-8 figcaption {
	background: rgb(254,194,0);
}

#carousel figure.carousel-item-2 figcaption:hover,
#carousel figure.carousel-item-5 figcaption:hover,
#carousel figure.carousel-item-8 figcaption:hover {
	background: rgb(153,169,0);
}

#carousel figure.carousel-item-3 figcaption,
#carousel figure.carousel-item-6 figcaption,
#carousel figure.carousel-item-9 figcaption {
	background: rgb(153,169,0);
}

#carousel figure.carousel-item-3 figcaption:hover,
#carousel figure.carousel-item-6 figcaption:hover,
#carousel figure.carousel-item-9 figcaption:hover {
	background: rgb(0,193,213);
}

#carousel h2 {
	margin: 0;
	font-size: 1.3em;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#carousel p {
	font-size: 1em;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: #000;
	margin: 0 0 0.5em 0;
}

#carousel #carousel-bug {
	position: absolute;
	z-index: 900;
	bottom: 4.5em;
	left: 1em;
	width: 10.75em;
}

/* When the screen is wider */
@media screen and (min-width: 760px)  {
	
#carousel-wrapper { /* Used on everything but HMC Homepage */
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
#carousel {
	margin-bottom: 1.5em;
	margin-bottom: 0;
}

#carousel > div {
	overflow: visible !important;	
	margin: 0 auto;
}

#carousel figcaption {
	position: absolute;
	bottom: 2.1em;
	right: 2em;
	border-radius: 1em;	
	width: 60%;
	height: auto;
	padding: 1.25em 1.5em;
	transition: background 0.25s;
}

#carousel figure.carousel-item-1 figcaption,
#carousel figure.carousel-item-4 figcaption,
#carousel figure.carousel-item-7 figcaption {
	background: rgba(0,193,213,0.9);
}

#carousel figure.carousel-item-1 figcaption:hover,
#carousel figure.carousel-item-4 figcaption:hover,
#carousel figure.carousel-item-7 figcaption:hover {
	background: rgba(254,194,0,0.9);
}

#carousel figure.carousel-item-2 figcaption,
#carousel figure.carousel-item-5 figcaption,
#carousel figure.carousel-item-8 figcaption {
	background: rgba(254,194,0,0.9);
}

#carousel figure.carousel-item-2 figcaption:hover,
#carousel figure.carousel-item-5 figcaption:hover,
#carousel figure.carousel-item-8 figcaption:hover {
	background: rgba(153,169,0,0.9);
}

#carousel figure.carousel-item-3 figcaption,
#carousel figure.carousel-item-6 figcaption,
#carousel figure.carousel-item-9 figcaption {
	background: rgba(153,169,0,0.9);
}

#carousel figure.carousel-item-3 figcaption:hover,
#carousel figure.carousel-item-6 figcaption:hover,
#carousel figure.carousel-item-9 figcaption:hover {
	background: rgba(0,193,213,0.9);
}

#carousel figcaption h2 {
	font-size: 1.8em;
	color: #000;
	white-space: nowrap;
}

#carousel figcaption p {
	font-size: 1.5em;
	color: #000;
	display: block;
	white-space: normal;
	margin: 0;
}

figure.cycle-slide {
	opacity: 0.4 !important;
	transition: opacity 0.5s;
	width: auto;
	height: auto;
}

figure.cycle-slide figcaption {
	opacity: 0;
	transition: opacity 0.5s;
}

figure.cycle-slide-active {
	opacity: 1 !important;
	transition: opacity 0.25s;
}

figure.cycle-slide-active figcaption {
	opacity: 1;
	transition: opacity 0.5s;
}

#prev,
#next {
	opacity: 0;
	width: 8%;
	background-position-y: 50%;
}

html.touch #prev,
html.touch #next {
	opacity: 1;
}

#carousel #carousel-bug {
	bottom: 2em;
	left: 2em;
}

}

/* Screen wider than 880px */
@media screen and (min-width: 880px)  {
	
	#carousel figcaption {
		width: 49%;
	}
	
	#carousel figcaption h2 {
		white-space: normal;
	}
	
}