/**
* Carousel
* ----------------------------------------------
*
*     Date: 2014-01-23
*
*   Author: Hillsong Digital Team
*
*    Notes: A Carousel cycles different types of elements
*
* Includes: 
*    - Default Carousel Styles
*    - Video Carousels
*    - People Carousels
*    - Shop Carousels
*
*/




/*
//====================================================================
//
// MOBILE / SMALL SCREEN (0px - 480px)
//
//====================================================================
*/



.slideshowwrap { position: relative; }

.slideshowwrap .slideshow { margin: 0 auto; }
.slideshowwrap .slideshow .slide { width: 100%; }
.slideshowwrap .slideshow .slide img { max-width: 100%; width: 100%; width: auto/9; height: auto; }

.slideshowControlDotsWrap { padding-top: 5px; height: 30px; }
.slideshowControlDotsWrap .slideshow-dots { color: #464646; font-size: 24px;	text-align: center; }
.slideshowControlDotsWrap .slideshow-dots .cycle-pager-active { opacity: 1; }
.slideshowControlDotsWrap .slideshow-dots span { padding-left: 2px; padding-right: 2px; cursor: pointer; opacity: 0.5; }
.slideshowControlDotsWrap .slideshow-dots span:hover { opacity: 0.75; }


.slideshowPrevButton,
.slideshowNextButton { display: none; position: absolute; top: 0; width: 40px; z-index: 800; height: 100%; cursor: pointer; opacity: 0.5; }
.slideshowPrevButton:hover,
.slideshowNextButton:hover { opacity: 1; }
.slideshowPrevButton { left: 0px; top:-15px; background: url('../images/pagination-previous.png') 50% 50% no-repeat; }
.slideshowNextButton { right: 0px; top:-15px; background: url('../images/pagination-next.png') 50% 50% no-repeat; }


.slideshow-caption { text-align: center; font-weight: 700; margin-top: 12px; display: none; } 

.inalightbox .slideshowwrap .slideshow { width: 100%; }


/*
//-------------------------------
// Carousel Style
//-------------------------------
*/

.cycle-carousel-wrap div { vertical-align: top; }

.carousel-item-photo { max-width: 115px; margin: 0 auto; margin-bottom: 10px }

.carousel-item-photo img {
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.1);
	box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

.carousel-item-title { margin-bottom: 0px; font-weight: 700; }

.carousel-item-text { margin-bottom: 0px; }

/*
//-------------------------------
// Carousel Default
//-------------------------------
*/

.carousel-default {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.carousel-default .slideshowwrap { width: 100%; }

/*
//-------------------------------
// Carousel People
//-------------------------------
*/
.carousel-slider {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.carousel-slider .slideshowwrap { width: 260px; margin: 0 auto;  }

.slideshowwrap .slideshow.carousel-people .slide  { width: 80px; height: 200px; white-space: normal; margin-right: 9px; }

.carousel-people {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.carousel-people .slide { text-align: center; }

.carousel-people .carousel-item-photo { max-width: 70px;  }
.carousel-people .carousel-item-photo img {
	-webkit-box-shadow: 0 0 0px #666;
	-moz-box-shadow: 0 0 0px #666;
	box-shadow: 0 0 0px #666;
}

.carousel-people .carousel-item-title { margin: 0 auto; }

.carousel-people .carousel-item-text { width: 80px; margin: 0 auto; display: none; }

.carousel-people ~ .slideshowControlDotsWrap { display: none; }

.carousel-people ~ .slideshowPrevButton {
	display: block;
	background-size: 13px;
	margin-left: -30px;
	margin-top: -50px;
}

.carousel-people ~ .slideshowNextButton {
	display: block;
	background-size: 13px;
	margin-right: -30px;
	margin-top: -50px;
}

/*
//-------------------------------
// Carousel Shop
//-------------------------------
*/

.slideshowwrap .slideshow.carousel-shop .slide  { width: 115px; height: 200px; white-space: normal; margin-right: 10px; margin-left: 7px; text-align: left; }

.carousel-shop {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.carousel-shop .carousel-item-title { margin: 0 auto; }

.carousel-shop .carousel-item-text { width: 115px; margin: 0 auto; }

.carousel-shop ~ .slideshowControlDotsWrap { display: none; }

.carousel-shop ~ .slideshowPrevButton {
	display: block;
	background-size: 13px;
	margin-left: -30px;
	margin-top: -29px;
}

.carousel-shop ~ .slideshowNextButton {
	display: block;
	background-size: 13px;
	margin-right: -30px;
	margin-top: -29px;
}


/*
//====================================================================
//
// TABLET (Bigger than 767px )
//
//====================================================================
*/
@media only screen and (min-width: 767px) {
	
	.slideshowwrap .slideshow { width: 83%; }
	.slideshowPrevButton,
	.slideshowNextButton { display: block; }
	
	.slideshow-caption { display: block; } 
	
	/*
	//---------------------------------------
	// SLIDESHOWS // Column Rows Slideshow (Tablet)
	//---------------------------------------
	*/
	
	.columnrow .colspan_1_of_4 .slideshowPrevButton,
	.columnrow .colspan_1_of_4 .slideshowNextButton { display: none; }
	.columnrow .colspan_1_of_4 .slideshow { width: 100%; }
	.columnrow .colspan_2_of_4 .slideshow { width: 64.5%; }
	.columnrow .colspan_3_of_4 .slideshow { width: 77.5%; }
	.columnrow .colspan_1_of_3 .slideshowPrevButton,
	.columnrow .colspan_1_of_3 .slideshowNextButton { display: none; }
	.columnrow .colspan_1_of_3 .slideshow { width: 100%; }
	.columnrow .colspan_2_of_3 .slideshow { width: 74%; }
	.columnrow .colspan_1_of_2 .slideshow { width: 64%; }
	.columnrow .colspan_1_of_1 .slideshow { width: 83%; }
	
	/*
	//---------------------------------------
	// COLUMN ROW: Video Slideshow (Tablet)
	//---------------------------------------
	*/
	
	.columnrow .colspan_2_of_4.columnrow-video .slideshow { width: 72.5%; }
	.columnrow .colspan_3_of_4.columnrow-video .slideshow { width: 87.5%; }
	.columnrow .colspan_2_of_3.columnrow-video .slideshow { width: 83.5%; }
	.columnrow .colspan_1_of_2.columnrow-video .slideshow { width: 72%; }
	.columnrow .colspan_1_of_1.columnrow-video .slideshow { width: 93.5%; }
	
	/*
	//-------------------------------
	// Carousel Style
	//-------------------------------
	*/
	
	.carousel-item-photo { max-width: 160px; }
	
	/*
	//-------------------------------
	// Carousel People
	//-------------------------------
	*/
	.carousel-slider .slideshowwrap { width: 100%; }
	
	.slideshowwrap .slideshow.carousel-people .slide  { width: 187px; height: 200px; }
	
	.carousel-people { width: 100%; }
	
	.carousel-people .carousel-item-photo { max-width: 110px; }
	
	.carousel-people .carousel-item-title { width: 150px; }
	
	.carousel-people .carousel-item-text { width: 150px; display: block; }
	
	
	.carousel-people ~ .slideshowPrevButton,
	.carousel-people ~ .slideshowNextButton { display: block; background-size:auto; margin-left: 0px; margin-right: 0px; margin-top: -29px; }
	
	/*
	//-------------------------------
	// Carousel Shop
	//-------------------------------
	*/
	
	.slideshowwrap .slideshow.carousel-shop .slide  { width: 187px; height: 220px; margin-right: 10px; margin-left: 0px }

	.carousel-shop { width: 100%; }
	
	.carousel-shop .carousel-item-title { width: 150px; }
	
	.carousel-shop .carousel-item-text { width: 150px; display: block; }
	
	
	.carousel-shop ~ .slideshowPrevButton,
	.carousel-shop ~ .slideshowNextButton { display: block; background-size:auto; margin-left: 0px; margin-right: 0px; margin-top: -5px; }
	
	


}


/*
//====================================================================
//
// DESKTOP (Bigger than 979px )
//
//====================================================================
*/
@media only screen and (min-width: 979px) {
	
	
	.slideshowwrap .slideshow { width: 85%; }
	
	/*
	//---------------------------------------
	// SLIDESHOWS // Column Rows Slideshow (Default)
	//---------------------------------------
	*/
		
	.columnrow .colspan_2_of_4 .slideshow { width: 68%; }
	.columnrow .colspan_3_of_4 .slideshow { width: 79.5%; }
	.columnrow .colspan_1_of_3 .slideshow { width: 100%; }
	.columnrow .colspan_2_of_3 .slideshow { width: 77%; }
	.columnrow .colspan_1_of_2 .slideshow { width: 68%; }
	.columnrow .colspan_1_of_1 .slideshow { width: 78.5%; }
	.columnrow .colspan_1_of_1 .slideshowwrap { width: 70%; margin: 0 auto; }
	
	
	/*
	//---------------------------------------
	// COLUMN ROW: Video Slideshow (Default)
	//---------------------------------------
	*/
	
	.columnrow .colspan_2_of_4.columnrow-video .slideshow { width: 77%; }
	.columnrow .colspan_3_of_4.columnrow-video .slideshow { width: 89.5%; }
	.columnrow .colspan_2_of_3.columnrow-video .slideshow { width: 86.5%; }
	.columnrow .colspan_1_of_2.columnrow-video .slideshow { width: 77%; }
	.columnrow .colspan_1_of_1.columnrow-video .slideshow { width: 88.5%; }
	
	/*
	//-------------------------------
	// Carousel Style
	//-------------------------------
	*/
	
	.carousel-item-photo { max-width: 190px; }
	
	/*
	//-------------------------------
	// Carousel Shop
	//-------------------------------
	*/
	.carousel-shop .carousel-item-photo { max-width: 160px; }
	.slideshowwrap .slideshow.carousel-shop .slide  {  margin-right: 6px; margin-left: 0px }
	
	.carousel-shop .carousel-item-photo { max-width: 160px; }
	.carousel-shop .carousel-item-title { width: 160px; }
	
	.carousel-shop .carousel-item-text { width: 160px;  }
	
	
	.carousel-shop ~ .slideshowPrevButton,
	.carousel-shop ~ .slideshowNextButton { margin-top: -5px; }

}

/*
//====================================================================
//
// LARGE SCREEN ( Bigger than 1199px )
//
//====================================================================
*/
@media only screen and (min-width:1199px)
{
	/*
	//---------------------------------------
	// SLIDESHOWS // Column Rows Slideshow (Large)
	//---------------------------------------
	*/
	
	.columnrow .colspan_2_of_4 .slideshow { width: 74.5%; }
	.columnrow .colspan_3_of_4 .slideshow { width: 83.8%; }
	.columnrow .colspan_2_of_3 .slideshow { width: 81.5%; }
	.columnrow .colspan_1_of_2 .slideshow { width: 74.5%; }
	.columnrow .colspan_1_of_1 .slideshow { width: 78.5%; }
	.columnrow .colspan_1_of_1 .slideshowwrap { width: 83%; }
	
	/*
	//---------------------------------------
	// COLUMN ROW: Video Slideshow (Large)
	//---------------------------------------
	*/
	
	.columnrow .colspan_2_of_4.columnrow-video .slideshow { width: 88.5%; }
	.columnrow .colspan_3_of_4.columnrow-video .slideshow { width: 94%; }
	.columnrow .colspan_2_of_3.columnrow-video .slideshow { width: 91.5%; }
	.columnrow .colspan_1_of_2.columnrow-video .slideshow { width: 83.5%; }
	.columnrow .colspan_1_of_1.columnrow-video .slideshow { width: 96.5%; }
	
	
	/*
	//-------------------------------
	// Carousel Shop
	//-------------------------------
	*/
	.slideshowwrap .slideshow.carousel-shop .slide  { width: 190px; height: 250px; margin-right: 64px; margin-left: 0px }
	
	.carousel-shop .carousel-item-photo { max-width: 190px; }
	
	.carousel-shop .carousel-item-title { width: 190px; }
	
	.carousel-shop .carousel-item-text { width: 190px;  }
	
	
	.carousel-shop ~ .slideshowPrevButton,
	.carousel-shop ~ .slideshowNextButton { margin-top: -15px; }
	
}