/* BLOCKS CSS  */

/*************************************************************************/
/* Testimonial Slider Carousel  */



.res-testimonial .carousel-indicators {
	padding-top: 20px;
}
.res-testimonial .carousel-indicators li {
    width: 1.8rem;
	background-color: #ccc;
	height: 2px;
}
.res-testimonial .carousel-indicators .active {
    opacity: 1;
	background-color: #232323;
}

.res-testimonial .referenz-text {
	font-size: 140%;
	line-height: 160%;
	font-weight: 300;
}
.res-testimonial .referenz-text span {
	display: none;
}
.res-testimonial .referenz-person {
}
.res-testimonial .referenz-image img{
	max-width: 100px;
	margin: 0 auto;
}
.referenz-image-circle {
	border-radius: 100%;
}

.res-testimonial .referenzBox{
	min-height: 400px;
}

@media only screen and (max-width: 970px) {
	.res-testimonial .referenzBox {margin: 0 5px;}
	.res-testimonial .referenz-text {font-size: 120%;line-height: 155%;}
}

/* ------------  res Quotes   ---------------- */

.res-with-quotes p { 
	margin: 0 35px;
	display: block;
}
.res-with-quotes p:before,
.res-with-quotes p:after {
	content: "\f100";
	font-family: "Font Awesome 6 Pro";
	position: absolute;
	margin-left: -35px;
	text-decoration: inherit;
	font-weight: 300;
	font-size: 110%;
	opacity: 0.4;
}
.res-with-quotes p:after {
	content: "\f101";
	margin-left: 15px;
}

@media only screen and (max-width: 970px) {
	.res-with-quotes p:before {	margin-left: -20px;}
	.res-with-quotes p:after {margin-left: 8px;}
}


/* ------------  Carousel UI  ---------------- */


.res-testimonial .carousel-control-next-icon:after,
.res-testimonial .carousel-control-prev-icon:after{
    content: '\f054';
    font-size: 160%;
    color: #bbb;
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
	transition: all .3s ease-in-out;
}
.res-testimonial .carousel-control-prev-icon:after {
    content: "\f053";
}
.res-testimonial .carousel-control-prev-icon:hover:after,
.res-testimonial .carousel-control-next-icon:hover:after{
    opacity: 1;
	color: #000;
	transition: all .7s ease-in-out;
	transform: scale(1.1);
}

@media only screen and (max-width: 970px) {
	.res-testimonial .carousel-control-prev-icon:after, 
	.res-testimonial .carousel-control-next-icon:after {
		font-size: 160%;
		color: #999;
	}
} 


.res-testimonial .carousel-caption.position-relative {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #000;
    text-align: center;
}

.res-testimonial .carousel-caption.position-absolute {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #000;
    text-align: center;
}

.res-testimonial .carousel-indicators {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 15;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none; 
    margin: 0 auto;
}

.res-testimonial .carousel-control-prev, 
.res-testimonial .carousel-control-next {
    width: 10%;
}
.res-testimonial .carousel-control-prev {
    transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}
.res-testimonial .carousel-control-next {
    transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
}



/* ------------  Container handle Desktop for Sliders ---------------- */

@media only screen and (min-width: 1280px) {

	/*  Align WIDE  */
	.res-testimonial.alignwide .inner-container.container-wide,
	.res-testimonial.alignwide .inner-container.container-off {
			max-width: 90%;
			margin: 0 auto;
			width: 100%;
			padding: 0 15px;
	}	
	/*  Align FULL  */
	.res-testimonial.alignfull .inner-container.container-off,
	.res-testimonial.alignfull .inner-container.container-wide {
			max-width: 80%;
			margin: 0 auto;
			width: 100%;
			padding: 0 15px;
	}
}
@media only screen and (max-width: 970px) {
	.res-res-testimonial.alignfull .inner-container.container-off { 
		max-width: 80%; margin: 0 auto;
	}
}



/* ------------  CMS Backend Preview ---------------- */

.acf-block-preview .res-testimonial {
	position: relative;
	padding: 10px 30px;
	border-left: 1px solid #f4f4f4;
}

.acf-block-preview .res-testimonial h1,
.acf-block-preview .res-testimonial h2,
.acf-block-preview .res-testimonial h3 {
	font-size: 22px;
	line-height: 24px;
	padding: 0;
	margin: 10px 0;
}
.acf-block-preview .res-testimonial .txt-text p {
	font-size: 16px !important;
	padding: 0;
	margin: 10px 0;
}
.acf-block-preview .res-testimonial .txt-text a {
	color: #000;
	text-decoration: none;
}
.acf-block-preview .res-testimonial .txt-text ul,
.acf-block-preview .res-testimonial .txt-text li{
	font-size: 16px !important;
	line-height: 20px;
	padding: 4px 0;
	margin: 0 0 0 15px;
}
.acf-block-preview .res-testimonial .txt-text .btn {
	font-size: 14px !important;
	padding: 8px 16px;
	margin: 8px 0;
	border: 0;
	background-color: #eee;
}

.acf-block-preview .res-testimonial .row{
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
}
.acf-block-preview .res-testimonial .row > div:nth-child(1){
}
.acf-block-preview .res-testimonial .row > div:nth-child(2){
	max-width: 50%;
	padding-left: 20px;
}
.acf-block-preview .res-testimonial .row > div:nth-child(2) img{
	max-width: 300px;
}
.acf-block-preview .res-testimonial .layout-3.row .txt-image50-50{
	width: 50%;
}
.acf-block-preview .res-testimonial .layout-3.row .txt-image50-50 img{
	max-width: 100%;
}
.acf-block-preview .res-testimonial .layout-3.row {
	max-width: 1100px;
	margin: 0 auto;
	border: 1px solid #eee;
	padding: 20px;
}


.acf-block-preview .res-testimonial .img-txt-front {position: relative;z-index: unset;top: unset;right: unset; left: unset; max-width: 80%;}
.acf-block-preview .res-testimonial .txt-para-box .img-parallax-background{display: none;}
.acf-block-preview .res-testimonial .txt-para-box { width: 100%; max-height: 300px; overflow: hidden;}