.counter-area{
	display: block;
	position: relative;
	background: #303030;
	overflow: hidden;
	vertical-align: middle;
	.content{
		display: block;
		padding: 67px 0;
		background: $primary-color;
		margin-right: 45px;
		@include res(m480){text-align: center;padding: 50px 0;margin: 0;}
		&:before{
			content:'';
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0px;
			width:90px;
			margin-right: -30px;
			background: $primary-color;
			-webkit-clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
			clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
			@include res(m992){display: none;}
		}
		&:after{
			content: '';
			position: absolute;
			right: 100%;
			margin-right: -15px;
			top: 0;
			bottom: 0;
			left: -500px;
			background:$primary-color;
			@include res(m992){margin: 0;right: -500px;}

		}
		p{
			font-size: 18px;
			color: #fff;
			margin: 0 0 15px;
			font-weight: 400;
			position: relative;
			z-index: 999;
		}
		h2{
			font-family: $title-font;
			font-weight: 400;
			color: #fff;
			font-size: 60px;
			margin: 0;
			position: relative;
			z-index: 999;
		}
		span{
			position: absolute;
			top: 58px;
			z-index: 999;
			right: 85px;
			@include res(m480){display: none;}
			img{

			}
		}
	}
	.counter-list{
		margin-left: 70px;
		text-align: center;
		padding: 50px 0;
		@include res(m768){margin: 0;}
		ul{
			@include res(m480){overflow: hidden;vertical-align: middle;margin: -20px;}
			li{
				display: inline-block;
				padding: 0 12px;
				@include res(m480){width: 50%;float: left;padding: 20px;}
				span{
					display: inline-block;
					width: 95px;
					height: 95px;
					line-height: 93px;
					border:1px dashed #fff;
					position: relative;
					font-size: 30px;
					font-weight: 600;
					color: #fff;
					margin: 0 0 20px;
					@include border-radius(100%);
					&:after{
						content:'';
						position: absolute;
						left: 6px;
						top: 6px;
						right: 6px;
						bottom: 6px;
						border:1px dashed #fff;
						@include border-radius(100%);
					}
				}
				p{
					margin: 0;
					text-transform: capitalize;
					color: #fff;
				}
				&:first-child{
					padding-left: 0;
				}
				&:last-child{
					padding-right: 0;
				}
			}
		}
	}
}
.family-area{
	position: relative;
	background: url(images/family/bg.jpg);
	&:after{
		background:rgba(0, 0, 0, 0.9);
	}
	.container{
		position: relative;
		z-index: 999;
	}
	.section_heading{
		h2{
			color: #fff;
		}
	}
	.family-tabbox{
		.nav{
			border:none;
			padding: 0;
			margin: 0 0 60px;
			text-align: center;
			display: block;
			li{
				display: inline-block;
				padding: 0 36px;
				margin: 0;
				position: relative;
				background: transparent;
				float: initial;
				&:after{
					content:'';
					position: absolute;
					left: 0;
					right: 0;
					top:50%;
					height: 1px;
					background: rgba(255, 255, 255, 0.3);
					z-index: -1;
				}
				&:before{
					content: '\f004';
					position: absolute;
					right: -14px;
					top: 50%;
					margin-top: -10px;
					z-index: 99;
					font-size: 30px;
					font-family: fontawesome;
					color:$primary-color;
				}
				a{
					padding: 0;
					margin: 0;
					display: block;
					border:none;
					overflow: hidden;
					vertical-align: middle;
					@include border-radius(100%);
					img{
						width: 100%;
					}
				}
				&.active{
					a{

					}
				}
				&:first-child{
					padding-left: 0;
				}
				&:last-child{
					padding-right: 0;
					&:before{
						display:none;
					}
				}
			}
		}
		.tab-content{
			.familyslider{
				margin: 1px;
				overflow: hidden;
				vertical-align: middle;
				.item{
					padding: 20px 0 30px;
					display: block;
					background: transparent;
					position: relative;
					text-align: center;
					margin: -1px;
					border:1px solid rgba(255, 255, 255, 0.1);
					@include transition($transition);
					figure{
						display: block;
						width: 100px;
						height: 100px;
						margin: 0 auto 20px;
						overflow: hidden;
						vertical-align: middle;
						@include border-radius(100%);
						@include transition($transition);
						img{
							width: 100%;
						}	
					}
					.content{
						h2{
							font-family: $title-font;
							font-weight: 400;
							color: $primary-color;
							margin: 0 0 5px;
						}
						p{
							margin: 0;
							color: #fff;
						}
					}
					&:hover{
						background: rgba(255, 255, 255, 0.2);
					}
					&.br_rn{
						border-right: none;
					}
					&.love{
						&:after{
							content: '\f004';
							position: absolute;
							right: -20px;
							bottom: -15px;
							margin-top: -10px;
							z-index: 99;
							font-size: 40px;
							font-family: fontawesome;
							color:$primary-color;
							@include res(m992){display: none;}
						}
					}
				}
			}
		}
	}
}
.love-story{
	display: block;
	position: relative;
	@include res(m320){margin: 0 0 40px;}
	.section_heading{
		@include res(m992){margin: 0;padding: 0 0 60px;}
	}
	.love-storys{
		display: block;
		@include res(m992){margin: -50px 0;}
		.story-list{
			position: relative;
			display: block;
			overflow: hidden;
			vertical-align: middle;
			&:after{
				content:'';
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: 0 auto;
				background: #e5e5e5;
				width: 3px;
				z-index:1;
				@include res(m992){display: none;}
			}
			.story{
				margin: 80px 0 50px;
				display: block;
				position: relative;
				padding-bottom: 50px;
				@include res(m992){margin-top: 130px;}
				@include res(m768){margin-top: 120px;}
				@include res(m480){margin-top: 110px;}
				@include res(m320){margin: 30px 0 0;}
				&:last-child{
					padding-bottom:0;
				}
				&.lefts{
					padding-right: 100px;
					@include res(m992){padding: 0;}
					&:after{
						content:'\f004';
						font-family: fontawesome;
						font-size: 18px;
						position: absolute;
						text-align: center;
						right: -30px;
						top: 5px;
						width: 60px;
						height: 60px;
						line-height: 60px;
						z-index: 9;
						background: $primary-color;
						color: #fff;
						@include border-radius(100%);
						@include transition($transition);
						@include res(m992){display: none;}
					}
					&:before{
						content: '';
						position: absolute;
						height: 24px;
						width: 26px;
						right: 25px;
						top: 23px;
						background: $primary-color;
						-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
						clip-path: polygon(100% 0, 0 50%, 100% 100%);
					}
				}
				&.rights{
					padding-left: 100px;
					@include res(m992){padding: 0;}
					&:after{
						content:'\f004';
						font-family: fontawesome;
						font-size: 18px;
						position: absolute;
						text-align: center;
						left: -30px;
						top: 5px;
						width: 60px;
						height: 60px;
						line-height: 60px;
						z-index: 9;
						background: $primary-color;
						color: #fff;
						@include border-radius(100%);
						@include transition($transition);
						@include res(m992){display: none;}
					}
					&:before{
						content: '';
						position: absolute;
						height: 24px;
						width: 26px;
						left: 25px;
						top: 23px;
						background: $primary-color;
						-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
						clip-path: polygon(0 0, 0% 100%, 100% 50%);
					}
				}
				&.first{
					margin-top: 200px;
					@include res(m992){margin-top: 130px;}
					@include res(m768){margin-top: 120px;}
					@include res(m480){margin-top: 110px;}
					@include res(m320){margin-top: 0px;}

				}
				.storys{
					display: block;
					position: relative;
					background: #fff;
					margin: 4px;
					@include box-shadow(0 0 12px rgba(0, 0, 0, 0.15));
					.top-fig{
						display: block;
						padding: 0 30px;
						figure{
							width: 160px;
							height: 160px;
							position: absolute;
							overflow: hidden;
							vertical-align: middle;
							margin: -80px 0 0;
							@include border-radius(100%);
							@include res(m320){display: none;}
							img{
								width: 100%;
								@include transition($transition);
							}
						}
						.con{
							margin-left:160px;
							display: block;
							padding: 18px 0;
							padding-left: 30px;
							@include res(m320){margin-left: 0;}
							p{
								margin: 0 0 5px;
							}
							h2{
								color: $primary-color;
								font-family: $title-font;
								font-weight: 400;
								margin: 0;
							}
						}
					}
					.content{
						display: block;
						text-align: center;
						border-top: 1px solid #dedede;
						border-bottom: 5px solid $primary-color;
						padding: 30px 50px;
						margin: 0 0 20px;
					}
					&:hover{
						figure{
							img{
								filter: blur(8px);
							}
						}
					}
				}
				&:hover{
				}
			}
		}
	}
}
.registery-area{
	position: relative;
	background: url(images/banner/1.jpg);
	&:after{
		background:rgba(0, 0, 0, 0.9);
	}
	.container{
		position: relative;
		z-index: 999;
	}
	.section_heading{
		h2{
			color: #fff;
		}
	}
	.reg-img{
		figure{
			display: block;
			position: relative;
			@include res(m768){margin: 0 0 40px;}
			img{
				width: 100%;
			}
		}
	}
	.reg-con{
		.con{
			@include res(m768){text-align: center;margin: 0 0 20px;}
			span{
				color: $primary-color;
			}
			h2{
				font-family: $title-font;
				font-weight: 400;
				margin: 0 0 18px;
				color: #fff;
				&:first-child{
					margin: 0 0 10px;
				}
			}
			p{
				margin: 0 0 18px;
				opacity: 0.7;
				color: #fff;
				&:first-child{
					opacity:1;
				}
			}
		}
		.reg-slider{
			margin: -15px -14px;
			.list-slider{
				display: block;
				width: 100%;
				a{
					display: block;
					padding: 15px 14px;
					img{
						width: 100%;
					}
				}
			}
		}
			
	}

}