<link rel="stylesheet" href="css/magnific-popup.css">
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
    
    
    
    
    .popup-box2 img {
    width: 100%;
    border: 6px solid #054fb7;
	}
	.popup-overlay iframe {
	height: 500px !important;
	}
	@media screen and (max-width: 800px){
	div.popup-overlay {
	display: none; 
	}
	div.popup-box2 {
	top: 35%;
	}
	}
	.popup-close {
    position: absolute;
    background: #054fb7;
    color: #fff !important;
    font-weight: bold;
    right: 5px;
    padding: 3px 8px;
    top: -16px;
    margin: 5px 5px 0 0;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    line-height: 15px;
	}


    <div class="popup-overlay">
	<div class="popup-box2">
		<div class="popup-close new" style="line-height:0px">
			<p style="color:white !important;">Close</p>
		</div>
		<img src="images/banner/aboutt.jpg" >
		
	</div>
</div>


<script>
	$(document).ready(function() {
		$(".popup-close").click(function(){
			$(".popup-overlay").slideUp("slow");
			
		});
	});
	$( document ).on( 'keydown', function ( e ) {
		if ( e.keyCode === 27 ) { // ESC
			$(".popup-overlay").slideUp("slow");
		}
	});
	$(document).ready(function() {
		setTimeout(function(){
			$(".popup-close").trigger('click');                
		}, 30000);
	});
</script>