.ova-dir-archive {
	.ova_dir_archive_content {
		width: 100%;
		&.overlay {
			opacity: 0.5;
		}
	}
	.list-cat-dir{
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 60px;
		.item {
			&.active{
				.cate_name {
					color: #fff;
					background: var(--primary);
				}
			}
			.cate_name {
				transition: all 0.3s linear;
				display: inline-block;
				font-size: 18px;
				line-height: 1.2;
				font-weight: 600;
				color: var(--heading);
				padding: 7px 15px;
				margin: 0 5px;
				border-radius: 5px;
				&:hover{
					transition: all 0.3s linear;
					color: #fff;
					background: var(--primary);
				}
			}
		}
	}
	#ova_dir_archive_google_map, #el_ova_dir_archive_google_map {
		height: 400px;
	}
	.property {
		position: relative;
		&.highlight {
			.card {
				display: flex;
			}
		}
		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: -8px;
			left: 50%;
			margin-left: -10px;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-top: 10px solid #fff;
		}
		.avatar {
			width: 55px;
			height: 55px;
			border-radius: 50%;
			border: 4px solid transparent;
			background: #fff;
			position: relative;
			overflow: hidden;
			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
		.card {
			display: none;
			position: absolute;
			top: 63px;
			left: 50%;
			transform: translateX(-50%);
			-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.25);
			-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.25);
			box-shadow: 0 5px 10px rgba(0,0,0,0.25);
			background-color: #FFF;
			width: 280px;
			cursor: default;
			.thumbnail {
				display: block;
				flex: 0 0 100px;
				&:hover {
					img {
						opacity: 0.9;
					}
				}
				img {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					transition: all .3s linear;
				}
			}
			.content {
				width: 100%;
				padding: 15px 20px;
				.title {
					margin: 0;
					a {
						font-size: 16px;
						&:hover {
							text-decoration: underline;
						}
					}
				}
				.info {
					margin: 10px 0px 0px 0px;
					padding: 0;
					list-style: none;
					li:not(:first-child) {
						margin-top: 5px;
					}
					li {
						display: flex;
						align-items: center;
						gap: 5px;
						font-size: 12px;
						line-height: 1.3;
						i {
							width: 12px;
							line-height: 1;
							display: inline-flex;
						}
						.text {
							display: inline-block;
							a {
								&:hover {
									text-decoration: underline;
								}
							}
						}
					}
				}
			}
		}
	}
	.ova-dir-items {
		margin-top: 30px;
		display: grid;
		gap: 30px;
		.item {
			background: #fff;
			box-shadow: 0px 10px 40px 0px rgba(6, 22, 58, 0.1);
			&:hover {
				.thumbnail {
					img {
						transform: scale(1.1);
					}
				}
			}
			.thumbnail {
				display: block;
				height: auto;
				position: relative;
				overflow: hidden;
				img {
					display: block;
					width: 100%;
					transition: all .3s linear;
				}
			}
			.content {
				position: relative;
				padding: 14px 24px 24px 24px;
				.title {
					margin: 0;
					a {
						font-size: 18px;
						&:hover {
							text-decoration: underline;
						}
					}
				}
				.description {
					display: none;
					margin: 14px 0 24px 0;
					padding: 0 0 24px 0;
					border-bottom: 1px solid rgba(5, 26, 83, 0.1);
				}
				.info {
					margin: 13px 0px 0px 0px;
					padding: 0;
					list-style: none;
					li {
						margin: 0 0 8px 0;
						display: flex;
						align-items: center;
						gap: 5px;
						font-size: 14px;
						line-height: 1.3;
						i {
							display: inline-flex;
							width: 14px;
							line-height: 1;
						}
						.text {
							display: inline-block;
							a {
								&:hover {
									text-decoration: underline;
								}
							}
						}
					}
				}
			}
		}
	}
	&.three_column {
		.ova-dir-items {
			grid-template-columns: 1fr 1fr 1fr;
			@media screen and ( max-width: 1023px ) {
				grid-template-columns: 1fr 1fr;
			}
			@media screen and ( max-width: 600px ) {
				grid-template-columns: 1fr;
			}
		}
	}
	&.two_column {
		.ova-dir-items {
			grid-template-columns: 1fr 1fr;
			@media screen and ( max-width: 600px ) {
				grid-template-columns: 1fr;
			}
		}
	}
	&.one_column {
		.ova-dir-items {
			grid-template-columns: 1fr;
		}
	}
	// Template 2
	&.template_2 {
		.list-cat-dir {
			.item {
				.cate_name {
					font-size: 16px;
					font-weight: 800;
					margin: 0 15px;
					padding: 2px 0;
					border-radius: 0;
					border-bottom: 2px solid transparent;
					&:hover {
						color: var(--primary);
						background-color: transparent;
						border-bottom: 2px solid var(--primary);
					}
				}
				&.active {
					.cate_name {
						color: var(--primary);
						background-color: transparent;
						border-bottom: 2px solid var(--primary);
					}
				}
			}
		}
		.ova-dir-items {
			.item {
				box-shadow: none;
				.content {
					margin: -30px auto 0 auto;
					padding: 45px 30px 20px 30px;
				    background: #fff;
				    max-width: calc(100% - 40px);
				    box-shadow: 0px 10px 40px 0px rgba(6, 22, 58, 0.1);
					.title {
						a {
							font-size: 22px;
							color: var(--heading);
						}
					}
					.description {
						display: block;
					}
					.info {
						li {
							margin: 0;
							font-weight: 500;
							&:nth-child(2) {
								position: absolute;
								top: -10px;
								left: 30px;
								background-color: var(--primary);
								padding: 10px 20px;
								a {
									color: #fff;
								}
								i {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}
}
.ova-dir-loader {
	text-align: center;
	margin-bottom: 30px;
	.loader {
		margin: 0 auto;
		width: 35px;
		height: 35px;
		border: 5px solid;
		border-color: var(--primary) transparent;
		border-radius: 50%;
		display: none;
		box-sizing: border-box;
		animation: ova_dir_rotation 1s linear infinite;
		&.is-active {
			display: inline-block;
		}
	}
}

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