// Client 1
.client_area{
	background: -webkit-linear-gradient(left, #4443c3 0%, #6616b1 100%);
	background: -o-linear-gradient(left, #4443c3 0%, #6616b1 100%);
	background: linear-gradient(to right, #4443c3 0%, #6616b1 100%);
	padding: 100px 0px;
	min-height: 440px;
	height: 440px;
	.client_img{
		margin-bottom:20px;
	 	height: 110px;
		width: 100%;
		background: #fff;
		overflow: hidden;
		a {	font-size: 0;
			text-align: center;
			img{ width: 70%;  }
		}
		@include transition(all,.3s,ease-in-out);
		@include boxshadow(0px, 6px, 10px, 0px, rgba(0, 0, 0, 0.1), false);
		&:hover{ transform:scale(1.1); }
	}
}

	// Client 2
.client_area_2{
	@extend .client_area;
	background: #00000059;
	.client_img { 
		overflow: hidden;
		border: 8px solid rgba(41, 48, 193, 1); }
}

	// Client 3
.client_area_3{
	@include gradient_bg_7(right);
	padding: 85px 0px 85px;
	height: auto;
	.wrapper{ margin: 0 15px; }
	.client_img{
		margin: 20px 0;
	 	height: 110px;
		width: 100%;
		background: #fff;
		overflow: hidden;
		a {	font-size: 0;
			text-align: center;
			img{ width: 70%;  }
		}
		@include transition(all,.3s,ease-in-out);
		@include boxshadow(0px, 6px, 10px, 0px, rgba(0, 0, 0, 0.1), false);
		&:hover{ transform:scale(1.1); }
	}
}
	
	// Client 4
.client_area_4{
	background: none; 
	padding: 0px 0px 100px;
	height: auto;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	.wrapper{ margin: 15px; }
	.client_img{
		margin: 0;
	 	height: 100px;
		width: 100%;
		border-radius: 5px;
		background: #fff;
		overflow: hidden;
		a {	font-size: 0;
			text-align: center;
			img{ width: 70%; }
		}
		@include transition(all,.3s,ease-in-out);
		@include boxshadow(0px, 6px, 10px, 0px, rgba(0, 0, 0, 0.1), false);
		&:hover{ transform:scale(1.1); }
	}
}

	// Client 5
.client_area_5{ 
	height: auto;
	padding-bottom: 80px;
	.wrapper{ margin: auto 20px; }
	.client_img{ 
		height: 100px;
		width: 100%;
		box-shadow: none;
		background: #fff;
		border-radius: 5px; 
		margin: 20px auto;
		overflow: hidden;
		@include transition(all,.3s,ease-in-out);
		&:hover{
			@include boxshadow(0px, 6px, 10px, 0px, rgba(0, 0, 0, 0.1), false);
			transform:scale(1.1);
		}
		a {	font-size: 0;
			text-align: center;
			img{  width: 70%; }
		}
	}
}

	// Client 6
.client_area_6{
	@extend .section_padding;
	background: none;
	height: auto;
	.wrapper{ margin: auto 15px;  }
	.client_img{
		margin: 20px auto;
	 	height: 100px;
		width: 100%;
		border-radius: 5px; 
		background: #fff;
		overflow: hidden;
		@include transition(all,.3s,ease-in-out);
		@include boxshadow(0px, 0px, 15px, 3px, rgba(0, 0, 0, 0.1), false);		
		&:hover{
			transform:scale(1.1);
			box-shadow: none;
		}
	}
	a {	font-size: 0;
		text-align: center;
		img{  width: 70%; }
	}

	.swiper-container{ padding-bottom: 30px; }
	.swiper-pagination-bullet {
		background: transparent;
	    border: 1px solid transparent;
	    padding: 10px;
	    position: relative;
	    @include transition(all,.3s,ease-in-out);
	    top: 10px;
	    opacity: 1;
	    &:after{
	    	background: #fff;
		    content: '';
		    width: 10px;
		    top: 5px;
		    left: 5px;
		    height: 10px;
		    border-radius: 50%;
		    position: absolute;
	    }
	}
	.swiper-pagination-bullet-active{ border: 1px solid #fff;}
}



	// Responsive
@media #{$medium_device}{
	.client_area{
		padding: 55px 0px;
		min-height: 350px;
		height: 350px;
	}
}
@media #{$tab_device}{
	.client_area{
		padding: 45px 0px;
		min-height: 350px;
		height: 350px;
		.client_img{ 
			height: 75px; 
			overflow: hidden;
		}
	}
	.client_area_2{
		.client_img{ 
			border: 4px solid #2930c1; 			
		overflow: hidden;
		}
	}
	.client_area_3{ padding: 45px 0px 45px; }
	.client_area_4{ padding: 0px 0px 60px; }
	.client_area_5{ padding-bottom: 40px; }
}
@media #{$small_mobile}{
	.client_area{
		height: auto;
		padding: 50px 0px 75px;
	.client_img a img{  width: 56%; } 
	}
	.client_area_3{
		padding: 35px 0px 35px;
		.wrapper{ padding: 0 35px; }
		.client_img a img {
			width: 56%;
		}
	}
	.client_area_4{
		padding: 0px 0px 50px;
		.wrapper{ padding: 0 35px; }
		.client_img{			
		overflow: hidden;
	 		a img{ width: 56%; }
		}
	}
	.client_area_5{ 
		padding-bottom: 20px;
		.wrapper{ padding: 0 35px; }
		.client_img{ 
			a img{ width: 56%; }
		}
	}
	.client_area_6{ 
		.wrapper{ padding: 0 35px; }
		.client_img{ 
			overflow: hidden;			
			a img{ width: 56%; }
		}
	}
}
@media #{$large_mobile}{
	.client_area_3{
		padding: 55px 0px 35px;
		.wrapper{ padding: 0; }
	}
	.client_area_4{
		padding: 0px 0px 35px;
		.wrapper{ padding: 0; }
	}
	.client_area_5{ 
		.wrapper{ padding: 0; }
	}
	.client_area_6{ 
		.wrapper{ padding: 0; }
	}
}