@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:960px;
  width:100%;
  height:100%;
  margin:0 auto;
  padding:0 10px;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
}

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

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

.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:-45px;
  right:0;
  display:inline-block;
  width:35px;
  height:35px;
  overflow:hidden;
  border:none;
  background:transparent;
}

@media (orientation: landscape){
  .modal-video-close-btn{top:0;right:-45px};}
  .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;
  }