#gallery {
	
	#showcase {
		margin-top: 25px;
		-webkit-font-smoothing: antialiased;
		
		.header {
			text-align: left;
			h3 {
				font-size: 26px;
				font-family: $myriad;
				color: #596166;
				line-height: 25px;
				font-weight: 600;
				margin-bottom: 7px;
			}
			p {
				font-size: 15px;
				font-weight: 400;
				color: #666;
				margin-top: 12px;
				line-height: 24px;
				@media(min-width: 992px) {
					width: 48%;
				}
			}
		}

		.filtering {
			margin-top: 35px;
			margin-bottom: 35px;
			#filters {
				padding-left: 20px;
				text-align: center;
				border-bottom: 2px solid #EDEDED;

				@media(max-width: 767px) {
					display: none;
				}

				li {
					list-style-type: none;
					display: inline-block;
					margin: 0px 8px;
					&:first-child {
						margin-left: 0px;
					}					
					a {
						color: #888;
						font-weight: 400;
						border: 0px;
						padding: 10px 22px;
						font-size: 16px;
						position: relative;
						@include transition(color 0.25s linear);
						
						&.active {
							color: #2B69A2;
							font-weight: 400;
							border-bottom: 0px;
							display: inline-block;
							&:after {
								content: '';
								position: absolute;
								width: 100%;
								height: auto;
								border-bottom: 2px solid #7BA3C9;
								left: 1px;
								bottom: -2px;
							}
						}

						&:hover {
							color: #2B69A2;
							background: none;
							text-decoration: none;					
						}
					}
				}
			}
		}

		.gallery_container {
			overflow: visible !important;
		}
		.pic {
			margin-bottom: 40px;
			position: relative;
			display: block;			
			@include transition(.5s cubic-bezier(.25,1.45,.51,1.13));

			&.fluidbox-opened:hover {
				.layer {
					background: rgba(0, 0, 0, 0);
					p {
						opacity: 0;
						filter: alpha(opacity=0);
					}
				}
			}

			&:hover {
				/*@include transform(scale(1.12));*/
				text-decoration: none;

				.layer {
					background: rgba(33,33,33,.8);
					p {
						margin-top: -20px;
						opacity: 1;
						filter: alpha(opacity=100);
					}
				}
			}
			.layer {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 9;
				top: 0px;
				left: 0px;
				background: rgba(0, 0, 0, 0);
				@include transition(all 0.25s ease-out);

				p {
					transition: margin-top .35s ease-out, opacity .55s ease-out;
					color: #fff;
					font-size: 15px;
					text-align: center;
					top: 50%;
					width: 100%;
					position: absolute;
					font-weight: 600;
					margin-top: 25px;
					opacity: 0;
					filter: alpha(opacity=0);

					span {
						position: relative;
						top: 1px;
						margin-right: 2px;
					}
				}
			}
			img {
				margin: 0 auto;
			}
		}
	}

}


/* Fluidbox styling starts here */
a[data-fluidbox] {
  background-color: #eee;
  border: none;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  margin-bottom: 1.5rem;
  
  &.fluidbox-opened {
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;    
  }
  
  & img {
    display: block;
    margin: 0 auto;
    opacity: 0;
    filter: alpha(opacity=0);
    max-width: 100%;
    transition: all .25s ease-in-out;
  }
}

a[class^='float'] {
  margin: 1rem;
  margin-top: 0;
  width: 33.33333%;
  
  &.float-left {
    float: left;
    margin-left: 0;
  }
  &.float-right {
    float: right;
    margin-right: 0;
  }
}

#fluidbox-overlay {
  background-color: rgba(255,255,255,.85);
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 500;
}
.fluidbox-wrap {
  background-position: center center;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  z-index: 400;
  transition: all .25s ease-in-out;
  
  .fluidbox-opened & {
    z-index: 600;
  }
}
.fluidbox-ghost {
  background-size: cover;
  background-position: center center;
  position: absolute;
  transition: all .25s ease-in-out;
}