/*
Theme Name: duiswebtheme
Author: Marc Hendricks
Author URI: https://www.duisweb.de
Description: Duisweb Vorlage Testversion
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: duiswebtheme
Template: astra
*/

/* lato-700 - latin-ext_latin */


/* Seitentitel der Startseite ausblenden */
body.home .entry-title {
display: none;
}


/* Einsatzlinks nebeneinander für Monatsarchiv */

.einsatzlinks li {
display:inline;
	padding: 0px 30px 0px 0px;
        margin-right: 0px;
        margin-top: 7px;
        border: none;
        line-height: 25px;
}

.einsatzlinks li a {
	white-space: nowrap;
}

.einsatzlinks li::marker {
content:"";
}


/* Schriftarten selbst definiert, nur Größe über Astra, sonst alles auf inherit */




/* Änderungen für Diakompass*/

div.facebook-eintrag-icon svg {
	
	width: 30px;
height: 30px;
}

.ast-float {
	
	float:right !important;
}

.ast-post-format-.blog-layout-1 div.post-content.ast-grid-common-col div.entry-content.clear p {
	max-width:70%;
}

.single .entry-header .ast-single-post-order + .post-thumb img {
  max-width:50%;
	margin-top: 0em;
  margin-bottom: 0;
  float: right;
}

.ast-post-format-.single-layout-1 div.entry-content.clear p {
	max-width:100%;
}

.ast-post-format-.single-layout-1 div.entry-content > p:nth-child(1) {
	margin-bottom: 8em;
}

li.wp-social-link.wp-social-link-instagram.wp-block-social-link {
	margin-bottom:0.75em !important;
}


.sucheimheader.wp-block-search div.wp-block-search__inside-wrapper button.wp-block-search__button.wp-element-button:hover {
color: #ffffff;
background-color: var(--ast-global-color-1);
border-color: var(--ast-global-color-1);
}

.sucheimheader.wp-block-search div.wp-block-search__inside-wrapper input#wp-block-search__input-1.wp-block-search__input {
	border-color: var(--ast-global-color-0);
}

.sucheimheader.wp-block-search div.wp-block-search__inside-wrapper input#wp-block-search__input-1.wp-block-search__input:focus {
	border-color: var(--ast-global-color-1);
}

.sucheimheader.wp-block-search label.wp-block-search__label strong {
	color: var(--ast-global-color-0);
	font-size:12px;
}

form.wpcf7-form.init p label {
	display:block;
	max-width:80%;
	color:var(--ast-global-color-2);
}

.wpcf7-acceptance span.wpcf7-list-item {
	
	display: inline-block;
    margin: 0 0 0 0em;
}

.wpcf7 input:not([type="submit"]), .wpcf7 select, .wpcf7 textarea {

  padding: .75em;
  background-color: #ffffffab;
}

ul.wp-block-categories-list.alignleft.listenansicht.wp-block-categories {
	list-style:none;
}

.wp-block-navigation__responsive-container .wp-block-navigation-link a {
  color: var(--ast-global-color-0);
}

.wp-block-navigation__responsive-container .wp-block-navigation-link a:hover {
  color: var(--ast-global-color-1);
}


.ast-archive-description .ast-archive-title {
  margin-bottom: 10px;
  text-transform: none;
}

/*
.widget_logo {
	
	max-width: 1240px;
	margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
*/

.header-bild {
	
	margin: 0 0 0 0;
}

.ast-builder-menu-1 .menu-item > .menu-link:before {
  color: #ffffff !important;
}

.main-header-menu .sub-menu {

  background: #ffffff;
  left: -999em;
  position: absolute;
  top: 100%;
  z-index: 99999;
 
}

.svg-home {
	width:20px !important;
  background-image: url("./img/home-icon-w.png");
background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0 0 30px 0 !important;
  margin-bottom: 0px;

}

.listenelement {
	
	padding-left:1em;
}

