/* Northland College WordPress theme slideshow/hero image CSS */

.hero {
	background: transparent;
	margin: 0;
	/*margin-top: -8px;*/ /* Workaround for minor alignment issues with nc.scaleHero() method */
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

	.hero * {
		-moz-user-select: none;
		-webkit-user-select: none;
	}

	.hero img { width: 100%; }

	.slides {
		height: auto;
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
		z-index: 1;
	}

		.slides li {
			display: block;
			height: auto;
			max-height: 100%;
			margin: 0;
			opacity: 0;
			overflow: hidden;
			padding: 0;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			transition: opacity 400ms;
			z-index: 1;
		}

		.slides li:first-child {
			position: relative;
		}

		.slides li.current {
			opacity: 1;
			z-index: 2;
		}

		.slides a {
			color: inherit;
			display: block;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			text-decoration: none;
			z-index: 3;
		}

		.slides img {
			height: auto;
			position: relative;
			width: 100%;
			z-index: 1;
		}

		.slides .caption {
			background: transparent;
			color: rgb(255,255,255);
			font-size: 120%;
			line-height: 1.25em;
			min-width: 300px;
			padding: 30px 80px;
			position: absolute; top: auto; right: auto; bottom: auto; left: auto;
			z-index: 2;
		}
		.half_hero .slides .caption,
		.medium_hero .slides .caption
		{
			font-size: 100%;
			padding: 10px 80px;
		}
		
		.slides .caption.top { top: 50px; }
		.slides .caption.bottom { bottom: 50px; }
		.slides .caption.left { left: 0; }
		.slides .caption.right { right: 0; }
		.slides .caption.top.full { top: 0; right: 0; left: 0; }
		.slides .caption.bottom.full { right: 0; left: 0; bottom: 0; padding-bottom: 80px; }

		.half_hero .slides .caption.bottom.full,
		.medium_hero .slides .caption.bottom.full
		{ padding-bottom: 15px; }
				
		.slides .caption.shaded_background { background-color: rgba(0,0,0,0.33); }
		.slides .caption.shaded_background.bg_none { background-color: transparent; }
		.slides .caption.shaded_background.bg_x_black { background-color: rgba(0,0,0,0.67); }
		.slides .caption.shaded_background.bg_black { background-color: rgba(0,0,0,0.33); }
		.slides .caption.shaded_background.bg_blue { background-color: rgba(35,50,82,0.67); }
		.slides .caption.shaded_background.bg_orange { background-color: rgba(245,132,38,0.33); }
		.slides .caption.shaded_background.bg_white { background-color: rgba(255,255,255,0.67); }

			.slides .caption * { margin: 5px 0; }
			.slides .caption.black * { color: rgb(76,76,76) !important; }
			.slides .caption.white * { color: rgb(255,255,255) !important; }
			.slides .caption.gray * { color: rgb(226,226,226) !important; }
			.slides .caption.blue * { color: rgb(35,50,82) !important; }
			.slides .caption.orange * { color: rgb(245,132,38) !important; }

			.slides .caption.include_tagline .tagline_image {
				background: transparent url('../images/you_go_north.png') left center no-repeat;
				background-size: 250px 40px;
				height: 40px;
				margin: 1em 0 0 0;
				padding: 0;
				width: 250px;
			}

	.slide_select {
		list-style: none;
		margin: 0; padding: 0;
		position: absolute; top: auto; right: auto; bottom: 7px; left: 20px;
		text-align: left;
		width: 100%;
		z-index: 4;
	}

		.slide_select li {
			background: transparent;
			border: 2px solid rgb(255,255,255);
			cursor: pointer;
			display: inline-block;
			height: 12px;
			opacity: 0.333;
			overflow: hidden;
			margin: 0 10px;
			text-indent: -999px;
			transition: opacity 200ms;
			width: 12px;
		}
		.hero:hover .slide_select li { opacity: 0.667; }
		.hero:hover .slide_select li:hover { opacity: 1; }

		.slide_select li.current {
			background: rgb(255,255,255);
		}

	.slide_navigation {
		background-size: 30px 50px;
		cursor: pointer;
		height: 50px;
		margin-top: -25px;
		opacity: 0.333;
		overflow: hidden;
		position: absolute; top: 50%; bottom: auto;
		text-indent: -999px;
		transition: opacity 200ms;
		width: 50px;
		z-index: 4;
	}
	.hero:hover .slide_navigation { opacity: 0.667; }
	.hero:hover .slide_navigation:hover { opacity: 1; }

	.slide_navigation.prev {
		background: transparent url('../images/prev.png') center center no-repeat;
		right: auto; left: 0.5em;
	}

	.slide_navigation.next {
		background: transparent url('../images/next.png') center center no-repeat;
		right: 0.5em; left: auto;
	}

.video_embed {
	background: transparent url('../images/video_overlay.png') center center no-repeat;
	background-size: 160px 90px;
	cursor: pointer;
	opacity: 0.5;
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 3;
}
.video_embed:hover { opacity: 1; }
.video_embed.open { opacity: 1 !important; }

	.video_embed .video_content { display: none; }
	.video_embed.open .video_content {
		background: rgb(34,34,34);
		display: block;
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	}
	
		.video_embed.open .video_content > * {
			height: 100%; 
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			width: 100%;
		}


/* CSS3 MEDIA QUERIES */

/* PRINT */
@media print {

}


/* LARGE SCREENS (content area over 1280 pixels) */
@media screen and (min-width: 1280px) {

}


/* TABLETS (content area under 1000 pixels) */
@media screen and (max-width: 1000px) {

	.slides .caption.include_tagline .tagline_image {
		background-size: 188px 30px;
		width: 188px;
		height: 30px;
	}
	
}


/* PHONES (content area under 782 pixels) */
/* Matched to size where WP mobile admin bar appears */
@media screen and (max-width: 782px) {

	.hero {
		height: auto !important;
		margin-bottom: 1.5em;
		overflow: visible;
	}

	.slides li {
		overflow: visible;
	}

	.slides .caption,
	.half_hero .slides .caption,
	.medium_hero .slides .caption
	{
		background-color: rgb(35,50,82) !important;
		color: rgb(255,255,255) !important;
		height: auto !important;
		margin: -0.5em 0 0 0 !important;
		max-width: none;
		padding: 1em 1.5em;
		position: relative; top: 0 !important; right: auto; bottom: auto; left: auto;
		z-index: 2;
	}

		.slides .caption *,
		.slides .caption.black *,
		.slides .caption.white *,
		.slides .caption.gray *,
		.slides .caption.blue *,
		.slides .caption.orange *
		{ color: rgb(255,255,255) !important; }

	.slides .caption.include_tagline .tagline_image {
		background-size: 188px 30px;
		height: 30px;
		width: 188px;
	}
	
		.slides .caption br { display: none; }
	
	.slide_select { display: none; }

	.slide_navigation { background-size: 18px 30px !important; }

}


/* SMALL PHONES (content area under 600 pixels) */
@media screen and (max-width: 600px) {

}


/* HIGH RESOLUTION IMAGE REPLACEMENTS */
@media	only screen and (-moz-min-device-pixel-ratio: 1.5),
		only screen and (-o-min-device-pixel-ratio: 3/2),
		only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-devicepixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx)
{

	.slides .caption.include_tagline .tagline_image { background-image: url('../images/you_go_north_x2.png'); }
	
	.slide_navigation.prev { background-image: url('../images/prev_x2.png'); }
	.slide_navigation.next { background-image: url('../images/next_x2.png'); }

	.video_embed { background-image: url('../images/video_overlay_x2.png'); }
	
}