 <!-- team Area Start -->
 <?php
 if(get_theme_mod('team_area_disable') != 'on' ){?>
 	<?php
 	if( get_theme_mod('team_areaTpadding',true) ) {
 		$team_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('team_areaTpadding')).';';
 	}
 	if( get_theme_mod('team_areaBpadding',true) ) {
 		$team_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('team_areaBpadding')).';';
 	}
 	?>
 	<div  class="team-area" id="team" style="<?php echo esc_attr($team_areaBpadding); ?>""<?php echo esc_attr($team_areaTpadding); ?>">
 		<div class="ovly"></div>
 		<?php
	 		$team_title = get_theme_mod('team_title_title', 'OUR TEAM');

 		?>
 		<div class="container">
			<div class="row justify-content-center">
				  <div class="section-title">
				    <?php if($team_title ){ ?>
					    <h2><?php echo ($team_title);  ?></h2>
			        <div class="border1"></div>
		         <?php }?>
		      </div>
			</div>
		</div>

		<div class="container">
		 	<!-- <div class="gf-container">  -->
			  	 <!-- <div class="owl-carousel owl-theme"> -->
			 				<?php
			 				$showStatic = true;
			 				$cols = get_theme_mod('team_area_npp_count', 3);
			 				$cols++;
			 				switch($cols){
			 					case 1:
								$colCls = 'col-md-12 col-sm-12 col-xs-12';
								break;
								case 2:
								$colCls = 'col-md-6 col-sm-6 col-xs-12';
								break;
								case 3:
								case 5:
								case 6:
								case 9:
								case 11:
								case 13:
								case 15:
								$colCls = 'col-md-4 col-sm-6 col-xs-12';
								break;
								default:
								$colCls = 'col-md-3 col-sm-6 col-xs-12';
								break;
			 				}
			 				for( $i = 1; $i <= $cols; $i++ ){
			 					$team_area_page_id = get_theme_mod('team_area_page'.$i);
			 					$team_area_page_icon = get_theme_mod('team_area_page_icon'.$i);
			 					if($team_area_page_id){
			 						$showStatic = false;
			 						echo teamShortCode($team_area_page_id, $isCustomizer=true, $i);
			 					}
			 				}
			 				if($showStatic === true){
			 					for( $i = 1; $i <= $cols; $i++ ){ ?>


			 				<!-- <div class="item"> -->
			 						<div class="<?php echo $colCls;?> single-team ">
			 							<div team-match-height="groupName" class= "our-team">
			 								<div class="single-team-img">
													<img src="<?php echo esc_url(get_template_directory_uri().'/images/Team1.jpg');?>" alt="team" />
											</div>
											<div class="clearfix"></div>
											<div class="team-con">
												<div class="team-text">
													<h4 class="inner-area-title wow fadeInLeft">Kirk Mathison</h4>
													<div class="team-designation wow fadeInLeft">CEO</div>
													<p>It is a long established fact that a reader will be
													distracted by the to readable a page at its layout.</p>

													<div class="team-social-icon">
					 									<a target="_blank" href="http://facebook.com" class="wow fadeInDown" data-wow-duration="1s"><i class="fa fa-facebook"></i></a>
														<a target="_blank" href="http://twitter.com" class="wow fadeInDown" data-wow-duration="2s"><i class="fa fa-twitter"></i></a>
														<a target="_blank" href="http://instagram.com" class="wow fadeInDown" data-wow-duration="3s"><i class="fa fa-instagram"></i></a>
														<a target="_blank" href="http://www.linkedin.com" class="wow fadeInDown" data-wow-duration="3s"><i class="fa fa-linkedin"></i></a>

													</div>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
			 						</div>
			 				 <!-- </div>   -->
			 						<?php
			 					}
			 				} ?>
				 		 <!-- </div> -->
				 	<!-- </div> -->
				<div class="clearfix"></div>
		</div>
 </div>
<script>
	var matchHeight = function () {

	function init() {
		eventListeners();
		matchHeight();
	}

	function eventListeners(){
		$(window).on('resize', function() {
			matchHeight();
		});
	}

	function matchHeight(){
		var groupName = $('[team-match-height]');
		var groupHeights = [];

		groupName.css('min-height', 'auto');

		groupName.each(function() {
			groupHeights.push($(this).outerHeight());
		});

		var maxHeight = Math.max.apply(null, groupHeights);
		groupName.css('min-height', maxHeight);
	};

	return {
		init: init
	};

} ();

$(document).ready(function() {
	matchHeight.init();
});

</script>

 <?php }
