/*
 * @package MatrixAddons
 * @subpackage trainify
 * @since 1.0.0
 */

.trainify-testimonial-wrapper{
	padding:60px 0;

	@media (max-width: 1200px){
		padding-left:15px;
		padding-right:15px;
	}

	position:relative;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	.testimonial-overlay{
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:1;
		opacity:0.7;
		position:absolute;
	}
	

	.testimonial-container{
		padding:0;
		margin:0;
	}
	.widget{
		z-index:2;
		position:relative;
	}

}

.trainify-testimonial-list{
	margin:0;
	list-style:none;

	@media (max-width: 1200px){
		margin: 0 -7.5px;
	}

	.client-logo-details-wrap{
		width: 100%;
	    position: relative;
	    margin-top: -50px;
	    padding-left: 28px;
	    box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    clear: both;

	    @media (max-width: 480px){
	    	padding-left:0;
	    }

	}
	.client-logo{
	    width: 100px;
	    height: 100px;
	    border: 4px solid #fff;
	    border-radius: 50%;
	    -webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    overflow: hidden;
	    background-color: #f6f6f6;
	    position:relative;

	    img{
	    	position: absolute;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-50%);
		    max-width: 100%;
		    object-fit: cover;
	    }
	}
	.client-details{
		display:inline-block;
		left:140px;
		margin-bottom: 0;
	    background-color: #0056D2;
	    color: #fff;
	    padding: 7px 10px;
	    line-height: 1;
	    position:absolute;
	    top:50%;
	    transform:translateY(-50%);

		span{
			display: inline-block;
		    font-weight:400;
		    vertical-align: middle;
		    font-style:italic;
		    position:relative;
		}

		.client-position{
			padding-left: 17px;
		    position: relative;
		    margin-left: 10px;

			&:before{
				content:'/';
				position:absolute;
				left:0;
				top:0;
			}
		}


		@media (max-width: 480px){
	    	left:110px;
	    }


	}
	.client-words{
	    width: 100%;
	    background: #f6f6f6;
	    padding: 30px 30px 60px;
	    box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    position: relative;

	    &:before{
			display: inline-block;
		    position: absolute;
		    top: 24px;
		    left: 27px;
		    font-size: 46px;
		    content: "\201C";
		    color: #0056D2;
		    text-align: center;
		    font-family: "Arial", "sans-serif";
		    line-height: 1;
		}

		p{
			font-style: italic;
			line-height:1.3;
			font-weight: normal;
			color: #666;
			padding-left: 20px;
			margin: 0;
		}
	}
	li{
		float:left;
		position:relative;
		padding: 0 7.5px;
		margin-bottom:20px
		
	}
	&.column1{
		li{
			width:100%;

			&:last-child{
				margin-bottom:0;
			}
		}
	}

	&.column2{
		li{
			width:50%;

			&:nth-of-type(2n+1){
				clear:left;
			}

			&:nth-last-of-type(1),
			&:nth-last-of-type(2){
				margin-bottom:0;
			}

			@media screen and (max-width:768px){
				width:100%;

				&:nth-last-of-type(2){
					margin-bottom:20px;
				}
			}
		}
	}

	&.column3{
		li{
			width:33.33%;

			&:nth-of-type(3n+1){
				clear:left;
			}

			&:nth-last-of-type(1),
			&:nth-last-of-type(2),
			&:nth-last-of-type(3){
				margin-bottom:0;
			}

			@media screen and (max-width:864px){
				width:100%;

				&:nth-last-of-type(2), &:nth-last-of-type(3){
					margin-bottom:20px;
				}
			}
		}
	}
	&:after{
		content:"";
		clear:both;
		display:block;
	}
}

.testimonial-container{
	padding:15px;
	margin:0 0 15px;
	position:relative;
}