.listenelement > li {
	
	margin-bottom:1em;
}

figure.wp-block-image.alignleft.size-full {
	
	margin-top:10px;
}

div.ast-blog-featured-section.post-thumb.ast-grid-common-col.ast-float {
	
	max-width: 30%;
	margin-left: 40px;
}

.ast-search-menu-icon.ast-dropdown-active svg {
  visibility: visible;
  opacity: 1;
  position: relative;
  color:#3aaa35 !important;
}

h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background {
  padding: 0.25em 0.375em;
}

.aktuelles-startseite.wp-block-latest-posts li a.wp-block-latest-posts__post-title {
	font-size: 20px;
	color: var(--ast-global-color-8);
}

.aktuelles-startseite.wp-block-latest-posts li div.wp-block-latest-posts__post-excerpt {
	font-size: 16px;
}

.termine-startseite.wp-block-latest-posts li a.wp-block-latest-posts__post-title {
	display:none;
}

.termine-startseite.wp-block-latest-posts li div.wp-block-latest-posts__post-full-content p {
	font-weight:600;
}

.termine-seitenleiste.wp-block-latest-posts li a.wp-block-latest-posts__post-title {
	display:none;
}

.termine-seitenleiste.wp-block-latest-posts li div.wp-block-latest-posts__post-full-content p {
	font-weight:400;
	font-size:16px !important;
}

.mehrerfahren-startseite a.wp-block-button__link {
	
	margin-top:1em;
}

#astra-footer-menu li > a::before {
	content: ""; 
	color: none;
  display: inline-block; 
  width: 1em;
  margin-left: 0em;
  } 
  
#astra-footer-menu li > a:hover {

	color: #e66507;
  
  }

.ast-search-menu-icon.ast-dropdown-active .search-field {
  width: 200px;
}
.diabetesfreundlich {
max-width: 25%;
margin-top: 0em;
margin-bottom: 0;
float: right;
}

/* Änderungen für Diakompass bis hier*/



#primary-slider {
    border-top: 1px dashed;
    border-bottom: 1px dashed;
}

/* Engebettete SVG Formatierungen */

 ol.has-text-color li {
	display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill: %23ffbf00;' d='M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 15px 57px;
  background-repeat: no-repeat; 
  background-position: left top;
  padding-left: 25px;
  padding-top: 15px;
  line-height: 1.4;
  margin-left: -20px;
}




.svg-stift {
	width:100px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z'%3E%3C/path%3E%3C/svg%3E");
background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: center center;
  border-bottom: 2px dotted #000;
  padding: 0 0 50px 0 !important;
  margin-bottom: 10px;
}

.svg-lupe {
	width:100px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z'%3E%3C/path%3E%3C/svg%3E");
background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: center center;
  border-bottom: 2px dotted #000;
  padding: 0 0 50px 0 !important;
  margin-bottom: 10px;
}

.svg-chart {
	width:100px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z'%3E%3C/path%3E%3C/svg%3E");
background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: center center;
  border-bottom: 2px dotted #000;
  padding: 0 0 50px 0 !important;
  margin-bottom: 10px;
}

.card > .card-front > div:nth-child(1) > p {
	margin-bottom:10px;
}

.svg-star {
	width:100px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'%3E%3C/path%3E%3C/svg%3E");
background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0 0 50px 0 !important;
  margin-bottom: 0px;
}

.SEOkartenGruppe {
	
	padding: 1em !important;
}

.SEOsubHead {
	
	margin-bottom: 0 !important;
}

.SEOkartenText {
	line-height: 1.4;
	
}



.SEOkartenGruppe .wp-block-group__inner-container:hover {
background: rgba(255, 172, 4,.29);
border-color: #ffd38a;
border-radius: 2px;

}



/* CSS für das Accordion Page Template */

