/* BLOCKS CSS  */

/*************************************************************************/
/* Text Txt  */



.res-txt .txt-section {
}

.res-txt .txt-title-field h1 {
	font-size: 300%;
}
.res-txt .txt-title-field h2 {
}
.res-txt .txt-title-field h3 {
}
.res-txt .txt-text-field {
}

.res-txt .layout-1-spalte1 {
}
.res-txt .layout-1-spalte2 {
}

.res-txt .layout-3 .btn-float-right .title-only-btns {
	font-size: 85%;
	padding-right: 20px;
}
 
/* Custom Title Class */
.res-txt .custom-title {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
}

.res-txt .res-txt-arrow{
	transition: all 0.5s ease-in-out;
}
.res-txt .res-txt-arrow a{
	color: #222;
}
.res-txt .res-txt-arrow:hover{
	transform: translateY(5px);
}


.res-text-bild .txt-text ul {
	list-style: none;
	font-size: 90%;
	padding: 10px 0 10px 0;
}
.res-text-bild .text li {
    padding-bottom: 10px;
    margin-left: 33px;
}
.res-text-bild .text li:before {
	content: "\f111";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    margin-left: -30px;
	margin-top: 2px;
    text-decoration: inherit;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    opacity: 0.7;
}


/* ------------  Container handle Desktop ---------------- */

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

	/*  Align WIDE  */
	.res-txt.alignwide .inner-container.container-wide,
	.res-txt.alignwide .inner-container.container-off {
			max-width: 90%;
			margin: 0 auto;
			width: 100%;
			padding: 0 15px;
	}	
	/*  Align FULL  */
	.res-txt.alignfull .inner-container.container-off,
	.res-txt.alignfull .inner-container.container-wide {
			max-width: 80%;
			margin: 0 auto;
			width: 100%;
			padding: 0 15px;
	}
	
}

@media only screen and (max-width: 970px) {
	.res-txt.alignfull .inner-container.container-off { max-width: 80%; margin: 0 auto;}
	.res-txt.alignfull.layout03 .inner-container{max-width: unset;margin: unset;	width: unset;padding: unset;}	
}


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

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

.acf-block-preview .res-txt h1,
.acf-block-preview .res-txt h2,
.acf-block-preview .res-txt h3 {
	font-size: 22px;
	line-height: 24px;
	padding: 0;
	margin: 10px 0;
}
.acf-block-preview .res-txt .txt-section p {
	font-size: 16px !important;
	padding: 0;
	margin: 10px 0;
}
.acf-block-preview .res-txt .txt-section a {
	color: #000;
	text-decoration: none;
}
.acf-block-preview .res-txt .title-only-btns a {
	color: #000;
	text-decoration: none;
	font-size: 14px;
	padding: 8px;
	margin: 0 8px;
}


.acf-block-preview .res-txt .txt-section ul,
.acf-block-preview .res-txt .txt-section li{
	font-size: 16px !important;
	line-height: 20px;
	padding: 4px 0;
	margin: 0 0 0 15px;
}
.acf-block-preview .res-txt .txt-section .btn {
	font-size: 14px !important;
	padding: 8px 16px;
	margin: 8px 0;
	border: 0;
	background-color: #eee;
}

.acf-block-preview .res-txt .layout-1.txt-section .row,
.acf-block-preview .res-txt .layout-2.txt-editor-spalten .row {
	display: flex;
	flex-wrap: wrap;
}
.acf-block-preview .res-txt .var-2spalten {
        padding: 15px;
}
.acf-block-preview .res-txt .col-md-4.var-2spalten,
.acf-block-preview .res-txt .txt-editor-spalten .col-md-4 {
    flex: 0 0 30%;
}
.acf-block-preview .res-txt .col-md-5.var-2spalten,
.acf-block-preview .res-txt .txt-editor-spalten .col-md-5 {
    flex: 0 0 40%;
}
.acf-block-preview .res-txt .col-md-6.var-2spalten,
.acf-block-preview .res-txt .txt-editor-spalten .col-md-6 {
    flex: 0 0 48%;
}
.acf-block-preview .res-txt .col-md-7.var-2spalten,
.acf-block-preview .res-txt .txt-editor-spalten .col-md-7 {
    flex: 0 0 60%;
}
.acf-block-preview .res-txt .col-md-12.var-2spalten,
.acf-block-preview .res-txt .txt-editor-spalten .col-md-12 {
    flex: 0 0 100%;
}

.acf-block-preview .res-txt .var-2spalten.postContent,
.acf-block-preview .res-txt .txt-editor-spalten .text-spalten-spalte02 {
    flex-basis: 0;
    flex-grow: 1;
}



/* VIDEO HTML PLAY Block ****************************************************************/
.res-vid-container{
	position: relative;
}
.res-vid-main {
	position: relative;
	z-index: 1;
	height: 100%;
}
.res-vid-overlay {
	position: relative;
	height: 100%;
}
.res-vid-overlay .res-vid-poster {
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 99%;
	z-index: 2;
}
.res-vid-overlay .res-vid-poster video {
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: auto;
}
.res-vid-overlay .res-vid-poster img {
	object-fit: cover;
	max-width: 100%;
}

.res-vid-play-btn {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: -60px;
	z-index: 10;
}
.res-vid-play-btn:after {
	content: "\f04b";
	font-size: 36px;
	padding-left: 8px;
	line-height: 400%;
	font-family: "Font Awesome 6 Pro";
	font-weight: 700;
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 1.0);
	margin-left: -70px;
	color: #0F9BFF;  /* brandcolor */
	top: 50%;
	left: 50%;
	box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.video-play {
	position: relative;
}

@media only screen and (max-width: 1100px) {
	.res-vid-play-btn:after { font-size: 270%;line-height: 280%; }
}

@media only screen and (max-width: 970px) {
	.res-vid-progressbar-container { height: 3px;}
	.res-vid-control { font-size: 75%; }
	.res-vid-mute-btn, .res-vid-playback-btn, .res-vid-reset-btn { padding: 2px 5px; }
	.res-vid-play-btn { bottom: 0; z-index: 10;}
	.res-vid-play-btn:after { width: 70px; height:70px; font-size: 22px;line-height: 330%; margin-left: -45px; padding-left: 2px;}
}

@media only screen and (max-width: 480px) {
	.res-video-play-html .html-video {
		height: 50vw;
		position: relative;
	}
}