/*  *********************************************   */
/* 	      NAEP V2: Video Slider Panel               */
/*  *********************************************   */
#PageBody #MainContent .naep-v2-video-slider-panel .video-player {
	position: relative;
	padding-bottom: 31%;
	padding-top: 30px;
	height: 0;
	width: 60%;
	margin: 0 auto 20px;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-player iframe,
#PageBody #MainContent .naep-v2-video-slider-panel .video-player object,
#PageBody #MainContent .naep-v2-video-slider-panel .video-player embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-height: 400px;
	height: 100%;
	box-shadow: 0 3px 6px rgba(54,54,54, .15);
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame {
	position: relative;
	width: 60%;
	margin: 0 auto;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame:not(.start):before {
	content: "";
	position: absolute;
	width: 10%;
	height: 128px;
	top: 0;
	left: -20px;
	background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0));
	z-index: 20;
	pointer-events: none;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame:not(.end):after {
	content: "";
	position: absolute;
	width: 10%;
	height: 128px;
	top: 0;
	right: -20px;
	background: linear-gradient(90deg, rgba(255,255,255,0),rgba(255,255,255,1));
	z-index: 20;
	pointer-events: none;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame.no-arrows:not(.start):before,
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame.no-arrows:not(.end):after {
	background: none;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame.no-arrows .video-list-arrows {
	display: none;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list {
	display: flex;
	flex-flow: row nowrap;
	position: relative;
	min-width: calc(100% - 100px);
	margin: 0;
	width: auto;
	overflow: hidden;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-item {
	display: inline-block;
	width: calc((100% - 40px) / 3);
	min-width: 200px;
	white-space: normal;
	flex-shrink: 0;
	margin: 0 20px 0 0;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame.no-arrows .video-list-item {
	min-width: unset;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-item:last-child {
	margin: 0;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb {
	cursor:pointer;
	position:relative;
	box-shadow:0px 3px 6px 0px rgba(54,54,54,.15);
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb:hover {
	box-shadow: none;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb .thumb_duration:hover {
	background-color: rgba(198, 146, 20, .2);
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb .thumb_duration span {
	position: absolute;
	color: #fff;
	font-size: 0.6em;
	bottom: 0;
	right: 0;
	padding: 0 4px;
	z-index: 2;	
	background-color: #000;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb .thumb_duration.now_playing:before {
	content: "Now ";
	color: #fff;
	background-color: #000;
	border-radius: 5px 0 0 5px;
	position:absolute;
	top: 6px;
	left: 10px;
	font-size: 0.8em;
	padding: 0 10px 0 4px;
	z-index: 99;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb .thumb_duration.now_playing:after {
	content: " Playing";
	color: #fff;
	background-color: #000;
	border-radius: 0 5px 5px 0;
	position:absolute;
	top: 6px;
	left: 43px;
	font-size: 0.8em;
	padding: 0 4px;
	z-index: 99;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-item:hover .thumb_duration:not(.now_playing),
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-item:focus .thumb_duration:not(.now_playing) {
	position: absolute;
	background: no-repeat center/25% url(../img/img-play-button.svg);
	background-color: rgba(0, 0, 0, 0.4);
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 5;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb img {
	width: 100%;
	height: 120px;
	position: relative;
	z-index:1;
	box-shadow:0 3px 6px rgba(54,54,54, .15);
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame.no-arrows .video-list-thumb img {
	height: unset;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-item:hover .video-list-thumb img {
	box-shadow:inset 0 3px 6px rgba(54,54,54, .15);	
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-item .desc {
	color: #001871;
	font-size: .8em;
	line-height: 1.2em;
	margin-top: 10px;
} 
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-item:hover .desc {
	text-decoration: underline;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-left,
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-right {
	position: absolute;
	top: 25px;
	height: 70px;
	width: 70px;
	cursor: pointer;
	padding: 20px 10px;
	background-color: #0077c8;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 40% 40%;
	border-radius: 50%;
	border: 0;
	z-index: 99;
	-o-transition: 200ms;
	-ms-transition: 200ms;
	-moz-transition: 200ms;
	-webkit-transition: 200ms;
	transition: 200ms;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-left {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
	left: -40px;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-right {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	right: -40px;
}
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-right:hover, 
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-left:hover, 
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-right:focus, 
#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-left:focus {
	background-color: #00b8f0;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.16);
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.16);
	-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.16);
	-moz-transition: all 300ms;
	-o-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms ease-in;
}

/*  *********************************************   */
/* 	      Media Queries                             */
/*  *********************************************   */
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame.no-arrows .video-list-item {
		min-width: unset;
	}
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame.no-arrows .video-list-thumb img {
		height: unset;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
}
@media screen and (max-width: 767px){
	#PageBody #MainContent .naep-v2-video-slider-panel .video-player {
		width: 80%;
	}
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-frame {
		width: 80%;
	}
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-item {
		min-width: 120px;
	}	
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb .thumb_duration.now_playing:after {
		left: 38px;
	}
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-thumb img {
		height: 80px;
	}	
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-left,
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-right {
		top: 15px;
		height: 50px;
		width: 50px;
	}
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-left {
		left: -30px;
	}
	#PageBody #MainContent .naep-v2-video-slider-panel .video-list-arrows .arrow-right {
		right: -30px;
	}
}