@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-image: radial-gradient(circle, #1c3d51, black );
background-image: -webkit-radial-gradient(bottom, circle cover, #1c3d51 0%, #000 80%);
background-image: -moz-radial-gradient(bottom, circle cover, #1c3d51 0%, #000 80%);
background-image: -o-radial-gradient(bottom, circle cover, #1c3d51 0%, #000 80%);
background-image: radial-gradient(bottom, circle cover, #1c3d51 0%, #000 80%);

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;  z-index:9999999999;}

.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:1350px;width:80%;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;

-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
 -webkit-transform: rotate(0.000001deg); /*mac os 10.6 safari 5 border-radius-bug */ }

.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%; -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*ios 7 border-radius-bug */
-webkit-transform: rotate(0.000001deg); /*mac os 10.6 safari 5 border-radius-bug */
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px;}


.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}