/*   Project: Popup Lightbox 
 *   Author: Asif Mughal
 *   URL: www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2019 - Asif Mughal
 */
/* FILE : demo.css */
*{ margin: 0; padding: 0;}


a.btn {
  text-decoration: none;
  color: #666;
   border: 2px solid #666;
   padding: 10px 15px;
   display: inline-block;
   margin-left: 5px;
}
a.btn:hover{
   background: #666;
   color: #fff;
    transition: .3s;
-webkit-transition: .3s;
}

main{
  background: #fff;
  margin: 20px;
  
}


 
@media only screen and (min-width: 720px){
    main{
      width: 720px;
       box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
      margin-left: auto;
      margin-right: auto;
    }


}

.img-container {
  text-align: left; margin-top:2%; margin-bottom:0%; width:30.5%; height:300px; overflow:hidden; float:left; margin-left:2%; position:relative} 

.img-container img {
   width:100%;
   height: auto;
   border-radius: 5px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
   
}




.img-containerv {
  text-align: left; margin-top:2%; margin-bottom:0%; width:100%; height:auto; overflow:hidden; float:left; margin-left:0%; margin-bottom:2%; position:relative} 

.img-containerv img {
   width:30.3%;
   height: auto;
   border-radius: 5px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: .3s;
  -webkit-transition: .3s; float:left;
  -moz-transition: .3s; margin-left:2%;
   
}





.img-container p{ position:absolute; bottom:-50px; height:50px; line-height:50px; text-align:center; width:100%; background:rgba(0,0,0,0.8); color:white; font-size:17px;transition: all 0.6s; }
.img-container:hover p{ bottom:0px;}

.img-container img:hover{
  transform: scale(1.2);
 -webkit-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -o-transform: scale(1.2);
  opacity: 0.75;
 -webkit-opacity: 0.75;
 -moz-opacity: 0.75;
  transition: .3s;
 -webkit-transition: .3s;
 -moz-transition: .3s;
}


@media(max-width:1680px){
	
	
.img-container { height:250px;}	
	
	
	
	
	}
	
	
	
	
	
	@media(max-width:1400px){
	
	
.img-container { height:190px;}	
	
	
	
	
	}

@media(max-width:1120px){
	
.img-container img {
   width:100%; margin-left:2%; margin-bottom:2%;
   height: auto;
   border-radius: 5px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  
   
}

.img-container { height:90px; width:47%}	
	
	}