#grid { text-align:center; margin:0 5px;}
/*
Add the transition affect to the images in the grid. Any changes to the element will be transtioned from it's current state, for example on :hover */
#grid li { display:inline-block; vertical-align:top; list-style: none; margin:7px 5px; width:23.5%;}
#grid li img { width:100%; height:auto;}

#grid li .pro_bottom { width:100%;}
#grid li .pro_bottom .adm_btn a { font-size: 15px; color:#fff;}
#grid li .pro_bottom .adm_btn a:hover { color:#fff;}

#information { z-index: 20; }
#information li div .pro_pop_text { color:#000; font-size:17px;}
#information img {width:100%;}

/* -------------------------------------------------------------------------------------------------------------------------
Using :target we can style the specific ID of the list item when clicked/tapped on eg: www.url.com/#info1
---------------------------------------------------------------------------------------------------------------------------- */
#grid li[id], #information li[id]:target { width: 100%; height: 100%; opacity: 1; z-index: 10; position: fixed; overflow-x: hidden; overflow-y: scroll; margin-bottom: 25px; }
#grid li[id], #information li[id]:target::-webkit-scrollbar { width: 8px; background-color:rgba(0,0,0,0.6); position: relative;}
#grid li[id], #information li[id]:target::-webkit-scrollbar-thumb { -webkit-border-radius: 1ex; background-color:#abcd03;}
#grid li[id], #information li[id]:target div { position: relative; margin: 0 auto; top:0; width: 100%; font-family: 'ITC Avant Garde Gothic Std Extra Light', sans-serif; letter-spacing:2px; padding:10px 0;}
#grid li[id], #information li[id]:target div div { max-width:700px;}
/* 
Style list items with an ID */
#grid li[id], #information li[id] { overflow: hidden; position: absolute; width: 0; height: 0; left: 0; top: 0; opacity: 0; background: rgba(0,0,0,.8);
	-webkit-transition: opacity 0.2s cubic-bezier(0,0,0,1);
	-moz-transition: opacity 0.2s cubic-bezier(0,0,0,1);
	transition: opacity 0.2s cubic-bezier(0,0,0,1);
}

/* Lightbox close button */
li[id] .close { position:absolute; top:0; opacity:1; width:100%; height:100%;}

@media screen and (max-width:991px){
	#grid li { width:31.5%;}
	/*#grid li:last-child { display:none;}*/
}
@media screen and (max-width:767px){
	#grid li { width:47%;}
}