
/* Gallery */
.no-gutter {
	padding: 0;
}
.album {
	@media(max-width: 768px) {
		&:first-child{
			margin-top: 0;
		}		
	}

	.masonry-grid {

		.masonry-grid-item {
			overflow: hidden;
			margin: auto;
			padding: 2px;

			.item-overlay {
				position: relative;
				background-color: black;

				.caption {
					position: absolute;
					color: white;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					opacity: 0;
					z-index: 1000;
					text-align: center;
				}

				img {
					height: 250px;
					width: 100%;
					object-fit: cover;
				  transition: .3s ease;
				}
			}

			&:hover {
				cursor: pointer;
				img {
					opacity: .5;
				}
				.caption {
					opacity: 1;
				}
			}
			
			&.height-low {

				img, .item-popUp {
					height: 180px;
				}

			}

			@media(max-width: 991px) {
				&:not(:first-child) img, .item-popUp {
					height: 180px;
				}
			}

		}

	}

}

#gallery_modal {
	padding-right: 0!important;

	.modal-body {
		height: 100vh;
	
		.image-wrapper {
			position: relative;
			height: 78vh;

			.frame {
		    position: absolute;
		    margin: 0 auto;  
		    left: 50%;
		    transform: perspective(1px) translateX(-50%);
		    padding: 10px 10px 30px 10px;
		    background-color: #FFF;
		    border-radius: 5px;
		    max-height: 78vh;

				img {
			    height: auto;
			    max-height: 72vh;
			    max-width: 95vw;
			    @media(max-width: 768px) {
			    	max-width: 90vw;
			    }
				}		
				.caption {
					position: absolute;
			    bottom: 7px;
			    left: 0;
			    right: 0;
			    margin: 0 auto;
			    text-align: center;
			    font-weight: 600;
				}		
			}

		}
		
		.control-wrapper {
			height: 80px;

			@media(max-width: 768px) {
				height: 56px;
			}

			a.scroll-left,a.scroll-right {
				font-size: 5rem;
				color: white;
				position: absolute;
				bottom: 20px;
				opacity: 0;
				transition: .2s all;
				&:hover {
					opacity: 1!important;
					cursor: pointer;
				}

				@media(max-width: 768px) {
					font-size: 5rem;
					bottom: 0;
				}
			}

			a.scroll-left {
				left: 15px;
				@media(max-width: 768px) {
					left: 15px;
					bottom: 10px;
				}
			}
			
			a.scroll-right {
				right: 15px;
				@media(max-width: 768px) {
					right: 15px;
					bottom: 10px;
				}
			}

			.image-toggle {
				margin-top: 10px;
				position: absolute;
				bottom: 20px;
				left: 50px;
		    right: 50px;
		    overflow: hidden;
				ul {

					padding-left: 0;
					list-style: none;
					margin-bottom: 0;
					display: inline-flex;
					transition: .3s all;

					li {

						&.active {
							div.control-item {
								img {
									opacity: 1;						
								}							
							}
						}
						
						div.control-item {
							height: 80px;
							width: 200px;
							overflow: hidden;
							margin-right: 2px;
							margin-left: 2px;
							background-color: black;
							img {
								object-fit: cover;
								height: auto; 
								width: 100%;
								opacity: .5;
							}			

							&:hover {
								cursor: pointer;
								img {
									opacity: 1;						
								}
							}

						}	

					}

				}

				@media(max-width: 768px) {
					bottom: 20px;
					ul > li > div.control-item {
						height: 56px;
						width: 140px;
					}
				}

			}

			&:hover {
				a.scroll-right, a.scroll-left {
					opacity: .5;
				}
			}

		}

	}
}
.modal-backdrop{
  opacity:0;
  &.in{opacity:.9;}
}
