/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.video-player .hold-img {
	position: relative;
}

.video-player .hold-img:before {
	content: '';
	position: absolute;
	top: 40%;
	height: 20%;
	left: 0;
	width: 100%;
	background: url('/wp-content/plugins/rio-video/public/icons/play-video.svg') no-repeat center / contain;
	transition: background 400ms;
}

.video-player .hold-img:hover:before {
	background-image: url('/wp-content/plugins/rio-video/public/icons/play-video-alt.svg');
}

.video-player, .image-modal-trigger {
	background: #EDF4FA;
}

.video-player .hold-img > div > i {
    display: none;
}

/********************************************************* IMPORTANT, PLEASE READ ************************************************
 * 
 * 
 * THESE ARE ALL THE DEFAULT STYLINGS OF THE RIO BLOCKS.
 * THIS SHOULD ONLY BE MODIFIED IF
 * ( A ) YOU HAVE A FULL AND COMPLETE UNDERSTANDING OF THE IMPLICARIONS OF THE CHANGE
 * ( B ) IT IS ABSOLUETELY NECESSARY */

.modal-content .video-player {
	margin: 0 !important;
}

.video-player iframe, .video-player video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 1;
}

.video-player .hold-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.video-player .hold-img.on{
	display: none;
	z-index: 0;
}

.video-player-html-holder {
	display: none !important;
}

.video_iframe_cont {
	display: none !important;
}

.video-iframe-cont{
	display: none !important;
}

.video-player, .image-modal-trigger {
	position: relative;
	padding-bottom: 56.23%;
	cursor: pointer;
	margin: 1rem 0;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	background-color: #000;
}

.video-player.widescreen-ar {
	padding-bottom: 56.23%;
}

.video-player.standard-ar {
	padding-bottom: 75.0%;
}

.video-player.square-ar {
	padding-bottom: 100%;
}

.video-player.vertical-ar {
	padding-bottom: 177.78%;
}

.video-player.vertical-std-ar {
	padding-bottom: 133.33%;
}

.video-player.half-portrait-ar {
	padding-bottom: 200%;
}