/** PLU Media Slider CSS **/

/* base styles */
@import url('media-slider_default.css');

/* ----- 'medium' screen size styles ----- */
@media only screen and (min-width: 48em) {

	/** ----------------------------------------
	 *  Carousel Slider
	 ---------------------------------------- */
	
	/* add spacing when the user selects to add spacing in between */
	.plu-media-slider.carousel-spacing .carousel-cell {
		margin-right: 10px;
	}
	
	/* set width classes for carousel galleries */	
	/* 2 slides */
	.plu-media-slider.carousel.one-half .carousel-cell {
		width: 50% !important;
	}
	/* 3 slides */	
	.plu-media-slider.carousel.one-third .carousel-cell {
		width: 33.333% !important;
	}
	/* 4 slides */
	.plu-media-slider.carousel.one-fourth .carousel-cell {
		width: 25% !important;
	}
	/* 5 slides */
	.plu-media-slider.carousel.one-fifth .carousel-cell {
		width: 20% !important;
	}
	
	/* when a 'carousel slider' type is used, we want to always show the text in the middle for videos and not animate it in */
	.plu-media-slider.carousel .media-slider-video .text-wrapper.cover .cover-container {
		position: absolute;
		display: block;
		width: 100%;
		max-width: 65%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		opacity: 1;
	}
	
	/* when 4 & 5 columns are selected for a carousel slider, the text would end up being too small so we hide it */
	.plu-media-slider.carousel.one-fourth .media-slider-video .text-wrapper,
	.plu-media-slider.carousel.one-fifth .media-slider-video .text-wrapper {
		display: none;
	}
	
	/* resize title and sub-title text for videos for each carousel size */
	/* 2 slides */
	.plu-media-slider.carousel.one-half .media-slider-video .cover-container h4 {
		font-size: 16px;
	}	
	.plu-media-slider.carousel.one-half .media-slider-video .cover-container p {
		font-size: 13px;
		line-height: 1.4;
	}
	
	/* 3 slides */
	.plu-media-slider.carousel.one-third .media-slider-video .cover-container h4 {
		font-size: 14px;
	}	
	.plu-media-slider.carousel.one-third .media-slider-video .cover-container p {
		font-size: 11px;
		line-height: 1.4;
	}

	/** ---------------------------
	 *  Image and video text boxes
	 --------------------------- */
	 
	/* reset the vertical middle alignment of slides */
	.plu-media-slider .media-slider-image,
	.plu-media-slider .media-slider-video {
		top: 0;
		transform: translateY(0);
	}
	
	/* -- Default -- */
	.plu-media-slider .media-slider-image .text-wrapper.default {
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.6);
		padding: 1.3em 2em;
		margin-top: 0;
		border-top: none;
	}
	.plu-media-slider .media-slider-image .text-wrapper.default h4 {
		font-size: 23px;
	}
	.plu-media-slider .media-slider-image .text-wrapper.default p {
		font-size: inherit;
	}
	.plu-media-slider .media-slider-image .text-wrapper.default a {
		font-size: 12px;
	}
	
	/* -- Default (Text Alignment) -- */
	.plu-media-slider .media-slider-image .text-wrapper.default.right {
		text-align: right;
	}
	.plu-media-slider .media-slider-image .text-wrapper.default.center {
		text-align: center;
	}
	
	/* -- Cover -- */
	.plu-media-slider .media-slider-image .text-wrapper.cover,
	.plu-media-slider .media-slider-video .text-wrapper.cover {
		background: rgba(0,0,0,0.6);
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		opacity: 1;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	
	/* we created an 'ellipses' class for mobile to do a faux truncate, so we need to reset it here for video slides */
	.plu-media-slider .media-slider-video .text-wrapper.ellipses p {
		overflow: unset;
		position: initial;
		line-height: initial;
		max-height: none;
		padding-right: unset;
		text-align: unset;
	}
	.plu-media-slider .media-slider-video .text-wrapper.ellipses p:before,
	.plu-media-slider .media-slider-video .text-wrapper.ellipses p:after {
		display: none;
	} 
	
	.plu-media-slider .media-slider-video .text-wrapper.play-pause-only {
		display: block;
	}
	
	/* when clicking the 'play' button, we add a class to hide the 'cover' style */
	.plu-media-slider .media-slider-video .text-wrapper.cover.video-active {
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	.plu-media-slider .media-slider-video .text-wrapper.cover.video-active:hover {
		opacity: 1;
	}
	
	.plu-media-slider .media-slider-video .text-wrapper.cover .cover-container {
		position: absolute;
		display: block;
		width: 100%;
		max-width: 65%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		top: 50%;
		left: 35%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		transform: translateY(-50%);
		-webkit-transition: all .6s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		transition: all .6s ease-in-out;
		opacity: 0;
	}
	
	/* this is for 'flickity' to bring the text cover box into view when slide is active */
	.plu-media-slider .is-selected .media-slider-video .text-wrapper.cover .cover-container {
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		opacity: 1;
	}
	
	.plu-media-slider .media-slider-video .text-wrapper.cover h4 {
		color: #ffffff;
		font-size: 24px;
		margin: 0;
		line-height: 1.1;
	}
	
	.plu-media-slider .media-slider-video .text-wrapper.cover p {
		margin: 0;
		color: #ffffff;
		font-size: 13px;
	}
	
	.plu-media-slider .media-slider-video .text-wrapper.cover a {
		padding: 9px 11px;
		display: inline-block;
		margin-top: 10px;
		font-size: 10px;
	}
	
	/* when click the 'eye' icon we hide the cover box */
	.plu-media-slider .media-slider-image .text-wrapper.cover.hide-cover,
	.plu-media-slider .media-slider-video .text-wrapper.cover.hide-cover {
		opacity: 0;
		top: -100%;
	}
	
	/* when clicking the 'play' button, we add a class to hide the 'cover' style */
	.plu-media-slider .media-slider-video .text-wrapper.cover.video-active {
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	.plu-media-slider .media-slider-video .text-wrapper.cover.video-active:hover {
		opacity: 1;
	}
	
	.plu-media-slider .media-slider-image .text-wrapper.cover .cover-container {
		position: absolute;
		display: block;
		width: 100%;
		max-width: 65%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		top: 50%;
		left: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		transform: translateY(-50%);
		-webkit-transition: all .6s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		transition: all .6s ease-in-out;
		opacity: 0;
	}
	
	.plu-media-slider .is-selected .media-slider-image .text-wrapper.cover .cover-container {
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		opacity: 1;
	}
	
	.plu-media-slider .media-slider-image .text-wrapper.cover h4,
	.plu-media-slider .media-slider-video .text-wrapper.cover h4 {
		font-size: 40px;
	}
	
	.plu-media-slider .media-slider-image .text-wrapper.cover p,
	.plu-media-slider .media-slider-video .text-wrapper.cover p {
		font-size: 15px;
	}
	
	.plu-media-slider .media-slider-image .text-wrapper.cover a,
	.plu-media-slider .media-slider-video .text-wrapper.cover a {
		padding: 12px 14px;
		display: inline-block;
		margin-top: 15px;
		font-size: 13px;
	}
	
	/* -- Homepage styles 'default' -- */
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default {
		position: absolute;
		top: 15%;
		left: 20%;
		bottom: auto;
		background: rgba(0,0,0,0.6);
		padding: 2.2em;
		margin-top: 0;
		border-top: none;
		width: 420px;
		-webkit-transform: translateX(-20%);
		-moz-transform: translateX(-20%);
		transform: translateX(-20%);
		-webkit-transition: all 0.7s ease-in-out;
		-moz-transition: all 0.7s ease-in-out;
		-o-transition: all 0.7s ease-in-out;
		transition: all 0.7s ease-in-out;
		opacity: 0;
		text-align: left;
	}
	.plu-media-slider.homepage-slider .is-selected .media-slider-image .text-wrapper.default {
		top: 15%;
		left: 14%;
		-webkit-transform: translateX(-14%);
		-moz-transform: translateX(-14%);
		transform: translateX(-14%);
		opacity: 1;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default h4 {
		font-size: 25px;
		border-bottom: 1px dotted #ffffff;
		margin-bottom: 7px;
		padding-bottom: 5px;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default p {
		font-size: 14px;
		margin-bottom: 5px;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default a {
		font-size: 11px;
	}
	
	/* homepage 'default' style (Alignment = Right) */
	.plu-media-slider.homepage-slider .is-selected .media-slider-image .text-wrapper.default.right {
		left: unset;
		right: 8%;
		-webkit-transform: translateX(8%);
		-moz-transform: translateX(8%);
		transform: translateX(8%);
	}
	
	/* homepage 'default' style (Alignment = Center) */
	.plu-media-slider.homepage-slider .is-selected .media-slider-image .text-wrapper.default.center {
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	/** -------------------
	 *  Modify flickity css
	 --------------------- */
	
	/* Display 'flickity' arrows and/or bullets only when hovering slider */
	.plu-media-slider:hover .flickity-prev-next-button,
	.plu-media-slider:hover .flickity-page-dots {
		opacity: 1;
	}
	
	/* reset arrows display */
	.plu-media-slider .flickity-prev-next-button {
		display: block;
	}
	
	/* reset bullets display */	
	.plu-media-slider .flickity-page-dots {
		opacity: 0;
	}

}

/* ----- 'semi-large' screen size styles ----- */
@media only screen and (min-width: 64em) {

	/** ----------------------------------------
	 *  Carousel Slider
	 ---------------------------------------- */
	 
	/* when 4 & 5 columns are selected for a carousel slider, we hide it for medium sized screens, so here we re-display it */
	.plu-media-slider.carousel.one-fourth .media-slider-video .text-wrapper:not(.no-text-or-btns),
	.plu-media-slider.carousel.one-fifth .media-slider-video .text-wrapper:not(.no-text-or-btns) {
		display: block;
	}
	 
	/* resize title and sub-title text for videos for each carousel size */
	/* 2 slides */
	.plu-media-slider.carousel.one-half .media-slider-video .cover-container h4 {
		font-size: 19px;
	}	
	.plu-media-slider.carousel.one-half .media-slider-video .cover-container p {
		font-size: 15px;
		line-height: 1.4;
	}
	
	/* 3 slides */
	.plu-media-slider.carousel.one-third .media-slider-video .cover-container h4 {
		font-size: 17px;
	}	
	.plu-media-slider.carousel.one-third .media-slider-video .cover-container p {
		font-size: 14px;
		line-height: 1.4;
	}
	
	/* 4 slides */
	.plu-media-slider.carousel.one-fourth .media-slider-video .cover-container h4 {
		font-size: 15px;
	}	
	.plu-media-slider.carousel.one-fourth .media-slider-video .cover-container p {
		font-size: 12px;
		line-height: 1.3;
	}
	
	/* 5 slides */
	.plu-media-slider.carousel.one-fifth .media-slider-video .cover-container h4 {
		font-size: 15px;
	}	
	.plu-media-slider.carousel.one-fifth .media-slider-video .cover-container p {
		font-size: 11px;
		line-height: 1.3;
	}
	
	/* -- Homepage styles 'default' -- */
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default {
		position: absolute;
		top: 17%;
		left: 20%;
		bottom: auto;
		background: rgba(0,0,0,0.6);
		padding: 2.2em;
		margin-top: 0;
		border-top: none;
		-webkit-transform: translateX(-20%);
		-moz-transform: translateX(-20%);
		transform: translateX(-20%);
		-webkit-transition: all 0.7s ease-in-out;
		-moz-transition: all 0.7s ease-in-out;
		-o-transition: all 0.7s ease-in-out;
		transition: all 0.7s ease-in-out;
		opacity: 0;
	}
	.plu-media-slider.homepage-slider .is-selected .media-slider-image .text-wrapper.default {
		top: 17%;
		left: 14%;
		-webkit-transform: translateX(-14%);
		-moz-transform: translateX(-14%);
		transform: translateX(-14%);
		opacity: 1;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default h4 {
		font-size: 30px;
		border-bottom: 2px dotted #ffffff;
		margin-bottom: 7px;
		padding-bottom: 5px;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default p {
		font-size: 15px;
		margin-bottom: 5px;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default a {
		font-size: 12px;
		padding: 10px 11px;
	}
	
	/* down arrow link */
	.slide-down-arrow-link {
		display: block !important;
	}
}

/* ----- 'large' screen size styles ----- */
@media only screen and (min-width: 71.563em) {

	/** ----------------------------------------
	 *  Carousel Slider
	 ---------------------------------------- */

	/* resize title and sub-title text for videos for each carousel size */
	/* 2 slides */
	.plu-media-slider.carousel.one-half .media-slider-video .cover-container h4 {
		font-size: 24px;
	}	
	.plu-media-slider.carousel.one-half .media-slider-video .cover-container p {
		font-size: 15px;
		line-height: 1.4;
	}
	
	/* 3 slides */
	.plu-media-slider.carousel.one-third .media-slider-video .cover-container h4 {
		font-size: 20px;
	}
	/* 4 slides */
	.plu-media-slider.carousel.one-fourth .media-slider-video .cover-container h4 {
		font-size: 20px;
	}
	/* 5 slides */
	.plu-media-slider.carousel.one-fifth .media-slider-video .cover-container h4 {
		font-size: 18px;
	}

	/** ---------------------------
	 *  Image and video text boxes
	 --------------------------- */
	
	/* -- Default -- */
	.plu-media-slider .media-slider-image .text-wrapper.default a {
		font-size: 13px;
	}
	
	/* -- Cover -- */	
	.plu-media-slider .media-slider-image .text-wrapper.cover h4,
	.plu-media-slider .media-slider-video .text-wrapper.cover h4 {
		font-size: 52px;
	}
	
	.plu-media-slider .media-slider-image .text-wrapper.cover p,
	.plu-media-slider .media-slider-video .text-wrapper.cover p {
		font-size: 18px;
	}
	
	.plu-media-slider .media-slider-image .text-wrapper.cover .cover-container {
		max-width: 960px;
	}
	
	/* -- Homepage styles 'default' -- */
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default {
		position: absolute;
		top: 20%;
		left: 20%;
		bottom: auto;
		background: rgba(0,0,0,0.6);
		padding: 2.7em;
		margin-top: 0;
		border-top: none;
		width: 600px;
		-webkit-transform: translateX(-20%);
		-moz-transform: translateX(-20%);
		transform: translateX(-20%);
		-webkit-transition: all 0.7s ease-in-out;
		-moz-transition: all 0.7s ease-in-out;
		-o-transition: all 0.7s ease-in-out;
		transition: all 0.7s ease-in-out;
		opacity: 0;
	}
	.plu-media-slider.homepage-slider .is-selected .media-slider-image .text-wrapper.default {
		top: 20%;
		left: 14%;
		-webkit-transform: translateX(-14%);
		-moz-transform: translateX(-14%);
		transform: translateX(-14%);
		opacity: 1;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default h4 {
		font-size: 36px;
		border-bottom: 3px dotted #ffffff;
		margin-bottom: 7px;
		padding-bottom: 5px;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default p {
		font-size: 24px;
		margin-bottom: 5px;
	}
	.plu-media-slider.homepage-slider .media-slider-image .text-wrapper.default a {
		font-size: 15px;
		padding: 11px 12px;
	}
		
	/* down arrow link */
	.slide-down-arrow-link {
		display: block !important;
	}
	
}