/* 
jQuery video modal
https://appleple.github.io/modal-video/ 
/content/dam/common/css/modal-video.css
*/

@keyframes modal-video {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@keyframes modal-video-inner {
	from {
		transform: translate(0, 100px)
	}
	to {
		transform: translate(0, 0)
	}
}

.modal-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000000;
	cursor: pointer;
	opacity: 1;
	animation-timing-function: ease-out;
	animation-duration: .3s;
	animation-name: modal-video;
	-webkit-transition: opacity .3s ease-out;
	-moz-transition: opacity .3s ease-out;
	-ms-transition: opacity .3s ease-out;
	-o-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out
}

.modal-video-close {
	opacity: 0
}

.modal-video-close .modal-video-movie-wrap {
	-webkit-transform: translate(0, 100px);
	-moz-transform: translate(0, 100px);
	-ms-transform: translate(0, 100px);
	-o-transform: translate(0, 100px);
	transform: translate(0, 100px)
}

.modal-video-body {
	max-width: 1080px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: table
}

.modal-video-inner {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%
}

.modal-video-movie-wrap {
	width: auto /* 100% */;
	height: 0;
	position: relative;
	padding-bottom: 52.5% !important;
	background-color: #ffffff;
	border: 36px solid #ffffff;
	animation-timing-function: ease-out;
	animation-duration: .3s;
	animation-name: modal-video-inner;
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	-webkit-transition: -webkit-transform .3s ease-out;
	-moz-transition: -moz-transform .3s ease-out;
	-ms-transition: -ms-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out
}

.modal-video-movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #BBBCBC;
}

.modal-video-close-btn {
	position: absolute;
	z-index: 2;
	top: -30px;
	right: -30px;
	display: inline-block;
	width: 24px;
	height: 24px;
	padding: 0;
	overflow: hidden;
	border: none;
	background-color: #ffffff !important;
	background-image: url('/content/dam/common/images/bg_close_modal_video.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	box-shadow: none !important;
	border-radius: 0px;
}

.modal-video-close-btn:hover, .modal-video-close-btn:active {
	background-color: #ffffff !important;
	background-image: url('/content/dam/common/images/bg_close_modal_video.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center !important;
}

@media screen and (max-width:780px) {
	.modal-video-movie-wrap {
		padding-bottom: 51.5% !important;
	}
}

@media screen and (max-width:680px) {
	.modal-video-movie-wrap {
		padding-bottom: 50.5% !important;
	}
}

@media screen and (max-width:600px) {
	.modal-video-movie-wrap {
		padding-bottom: 49.5% !important;
	}
}

@media screen and (max-width:480px) {
	.modal-video-movie-wrap {
		padding-bottom: 48.5% !important;
	}
}

@media screen and (max-width:360px) {
	.modal-video-movie-wrap {
		padding-bottom: 46.5% !important;
	}
}

@media screen and (max-width:320px) {
	.modal-video-movie-wrap {
		padding-bottom: 45.5% !important;
	}
}