.recommendation-block {
	display: flex;
	height: 20em;
	width: 31em;
}

.recommendation-right {
	position: relative;
	scale: 90%;
	transform: translateY(-10mm);
}

.recommendation-block .recommendation-image {
	width: 80mm;
	height: 80mm;
	position: absolute;
	border-radius: 50%;
}

.recommendation-block .recommender-image {
	position: absolute;
	border-radius: 50%;
}

.recommendation-link {
	position: absolute;
	background-size: cover;
	background-image: url("recommendation-link.svg");
	z-index: -1;
	width: 38mm;
	height: 6mm;
	transform-origin: center left;
	opacity: 0.42;
}
.recommendation-link-1 {
	left: 64mm;
	top: 17mm;
	transform: rotate(-35deg);
}
.recommendation-link-2 {
	left: 71mm;
	top: 40mm;
	transform: rotate(5deg);
}
.recommendation-link-3 {
	left: 59mm;
	top: 62mm;
	transform: rotate(35deg);
}
.recommendation-shadow {
	box-shadow: 0px 3px 6px #00000029;
	width: 80mm;
	height: 80mm;
	position: absolute;
	border-radius: 50%;
	z-index: -2;
}

@keyframes scaleBump {
	0% { transform: scale(1); }
	50% { transform: scale(1.5); }
	100% { transform: scale(1); }
}

div.recommender-image.in-view {
	animation: scaleBump 0.5s ease-in-out normal;
}

div.recommender-image {
	width: 30mm;
	height: 30mm;
	box-shadow: 0px 3px 6px #00000029;
}
div.recommender-image-1 {
	left: 93mm;
	top: -23mm;
}
div.recommender-image-2 {
	left: 108mm;
	top: 33mm;
}
div.recommender-image-3 {
	left: 87mm;
	top: 80mm;
}
img.recommender-image {
	opacity: 0.42;
	height: 100%;
	width: 100%;
}
img.recommender-image:hover {
	cursor: pointer;
	opacity: 1 !important;
}
.recommender-name {
	font-size: 1em !important;
	opacity: 0.42;
	width: 10cm;
	position: absolute;	
}
.recommendation-active * {
	opacity: 1 !important;
	font-weight: bold !important;
}
.recommender-name-1 {
	top: 8mm;
	left: 113mm;
}
.recommender-name-2 {
	top: 64mm;
	left: 128mm;
}
.recommender-name-3 {
	top: 111mm;
	left: 107mm;
}

.recommendation-quote {
	padding: 20px 30px 20px 0px;
	/* height: 8rem; */
}

.recommendation-heading {
	/* height: 6rem; */
}


/* ----- MOBILE -------- */
@media only screen and (max-width: 1200px){
	.recommendation-heading{
		height: auto;
		text-align: center;
	}

	.recommender-box{
		display: none;
	}

	.recommendation-quote{
		padding: 20px !important;
	}

	.recommendation-block {
		display: flex;
		flex-direction: column-reverse;
		height: auto;
		width: 100%;
		margin-top: 100px !important;
	}

	.recommendation-block .wp-block-buttons{
		text-align: center;
	}

	.recommendation-shadow{
		display: none !important;
	}

	.recommendation-block .recommendation-image{
		margin-left: auto;
		margin-right: auto;
		position: relative;
		width: 200px;
		height: 200px;
		box-shadow: 0px 3px 6px #00000029;
	}
}