@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:940px;
 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:100%;
 height:0;
 position:relative;
 padding-bottom:56.25%;
 background-color:#333;
 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%
}
.modal-video-close-btn {
 position:absolute;
 z-index:2;
 top:-35px;
 right:-35px;
 display:inline-block;
 width:35px;
 height:35px;
 overflow:hidden;
 border:none;
 background:transparent
}
.modal-video-close-btn:before {
 transform:rotate(45deg)
}
.modal-video-close-btn:after {
 transform:rotate(-45deg)
}
.modal-video-close-btn:before,
.modal-video-close-btn:after {
 content:'';
 position:absolute;
 height:2px;
 width:100%;
 top:50%;
 left:0;
 margin-top:-1px;
 background:#fff;
 border-radius:5px;
 margin-top:-6px
}