.bannar-single{
	position: relative;
	display: block;
	width: 100%;
	background-color: #d4d4d4;
	overflow: hidden;
	outline: none;
	margin-bottom: calc(var(--huvaalt-padding));
	height: 400px;
	box-shadow: 0 2px 5px rgb(0, 0, 0, .2);
  	z-index: 1;
}


.bannar-img img{
	width: 100%;
}

.bannar-img{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	transform-origin: center !important;
	transition-duration: .5s;
	z-index: -2;
}


.bannar-img-in{
	transition-duration: .5s;
	transform: scale(var(--bannar-zoom));
}

.bannar-brightness{
	filter: brightness(var(--bannar-light));
}

.bannar-title{
	display: block;
	position: absolute;
	width: 100%;
	font-size: var(--bannar-title-font-size);
	color: var(--bannar-tittle-color);
	padding: 16px 15px;
	bottom: 0;
	text-align: var(--bannar-title-align);
	transition-duration: .5s;
	z-index: -1;
}

.bannar-title-in{
	transition-duration: .5s;
	bottom: 20px;
}

.bannar-title-bc{
	position: absolute;
	background-color: var(--bannar-bc-color);
	opacity: var(--bannar-title-opacity);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 0;
}

.bannar-title p{
	position: relative;
	z-index: 1;
	margin-bottom: 0;
}


.tusul-more{
	padding: 20px 10px;
	text-align: center;
}

.tusul-more a{
	padding: 10px 20px;
	background-color: var(--tusulmore-btn-bc);
	color: #fff;
}

.tusul-more a:hover{
	background-color: var(--tusulmore-btn-bc-hover);;
	color: #fff;
}

.page-link{
	color: var(--pagination-color);
}

.page-link:hover{
	color: var(--pagination-color);
}
.pagin{
	margin-top: 20px;
}

@media only screen and (max-width: 991px) {
	.bannar-title{
 		padding: 15px;
 		font-size: calc(var(--bannar-title-font-size) * 0.95);
 		line-height: 1.1;
 	}
}

@media only screen and (max-width: 768px) {
	.bannar-title{
 		padding: 13px;
 		font-size: calc(var(--bannar-title-font-size) * 0.95);
 	}
}