/*
 * Shortcode: gallery.scss
 * -----------------------------------------------
*/
.gallery-items-rounded {
	.effect-wrapper {
		border-radius: 6px;
	}
}


//3. gallery shortcode
.tm-sc-gallery {
	.tm-gallery {
		&.box-hover-effect {
			display: block;
			.effect-wrapper {
				background-color: #b2afab;
    			border: 1px solid #f3f1f1;
				.thumb {

				}
			}
			&:hover {
				.effect-wrapper {
					.thumb {
						@include scale(0.95);
					}
					.overlay-shade {
						opacity: 0.85;
						filter: alpha(opacity=70);
					}
				}
			}
		}
	}
	.text-holder {
		.title {
			font-size: 18px;
			text-transform: uppercase;
		}
		.date,
		.category {
			color: #aaa;
			font-size: 12px;
		}
	}
	.overlay-shade.shade-white + .text-holder {
		.date,
		.category {
			color: #777;
		}
	}
	.overlay-shade.shade-theme-colored1 + .text-holder,
	.overlay-shade.shade-theme-colored2 + .text-holder {
		.title,
		.date,
		.category {
			color: #fff;
		}
	}

	&.tm-sc-gallery-masonry-tiles {
		.has-masonry-tiles-fixed-image-size {
			&.isotope-layout {
				.isotope-item {
					.isotope-item-inner {
						height: 100%;
						.tm-gallery-inner {
							height: 100%;
							.thumb {
								height: 100%;
								a {
									height: 100%;
									img {
										height: 100%;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	
	&.gallery-style1-current-theme  {
		.tm-gallery {
			position: relative;
			overflow: hidden;
			.thumb {
				overflow: hidden;
				position: relative;
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				transform: scale(1);
				-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
				transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
			}
			.tm-gallery-content-wrapper {
				box-sizing: border-box;
				padding: 20px;
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				.tm-gallery-content {
					display: table;
					height: 100%;
					width: 100%;
					overflow: hidden;
					&:after {
						content: '';
						background-color: rgba(22, 22, 22, 0.75);
						position: absolute;
						top: 20px;
						left: 20px;
						bottom: 20px;
						right: 20px;
						opacity: 0;
						-webkit-transform-origin: 0 0;
						-moz-transform-origin: 0 0;
						transform-origin: 0 0;
						-webkit-transform: scaleY(0);
						-moz-transform: scaleY(0);
						transform: scaleY(0);
						-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
						transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
					}
					.tm-gallery-content-inner {
						display: table-cell;
						padding: 20px;
						height: 100%;
						width: 100%;
						position: relative;
						vertical-align: middle;
						text-align: center;
						z-index: 9;
						.title-holder {
							overflow: hidden;
							.title {
								text-transform: uppercase;
								color: #fff;
								a {
									&:hover {
										color: #ccc;
									}
								}
							}
						}
						.title, .styled-icons {
							position: relative;
							opacity: 0;
							-webkit-transform: translate3d(0, -100%, 0);
							-moz-transform: translate3d(0, -100%, 0);
							transform: translate3d(0, -100%, 0);
							-webkit-transition: -webkit-transform .4s, opacity .2s;
							transition: transform .4s, opacity .2s;
							will-change: transform, opacity;
						}
						.icons-holder-inner {
							overflow: hidden;
							.styled-icons {
							}
						}
					}
				}
			}
			&:hover {
				.thumb {
					-webkit-transform: scale(1.1);
					-moz-transform: scale(1.1);
					transform: scale(1.1);
				}
				.tm-gallery-content-wrapper {
					.tm-gallery-content {
						&:after {
							opacity: 1;
							-webkit-transform: scaleY(1);
							-moz-transform: scaleY(1);
							transform: scaleY(1);
							-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
							transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
						}
						.tm-gallery-content-inner {
							.title {
								opacity: 1;
								-webkit-transform: translate3d(0, 0, 0);
								-moz-transform: translate3d(0, 0, 0);
								transform: translate3d(0, 0, 0);
								-webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
								transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
							}
							.styled-icons {
								opacity: 1;
								-webkit-transform: translate3d(0, 0, 0);
								-moz-transform: translate3d(0, 0, 0);
								transform: translate3d(0, 0, 0);
								-webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
								transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
							}
						}
					}
				}
			}
		}
	}


	&.gallery-style2-simple {
		.tm-gallery {
			position: relative;
			overflow: hidden;
			.thumb {
				overflow: hidden;
				position: relative;
				img {
					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					transform: scale(1);
					-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
					transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
				}
			}
			.tm-gallery-content-wrapper {
				.tm-gallery-content {
					.tm-gallery-content-inner {
						.title-holder {
							.title {
								text-transform: uppercase;
							}
						}
						.title, .categories {
						}
						.category-holder {
							overflow: hidden;
							.categories {
								font-size: 14px;
								list-style: none;
								a {
									display: inline-block;
									padding-right: 5px;
									margin-right: 10px;
									position: relative;
									color: #999;
									font-weight: $font-weight-normal;
									&:last-child {
										padding-right: 0;
										&:after {
											content: '';
										}
									}
									&:after {
										content: ',';
										position: absolute;
										top: 0;
										right: 0;
									}
									&:hover {
										color: #666;
									}
								}
							}
						}
					}
				}
			}
			&:hover {
				.thumb {
					img {
						-webkit-transform: scale(1.1);
						-moz-transform: scale(1.1);
						transform: scale(1.1);
					}
				}
				.tm-gallery-content-wrapper {
					.tm-gallery-content {
						.tm-gallery-content-inner {
							.title {
							}
							.categories {
							}
						}
					}
				}
			}
		}
		&.tm-sc-gallery-masonry-tiles {
			.tm-gallery {
				position: relative;
				overflow: hidden;
				.tm-gallery-content-wrapper {
					box-sizing: border-box;
					padding: 20px;
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					.tm-gallery-content {
						display: table;
						height: 100%;
						width: 100%;
						overflow: hidden;
						&:after {
							content: '';
							background-color: rgba(255, 255, 255, 0.95);
							position: absolute;
							top: 20px;
							left: 20px;
							bottom: 20px;
							right: 20px;
							opacity: 0;
							-webkit-transform-origin: 0 0;
							-moz-transform-origin: 0 0;
							transform-origin: 0 0;
							-webkit-transform: scaleX(0);
							-moz-transform: scaleX(0);
							transform: scaleX(0);
							-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
							transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
						}
						.tm-gallery-content-inner {
							display: table-cell;
							padding: 20px;
							height: 100%;
							width: 100%;
							position: relative;
							vertical-align: bottom;
							z-index: 9;
							.title-holder {
								overflow: hidden;
								.title {
									text-transform: uppercase;
								}
							}
							.title, .categories {
								position: relative;
								opacity: 0;
								-webkit-transform: translate3d(-100%, 0, 0);
								-moz-transform: translate3d(-100%, 0, 0);
								transform: translate3d(-100%, 0, 0);
								-webkit-transition: -webkit-transform .4s, opacity .2s;
								transition: transform .4s, opacity .2s;
								will-change: transform, opacity;
							}
							.category-holder {
								overflow: hidden;
								.categories {
									font-size: 14px;
									list-style: none;
									a {
										display: inline-block;
										padding-right: 5px;
										margin-right: 10px;
										position: relative;
										color: #999;
										font-weight: $font-weight-normal;
										&:last-child {
											padding-right: 0;
											&:after {
												content: '';
											}
										}
										&:after {
											content: ',';
											position: absolute;
											top: 0;
											right: 0;
										}
										&:hover {
											color: #666;
										}
									}
								}
							}
						}
					}
				}
				&:hover {
					.tm-gallery-content-wrapper {
						.tm-gallery-content {
							&:after {
								opacity: 1;
								-webkit-transform: scaleX(1);
								-moz-transform: scaleX(1);
								transform: scaleX(1);
								-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
								transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
							}
							.tm-gallery-content-inner {
								.title {
									opacity: 1;
									-webkit-transform: translate3d(0, 0, 0);
									-moz-transform: translate3d(0, 0, 0);
									transform: translate3d(0, 0, 0);
									-webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
									transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
								}
								.categories {
									opacity: 1;
									-webkit-transform: translate3d(0, 0, 0);
									-moz-transform: translate3d(0, 0, 0);
									transform: translate3d(0, 0, 0);
									-webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
									transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
								}
							}
						}
					}
				}
			}
		}
	}


	&.gallery-style3-classic {
		.tm-gallery {
			position: relative;
			overflow: hidden;
			.thumb {
				overflow: hidden;
				position: relative;
				img {
					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					transform: scale(1);
					-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
					transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
				}
			}
			.tm-gallery-content-wrapper {
				.tm-gallery-content {
					background-color: #fff;
					border: 1px solid rgba(234, 234, 234, 0.58);
					padding: 20px 10px;
					text-align: center;
					.tm-gallery-content-inner {
						.title-holder {
							.title {
								text-transform: uppercase;
							}
						}
						.title, .categories {
						}
						.category-holder {
							overflow: hidden;
							.categories {
								font-size: 14px;
								list-style: none;
								a {
									display: inline-block;
									padding-right: 5px;
									margin-right: 10px;
									position: relative;
									color: #999;
									font-weight: $font-weight-normal;
									&:last-child {
										padding-right: 0;
										&:after {
											content: '';
										}
									}
									&:after {
										content: ',';
										position: absolute;
										top: 0;
										right: 0;
									}
									&:hover {
										color: #666;
									}
								}
							}
						}
					}
				}
			}
			&:hover {
				.thumb {
					img {
						-webkit-transform: scale(1.1);
						-moz-transform: scale(1.1);
						transform: scale(1.1);
					}
				}
				.tm-gallery-content-wrapper {
					.tm-gallery-content {
						.tm-gallery-content-inner {
							.title {
							}
							.categories {
							}
						}
					}
				}
			}
		}
		&.tm-sc-gallery-masonry-tiles {
			.tm-gallery {
				position: relative;
				overflow: hidden;
				.tm-gallery-content-wrapper {
					box-sizing: border-box;
					padding: 20px;
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					.tm-gallery-content {
						background-color: transparent;
						border: none;
						display: table;
						height: 100%;
						width: 100%;
						overflow: hidden;
						&:after {
							content: '';
							background-color: rgba(255, 255, 255, 0.95);
							position: absolute;
							top: 20px;
							left: 20px;
							bottom: 20px;
							right: 20px;
							opacity: 0;
							-webkit-transform-origin: 0 0;
							-moz-transform-origin: 0 0;
							transform-origin: 0 0;
							-webkit-transform: scaleX(0);
							-moz-transform: scaleX(0);
							transform: scaleX(0);
							-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
							transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
						}
						.tm-gallery-content-inner {
							display: table-cell;
							padding: 20px;
							height: 100%;
							width: 100%;
							position: relative;
							vertical-align: bottom;
							z-index: 9;
							.title-holder {
								overflow: hidden;
								.title {
									text-transform: uppercase;
								}
							}
							.title, .categories {
								position: relative;
								opacity: 0;
								-webkit-transform: translate3d(-100%, 0, 0);
								-moz-transform: translate3d(-100%, 0, 0);
								transform: translate3d(-100%, 0, 0);
								-webkit-transition: -webkit-transform .4s, opacity .2s;
								transition: transform .4s, opacity .2s;
								will-change: transform, opacity;
							}
							.category-holder {
								overflow: hidden;
								.categories {
									font-size: 14px;
									list-style: none;
									a {
										display: inline-block;
										padding-right: 5px;
										margin-right: 10px;
										position: relative;
										color: #999;
										font-weight: $font-weight-normal;
										&:last-child {
											padding-right: 0;
											&:after {
												content: '';
											}
										}
										&:after {
											content: ',';
											position: absolute;
											top: 0;
											right: 0;
										}
										&:hover {
											color: #666;
										}
									}
								}
							}
						}
					}
				}
				&:hover {
					.tm-gallery-content-wrapper {
						.tm-gallery-content {
							&:after {
								opacity: 1;
								-webkit-transform: scaleX(1);
								-moz-transform: scaleX(1);
								transform: scaleX(1);
								-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
								transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
							}
							.tm-gallery-content-inner {
								.title {
									opacity: 1;
									-webkit-transform: translate3d(0, 0, 0);
									-moz-transform: translate3d(0, 0, 0);
									transform: translate3d(0, 0, 0);
									-webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
									transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
								}
								.categories {
									opacity: 1;
									-webkit-transform: translate3d(0, 0, 0);
									-moz-transform: translate3d(0, 0, 0);
									transform: translate3d(0, 0, 0);
									-webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
									transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
								}
							}
						}
					}
				}
			}
		}
	}


	&.gallery-style4-modern {
		.tm-gallery {
			position: relative;
			overflow: hidden;
			.thumb {
				overflow: hidden;
				position: relative;
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				transform: scale(1);
				-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
				transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
			}
			.tm-gallery-content-wrapper {
				box-sizing: border-box;
				padding: 20px;
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				.tm-gallery-content {
					display: table;
					height: 100%;
					width: 100%;
					overflow: hidden;
					&:after {
						content: '';
						background-color: rgba(255, 255, 255, 0.95);
						position: absolute;
						top: 20px;
						left: 20px;
						bottom: 20px;
						right: 20px;
						opacity: 0;
						-webkit-transform-origin: 0 0;
						-moz-transform-origin: 0 0;
						transform-origin: 0 0;
						-webkit-transform: scaleX(0);
						-moz-transform: scaleX(0);
						transform: scaleX(0);
						-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
						transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
					}
					.tm-gallery-content-inner {
						display: table-cell;
						padding: 20px;
						height: 100%;
						width: 100%;
						position: relative;
						vertical-align: bottom;
						z-index: 9;
						.title-holder {
							overflow: hidden;
							.title {
								text-transform: uppercase;
							}
						}
						.title, .categories {
							position: relative;
							opacity: 0;
							-webkit-transform: translate3d(-100%, 0, 0);
							-moz-transform: translate3d(-100%, 0, 0);
							transform: translate3d(-100%, 0, 0);
							-webkit-transition: -webkit-transform .4s, opacity .2s;
							transition: transform .4s, opacity .2s;
							will-change: transform, opacity;
						}
						.category-holder {
							overflow: hidden;
							.categories {
								font-size: 14px;
								list-style: none;
								a {
									display: inline-block;
									padding-right: 5px;
									margin-right: 10px;
									position: relative;
									color: #999;
									font-weight: $font-weight-normal;
									&:last-child {
										padding-right: 0;
										&:after {
											content: '';
										}
									}
									&:after {
										content: ',';
										position: absolute;
										top: 0;
										right: 0;
									}
									&:hover {
										color: #666;
									}
								}
							}
						}
					}
				}
			}
			&:hover {
				.thumb {
					-webkit-transform: scale(1.1);
					-moz-transform: scale(1.1);
					transform: scale(1.1);
				}
				.tm-gallery-content-wrapper {
					.tm-gallery-content {
						&:after {
							opacity: 1;
							-webkit-transform: scaleX(1);
							-moz-transform: scaleX(1);
							transform: scaleX(1);
							-webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
							transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
						}
						.tm-gallery-content-inner {
							.title {
								opacity: 1;
								-webkit-transform: translate3d(0, 0, 0);
								-moz-transform: translate3d(0, 0, 0);
								transform: translate3d(0, 0, 0);
								-webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
								transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
							}
							.categories {
								opacity: 1;
								-webkit-transform: translate3d(0, 0, 0);
								-moz-transform: translate3d(0, 0, 0);
								transform: translate3d(0, 0, 0);
								-webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
								transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
							}
						}
					}
				}
			}
		}
	}
}