/* Clients */
.thb-client-row {
	&.has-border {
		.thb-client {
			border: 1px solid $black;
		}
		.thb-client {
			margin-right: -1px;
			margin-bottom: -1px;
		}
		.slick {
			.slick-list {
				padding: 0 1px 1px 0 !important;
			}
		}
		&.thb-opacity.with-accent {
			.thb-client {
				&:hover {
					border-color: $accent;
				}
			}
		}
	}
	
	&.thb-opacity {
		.thb-client {
			img {
				will-change: opacity;
				opacity: 0.6;
			}
			&:hover {
				img {
					opacity: 1;
				}
			}
		}
		&.with-accent {
			.thb-client {
				@extend .quick-transition;
				&:hover {
					background: $accent;
				}
			}
		}
	}
	&.thb-grayscale {
		.thb-client {
			img {
				will-change: filter;
				@include filter(grayscale(100%));
			}
			&:hover {
				img {
					@include filter(grayscale(0%));
				}
			}
		}
	}
	.thb-client {
		img {
			display: block;
			margin: 0 auto;
			@extend .quick-transition;
		}
		a:not(.button) {
			display: block;
		}

	}
	.style3 {
		.thb-client {
			&:hover {
	      .client-title {
	    		opacity: 1;
	    		box-shadow: 0 -3px 0px rgba($black, 1);
	    	}
	    }
		}
    .client-title {
    	display: block;
    	font-size: 16px;
    	text-align: left;
    	line-height: 1;
    	padding: 28px 0;
    	opacity: 0.8;
    	width: 100%;
    	color: $black;
    	box-shadow: 0 -1px 0px rgba($black, 0.3);
    	@extend .quick-transition;
    }

  }

  .style4 {
    .thb-client {
      position: relative;
      z-index: 30;
      @include transform-style(preserve-3d);
      @include perspective(300px);
      &:hover {
        .button {
        	@include rotateX(0deg);
        	opacity: 1;
        }
        ~ .thb-client {
        	z-index: 25;
        }
        .accent-color {
          opacity: 0.1;
        }
      }
    }
    .style4-container {
      position: relative;
      z-index: 20;
      padding: 20%;
    }
    img {
      margin-bottom: 35px;
      @include transition(opacity .25s $transition);
    }

    .accent-color {
      background: $accent;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      @extend .quick-transition;
    }

    .client-title {
      display: block;
      font-weight: 400;
      margin: 0;
      text-align: center;
    }
    .button {
      border-radius: 0;
      text-transform: uppercase;
      width: 100%;
      position: absolute;
      top: 100%;
      width: 100%;
      font-size: 12px;
      opacity: 0;
      @include transform-origin(0,0);
      @include rotateX(-90deg);
      @include box-shadow(0 5px 20px rgba($black, 0.1));
    }

  }
}