//css testimonial image

.version-1 {
	.testimonial-image {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;


		.list-images {
			text-align: center;
			min-width: 20%;
			height: 100%;
			line-height: 224px;
			border-right: 1px solid rgba(255, 255, 255, 0.2);
			@media(max-width: 767px){
				line-height: 150px;
			}
			img {
			    opacity: .5;
			    -webkit-transition: all 500ms ease;
			    transition: all 500ms ease;
			    max-width: 100%;
			    display: unset;
	    		width: auto;

	    		@media only screen and (max-width: 767px) {
				    opacity: 1;
				}
			}

			&:hover {
				img {
					opacity: 1;
					transform: scale(1.2);
					-webkit-transition: all 500ms ease;
				    transition: all 500ms ease;
				}
			}
		}
	}
}


.version-2 {
	padding: 0 120px;

	@media(max-width: 1600px){
		padding: 0 60px;
	}
	@media(max-width: 1300px){
		padding: 0 20px;
	}
	@media(max-width: 1300px){
		padding: 0;
	}

	.testimonial-image-v2 {
		.images-box-v2 {
			.list-images-v2 {
			    position: relative;
			    display: block;
			    overflow: hidden;
			    border-radius: 8px;

			    &:before {
			    	position: absolute;
				    top: 0;
				    left: 0;
				    height: 100%;
				    width: 100%;
				    content: "";
				    background: rgba(255, 157, 0, .90);
				    border-radius: 8px;
				    -webkit-transition: all 700ms ease;
				    -ms-transition: all 700ms ease;
				    -o-transition: all 700ms ease;
				    transition: all 700ms ease;
				    -webkit-transform: translateY(-100%);
				    -ms-transform: translateY(-100%);
				    -o-transform: translateY(-100%);
				    -moz-transform: translateY(-100%);
				    transform: translateY(-100%);
				    z-index: 1;
			    }

			    img {
			    	width: 100%;
				    border-radius: 8px;
				    -webkit-transform: scale(1);
				    transform: scale(1);
				    -webkit-transition: opacity 500ms ease, -webkit-transform 500ms ease;
				    transition: opacity 500ms ease, -webkit-transform 500ms ease;
				    transition: transform 500ms ease, opacity 500ms ease;
				    transition: transform 500ms ease, opacity 500ms ease, -webkit-transform 500ms ease;
			    }

			    .icon-box-v2 {
			    	position: absolute;
				    top: 0;
				    left: 0;
				    right: 0;
				    bottom: 0;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    opacity: 0;
				    -webkit-transform: translateY(50px);
				    -ms-transform: translateY(50px);
				    transform: translateY(50px);
				    z-index: 2;
			    }

			    a {
			    	text-decoration: none;
			    	color: #fff;
				    font-size: 40px;
				    -webkit-transition: all 500ms ease;
				    transition: all 500ms ease;
			    }
			}

			&:hover {
				.list-images-v2 {
					
					&:before {
						opacity: 1;
						transform: translateY(0%);
					}

					img {
						transform: scale(1.05);
					}

					.icon-box-v2 {
					    -webkit-transform: translateY(0);
					    -ms-transform: translateY(0);
					    transform: translateY(0);
					    opacity: 1;
					    transition: all 500ms ease 500ms;
					    -webkit-transition: all 500ms ease 500ms;
					    -ms-transition: all 500ms ease 500ms;
					    -o-transition: all 500ms ease 500ms;

					    a {
					    	&:hover {
					    		color: #000;
					    	}
					    }
					}
				}
			}
		}
	}
}

.version-3 {
	padding: 0 120px;

	@media only screen and (max-width: 1660px) {
	    padding: 0 60px;
	}
	@media only screen and (max-width: 1500px) {
	    padding: 0;
	}
	.testimonial-image-v3 {
		.images-box-v3 {
			position: relative;
    		display: block;

    		.list-images-v3 {
    			position: relative;
			    display: block;
			    border-radius: 8px;
			    overflow: hidden;
			    width: 100%;

			    .icon-box-v3 {
			    	position: absolute;
				    top: 0;
				    left: 0;
				    text-align: center;
				    height: 100%;
				    width: 100%;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    flex-direction: column;
				    opacity: 0;
				    -webkit-transform: translateY(70px);
				    -ms-transform: translateY(70px);
				    transform: translateY(70px);
				    -webkit-transition: all 500ms ease;
				    transition: all 500ms ease;
    				padding: 30px;

    				&:before {
					    position: absolute;
					    top: 30px;
					    left: 30px;
					    right: 30px;
					    bottom: 30px;
					    content: "";
					    background: #ff6d12;
					    opacity: 0.9;
					    border-radius: 8px;
					    -webkit-transition: all 500ms ease;
					    transition: all 500ms ease;
    				}

    				h2.title {
    					margin: 0;
    					font-size: 40px;
					    color: #fff;
					    line-height: 50px;
					    margin-bottom: 6px;
					    position: relative;
    				}

    				ul.list-unstyled {
					    padding: 0;
    					margin: 0;
    					list-style: none;

    					li {
    						position: relative;
    						display: inline-block;
						    margin: 0;
    						padding: 0;

    						a {
    							font-size: 20px;
    							font-weight: 400;
							    color: #fff;
							    -webkit-transition: all 500ms ease;
							    transition: all 500ms ease;
							    text-decoration: none;
    							background-color: transparent;

    							&:hover {
    								color: #2c2734;
    							}
    						}
    						span {
    							font-size: 20px;
    							color: #ffffff;
    						}
    					}
    				}

    				a.img-popup {
    					text-decoration: none;
    					width: 35px;
					    height: 35px;
					    font-size: 14px;
					    border-radius: 8px;
					    background-color: #fff;
					    display: flex;
					    justify-content: center;
					    align-items: center;
					    text-align: center;
					    color: #2c2734;
					    position: absolute;
					    top: 40px;
					    left: 40px;
					    transition: all 500ms ease;

					    &:hover {
					    	background-color: #2c2734;
					    	color: #fff;
					    }
    				}
			    }
    		}

    		&:hover {
    			.list-images-v3 {
				    .icon-box-v3 {
				    	opacity: 1;
					    -webkit-transform: translateY(0px);
					    -ms-transform: translateY(0px);
					    transform: translateY(0px);
				    }
				}
    		}
		}
	}
}

.fancybox-container {
    .fancybox-infobar, .fancybox-toolbar {
    	padding: 100px;
    	font-size: 20xp;

    	@media(max-width: 600px) {
    		padding: 20px;
    	}
    	@media(max-width: 320px) {
    		padding: 20px 0;
    		padding-left: 5px;
    	}
    }
}