/* 
    Created on : 23.08.2016, 11:06:07
    Author     : DFD
	Styles for : Client Logo shortcode
*/

.dfd-client-logo-wrap {
	.rel();
	&.enable-delimiter {
		.columns-with-border {
			border-left: 1px solid @border-color;
			border-top: 1px solid @border-color;
			&.no-top-border {
				border-top: none;
			}
			&.no-left-border {
				border-left: none;
			}
		}
	}
	&.enable-main-border .dfd-client-logo-list {
		border: 1px solid @border-color;
	}
	.columns-1 {
		width: 100%;
	}
	.columns-2 {
		width: 50%;
	}
	.columns-3 {
		width: 33.333%;
	}
	.columns-4 {
		width: 25%;
	}
	.columns-5 {
		width: 20%;
	}
	.columns-6 {
		width: 16.6666%;
	}
	.dfd-item-offset {
		.rel();
		&:hover {
			z-index: 2;
		}
		.full-box-link {
			.abs();
			top: 0;
			right: -50px;
			bottom: 0;
			left: -50px;
			z-index: 3;
		}
	}
	.dfd-client-logo-item {
		.rel();
		text-align: center;
		padding: 50px 0;
		z-index: 1;
		.title-wrap {
			.dfd-content-title-big {
				font-size: 11px;
				text-transform: uppercase;
				line-height: 1.3;
				color: #313131;
			}
			.dfd-content-subtitle {
				font-size: 12px;
				color: #b5b5b5;
				line-height: 1.3;
			}
		}
		.title-wrap,
		.content-wrap,
		.description {
			width: 100%;
			color: #565656;
		}
		.thumb-wrap {
			padding: 0 30px;
			.transition(opacity .3s ease);
			img {
				.vertical-align();
				.block();
				margin: 0 auto;
			}
		}
		&:hover {
			z-index: 2;
			.title-wrap {
			}
			.content-wrap {
			}
		}
	}
	&.style-1,
	&.style-2 {
		&.enable-shadow {
			.dfd-client-logo-item {
				.dfd-shadow-wrap {
					.abs();
					right: -50px;
					left: -50px;
					background: transparent;
					visibility: hidden;
					.transition(~"background .3s ease, visibility .3s ease");
					&:before {
						content: "";
						.abs();
						top: 10px;
						bottom: 0;
						left: 20px;
						right: 20px;
						opacity: 0;
						visibility: hidden;
						.box-shadow(0px 15px 50px 0 transparent);
						z-index: -1;
						.transition(~"-webkit-box-shadow .3s ease, box-shadow .3s ease, opacity .3s ease, visibility .3s ease");
					}
				}
				&:hover {
					.dfd-shadow-wrap {
						background: #ffffff;
						visibility: visible;
						&:before {
							opacity: 1;
							visibility: visible;
							.box-shadow(0px 15px 50px 0 rgba(0,0,0,0.35));
							.transition-delay(.15s);
						}
					}
				}
			}
		}
	}
	&.style-2 {
		&.enable-shadow {
			.dfd-client-logo-item {
				.dfd-shadow-wrap {
					margin-top: -70px;
				}
			}
		}
	}
	&.style-1,
	&.style-3 {
		.dfd-client-logo-item {
			.title-wrap {
				.abs();
				bottom: 100%;
				padding-bottom: 25px;
				margin-bottom: -50px;
				opacity: 0;
				visibility: hidden;
				.transform(translateY(-30px));
				.transition(all .3s ease);
			}
			.description {
				.abs();
				top: 100%;
				padding-top: 25px;
				margin-top: -50px;
				opacity: 0;
				visibility: hidden;
				.transform(translateY(30px));
				.transition(all .3s ease);
			}
			&:hover {
				.title-wrap,
				.description {
					opacity: 1;
					visibility: visible;
					.transform(translateY(0));
				}
			}
		}
	}
	&.style-2,
	&.style-4 {
		.dfd-client-logo-item {
			.thumb-wrap {
				.transform(translateY(0));
				.transition(all .3s ease);
			}
			.content-wrap {
				.abs();
				top: 100%;
				margin-top: -50px;
				opacity: 0;
				visibility: hidden;
				.transition(~"opacity .3s ease, visibility .3s ease");
				.title-wrap {
					padding-top: 25px;
					.transform(translateY(0));
					.transition-transform(.3s ease);
				}
				.description {
					line-height: 2;
					padding-top: 15px;
					.transform(translateY(0));
					.transition-transform(.3s ease);
				}
			}
			&:hover {
				&.with-content {
					.thumb-wrap {
						.transform(translateY(-70px));
					}
				}
				.content-wrap {
					opacity: 1;
					visibility: visible;
					.title-wrap,
					.description {
						.transform(translateY(-70px));
					}
				}
			}
		}
	}
	&.style-3,
	&.style-4 {
		.dfd-client-logo-item {
			.thumb-wrap {
				.opacity(.5);
			}
			&:hover {
				.thumb-wrap {
					.opacity(1);
				}
			}
		}
	}
	&.style-3 {
		.dfd-client-logo-item {
			.title-wrap {
				.rel();
				bottom: 0;
				margin-bottom: 0;
			}
			.description {
				.rel();
				top: 0;
				margin-top: 0;
			}
		}
	}
	&.style-4 {
		.dfd-client-logo-item {
			.content-wrap {
				.rel();
				top: 0;
				margin-top: 0;
				.description {
					overflow: hidden;
					margin-top: 0;
				}
			}
		}
	}
}