/*
*
* Clients
*/
.clients-classic {
	text-align: center;
	padding: 20px 15px;
	border-bottom: 1px solid #ebebeb;
}

.clients-classic-figure {
	display: block;
}

.clients-classic-figure img {
	transition: all .3s ease;
	will-change: transform;
}

.clients-classic-wrap .row + .row {
	margin-top: 0;
}

@media (min-width: 992px) {
	.desktop .clients-classic-wrap .row > div:first-child .clients-classic:hover img {
		transform: translate3d(-20px, 0, 0);
	}
	.desktop .clients-classic-wrap .row > div:last-child .clients-classic:hover img {
		transform: translate3d(20px, 0, 0);
	}
}

@media (min-width: 576px) {
	.clients-classic {
		border-bottom: none;
	}
	.clients-classic-wrap {
		position: relative;
		padding: 20px 15px;
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.03);
	}
	.clients-classic-wrap::before {
		position: absolute;
		content: '';
		top: 45px;
		bottom: 45px;
		left: 50%;
		width: 1px;
		background: #ebebeb;
	}
	.clients-classic-wrap .row {
		position: relative;
	}
	.clients-classic-wrap .row::before {
		display: none;
		position: absolute;
		content: '';
		top: 0;
		left: 30px;
		right: 30px;
		height: 1px;
		background: #ebebeb;
	}
	.clients-classic-wrap .row + .row::before {
		display: block;
	}
}

@media (min-width: 768px) {
	.clients-classic {
		padding: 30px 50px;
	}
	.clients-classic-wrap {
		padding: 25px 30px;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.clients-classic {
		padding: 30px 15px;
	}
	.clients-classic-wrap {
		padding: 30px 15px;
	}
}

.bg-gray-100 .clients-classic-wrap {
	background: #ffffff;
}

@media (min-width: 576px) {
	.bg-gray-100 .clients-classic-wrap {
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.07);
	}
}

.clients-modern {
	position: relative;
	display: block;
	max-width: 220px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid rgba(225, 225, 225, 0.3);
	transition: all .3s ease-in-out;
}

.clients-modern::before, .clients-modern::after {
	position: absolute;
	content: '';
	border-style: solid;
	border-color: transparent;
	pointer-events: none;
}

.clients-modern::before {
	border-width: 1px 1px 0 0;
	top: -1px;
	right: 100%;
	bottom: 100%;
	left: -1px;
	transition: all .15s ease-in-out .3s, right .15s linear .45s, bottom .15s linear .3s;
}

.clients-modern::after {
	border-width: 0 0 1px 1px;
	top: 100%;
	right: -1px;
	bottom: -1px;
	left: 100%;
	transition: all .15s ease-in-out 0s, left .15s linear .15s, top .15s linear .0s;
}

.clients-modern:hover::before, .clients-modern:hover::after {
	border-color: #ffffff;
}

.clients-modern:hover::before {
	right: -1px;
	bottom: -1px;
	transition-delay: 0s, 0s, .15s;
}

.clients-modern:hover::after {
	top: -1px;
	left: -1px;
	transition-delay: .3s, .3s, .45s;
}

.clients-creative {
	position: relative;
	display: block;
	max-width: 270px;
	margin-left: auto;
	margin-right: auto;
	background: #ffffff;
	border: 1px solid #e1e1e1;
	transition: all .3s ease-in-out;
}

.clients-creative::before, .clients-creative::after {
	position: absolute;
	content: '';
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	transition: color .1s ease, transform .3s ease;
	will-change: transform;
}

.clients-creative::before {
	transform: scaleX(0);
}

.clients-creative::after {
	transform: scaleY(0);
}

.clients-creative img {
	width: 100%;
	will-change: transform;
	transition: all .3s ease;
}

@media (min-width: 992px) {
	.desktop .clients-creative:hover {
		border-color: transparent;
	}
	.desktop .clients-creative:hover::before, .desktop .clients-creative:hover::after {
		transform: none;
	}
	.desktop .clients-creative:hover::before {
		border-color: #57a4e0 transparent #57a4e0 transparent;
	}
	.desktop .clients-creative:hover::after {
		border-color: transparent #57a4e0 transparent #57a4e0;
	}
	.desktop .clients-creative:hover img {
		transform: scale(0.9);
	}
}

.clients-jean {
	display: block;
}

.clients-jean img {
	transform: none;
	transition: all .3s ease;
	will-change: transform;
}

@media (min-width: 992px) {
	.desktop .clients-jean:hover img {
		transform: translate3d(0, -10px, 0);
	}
	.desktop .owl-style-9 .owl-stage-outer:hover .owl-item .clients-jean {
		opacity: .5;
	}
	.desktop .owl-style-9 .owl-stage-outer:hover .owl-item .clients-jean:hover {
		opacity: 1;
	}
}