/* Thumbnails */
			.modal-trigger {
				width: 100%;
				cursor: pointer;
				margin: 10px;
				border-radius: 4px;
				transition: 0.3s;
				max-width: 400px;
				height: auto;
			}
			.modal-trigger:hover {
				opacity: 0.8;
			}

			/* Modal Background */
			.modal {
				display: none;
				position: fixed;
				z-index: 9999;
				padding-top: 60px;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				overflow: auto;
				background-color: rgba(0,0,0,0.8);

				/* Fade-in animation */
				animation: fadeIn 0.4s ease;
			}

			/* Modal Image */
			.modal-content {
				margin: auto;
				display: block;
				max-width: 90%;
				max-height: 80vh;

				/* Fade-in + zoom animation */
				animation: zoomIn 0.4s ease;
			}

			/* Caption */
			#caption {
				margin: 20px auto;
				text-align: center;
				color: #ccc;
				font-size: 18px;
			}

			/* Close Button */
			.close {
				position: absolute;
				top: 20px;
				right: 35px;
				color: #fff;
				font-size: 40px;
				font-weight: bold;
				cursor: pointer;
			}

			/* Keyframes */
			@keyframes fadeIn {
				from { opacity: 0; }
				to   { opacity: 1; }
			}

			@keyframes zoomIn {
				from { opacity: 0; transform: scale(0.8); }
				to   { opacity: 1; transform: scale(1); }
			}