.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: rgba(0,0,0,0);
    margin: auto;
    padding: 0;
    border: none;
    width: 700px;
    box-shadow: none;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
      border-radius:0px;
}

.video-popup-section{top: 20%; position: relative;}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {color: white; float: right; font-size: 28px; font-weight: bold; position: absolute; right: -20px; top: -18px; background: #000; width: 30px; height: 30px;
text-align: center; border-radius: 50%; z-index: 9999; border: 2px solid #fff; line-height: 25px; opacity: 1;}

.close:hover,
.close:focus {
   color: #fff;
text-decoration: none;
cursor: pointer;
opacity: 1;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
.video-popup-section iframe { width: 100%; height: 400px;}
.video-btn-banner-row { float: left; width: 100%; margin-bottom: 30px;  text-align: center;}
.youtube-video-without-lighbox iframe { width: 100%;  height: 450px;}

.sidebar_section .video_wrap { padding: 20px; float: left; width: 100%; display: block;}
.sidebar_section .video-btn-banner-row:last-child{margin-bottom:0px;} 

.video-btn-banner-row.img_v_lightbox a::after {content: ""; bottom: 0; position: absolute; left: 0; right: 0; font-size: 50px; color: #fff; background: url('https://www.rklesolutions.com/hubfs/video_icon.png');
background-size: 50px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; top: -7px;}
.video-btn-banner-row.img_v_lightbox a::before {content: ''; position: absolute; width: 100%; left: 0;  top: 0; background: rgba(0,0,0,0.3);
    bottom: 0; line-height: 100%; text-align: center; font-family: FontAwesome;  font-size: 67px;  font-weight: 400;  color: #fff;  top: 0;}
.video-btn-banner-row.img_v_lightbox a {display: block; cursor: pointer; float: left; width: 100%; position: relative;}

.close_icon {cursor: pointer; position: absolute;  right: -41px;  background: #000;  width: 30px;  height: 30px;  border-radius: 50%;  text-align: center;  line-height: 29px;
    font-size: 30px; color: #fff;  top: -37px;}
.youtube-video-without-lighbox iframe { width: 100%;  height: 192px;}

@media only screen and (min-width: 220px) and (max-width: 900px) { 
  .modal-content{width: 480px;}
  .video-popup-section iframe { height: 300px; }
  .video-popup-section{top: 100px;}
  @media only screen and (max-width: 767px) {
     .youtube-video-without-lighbox iframe { width: 100%; height: 300px;}
  }
  @media only screen and (max-width: 640px) {
    .modal-content { width: 300px;}
    .video-popup-section iframe { height: 226px;}
    .close_icon {right: -19px; width: 25px; height: 25px; line-height: 23px; font-size: 22px; top: -15px;}
  }
  @media only screen and (max-width: 400px) {
    .youtube-video-without-lighbox iframe { width: 100%;  height: 188px;}
  }
  @media only screen and (max-width: 380px) {
    .modal-content { width: 240px;}
    .video-popup-section iframe {height: 181px;}
  }
}