/* Acordeon styles für die Kontakt-Seite*/
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #424143;
  font-size:16px;
  overflow: hidden;
  margin-bottom:25px;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: none;
  border: 1px solid #CCC;
  border-radius:0px;
  font-weight: normal;
  line-height: 3;
  cursor: pointer;
 
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #fffdf5;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100vh;
}
/* Icon */
.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tab input[type=checkbox] + label::after {
  content: "+";
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

/* CSS für das Himalayas Contact Us Widget */

/* Funktion nicht überprüft da es momentan nicht benötigt wird*/


.contact-title {
	margin-bottom: 26px;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
	color: #534f4f;
	font-weight: 300;
	height: 38px;
	margin-bottom: 2px;
	font-size: 14px;
}

.contact-form-wrapper textarea {
	height: 100px;
	resize: none;
}

.contact-form-wrapper input[type="submit"] {
	background: #32c4d1;
	color: #ffffff;
}

.contact-form-wrapper input[type="submit"]:hover {
	background: #28a8b3;
}

.detail-block {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 7px;
	padding-bottom: 7px;
}

.detail-block:last-child {
	border-bottom: none;
}

.detail-title i {
	font-size: 18px;
	width: 22px;
}

.detail-text {
	font-size: 15px;
	font-weight: 300;
	padding-left: 27px;
}

.detail-block {
	margin-bottom: 15px;
}

#map iframe {
	display: none;
	width: 100%;
	height: 620px;
}

.map-btn {
	background: #333333 none repeat scroll 0 0;
	border-radius: 5px 5px 0 0;
	color: #ffffff;
	cursor: pointer;
	line-height: 33px;
	margin: 0 auto;
	text-align: center;
	text-transform: uppercase;
	width: 80px;
}

.detail-block p {
	margin-bottom: 0;
}


/* Adresse Telefonnummer über dem Sticky Header - nicht sticky */

.ast-above-header-bar {
    padding: 0px 0;
    background-color: #1F1F1F !important;
    border-bottom: 0 solid rgba(255, 255, 255, 0.5);
    transition: all 0.35s;
}
section#block-17.widget.widget_block ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

section#block-17.widget.widget_block ul li {
    display: inline-block;
    margin-right: 24px;
	color: #CBC9CF;
}

section#block-17.widget.widget_block ul li img {
	
	padding-right: 5px;
	padding-bottom:2px;
}

section#block-17.widget.widget_block ul li span {
	font-family: "Open Sans";
  font-weight: 300;
	font-size:14px;
}


/* CSS-Code für Logowechsel für Javascript-Zusammenspiel */

.ast-logo-title-inline .ast-site-identity {
	padding-bottom: 0;
	
}
.custom-logo {
  transform: translateY(0);
  opacity: 1;
}

/*
.site-logo-img.first .custom-logo {
    animation: logoIn .5s;
    // transform: translateY(0);
    // opacity: 1;
  }
.site-logo-img.second .custom-logo {
    animation: logoOut .3s;
    transform: translateY(0px);
    opacity: 1;
  }
*/

@keyframes logoIn {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes logoOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: translateY(-70px);
  }
}

.custom-logo-second {
  transform: translateY(70px);
  opacity: 0;
	margin-top:-70px;
}
.site-logo-img.second .custom-logo-second{
    animation: wordIn .3s;
    opacity: 1;
    transform: translateY(0);
  }
.site-logo-img.first .custom-logo-second {
    animation: wordOut .5s;
    opacity: 0;
    transform: translateY(70px);
  }


@keyframes wordIn {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes wordOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: translateY(70px);
  }
}













/*Slider Formatierungen */

.slide-content {
    position: absolute;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3)));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    padding-bottom: 20px;
    padding-left: 5%;
    position: absolute;
    width: 100%;
    text-align: left;
}

.slide-content a {
	
	color: #ffbf00;
}

Element {
}
.splide__arrow--next {
    right: 1em;
}
.splide__arrow {
    
    background: #fdbe00c2 !important;
}





