/**
 * Need this for replacing iframes in columns
 * when useragent is chrome
 */
.js-replaced-iframe {
  display:block;
  position:relative;
  max-width:100%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.js-replaced-iframe:after {
  content: "";
  position: absolute;
  top: 0;
  width: 68px; 
  height: 48px; 
  background-size: 68px 48px;
  z-index: 2;
  background-image:url("img/play_normal.png");
  pointer-events: none;
  top: 50%;
  left: 50%;
  margin: -24px 0 0 -34px;
}
.js-replaced-iframe:hover:after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  width: 68px; 
  height: 48px; 
  background-size: 68px 48px;
  z-index: 2; 
  background-image:url("img/play_hover.png"); 
  pointer-events: none; 
  top: 50%;
  left: 50%;
  margin: -24px 0 0 -34px;
}
/* preload hover image */
.js-replaced-iframe::before{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content:url(img/play_hover.png);   
}




/* Make iframes responsive */
.iframe-responsive {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}

.iframe-responsive iframe {
	position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
	width:100%;
	height:100%;
}

.iframe-responsive .js-replaced-iframe {
  position:absolute;
	top:0;
  left:0;
  right:0;
  bottom:0;
	width:100%!important;
	height:100%!important;
}