.gridder {
	margin: 0 -15px;
	padding: 0;
	font-size: 0;
	list-style-type: none;
	/* text-align: center; */
	}

	.gridder-list {
		position: relative;
		margin: 0;
		padding: 0 15px 15px;
		display: inline-block;
		width: 33.333%;
		height: 250px;
		vertical-align: top;
		cursor: pointer;
		}

		.gridder-list .image {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: #777;
			background-size: cover;
			background-position: center;
			}
			.gridder-list .demo-image-gallery-item-inner {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				
				-webkit-transition: all 0.50s ease-in-out;
				-moz-transition: 	all 0.50s ease-in-out;
				-ms-transition: 	all 0.50s ease-in-out;
				-o-transition: 		all 0.50s ease-in-out;
				transition: 		all 0.50s ease-in-out;
				}
				.gridder-list .image:hover .demo-image-gallery-item-inner {
					-webkit-transform: 	scale(1.02);
					-moz-transform: 	scale(1.02);
					transform: 			scale(1.02);
					}

	.gridder .overlay {
		position: absolute;
		top: 10%;
		left: 10%;
		color: #fff;
		line-height: 130%;
		text-align: left;
		}

		.gridder .overlay .title {
			color: #fff;
			font-size: 16px;
			font-weight: 800;
			}

		.gridder .overlay .description {
			color: #fff;
			font-size: 14px;
			font-weight: 300;
			}

	.gridder-list,
	.gridder-show { font-size: 12px; }

	.gridder .selectedItem {}
		.gridder .selectedItem:after {
			position: absolute;
			top: 101%;
			left: 43%;
			margin-bottom: -4px;
			display: block;
			width: 0;
			height: 0%;
			content: ' ';
			border-right: 10px solid transparent;
			border-bottom: 10px solid #333;
			border-left: 10px solid transparent;
			}

	.gridder .hasSelectedItem {}
		.gridder-list {}
			.gridder-list:not(.selectedItem) {
				/* opacity: 0.20; */
				opacity: 1.00;
				-webkit-transition: all 0.25s ease-in-out;
				-moz-transition: 	all 0.25s ease-in-out;
				-ms-transition: 	all 0.25s ease-in-out;
				-o-transition: 		all 0.25s ease-in-out;
				transition: 		all 0.25s ease-in-out;
				}

				/* Hover State */
				.gridder-list:not(.selectedItem):hover {
					opacity: 0.65;
					}

/* Gridder Show Container */
.gridder-show {
	padding: 0 15px 30px;
	display: block;
	float: left;
	width: 100%;
	}

	.gridder-padding {
		position: relative;
		padding: 4%;
		width: 100%;
		color: #ddd;
		text-align: left;
		background: #333;
		}

	.gridder-show img {
		width: 100%;

		-webkit-box-shadow: 0 0 20px 5px rgba(0, 0, 0,0.20);
		-moz-box-shadow: 	0 0 20px 5px rgba(0, 0, 0,0.20);
		box-shadow: 		0 0 20px 5px rgba(0, 0, 0,0.20);
		}


/* Gridder Content */
.gridder-content {
	display: none;
	}

/* Gridder Navigation */
.gridder-navigation {}

	/* Navigation Item */
	.gridder-nav {
		position: absolute;
		top: 50%;
		z-index: 1;
		margin: -40px 5px 0;
		padding: 0;
		display: inline-block;
		width: 32px;
		height: 80px;
		color: #bbb;
		font-size: 2.15rem;
		font-weight: bold;
		line-height: 80px;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		white-space: normal;
		word-wrap: normal;
		overflow: hidden;
		cursor: pointer;
		outline: 0;
		background-color: #777;

		-webkit-user-select: 	none;
		-moz-user-select: 		none;
		user-select: 			none;
		-webkit-transition: all 0.20s ease-in-out;
		-moz-transition: 	all 0.20s ease-in-out;
		-ms-transition: 	all 0.20s ease-in-out;
		-o-transition: 		all 0.20s ease-in-out;
		transition: 		all 0.20s ease-in-out;
		}

		.gridder-nav::before {
			font-family: 'Font Awesome 6 Pro';
			}

		/* Button: Previous */
		.gridder-nav.prev {
			left: 6px;
			}

			/* https://fontawesome.com/icons/chevron-left?style=regular */
			.gridder-nav.prev::before { content: '\f053'; }

		/* Button: Next */
		.gridder-nav.next {
			right: 6px;
			}

			/* https://fontawesome.com/icons/chevron-right?style=regular */
			.gridder-nav::before { content: '\f054'; }

		/* Button: Disabled */
		.gridder-nav.disabled { display: none; }

		/* Hover State */
		.gridder-nav:hover {
			background: #333;
			}

	/* Button: Close */
	.gridder-close {
		position: absolute;
		top: 13px;
		right: 13px;
		z-index: 2;
		padding: 0;
		width: 30px;
		height: 30px;
		color: #fff;
		font-size: 2.00rem;
		cursor: pointer;
		line-height: 30px;
		text-align: center;
		}

		.gridder-close::before {
			font-family: 'Font Awesome 6 Pro';
			content: '\f00d';
			}

		/* Hover State */
		.gridder-close:hover { color: #ab0000; }

/* Media Queries */
/* 800px */
@media screen and (max-width: 800px){
	.gridder {}
		.gridder-list {
			width: 50%;
			}
}

/* 500px */
@media screen and (max-width: 500px){
	.gridder {}
		.gridder-list {
			width: 25%;
			height: 100px;
			}
}

/* 400px */
@media screen and (max-width: 400px){
	.gridder {}
		.gridder-list {
			width: 33.333%;
			height: 90px;
			}
}