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

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

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

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

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

.modal-video-close { opacity: 0; }

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

.modal-video-body { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; justify-content: center; margin: 0 auto; max-width: 960px; padding: 0 10px; width: 100%; }

.modal-video-inner { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; justify-content: center; width: 100%; }

@media (orientation: landscape) { .modal-video-inner { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 60px; } }

.modal-video-movie-wrap { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 0.3s; -webkit-animation-name: modal-video-inner; -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-out; animation-duration: 0.3s; animation-name: modal-video-inner; animation-timing-function: ease-out; background-color: #333; height: 0; padding-bottom: 56.25%; position: relative; transform: translate(0, 0); transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; width: 100%; }

.modal-video-movie-wrap iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.modal-video-close-btn { background: transparent; border: none; cursor: pointer; display: inline-block; height: 35px; overflow: hidden; position: absolute; right: 0; top: -45px; width: 35px; z-index: 2; }

@media (orientation: landscape) { .modal-video-close-btn { right: -45px; top: 0; } }

.modal-video-close-btn:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.modal-video-close-btn:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.modal-video-close-btn:before, .modal-video-close-btn:after { background: #fff; border-radius: 5px; content: ''; height: 2px; left: 0; margin-top: -1px; margin-top: -6px; position: absolute; top: 50%; width: 100%; }