/*
    GitHub URL: https://github.com/gucastiliao/video-popup-js
*/

.videopopupjs{
  background-color:#000;
  background-color:rgba(0,0,0,0.6);
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:99999;
  text-align: start!important;
}
.videopopupjs--hide{
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: videoPopupJsHide;
  animation-name: videoPopupJsHide;
}
.videopopupjs__close{
  width:30px;
  height:30px;
  cursor:pointer;
  display:block;
  margin-bottom:10px;
  color:rgba(255, 255, 255, 0.59);
}
.videopopupjs__close:after{
  width:30px;
  height:30px;
  display:block;
  text-align:center;
  content:'X';
  font-family:'Verdana';
  border-radius:50%;
  background:#333;
  line-height:2.2;
  font-size:13px;
}
.videopopupjs__close:hover{
  opacity:0.5;
}
.videopopupjs--animation{
  opacity: 0;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: videoPopupJs;
  animation-name: videoPopupJs;
}
.videopopupjs__content{
  margin:0 auto;
  height:100%;
  height:500px;
  width:100%;
  margin-top:5%;
}
.videopopupjs__content iframe{
  width:100%;
  height:100%;
}
.videopopupjs__block--notfound{
  position:absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width:100%;
  height:500px;
  background-color:#fff;
  text-align:center;
  vertical-align: middle;
  line-height: 500px;
  font-family:'Arial';
  font-size:20px;
}
@media(max-width: 768px){
  .videopopupjs__content{
    max-width:90%!important;
  }
}
@-webkit-keyframes videoPopupJs{
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

@keyframes videoPopupJs{
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

@-webkit-keyframes videoPopupJsHide{
  0%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }
}

@keyframes videoPopupJsHide{
  0%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }
}