/*
 * Shortcode: projects.scss
 * -----------------------------------------------
*/

.tm-sc-projects {
	&.projects-style8-current-theme {
		.tm-project {
			overflow: visible;
			padding-top: 0;
			.thumb {
				overflow: hidden;
				position: relative;
				img {
					@include scale(1);
					@include transition(all .4s ease-in-out);
				}

				.link {
					color: #fff;
					opacity: 0;
					filter: alpha(opacity=0);
					-webkit-transition: all .45s;
					transition: all .45s;
					-moz-transition: all .45s;
					-ms-transition: all .45s;
					width: 42px;
					height: 42px;
					line-height: 42px;
					border-radius: 50%;
					position: absolute;
					top: 50%;
					left: 0;
					right: 0;
					margin: 0 auto;
					-webkit-transform: translateY(-16px);
					-ms-transform: translateY(-16px);
					transform: translateY(-16px);
					z-index: 99;
					text-align: center;
					margin-top: -45px;
				}
			}
			&:before {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			&:before {
				background-image: url("../images/shadow-overlay2.png");
				background-position: center bottom;
				z-index: 1;
				opacity: 0.6;
				background-repeat: no-repeat;
			}
			.details {
				background-color: rgba(0, 0, 0, 0.7);
				position: absolute;
				z-index: 3;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 30px;
				-webkit-transform: translateY(20px);
				-ms-transform: translateY(20px);
				transform: translateY(20px);
				@include transition(all .4s ease-in-out);
				.title, a {
					color: #fff;
					&:hover {
						color: #eee;
					}
				}
				.excerpt {
					color: #ddd;
				}
				.btn-view-details {
					@include transition(all .4s ease-in-out);
					opacity: 0;
				}
			}

			&:hover {
				.thumb {
					img {
						@include scale(1.1);
					}

					&:after {
						-webkit-transform: scaleX(1);
						-ms-transform: scaleX(1);
						transform: scaleX(1);
						opacity: 1;
					}
					.link {
						opacity: 1;
						filter: alpha(opacity=100);
						margin-top: 0;
						-webkit-transform: translateY(-10px);
						-ms-transform: translateY(-10px);
						transform: translateY(-10px);
					}
				}

				.details{
					border-color:#df6512;
					-webkit-transform: translateY(15px);
					-ms-transform: translateY(15px);
					transform: translateY(15px);
					.btn-view-details {
						opacity: 1;
					}
				}
			}
		}

		.owl-carousel {
			.owl-nav {
				text-align: center;
				margin-top: 30px;
				> button {
					position: relative;
					display: inline-block;
					left: auto;
					right: auto;
					margin: 10px;
				}
			}
		}
	}
}