.tm-case-study {

	.tm-grid-pagination {
		padding-top: 70px;
	}

	.post-wrapper {
		@extend %transit;
		position: relative;
	}

	.post-thumbnail-wrapper {
		position: relative;

		.post-overlay,
		img {
			border-radius: 5px;
		}
	}

	.post-title {
		a {
			color: inherit;
		}
	}

	.post-categories {
		a {
			color: inherit;
		}
	}

	.post-thumbnail {
		position: relative;

		img {
			@extend %transit;
			width: 100%;
		}
	}

	.post-overlay-title {
		a {
			font-size: inherit;
		}
	}

	&.style-grid,
	&.style-masonry {
		.post-wrapper {
			&:hover {
				transform: translateY(-5px);
			}
		}
	}

	&.style-metro {
		.post-permalink {
			display: block;
			height: 100%;
			width: 100%;
		}

		.post-wrapper {
			position: relative;
			display: flex;
			align-items: stretch;
			background-position: center;
			background-size: cover;
			height: 100%;
			width: 100%;

			&:before {
				content: '';
				display: block;
				padding-top: 100%;
			}
		}

		.grid-width-2 {
			.post-wrapper {
				&:before {
					padding-top: 50%;
				}
			}
		}

		.grid-height-2 {
			.post-wrapper {
				&:before {
					padding-top: 200%;
				}
			}
		}

		.grid-width-2.grid-height-2 {
			.post-wrapper {
				&:before {
					padding-top: 100%;
				}
			}
		}
	}

	&.style-metro-02 {
		.post-permalink {
			display: block;
			height: 100%;
			width: 100%;
		}

		.post-wrapper {
			position: relative;
			display: flex;
			align-items: stretch;
			background-position: center;
			background-size: cover;
			height: 100%;
			width: 100%;

			&:before {
				content: '';
				display: block;
				padding-top: 78%;
			}
		}

		.grid-width-2 {
			.post-wrapper {
				&:before {
					padding-top: 78%;
				}
			}
		}

		.grid-height-2 {
			.post-wrapper {
				&:before {
					padding-top: 156%;
				}
			}
		}

		.grid-width-2.grid-height-2 {
			.post-wrapper {
				&:before {
					padding-top: 78%;
				}
			}
		}
	}

	&.style-list {
		.case-study-item {
			margin-bottom: 30px;
			padding-bottom: 30px;
			border-bottom: 1px solid #e4e8f6;

			&:last-child {
				margin-bottom: 20px;
			}
		}

		.post-wrapper {
			display: flex;
			flex-wrap: wrap;
			margin-left: -15px;
			margin-right: -15px;
		}

		.post-thumbnail-wrapper,
		.post-info {
			flex: 0 0 50%;
			max-width: 50%;
			padding-left: 15px;
			padding-right: 15px;
		}

		.post-thumbnail {
			img {
				border-radius: 8px;
				box-shadow: 0 0 40px rgba(51, 51, 51, .1);
			}
		}

		.post-categories {
			margin-bottom: 15px;
		}

		.post-title {
			font-size: 24px;
			margin-bottom: 21px;
		}

		.post-info {
			padding-left: 45px;
			padding-top: 31px;
		}

		.post-read-more {
			margin-top: 30px;

			.tm-button {
				min-width: 170px;
			}
		}
	}

	&.has-caption {
		.post-thumbnail-wrapper {
			.post-overlay,
			img {
				border-radius: 5px;
			}
		}
	}

	&.caption-style-01 {
		.post-wrapper {
			@extend %transit;
			height: 100%;
			overflow: hidden;
		}

		.post-info {
			padding: 22px 15px 24px;
			text-align: center;
		}

		.post-title {
			font-size: 18px;
			margin: 0;
		}

		.post-categories {
			margin-bottom: 6px;
		}
	}

	&.caption-style-02 {
		.grid-item {
			&:hover {
				.post-wrapper {
					transform: translateY(-5px);
				}

				div.btn {
					color: #fff;

					&:before {
						transform: translateY(0);
					}
				}
			}
		}

		.post-wrapper {
			background: #fff;
			box-shadow: 0 0 30px rgba(51, 51, 51, .1);
			border-radius: 8px;
			overflow: hidden;
		}

		.post-thumbnail {
			img {
				border-radius: 5px 5px 0 0;
			}
		}

		.post-title {
			font-size: 18px;
			line-height: 1.67;
			margin-bottom: 2px;
		}

		.post-excerpt {
			margin-top: 14px;
		}

		.post-info {
			position: relative;
			padding: 25px 26px 94px;
		}

		.btn {
			@extend %transit;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 56px;
			line-height: 56px;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
			border-top: 1px solid #eee;

			&:before {
				@extend %transit;
				@extend %ContentAbsolute;
				transform: translateY(100%);
				z-index: -1;
			}

			.btn-icon {
				margin-left: 4px;
				position: relative;
				top: 1px;
			}
		}

		a.btn {
			&:hover {
				color: #fff;

				&:before {
					transform: translateY(0);
				}
			}
		}
	}

	&.style-justified {
		.post-permalink {
			display: block;
		}

		.post-permalink,
		.post-thumbnail-wrapper,
		.post-wrapper {
			width: 100%;
			height: 100%;
		}

		.post-thumbnail {
			width: 100%;
			height: 100%;

			img {
				margin: 0 !important;
			}
		}

		.caption {
			display: none !important;
		}
	}

	&.style-carousel {
		.grid-item {
			&:hover {
				.post-wrapper {
					transform: translateY(-5px);
				}

				.btn {
					color: #fff;

					&:before {
						transform: translateY(0);
					}
				}
			}
		}

		.tm-swiper {
			margin: -20px -15px 0;
		}

		.post-wrapper {
			background: #fff;
			box-shadow: 0 18px 40px -18px rgba(51, 51, 51, 0.1);
			border-radius: 8px;
			margin: 20px 15px 35px;
			overflow: hidden;
		}

		.post-thumbnail {
			img {
				border-radius: 5px 5px 0 0;
			}
		}

		.post-title {
			font-size: 18px;
			line-height: 1.67;
			margin-bottom: 2px;
		}

		.post-excerpt {
			margin-top: 14px;
		}

		.post-info {
			position: relative;
			padding: 25px 26px 94px;
		}

		.btn {
			@extend %transit;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 56px;
			line-height: 56px;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
			border-top: 1px solid #eee;

			&:before {
				@extend %transit;
				@extend %ContentAbsolute;
				transform: translateY(100%);
				z-index: -1;
			}

			.btn-icon {
				margin-left: 4px;
				position: relative;
				top: 1px;
			}
		}
	}

	&[data-type='justified'] {
		[data-overlay-animation='faded'] {
			.post-thumbnail {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
}

.case-study-overlay-faded,
.case-study-overlay-faded-02 {
	.post-wrapper {
		&:hover {
			.post-overlay {
				visibility: visible;
				opacity: 1;
			}

			.post-overlay-content {
				visibility: visible;
				opacity: 1;
			}

			.post-overlay-title {
				opacity: 1;
				transition: .5s ease-out .2s;
				transform: translateY(0);
			}
		}
	}

	.post-overlay {
		@extend %transit;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		visibility: hidden;
		opacity: 0;
		border-radius: inherit;
	}

	.post-overlay-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		visibility: hidden;
		opacity: 0;
	}

	.post-overlay-content-inner {
		display: table;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.post-overlay-info {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		padding: 0 15px;
	}

	.post-overlay-title {
		opacity: 0;
		transition: .3s ease-out 0s;
		transform: translateY(10px);
		font-size: 24px;
		line-height: 1.5;
		color: #fff;
		margin: 0;
	}
}

.case-study-overlay-faded-02 {
	.post-wrapper {
		&:hover {
			.post-overlay-info {
				.post-categories {
					opacity: 1;
					transition: .5s ease-out .2s;
					transform: translateY(0);
				}
			}
		}
	}

	.post-overlay-info {
		.post-categories {
			opacity: 0;
			transition: .3s ease-out 0s;
			transform: translateY(-10px);
			margin-bottom: 10px;
			color: #fff;
		}
	}
}

.case-study-overlay-faded-03 {
	.post-wrapper {
		border-radius: 5px;
		overflow: hidden;

		&:hover {
			.post-overlay-title {
				opacity: 0;
				visibility: hidden;
				transform: translateY(-20px);
			}

			.post-overlay-read-more {
				opacity: 1;
				visibility: visible;
				transform: none;
			}
		}
	}

	.post-overlay {
		@extend %transit;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: inherit;
	}

	.post-overlay-content {
		position: absolute;
		right: 30px;
		left: 30px;
		bottom: 21px;
	}

	.post-overlay-title,
	.post-overlay-read-more {
		@extend %transit;
		font-size: 18px;
		line-height: 1.78;
		color: #fff;
		margin: 0;
	}

	.post-overlay-read-more {
		position: absolute;
		left: 0;
		bottom: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(20px);

		span {
			margin-left: 5px;
		}
	}
}

@include media-breakpoint-up(md) {
	.tm-case-study {
		&.style-list {
			.case-study-item {
				margin-bottom: 50px;
				padding-bottom: 50px;
			}

			.post-title {
				font-size: 34px;
			}

			.post-excerpt {
				font-size: 18px;
				line-height: 1.78;
			}
		}
	}
}

@include media-breakpoint-down(md) {
	.tm-case-study {
		&.style-list {
			.post-info {
				padding-left: 15px;
			}
		}
	}
}

@include media-breakpoint-down(sm) {
	.tm-case-study {
		&.style-metro {
			.grid-width-2,
			.grid-height-2 {
				.post-wrapper {
					&:before {
						padding-top: 100%;
					}
				}
			}
		}

		&.style-list {
			.post-wrapper {
				display: block;
			}

			.post-thumbnail-wrapper,
			.post-info {
				max-width: 100%;
			}

			.post-info {
				padding-top: 40px;
			}
		}
	}
}