/* TESTIMONIAL */
.yolo-testimonial {
	// Slider Pro
	&.slider-pro {
		.sp-mask.sp-grab,.sp-grabbing{
			@media (max-width:480px){
				height: 550px !important;
			}
		}
		.sp-slides {
			.sp-slide {
				padding: 75px;
				background-color: #f6f6f6;
				.testimonial-content {
				    padding-left: 50px;
				    position: relative;
				    p{
				    	color: lighten(@text_color, 20%);
				    }
				    hr {
				    	width: 60px;
				    	position: absolute;
					    left: 0;
					    margin-left: 50px;
					    border-top: 1px solid lighten(@text_color, 50%); 
				    }
	    			&:before {
	    				content: "\f10d";
	    				font-family: fontawesome;
	    				position: absolute;
	    				top: 0;
	    				left: 0;
	    				font-size: 36px;
    					line-height: 1.3;
    					color: @primary_color;
	    			}
	    			@media(max-width:480px){
	    				padding-top: 45px;
						padding-left: 0;
						&:before{
							left: 50%;
							.translateX(-50%);
						}
					}
				}
				.testimonial-info {
				    padding-left: 50px;
				    margin-top: 65px;
					img {
						width: 60px;
						float: left;
					}
					.testimonial-meta {
						margin-left: 80px;
						h3 {
							text-transform: uppercase;
							font-weight: bold;
							margin-bottom: 10px;
							font-size: 18px;
						}
						p {
							color: lighten(@text_color, 20%);
							margin: 0;
						}
					}
					@media(max-width:480px){
						padding-left: 0;
					}
				}
				@media (max-width:768px){
					padding: 30px;
				}
				@media(max-width:480px){
					height: 550px !important;
				}
			}
		}
		.sp-selected-thumbnail{
			&:before{
				display: none;
				border-color: @primary_color !important;
			}
			&:after{
				display: none;
				border-right-color: @primary_color !important;
			}
		}
		// Thumbnails
		.sp-thumbnails {
			.sp-thumbnail {
				width: 100%;
	    		height: 100%;
	    		left: 28px;
	    		//padding: 10px 0;
	    		.sp-thumbnail-inner{
	    			position: relative;
					background-size: cover!important;
					width: 100%;
		    		height: 100%;
	    		}
				.testimonial-info {
					z-index: 2;
					position: absolute;
				    top: 50%;
				    left: 0;
				    margin-left: 20px;
				    .translateY(-50%);
					img {
						width: 90px;
						float: left;
					}
					.testimonial-meta {
						z-index: 2;
						margin-left: 120px;
						h3 {
							text-transform: uppercase;
							font-weight: bold;
							margin-bottom: 5px;
							font-size: 18px;
							.transition( all 0.35s ease);
							margin-top: 0;
						}
						p {
							margin: 0;
							.transition( all 0.35s ease);
							color: lighten(@text_color, 20%);
						}
					}
				}
				.testimonial-overlay {
					position: absolute;
				    width: 100%;
				    height: 100%;
				    &:before{
				    	content: '';
				    	right: -64%;
				    	top: 0;
				    	position: absolute;
				    	background-color: fade(@black, 50%);
				    	width: 100%;
				    	height: 100%;
				    	.skew( -30deg, 0);
				    	.transition( all 0.35s ease);
				    }
				    i{
				    	position: absolute;
					    left: 65%;
					    top: 50%;
					    transform: translate(-65%,-50%);
					    .transition( all 0.35s ease);
					    &:before{
					    	font-size: 18px;
						    color: white;
						    height: 50px;
						    width: 50px;
						    background-color: @primary_color;
						    display: block;
						    line-height: 50px;
						    border-radius: 100%;
						    text-align: center;
					    }
				    }
				}
				&:hover{
					.testimonial-overlay{
						&:before{
							right: 0%;
							.skew(0,0);
						}
						i{
							left: 75%;
							transform: translate(-75%,-50%);
						}
					}
					.testimonial-info{
						.testimonial-meta{
							h3{
								color: @white;
							}
							p{
								color: @white;
							}
						}
					}
				}
			}
			& .sp-thumbnail-container{
				margin-top: 8px;
				margin-bottom: 8px;
			}
			& .sp-thumbnail-container.sp-selected-thumbnail{
				.sp-thumbnail{
					.testimonial-overlay{
						&:before{
							right: 0%;
							.skew(0,0);
						}
						i{
							left: 75%;
							transform: translate(-75%,-50%);
						}
					}
					.testimonial-info{
						.testimonial-meta{
							h3{
								color: @white;
							}
							p{
								color: @white;
							}
						}
					}
				}
				
			}
			@media (max-width: 991px){
				display: none;
			}
		}
		// Controls
		.testimonial-control {
			position: absolute;
		    height: 40px;
		    width: 90px;
		    bottom: 55px;
	    	left: 100px;
		    z-index: 999;
		    .nav_prev, .nav_next {
		    	width: 40px;
		    	height: 40px;
		    	display: inline-block;
		    	background-color: @white;
		    	text-align: center;
	    		line-height: 40px;
	    		.box-shadow(0px 0px 5px 1px rgba(0, 0, 0, 0.11));
	    		.transition( all 0.35s ease);
	    		&:hover{
	    			color: @primary_color;
	    		}
		    }
		    @media(max-width: 480px){
		    	bottom: 10px;
		    }
		}
	}
	// Slider Pro 2
	&.slider-pro-2 {
		position: relative;
		.sp-slides {
			.sp-slide {
				.testimonial-top {	
					padding: 10px;
					.testimonial-top-overlay {
						background: @white;
						height: 450px;
						.testimonial-top-content {
							margin: 0;
							padding-top: 115px;
							.testimonial-image {
								text-align: center;
								@media(max-width:480px){
									display: none;
								}
							}
							.testimonial-content {
								.testimonial-meta {
									h3 {
										text-transform: uppercase;
									}
									span:first-child {
										text-transform: uppercase;
									}
								}	
								position: relative;
								&:before {
									content: "\f10d";
									position: absolute;
									left: 50%;
								    top: -75px;
								    font-size: 30px;
								    font-family: fontawesome;
								    opacity: 0.3;
								    .translateX(-50%);
								    
								}
								@media(max-width:768px){
									text-align: center;
									margin-top: 20px;
								}
								@media(max-width:480px){
									&:before{
										display: none;
									}
								}
							}
							@media(max-width:768px){
								padding-top: 60px;
							}
							@media(max-width:480px){
								padding-top: 20px;
							}
						}
					}
				}
				.testimonial-bottom {
					.testimonial-meta {
						margin: 50px 0;
					}
				}
			}
		}
		.sp-selected-thumbnail{
			&:before{
				border-color: @primary_color !important;
			}
			&:after{
				border-bottom-color: @primary_color !important;
			}
		}
		.sp-thumbnails-container {

		}
		.testimonial-control {
			display: none;
			top: -70px;
			z-index: 10;
			position: absolute;
			left: 50%;
			.translateX(-50%);
			color: #222222;
			&:hover {
				cursor: pointer;
			}
			.testimonial-nav {
				display: inline-block;
				margin: 0 5px;
			    .box-shadow(1px 1px 1px 1px rgba(0, 0, 0, 0.1));
			    i {
			    	padding: 15px;
					background: #ffffff;
			    }
			}
		}
	}
	// Carousel
	&.testimonial-carousel {
		> i{
			font-size: 36px;
			color: @primary_color;
		}
		text-align: center;
		background: @white;
		padding: 55px 100px;
		position: relative;
		.testimonial-list {
			padding: 0;
		    margin: 20px 0 0 0;
		    list-style: none;
		    list-style-type: none;
		    .testimonial-item {
		    	.testimonial-content{
		    		position: relative;
		    		margin-bottom: 0;
		    		padding-bottom: 30px;
		    		color: lighten(@text_color, 20%);
		    		&:before{
		    			width: 60px;
		    			height: 2px;
		    			background-color: @border_color;
		    			position: absolute;
		    			bottom: 0;
		    			content: '';
		    			left: 50%;
    					.translate(-50%,0);
		    		}
		    	}
		    	.testimonial-title {
		    		text-transform: uppercase;
		    		color: #222222;
		    		font-size: 16px;
		    		margin-top: 30px;
		    		font-weight: bold;
		    		margin-bottom: 5px;
		    	}
		    	.testimonial-position {
		    		text-transform: uppercase;
		    		margin-bottom: 0px;
		    		color: lighten(@text_color, 20%);
		    	}
		    	.testimonial-special {
		    		margin-bottom: 0px;
		    		display: none;
		    	}
		    }
		}
		.testimonial-control {
			position: absolute;
			bottom: -20px;
			left: 50%;
			.translateX(-50%);
			color: @text_color;
			&:hover {
				cursor: pointer;
			}
			.testimonial-nav {
				display: inline-block;
				margin: 0 5px;
				z-index: 99;
			    .box-shadow(1px 1px 1px 1px rgba(0, 0, 0, 0.1));
			    i {
			    	padding: 15px;
					background: @white;
			    }
			}
		}
		@media(max-width: 480px){
			padding: 40px 20px;
		}
	}
	// Carousel 2
	&.testimonial-carousel-2 {
		text-align: center;
		padding: 40px 100px;
		position: relative;
		.owl-controls{
	        margin-top: 75px;
	        .owl-pagination{
	          .owl-page{
	            height: 30px;
	            span{
	              width: 25px;
	              height: 2px;
	              margin: 0 5px;
	              margin-top: 14px;
	              background-color:lighten(@text_color, 50%);
	              .transition(all 0.35s ease);
	            }
	            &:hover{
	              span{
	                background-color: @text_color;
	              }
	            }
	          }
	          .owl-page.active{
	            span{
	              background-color: @text_color;
	            }
	          }
	        } 
	      }
		.testimonial-list {
			padding: 0;
		    margin: 0;
		    list-style: none;
		    list-style-type: none;
		    .testimonial-item {
		    	&:hover {
		    		.testimonial-position {
		    			&:before {
		    				width: 10%;
		    			}
		    		}
		    	}
		    	p {
		    		z-index: 2;
		    		margin: 0 auto;
		    		margin-top: 40px;
		    		position: relative;
		    		width: 80%;
		    		&:before{
		    			content: "\f10d";
		    			font-family: fontawesome;
		    			position: absolute;
		    			top: 50%;
		    			left: 50%;
		    			.translate(-50%,-50%);
		    			font-size: 36px;
		    			color: lighten(@text_color, 60%);
		    			z-index: -1;
		    		}
		    	}
		    	.testimonial-title {
		    		text-transform: uppercase;
		    		color: @text_color;
		    		font-weight: 700;
		    		font-size: 30px;
		    	}
		    	.testimonial-position {
		    		position: relative;
		    		text-transform: uppercase;
		    		font-size: 14px;
				    padding-bottom: 30px;
				    margin-top: 0;
		    		&:before {
		    			content: "";
		    			position: absolute;
		    			display: block;
		    			bottom: 0;
		    			left: 50%;
		    			-webkit-transform: translateX(-50%);
		    			-moz-transform: translateX(-50%);
		    			-o-transform: translateX(-50%);
		    			-ms-transform: translateX(-50%);
		    			transform: translateX(-50%);
		    			width: 5%;
		    			height: 1px;
		    			background: #000000;
		    			transition: width 0.2s;
		    		}
		    	}
		    	.testimonial-special {
		    		display: none;
		    		position: relative;
		    		
		    	}
		    }
		}
		.testimonial-control {
			&:hover {
				cursor: pointer;
			}
			.testimonial-nav {
				position: absolute;
				top: 50%;
				z-index: 99;
				.translate(0,-50%);
				color: @text_color;
				margin: 0 5px;
			    .box-shadow(1px 1px 1px 1px rgba(0, 0, 0, 0.1));
			    i {
			    	padding: 15px;
					background: @white;
			    }
			    &.nav_next{
			    	right: 20px;
			    }
			    &.nav_prev{
			    	left: 20px;
			    }
			}
		}
	}
}