.flex {
	margin: auto;
	max-width: 1200px;
}

img {
	border-style: none;
}

.flex img,
.flex div {
	margin: 0.2em;
	cursor: pointer;
	border-radius: 2px;
	max-width: calc(50% - 12px);
	box-shadow: 0px 0.1em 0.7em rgba(0, 0, 0, 0.2);
}

.flex div {
	display: inline-block;
	margin: 5px;
	/*max-width: calc(50% - 12px);*/
}

#local_image_container img {
	max-height: 200px;
}



.vid {
	height: 315px;
	width: 560px;
	position: relative;
	background-position: center center;
	background-size: cover; 
}


.vid:before,
.vid:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transition: opacity 0.2s;
}

.vid:after {
	background-repeat: no-repeat;
	background-position: 0.7em 0.7em;
	opacity: 0.5;
	background-size: 2em;
}

.vid:before {
	background: linear-gradient(150deg, #000, transparent 70%);
	opacity: 0.9;
}

.vid:hover:after {
	opacity: 0.8;
}

.vid:hover:before {
	opacity: 0.85;
}


.youtube:after {
	background-image: url(/images/video/play.png) ;
	background-size: 5em; border:0px #FFFF00 solid; 
	background-position:center;　
}


#bp_loader {
	box-shadow: none;
}

@media all and (max-width: 1076px) {
	#broken_vid {
		height: auto;
		padding-bottom: 20.2%;
	}
}

@media all and (max-width: 450px) {

	.flex div,
	.flex img {
		max-width: 98%;
	}
	#broken_vid {
		padding-bottom: 42%;
	}
}