section.jgrid {
	width: 100%;
	display: block;
    height: 100%;	
    background: #9ba28d;
}

section.jgrid div {
	display: inline-block;
	margin: 0;
	padding: 0;
	vertical-align: top;
	float: left;
	font-size: 0;
	position: relative;
}

section.jgrid div img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	transition: opacity 0.3s ease-in-out;
}

section.jgrid div.hidden {
	opacity: 0;
}

section.jgrid div img:hover {
	opacity: 0.8;
	width: 100%;
	height: 100%;
}

section.jgrid div img.slide {
	position: absolute;
	opacity: 0;
	animation: slideView 15s linear infinite alternate;
	animation-delay: 10s;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

section.jgrid div p {
	position: absolute;
	z-index: 2;
	font-size: 14px;
	margin: 5%;
	padding: 2%;
	width: 43%;
	top: 0;
	max-height: 43%;
	background: #fff;
}

div.grid-row {
	position: relative;
}

div.grid-row .grid-item {
	background-position: center;
	background-size: cover;
	transition: none;
	-moz-transition: none;
}

div.grid-row .grid-item.grid-tall {
	z-index: 10;
}

div.grid-row .grid-item.filter-out {
	transform: scale(0);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
}

section.jgrid div.text-left p {
	left: 0;
}

section.jgrid div.text-right p {
	right: 0;
}

div.jgrid-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.4s ease;
	-moz-transition: opacity 0.4s ease;
}

div.jgrid-modal.active {
	display: block;
	opacity: 1;
}

div.jgrid-modal > .item {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%);
	width: 50%;
	height: 80%;
	z-index: 99999;
	background-image: url(../img/discover/food003.html);
	background-size: cover;
	background-repeat: none;
	border-radius: 2px;
	transition: none;
	-moz-transition: none;
}

div.jgrid-modal > .item.active {
	top: 10%;
}

div.jgrid-modal > .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);

}

/* Media Queries */

@media screen and (max-width: 880px) {
    section.jgrid div p {
        display: none;
    }
}

@media screen and (max-width: 768px) {
	div.jgrid-modal > .item {
		left: 0;
		width: 100%;
	}
}
/* Slide animation */ 

@keyframes slideView {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}