/*
 * Shortcode: works.scss
 * -----------------------------------------------
*/
.tm-sc-works-categories {
	&.style-default {
		.each-category {
			.thumb {
				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(16,33,46,0.4);
					@include transition(all .4s ease-in-out);
				}
			}
			.details {
				position: relative;
				padding: 30px;
				opacity: 1;
				background: #fff;
				@include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.08) );
				.title {
					margin-top: 0;
				}			
			}
			&:hover {
				.thumb {
					&:before {
						height: 0;
					}
				}
				.details {
				}
			}
		}
	}
	&.style-floating {
		.each-category {
			.thumb {
				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(16,33,46,0.4);
					@include transition(all .4s ease-in-out);
				}
			}
			.details {
				position: absolute;
				bottom: 40px;
				left: 0;
				padding: 0 45px 0 45px;
				opacity: 1;
				.title, .excerpt, .btn-plain-text, .btn-plain-text-with-arrow {
					color:  #fff;
				}
			}
			&:hover {
				.thumb {
					&:before {
						height: 0;
					}
				}
				.details {
					bottom: 50px;
				}
			}
		}
	}
	&.style-hanging {
		.each-category {
			.thumb {
				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(16,33,46,0.4);
					@include transition(all .4s ease-in-out);
				}
			}
			.details {
				position: relative;
				top: -40px;
				padding: 30px;
				opacity: 1;
				margin: 0 auto;
				width: 90%;
				background: #fff;
				@include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.08) );
				.title {
					margin-top: 0;
				}			
			}
			&:hover {
				.thumb {
					&:before {
						height: 0;
					}
				}
				.details {
				}
			}
		}
	}
}

.work-archive {
	.work-single {
		.cat-list {
			background: rgba(175, 175, 175, 0.7);
			position: absolute;
			right: 15px;
			top: 15px;
			padding: 2px 12px 4px 12px;
			z-index: 11;
			border-radius: 3px;
			line-height: 22px;
			ul {
				li {
					display: inline-block;
					color: #fff;
					a {
						color: #fff;
						font-size: 13px;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
		.details {
			position: relative;
			padding: 30px;
			opacity: 1;
			background: #fff;
			@include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.08) );
			@include transition(all .3s ease);
			.excerpt {
				margin-bottom: 10px;
			}
			.title {
				margin-top: 0;
			}
		}
		&:hover {
			.details {
				@include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.24) );
			}
		}
	}
}