.fancybox__container {z-index:9901 !important}
.media-grid{display: flex; flex-wrap: wrap;}
.media-box{
	position:relative;
	width: calc(100% - 20px);
	margin: 10px;
	overflow:hidden;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0.625rem 0px;
	
}

/* thumbnail overlay background */
.thumbnail-overlay {
	width:100%;
	text-align:center;
}

.media-box .thumbnail {position:relative; display:block; width:100%;overflow: hidden; cursor:pointer}
.media-box:before{
	content:"";
	display:block;
	opacity:0;  
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background-color: rgba(0,0,0, .10);
	-webkit-transition: background-color 0.2s ease-out;
	-moz-transition: background-color 0.2s ease-out;
	-o-transition: background-color 0.2s ease-out;
	transition: background-color 0.2s ease-out;
}


/* hover effect on the thumbnail-overlay */

.media-box:hover:before{
	opacity:1;
	background-color: rgba(0,0,0, .40) !important;
}
.media-box:hover .thumbnail-overlay {display:block}
.thumbnail-overlay {
	position:absolute;
	z-index:2;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100%; 
	text-align:center; 
	color:var(--color-3); 
	transition: transform 0.6s ease-in-out; 
}
.media-box-play-button{
	display:inline-block;
	width:50px;
	height:50px;
	background-color: var(--color-w);
    -webkit-mask-image: url(/wdyouth/images/common/play.svg);
	mask-image: url(/wdyouth/images/common/play.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size:cover;
	mask-size:cover;
}

/* hover effect on the image */
.media-box img{
	-webkit-transition: transform 0.6s ease-in-out;
	-moz-transition: transform 0.6s ease-in-out;
	-o-transition: transform 0.6s ease-in-out;
	-ms-transition: transform 0.6s ease-in-out;
	transition: transform 0.6s ease-in-out;

	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	-o-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	transform-origin: bottom left;
}
.media-box:hover img{
	-webkit-transform: scale(1.1) translate(-20px);
	-moz-transform: scale(1.1) translate(-20px);
	-o-transform: scale(1.1) translate(-20px);
	-ms-transform: scale(1.1) translate(-20px);
	transform: scale(1.1) translate(-20px);
}

.media-box-title {font-family:var(--title-font); padding:var(--inpd) 0; text-align:center}
.media-box-title>h5{font-size:1.125em; margin-bottom:var(--margin-s)}
.media-box-title>p {font-family:var(--num-font); font-size:var(--text-sm); color:rgb(132, 152, 164)}


@media only screen and (min-width:768px){
	
   .media-box {
		width: calc(50% - 20px);
		margin: 10px
	}
	
}

@media only screen and (min-width:1000px){
	
   .media-box {
		width: calc(25% - 20px);
		margin: 10px
	}
	
}



.moreBtn {display:flex; justify-content:center; margin-bottom:var(--secgap)}
.moreBtn a {display:block; padding:1rem;}
.moreBtn a p {display:block; margin-top:var(--padding-s)}
.moreBtn a p span {color:var(--color-9); font-size:var(--text-xs)}
.moreBtn a:before {
	content:""; 
	width:48px;
	height:48px;
	margin:0 auto;
	background-image:url("/wdyouth/images/common/chevrons-down.svg");
	background-repeat:no-repeat;
	background-size:cover;
	display:block; 
	transition:.2s ease-out; 
	-webkit-animation:balloon1 1.2s ease-in-out infinite; 
	-moz-animation:balloon1 1.2s ease-in-out infinite; 
	-o-animation:balloon1 1.2s ease-in-out infinite; 
	animation:balloon1 1.2s ease-in-out infinite; 

}
.moreBtn a:hover {border-color:#333}

.topSCH {display:flex; justify-content:flex-end}
.bbsschW {position:relative; width:340px; max-width:100%; margin:0 1rem 2rem 0; height:50px; border:2px solid rgba(0,0,0,0.6); border-radius:10px; padding:10px 1em}
.bbsschW input {height:30px; width:calc(100% - 50px); border:0}
.bbsschW input:focus{outline:0}
.bbsschW .sbtn {position:absolute; right:1em; top:50%; transform: translateY(-50%); color:#333;}

@keyframes balloon1 { 
	0%,100%{ transform:translate(0, 1rem);} 
	50%{ transform:translate(0, 0); } 
}