figure.wp-block-image.size-full.is-resized > img:nth-child(1) {
  clip-path: polygon(0 0, 10% 0, 100% 80%, 0 0%);
    transition: 0.5s ease-in;
}

figure.wp-block-image.size-full.is-resized > img:nth-child(1).is-visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}




/* Animate Elements wit Intersection Observer */

.item {
  opacity: 0;
  transition: opacity .2s;
}

.item.animate {
  animation-name: fadeIn;
    animation-duration: 2.5s;
    animation-fill-mode: both; 
}


/*
div.wp-block-group.timeline--entry.item.animate:before {
	animation-name: fadeLeft;
    animation-duration: 5.5s;
    animation-fill-mode: both; 
	
}
*/

div.wp-block-group.timeline--entry.item.animate:before {
	animation-name: fadeInUp;
    animation-duration: 3.5s;
    animation-fill-mode: forward;
	
}


.timeline--entry.item.animate:nth-of-type(even)  {
	
	animation-name: fadeInLeft;
    animation-duration: 2.5s;
    animation-fill-mode: both;
 
}

.timeline--entry.item.animate:nth-of-type(odd) {
	animation-name: fadeInRight;
    animation-duration: 2.5s;
    animation-fill-mode: both;
}



@keyframes fadeIn {

    0% {
    opacity: 0;
    
    -webkit-transform: translate3d(0,40%,0);
    transform: translate3d(0,40%,0);
    }

    100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }
}



