.tm-grid-wrapper {
	margin-bottom: 30px;
	&[data-pagination=loadmore] {
		.tm-grid-pagination {
			margin-top: 60px;
		}
	}
	.tm-filter-button-group {
		margin: 0 -15px 64px;
		&.right {
			text-align: right;
		}
		&.center {
			text-align: center;
		}
		&.show-filter-counter {
			padding-top: 30px;
		}
	}
	.btn-filter {
		position: relative;
		display: inline-block;
		padding: 10px 15px 0;
		font-size: 15px;
		line-height: 1;
		color: $text-color;
		&:hover {
			.filter-counter {
				bottom: 100%;
				visibility: visible;
				opacity: 1;
			}
		}
		&.current,
		&:hover {
			.filter-text {
				&:after {
					bottom: 0;
				}
			}
		}
	}
	.filter-text {
		padding: 10px 0 3px;
		position: relative;
		text-transform: capitalize;
		&:after {
			@extend %transit2;
			position: absolute;
			width: 100%;
			height: 2px;
			bottom: -10px;
			left: 0;
			content: '';
			display: block;
		}
	}
	.filter-counter {
		@extend %transit2;
		position: absolute;
		bottom: 10px;
		left: 50%;
		visibility: hidden;
		margin: 0 auto;
		min-width: 34px;
		height: 24px;
		line-height: 27px;
		border-radius: 3px;
		font-size: 12px;
		background-color: #4d4c4d;
		color: #ffffff;
		text-align: center;
		opacity: 0;
		transform: translate(-50%, 0);
		&:before {
			position: absolute;
			right: 0;
			bottom: -4px;
			left: 0;
			display: block;
			margin: 0 auto;
			width: 0;
			height: 0;
			border-top: 4px solid #4d4c4d;
			border-right: 4px solid transparent;
			border-left: 4px solid transparent;
			content: "";
		}
	}

	&.style-4 {
		.grid-item {
			overflow: hidden;
		}
	}
}

.filter-style-2 {
	.btn-filter {
		&:hover,
		&.current {
			color: #ffffff;
			font-weight: 600;
		}
	}
}

.tm-loader {
	display: none;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #979797;
	border-radius: 50%;
	width: 68px;
	height: 68px;
	animation: spin 1.2s linear infinite;
}

.tm-grid-messages {
	margin-top: 50px;
	text-align: center;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.tm-grid {
	&.has-animation {
		.grid-item {
			opacity: 0;
		}
	}
	&.fade-in {
		.animate {
			-webkit-animation: fadeIn 0.95s ease forwards;
			animation: fadeIn .95s ease forwards;
		}
	}
	&.move-up {
		.animate {
			-webkit-transform: translateY(100px);
			transform: translateY(100px);
			-webkit-animation: moveVertical 0.65s ease forwards;
			animation: moveVertical 0.65s ease forwards;
		}
	}
	&.move-down {
		.animate {
			-webkit-transform: translateY(-100px);
			transform: translateY(-100px);
			-webkit-animation: moveVertical 0.65s ease forwards;
			animation: moveVertical 0.65s ease forwards;
		}
	}
	&.move-left {
		.animate {
			-webkit-transform: translateX(100px);
			transform: translateX(100px);
			-webkit-animation: moveHorizontal 0.65s ease forwards;
			animation: moveHorizontal 0.65s ease forwards;
		}
	}
	&.move-right {
		.animate {
			-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
			-webkit-animation: moveHorizontal 0.65s ease forwards;
			animation: moveHorizontal 0.65s ease forwards;
		}
	}
	&.scale-up {
		.animate {
			-webkit-transform: scale(0.6);
			transform: scale(0.6);
			-webkit-animation: scaleUp 0.65s ease-in-out forwards;
			animation: scaleUp 0.65s ease-in-out forwards;
		}
	}
	&.fall-perspective {
		-webkit-perspective: 1300px;
		perspective: 1300px;
		.animate {
			-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
			transform: translateZ(400px) translateY(300px) rotateX(-90deg);
			-webkit-animation: fallPerspective .8s ease-in-out forwards;
			animation: fallPerspective .8s ease-in-out forwards;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
	}
	&.fly {
		-webkit-perspective: 1300px;
		perspective: 1300px;
		.animate {
			-webkit-transform: rotateX(-180deg);
			transform: rotateX(-180deg);
			-webkit-transform-origin: 50% 50% -300px;
			transform-origin: 50% 50% -300px;
			-webkit-animation: fly .8s ease-in-out forwards;
			animation: fly .8s ease-in-out forwards;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
	}
	&.flip {
		.animate {
			-webkit-transform: rotateX(-80deg);
			transform: rotateX(-80deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
			-webkit-animation: flip .8s ease-in-out forwards;
			animation: flip .8s ease-in-out forwards;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
	}
	&.helix {
		-webkit-perspective: 1300px;
		perspective: 1300px;
		.animate {
			-webkit-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
			-webkit-animation: helix .8s ease-in-out forwards;
			animation: helix .8s ease-in-out forwards;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
	}
	&.pop-up {
		-webkit-perspective: 1300px;
		perspective: 1300px;
		.animate {
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
			-webkit-animation: popUp .8s ease-in forwards;
			animation: popUp .8s ease-in forwards;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
	}
}

@include media-breakpoint-down(md) {
	.tm-grid-wrapper {
		.tm-filter-button-group {
			margin-bottom: 70px;
		}
	}
}