@-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  background-color: #ff6c00;
  -webkit-transform: translate3d(-100%, 100%, 0);
  transform: translate3d(-100%, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeft {
  0% {
  opacity: 0;
  background-color: #ff6c00;
  -webkit-transform: translate3d(-100%, 100%, 0);
  transform: translate3d(-100%, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 



@-webkit-keyframes fadeInRight {
  0% {
  opacity: 0;
  background-color: #ff6c00;
  -webkit-transform: translate3d(100%, 100%, 0);
  transform: translate3d(100%, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInRight {
  0% {
  opacity: 0;
  background-color: #ff6c00;
  -webkit-transform: translate3d(100%, 100%, 0);
  transform: translate3d(100%, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 
  
  
@-webkit-keyframes fadeInUp {
  0% {
  opacity: 0;
  background-color: #ff6c00;
  -webkit-transform: translate3d(0, 2000px, 0);
  transform: translate3d(0, 2000px, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInUp {
  0% {
  opacity: 0;
  background-color: #ff6c00;
  -webkit-transform: translate3d(0, 2000px, 0);
  transform: translate3d(0, 2000px, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 






/* Crossfade Image Block Markup */



.intro {
  position: relative;
  margin: 2em;
  padding: 0.2em 0.6em;
  cursor: pointer;
  color: #fff;
  font-size: 2em;
  max-width: 26em;
}
.intro h1 {
  margin-bottom: 0.5em;
  line-height: 1;
  font-weight: 100;
}
.CrossFade {
  
  background: #ffbf00;
  display: flex;
  align-items: flex-end;
  /* height: 100vh; */
  max-width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;
 
}
.CrossFade figure {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  background: #000;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  opacity: 0;
  transform: scale(1.4) rotate(12deg);
  -webkit-animation: CrossFade 24s infinite;
          animation: CrossFade 24s infinite;
}



.CrossFade figure:nth-child(3) {
	margin:0;
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
.CrossFade figure:nth-child(2) {
	margin:0;
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
}
.CrossFade figure:nth-child(1) {
	margin:0;
  -webkit-animation-delay: 18s;
          animation-delay: 18s;
}



@-webkit-keyframes CrossFade {
  25% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  40% {
    opacity: 0;
  }
}
@keyframes CrossFade {
  25% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  40% {
    opacity: 0;
  }
}



  
/* Hier Code für die Flip Card Animationen */  

div.wp-block-group.flip div.wp-block-cover__inner-container {
		margin-left: 0;
margin-right: 0;
	width:85% !important; /* Randproblem Überschrift front nicht centered */
	max-width:380px !important;
	position:absolute;
	z-index:1;
}


  .flip {
  position: relative;
  padding: 0 !important;
}
.flip .front,
.flip .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.5s;
  transition-property: transform, opacity;
}
.flip .front {
  transform: rotateY(0deg);
}
.flip .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}
.flip:hover .front {
  transform: rotateY(180deg);
}
.flip:hover .back {
  opacity: 1;
  transform: rotateY(0deg);
}
.flip.flip-vertical .back {
  transform: rotateX(-180deg);
}
.flip.flip-vertical:hover .front {
  transform: rotateX(180deg);
}
.flip.flip-vertical:hover .back {
  transform: rotateX(0deg);
}

.flip {
  position: relative;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 1em;
  width: 380px;
}
.flip .front,
.flip .back {
  display: block;
  color: white;
  width: inherit;
  background-size: cover !important;
  background-position: center !important;
  height: 100%;
  padding: 1em 2em; 
  background: #313131;
  border-radius: 10px;
}
.flip .front p,
.flip .back p {
  font-size: 0.9125rem;
  line-height: 160%;
  color: #999;
}

.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}


/* Shape Dividers fuer Gutenberg Cover Block - muss eine Gruppe drumherum für oben und dann noch eine Gruppe drumherum für unten */

.shapedividers_com-4740{
overflow:hidden !important;
position:relative;
/* Padding top 0 sonst wird der Rand oben abgeschnitten */
padding-top:0;
}
.shapedividers_com-4740::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 129% 73px;
background-position: 50% 0%;    
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 76.2" preserveAspectRatio="none"><g fill="%23fffae5"><path d="M381 76.2l-12.7-8.47c-12.7-8.46-38.1-25.4-63.5-28.23-25.4-2.72-50.8 8.39-76.2 5.66-25.4-2.83-50.8-19.76-76.2-18.36-25.4 1.51-50.8 21.09-76.2 28.23-25.4 7.15-50.8 1.33-63.5-1.4L0 50.8V0h381z"/><path d="M381 67.73l-12.7-4.23c-12.7-4.23-38.1-12.7-63.5-12.7s-50.8 8.47-76.2 7.06c-25.4-1.5-50.8-12.62-76.2-11.3-25.4 1.33-50.8 15.62-76.2 21.17-25.4 5.56-50.8 2.91-63.5 1.4L0 67.74V0h381z" opacity=".66"/></g></svg>'); 
}

@media (min-width:768px){
.shapedividers_com-4740::before{
background-size: 128% 105px;
background-position: 50% 0%;  
transform: rotateY(180deg); 
}  
}
 
@media (min-width:1025px){
.shapedividers_com-4740::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 146% 133px;
background-position: 50% 0%; 
transform: rotateY(180deg); 
}
}
@media (min-width:2100px){
.shapedividers_com-4740::before{
background-size: 146% calc(2vw + 133px);
}
}

/* ab hier rand unten */

.shapedividers_com-6063{
overflow:hidden !important;
position:relative;
/* Padding top/bottom 0 sonst wird der Rand oben abgeschnitten */
padding-top:0;
padding-bottom:0;
}
}
.shapedividers_com-6063::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 100% 73px;
background-position: 50% 100%;    
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%23fffae5" d="M0 32l48 32c48 32 144 96 240 106.7 96 10.3 192-31.7 288-21.4 96 10.7 192 74.7 288 69.4 96-5.7 192-79.7 288-106.7s192-5 240 5.3l48 10.7v192H0z"/><path fill="%23fffae5" opacity=".66" d="M0 64l48 16c48 16 144 48 240 48s192-32 288-26.7C672 107 768 149 864 144s192-59 288-80 192-11 240-5.3l48 5.3v256H0z"/></svg>'); 
}

@media (min-width:768px){
.shapedividers_com-6063::before{
background-size: 100% 100px;
background-position: 50% 100%;   
}  
}
 
@media (min-width:1025px){
.shapedividers_com-6063::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 102px;
background-position: 50% 100%; 
transform: rotateY(180deg); 
}
}
@media (min-width:2100px){
.shapedividers_com-6063::before{
background-size: 100% calc(2vw + 102px);
}
}
 
/* Box flip neu responsive */

	.card {
  
  height: 400px;
  width: 300px;
  
  transform-style: preserve-3d;
  perspective: 600px;
  transition: 0.5s;
}
.card:hover .card-front {
  transform: rotateX(-180deg);
}
.card:hover .card-back {
  transform: rotateX(0deg);
}

.card-front {
  height: 100%;
  width: 100%;
  /* background-image: url(); */
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  
  top: 0;
  left: 0;
  background-color: #000000;
  backface-visibility: hidden;
  transform: rotateX(0deg);
  transition: 0.5s;
  padding: 2em !important;
  border-radius: 4px;
}


.card-back {
	border-radius: 4px;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000000;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  transition: 0.5s;
  color: #ffffff;
  text-align: center;
}
.card-back h2 {
  margin: 60% auto 35% auto;
  font-size: 26px;
}
.card-back h2 span {
  font-size: 20px;
}
.card-back a {
  height: 20px;
  width: 20px;
  padding: 5px 5px;
  border-radius: 4px;
  line-height: 20px;
}
.card-back a:hover {
  color: #000000;
  background-color: #fff;
}

/*Test Testimonial Slider - CSS Slideshow mit Keyframes Mediaevent*/

.css-slides {
	max-width:initial !important;
	width:initial !important;
	margin:0 !important;
	padding-top:0 !important;
	padding-left:0;
	padding-right:0;
	position:relative;
	height:0;
	
	padding-bottom: calc(480/500 * 100%) !important;
	overflow:hidden;
	display:block;
}



.css-slides img { 
    
    opacity:0; 
    animation-name: fade; 
    animation-duration: 9s; 
    animation-iteration-count: infinite; 
    position:absolute; 
    left:0; 
    right:0; 
}

@keyframes fade {
	0%      { opacity: 0; }  /** fadeIn beginnt            **/
	11.11%  { opacity: 1; }  /** Bild steht                **/
	33.33%  { opacity: 1; }  /** Bild bleibt zwei Sekunden **/
	44.44%  { opacity: 0; }  /** fadeOut beendet           **/
	100%    { opacity: 0; }
}

.css-slides > div:nth-child(1) > figure:nth-child(1) > img { animation-delay: 0s; }
.css-slides > div:nth-child(1) > figure:nth-child(2) > img { animation-delay: 3s; }
.css-slides > div:nth-child(1) > figure:nth-child(3) > img { animation-delay: 6s; } 



/*Test Testimonial Slider von testseite3*/

.slider {
  position: relative;
  padding-top:0px !important;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
 width:450px;
  height: 450px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.slider__list {
  position: absolute;
  left: 0;
  max-width:initial !important;
  width: 1350px !important;
}

ul.slider__list li {
	list-style:none;
}

ul.slider__list li img {
  float: left;
  padding: 10px;
}

ul.slider__list {
  -webkit-animation-name: autoplay;
  animation-name: autoplay;
  /* This will change the time it takes to move to next slide */
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


@-webkit-keyframes 
autoplay {   /* position of the first slide */
  0% {
 left: 0;
}
  /* position of the second slide */
  50% {
 left: -450px;
}
  /* position of the third slide */
  100% {
 left: -900px;
}

}

@keyframes 
autoplay {   /* position of the first slide */
  0% {
 left: 0;
}
  /* position of the second slide */
  50% {
 left: -450px;
}
  /* position of the third slide */
  100% {
 left: -900px;
}

}